:root {

--b-navigation-items: 5; /* Anzahl Menu-Items */

--portrait-bild-column-gap: 15px;
--portrait-bild-row-gap: 15px;
--portrait-bildbreite: calc((var(--b-data-breite) - var(--portrait-bild-column-gap) - var(--portrait-bild-column-gap)) / 3 ); 
--b-page-h1-font-size: 18px;  /* Platznot im Seitenheader, darum h1 etwas kleiner */
--b-page-h2-font-size: 16px;  /* wird glaubs nie gebraucht */
--b-formularbox-button-font-color: var(--b-auffällig);
--b-tooltip-font-size: 12px;
--b-formularbox-input-padding: 2px;
}

h2 {
   font-size: 14px;
}

h3 {  
   font-weight: normal;
}


.popupStartmeldung .b-popupFenster {
   /* überschreibt css aus basis, aber nur für die popupStartmeldung */
   background: #f527b0 !important;
   color: var(--b-navigation-font-color);
   padding: 10px !important;
   
}


/* Header */

#header {
  /* Leerraum für Fehlermeldungen die manchmal vom Header überdeckt werden */
/*  top: 260px !important;*/
}

#headerTitel {   
   font-weight: 600; 
}
.linkJavaScript a {
   cursor: pointer;
   padding: 1px;
   text-align: left;
}
.linkJavaScriptBold a {
   cursor: pointer;
   padding: 1px;
   text-align: left;
   font-weight: bold;
   text-decoration: underline !important;
}

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


#VorschlägePlan {
   /* Suchfeld im Seitenheader von Familien, Gattungen, Pflanzen */
   /* Achtung: Muss bei Nichtbenützung vollständig leer sein */
   /* kein Padding, kein border, etc. wird sonst angezeigt, ohne dass eine Eingabe erfolgt ist */
   position: absolute;
   top: calc(var(--b-seitenheader-height) + 2px);
   z-index: 4;   
   background-color: var(--b-feld-hintergrund);
   color: var(--b-page-font-color);
   font-size: var(--b-page-font-size);
   padding-left: 6px;
   padding-right: 2px;
   margin-right: 1px;
   border-radius: 6px 6px 6px 6px;
   max-height: 60vh;
   overflow-y: auto;
   overflow-x: hidden;   
   width: calc(var(--b-data-breite) - 6px);  
}
#VorschlägePlan a {
   text-decoration: none;
   margin-bottom: 5px;
}

/* Footer */
#footer {
    font-size: 12px;   
}
#footer form {
   display: inline;   
}
#footer select {
   background: var(--b-page-background-color);
   border-radius: 3px;
   border: var(--b-page-border-width) solid var(--b-page-font-color);
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   color: var(--b-page-font-color);
   cursor: pointer;
   padding-left: 5px;
}




#footer .dataInline {
   /* z.B. für Infotexte */
   display: inline; 
}


/* überall */
.dataInlineBlock {
   /* z.B. für Infotexte */
   display: inline-block;
   width: var(--b-data-breite);
}



/* Home, Info */

.seitenHedermitBannerBild {
   padding: 0 !important;
   margin: 0 !important;
   display: inline-block !important; 
   border-bottom: 0 !important;
}
.bildBannerContainer {
   border-top: var(--b-page-border-width) solid var(--b-page-font-color);
   height:var(--banner-height);
   width: 100%;
   overflow: hidden;  
   background-color: var(--b-page-background-color);
}




.titelSeite, .infoSeite {
   display: grid;   
}
.titelSeiteUeberschrift {    
   line-height: 1;
}
.titelSeiteLinks {
   /* links oder oben */
   line-height: 1.5;
}
.titelSeiteRechts {
   /* rechts oder unten */
   line-height: 1.5;
}
.titelSeite a, .infoSeite a {
   text-decoration: none;
}
.titelSeite a:hover, .infoSeite a:hover {
   text-decoration: underline;
}
.titelSeiteRechts .linkUnterstrich {
   /* nur Vorderteil des Links unterstreichen */
   text-decoration: underline;
   font-weight: bold;
}
.titelSeite ul, .infoSeite ul {
/*   list-style-type: '—>   ';*/
   list-style-type: '—> ';
   list-style-position: outside;
   margin-left: 40px; 
}
.titelSeite ul li {
   margin-bottom: 10px;
}


