/* Kommentar mit STRG + Shift + 7
************************
Farben
hellgrau =     #E5E5E5
blau =         #1F4E8C
dunkelgrau =   #3d3f45
rot =          #A62C21


  */

  /* globale Einstellungen für alle Seiten    */
html{
  font-size: 16px;
}

body {
  margin: 0;
  font-family: 'Raleway','Lato', 'Helvetica Neue', 'Arial',sans-serif;

}

* {
  box-sizing: border-box;
}

:focus{
  outline: none;
  box-shadow: 0 0 5px 2px #E5E5E5, 0 0 10px #E5E5E5;

}

section{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
/* Generelles    */


.clearfix::after{  /* säubert float Probleme    */
  context:"";
  display: block;
  clear: both;
}

.intro-container{
  text-align: center;
  width: 80%;
  margin-left: auto; /* damit es weiterhin nach der 80 % zentriert ist    */
  margin-right: auto;/* damit es weiterhin nach der 80 % zentriert ist    */
  margin-bottom: 2.5rem;
}

@media (max-width:1366px){
  .intro-container{
  width: 90%;
  }
  section{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (max-width:1024px){
  .intro-container{
  width: 100%;
  }
  section{
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width:768px){

  section{
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

.intro-container > h1{
  font-size: 1.6rem;
}

.intro-container > p{
  font-size: 1.2rem;
}
/* Navigationsleiste */
#NavigationsleisteOben {
  width: 100%;
  height: 50px;
  background-color: #3d3f45;
  position: relative;
  font-weight: bold;
  font-size: 1.1rem;
}
#NavigationsleisteOben a>img {
  height: auto;
  width: 70px;
  float: left;
  margin: .35rem;
}

#NavigationsleisteOben ul{
  margin: 0; /* Abstand nach oben    */
  padding: 0; /* Abstand nach links   */
  float: right;
  height: 100%;
}

#NavigationsleisteOben ul > li{
  display: inline-block;/*in einer Zeile darstellen*/
  height: 100%;
  padding: 0 .4rem 0 .4rem;
}

#NavigationsleisteOben ul > li > a{
  margin-top: .8rem;
  display: inline-block; /*in einer Zeile darstellen*/
}

#NavigationsleisteOben .col-6{
  padding-top: 0;
  padding-bottom: 0;
}

#NavigationsleisteOben .container,
#NavigationsleisteOben .row,
#NavigationsleisteOben .col-6
{
  height: 100%;
}
/* link, visited, hover, activate immer in dieser Reihenfolge!   */
#NavigationsleisteOben ul > li > a:link{
  color:#fff;
  text-decoration: none; /* Link nicht unterstrichen   */
}

#NavigationsleisteOben ul > li > a:visited{
  color:#fff;
  text-decoration: none
}

#NavigationsleisteOben ul > li > a:hover{
  color:#E5E5E5;
  text-decoration: none
}

#NavigationsleisteOben ul > li > a:active{
  color:#E5E5E5;
  text-decoration: none;
}

.logo-link{
  display: inline-block;
}

/*Navigationsleiste Mobil*/
#mobile-nav-button{
  color: #fff;
  float: right;
  font-size: 2rem;
  border: 2px solid #fff;
  width: 37px;
  height: 37px;
  position: relative;
  margin-top: .4rem;
  margin-bottom: 8px;
}

#mobile-nav-button > span{
  position: absolute;
  bottom: -2px;
  left: 7px;

}
#mobile-nav-content > ul > li{
  display: block; /*untereinander*/
  background-color: #3d3f45;
  height: 50px;
  padding: 0 1.2rem;
  text-align: center;/*Texte in dropdown zentriert*/
}

#mobile-nav-dropdown{
  position: relative;/*Pos in Abhängigkeit der Seite*/
  display: inline-block;
  float: right;
}

#mobile-nav-content{
  position: absolute;/*Pos fest innerhalb mobile-nav-dropdown*/
  right: 0;/*ganz nach rechts*/
  top: 50px; /*50 pxnach unten*/
  display: none;/*Das Menü  soll grundsätzlich nix angezeigt werden*/
}

