:root {
   
   /* Farben */

   /* Grundfarben */
   --b-sehr-dunkel: #0e2e5e; /* font, formular border, etc. */
   --b-dunkel: #2c5490;      /* header background, page border, etc. */
   --b-hell: #e5eefb;        /* page background, subnavigation hover, etc. */
   --b-sehr-hell: #ffffff;   /* body background, header font, etc. */

   /* Spezielles */
   --b-success: green;
   --b-error: red;
   --b-auffällig: #c00009; /* braunrot */
   --b-hover: #bed1ed;  /* etwas dunkler als page-background-color */ 

   --b-footer-height: 45px;  
   --b-footer-font-size: var(--a-schrift-klein); /* 12px; */ 

   --a-banner-height: 100px;
   --a-inhalt-height: calc(   
      100vh 
      - var(--b-header-height) 
      - var(--b-seitenheader-height) 
      - var(--b-flashmeldung-height) 
      - var(--b-footer-height)
      - 5px
      ); 
   --a-schrift-klein: 13px;
   --a-kopfgruppen-zeichenbreite: 9.2px;  /* Breite in Pixel bei font-family Inter, font-size 13  bold*/
   --a-page-max-width: 1200px;            /* maximale Page-Breite */
}
/* kleines Handy*/
@media screen and (max-width: 400px) {  
   :root {
      /* Header-Titel "Connaître les plants" verdrängt sonst Hamburgersymbol */
      --b-header-font-size: 24px; /* 18px; */
   }
}
/* kleines Handy*/
@media screen and (max-width: 380px) {  
   :root {
      /* Header-Titel "Connaître les plants" verdrängt sonst Hamburgersymbol */
      --b-header-font-size: 22px; /* 18px; */
   }
}
/* kleines Handy*/
@media screen and (max-width: 360px) {  
   :root {
      /* Header-Titel "Connaître les plants" verdrängt sonst Hamburgersymbol */
      --b-header-font-size: 20px; /* 18px; */
   }
}
/* kleines Mini-Handy*/
@media screen and (max-width: 340px) {  
   :root {
      /* Header-Titel "Connaître les plants" verdrängt sonst Hamburgersymbol */
      --b-header-font-size: 18px; /* 18px; */
   }
}




/* Abweichung mini Höhe -> Bildbanner gleich wie Header */
@media (max-height: 700px) {
   :root {
      --a-banner-height: var(--b-header-height) !important;
   }   
}

/* Abweichungen Landscape */
@media (min-width: 992px) {
   :root {
      --a-banner-height: 190px;       
      --b-footer-height: 55px; /* hoch genug damit die Browser-Statusleiste die Angaben nicht überdeckt */
   }
}







/* Home */
/* ---- */

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

.bildBannerContainer {
   position: fixed;
   top: var(--b-header-height);
   width: var(--b-page-width-netto);   
   overflow: hidden; 
   height: var(--a-banner-height);
}
.bildBannerContainer img {
   width: 100%;
   height: 100%; /* Füllt den Container aus */
   
   /* Verhindert das Quetschen und schneidet unten ab: */
   object-fit: cover;  /* behält Proportionen */
   object-position: top; /* schneidet unten ab */
}
.textHome {
   /* Bildbanner aussparen */
   margin-top: var(--a-banner-height);   
}

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

.titelSeiteHyperlinks .linkUnterstrich {
   /* nur Vorderteil des Links unterstreichen */
   text-decoration: underline;
   font-weight: bold;
}
.titelSeite ul {
   list-style-type: '—> ';
   list-style-position: outside;
   margin-left: 40px; 
}
.titelSeite ul li {
   margin-bottom: 10px;
}



