/* Testweise #ToDo deaktivieren nach Test: */
/* main, 
div,
section{ border: 2px solid black; } */
/* ENDE Testweise #ToDo deaktivieren nach Test */

:root{   
   box-sizing: border-box; 
 
   --space_stdrd:1em; 
   --pad: 1em;
   /* --width-net-fix: 33,3333%; */   
   /* --width-divider:1; */
   /* --width-flex:100%; */
}
 
.icon{ width: 3em }


h1{     
   /* font-family: "Courier New", Courier, monospace;  #Schriftfamilie Überschrift */
   margin-top:1em;
   margin-bottom:0.5em;
   font-size:150%;  
   text-align: center;
   color:var(--color-evening); 
} 

h4{ 
   margin-top:1em;
   margin-bottom:0.5em;
   font-style: bold;
   color:var(--color-midday) } 

h5{ 
   font-weight: bold;
   color:var(--color-afternoon) } 


html{ 
   font-family: Verdana, Geneva, sans-serif; /* Schriftfamilie restliche Elemente */
   color: #666; 
}

/* === #ToDo anpassen und entrümpeln! === */

body:hover>header:before{ 
content:"";
/* content:"!"; #ToCheck */
position:absolute;
right:3%;
bottom:-20px;
font-size:1.4em;
padding:10px;
background:#FF9;
border:1px solid ; 
border-color: var(--color-highl-dec-light);
color:var(--color-highl-dec-light);
}

body:hover>header:hover:after{
content:""; /* #ToCheck */
position:absolute;
right:3%;
bottom:-20px;
font-size:1.4em;
padding:10px;
background:lightgreen;
border:1px solid green;
color:green;
}

/* === ENDE #ToCheck Entrümpeln! === */


/* ----------------------------- Kopfbereich ------------------------------ */

/* header > div{background-color:var(--color-evening)} */
header{
   margin: auto; 
   background-color:var(--color-morning)}
   
/* --- Oberes Menü: --- */

/* Derzeit noch keine echte Navi, nur 2 verkettete Links #Later */  

/* #nav_top{ 
   \* text-align:center;
   margin: auto; *\
   margin-left: auto;
   margin-right: auto;
} */

#nav_pseudo_top {
   text-align: center;
   /* font-family: */
   height:30px;
   padding-top:5px; 
   /* border-bottom: 2px, solid, brown; #ToCheck: Funktioniert nicht */
   line-height:25px;
   /* background-color: var(--color-neutral); #ToCheck: Funktioniert nicht */
   /* background-color: #d3ba551c; */
   background-color: white; 
   color: var(--color-evening);    
 }
 
 #nav_pseudo_top a{
   /* border-left:1px solid; */
   padding: 10px; 
   color: inherit; 
   text-decoration: none;   
 }
 
/* #nav-top a:first-child{ border:none; } #LAter bei echtem Navi */


/* --- Banner: --- */

#banner_top {
   /* width: 550px;
   height: 561px; */
   overflow: hidden;
   background-image: url("../img/flur_nal_cut_0150_low.jpg");
   background-repeat: no-repeat;
   /* background-position: 0; */

   margin: auto; 
   min-height: 220px; 
   /* height: 300px; */ 
   padding: 0;
   margin: 0;
   background-repeat: no-repeat;
   background-position: center; 
   text-align:center;  
}

#banner_top h3 {
   margin: 0;
   padding: 0;
   font-family: Verdana, Arial, sans-serif;
   margin-top: 133px;
   /* margin-left: 25px; */
   text-align: center;
   /* color: var(--color-higlight-top); */
   color:  var(--color-higlight-top);
   text-shadow: 1px  1px 1px var(--color-evening),
                1px -1px 1px var(--color-evening),
               -1px  1px 1px var(--color-evening),
               -1px -1px 1px var(--color-evening);
   font-size: 58px;

   /* Innenabstände ober- und unterhalb des Textes */
   padding-left: 25px;
   padding-bottom: 15px;
  
   /* das durchscheinende Hintergrundbild definieren */
   background-image: url(white-banner.png);
   background-repeat: no-repeat;
   background-position: bottom;
}

#banner_top h3 a{
   color: inherit;
   text-decoration: none; 
} 