#mobile-nav-dropdown:hover > #mobile-nav-content{ /*wenn Maus über Button, dann soll der Content also das Menü angezeigt werden*/
  display: block;
}

.aktiv {
  background-color: #A62C21 !important; /*lässt keine andere backgroundcolor für dieses Element und Unterelemente mehr zu*/
}

#mobil-nav{
  display: none;
}
@media(max-width:768px){ /*ist die Bildschirmbreite max 768 ?, dann*/
  #desktop-nav {
    display: none;
  }
  #mobil-nav{
    display: block;
  }
}
/*Header*/

#header-banner{
  width:auto;
  height: 0;
   /*Höhe in Abhängigkeit von der Breite 400px hoch / 1920px breit /100=20,83% */
  padding-top: 20.83%;
  background: url("../IMG/hintergrund.jpg") no-repeat;
  background-size: contain;/*ist für die Anpassung des Hintergrundsbildes verantwortlich */
}

#header-banner-klein{
  width:auto;
  height: 0;
   /*Höhe in Abhängigkeit von der Breite 400px hoch / 1920px breit /100=20,83% */
  padding-top: 15.625%;
  background: url("../IMG/hintergrund-klein.jpg") no-repeat;
  background-size: contain;/*ist für die Anpassung des Hintergrundsbildes verantwortlich */
}

/*
GRID-System Sichtbarkeit
.border, .border *{  /*Regeln für alle Border und alle Nachfahrenelemente
  border: 1px solid #91c4ff;
}
[class*='col-'] {
  background-color: #bfddff;
}

p{
  background-color: #91c4ff;
  padding: 0;
  margin: 0;
  color: #fff;
  text-align: center;
}
*/

/*GRID-System*/

.container{
  width: 95%;
  margin-left: auto; /*beide Margins damit der Container zentriert bleibt*/
  margin-right: auto;
}

.row::after{ /*hier gehts um die Zeilen*/
  content: ""; /*kein Inhalt also keine Höhe*/
  clear: both; /*keine Flows also Überschneidungen auf beiden Seiten*/
  display: block; /*damit die Zeile auch die gesamte Zeile einnimmt*/
}

[class*='col-'] {/*wählt alle Klassen, die ein "Col-" im Namen haben */
  float: left;
  min-height: 1px;
  padding: .8rem; /*Innenabstand */
}

.col-1{width: 16.666%;}
.col-2{width: 33.333%;}
.col-3{width: 50%;}
.col-6{width: 100%;}

@media (max-width: 1024px) {
  .col-1{width: 33.333%;}
}

@media (max-width: 768px) {
  .col-1{width: 50%;}
  .col-2{width: 100%;}
  .col-3{width: 100%;}
}
@media (max-width: 480px) {
  .col-1{width: 100%;}
  .col-2{width: 100%;}
  .col-3{width: 100%;}
}

/*Bereich Leistungen aus Index-Seite*/
.leistungen-box{
  background-color: #E5E5E5;
  text-align: center;
  padding: 1rem 3rem 2.5rem;
  height: 200px;
  min-width: 200px;


}

@@media (max-width:1366px) {
  .leistungen-box{
    width: 80%;

  }
}

@@media (max-width:1024px) {
  .leistungen-box{
    width: 100%;
  }
}

.leistungen-box > h2{
  font-size: 1.2rem;
}

.leistungen-ansehen-button{
  text-decoration: none;
  height: 40px;
  border: 2px solid white;
  display: inline-block; /*wird benötigt, damit das Anker-Element die Höhe annimmt*/
  padding-top: .5rem; /*Abstand Btn-Text nach oberen Rand*/
  width: 40%; /*relative Breite des Buttons zum col-Element*/
  margin-top: 1rem; /*Abstand vom Button nach oben zum Text*/
  min-width: 100px;
}

.leistungen-ansehen-button:link{
  color: #fff;
}
.leistungen-ansehen-button:visited{
  color: #fff;
}
.leistungen-ansehen-button:hover{
  color: #A62C21;
  font-weight: bold;
  border-color: #A62C21;
  transition: border .7s ease-in-out;
}
.leistungen-ansehen-button:active{
  color: #fff;
}

