/* Achtung es gilt box-sizing: border-box -> width ist inklusive padding, border und margin */

/* Layout
   ======
   teilt sich in diese Teile:
   
   page (umfasst alles und ist maximale Grenze bei riesigen Bildschirmen)
      header (fix, überall gleich, enthält Website-Titel mit Logo sowie Navigation und Suche)
      seitenHeader (fix, Inhalt und Höhe je nach Seite anders)   
      flashmeldung (fix, Fehler- oder OK-Meldung. Ist zugleich Padding für Bereich data -> Hö	he darum variabel)	  
      data (2-spaltiges grid)
         data1 (grid-item: linke oder obere Seite)
         data2 (grid-item: rechte oder untere Seite)
         data3 (grid-item: linke oder untere Seite)
         data4 (grid-item: rechte oder obere Seite)
         data0 (falls nur eine Spalte)
      footer (fix, am unteren Bildschirmrand) 
*/


/* A l l e  Farben sind in eigenen Stylesheets deklariert, z.B. grün.css, grau.css, blau.css etc. */
/* Es sind 4 aufeinanderabgestimmte Farben: sehr dunkel, dunkel, mittel, hell */


/* spezielle Zeichen (siehe auch hier: https://www.w3schools.com/charsets/ref_html_symbols.asp) */
/* ≡      Hamburgersymbol für Menüanzeige im Portrait (durch Icon ersetzt, da je nach Browser windschief) */ 
/* ⌕      Lupe Für Suchenanzeige im Portrait (durch Icon ersetzt, da je nach Browser windschief) */
/* ×      Schliessen-Kreuz im Popupfensterchen (siehe js/popup-fenster.js) */
/* ☆      Sternli in Lebensraum-Legende von schweizerflora */
/* ☒     Checkbox voll (in iFarne - Schlüsselabfrage als PDF) */
/* ☐     Checkbox leer (in iFarne - Schlüsselabfrage als PDF) */



/* Variablen, die überall (landscape und portrait) die gleichen Werte haben */
/* ------------------------------------------------------------------------ */

/* Vorgehen: */
/* falls Werte gleich:   nur in all.css speichern, in landscape.css und portrait.css entfernen */
/* falls Werte ungleich: in all.css entfernen und in landscape.css und portrait.css speichern */



:root {
    
--b-navigation-items: 4; /* Anzahl Menu-Items */
/* in grids muss die Anzahl Spalten bekannt sein, die Anzahl Zeilen nicht -> sooo guet! */
/* Die Anzahl Menu-Items ist bekannt, die Anzahl Untermenüs kann bei jedem Menu-Item anders sein */



--b-page-border-width: 1px;	

--b-page-font-size: 14px;
--b-page-h1-font-size: 20px;
--b-page-h2-font-size: 18px;
--b-page-h3-font-size: 16px;
--b-page-h4-font-size: 14px;

--b-header-font-size: 20px;

--b-navigation-font-size: 17px;


--b-flashmeldung-font-weight: bold;

--b-footer-height: 35px;
--b-footer-font-size: 10px;


/* Formularboxbreite und Labelbreite gemäss längstem Label bestimmen. Inputbreite wird berechnet */
--b-formularbox-width: 300px;
--b-formularbox-label-width: 70px;
--b-formularbox-label-input-gap: 10px;
--b-formularbox-zeilen-gap: 5px;

--b-formularbox-input-width: calc(var(--b-formularbox-width) 
    - var(--b-formularbox-label-width) 
    - var(--b-formularbox-label-input-gap) 
    - calc(2 * var(--b-formularbox-padding))
    - calc(2 * var(--b-formularbox-border-width)));

--b-formularbox-padding: 15px;
--b-formularbox-border-width: 1px;

--b-formularbox-input-padding: 0; /* für Suchfeld im Header sinnvoll */
--b-formularbox-textarea-height: 100px;

--b-tooltip-breite: 120px;
--b-tooltip-position-top: calc(var(--b-page-font-size) + 8px);  /* für tooltip unterhalb */
--b-tooltip-position-bottom: calc(100% + 8px); /* für tooltip oberhalb. 100% wäre auf gleicher Höhe, + 8px ist 8px oberhalb */
--b-tooltip-position-left: 50%; /* normalerweise in der Mitte */
--b-tooltip-pfeilhöhe: 5px;
--b-tooltip-pfeil-color: var(--b-page-font-color);
--b-tooltip-padding: 5px;
--b-tooltip-font-size: var(--b-page-font-size);
}




