/* Stylesheet DIENSTMANN 
* Author: http://dienstmann.ch
* Copyright (c) 2014-2024 DIENSTMANN
*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* border: 1px solid #000; */
}

body, h1, h2, h3, h4, h5, h6, b, strong {
  /* font: 300 18px 'Raleway',Arial,Helvetica,sans-serif; */
  font-family: 'Raleway',Arial,Helvetica,sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #fff; /* white */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: rgb(217, 196, 142); /* Gold */
}

.page-wapper {
  margin: 0;
}

header {
  padding: 1em 0 0.4em 0;
}

p {
  font-size: 16px; /* 0.9em */
}

h1 {
  font-weight: 300; /* DIENSTMANN wie auf Karte */
  font-size: 38px;
  text-align: center;
  margin: 0 0 0.2em 0.15em;
}

h2 {
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 0.4em 0;
}

h3 {
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0 0 0.4em 0;
}

h4 {
  font-weight: 500;
  font-style: italic;
  letter-spacing: 1px;
  margin: 0 0 0.4em 0;
}

.mainContent {
  padding: 1em;
  background-color: rgba(77, 81, 84, 0.9); /* Grau */
}

.footerContent {
  padding: 1em;
  background-color: rgba(217, 196, 142, 0.8); /* Gold */
}

.logoPicture {
  width: 105px; /* halbe Logo Grösse */
  margin: auto;
}

.logoPicture:hover {
  opacity: 0.8;
}

.navPictureButler, .navPictureGesellschaft, .navPictureOlivierKeller {
  display: none;  /* Nav Bilder verstecken */ 
}

.navPoint {
  width: 15px; /* halbe Grösse */
  /* float: none; am Text ausgerichtet */ 
  float: left; /* links ausgerichtet */ 
}

.navText {
  display: block; /* Nav Punkte und Texte anzeigen */
}

img {
  max-width: 100%;
  height: auto;
}

a, a:hover, a:focus {
  color: inherit;
  background: none;
  outline: 0;
}

.nav li a {
  font-size: 18px; /* 1.1em */
  letter-spacing: 1px;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0.2em;
}

.nav a {
  font-weight: 500;
}

.nav a:hover, .nav a:focus, .nav li.active a, .nav li.active a:hover, .nav li.active a:focus {
  font-weight: 700;
}

.nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li a:hover, .nav-pills li.active a:focus {
  color: inherit;
  background-color: inherit;
}

.formset label {
  font-size: 16px; /* 0.9em */
  font-weight: 300;
  text-align: top;
  margin-top: 0.6em;
}

.formset input, .formset textarea {
  width: 100%;  
  font-weight: 500;
  letter-spacing: 1px;
  background-color: rgba(217, 196, 142, 0.2); /* Gold */
  border: none;
  border-radius: 0.3em;
  padding: 0.3em;
}

.formset textarea {
  height: 5em; /* 3 Zeilen */
  resize: none; /* Grösse nicht veränderbar */
}

.formset input:focus, .formset textarea:focus {
  outline: 0;
  border: none;
}

.formset input::-moz-placeholder, .formset textarea::-moz-placeholder {
  font-weight: 300;
  color: #fff;
  opacity: 1;
}
.formset input:-ms-input-placeholder, .formset textarea:-ms-input-placeholder {
  font-weight: 300;
  color: #fff;
}
.formset input::-webkit-input-placeholder, .formset textarea::-webkit-input-placeholder {
  font-weight: 300;
  color: #fff;
}

.formset label[class=checkbox] {
  width: 92%;
  float: right;
  margin-top: 0;
}

.formset input[type=checkbox] {
  width: 8%;
  float: left;
  line-height: 0.3em;
  background-color: inherit;
}

.submit-btn {
  background-color: rgb(217, 196, 142); /* Gold */
  font-weight: 500;
  border: none;
  /* Kreis Button */
  border-radius: 50%;
  padding: 1.45em 0.4em 1.45em 0.4em;
}

.submit-btn:hover {
  opacity: 0.8;
}

.mainConditions {
  padding: 1em;
}

footer {
  font-size: 16px; /* 0.9em */
  padding: 1em 1em 1em 1em;
}

footer p {
  font-size: 16px; /* 0.9em */
}

@media only screen and (min-width: 36em) {
  body {
    background: url("../img/olivier_1.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(217, 196, 142); /* Gold */
  }

  @media only screen and (min-width: 48em) { /* @screen-sm-min */
    .mainContent {
      margin: 0 0 0 -1em;
    }

    .logoPicture {
      width: 140px;
    }

    .navPictureButler {
      position: fixed;
      top: 60%;
      left: 1%;
      width: 200px; /* halbe Nav Grösse */
      display: block; /* Nav Bild anzeigen */
    }

    .navPictureButler:hover {
      opacity: 0.8;
    }

    .navPictureGesellschaft {
      position: fixed;
      top: 73%;
      left: 15%;
      width: 200px; /* halbe Nav Grösse */
      display: block; /* Nav Bild anzeigen */
    }

    .navPictureGesellschaft:hover {
      opacity: 0.8;
    }

    .navPictureOlivierKeller {
      position: fixed;
      top: 80%;
      left: 37%;
      width: 124px; /* zwei Drittel Nav Grösse */
      display: block; /* Nav Bild anzeigen */
    }

    .navPictureOlivierKeller:hover {
      opacity: 0.8;
    }

    .navText {
      display: none; /* Nav Text verstecken */
    }

    .nav > li > a {
      padding-bottom: 0; /* lässt Abstand von Menü verschwinden */
    }

    @media only screen and (min-width: 62em) { /* @screen-md-min */
      .mainContent {
         max-width: 31em; /* die Hälfte von 62 */
      }
    }
  }
}