/*Hier wird der body margin auf 0 gesetzt und eine Hintergrundfarbe bestimmt*/
body{
  margin: 0%;
  background-color: #A9A9A9;
}

abbr {
	text-decoration: none;
	border-bottom: none;
}

/**/
header::after {
  content: '';
  display: table;
  clear: both;
}
/*alles im nav schwebt nach rechts*/
nav {
  float: right;
}
/*die navliste hat einen margin von 0 und einen padding von 0 und keine */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/*position*/
nav li {
  display: inline-block;
  margin-left: 30px;
  padding-top: 30px;
  position: relative;
}
/*schriftart*/
nav a {
  color: black;
  text-decoration: none;
  font-size: 16px;
}
/*was passiert beim hovern*/
nav a:hover {
  color: #808080;
}
/*Balken geht von links nach rechts*/
nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: lightgrey;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 200ms;
}
/*was passier wenn man hovert*/
nav a:hover::before {
  width: 100%;
}
/*wiss logo*/
.wiss{
  height: 60px;
}
/*text geht nach links*/
.left{
  text-align: left;
}
/*text geht nach rechts*/
.right{
  text-align: right;
}
/*schriftart*/
p{
  font-family: 'Playfair Display';
  font-size: 125%;
}
/*schriftart*/
h1{
  font-family: 'Playfair Display';
  font-size: 150%;
}
/*Schriftart*/
h2{
  font-family: 'Playfair Display';
  font-size: 150%;
}
/*Foto*/
#bewerbungsfoto{
  height: 160px;
  float: left;
}
/*schriftart von label*/
label{
  color: black;
  font-weight: lighter;
}
/*schriftart von legende*/
.lgd{
  font-family: "Times New Roman";
  font-size: 140%;
  color: black;
  font-weight: bold;
}
/*grösse*/
select{
  height: 30px;
  width: 120px;
}
/*Textfeld grösse*/
textarea{
  width: 260px;
  height: 100px;

}
/*Dropdown für Links*/
.drop {
  font-size: 16px;
}
.dropdown {
  position: relative;
  display: inline-block;
}
/*Wie die box ausseht*/
.links {
  display: none;
  position:absolute;
  background-color: #D3D3D3  ;
  min-width: 125px;
  box-shadow: 0px 8px 16px 0px grey;
  z-index: 1;
  margin: 0px;
  padding:0px;
}
/*links wie die angzeigt werden*/
li a .links {
  color: grey;
 padding: 14px 16px;
  display: block;
}
/*was bei einem hover passier*/
.dropdown:hover .links {
  display: block;
  animation: dropdown linear 3s 1;
}
/*dropdown grösse*/
.drop a{
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/*background für footer und schriftgrösse*/
footer{
    background: #A9A9A9 ;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}
/*für Home Icon*/
.home:before {
    content: "\f015";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
}
/*für Figur Icon*/
.person:before {
    content: "\f007";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;

}
/*für Sprechblase Icon*/
.kontakt:before{
  content: "\f27b";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
}

/*section wird hintergrund hellgrau*/
section{
  background-color: #F5F5F5 ;
  margin: 0%;
  padding: 10%;
}
/*italics wird fett gemacht*/
i{
  font-weight: bold;
  font-size: 14px;
}
/*Footer link wird schwarz gemacht*/
footer a {
  color: black;
  text-decoration: none;
}
/*Wie die box ausseht*/
.links2 {
  display: none;
  position:absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px grey;
  z-index: 1;
  margin: 0px;
  padding:0px;
}
/*links wie die angzeigt werden*/
li a .links2 {
  color: grey;
  display: block;
}
/*was bei einem hover passier*/
.dropdown:hover .links2 {
  display: block;
}
/*Textgrösse und Textfarbe*/
h3{
  font-size: 240%;
  text-align: center;
  font-weight: bold;
  text-decoration-line: underline;
}
/*Inputfeld wird Text border bestimmt*/
input[type="text"]{
  border: 1px solid black;
  border-radius: 3px;
}
/*Inputfeld wird Text border bestimmt*/
input[type="password"]{
  border: 1px solid black;
  border-radius: 3px;
}
/*Inputfeld wird grösse bestimmt*/
input[type="email"]{
  border: 1px solid black;
  border-radius: 3px;
}

/*Grässe wird bestimmt und wo es hinkommt*/
.log{
  width:70px;
  float:right;
  margin-right: 5px;
}
/*Abstand wird bestimmt*/
.lo{
margin: 10px 0px 5px 5px;
}
/*Abstand wird bestimmt*/
.logi{
  margin: 10px 0px 0px 5px;
}
/*versteckter inhalt wird gezeigt*/
.show {
  display: block;
}
/*Folie grösse wird bestimmt*/
.folie {
  display: none;
}
/*Cursor ist schwarz*/
.fleft, .fright, .fbadge {
  cursor:pointer;color: black;
}
/*Text schwebt nach rechts*/
.fright{
  float: right;
}
/*Text schwebt nach links*/
.fleft{
  float: left;
}
/*text in der mitte*/
h4{
  text-align: center;
}
/*Ein Pfeil*/
.projekte {
  border: grey solid;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  outline: none;
  transition: 0.4s;
  float: right;
  cursor: pointer;
}
/*Wenn man dr¨über hovert oder es aktiv ist dreht es sich und ist schwarz*/
.active, .projekte:hover {
  border-color:black;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
/*Inhalt wird versteckt*/
.inhalt {
  display: none;
  overflow: hidden;
}
/*button register wird verschoben*/
.register{
  margin-right: 5px;
}
/*Grösse vom Border wird festgelegt*/
.kasten{
  border: 10px solid transparent;
  padding: 10px;
}
/*Button*/
.buttonp{
  margin-left: 80%;
  margin-top: 10px;
  cursor: pointer;
}
/*Border erhält ein Muster*/
.kasten{
  border-image: url("../img/border.jpg") 30 round;
  background-color: white;
}
/*Macht den Text rot vom Formular(falsch)*/
label.error{
  color:red;
}
/*macht den Text grün vom Formular(richtig)*/
label.valid{
  color:green;
}
.kleben{
  position: fixed;
  width: 100%;
  z-index: 1;
}
.navlist{
  background-color:#A9A9A9;
}
.kleben + .text {
  padding-top: 20px;
}
.titel2{
  font-weight: 700;
  display: inline-block;
  font-size: 24px;
  animation: titel2 linear 4s 1;
	text-align: center;
}

@keyframes titel2{
  from{
    transform: rotate(-360deg);
    color: rgba(0,0,0,0);
	  text-align:left;
  }
  to{
    transform: rotate(0deg);
    color:rgba(0,0,0,1);
	  text-align:center;
  }
}
.titeldec span:nth-child(1){
  animation-delay: 0s;
}
.titeldec span:nth-child(2){
  animation-delay: 1s;
}
.titeldec span:nth-child(3){
  animation-delay: 2s;
}
.titeldec span:nth-child(4){
  animation-delay: 2s;
}
.titeldec span:nth-child(5){
  animation-delay: 3s;
}
.titeldec span:nth-child(6){
  animation-delay: 4s;
}
.titeldec span:nth-child(7){
  animation-delay: 5s;
}
.titeldec span:nth-child(8){
  animation-delay: 6s;
}
.titeldec span:nth-child(9){
  animation-delay: 7s;
}
.titeldec span:nth-child(10){
  animation-delay: 8s;
}
.titeldec span:nth-child(11){
  animation-delay: 9s;
}
.titeldec span:nth-child(12){
  animation-delay: 10s;
}
.titeldec span:nth-child(13){
  animation-delay: 11s;
}
.titeldec span:nth-child(14){
  animation-delay: 12s;
}
.titeldec span:nth-child(15){
  animation-delay: 13s;
}
.weitere-links::before {
  content: "\f0c9";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
}
.rechteck{
  list-style-type: square;
}
a{
  text-decoration:none;
}
.rechteck a:hover{
  color:grey;
}
.rechteck a{
  color:lightgrey;
}
.gif{
  height:100px;
}
.respnav{
  display: none;
}
@media only screen and (min-width:768px)and (max-width: 1024px) {

}
.flagge{
  background-image: url(../img/flagge.gif);
  background-size: contain;
  background-repeat: no-repeat;
}
html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: 'Playfair Display', serif;
  src: url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
}
.box {
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: lightgrey;
  overflow-x: hidden;
  transition: 0.5s;
}

#boxinhalt {
  position: fixed;
  z-index: -1;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  display: none;
}

.box a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.box a:hover, #boxinhalt a:focus {
  color: black;
}