/* allgemeine Styles */
/* ----------------- */

* {
   padding: 0;  
   margin: 0;
   box-sizing: border-box;  /* width ist inklusive padding, border und margin! */
}



body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: var(--b-page-font-color);
   font-size: var(--b-page-font-size); 
   background-color: var(--b-body-background-color);
   overflow-y: scroll;   /* Scrollbalken rechts über die gesamte Bildschirmhöhe, immer anzeigen, damit das Fenster immer gleich ist */
   overflow-x: hidden;   /* unten keinen Scrollbalken, Daten werden umgebrochen */
}
a {
   color: var(--b-page-font-color);
}
a:focus, button:focus, input:focus, textarea:focus {
   /* Android-Standards, etc. entfernen */
   outline: none;
}

input {
   filter: none; /* entfernt gelben Formularhintergrund bei Firefox */
}
input:autofill {
   background: var(--b-formularbox-background-color); /* entfernt gelben Formularhintergrund bei neuem Firefox */
}

img {
   max-width: 100%;  /*Bilder werden verkleinert falls nötig, aber nicht über 100% vergrössert */
   height: auto;
}

ul {
   list-style-position: outside;
   margin: 0;
   padding: 0;
   margin-left: 1.2em; /* Mittelwert zwischen Chrome (zu links) und Firefox (zu rechts) */
}

h1 {
   font-size: var(--b-page-h1-font-size);
   font-weight: 600; 
   margin-bottom: 10px;
   display: inline; /* unterdrückt line break */
}
h2 {
   font-size: var(--b-page-h2-font-size);
   font-weight: 600; 
   margin-bottom: 7px;
   display: inline; /* unterdrückt line break */
}
h3 {
   font-size: var(--b-page-h3-font-size);
   font-weight: 600; 
   margin-bottom: 4px;
   display: inline; /* unterdrückt line break */
}
h4 {
   font-size: var(--b-page-h4-font-size);
   font-weight: 600; 
   display: inline; /* unterdrückt line break */
}


.vertikalZentriertContainer {
   /* Container um Element vertikal zu zentrieren */
   position: relative;
   height: 100%;
}
.vertikalZentriertElement {
   /* Element wird im Container vertikal zentriert */
   position: absolute;
   top: 50%; /* links oben auf 50% vom Container */
   -webkit-transform: translateY(-50%); /* verschiebt die y-Achse um die Hälfte  s e i n e r  Höhe nach oben */
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}






/* Layout mit IDs */
/* -------------- */