/* Home Portrait */
@media (max-width: 991px) {

   .titelSeite {
      /* Portrait */
      display: grid; 
      grid-template-columns: 100%;
      grid-template-rows: auto auto auto;
      grid-row-gap: 0;
      margin-left: 3%;
   }

   .titelSeite a:hover {
      /* Portrait */
      background-color: var(--b-hover);
      border-radius: 6px;   
   }
   .titelSeiteUeberschrift { 
      /* Portrait */
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      line-height: 1;
   }
   .titelSeiteText { 
      /* Portrait */
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      line-height: 1.5;
   }
   .titelSeiteHyperlinks {
      /* Portrait */
      /* unten oder rechts */
      grid-column: 1 / 2;
      grid-row: 3 / 4;
      line-height: 1.5;
   }
}
/* Home Landscape */
@media (min-width: 992px) {
   
   .textHome {
      /* Landscape */
      /* Bildbanner aussparen */
      margin-top: calc(var(--a-banner-height) - 30px) !important;   
   }
   
   
   .titelSeite {
      /* Landscape */
      display: grid; 
      grid-template-columns: 45% auto;
      grid-template-rows: auto auto;
      grid-column-gap: 40px;
      grid-row-gap: 20px;
      margin-left: 5%;   
   }
   .titelSeite {
      /* Landscape */
      grid-column-gap: 20px;
   }
   .titelSeite a:hover {
      /* Landscape */
      background-color: var(--b-hover);
      border-radius: 6px;   
   }

   .titelSeiteUeberschrift {
      /* Landscape */
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      line-height: 1;
   }
   .titelSeiteText {
      /* Landscape */
      /* links oder oben */
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      line-height: 1.5;
   }
   .titelSeiteHyperlinks {
      /* Landscape */
      /* rechts oder unten */
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      line-height: 1.5;
      margin-right: 5%;
   }
}




/* Optionen */
/* -------- */

.lernzielWahl {
   /* aufklappbare Box für das Bestimmen des Lernziels */
   margin-top: 10px;
   padding-top: 10px;
   padding-left: 10px;
   border-width: 1px;
   border-color: var(--b-sehr-dunkel);  
   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 {   
   display: grid;
}
.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 */
   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;
}

.linkOptionen {
   /* Optionen -> Kontakte und Optionen -> Details */
   font-size: var(--b-page-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 */
}

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






/* Optionen, speziell für Portrait */
@media (max-width: 991px) {

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

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

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

}

/* weitere Optionen, Cookie lesen/schreiben, login */
/* ----------------------------------------------- */


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

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



/* naechste Frage, einzelAnzeige */
/* ----------------------------- */

.abstandKlein {
   margin-top: 10px;
}
.abstandGross {
   margin-top: 30px;
}
.abstandDiff {
   margin-top: 20px;
}


.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-hell);
   color: var(--b-sehr-dunkel);
   padding: 2px;         
}



.prüfEingabe .prüftext  {
   /* Feld input vom Formular prüfEingabe, type = "text" */
   grid-column: 1 / 2; 
   background-color: var(--b-sehr-hell);   
   border: 1px solid var(--b-sehr-dunkel);
   border-radius: 6px;
   padding: 4px; 
   margin-right: 4px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   
   -webkit-appearance: none;  /* unterdrückt Standard Browser-Design */
   appearance: none; 
   
   font-size: 16px; /* damit iOS das Layout nicht ändert */
}
.prüfEingabe .prüftext:-webkit-autofill,
.prüfEingabe .prüftext:-webkit-autofill:hover, 
.prüfEingabe .prüftext:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--b-sehr-hell) inset !important; 
  box-shadow: 0 0 0px 1000px var(--b-sehr-hell) inset !important;
  -webkit-text-fill-color: #000000 !important;             
}

.prüfEingabe .prüfbutton {
   /* Feld input, type = "submit" */
   grid-column: 2 / 3;
   background-color: var(--b-hell);
   color: var(--b-auffällig); 
   border: 1px solid var(--b-sehr-dunkel);
   border-radius: 6px;
   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;
}





/* Thumbnails in Einzelanzeige */
/* Kunst, damit das Bild inklusive Rahmen bei allen gleich gross erscheint, */
/* auch wenn der Rahmen beim aktuellen Bild dicker ist als beim normalen Bild */

.thumbnail-reihe {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;     
   justify-content: space-between; 
   gap: 2px;      
   width: 100%; 
}

.thumbnail-reihe a {
   flex-shrink: 1;         
   min-width: 0;   
   position: relative; /* Basis für Glasscheibe */
   display: block;
}

.thumbnail-reihe img {
   display: block;
   width: 100%;            
   height: auto;           
   max-width: 120px;       
}

/* "Glasscheibe über das Bild" */
.thumbnail-reihe a::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none; /* Klicks gehen durch das Element direkt auf den Link */   
   border: 1px solid var(--b-dunkel);
   box-sizing: border-box;
}

.thumbnail-reihe a.bildAktuell::after {
   /* Rahmen auf der Glasscheibe */
   border: 3px solid var(--b-auffällig); 
}





