:root {   
   --b-header-font-size: 28px;
    
   --b-max-seitenbreite: 1200px; /* nur landscape. Achtung: für die @media-screen Abfrage leider keine Variable möglich. fix 1200px */ 
   --banner-height: 240px;    
      
   --b-seitenheader-zeilen-space: 2px;
   --b-footer-height: 55px;  /* höher als Standard, da Optionenwahl in der Fusszeile vom eingeblendeten hover Hyperlink überdeckt wird */
}


/* Fehlermeldung sichtbar machen, falls unter dem Header versteckt */
#page, #header, #headerTitel, #seitenHeader {
/*   top: 400px !important;*/
}


/* Header, Seitenheader */
#header, #headerTitel {
   padding-top: 6px;   
} 
#headerTitel {
   padding-top: 20px;   
} 



#header #headerNavigation {
   width: 350px;
}

#VorschlägePlan {
/*   width: 226px;*/
   margin-top: 0;
}

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

.seitenheaderZeilenSpace {
   /* zweizeilige Seitenheader - Zeilenabstand im Landscape kleiner als im Portrait */
   margin-top: var(--b-seitenheader-zeilen-space);
}



/* Home, Info */

.bildBanner {  
   height: 100%;
   max-width: 1200px;
   width: 1200px;
   display: block;
}

.titelSeite, .infoSeite, .infoLinkSeite {
   grid-template-columns: 45% auto;
   grid-template-rows: auto auto;
   grid-column-gap: 40px;
   grid-row-gap: 30px;
   margin-left: 5%;   
}
.titelSeite {
   margin-top: 200px;
   grid-column-gap: 20px;
}
.titelSeite a:hover {
   background-color: var(--b-hover);
   border-radius: 6px;   
}
   
.titelSeiteUeberschrift {    
   grid-column: 1 / 3;
   grid-row: 1 / 2;
}
.titelSeiteLinks {
   /* links oder oben */
   grid-column: 1 / 2;
   grid-row: 2 / 3;
}
.titelSeiteRechts {
   /* rechts oder unten */
   grid-column: 2 / 3;
   grid-row: 2 / 3;
   margin-right: 5%;
}
.landscapeSichtbar { 
   /* Info Pflanzenvergleich im Landscape in Zeilen, im Portrait in Spalten */
   display: inline-block;
}
.portraitSichtbar {
   /* Info Pflanzenvergleich im Landscape in Zeilen, im Portrait in Spalten */
   display: none;
}
.infoHyperlinks {
   display: grid;
   grid-template-columns: 25% 60%;
   grid-column-gap: 30px;
   margin-left: 5%;   
}

.infoLinksHref {
   grid-column: 1 / 2;
}
.infoLinksText {
   grid-column: 2 / 3;
}

/* Lern-, Such- und alle Optionen */


.einspaltig .data0 {
   /* nur im Landscape, Zeile im data0 kürzer als Seitenbreite */
   width: 600px;
}
.abstandOptionen {
   /* im Landscape weniger als im Portrait */
   margin-top: 10px;
}
.abstandOptionenGross {
   /* im Landscape weniger als im Portrait */
   margin-top: 20px;
}
.abstandOptionenKlein {
   /* im Landscape weniger als im Portrait */
   margin-top: 8px;
}
.text3 {
   /* im landscape und im portrait nebeneinander, aber unterschiedlich */   
   display: grid;
   grid-template-columns: 122px 55px auto;
}

.optionenWahl {
   /* Lern- und Weitere Optionen 2-spaltig */
   /* je mit Radiobox und Text -> ergibt 4 Spalten */
   /* Landscape und Portrait anders */  
   grid-template-columns: 5% 45% 5% 45%;   
}



/* naechsteFrage antwortAnzeigeMitPruefen */
.bildGross {
	/* Allgemein: für grosse Bildanzeige mit Beschriftung */   
	max-width: 98%; /* Falls Browser calc nicht versteht */
   max-width: calc(100% - 10px);
   max-height: calc(100vh - 230px);  /* höchstens so hoch, das nicht gescrollt werden muss */
   width: auto;
   height: auto;
   border: 1px solid var(--b-page-border-color); 
}

.antwortAnzeige {
   /* Grundstyles siehe all_app.css */
   grid-template-columns: fit-content(100%) auto;  /* 2. Spalte schliesst an */
   grid-template-rows: auto auto;
}
.antwortAnzeigeEingabe {
   grid-column: 1 / 2;
   grid-row: 1 / 2;   
}
.antwortAnzeigeUrteil {
   grid-column: 2 / 3;
   grid-row: 1 / 2;   
}
.antwortAnzeigeUrteilZusatz {
   grid-column: 1 / 2;
   grid-row: 2 / 3;   
}




/* zu lernende Pflanzen, Gattungen, Familien, Lebensräume */
.abstandIndexL {
   padding-bottom: 8px;
}
.abstandIndexR {
   padding-bottom: 0px;
}




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

.fileUpload {
   /* Optionen importieren */
   --b-formularbox-width: 400px;
}


 
 




@media screen and (min-width: 1200px) {  /* bei plan 1550px */
    /* bei ganz grossen Bildschirmen die Darstellungsbreite fixieren und zentrieren*/
    /* hier leider kein var(--xxx) möglich */
    
    
   :root { 
      --b-page-width: var(--b-max-seitenbreite);    
   }
   

   #page {
      /* damit die verkleinerte Seite in der Bildschirmmitte erscheint */
      width: var(--b-page-width);
      margin-left: auto;
      margin-right: auto;   
   }

   #header, #seitenHeader, #flashmeldung, #footer {
      /* muss die Borderbreite abzählen, weil 'box-sizing: border-box' gilt */
      width: calc(var(--b-page-width) - var(--b-page-border-width) - var(--b-page-border-width));      
   }
    
    

}