/* 1. Ebene */
#page {
   /* Container für den gesamten Pludi */
   width: var(--b-page-width);  /* beschränkt auf max-Seitenbreite. für weitere Berechnungen muss die width in px sein, mit 100% klappt es nicht */
   min-height: 100vh; /* so bleibt beim Scrollen die background-color auch unten erhalten */ 
   background-color: var(--b-page-background-color);
   border-left: var(--b-page-border-width) solid var(--b-page-border-color); 
   border-right: var(--b-page-border-width) solid var(--b-page-border-color);
   position: relative; 
   z-index: 0;
}


   /* 2. Ebene */
   #inhalt {
      /* Seiteninhalt ohne Header und ohne Seitenheader */
      /* erbt z-index 0 von #page */
      /* in Landscape und Portrait unterschiedlich */
   }
   .data {
   /* Grid-Container für .data1/.data2 oder .data3/.data4 */   
      display: grid;
   }
      /* 3. Ebene */
      .data1, .data3 {
      }
      /* 3. Ebene */
      .data2, .data4 {
      }
      .data0 {
         /* wie .data, aber einspaltig*/     
      }
	
   /* 2. Ebene */
   #header, #seitenHeader, #flashmeldung, #footer {
      position: fixed;
      width: calc(var(--b-page-width) - var(--b-page-border-width) - var(--b-page-border-width));
      padding-left: var(--b-page-padding-left);
	   padding-right: var(--b-page-padding-right);  
   }


   /* 2. Ebene */
   #header {
      /* fixer Header, auf jeder Seite gleich */
      top: 0;
      height: var(--b-header-height);
      display: grid;	
      justify-content: space-between;
      background-color: var(--b-header-background-color);
      color: var(--b-header-font-color);
      font-size: var(--b-header-font-size);
      padding-top: var(--b-header-top-bot-padding);
      padding-bottom: var(--b-header-top-bot-padding);
      z-index: 3; /* Header-Untermenüs sollen über dem seitenHeader erscheinen. */
   }
   
      /* 3. Ebene */
      #headerTitel {
      /* enthalt Titel, Logo und im Portrait auch Lupen- und Hamburgersymbol */         
      }
      #header #headerTitel a{
         text-decoration: none;
         color: var(--b-header-font-color);
         /* kein Umbruch, auch bei Miniminigeräten nicht */
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
      }
      #headerNaviIcons {
         /* Hamburger- und Lupensymbol, nur im Portrait angezeigt */
      }

      #header #headerNavigation {
         /* Landscape und Portrait unterschiedlich */
      }
      #header #headerSuchfeld {
         /* Landscape und Portrait unterschiedlich */
         /* Formular siehe auch weiter unten bei den Formularen */
      }
  
         
   /* 2. Ebene */
   #seitenHeader {
      /* fixer Header, auf jeder Seite anders */
      /* Kann in der Höhe variieren, speziell im Portrait-Format */		
      top: var(--b-header-height);  /* Header aussparen */
      height: var(--b-seitenheader-height); 
      background-color: var(--b-seitenheader-background-color);       
      border-bottom: var(--b-page-border-width) solid var(--b-page-border-color);
      z-index: 2; /* Header-Untermenüs sollen über dem seitenHeader erscheinen */
      display: grid; 
   }
   
   
      /* 3. Ebene */
      #seitenHeaderTitelBrutto {
         /* brutto bezüglich vertikal zentrieren */
         display: grid;
         height: var(--b-seitenheader-titel-brutto-höhe);
      }
      .seitenHeaderTitelNetto,  .seitenHeaderTitelNettoMitTooltip {
         /* wird vertikal zentriert */
         display: inline-block; /* damit <span> kein linebreak verursacht */
         font-size: var(--b-seitenheader-font-size);         
         width: var(--b-seitenheader-titel-breite);  /* im Landscape per javaScript gesetzt, je nach dem ob Knöpfe */
      }
      .seitenHeaderTitelNetto {
         /* überlange Titel abschneiden. Dadurch ist Tooltip nicht mehr möglich */
         /* Es gilt: entweder Titel abschneiden oder Tooltip ermöglichen. beides geht nicht!! */
         white-space: nowrap;
         overflow: hidden; 
         text-overflow: ellipsis;  /* macht Pünktli, wenns keinen Platz hat */
      }

      
      #seitenHeaderKnöpfeBrutto {
         /* brutto bezüglich vertikal zentrieren */
         height: var(--b-seitenheader-knöpfe-brutto-höhe); 
         background-color: var(--b-seitenheader-background-color);
      }
      .seitenHeaderKnöpfeNetto {
         /* wird vertikal zentriert */
         display: flex;
         flex-direction: row;
         justify-content: space-between;  /* Space dazwischen, kein margin-left und kein margin-right */
         align-items: center; /* Knöpfe vertikal in der Mitte vom Container */
         height: var(--b-seitenheader-knopf-höhe);
         --b-tooltip-position-top: calc(var(--b-seitenheader-knopf-höhe) + 8px);  
         width: var(--b-seitenheader-knöpfe-brutto-breite); 

      }
      
      
      
      .Knopf1 a, .Knopf2 a, .Knopf3 a, .Knopf4 a, .Knopf5 a {         
         height: var(--b-seitenheader-knopf-höhe);
          
         margin-left: 0;  
         /* Die Variable --b-seitenheader-knopf-margin-left ist nur für das Berechnen der dargestellten Knopfbreite */ 
         /* Das Ausrichten der Knöpfe besort flex mit justify-content: space-between */
         
         background-color: var(--b-seitenheader-background-color);      
         border: var(--b-formularbox-border-width) solid var(--b-formularbox-border-color);      
         border-radius: 3px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
         font-size: var(--b-seitenheader-knopf-font-size);
         cursor: pointer;
         text-decoration: none;
         /* breite fix, siehe Angabe "flex-basis" bei den einzelnen Knöpfen */	      
   
         /* jeder Knopf wieder ein Flex-Container, damit seine Elemente zentriert werden können */
         display: flex;
         justify-content: center;  /* Text horizontal zentrieren */
         align-items: center; /* Text vertikal zentrieren */         
      }
      .KnopfLeer {
         /* Platzhalter */
         border-color: transparent;
         box-shadow: none;
      }
      .KnopfLeer:hover {
         background-color: var(--b-seitenheader-background-color) !important; 
      }
      
      .Knopf1, .Knopf2 { 
         flex-basis: calc((var(--b-data-breite) - var(--b-seitenheader-knopf-margin-left)) / 2);
         flex-grow: 0;
	      flex-shrink: 0;
      }
      .Knopf3 {
         /* breite */
         flex-basis: calc((var(--b-data-breite) - var(--b-seitenheader-knopf-margin-left) - var(--b-seitenheader-knopf-margin-left)) / 3);
         flex-grow: 0;
	      flex-shrink: 0;
      }
      .Knopf4 { 
         flex-basis: calc((var(--b-data-breite) - var(--b-seitenheader-knopf-margin-left) - var(--b-seitenheader-knopf-margin-left) - var(--b-seitenheader-knopf-margin-left)) / 4);
         flex-grow: 0;
	      flex-shrink: 0;
      }
      .Knopf5 { 
         flex-basis: calc((var(--b-data-breite) - var(--b-seitenheader-knopf-margin-left) - var(--b-seitenheader-knopf-margin-left) - var(--b-seitenheader-knopf-margin-left) - var(--b-seitenheader-knopf-margin-left)) / 5);
         flex-grow: 0;
	      flex-shrink: 0;
      }
      .Knopf1 a:hover, .Knopf2 a:hover, .Knopf3 a:hover, .Knopf4 a:hover, .Knopf5 a:hover {
         /* einzeln angeben, dann können Knöpfe auch ohne #seitenHeaderKnöpfe angewendet werden */
         background-color: var(--b-feld-hintergrund);
      }
      
      
  
   /* 2. Ebene */
   #flashmeldung {
      /* Höhe in Landscape und Portrait unterschiedlich */
      top: calc(var(--b-header-height) + var(--b-seitenheader-height));
      height: var(--b-flashmeldung-height); /* variabel: mit Meldung höher als ohne */
      background-color: var(--b-page-background-color);
      font-weight: var(--b-flashmeldung-font-weight);   
      z-index: 1;      
   }

   #flashmeldung .error {
      color: var(--b-flashmeldung-error);  
   }
   #flashmeldung .success {
      color: var(--b-flashmeldung-succes);      
   }
   #fmeldung {
      /* wird als <div> mit der Meldung eingefügt */
      padding-top: 10px;
   }


   /* 2. Ebene */
   #footer{
   /* am unteren Bildrand, zentriert */ 
      bottom: 0;  /* Position ganz unten, anstatt komplizierte margin-top-Berechnung */
      height: var(--b-footer-height);
      border-top: var(--b-page-border-width) solid var(--b-page-border-color);
      background-color: var(--b-footer-background-color);
      text-align: center;
      font-size: var(--b-footer-font-size);
      padding-top: 10px;
      z-index: 3;      
   } 
	

