@charset "utf-8";
/* RESET==> Ränder auf Null* * * * * * * * */
*{
		 margin: 0;   
	 	 padding: 0; 
	 	 box-sizing: border-box;/*Breite = content und padding und border (idm für Höhe)*/
}


/*HTML*/
html {
	  	 min-height: 100%;/* min-height: 100% = /*Unser Inhaltsbereich soll die komplette Browserhöhe mindestens nutzen, damit es funktioniert muss man die Anweisung position: relative geben*/
	 	 position: relative;/* das Element wird relativ zu seiner ursprünglichen Position auf der Seite verschoben.*/
	  	 font-size: 100%;/* Browserstandard: 16px = 1rem */		
}
/*BODY*/
body{
		font: 400 15px/24px 'Lato', sans-serif;		
		background-color: #dadbdf;
		/*p437 sticky footer*/
		display:flex;/*sticky footer ==>durch diese Massnahme werden die anderen Layoutbereiche zu Flex-Items. (sie werden so  hoch wie der Inhalt)*/
		flex-flow:column; /*sticky footer ==> /* dreht die Hauptachse um 90 Grad die Layoutelemente stehen untereinander*/
		
		min-height: 100vh;/*sticky footer ==> body ist der flex Container und mindestens so hoch wie der Viewport =100vh*/
				
		margin:0;/*sticky footer*/
		/*scroll-behavior: smooth; /* Bitten den Browser sanft nach oben zu Scrollen? */
}
/*Darkmode aktivieren*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  	color:#FFF;
  }
}
/*noscript-Fallback*/
#oben noscript p {
        color: red;
        font-size: 1.2em;
        text-align: center;
        margin: 20px;
}
/*versteckter titel*/
#oben .site-header #nav #hauptnav {
		color: #FFF;
		font-size: 1.9em;
        text-align: center;
        margin: 10px;
}
/*HEADER -Hamburger rechts - vorher .site-header span*/
#oben .site-header .hauptbutton {
		float : right;
		margin: 9px 24px 0 0;
		border-radius : 4px;
		padding : 1px 8px 3px 8px;
		background: #f66; /* Fallback */
		background : linear-gradient(to bottom, #f66, white);
		border-top: thin solid #000;      /* Für den oberen Rand */
		border-left: thin solid #000;     /* Für den linken Rand */
		border-right: thin solid #000;    /* Für den rechten Rand */

}
/*HEADER-LOGO*/
.logo{
		display: block;      /*Siehe HTML*/
	  	height: 108px;        /*Siehe HTML*/
		margin: 15px 0 10px 15px;
}

/*NAVIGATION - Klick Hamburger ==> Ganze Seite*/
#oben .site-header #nav{
		height: calc(100% - 30px);  /* Höhe des Viewports minus das Padding */
    	padding-top: 30px;           /* Padding wird normal angewendet */ 
	 	width: 0; 				/* 0 width - change this with JavaScript */
		
	  	position: fixed; 		/* Stay in place */
	  	z-index: 3; 			/* Stay on top */
	  	top: 0; 				/* Stay at the top */
	  	left: 0;
	  	overflow-x: hidden; 	/* Disable horizontal scroll */
		
	  	transition: width 0.5s; 		/* 0.5 second transition effect to slide in the navigation */
	  	text-align: center;
	  	background-color: #000;
}
/* NAVIGATION - Klick Hamburger ==> Listenpunkte*/
.nav__list li{
		margin-top:24px;
  		position:relative;  /* Elternelement */
}
/* NAVIGATION - Klick Hamburger ==>  Links*/
.nav__list li a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font : 500 1.5625rem/2.25rem 'Lato', sans-serif;
		color:#f66; 	
		display: block;
		transition: 0.3s;  	
}
.nav__list li a:hover,
.nav__list li a:focus {
		color: #000;
		background-color: #fff;
}

/* NAVIGATION - Klick Hamburger ==> schiefes Kreuz X -Button*/
#oben .site-header #nav .nav__list li .closebtn{
		padding: 0 16px 0 16px;
		color: #f66;
		font-size: 1.9em;
		background-color: #000;

		border-top-color: #000;
		border-right-color: #000;
		border-bottom-color: #000;
		border-left-color: #000;
}
#oben .site-header #nav .nav__list li .closebtn:hover, 
#oben .site-header #nav .nav__list li .closebtn:focus {
		color : #000;
		background-color : #fff;

}
 