@media (min-width: 410px) {

/* --------------------------- Hauptnavigation: --------------------------- */

nav {
   background: var(--color-evening);
}

nav ul {
   margin: 0;
   padding: 0;
   list-style: none;
   justify-content: center; 
}

nav>ul {
   display: flex;
}

nav li {
   /* padding:0 2px; */
   margin: 0 2px;
   /* Formatierung*/
   background: var(--color-evening);
   flex: 1 1 auto;  
   /* color: var(--color-neutral); #ToCheck */
   /* color: #d3ba551c; */
   color: white; 
   /* color: var(--color-neutral); /* ToCheck: Funktioniert nicht */
}

nav li li {
   padding: 2px;
}

nav a {
   display: block;
   padding: 5px 1em;
   margin: 0 10px;
   text-align: center; 
   color: inherit;
   text-decoration: none;
}

/* Zustände: */
nav li:hover,
nav li:focus-within {
   background: var(--color-highlight-attent);
   color: black;
   /* var(--color-highl-att-light); */
}

/* Ausklappbare Bereiche kennzeichnen */
.sub {
   position: relative;
}

nav .sub:hover ul,
nav .sub:focus-within ul {
   width: 100%;
}

.sub:before {
   content: "";
   border: 7px solid transparent;
   border-top-color: inherit;
   border-bottom: none;
   display: table;
   position: absolute;
   right: 5px;
   top: 12.5px;
}

/* Aktivem Menüpunkt kennzeichnen: */
.active,
.active:hover,
.active:focus {
   background: var(--color-highlight-decent);
   color: var(--color-highl-dec-light);
}

/* ggf alternative Formatierung wenn .sub und .active*/
.active.sub:before,
.active.sub:hover:before,
.active.sub:focus:before {
   border-top-color: inherit;
}

/* Verstecken: */
nav li ul {
   position: absolute;
   left: -9999em;
}

/* Einblenden: */
nav li:hover ul,
nav li:focus-within ul {
   left: auto; 
   /* #ToCheck: Wie schafft man das mittig aufzuklappen statt links? */
}

/* open /close  linksstandardmäßig verstecken*/
.open,
.close {
   display: none;
}


/* ------------------------- Hauptbereich genrell ------------------------- */ 

.intro  p { text-align: center } 
}


/* -------------------------- Spalten / Raster: --------------------------- */

.wrap{
   /* max-width:100%; */
   margin-left:auto;
   margin-right:auto;
 }
 
.flex, .flex_w{
   display:flex;
}
 
.flex_w{
   flex-wrap:wrap;
}

/* Spaltenaufbau: */
 
/* Breiten / Anteile: */

/* ... #ToCheck ggfs. noch Teile übenehmen aus style_procreativ_general_2cons */

.pad{ 
   padding-left:var(--pad);
   padding-right:var(--pad);
}
 
 /* Float und flex: */
 
 .float_l{float:left;}
 .float_r{float:right;}
 
 .clear{clear:both;}
 .clearfix:before, .clearfix:after{
   content:"";
   display:table;
   clear:both;
 }
  
 .wrap{
   /* max-width:100%; */
   margin-left:auto;
   margin-right:auto;
 }
  
 .flex, .flex_w{
   display:flex;
 }
 
 .flex_w{
   flex-wrap:wrap;
 }

 
 /* Für wechselseitge Darstellung in Tabelle, zeilenweise rechts-links: */

.side_r_text{ text-align: left; }

.side_l_text { text-align: right; }

.side_r_text,
.side_l_text{ vertical-align: middle; }
 

/* --- Weitere Gestaltung des Hauptbereichs: --- */ 

main section  img, 
.cartplayer  img{ 
   width: 200px 
}

/* --- Tabellarische Darstellung: --- */

/* table{ cellspacing:10px; } #ToCheck */

table img{ width: 200px } 

tr {
   margin: 0;
   padding-top: 10px;
   padding-bottom: 10px;
}

td {
   margin: 0;
   padding-right: 10px;
   padding-left: 10px;
}

/* tr td { width:50% } */

td:first-child { width: 50%; }

td ul,
td p,
td a{ 
   font-size: 0.8em
}

/* ------------------------ ENDE Spalten / Raster ------------------------- */ 


footer { 
   border:none; border-top:1px solid grey;
   background-color: var(--color-evening);
   color:var(--color-neutral);
   text-align:center;
}


/* ------------------------ Responsive: -------------------------- */

/* Kleiner Bildschirme, Laptop: */
/* @media screen and (max-width:1024px){ } */
/* #Optimization */

/* Tablet: */
/* @media screen and (max-width:768px) {
   #ToDo: 
     - ??? oder:
     - Eventuell erst hier das Navi-Menü oben waagerecht anzeigen, 
     ansonsten bei größeren Screens senkrecht als Vorspalte 
   } */