/* überall verwendbare Klassen */
/* --------------------------- */


/* Formulare */
/* --------- */




.b-formularBox {
   width: var(--b-formularbox-width); 
   background-color: var(--b-formularbox-background-color);
   font-size: var(--b-page-font-size);
   color: var(--b-formularbox-font-color);
   padding: var(--b-formularbox-padding);
   border-width: var(--b-formularbox-border-width);
   border-color: var(--b-formularbox-border-color);  
   border-style: solid;  
}
.b-formularBox label {
}
.b-formularBox input {
   /* der Button zählt auch als input, ist input type="button"! */ 
   border-color: var(--b-formularbox-border-color);
   border-width: var(--b-formularbox-border-width);
   background-color: var(--b-formularbox-input-background-color);
   padding: var(--b-formularbox-input-padding);
}
.b-formularBox textarea {
   /* resize: none; */  /* Falls manuelles Vergrössern des Feldes nicht erwünscht wäre */
   resize: vertical; /* nur vertikal vergrössern, da bei horizontaler Vergrösserung die anderen Felder auch vergrössert werden */
   border-color: var(--b-formularbox-border-color);
   border-width: var(--b-formularbox-border-width);  
   background-color: var(--b-formularbox-input-background-color);
   padding: var(--b-formularbox-input-padding);
}