.box .schliess {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.menu{
  font-size:30px;
  cursor:pointer;
}
.projekte2 {
  border: grey solid;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  outline: none;
  transition: 0.4s;
  cursor: pointer;
}
.projekte2:hover {
  border-color:black;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.titel1{
    position: absolute;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 4px;
    color: white;
    padding-top: 25%;
    animation: titel1 linear 2s 1;
  }
 @keyframes titel1 {
  from{
    color: rgba(0, 0, 0, 0);
    padding-top: 0%;
  }
  to{
    color: white;
    padding-top: 25%;
  }
}
.scrollinhalt {
  animation: scroll linear 2s 1;
  visibility: visible;
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.gerüst{
     display: inline-block;
     box-shadow: 2px 2px 20px black;
     border-radius: 5px;
     margin: 10%;

    }

.beschreibbild img{
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
 }
.titelbeschreib{
  text-align: center;
  padding: 10px;
 }

h1{
  font-size: 20px;
 }

.beschreib{
  padding: 3px;
  text-align: center;
  padding-top: 10px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index:1;
}
.mehrdazu{
  margin-top: 40px;
  margin-bottom: 10px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  padding:10px;
}
.mehrdazu:hover{
  background-color: black;
  color: white;
  transition: 0.5s;
  cursor: pointer;
}
#inhalt2, #inhalt4{
	display:none;
}
#inhalt2, #inhalt4{
  text-align: center;
	display:none;
}
#button2, #button4{
   margin:0 auto;
  display: none;
}
#button1, #button3{
   margin:0 auto;
}
.amehrdazu{
	animation: amehrdazu 2s linear 1;
}
@keyframe amehrdazu{
	from{
		color:rgba(0,0,0,0);
	}
	to{
		color:rgba(0,0,0,1);
	}
}

