:root {
   --banner-height: 120px; /*180px;*/ 
 
   /* Da es im plan keine Seitenheader ohne Knöpfe gibt, wird die Höhe gleich von Anfang an richtig gesetzt */
   /* Es ruckelt dann nicht so */
   --b-seitenheader-height: calc(var(--b-seitenheader-titel-brutto-höhe)
                                           + var(--b-seitenheader-knöpfe-brutto-höhe) 
                                           + var(--b-page-border-width)
                                           + 24px);
   
   --b-seitenheader-zeilen-space: 7px;
   
   --b-page-padding-left: 5px;	
   --b-page-padding-right: 5px; /* muss mindestens Scrollbarbreite sein */

}




/* Header, Seitenheader */

#headerNavigation {
   padding-top: 5px;
   padding-bottom: 2px;
   grid-row-gap: 12px;
}

.seitenHedermitBannerBild {
   --b-seitenheader-height: var(--banner-height) !important;   
}
.flashmeldungmitBannerbild {
   top: calc(var(--b-header-height) + var(--banner-height)) !important;    
}


#headerNavigation {
   grid-row-gap: 0px;  
}
.navigationItem {
   padding-bottom: 0 !important;
}

#VorschlägePlan a {
   line-height: 2em;      
}




/* Home, Info */

.bildBanner {  
   height: var(--banner-height);
   max-width: 1000px;
   width: 1000px;
   display: block;
}

.titelSeite, .infoSeite {
   grid-template-columns: 100%;
   grid-template-rows: auto auto auto;
   grid-row-gap: 0;
   margin-left: 3%;
}
.titelSeite {
   margin-top: 120px; /*180px;*/
}
.titelSeite a:hover {
   background-color: var(--b-hover);
   border-radius: 6px;   
}
.titelSeiteUeberschrift {    
   grid-column: 1 / 2;
   grid-row: 1 / 2;
}
.titelSeiteLinks {
   /* oben oder links */
   grid-column: 1 / 2;
   grid-row: 2 / 3;
}
.titelSeiteRechts {
   /* unten oder rechts */
   grid-column: 1 / 2;
   grid-row: 3 / 4;
}
.landscapeSichtbar { 
   /* Pflanzenvergleich im Landscape in Zeilen, im Portrait in Spalten */
   display: none;
}
.portraitSichtbar {
   /* Pflanzenvergleich im Landscape in Zeilen, im Portrait in Spalten */
   display: inline-block;
}

.infoHyperlinks {
   /* Links auf Info-Link-Seite. Unterschiedlich in Landscape und Portrait */
   display: grid;
   grid-template-rows: auto auto;
}
.infoLinksHref {
   grid-row: 1 / 2;
}
.infoLinksText {
   grid-row: 2 / 3;
}





/* Lern- Such- und alle Optionen */


.einspaltig .data0 {
   /* nur im Landscape, Zeile im data0 kürzer als Seitenbreite */
   width: 100%;
}
.abstandOptionen {
   /* im Landscape weniger als im Portrait */
   margin-top: 20px;
}
.abstandOptionenGross {
   /* im Landscape weniger als im Portrait */
   margin-top: 40px;
}
.abstandOptionenKlein {
   /* im Landscape weniger als im Portrait */
   margin-top: 10px;
}
.text3 {
   /* im landscape und im portrait nebeneinander, aber unterschiedlich */   
   display: grid;
   grid-template-columns: 96px 47px auto;
}
.text3links {
   padding-bottom: 15px;
}
.text3rechts {
   word-wrap: break-all;
}
.optionenWahl {
   /* Lern- und Weitere Optionen 2-spaltig */
   /* je mit Radiobox und Text -> ergibt 4 Spalten */
   /* Landscape und Portrait anders */  
   grid-template-columns: 8% 42% 8% 42%;     
}




/* naechsteFrage antwortAnzeigeMitPruefen*/

.bildGross {
   max-width: 100%;
   width: auto;
   height: auto;
   border: 1px solid var(--b-page-border-color); 
}

.antwortAnzeige {
   /* Grundstyles siehe all_app.css */
   grid-template-columns: auto;
   grid-template-rows: auto auto auto;
}
.antwortAnzeigeEingabe {
   grid-column: 1 / 2;
   grid-row: 1 / 2;
}
.antwortAnzeigeUrteil {
   grid-column: 1 / 2;
   grid-row: 2 / 3;
}
.antwortAnzeigeUrteilZusatz {
   grid-column: 1 / 2;
   grid-row: 3 / 4;
}






/* zu lernende Pflanzen, Gattungen, Familien, Lebensräume */

.abstandIndexL,  .abstandIndexR{
   padding-bottom: 18px;
}


.leerdavor {
   padding-left: 7px;
}
.abstandLinkeSeite {
   /* Inhalt und damit die Auswahlkästchen */
   /* wird auch im JavaScript kopfgruppenlinksVerteilen verwendet */
   margin-left: 12px;
}

.überschriftHabitat {   
   margin-bottom: 12px;
}






@media screen and (max-width: 330px) {
   .Knopf1 a, .Knopf2 a, .Knopf3 a, .Knopf4 a, .Knopf5 a {
      font-size: 9px !important;
   }         
   
}