/* Hyperlink zur Seite */
.hyperlinkInfotextPos {
   position: relative; 
}
.hyperlinkInfotextText {
   position: absolute;   
}
.hyperlinkInfotextPos a {
   font-size: var(--b-page-font-size); /* 12px; */
}
.grün {
   /* Farbe vom Hyperlink */
   color: green;
}
.grün a {
   color: green;
}


.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: var(--a-schrift-klein); /* 10px; */
}
.bildBeschriftung .b-popupFenster { 
   font-size: var(--a-schrift-klein) !important;
}

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


.kleinesBild {
   /* Thumbnail in Lebensraumanzeige */
   border: 1px solid var(--b-dunkel);       
}
.aktuellesBild {
	/* Thumbnail in Lebensraumanzeige */
	border-style: solid;
	border-color: var(--b-auffällig) !important;  
	border-width: 3px !important; 
}

.blütenformelEin, .blütenformelAus, .lebensraumEin, .lebensraumAus {
   /* Hyperlinks in Popupfensterchen */
   /* normales <div> und kein href="#", weil letzterer zum top der Seite springt */
   font-size: calc(var(--a-schrift-klein) - 1px); /* 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: var(--a-schrift-klein); /* 12px; */   
}
.popup_Quelle a {
   font-weight: normal;
   color: green;
}

.inhalt-einzelanzeige {
   /* gleich wie .inhalt, aber padding-bottom im Landscape nur 20px da Inhalt nicht scrollt */   
   padding-left: var(--b-page-padding-left);
   padding-right: var(--b-page-padding-right);
   padding-bottom: var(--b-inhalt-padding-bottom);
}

.antwortAnzeige {
      /* Anzeige des Prüfresultats */
      grid-template-columns: auto;
      grid-template-rows: auto auto auto;
      padding-top: 20px;
      padding-bottom: 30px;
   }
   .antwortAnzeigeEingabe {      
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      padding-bottom: 5px;
   }
   .antwortAnzeigeUrteil {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
   }
   .antwortAnzeigeUrteilZusatz {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
   }

/* naechste Frage, einzelAnzeige speziell für Portrait */
@media (max-width: 991px) { 
   
   .blätterPfeile {
      /* Portrait */
/*      padding-left: var(--b-seitenheader-info-width);  nicht schön zusammen mit Prüfeingabe */
   }
   .bildBlätterPfeil a {
      /* Portrait */
      /* Klickfläche vergrössern */
      padding: 15px;
      margin: -15px;
   }
   
   .data-einzelanzeige {
      /* Portrait */
      /* gleich wie data */
      display: grid;
      grid-template-columns: var(--b-data-breite);
      grid-template-rows: auto auto;       
   }
   
   .data3-einzelanzeige {
      /* Portrait */
      /* gleich wie data3, unten - grosses Bild */
      grid-row: 2 / 3;  
    } 

   .data4-einzelanzeige {
      /* Portrait */
      /* gleich wie data4, oben - Text */
      grid-row: 1 / 2;
   }

   .bildGross {
      /* Portrait */
      max-width: 100%;
      width: auto;
      height: auto;
      border: 1px solid var(--b-dunkel); 
   }   
   

   
}

/* naechste Frage, einzelAnzeige speziell für Landscape */
@media (min-width: 992px) {
     
   .inhalt-einzelanzeige {
      /* Landscape */
      /* gleich wie .inhalt, aber padding-bottom 0, damit inhalt nicht scrollt */
      /* siehe dazu css-Berechnung für --a-inhalt-height */
      --b-inhalt-padding-bottom: 0px;
   }   
   
   .data-einzelanzeige {
      /* Landscape */
      /* Grid-Container anstatt Grid-Container data */
      /* macht, dass nur Text scrollt und nicht die ganze Seite */ 
      display: grid;
      grid-template-columns: var(--b-data-breite) var(--b-data-breite);      
      grid-column-gap: var(--b-data-gap);      
      
      /* background-color: yellow; */
      height: var(--a-inhalt-height);  /* = vh minus Header, Seitenheader, Flashmeldung, Inhalt-Padding und Footer) */
      
      overflow: hidden; 
      /* border: 1px solid red; */
   }
      
   
   .data3-einzelanzeige {
      /* Landscape */
      /* gleich wie data3, links - grosse Bild*/
      grid-column: 1 / 2;       
    }

   .blätterPfeile {
      /* Landscape */
      padding-top: 2px;
      padding-bottom: 3px;
   }
   
   .bildGross { 
      /* Landscape */
      max-height: calc(var(--a-inhalt-height) - 45px);  /* Platz für Bildquelle 45px */
      max-width: 100%; /* 98%; */
      width: auto;
      height: auto;      
      border: 1px solid var(--b-sehr-dunkel);
   }   

   .data4-einzelanzeige {
      /* Landscape */
      /* gleich wie data4, rechts - Text */
      grid-column: 2 / 3; 
      height: 100%;                   /* Nutzt die volle Höhe des Containers */
      overflow-y: auto;               /* Aktiviert den vertikalen Scrollbalken NUR hier, falls nötig */      
   }

}