#headerSuchfeldFormular {
   /* Spezialvariante von b-formularBox */
   --b-formularbox-padding: 2px;   
   --b-formularbox-label-width: 0;
   --b-formularbox-label-input-gap: 0; 
   --b-formularbox-input-padding: 0;
   --b-formularbox-input-background-color: var(--b-feld-hintergrund);
   display: grid;      
}
#headerSuchfeldFormular input{
   border-radius: 6px;   
   padding-left: 4px;
   padding-right: 4px;
   padding-top: 0;
   padding-bottom: 0;
   margin: 0;
}
#headerSuchfeldFormular .suchEingabe {
   grid-column: 1 / 2;
}
#headerSuchfeldFormular .suchLöschKnopf {
   grid-column: 2 / 3;
   width: 20px;
   padding-top: 2px;    
}


#Vorschläge {
   /* ajax-Vorschläge zu headerSuchfeld */
   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;
   margin-left: 1px;
   border-radius: 0 0 3px 3px;
   max-height: 70vh;
   overflow-y: auto;
   overflow-x: hidden;
   width: calc(var(--b-formularbox-width) - 2px); 
}
#Vorschläge a {
   text-decoration: none;
   margin-bottom: 5px;
}




#seitenheaderFilterfeld {
   /* Spezialvariante von b-formularBox */
   --b-formularbox-padding: 0;   
   --b-formularbox-label-width: 0;
   --b-formularbox-label-input-gap: 0; 
   --b-formularbox-input-padding: 1px; 
   --b-formularbox-input-background-color: var(--b-feld-hintergrund);
   --b-formularbox-input-background-color: var(--b-seitenheader-background-color);
   display: grid;
   border-color: transparent;
   
}
#seitenheaderFilterfeld input{
   border-radius: 6px;
   padding-left: 4px;
   padding-right: 4px;
   margin: 0;
   height: 20px;
   margin-top: 2px;
}
#seitenheaderFilterfeld .filterEingabe {
   grid-column: 1 / 2;
}
#seitenheaderFilterfeld .filterLöschKnopf {
   grid-column: 2 / 3;
   width: 20px; 
}




/* popup-Fensterchen */
/* ----------------- */



.b-popupStartpos {
   /* Container */
   position: relative;   
}
.b-popupFenster {
   /* gesamtes Fensterchen */
   display: none;
   position: absolute; /* in Relation zu .b-popupStartpos <div> */
   grid-template-columns: 1fr 20px;
   grid-template-rows: 25px 1fr;
   grid-row-gap: 0; /* kein gap, damit Move-Mauszeiger über Titel und Text angezeigt wird */
   border: var(--b-formularbox-border-width) solid var(--b-header-font-color);
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   padding: 5px;
   background-color: var(--b-feld-hintergrund);
   z-index: 4; /* soll über dem Header und über dem Seitenheader erscheinen */ 
   color: var(--b-page-font-color);
   font-size: var(--b-page-font-size);
   font-weight: normal;
   text-align: left;
}

.b-popupFenster .titel {
   grid-row: 1 / 2;
   grid-column: 1 / 2;
   font-weight: 600;
   cursor: move; 
   padding-bottom: 10px;
   padding-top: 7px;
}
.b-popupFenster .closebutton {
   grid-row: 1 / 2;
   grid-column: 2 / 3;
   text-align: center;
   cursor: pointer; 
   padding-bottom: 0px;
   font-size: 20px;   
}
.b-popupFenster .text {
   overflow-y: auto; /* vertikaler Scrollbar, falls nötig */
   overflow-x: hidden;
   grid-row: 2 / 3;
   grid-column: 1 / 3;  
   border-top: var(--b-formularbox-border-width) solid var(--b-header-font-color); 
   padding-top: 10px;
   padding-bottom: 8px;
   cursor: move; 
}
.b-popupFenster .text table tr td {
   /* z.B. für Lebensraum-Legende im Plan: ist kleine, schön ausgerichtete Tabelle */
   vertical-align: top;
}