.rundumeli ul {
   list-style-type: disc;
   list-style-position: outside;
   margin-left: 16px; 
}
.rundumeli ul li {
   padding-bottom: 8px;
}

/* Lernoptionen, weitere Optionen */

#LernzielWahl {
   /* aufklappbare Box für das Bestimmen des Lernziels */
   margin-top: 10px;
   padding-top: 10px;
   padding-left: 10px;
   border-width: var(--b-formularbox-border-width);
   border-color: var(--b-formularbox-border-color);  
   border-style: solid; 
}
.lernzielWahl_schliessen {
   /* Schliessenkreuz in der aufklappbaren Box für das Bestimmen des Lernziels */
   float: right;
   padding-right: 10px;
}
.lernzielWahl_schliessen a{
   font-size: 20px;
   font-weight: bold;
}
.text3 {
   /* unterschiedlich im portrait und landscape */
   /* aber bei beiden nebeneinander */    
}
.text3links {
   grid-column: 1 / 2;
}
.text3links a {
   text-decoration: underline !important;   
}
.text3mitte {
   grid-column: 2 / 3;
}
.text3rechts {
   grid-column: 3 / 4;
}

.optionenWahl {
   /* Lern- und weitere Optionen 2-spaltig */
   /* je mit Radiobox und Text -> ergibt 4 Spalten */
   /* Landscape und Portrait anders */
   display: grid;   
}
.optionenWahl a {
   text-decoration: none;
}
.optionenWahlLinksBox {
   grid-column: 1 / 2;   
}
.optionenWahlLinksText {
   grid-column: 2 / 3;   
}
.optionenWahlRechtsBox {
   grid-column: 3 / 4;   
}
.optionenWahlRechtsText {
   grid-column: 4 / 5;   
}

.radiobox {
   padding-bottom: 10px; 
   /* Achtung: hier kein z-index und kein position: relative */
   /* sonst gibts ein Durcheinander mit Menü-Hover und Select-Liste-für-Suche (Headersuche -> Dropbdown-Pfeil) */
}
   .radiobox img {
      /* damit der Zwischenraum nach der quadratischen Radiobox auch anklickbar ist */
      /* muss die width das padding enthalten (height+padding-right muss gleich sein wie width) */
      width: 20px;
      height: 14px;
      padding-right: 6px;
      vertical-align: middle;
   }
/*   .radiobox span {
      vertical-align: middle;
   }
   .radiobox a {
      text-decoration: none;
   }*/
   
.linkOptionen, linkOptionenSuche{
   /* Optionen -> Kontakte und Optionen -> Details */
   font-size: 14px;   
}
.linkOptionen {
   /* Text neben dem Link */
   color: var(--b-auffällig);  /* braunrot */
}
a.linkOptionen {
   /* Optionen -> Kontakte und Optionen -> Details */
   color: var(--b-auffällig);  /* braunrot */
}
a.linkOptionenSuche {
   color: green;
}
.optionenSuche {
   color: green;
}
.linkOptionenSuche {
   color: green;
}

.textWieLink {
   text-decoration: underline;
   cursor: pointer;
}

.fileUpload  {
   --b-formularbox-label-width: 0;   
}
.fileUploadFilename {   
   width: 100%;
}
.buttonClass {
   color: var(--b-page-font-color);   
}



/* naechste Frage, einzelAnzeige, antwortAnzeigeMitPruefen */