/* Anpassungen bildGross für alte Mac-Geräte, z.B. ipad mini 4 iOS 15 */
@media not all and (min-resolution:.001dpcm) { 
   @supports (-webkit-appearance:none) { 
      
      /* standard (Portrait) */
      figure > div {
         height: calc(100vh - 230px) !important;
         max-height: calc(100vh - 230px) !important;
         width: 100% !important;
         display: block !important;
         text-align: left !important;
      }

      img.bildGross {
         height: 100% !important;
         max-height: 100% !important;
         width: auto !important; 
         max-width: 100% !important; 
         display: inline-block !important;
         margin: 0 !important;
      }

      /* Landscape */
      @media (orientation: landscape) {
         figure > div {
           /* Erhöhter Abzug (280px), da Safari im Querformat oben/unten mehr Platz für Leisten frisst */
           height: calc(100vh - 280px) !important;
           max-height: calc(100vh - 280px) !important;
         }
      }   
   }
}
   


/* zu lernende und Index Pflanzen/Gattungen/Familien/Lebensräume */
/* ------------------------------------------------------------- */

.dataInlineBlock {   
   display: inline-block;
   width: var(--b-data-breite);
}

   
.tooltipKopfgruppenLinks {
   --b-tooltip-breite: 180px;
}

.kopfgruppenLinks {   
   /* Nummern oben im Seitenheader als lokale Links */ 
   /* werden per javaScript kopfgruppenlinksVerteilen schön ausgerichtet */
   font-size: var(--a-schrift-klein); /* 13px; */ 
   
}
.kopfgruppenLinks a {
   display: inline-block;   
}



.checkboxZeile {
   /* 1. Spalte CheckboxIcon, 2. Spalte checkboxRest (Name/Link/Sternli) */
   display: grid;    
   grid-template-columns: 40px 1fr;
   align-items: center;    /* zentriert items vertikal */      
   
   /* Extras fürs iPhone: Schaltet die künstliche 300ms Touch-Verzögerung ab */
   touch-action: manipulation !important; 
   
   /* Verhindert das standardmässige graue Aufblitzen beim Tippen auf Smartphones */
   -webkit-tap-highlight-color: transparent !important;
   outline: none !important; 
   
   /* Verhindert das native Kontextmenü beim langen Drücken auf dem iPhone */
   -webkit-touch-callout: none !important; 
   
   /* wegen iPhone auf 'auto' gesetzt, damit Safari das Hit-Testing (Fingertipp) nicht blockiert. */
   -webkit-user-select: auto;
   -khtml-user-select: none; 
   -moz-user-select: none; 
   -ms-user-select: none;    
   user-select: auto;      
}

.checkboxIcon {
   /* Kästchen */
   grid-column: 1 / 2;
   cursor: pointer;
   
   /* Tippbereich leicht vergrössern */
   padding-top: 6px;
   padding-bottom: 6px;
   margin-top: -6px;
   margin-bottom: -6px;
   
   -webkit-user-select: none; /* verhindert Markieren auf iOS-Geräten */
}

.checkboxIcon img {
   width: 20px; /* Originalgrösse vom Kästchen 15px */
   height: 20px;
   display: block; /* Verhindert Whitespace-Fehler */
   min-width: 20px;  /* Verhindert Stauchen vom Böxli */
   min-height: 20px; 
   
   flex-shrink: 0 !important;  /* Böxli nicht stauchen */
   margin-top: 2px; /* ist etwas zu hoch */
   
   -webkit-touch-callout: none; /* unterdrückt Kontextmenü auf iOS-Geräten */
   -webkit-user-select: none; /* verhindert Markieren auf iOS-Geräten */
   touch-action: none; /* Kästchen nicht scrollbar */
   pointer-events: none;  /* leitet pointer-event an checkboxIcon weiter */
}