/*Über mich Bereich aus Index-Seite*/

#ueber-uns-bereich {
  background-color: #E5E5E5;
  margin-top: 250px;
  width: 93.8%;
  margin-left: auto;
  margin-right: auto;
}

#ueber-uns-container {
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#ueber-uns-container > img {
  position: absolute;
  top: 0;
  right: 3%;
  height: 300px;
  width: auto;
  border-radius: 50%;
}

#ueber-uns-container > p{
  position: relative;
  width: 70%;
  font-size: 1.2rem;
}
@media (max-width: 1280px){
  #ueber-uns-container > img {
    right: 0%;

  }

  #ueber-uns-container > p{
    width: 60%;
  }
}

@media (max-width: 768px){
  #ueber-uns-container > img {
    display: none;

  }

  #ueber-uns-container > p{
    width: 100%;
  }
}


/*FOOTER aus Index-Seite*/

#footer{
  background-color: #3d3f45;
  height: 2.8rem;
  color: #fff;
}

#footer-nav{
  display: inline-block;
  float: right;
}

#footer-nav a{
  color: #fff;
  text-decoration: none;
}

#footer-nav a:link{
  color: #fff;
}

#footer-nav a:visited{
  color: #fff;
}

#footer-nav a:active{
  color: #fff;
}

#footer-nav a:hover{
  color: #E5E5E5;
}

@media(max-width: 565px){
  #footer span {
    display: none;
  }
}


/*Kontakt-Seite*/

#kontakt-formular input, #kontakt-formular textarea{
  width: 100%;
  border: 2px solid #3d3f45;
  padding: 0.8rem;
  font-size: 1rem;
  font-family: 'Raleway','Lato', 'Helvetica Neue', 'Arial',sans-serif;
  color: #3d3f45;
  transition: border .7s ease-in-out;
}
#kontakt-formular textarea{
  height: 150px;
}

#kontakt-formular{
  text-align: center;
  width: 80%;
  margin-left: auto; /* damit es weiterhin nach der 80 % zentriert ist    */
  margin-right: auto;/* damit es weiterhin nach der 80 % zentriert ist    */
  margin-bottom: 2.5rem;
}

.button-typ3{
  border: 2px solid #3d3f45;
  background-color: transparent;
  font-size: 1rem;
  color: #3d3f45;
  width: 200px;
  height: 45px;
}

#kontakt-formular input:hover,#kontakt-formular input:focus, #kontakt-formular textarea:hover,#kontakt-formular textarea:focus, #kontakt-formular button:hover{
  border: 2px solid #A62C21;
}

@media (max-width:1366px){
  #kontakt-formular{
  width: 90%;
  }
  section{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (max-width:1024px){
  #kontakt-formular{
  width: 100%;
  }
  section{
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width:768px){

  section{
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

@media (max-width:768px){
  #kontakt-formular button{
    width: 100%;
  }
}
/*BildDrehenderKopf*/

/*test keyframes
@keyframes AnimationBildDrehenderKopf {
  0%{ transform: rotateZ(0deg);}
  8.33%{ transform: rotateZ(25deg);}
  16.66%{ transform: rotateZ(75deg);}
  24.99%{ transform: rotateZ(25deg);}
  33.32%{ transform: rotateZ(40deg);}
  41.65%{ transform: rotateZ(15deg);}
  49.98%{ transform: rotateZ(0deg); }
  58.31%{ transform: rotateZ(-25deg);}
  66.64%{ transform: rotateZ(-75deg);}
  74.97%{ transform: rotateZ(-25deg);}
  83.3%{ transform: rotateZ(-40deg);}
  91.63%{ transform: rotateZ(-15deg);}
  100%{ transform: rotateZ(0deg);}

}



#BildDrehenderKopf {

  animation: AnimationBildDrehenderKopf 6s ease-in-out infinite alternate;

}
*/
#BildDrehenderKopf:hover{
  transform: rotateZ(360deg);
}
#BildDrehenderKopf{

  transition: transform 4s;


}