/*TRENNLINIE  ==>   zwischen ROW und FOOTER*/
#oben hr {
		border-top-width: 0.1px;
		border-top-style: solid;
		border-top-color: #333;
		margin:0 26px;
}
/*FOOTER*/
.site-footer{
		color:  #060606; 
		margin-top:auto;/*Diese Anweisung drückt den Footer nach unten ==> siehe sticky footer p.437 sowie unter body*/				
}
/*FLEXBOX*/
.site-footer nav ul{
		display: flex; /*flexbox*/
		flex-direction: row;
		flex-wrap: wrap;
		
		padding-top: 24px; /*Abstand zu hr!!! - padding nicht margin!!!*/		
}
.site-footer nav ul li{/* Flexbox Items*/
		flex: 1;/*will man   justify-content verwenden  muss man flex:1 inaktivieren*/
		
		list-style-type: none;
		text-align:center;
	
		border-right: thin solid #000;/*Rahmen ---Breite, Style, Farbe*/
		border-top: none;			
}
.site-footer nav ul li:last-child {/*FOOTER ==> li = Flexbox Items ==> dadurch wird der letzte vertikale Strich entfernt!*/
		border-style: none;
}
/*FOOTER - h2 -> Kontakt + Impressum + Datenschutzrichlinien*/
.site-footer nav ul li h2,
.site-footer nav ul li h3 {
    font: 700 1.125rem/1.8125rem 'Lato', sans-serif; /*18px/19px*/
    color: #000;
    padding-bottom: 6px;
}
/*FOOTER- p*/
.site-footer nav ul li p{
	  	font-size: 1.1rem;/*16px*/
	  	line-height: 1.625rem; /*26px*/
	  	font-family: 'Lato', sans-serif;
	
	  	padding-top: 7px;
		padding-bottom: 9px
}
/* FOOTER => SOCIAL MEDIA und Mail Adresse*/
.site-footer nav ul li p a{
		 font-size: 1.1rem;/*16px*/
	  	 line-height: 1.5rem;/*24px*/
	 	 color: #f03;
		 text-decoration: none;
}
/* FOOTER - p SOCIAL MEDIA und Mail Adresse:hover*/
.site-footer nav ul li p a:hover,
.site-footer nav ul li p a:focus {
		font-weight: 700;
	   	color:  #000; 
		background-color: #fff;
}


/*FOOTER ==> COPYRIGHT*/	
.site-footer nav ul li p span{
		font-size:1rem; /*16px*/
		font-weight: 500; 
		color: #000;
}

/*Externer Pfeil*/
.arrow::after{
		content: " \2197";/*Pfeil nach pinterest ...*/
		padding-left:1px;
}
/*Haupt -Navigation für Screanreader*/
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/*MEDIA QUERIES*/
@media screen and (max-width: 945px) {

}
		
@media screen and (max-width: 769px) {
/*HEADER -Hamburger rechts*/
#oben .site-header .hauptbutton {
		margin:9px 16px 0 0;
}	
/*FOOTER- p*/
.site-footer nav ul li p{
	  	font-size: 0.938rem;/*15px*/
	  	line-height: 1.5rem;/*24px*/
		font-weight:400;	
}
}

@media screen and (max-width: 545px) {
/*FOOTER - h2 -> Kontakt + Impressum + Datenschutzrichlinien*/
.site-footer nav ul li h2,
.site-footer nav ul li h3 {
    	margin-top: 30px;
}	
	
	
			
/*FOOTER - COPYRIGHT*/	
#oben .site-footer nav ul li p span{
		font-weight:400;
}
/*FOOTER ==> ul = Flexbox*/
.site-footer nav ul{
		flex-direction: column;
}
/*FOOTER ==> li = Flexbox Items*/
.site-footer nav ul li{
		/*Rahmen*/
		border-right-width: 0;
		border-top-style: none;
		border-right-style: none;
		margin: 0 26px; /*Länge des Striches*/
}				
}

@media screen and (max-width: 480px) {
/*Vertikale Linie*/
.main aside #subnavigation {
		float: right;
		border-right-width: thin;
		border-right-style: none;
		border-right-color: #333;
}	
}