.checkboxIconSichtbar {
   display: block;
}

.checkboxIconUnsichtbar {
   display: none !important;
}

.checkboxRest {
   /* Name/Link/Sternli etc */
   grid-column: 2 / 3;
   vertical-align: middle;
   justify-self: start;     
}

.checkboxRest div {
   /* Klickbereich für Link vergrössern, */ 
   /* aber LINKS auf 0px gesetzt, damit es das Kästchen nicht mehr überlagert! */
   padding: 15px 15px 15px 0px;
   margin: -15px -15px -15px 0px;       
}

/* Verhindert das iOS-Systemmenü beim langen Drücken,
   ohne den Touch für das davorliegende Kästchen zu blockieren */
.checkboxRest,
.checkboxRest a,
.checkboxRest span {
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none !important;
}
.checkboxRestFlorasort {
   /* Flora-Sort horizontal aussparen */
   display: grid;
   align-items: center;    /* zentriert items vertikal */
   grid-template-columns: 53px auto;
}
.checkboxRestOhneFlorasort {
   white-space: normal;    
}



/* Besonderheiten für Habitat-checkboxen mit Habitat-Nummern */
/* checkboxRest ich nochmals ein grid für Habitat-Nummer und Habitat-Namen */
/* Lange Habitat-Namen sollen innerhalb vom Namen umbrechen, die Nummer soll vorstehen */

.habitatZeile1 {
   /* Zeilenabstand für 1-stellige Habitat-Nummern, z.B 1 */
   margin-top: 26px;
   font-weight: bold;
   align-items: start !important;    /* items vertikal oben*/ 
   -webkit-user-select: none;
}
.habitatZeile3 {
   /* Zeilenabstand für 3-stellige Habitat-Nummern, z.B 1.2 */
   margin-top: 24px;
   font-weight: bold;
   -webkit-user-select: none;
}
.habitatZeileNormal {
   /* Zeilenabstand für 3- und 4-stellige Habitat-Nummern, z.B 1.2.3 oder 1.2.3.4 */
   margin-top: 18px;
   -webkit-user-select: none;
}

.habitRest1,
.habitRest3,
.habitRest5,
.habitRest7
{
   /* Nummer horizontal aussparen, 1-stellig z.B. 1 */
   display: grid;
   align-items: center;    /* zentriert items vertikal */ 
   
   white-space: normal;   
   hyphens: auto; /* verwendet Silbentrennung, je nach <html lang=".." */   
}
.habitRest1 {
   /* Nummer horizontal aussparen, 3-stellig z.B. 1.2 */
   grid-template-columns: 35px auto; 
}
.habitRest3 {
   /* Nummer horizontal aussparen, 3-stellig z.B. 1.2 */
   grid-template-columns: 50px auto; 
}
.habitRest5 {
   /* Nummer horizontal aussparen, 5-stellig z.B. 1.2.3 */
   grid-template-columns: 60px auto;
}
.habitRest7 {
   /* Nummer horizontal aussparen, 7-stellig z.B. 1.2.3.4 */
   grid-template-columns: 70px auto;
}



.checkboxLegende {
   display: inline-block;
   text-decoration: none !important;
   padding-left: 15px;
}



.leerdavor {   
   /* für die Auswahl-Sortierung in zu lernende ... */
   padding-left: 7px;
}   

.ohne {
   /* Link-Texte bei den Gruppen-Einzeloptionen ohne Unterstrich */
   text-decoration: none;
}

.aktuelleCheckbox {
   color: green;
}
.aktuelleCheckbox img {
   width: 14px;
   height: 14px;
   /* Die Abstände werden jetzt zentral oben vom Flexbox-Gap und Padding gesteuert */
   border: solid green 2px;
}

.abstandCheckboxLink {
   /* kleiner als b-abstandHyperlink */
   padding-top: 5px;
   padding-bottom: 5px;
} 

.abstandLinkeSeite {
   /* Abstand vom linken Rand: Inhalt und damit die Auswahlkästchen */
   /* wird auch im JavaScript kopfgruppenlinksVerteilen verwendet */
   gap: 5px;
}

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