.b-fragezeichen {
   /* Hyperlink als Fragezeichen anzeigen - für Infotexte */
   color: var(--b-page-border-color);
   font-size: 12px;
   font-weight: 600;
   padding: 2px 6.5px 2px 6.5px; /* oben rechts unten links */
   border: 1px solid var(--b-page-border-color);
   border-radius: 18px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
   text-decoration: none; 
   margin-bottom: 2px;
   position:relative;
   top:-2px;
}

.ohneTitel .b-popupFenster {
   /* für Infotexte ohne Titel */
   grid-template-rows: 15px 1fr;
   grid-template-columns: 1fr 22px;
}
.ohneTitel .b-popupFenster .titel {
   /* für Infotexte ohne Titel */
   padding-bottom: 0;
}
.ohneTitel .b-popupFenster .closebutton {
   /* für Infotexte ohne Titel */
   padding-bottom: 0;
   text-align: left !important;
   font-size: 16px;
}
.ohneTitel .b-popupFenster .text {
   /* für Infotexte ohne Titel */
   border-top: 0;
   padding-top: 0;
   padding-left: 10px;
}





/* Tooltip */
/* ------- */
/* Quelle: https://www.w3schools.com/css/css_tooltip.asp */

 
.b-tooltip {
   /* Container*/
   position: relative;
   display: inline-block; 
}

.b-tooltip .tooltiptext-oberhalb, .b-tooltip .tooltiptext-unterhalb {
   /* Text */
   position: absolute;
   visibility: hidden;   
   width: var(--b-tooltip-breite);
   background-color: var(--b-feld-hintergrund);
   color: var(--b-page-font-color);
   font-size: var(--b-tooltip-font-size);
   text-align: center;
   padding: var(--b-tooltip-padding) 0;
   border: var(--b-formularbox-border-width) solid var(--b-header-font-color);
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
   z-index: 4;     
   left: var(--b-tooltip-position-left);
   margin-left: calc(0px - (var(--b-tooltip-breite) / 2));

   /* Fade in tooltip, braucht 2 Sekunden bis Durchsichtigkeit weg ist (opacity von 0 auf 1) */
   opacity: 0;
   transition: opacity 2s;
}
.b-tooltip .breit {
   --b-tooltip-breite: 250px;
}
@media(hover: hover) and (pointer: fine) {
   /* Mouse over nur ausführen wenn kein touchscreen-Gerät: hover erkennbar und Mauspointer erkennbar */
   .b-tooltip:hover .tooltiptext-oberhalb, .b-tooltip:hover .tooltiptext-unterhalb {
      /* Show the tooltip text when you mouse over the tooltip container */
      visibility: visible;   
      opacity: 1;
   }
}
.b-tooltip .tooltiptext-oberhalb {
   bottom: var(--b-tooltip-position-bottom);
}
.b-tooltip .tooltiptext-unterhalb {   
   top: var(--b-tooltip-position-top); 
}
.b-tooltip .tooltiptext-oberhalb::after {
   /* Tooltip arrow, die Border einer Seite ist an den Enden zugespitzt, eine Top-Border um nichts ergibt so einen Abwärtspfeil */
   content: "";
   position: absolute;
   top: 100%; /* Pfeilposition */
   left: 50%;
   margin-left: calc(0px - var(--tooltip-pfeilhöhe)); /* -5px */
   border-width: var(--tooltip-pfeilhöhe);
   border-style: solid;
   border-color: var(--b-page-font-color) transparent transparent transparent; 
}
.b-tooltip .tooltiptext-unterhalb::before {
  /* oberhalb des Textes einen Aufwärtspfeil setzen */
  /* Pfeil durch border, welche nichts umschliessen. Haben spitze Enden */
  content: "";
  position: absolute;
  bottom: 100%; /* Pfeilposition */
  left: 50%;
  margin-left: calc(0px - var(--tooltip-pfeilhöhe)); /* -5px */
  border-width: var(--tooltip-pfeilhöhe);
  border-style: solid;
  border-color: transparent transparent var(--b-tooltip-pfeil-color) transparent; /* Pfeil zeigt nach oben */
  z-index: 4;
}




/* Anchor für lokale Hyperlinks - verschieben sich um Headerbreiten */
/* ---------------------------------------------------------------- */
/* Beispiel siehe Habitats in schweizerflora suche                  */

