:root {
   /* Grundfarben */
   --b-sehr-dunkel: #2c2c2c; /* font, formular border, etc. */
   --b-dunkel: #666565;      /* header background, page border, etc. */
   --b-hell: #eeeeee;        /* 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-header-font-size: 24px; 
   --b-footer-font-size: 12px;
   --b-header-height: 70px; 
}



/* Variablen Abweichungen Landscape (Klassen Abweisungen am Ende dieser Datei)*/
@media (min-width: 992px) {
   :root {
      --b-header-font-size: 26px;
      --b-header-height: 70px; 
   }
}

.br_nur_handy {
   /* Header Logo 2-zeilig im Portrait */
   /* einzeilig im Landscape */
   display: inline;
}

/* Pfeile im Header Menü */
.pfeil-dezent-header {
   color: var(--b-hell);
}
.pfeil-dezent {
   color: #888888;       /* Farbe grau */
   color: var(--b-dunkel);      
}

.inhalt {
   padding-top: 10px;
}

.listenelement {
   /* 2 Spalten  im Landscape und Portrait unterschiedlich breit*/
   display: grid;
   grid-template-columns: 26% auto;
   grid-column-gap: 10px; 
   line-height: 1.5em;
}

.listenelement_bild {
   grid-column: 1 / 2;
}
.listenelement_bild .tooltiptext {
   left: 35%;
}
.listenBild, .listenBildLeer {   
   height: auto;
   margin-bottom: 10px;
   margin-top: 5px;
   width: 80%; 
}
.unsichtbarImportant {
   /* im Zusammenhang mit Grid offenbar nötig */
   display: none !important;
}

.listenBildLeer {
   /* allgemeiner Style: Liste */
   border: var(--b-formularbox-border-width) solid var(--b-formularbox-border-color);
}


.listenelement_text {
   grid-column: 2 / 3;
}
.listenelement_text a {
   text-decoration: none;
}
.listenelement_text a:hover {
   text-decoration: underline;
}
.listenelement_text .tooltiptext{
   left: 15%;
}


.text_normal {
   font-style: normal;
}
.text_wissenschaftlich {
   font-style: italic;   
}

.link-zeile {
   display: inline-flex;         /* Richtet die Links horizontal in einer Zeile aus */
   flex-wrap: nowrap;       /* Erlaubt automatischen Umbruch, falls der Platz nicht reicht */
   gap: 35px;             /* WICHTIG: Mindestens 30px Abstand, damit sich die unsichtbaren Klickflächen nicht überlagern */
   padding: 12px 0;       /* Schafft Platz nach oben und unten für die 15px-Touch-Fläche */
}
.link-gross {
   /* macht antippbare Fläche grösser */
   font-size: 13px;
   position: relative;
   display: inline-block; /* Beibehalten, erzwingt die Box-Struktur */
   width: max-content;    /* WICHTIG: Garantiert, dass das Element seine Breite behält */
   height: 100%
/*   position: relative;
   display: inline-block; */
}
.link-gross::after {
   content: '';
   position: absolute;
   /* Dehnt die Klickfläche um 15 Pixel in jede Richtung aus */
   top: -12px;
   bottom: -12px;
   left: -12px;
   right: -12px;
   /* Sorgt dafür, dass der Browser den Bereich als klickbar erkennt */
   cursor: pointer; 
}


.nrAbstand {
   word-spacing: 15px;
}
.lebensraum-legende a {
   /* Sternli in Legende nicht unterstreichen */
   text-decoration: none;  
}
.lebensraum-legende td {
   vertical-align: top;
   padding-bottom: 3px;
}

.datenubernahme {
   display:grid;
   grid-template-columns: 66% auto;    
}
.datenubernahme .links {
   grid-column: 1 / 2;
   padding-bottom: 3px;
}
.datenubernahme .rechts {
   grid-column: 2 / 3;
   padding-bottom: 3px;
}

.artBezeichnung {
   /* im Portrait alle untereinander */
   /* im Landscape je zwei nebeneinander */
   display: grid;
   grid-template-columns: auto;
}

.artBild{
   max-width: 98%;
   height: auto;  
}

.footer{
   white-space: nowrap; 
   overflow: hidden;
}





/* Abweichungen Landscape */ 
@media (min-width: 992px) {
   
   .br_nur_handy {
      /* Header Logo 2-zeilig im Portrait */
      /* einzeilig im Landscape */
      display: none;
   }
   
   .seitenheaderTitelEinfach {   
      padding-left: 0;  
      padding-right: 0;
   }
   
   .vorschlaegeSeitenheader {
      margin-left: var(--b-page-padding-left);
      margin-top: 2px; /* wenig unterhalb der Seiteneader Border */
   }
   
   .inhalt {
      padding-top: 0;
   }
   
   .link-zeile {
      padding: 0;   
   }
   .link-gross::after {
      content: none !important;
      display: none;
   }

   .listenelement {
      /* 2 Spalten  im Landscape und Portrait unterschiedlich breit*/ 
      grid-template-columns: 30% auto;
   } 
   .listenBild, .listenBildLeer {  
      width: 66%;
   }
   
   .artBezeichnung {
      /* im Landscape je zwei nebeneinander */
      /* im Portrait alle untereinander */
      display: grid;
      grid-template-columns: max-content max-content;
      column-gap: 20px;
   }
   
   .artBild {
      height: 70vmin; 
   }
   
}

/* grosse Bildschirme */
@media screen and (min-width: 1200px) {  
   :root {
      --b-page-width: 1200px;
   }
   
   .page {
      /* damit die verkleinerte Seite in der Bildschirmmitte erscheint */
      width: var(--b-page-width);
      margin-left: auto;
      margin-right: auto;   
   }
}