.prüfEingabe {
   /* Formular für die Antworteingabe bei naechste Frage */
   /* kein Überschreiben von b-formularBox, da dort label und input ein grid bildet und hier input und prüfen-Button */
   display: grid;
   grid-template-columns: 78% auto;
   grid-template-rows: auto;
   font-size: var(--b-page-font-size);
   width: 100%; 
   background-color: var(--b-formularbox-background-color);
   font-size: 100px;
   color: var(--b-formularbox-font-color);
   padding: 2px;
   border-width: var(--b-formularbox-border-width);
   border-color: var(--b-formularbox-border-color);  
   border-style: solid;  
}

.prüfEingabe input {
   border-color: var(--b-formularbox-border-color);
   border-width: var(--b-formularbox-border-width);   
   padding: 4px;  /* gleich wie Suchfeld im Header, bestimmt Höhe vom Eingabefeld */
   border-radius: 3px;
}
.prüfEingabe .prüftext  {
   /* Feld input, type = "text" */
   grid-column: 1 / 2; 
   background-color: var(--b-feld-hintergrund);
   border-radius: 6px;
   margin-right: 4px;
}
.prüfEingabe .prüfbutton {
   /* Feld input, type = "submit" */
   grid-column: 2 / 3;
   background-color: var(--b-formularbox-input-background-color);
   color: var(--b-formularbox-button-font-color); 
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   cursor: pointer;
}

.antwortAnzeige {
   /* Landscape anders als Portrait */
   display: grid;
}
.antwortAnzeigeEingabe {
   color: red;
   font-weight: 600;
}
.antwortAnzeigeUrteil {
   color: green;
   font-weight: 600;
}
.antwortAnzeigeUrteilZusatz {
   color: green;
   font-weight: normal;
}


#hyperlinkInfotextPos {
   position: relative; 
}
.hyperlinkInfotextText {
   position: absolute;   
}
.hyperlinkInfotextPos a {
   font-size: 12px;
}


.blätterPfeile {
   padding-top: 8px;
   padding-bottom: 3px;
}
.bildBlätterPfeil .tooltiptext-unterhalb {
   left: 250%;   /* 50% wäre in der Mitte */   
}
.bildBlätterPfeil .tooltiptext-unterhalb::before {
   border-color: transparent transparent transparent transparent !important; /* ohne Pfeil */
}
.bildBeschriftung {
   font-size: 10px;
}
.bildBeschriftung .b-popupFenster { 
   font-size: var(--b-page-font-size);
}

.popupGruppe .b-popupFenster {
   padding: 10px;
}
.popupGruppe .b-popupFenster ul li {
   padding-bottom: 5px;
}

.kleinesBild {
   border: 1px solid var(--b-page-border-color);    
}
.aktuellesBild {
	/* gross angezeigtes Bild ist im Thumbnail rot umrandet */
	border-style: solid !important;
	border-color: var(--b-auffällig) !important;   /* braunrot */
	border-width: 2px !important;   
}

#blütenformelEin, #blütenformelAus, #lebensraumEin, #lebensraumAus {
   /* Hyperlinks in Popupfensterchen */
   /* normales <div> und kein href="#", weil letzterer zum top der Seite springt */
   font-size: 11px;
   text-decoration: underline;
   cursor: pointer;
}
.lebensraum-legende a {
   /* Sternli in Legende nicht unterstreichen */
   text-decoration: none;  
}

.popup_Quelle {
   /* Quellangaben als Link im Titel vom Popupfensterchen, z.B. bei Lebensräumen */
   font-size: 12px;   
}
.popup_Quelle a {
   font-weight: normal;
   color: green;
}
   




/* zu lernende Pflanzen, Gattungen, Familien */

#kopfgruppenLinks, #kopfgruppenLinksHabitats {
   /* Nummern oben im Seitenheader als lokale Links */
   /* #kopfgruppenLinks wird im JavaScript kopfgruppenlinksVerteilen verwendet */
   font-size: 13px;
   display: inline-block;
   width: 100%;      
} 

.spaceKopfGruLebensräume {
   padding-right: 16px;
}
   
.tooltipKopfgruppenLinks {
   --b-tooltip-breite: 180px;
   /* --b-tooltip-position-left: 50px; */
}