@media screen and (max-width:600px) {  
/* #ToDo: Smartphone: */
/* @media screen and (max-width:400px) { */ 

   /* Spalten Auflösen */
   nav ul {
       display: block;
       justify-content: left; 
   }

   /* 2. ebene wieder anzeigen*/
   nav li ul {
       position: static;

   }

   /* Überschreibung Gestaltung */
   nav li {
       margin: 0;
   }

   nav li li {
       padding-left: 30px;
   }

   nav a {
      text-align: left;
   }   


   /* Zustände überschreiben */
   /* Optisches visualisierung der Unterpunkte falls gewünscht */

   /* #ToDo: Noch die Farben optimieren! */
   .sub:before {
       border: 0;
   }

   .sub li a:before {
       content: ">>"" ";
       font-size: 50%;
       float: left;
       padding-top: 2%;
       padding-right: 5px;
       padding-left: 7px;
       position: relative;
       left: -26px;
   }


   /* Liste ausblenden */
   nav>ul {
       display: none;
       /* wenn später einfahren animiert werden soll andere Technik verwenden */
   }

   /* Basistechnik show/hide */
   /* öffnen Link anzeigen */
   .open {
       display: block;
   }

   /* Navigationsliste wieder anzeigen wenn open angeklickt wurde */
   .open:target~ul {
       display: block;
   }

   /* Offnen verstecken wenn navi ausgeklappt */
   .open:target {
       display: none;
   }

   /* schließen link anzeigen*/
   .open:target~.close {
       display: block;
   }

   .open,
   .close {
       width: 2em;
       height: 1.5em;
       overflow: hidden;
       margin-left: auto;
       transition: all 1s;
       color: var(--color-highl_att-light);
       /* -> #ToDo: Farbe anpassen */
       /* Nur für Grunddarstellung nötig,
          Darstellungseigenschaften (display) sind nicht animierbar */
       /* display:inline-block; #ToCheck */
   }

   .open:hover,
   .close:hover {
       color: var(--color-highlight-decent); 
       /* Das ist auch die Farbe des Burger-Symbols */
   }

   /* Darstellung Hamburger mittels Border */
   .open:before {
       content: "";
       border-top: 5px solid;
       border-bottom: double 14px;
       display: inline-block;
       width: 80%;
       padding: 4px 0 0;
   }

   /* Schließensymbol */
   .close:before {
       content: "x";
       display: inline-block;
       width: 80%;
       text-transform: capitalize;
       font-size: 30px;
       line-height: 22px;
   }

   /* Überschreibungen für Animation */
   /* Navigation wieder anzeigen */
   .open:target~.resp-menu,
   .resp-menu {
       /* abschneiden an Höhe und animieren*/
       max-height: 0px;
       overflow: hidden;
       transition: max-height .6s ease-in-out, border 0.1s ease, transform 0.6s;
       width: auto;
       border: 0 solid;
       transform: scale(0.95);
       display: block;
      /* #ToCheck: wie macht man, dass der Burger auch ohne Hover hell ist? */ 
   }

   /* Angaben für transition */
   .open:target~.resp-menu {
       max-height: 50em;
       transition: all 1.5s ease-in-out, border 0.1s ease;
       border-top: 8px solid var(--color-night);
       transform: scale(1);
   }

   /* Navi ständig sichtbar für bessere usability*/
   nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       margin: 0;
       background: var(--color-night);
   }

   /* Abstand in Höhe der Navigation damit beim Laden der Seite Inhalte nicht dahinter liegen */
   body {
       padding-top: 54px;
   }

   /* Text für nav , an dieser Stelle könnten optisch auch logo oder H1 stehen */
   nav:before {
       content: attr(aria-label);
       /* color: var(--color-neutral); */
       color: white;
       float: left;
   }

}
 
/* ================= Weitere Media-spezifische Angaben: ================== */

@media (max-width: 620px) {
   
   #header_banner{
	   max-width: 600px;
      background: url("../img/flur_nal_cut_0150_low.jpg");
      background-repeat: no-repeat;
      background-position: center; 
      text-align: center;  
	}

   #banner_top h3 {
      margin-top: 150px;
      font-size: 44px;
   }

} 

@media (max-width: 400px) {

   #header_banner{
	   max-width: 380px;
      background: url("../img/flur_nal_cut_0150_low.jpg");
      background-repeat: no-repeat;
      background-position: center; 
      text-align: center;
   }   
}

/* Was ist hier falsch beim Validity-Check? #ToCheck */