.htitel1{
  text-align: center;
font-size: 40px;
font-weight:bold;
letter-spacing:4px;
position:relative;
margin-bottom:20px;
animation:text 3s 1;
color:darkgrey;
}
.hometitel{
text-align:center;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
text-transform:uppercase;
display:block;
width:100%
}
@keyframes text{
0%{
color:black;
margin-bottom:-50px;
}
30%{
letter-spacing:8px;
margin-bottom:-50px;
}
80%{
letter-spacing:4px;
margin-bottom:-50px;
	
}
}
.htitel2{
text-align: center;
font-size:40px;
font-weight: bold;
color:darkgrey;
animation: text2 3s linear 1;
}
@keyframes text2{
	0%{
		text-align: center;
		visibility:hidden;
}
	80%{
		text-align: center;
		visibility:hidden;
	}
	90%{
		text-align:center;
		visibility:show;
	}
}
#homebild{
	background-image: url("../img/homebild.png");
    background-attachment: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	width:100%;
	height:1000px;
	
}
@media only screen and (min-width:320px)and (max-width: 580px) {
.weitere-links::before{
	margin-right: 10px;
	}
.kontaktformular{
	padding-top:200px;
  width: 85%;
  max-width: 600px;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 0 20px #000000b3;
	position:absolute;
}
	#bewerbungsfoto{
  display: none;
  }
  .nav{
    display: none;
  }
  .respnav{
    display:block;
    
	  float: right;
  }
  .flagge{
    height: 30px;
    padding-top: 25px;
  }
	video{
    height:auto;
	max-width: 100%;
  }
	html{
	width:100%;
	}
	.titel1{
		font-size: 52px;
	}
	.gerüst{
     display: inline-block;
     box-shadow: 2px 2px 20px black;
     border-radius: 5px;
     margin: 10%;
    }

.beschreibbild img{
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
 }
.titelbeschreib{
  text-align: center;
  padding: 10px;
 }

h1{
  font-size: 20px;
 }

.beschreib{
  padding: 3px;
  text-align: center;
  padding-top: 10px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index:1;
}
.mehrdazu{
  margin-top: 40px;
  margin-bottom: 10px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  padding:10px;
}
.mehrdazu:hover{
  background-color: black;
  color: white;
  transition: 0.5s;
  cursor: pointer;
}
#inhalt2, #inhalt4{
	display:none;
}

h1{
  font-size: 20px;
 }

.beschreib{
  padding: 3px;
  text-align: center;
  padding-top: 10px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index:1;
}
.mehrdazu{
  margin-top: 40px;
  margin-bottom: 10px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  padding:10px;
}
.htitel1{
font-size: 16px;
}
.hometitel{
text-align:center;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
text-transform:uppercase;
display:block;
width:100%
}
	#homebild{
	background-image: url("../img/homebild.png");
    background-attachment: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	width:100%;
	height:1000px;
}
.htitel2{
font-size:16px;
}
	.kontaktformular h1{
  margin-top: 0;
  font-weight: 150;
}
	.titel2{
		font-size:20px;
	}
}
.kontaktformular{
  width: 85%;
  max-width: 600px;
  background:  #F5F5F5;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 30px 40px;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 20px #000000b3;
  font-family: "Montserrat",sans-serif;
}
.kontaktformular h1{
  margin-top: 0;
  font-weight: 200;
}
.textbox{
  border:1px solid gray;
  margin: 8px 0;
  padding: 12px 18px;
  border-radius: 8px;
}
.textbox label{
  display: block;
  text-align: left;
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
}
.textbox input,.textbox textarea{
  width: 100%;
  border: none;
  background: none;
  outline: none;
  font-size: 18px;
  margin-top: 6px;
}
.send{
  display: inline-block;
  background: darkgrey;
  padding: 14px 0;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  width: 100%;
}
.send:hover{
  background: grey;
}
#homebild{
	background-image: url("../img/homebild.png");
    background-attachment: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	width:100%;
	height:1000px;
}