.checkboxSichtbar {
   /* Flip-Flop bei Ajax-Auswahl von Pflanzen und Gattungen - leeres oder volles Kästchen */
   display: inline;
   cursor: pointer;
   text-decoration: underline;    
}
.checkboxUnsichtbar {
   /* Flip-Flop bei Ajax-Auswahl von Pflanzen und Gattungen - leeres oder volles Kästchen*/
   display: none;
   cursor: pointer;
   text-decoration: underline;   
}

.checkbox {
   /* nicht nur die checkbox, auch den dazugehörigen Namen */
   position: relative;   
   
   /* folgendes soll die standard contextmenüs etc. verhindern */
   -webkit-touch-callout: none; 
   -webkit-user-select: none; 
   -khtml-user-select: none; 
   -moz-user-select: none; 
   -ms-user-select: none; 
   -user-select: none;
}
   .checkbox img {
      /* damit der Zwischenraum nach der quadratischen Checkobox auch anklickbar ist */
      /* muss die width das padding enthalten (height+padding-right muss gleich sein wie width) */
      width: 33px;
      height: 14px;
      padding-right: 19px;
      margin-top: 2px;
      /* damit img und text in einer Linie: float left beim img und overflow hidden beim nachfolgenden Text */
      float: left;
   }
   .checkbox div {
      /* damit img und text in einer Linie: float left beim img und overflow hidden beim nachfolgenden Text */
      overflow: hidden;       
   }
   
   .ohne {
      /* Link-Texte bei den Gruppen-Einzeloptionen ohne Unterstrich */
      text-decoration: none;
   }
   
   .aktuelleCheckbox {
      color: green;
   }
   .aktuelleCheckbox img {
      width: 14px;
      height: 14px;
      padding-right: 0;
      margin-right: 13px;
      border: solid green 2px;
   }
   
     
   
 
   
/* zu lernende Lebensräume */

.überschriftHabitat {
   font-size: var(--b-page-h3-font-size);
   font-weight: 600; 
   margin-bottom: 4px;
}
.überschriftKleinHabitat {   
   font-weight: 600;
   margin-top: 10px;
   margin-bottom: 4px;
}



/* Familie, Gattung und Lebensraum */

.bildUndNamenLink {
   display: grid;
   grid-template-columns: calc(var(--bildBreite) + 12px)  auto;  /* Bildbreite + column-gap + 2x border */   
   column-gap: 10px;
   --bildBreite: 60px;   
}
.bildUndNamenLink .bildLink {
   grid-column: 1 / 2;
}
.bildUndNamenLink .bildLink img {   
   border: 1px solid var(--b-page-border-color);
   width: var(--bildBreite);
}
.bildUndNamenLink .namenLink {
   grid-column: 2 / 3;
   margin-top: auto;
   margin-bottom: auto;
}
.bildUndNamenLink .namenLinkText {
   text-decoration: underline;
}

.einblendung {
   width: var(--b-data-breite);
   margin-top: 10px;
   margin-bottom: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   border-width: var(--b-formularbox-border-width);
   border-color: var(--b-formularbox-border-color);  
   border-style: solid;
}


/* Trefferliste */
.trefferliste {
   display: grid;
   grid-template-columns: 70px auto; 
   column-gap: 20px;
}
.trefferlisteLinks {
   grid-column: 1 / 2;
}
.trefferlisteRechts {
   grid-column: 2 / 3;
}


/* Infos: Kontakte und Details */
.auffallend {
   color: var(--b-auffällig);
}


.infoChronik {
   display: grid; 
   grid-template-columns: 40px auto 5px;
   
}
.infoChronikNr {
   grid-column: 1 / 2; 
}
.infoChronikText {
   grid-column: 2 / 3;
}

.grün {
   color: green;
}
.grün a {
   color: green;
}

/* Options/weitereOptionen */

.cookieFormular {
--b-formularbox-width: 500px;
--b-formularbox-label-width: 100px;
}