.anchor {
   /* Container für den .anchor <span>, welcher die Verschiebung enthält */
   position:relative;
}
.anchor span {
   /* Desktop: Die lokalen Anchor-Positionen verschieben sich um die Höhe von Navbar(=Header)(90) + Seitenheader(112) */ 
   /* innerhalb des anchor (=Ausgabeort) mit position:relative ist dann der Hinspringort span um absolute 202px weiter oben */
   position: absolute; 
   top: calc(0px - var(--b-header-height) - var(--b-seitenheader-height) - var(--b-flashmeldung-height));
} 



/* Abstand-, Schrift- und Sichtbar/Unsichtbar-Klassen */
/* -------------------------------------------------- */

.b-abstand500 {
   margin-top: 500px;
}
.b-abstand200 {
   margin-top: 200px;
}
.b-abstand150 {
   margin-top: 150px;
}
.b-abstand100 {
   margin-top: 100px;
}
.b-abstand90 {
   margin-top: 90px;
}
.b-abstand80 {
   margin-top: 100px;
}
.b-abstand70 {
   margin-top: 70px;
}
.b-abstand60 {
   margin-top: 60px;
}
.b-abstand50 {
   margin-top: 50px;
}
.b-abstand40 {
   margin-top: 40px;
}
.b-abstand30 {
   margin-top: 30px;
}
.b-abstand20 {
   margin-top: 20px;
}
.b-abstand19 {
   margin-top: 19px;
}
.b-abstand18 {
   margin-top: 18px;
}
.b-abstand17 {
   margin-top: 17px;
}
.b-abstand16 {
   margin-top: 16px;
}
.b-abstand15 {
   margin-top: 15px;
}
.b-abstand14 {
   margin-top: 14px;
}
.b-abstand13 {
   margin-top: 13px;
}
.b-abstand12 {
   margin-top: 12px;
}
.b-abstand11 {
   margin-top: 11px;
}
.b-abstand10 {
   margin-top: 10px;
}
.b-abstand09 {
   margin-top: 9px;
}
.b-abstand08 {
   margin-top: 8px;
}
.b-abstand07 {
   margin-top: 7px;
}
.b-abstand06 {
   margin-top: 6px;
}
.b-abstand05 {
   margin-top: 5px;
}
.b-abstand04 {
   margin-top: 4px;
}
.b-abstand03 {
   margin-top: 3px;
}
.b-abstand02 {
   margin-top: 2px;
}
.b-abstand01 {
   margin-top: 1px;
}

.b-schrift20 {
   font-size: 20px;
}
.b-schrift19 {
   font-size: 19px;
}
.b-schrift18 {
   font-size: 18px;
}
.b-schrift17 {
   font-size: 17px;
}
.b-schrift16 {
   font-size: 16px;
}
.b-schrift15 {
   font-size: 15px;
}
.b-schrift14 {
   font-size: 14px;
}
.b-schrift13 {
   font-size: 13px;
}
.b-schrift12 {
   font-size: 12px;
}
.b-schrift11 {
   font-size: 11px;
}
.b-schrift10 {
   font-size: 10px;
}
.b-schrift09 {
   font-size: 9px;
}
.b-schrift08 {
   font-size: 8px;
}


.b-kursiv {
   font-style: italic;
}
.b-fett {
   font-weight: bold;
}
.b-zentriert {
   text-align: center;
}
.b-rechtsbündig {
   text-align: right;
}
.b-auffällig {
   color: var(--b-auffällig);
}


.b-link-diskret a {
   text-decoration: none;
}
.b-link-diskret a:hover {
   text-decoration: underline;
}
.b-link-auffällig a {
   color: var(--b-auffällig);
}
.b-link-normal a {
}



.b-sichtbar {
   /* für Ajax: zeigen oder verstecken per javaScript */
   /* siehe auch b-sichtbarLandscape/b-sichtbarPortrait in basis/cs../landscape.css bzw. ...portrait.css */
   display: block;
}
.b-sichtbar-inline {
   /* display hat keinen default-Wert. normalerweise ist .b-sichtbar ok. */
   display: inline-block;
}

.b-unsichtbar {
   /* für Ajax: zeigen oder verstecken per javaScript */
   /* siehe auch b-sichtbarLandscape/b-sichtbarPortrait in basis/cs../landscape.css bzw. ...portrait.css */
   display: none;
}