/* zu lernende und Index ... -> Anpassungen für Landscape */
@media (min-width: 992px) {

   .checkboxZeile {
      /* Landscape */
      /* 1. Spalte CheckboxIcon, 2. Spalte checkboxRest (Name/Link/Sternli) */
      display: grid;    
      grid-template-columns: 30px 1fr;
   }
   
   .checkboxIcon img {
      /* Landscape */
      /* Kästchen weniger klotzig */
      width: 15px; /* Originalgrösse vom Kästchen */
      height: 15px;
      display: block; /* Verhindert Whitespace-Fehler */
      min-width: 15px;  /* Verhindert Stauchen vom Böxli */
      min-height: 15px; 
   }

   .habitatZeile3 {
      /* Landscape */
      /* Zeilenabstand für 3-stellige Habitat-Nummern, z.B 1.2 */
      margin-top: 18px;
   }
   .habitatZeileNormal {
      /* Landscape */
      /* Zeilenabstand für 3- und 4-stellige Habitat-Nummern, z.B 1.2.3 oder 1.2.3.4 */
      margin-top: 10px;
   }
   
   .habitRest1,
   .habitRest3,
   .habitRest5,
   .habitRest7
   {
      /* Landscape */
      /* Aussparung etwas kleiner, da Schrift kleiner
      /* Nummer horizontal aussparen, 1-stellig z.B. 1 */
      display: grid;
      align-items: center;    /* zentriert items vertikal */ 
   }
   .habitRest1 {
      /* Landscape */
      /* Nummer horizontal aussparen, 3-stellig z.B. 1.2 */
      grid-template-columns: 30px auto; 
   }
   .habitRest3 {
      /* Landscape */
      /* Nummer horizontal aussparen, 3-stellig z.B. 1.2 */
      grid-template-columns: 45px auto; 
   }
   .habitRest5 {
      /* Landscape */
      /* Nummer horizontal aussparen, 5-stellig z.B. 1.2.3 */
      grid-template-columns: 55px auto;
   }
   .habitRest7 {
      /* Landscape */
      /* Nummer horizontal aussparen, 7-stellig z.B. 1.2.3.4 */
      grid-template-columns: 65px auto;
   } 

   
   .abstandCheckboxLink {
      /* Landscape */
      /* kleiner als .b-abstandHyperlink */
      padding-top: 3px;
      padding-bottom: 3px;
   }  
   
   .leerdavor {
      /* Landscape */
      /* für die Auswahl-Sortierung in zu lernende ... */
      padding-left: 10px;
   }
   .abstandLinkeSeite {
      /* Landscape */
      /* Abstand vom linken Rand: Inhalt und damit die Auswahlkästchen */
      /* wird auch im JavaScript kopfgruppenlinksVerteilen verwendet */
      
      gap: 0px;
   }
   
   .überschriftHabitat {   
      /* Landscape */
      margin-bottom: 4px;
   }

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







/* 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-dunkel);
   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: 1px;
   border-color: var(--b-sehr-dunkel);  
   border-style: solid;
}

.lebensraumlegende td {
   padding-top: 3px;   
}

.lebensraumTitel h1 {
   /* für lange ungetrennte Wörter im Lebensraumtitel */
   /* Beispiel Schwimmblattgesellschaft 1.1.3 */
   /* klappt leider nicht falls Sprache = en, weil Schwimmblattgesellschaft nicht englisch ist */
   display: inline-block !important;
   white-space: normal;  
   word-break: normal;  
   hyphens: auto !important;
   -webkit-hyphens: auto !important;
}


/* 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;
}






/* Footer */

.footer form {
   display: inline; 
   
}
.footer select {
   background: var(--b-hell);
   border-radius: 3px;
   border: 1px solid var(--b-sehr-dunkel);
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   color: var(--b-sehr-dunkel);
   cursor: pointer;
   padding-left: 5px;
}

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


.lernenLink {
   font-size: 16px !important;
   color: var(--b-auffällig);
   font-weight: bold;
}




/* überall */
/* ------- */

.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;
}

/* Infotexte (hinter blauem Fragezeichen) */
.InfotextAufzählung {
   display: grid;
   grid-template-columns: 15px auto;    
}
.InfotextZeichen {
   grid-column: 1 / 2;
}
.InfotextText {  
   grid-column: 2 / 3;
}


/* grosse Bildschirme verkleinern */
@media (min-width: 1200px) {
   :root {
      --b-page-width: 1200px;
   }
}