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

/* Layout */
/* =======*/
/*  teilt sich in folgende 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, Höhenjustierung per JavaScript)   */
/*     flashmeldung (fix, Fehler- oder OK-Meldung. Höhenanpassung bei Verwendung via JavaScript)*/
/*     inhalt (container für data)*/
/*        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) */ 

/*  page hat ein padding von --b-header-height + --b-seitenheader-height + --b-flashmeldung-height, */
/*  da diese 3 Elemente fix und dadurch ausserhalb vom flow sind */

/* Alle Styles sind Klassen (.page, .header, .seitenheader, .flashmeldung, .inhalt, .footer) */
/* Ids werden für JavaScript verwendet (#page, #header, #seitenheader, #flashmeldung, #inhalt, #footer) */

/* Es gibt 4 Grundfarben mit folgenden Variablen (Werte in all.css der Anwendung definiert) */
/* -b--sehr-dunkel     Schrift */
/* -b--dunkel          Header Hintergrund */
/* -b--hell            Seiten Hintergrund */
/* -b--sehr-hell       Schrift Header */



:root {  
   
--scale: 1; /* Standardfaktor für Android, Desktop etc.. Aussnahme siehe am Schluss dieses Files */

--b-scrollbar-width: 15px; /* wird per JavScript gesetzt basis/js../functions/setPageUndScrollbarWidth */
--b-page-width: 100vw;     /* wird per JavScript gesetzt basis/js../functions/setPageUndScrollbarWidth */
   
--b-page-width-netto: calc(var(--b-page-width) - 2px); /* ohne border */

--b-seitenheader-info-width: 40px;  /* Breite des Fragezeichen innerhalb vib Titelcontainer */

/* Tooltips */
--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 */  


/* 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) 
   - 15px /* 2 * padding */
   - 2px); /* 2 * border */
}

/* Achtung: neu ist der Breakpoint für Portrait oder Landscape 992px (früher war es 768px) /*
/* Die Werte 991 für max-width oder 992 für min-width sind überall als Zahl vorhanden, auch in functions.js! */


/* Variablen für Portrait */
@media (max-width: 991px) {
   :root {
      --b-islandscape: 0;   /* mit javascript herausfinden, ob Landscape oder Portrait (wird nur noch im Filter gebraucht) */
      
      --b-page-font-size: 16px; /* 14px; */
      
      --b-max-seitenbreite: 991px; 
      
      --b-page-padding-left: 15px;	
      --b-page-padding-right: 15px; /* muss mindestens Scrollbarbreite sein */
      
      --b-header-height: 45px;  
      --b-header-font-size: 26px;   /* 24px */ /* für Schweizerflora Suche lokal 18px */
      
      --b-seitenheader-basis-height: 40px;  /* Konstante für minimale Höhe (nur Knöpfe oder gar nichts), bleibt unverändert - für JavaScript */
      --b-seitenheader-height: 40px;        /* verwendete Höhe, wird im JavaScript angepasst */

      --b-seitenheader-knopf-margin-left: 3px;
      --b-seitenheader-knopf-höhe: 40px;  /* Platz für notfalls 3 Zeilen */
      --b-seitenheader-knopf-basis-height: 40px;  /* Basishöhe für Portrait-Seitenheader-Höhe-Berechnung im JavaScript */
      --b-seitenheader-knopf-font-size: 12px; /* 11px */  
      
      --b-flashmeldung-height: 3px; /* wird per javaScript angepasse */
      --b-flashmeldung-basis-height: 3px;
      --b-flashmeldung-height-mit-meldung: 65px;
      
      --b-data-breite: calc(
         var(--b-page-width) - 2px -         
         (var(--b-page-padding-left) + var(--b-page-padding-right))
      );      

      --b-inhalt-padding-bottom: 100px;
      
      /* ausschliesslich portrait */
      --b-header-height-mit-suchfeld: 90px;   /* wird per javaScript auf --header-height übertragen */
      --b-header-height-ohne-suchfeld: 45px;  /* wird per javaScript auf --header-height übertragen */   

   }
}


@media (max-width: 771px) {
   /* Portrait normal */
   :root {
      --b-page-padding-left: 10px;	
      --b-page-padding-right: 10px;  
   }
}
@media (max-width: 380px) {  /* 400px, laut KI 360-380 */
   /* Portrait klein */
   :root {
      --b-seitenheader-knopf-font-size: 11px;
/*      --b-page-font-size: 15px;   besser für alle portrait gleich   */
      --b-page-padding-left: 5px;	
      --b-page-padding-right: 5px; /* muss mindestens Scrollbarbreite sein */     
   }
}

@media (min-width: 992px) {
   /* Landscape */
   :root {
      --b-islandscape: 1;   /* mit javascript herausfinden, ob Landscape oder Portrait (wird nur noch im Filter gebraucht)*/
      
      --b-page-font-size: 15px; /* 14px; */
      
      --b-max-seitenbreite: 1200px; 
 
      --b-page-padding-left: 20px;	
      --b-page-padding-right: 20px; 
      
      --b-header-height: 70px; /* 87px;*/  
      --b-header-font-size: 26px; /* 24px; */
      
      --b-seitenheader-basis-height: 60px;  /* Konstante für minimale Höhe, bleibt unverändert - für JavaScript */
      --b-seitenheader-height: 60px;        /* verwendete Höhe, wird im JavaScript angepasst */
 

      --b-seitenheader-knopf-margin-left: 10px;  
      --b-seitenheader-knopf-höhe: 42px;
      --b-seitenheader-knopf-basis-height: 0px;  /* Basishöhe für Portrait-Seitenheader-Höhe-Berechnung im JavaScript */
      --b-seitenheader-knopf-font-size: 12px; /* 11px; */
      
      --b-flashmeldung-height: 10px; /* wird per javaScript angepasst */      
      --b-flashmeldung-basis-height: 10px;
      --b-flashmeldung-height-mit-meldung: 40px;
   
      --b-data-gap: 20px; /* Leerraum zwischen 2-spaltiger Darstellung, kommt im portrait nicht vor */ 
      
      --b-data-breite: calc(
         ( var(--b-page-width) 
           - 2px
           - var(--b-page-padding-left) 
           - var(--b-page-padding-right) 
           - var(--b-data-gap)
         ) / 2
      );             
      
      --b-inhalt-padding-bottom: 150px;             
   }   
}


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

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


html {   
   scrollbar-gutter: stable both-edges;  /* Soll Wackeln auf Mac Book verhindern */
}

body {
   font-family: Inter, Verdana, Arial, Helvetica, sans-serif;
   color: var(--b-sehr-dunkel);
   font-size: var(--b-page-font-size); 
   background-color: var(--b-sehr-hell);    
}

a {
   color: var(--b-sehr-dunkel);
}
a:focus, button:focus, input:focus, textarea:focus {
   /* Android-Standards, etc. entfernen */
   outline: none;
}
a, div[cursor="pointer"] {
   /* verhindert aufblitzenden blauen Hintergrund beim Antippen von Links */
   -webkit-tap-highlight-color: transparent;
}


input {
   filter: none; /* entfernt gelben Formularhintergrund bei Firefox */
}
input:autofill {
   background: var(--b-hell); /* 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: calc(var(--b-page-font-size) + 4px); /* 18px; */
   font-weight: 600; 
   margin-bottom: 10px;
   display: inline; /* unterdrückt line break */
}
h2 {
   font-size: calc(var(--b-page-font-size) + 2px); /* 14px; */
   font-weight: 600; 
   margin-bottom: 7px;
   display: inline; /* unterdrückt line break */
}
h3 {
   font-size: var(--b-page-font-size); /* 14px; */
   font-weight: normal;
   margin-bottom: 4px;
   display: inline; /* unterdrückt line break */
}


.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 */
   max-width: var(--a-page-max-width, 1200px) !important;  /* 1200px falls --a-page-max-width fehlen sollte */
   
   min-height: 100vh; /* so bleibt beim Scrollen die background-color auch unten erhalten */ 
   background-color: var(--b-hell);
   border-left: 1px solid var(--b-dunkel); 
   border-right: 1px solid var(--b-dunkel);
   padding-top: calc(var(--b-header-height) + var(--b-seitenheader-height) + var(--b-flashmeldung-height)); 
	padding-bottom: var(--b-footer-height);
   position: relative; 
   z-index: 0;
   
   /* falls page schmaler als Viewport */
   margin-left: auto;
   margin-right: auto; 
/*   background-color: orange;*/
}




/* header */

.header {
   position: fixed;
   width: var(--b-page-width-netto);  
   max-width: var(--a-page-max-width, 1200px) !important;  /* 1200px falls --a-page-max-width fehlen sollte */  
   height: var(--b-header-height);
   top: 0;
   left: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: var(--b-page-padding-left);
   padding-right: var(--b-page-padding-right);
   background: var(--b-dunkel);  
   border-bottom: 1px solid var(--b-dunkel);    
   z-index: 3;
}

.mobile-controls {
  display: flex;
  gap: 15px;
  gap: 5px;
  margin-left: auto; /* Buttons nach rechts */
  
  flex-grow: 0;       /* Nimmt sich nur so viel Platz, wie die Icons/Inhalte absolut brauchen */
  flex-shrink: 0;     /* Darf niemals schrumpfen oder umbrechen */
  white-space: nowrap; /* Verhindert, dass Controls (z.B. Buttons) untereinander brechen */
}



/* Macht den umschließenden Button unsichtbar, damit nur das SVG wirkt */
.toggle-btn {
   background: transparent;
   border: none;
   padding: 0;
   margin: 0;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   /* Verhindert den hässlichen grauen Klick-Kasten auf dem iPad */
   -webkit-tap-highlight-color: transparent; 
}


/* SVG Header Buttons für Menu (=Hamburger) und Suche (=Lupe) */
.icon-search, 
.icon-hamburger {
  width: 24px;   /* Gleiche Größe */
  height: 24px;
  fill: var(--b-sehr-dunkel);
  transition: fill 0.3s ease;  
  display: block; /* Verhindert kleine Abstände unter dem SVG */
}




/* Header Logo-Text */

.headerLogo a {
   color: var(--b-sehr-hell);
   font-size: var(--b-header-font-size);
   font-weight: bold;   
   white-space: nowrap; /* verhindert Zeilenumbruch */ 
   text-decoration: none;
   
   flex-grow: 1;       /* Nimmt sich standardmässig allen verfügbaren Platz */
   flex-shrink: 1;     /* Darf bei extremem Platzmangel mitschrumpfen */
   min-width: 0;   
}



/* Header menü */

.nav-menu { 
  /* zusammen mit .headerSuche im .header */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--b-dunkel);
  padding: 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  display: none;
  z-index: 3;
  max-height: calc(100dvh - 100%); /* begrenzt Höhe bis zum unteren Bildschirmrand dynamisch */
  overflow-y: auto;                /* zeigt bei Bedarf vertikalen Scrollbalken */
}

.nav-menu li {
   color: var(--b-sehr-hell);
   margin-bottom: 30px;
   list-style: none;
}
.nav-menu a {
   color: var(--b-sehr-hell);
   text-decoration: none;     
   font-size: var(--b-page-font-size);
}

.nav-menu.is-open, .headerSuche.is-open {
  display: block;
}


/* Header Untermenü */

.submenu {
   display: none;
   list-style: none;
   padding-left: 20px;
   padding-top: 5px;
   background: var(--b-dunkel);  
   border-radius: 4px;
}
.submenu li {
   margin-top: 5px;
   margin-bottom: 25px;
}
.submenu li a {
   color: var(--b-sehr-hell);
}
.has-submenu.is-open .submenu {
   display: block;
  
}

/* Buttons im Header */

.toggle-btn {
   /* fürs Tippen aktive Fläche ist gross */
   width: 44px;  
   height: 44px;  
   background: var(--b-dunkel);
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 4px;   
   /* blaues Aufleuchten verhindern */
   -webkit-tap-highlight-color: transparent;   
   outline: none;
   cursor: pointer;
}

.toggle-btn-sichtbar {
   /* so sieht es immer aus */
   background: var(--b-hell);
   padding: 4px 4px;
   border-radius: 6px;
   transition: transform 0.1s ease-in-out; /* verlangsamt das Verkleiner/Vergrössern */
}

.toggle-btn:active .toggle-btn-sichtbar { 
   /* Veränderung beim Draufdrücken */      
   background: var(--b-sehr-hell); 
   transform: scale(0.9); 
   border-radius: 4px; /* überschreibt die 6px von oben während des Klicks */
   display: flex;
}




/* Header Suche */

.headerSuche { 
  /* zusammen mit .nav-menu im .header */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--b-dunkel);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  display: none;
  z-index: 1;
}

.headerSuche.active {
   display: block;
}

.headerSuche .such-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.headerSuche .suchEingabe {      
   width: 100%;   
   border: 1px solid var(--b-sehr-dunkel); 
   font-size: var(--b-page-font-size); /* 16px; */ 
   border-radius: 6px;
   padding: 5px 48px 5px 5px; /* 48px = Platz für Löschen-Kreuz */
   background: var(--b-hell);
   box-shadow: inset 0 3px 4px rgba(0,0,0,0.12);  /* rechts 0, unten 3px, blurr 4px, Farbe rgba... */      
}

.headerSuche .clear-button {
  position: absolute;
  /* rechtsbündig */
  right: 0px; 
  
  /* vertikal zentrieren */
  top: 50%;
  transform: translateY(-50%); 
  
  /* Klickfläche fürs Handy */
  width: 44px;
  height: 44px;
  
  /* Kreuz (×) zentrieren innerhalb 44px */
  display: flex;
  align-items: center;  /* vertikal */
  justify-content: center; /* horizontal */
  
  background: none;
  border: none;
  font-size: 22px;  
  color: var(--b-sehr-dunkel);
  cursor: pointer; 
  text-decoration: none;
  
  display: none; 
}




.vorschlaege {   
   display: none;      /* Standardmässig aus, solange leer */
   position: absolute; /* Hebt das Element aus dem Layout-Fluss */
   top: 100%;          /* Positioniert es direkt unter dem Formular/Header */
   left: 0;   
   width: var(--b-page-width-netto);   
   background: var(--b-sehr-hell);
   box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* Schatten für "Float-Effekt" */
   border-radius: 4px;
   border: 1px solid var(--b-sehr-dunkel);      
   padding: 0px 4px 4px 10px;   
   z-index: 3;         /* über dem Seiteninhalt */
   max-height: 400px;  /* Scrollbar bei vielen Treffern */
   overflow-y: auto;
   border-top: none;   /* Nahtloser Übergang nach oben */
}
.vorschlaege a {
   text-decoration: none;
}

.vorschlaege:not(:empty) {
   /* Box nur anzeigen, wenn sie nicht leer ist */
   display: block;
}




/* Header Abweichungen für Desktop/Landscape ab 992px */

@media (min-width: 992px) {   
   
   /* Header Menü */
   
   html {
      /* Landscape */
      scrollbar-gutter: stable;  /* Edge lässt so einen fixen Platz für den Scrollbar frei */
   }
   
   .mobile-controls {
      /* Landscape */
      display: none;
   }
   
   .header {
      /* Landscape */
      padding-bottom: 5px;
   }

   .header-right {
      /* Landscape */
      display: flex !important;
      flex-direction: column; /* Menü über Suche */
      align-items: flex-end;  /* Alles rechtsbündig */
      margin-left: auto;
      gap: 10px;
      /* Älteren Webkit-Browsern helfen, die volle Breite für Spalten zu erlauben */
      width: 100%; 
      max-width: max-content; 
   }

   .nav-menu, .headerSuche {
      /* Landscape */
      display: flex !important;
      position: static;
      padding: 0;
      box-shadow: none;
      background: transparent;
   }
   
   .nav-menu {
      /* Landscape Anpassungen für Mac */
      width: max-content !important; /* Zwingt das Menü, so lang zu sein wie sein Inhalt (die li-Elemente nebeneinander) */
      min-width: 100%;               /* Verhindert, dass es schmaler als die Suche gerendert wird */
      justify-content: flex-end;     /* Richtet die Menüpunkte innerhalb des längeren Menüs rechtsbündig aus */
      padding-top: 6px;
      max-height: none;   
      overflow-y: visible; 
   }
   
   .headerSuche {
      /* Landscape */
      width: auto; /* Die Suche darf ihre eigene Breite behalten */
   }

   .nav-menu li {
      /* Landscape */
      margin-bottom: 0;      
      white-space: nowrap; /* Absolutes Verbot für ältere Browser, die Menüpunkte umzubrechen! */
   }
   
   .nav-menu li a {
      /* Landscape */
      color: var(--b-sehr-hell);
   }

   .main-menu {
      /* Landscape */
     display: flex;
     list-style: none;
     gap: 20px;
     margin: 0;
     padding: 0;
     font-size: calc(var(--b-page-font-size) + 2px); /* 16px; */
     width: 100%; /* Füllt den Platz des nav-menu komplett aus */
     justify-content: flex-end;
   }
   
   
   /* Header Untermenüs */
   
   .has-submenu { 
      /* Landscape */
      position: relative; 
   }
   .has-submenu:hover .submenu {
      /* Landscape */
      display: block;
      position: absolute;
      top: 100%;
      right: 0;
      background: var(--b-sehr-hell);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      padding-left: 0;
      padding-right: 0;
   }
   .submenu {
      /* Landscape */
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      border: 1px solid var(--b-sehr-dunkel);      
      border-radius: 3px;   
   }
   .submenu li {
      /* Landscape */
      margin-bottom: 0; 
   }
   .submenu li a { 
      /* Landscape */
      margin-left: 3px;
      margin-right: 3px;
      padding-left: 10px;
      padding-right: 10px;  
      padding-top: 3px;  
      padding-bottom: 3px;  
      display: block; 
      color: var(--b-sehr-dunkel);
      font-size: var(--b-page-font-size); /* 14px; */
   }
   .submenu li:last-child a {
      /* Landscape */
      margin-bottom: 10px;
   }
   .submenu li a:hover {
      /* Landscape */
      background: var(--b-hell);
      border-radius: 3px; 
   }
   
   /* Header Suche (siehe auch .seitenheaderSuche) */   
   
   .headerSuche { 
      /* Landscape */
      /* Ankerpunkt für .vorschlaege */      
      position: relative;
      padding-right: 0;
      background: var(--b-dunkel);
   }
   
   .headerSuche .suchFormularbox {
      /* Landscape */
      display: flex; 
      width: 300px;          
   }
   
   .headerSuche .search-container { 
      /* Landscape */
      width: 300px;  
   }

   .headerSuche .suchEingabe{
      /* Landscape */
      width: 100%;  
      padding: 4px 40px 4px 8px; /* 40px = Platz für Löschen-Kreuz */ 
      font-size: 14px;
   }

   .headerSuche .clear-button { 
      /* Landscape */
      font-size: 16px;     
      width: 22px;
      height: 22px;
      color: var(--b-sehr-dunkel);
      display: flex;
      align-items: center;
      justify-content: center;
      display: none; 
   }

   
   .vorschlaege {   
      /* Landscape */
      width: 300px; /* gleich wie .headersuche .suchFormularbox */
      padding: 0px 4px 4px 4px;
   }
   .vorschlaege a {
      /* Landscape */
      padding-left: 5px; 
   }

}

/* Header-Anpassungen an alte Mac-Geräte */
@media not all and (min-resolution:.001dpcm) { 
   @supports (-webkit-appearance:none) { 
      
      html, body {
         overflow-y: auto !important;     /* Verhindert starre Desktop-Scrollbars auf dem iPad */
         width: 100vw !important;         /* Erzwingt die exakte visuelle Breite des Apple-Bildschirms */
         -webkit-text-size-adjust: 100%;  /* Verbietet Safari, Schriftgrößen eigenmächtig zu vergrößern */
      }
      
      /* Zwingt das iPad Mini, die Untermenü-Punkte als klickbare Elemente zu erkennen */
      .has-submenu, 
      .has-submenu * {
         cursor: pointer !important;
      }                 
   }
}



/* Seitenheader und Knöpfe */

.seitenHeader {
   /* fixer Header, auf jeder Seite anders */
   /* Kann in der Höhe variieren, css Portrait und css Landscape */	
   position: fixed;
   width: var(--b-page-width-netto); 
   max-width: var(--a-page-max-width, 1200px) !important;  /* 1200px falls --a-page-max-width fehlen sollte */
   top: var(--b-header-height);  /* Header aussparen */
   background-color: var(--b-hell);       
   border-bottom: 1px solid var(--b-dunkel);
   z-index: 2; /* Header-Untermenüs sollen über dem seitenHeader erscheinen */
   display: grid;       
   align-items: center;  /* vertikal */
   padding: 0;
   margin: 0;
   min-height: var(--b-seitenheader-height); /* wird per JavaScript angepasst */
   height: auto; 
}

.seitenheaderTitelMitKnoepfen {
   grid-row: 2 / 3;   /* unten */
   margin-top: 5px;    /* etwas Abstand zu den Knöpfen */
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: var(--b-page-padding-left);  
   padding-right: var(--b-page-padding-right);
   
   display: flex;     
   flex-direction: row;   
   align-items: center;  /* vertikal */ 
   justify-content: flex-start;   
}
.seitenheaderTitelMitKnoepfen h1 {
   margin-bottom: 0;
}

.seitenheaderTitelContainer {
   /* enthält links Infotext (=Fragezeichen) und rechts Titel und Suchformular */
   /* siehe auch .vorschlaegeSeitenheader */
   display: grid; 
   grid-template-columns: var(--b-seitenheader-info-width) auto; 
   width: var(--b-data-breite);
}
.seitenheaderInfo {
   grid-column: 1 / 2;
   display: flex;
   align-items: center;  /* vertikal */ 
}
.seitenheaderTitel {
   grid-column: 2 / 3;
}

.seitenheaderTitelOhneInfo {
   width: 100%;   
}


.seitenheaderKnoepfe {
   grid-row: 1 / 2;   /* oben */
   display: flex;
   flex-direction: row;
   align-items: center; /* Knöpfe vertikal in der Mitte vom Container */
   justify-self: end;
   justify-content: flex-end; 
   height: var(--b-seitenheader-knopf-höhe);
   --b-tooltip-position-top: calc(var(--b-seitenheader-knopf-höhe) + 8px);      
   width: 100%;
   box-shadow: 0 3px 4px rgba(0,0,0,0.12);  /* rechts 0, unten 3px, blurr 4px, Farbe rgba... */
}
.seitenheaderKnoepfe .knopf { 
   flex: 1; /* Alle Knöpfe teilen sich den Platz gleichmässig auf */
   min-width: 0; 
   width: 100%;  
}
.seitenheaderKnoepfe .knopf a {         
   height: var(--b-seitenheader-knopf-höhe);
   margin-left: 0;    
   background-color: var(--b-hell);
   font-size: var(--b-seitenheader-knopf-font-size);
   cursor: pointer;
   text-decoration: none;
   
   text-align: center;        /* immer zentrieren */
   
   white-space: normal;  
   word-break: normal;  
   
   /* hyphens: auto; wird per javaScript gesetzt
   /* webkitHyphens: auto;  wird per javaScript gesetzt */

   
   padding-left: 2px;
   
   border-bottom: 1px solid var(--b-sehr-dunkel);  
   border-left: 1px solid var(--b-sehr-dunkel); 
   border-right: none;         
   
   /* 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 */  
}
.seitenheaderKnoepfe .knopf:first-child a {
  border-left: none !important;  
}

.seitenheaderSuche { 
   /* Ankerpunkt für .vorschlaege */      
   position: relative;
   padding-right: 0;
   background: var(--b-hell);
}


.seitenheaderSuche .such-container-seitenheader {      
   position: relative;
   display: inline-block;
   width: 100%; 
}

.seitenheaderSuche .suchEingabeSeitenheader {
   width: 100%;   
   border: 1px solid var(--b-sehr-dunkel);  
   border-radius: 6px;
   padding: 4px 44px 4px 6px; /* 44px = Platz für Löschen-Kreuz */
   background: var(--b-hell);
   
   font-size: 16px; /* damit iOS das Layout nicht verändert */
} 

.seitenheaderSuche .clear-button-seitenheader {
  position: absolute;
  /* rechtsbündig */
  right: 0px; 
  
  /* vertikal zentrieren */
  top: 50%;
  transform: translateY(-50%); 
  
  /* Klickfläche fürs Handy */
  width: 44px; 
  height: 44px; 
  
  /* Kreuz (×) zentrieren innerhalb 44px */
  display: flex;
  align-items: center;         /* vertikal */
  justify-content: end;  /* horizontal */ 
  margin-right: 4px;
  
  background: none;
  border: none;
  font-size: 18px;  
  color: var(--b-sehr-dunkel);
  cursor: pointer; 
  text-decoration: none;
  
  display: none; 
}

.vorschlaegeSeitenheader {
   margin-top: 3px;
   margin-left: 0;   
}






/* Seitenheader und Knöpfe Abweichungen für Desktop/Landscape */

@media (min-width: 992px) {
   
   .seitenHeader {
      /* Landscape */
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: var(--b-page-padding-left);
      padding-right: var(--b-page-padding-right); 
   }
   
   .seitenheaderTitelMitKnoepfen {
      /* Landscape */
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      margin-top: 0;
      padding-left: 0;      
   }

   .seitenheaderKnoepfe {
      /* Landscape */
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      width: var(--b-data-breite);
      gap: var(--b-seitenheader-knopf-margin-left);  /* Abstand zwischen den Buttons */ 
      box-shadow: none;
   }
   
   .knopf a { 
      /* Landscape */
      margin-right: 0;
      border: 1px solid var(--b-sehr-dunkel);      
      border-radius: 3px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      border: 1px solid var(--b-sehr-dunkel) !important; 
      
      /* Kontextmenü verhindern bei langem Drücken */
      -webkit-touch-callout: none; /* Blockiert das Menü auf iOS/Android-Browsern */
      -webkit-user-select: none;   /* Chrome, Safari, Samsung Internet */
      -moz-user-select: none;      /* Firefox */
      -ms-user-select: none;       /* Edge / IE */
      user-select: none;           /* Standard */
   }
   .seitenheaderKnoepfe .knopf:first-child a {
      /* Landscape */
      border-left: 1px solid var(--b-sehr-dunkel) !important;  
   }   
   
   .knopf:only-child {
      /* Landscape */
      /* falls nur ein einziger Knopf, dann so breit wie 2 Knöpfe */
      flex: none; /* Nicht den ganzen Platz einnehmen */
      width: calc(50% - (var(--b-seitenheader-knopf-margin-left) / 2));
   } 
   
   .seitenheaderSuche .suchFormularbox {
      /* Landscape */
      display: flex; 
      width: 300px;       
   }
   
   .seitenheaderSuche .such-container-seitenheader {  
      /* Landscape */
      width: 300px;  
   }
   
   .seitenheaderSuche .suchEingabeSeitenheader {
      /* Landscape */
      width: 100%;  /* Füllt die 300px des Formulars aus */ 
      padding: 2px 4px 2px 4px; 
      font-size: 14px;
      height: 25px;
   }
   
   .seitenheaderSuche .clear-button-seitenheader { 
      /* Landscape */
      margin-right: 6px;
      justify-content: end;  /* horizontal */       
      /* anders kriege ich das Schliessen-Kreuz vertikal nicht in die Mitte fom Suchfeld */
      transform: translateY(calc(-50% - 1.5px));  
   }
      
   .vorschlaegeSeitenheader {
      /* Landscape */
      /* Info-Fragezeichen aussparen */
      /* siehe auch .seitenheaderTitelContainer*/
      margin-left: 60px;  /* Fragezeichen 40px + Rand 20px */
   }
   
}




      
    
/* Flashmeldung */

.flashmeldung {
   /* Höhe in Landscape und Portrait unterschiedlich */
   position: fixed;
   width: var(--b-page-width-netto);   
   padding-left: var(--b-page-padding-left);
   padding-right: var(--b-page-padding-right); 
   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-hell);   
   font-weight: bold; 
   display: flex;
   align-items: center;  
   z-index: 1;      
}

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



/* Inhalt und data */
.inhalt {
   /* Seiteninhalt ohne Header, Seitenheader und flashMeldung */   
   padding-left: var(--b-page-padding-left);
   padding-right: var(--b-page-padding-right);
   padding-bottom: var(--b-inhalt-padding-bottom);
}
.data {
   /* Grid-Container für .data1/.data2 oder .data3/.data4 */   
   display: grid;
}


/* Portrait */
@media (max-width: 991px) {
   
   .data {
      /* Portrait */
      /* Grid-Container */
      grid-template-columns: var(--b-data-breite);
      grid-template-rows: auto auto;    
   }
   .data1 {
      /* Portrait */
      /* oben (Landscape links)*/
      grid-row: 1 / 2;
   }
   .data2 {
      /* Portrait */
      /* unten (Landscape rechts)*/
      grid-row: 2 / 3;
   }
   .data3 {
      /* Portrait */
      /* unten (Landscape rechts)) */
      grid-row: 2 / 3;    
   }
   .data4 {
      /* Portrait */
      /* oben (Landscape links)*/
      grid-row: 1 / 2;
   }
   .data0 {
      /* Portrait */
      /* wie .data1-4, aber einspaltig*/
      grid-row: 1 / 3; /* über alles */
   }
}


/* Landscape */
@media (min-width: 992px) {
   
   .data {
      /* Portrait */
      /* Grid-Container */
      grid-template-columns: var(--b-data-breite) var(--b-data-breite);  /* eine Angabe muss sein, sonst falls 2.Spalte leer, wird 1. Spalte automatisch 100% */
      grid-column-gap: var(--b-data-gap);
   }
   .data1, .data3 {
      /* Portrait */
      /* linke Spalte */
      grid-column: 1 / 2; 
   }
   .data2, .data4 {
      /* Portrait */
      /* rechte Spalte */
      grid-column: 2 / 3; 
   }
   .data0 {
      /* Portrait */
      /* wie .data1-4, aber einspaltig*/
      grid-column: 1 / 3; /* über alles */
   }
}





/* Footer */

.footer{
   /* am unteren Bildrand, zentriert */ 
   position: fixed;
   bottom: 0;   
   width: var(--b-page-width-netto);   
   padding-left: var(--b-page-padding-left);
   padding-right: var(--b-page-padding-right);  
   height: var(--b-footer-height);  /* siehe app/css../app.css */
   border-top: 1px solid var(--b-dunkel);
   background-color: var(--b-hell);
   text-align: center;
   font-size: var(--b-footer-font-size); /* siehe app/css../app.css */
   padding-top: 10px;
   z-index: 3;   
} 
      



/* Die Grössenbeschränkung für übergrosse Landscape-Bildschirme ist in app/css../app.css verlegt */
/* Die Breitengrenze ist je nach Anwendung anders und bei @media-queries können keine variablen verwendet werden */





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


.b-formularBox {
   display: grid;
   width: var(--b-formularbox-width); 
   background-color: var(--b-hell);
   font-size: var(--b-page-font-size);
   color: var(--b-sehr-dunkel);
   padding: 15px;
   border-width: 1px;
   border-color: var(--b-sehr-dunkel);  
   border-style: solid;  
}
.b-formularBox label {
}
.b-formularBox input {
   /* der Button zählt auch als input, ist input type="button"! */ 
   border-color: var(--b-sehr-dunkel);
   border-width: 1px;
   background-color: var(--b-hell);
   padding: 2px;
}
.b-formularBox textarea {
   resize: vertical; /* nur vertikal vergrössern, da bei horizontaler Vergrösserung die anderen Felder auch vergrössert werden */
   border-color: var(--b-sehr-dunkel);
   border-width: 1px;  
   background-color: var(--b-hell);
   padding: 2px;
}


/* Portrait */
@media (max-width: 991px) {
   .b-formularBox {  
      /* Portrait */
      grid-template-columns: auto; /* eine Spalte, zwei Zeilen */
   }
   .b-formularBox label {
      /* Portrait */
      grid-column: 1 / 1;
      text-align: left;
   }
   .b-formularBox input {
      /* Portrait */
      /* der Button zählt auch als input, ist input type="button"! */
      grid-column: 1 / 1;
      margin-bottom: 8px;
   }
   .b-formularBox textarea {
      /* Portrait */
      border-color: var(--b-sehr-dunkel);
      border-width: 1px;
      margin-bottom: 15px;
   }
}

/* Landscape */
@media (min-width: 992px) {
   .b-formularBox {
      /* Landscape */
      grid-template-columns: var(--b-formularbox-label-width) 1fr;
      grid-column-gap: var(--b-formularbox-label-input-gap); 
      grid-row-gap: var(--b-formularbox-zeilen-gap); 
   }
   .b-formularBox label {
      /* Landscape */
      grid-column: 1 / 2;
      text-align: right;
   }
   .b-formularBox input {
      /* Landscape */
      /* der Button zählt auch als input, ist input type="button"! */
      grid-column: 2 / 3;
   }
   .b-formularBox textarea {
      /* Landscape */
      border-color: var(--b-sehr-dunkel);
      border-width: 1px;  
   }
}









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

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

.b-tooltip .breit {
   --b-tooltip-breite: 250px;
}

.b-tooltip .tooltiptext-oberhalb, 
.b-tooltip .tooltiptext-unterhalb {
   position: absolute;
   display: none;   /* braucht keinen Platz im Seitenheader (Höhenberechnung) */
   background-color: var(--b-sehr-hell);
   color: var(--b-sehr-dunkel);
   font-size: 12px;
   text-align: center;
   padding: 5px;
   border: 1px solid var(--b-sehr-hell);
   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: 50%;
   transform: translateX(-50%);  /* Schiebt das Element um die Hälfte seiner EIGENEN Breite zurück */
   width: max-content;           /* Tooltip wird so breit wie der Text */ 
   max-width: var(--b-tooltip-breite);  /* Aber nicht breiter als das Limit */   
}


.b-tooltip .tooltiptext-oberhalb {
   bottom: var(--b-tooltip-position-bottom);
}
.b-tooltip tooltiptext-oberhalb::after {
   /* Pfeil durch border, welche nichts umschliessen. Haben spitze Enden */
   content: "";
   position: absolute;
   top: 100%;  /* Pfeilposition */ 
   left: 50%;  
   transform: translateX(-50%);  
   margin-left: 0;   
   /* style für den Pfeil */
   border-width: 5px;
   border-style: solid;
   border-color: var(--b-sehr-dunkel) transparent transparent transparent; 
}

.b-tooltip .tooltiptext-unterhalb {   
   top: var(--b-tooltip-position-top); 
}
.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%;
  transform: translateX(-50%); 
  margin-left: 0;    
  /* style für den Pfeil */
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--b-sehr-dunkel) transparent;  /* Pfeil zeigt nach oben */  
  z-index: 4;
}


.b-tooltip .rand-rechts {
   /* kann zu class .tooltiptext-unterhalb hinzugefügt werden */
   left: auto; 
   right: 0; 
   transform: none;
}
.b-tooltip .rand-rechts::before {
  left: auto;
  right: 5px; /* Abstand zur rechten Kante */
  transform: none; /* Zentrierung aufheben */
}

.b-tooltip .rand-links {
   /* kann zu class .tooltiptext-unterhalb hinzugefügt werden */
   left: 0; 
   transform: translateX(0);
}
.b-tooltip .rand-links::before {
  left: 5px;          /* Abstand zur linken Kante */
  right: auto;        /* Falls vorher 'right' gesetzt war, hiermit aufheben */
  transform: none;    /* Die mittige Zentrierung abschalten */
}


/* Tooltips überall unterdrücken */
.tooltiptext-oberhalb, 
.tooltiptext-unterhalb,
.rand-rechts,
.rand-links {
   display: none !important;
}

/* und dann nur anzeigen, wenn hover und Mauspointer erkennbar */
@media(hover: hover) and (pointer: fine) {   
   .b-tooltip:hover .tooltiptext-oberhalb, 
   .b-tooltip:hover .tooltiptext-unterhalb,
   .b-tooltip:hover .rand-rechts,
   .b-tooltip:hover .rand-links {    
      /* Show the tooltip text when you mouse over the tooltip container */
      display: block !important;   
      opacity: 1;
   }
}

/* fade in - verzögertes Erscheinen */
.b-tooltip:hover .tooltiptext-oberhalb,
.b-tooltip:hover .tooltiptext-unterhalb,
.b-tooltip:hover .rand-rechts,
.b-tooltip:hover .rand-links {
   display: block;
   animation: tooltipFadeIn 2s forwards; /* Startet die Animation beim Hover */
}
@keyframes tooltipFadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}



/* 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: 1px solid var(--b-sehr-hell);
   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-sehr-hell);
   z-index: 4; /* soll über dem Header und über dem Seitenheader erscheinen */ 
   color: var(--b-sehr-dunkel);
   font-size: var(--b-page-font-size);
   font-weight: normal;
   text-align: left;
   touch-action: none; /* soll browsereigene Touch-Aktionen verhindern */
   max-width: var(--b-data-breite);
}

.b-popupFenster .titel {
   grid-row: 1 / 2;
   grid-column: 1 / 2;
   font-weight: 600;
   cursor: move; 
   padding-bottom: 10px;
   padding-top: 7px;
   touch-action: none; /* soll browsereigene Touch-Aktionen verhindern */
}
.b-popupFenster .closebutton {
   grid-row: 1 / 2;
   grid-column: 2 / 3;
   text-align: center;
   cursor: pointer; 
   padding-bottom: 0px;
   font-size: 20px;
   touch-action: none; /* soll browsereigene Touch-Aktionen verhindern */ 
   /* Klickbereich vergrössern */
   padding: 15px;      
   margin: -15px; 
/*   background-color: yellow;*/
}
.b-popupFenster .text {
   overflow-y: auto; /* vertikaler Scrollbar, falls nötig */
   overflow-x: hidden;
   grid-row: 2 / 3;
   grid-column: 1 / 3;  
   border-top: 1px solid var(--b-sehr-hell); 
   padding-top: 10px;
   padding-bottom: 8px;
   cursor: move; 
   touch-action: none; /* soll browsereigene Touch-Aktionen verhindern */
}
.b-popupFenster .text table tr td {
   /* z.B. für Lebensraum-Legende im Plan: ist kleine, schön ausgerichtete Tabelle */
   vertical-align: top;
}

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

.ohneZeilenumbruch {
   /* Das <div> vom Popupfensterchen ohne vorangehenden */
   /* und nachfolgendenZeilenumbruch */
   display: inline-block;
   width: 100%;   
}

.b-popupFensterMaxbild {
   /* popup-Fenster für Bild Grossanzeige auf Landscape */
   user-select: none;
   position: fixed;
   top: 20px;
   left: 20px;
   height: 95vh;
   width: auto;
   overflow: hidden;
   background-color: transparent;
   border: none;
   box-shadow: none;
   z-index: 9999;
}
.b-popupFensterMaxbild img {
   position: relative;
   height: 100%;
   width: auto;
   object-fit: contain;
   border: 1px solid var(--b-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: move;
}
.schliessenKreuzMaxbild {
   /* ist im Bild drin */
   position: absolute;
   top: 10px;
   right: 20px;
   color: #fff;
   /* Schatten, damit Kreuz auf weissen Bildern sichtbar */
   text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
   font-size: 30px;
   font-weight: normal;
   cursor: pointer;
   user-select: none;
}




/* diverse Klassen Portrait/Landscape ungleich */

.b-abstandHyperlink {
   /* kann für 'normale' oder für Hyperlink-Abstände verwendet werden */
   display: block; 
} 
.b-abstandHyperlink:hover {
   background-color: var(--b-hell);   
}

/* Portrait */
@media (max-width: 991px) {
   .b-abstandHyperlink {
      /* Portrait */
      /* grosse Abstände geeignet für Fingertipp */
      padding-top: 12px;
      padding-bottom: 12px;
   } 
   
   
   .b-abstandSeitenheader {
      /* Portrait */
      margin-top: 4px;
   }
   
   /* falls Texte im Landscape anders lauten als im Portrait */
   /* im HTML den Text zwei Mal ausgeben, einmal mit class sichtbarPortrait, einmal mit class sichtbarLandscape */
   .b-sichtbarPortrait {
      /* Portrait */
      /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../basis.css für Ajax und Zeigen/Verstecken via javaScript */
      display: inline-block;
   }
   .b-sichtbarLandscape {
      /* Portrait */
      /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../basis.css für Ajax und Zeigen/Verstecken via javaScript */
      display: none;
   }
   
   .b-sichtbarLandscapeBlock {
      /* Portrait */
      display: none;
   }
   .b-sichtbarPortraitBlock {
      /* Portrait */
      display: block;      
   }

}

/* Landscape */
@media (min-width: 992px) {
   .b-abstandHyperlink {
      /* Landscape */
      /* kleine Abstände geeignet für Maus */
      padding-top: 4px;
      padding-bottom: 4px;
   }   
   
   .b-abstandSeitenheader {
      /* Landscape */
      margin-top: 6px;
   }
   
   /* falls Texte im Landscape anders lauten als im Portrait */
   /* im HTML den Text zwei Mal ausgeben, einmal mit class sichtbarPortrait, einmal mit class sichtbarLandscape */
   .b-sichtbarLandscape {
      /* Landscape */
      /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../basis.css für Ajax und Zeigen/Verstecken via javaScript */
      display: inline-block;
   }
   .b-sichtbarPortrait {
      /* Landscape */
      /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../basis.css für Ajax und Zeigen/Verstecken via javaScript */
      display: none;
   }
   
   
   .b-sichtbarLandscapeBlock {
      /* Landscape */
      display: block;      
   }
   .b-sichtbarPortraitBlock {
      /* Landscape */
      display: none;
   }
}



/* diverse Klassen überall gleich */

.b-button-link, .b-button-link-diskret {
   /* neutralisiert den <button>, so dass er ist wie text */
   /* so kann anstatt <a href="#" ein <button> verwendet werden */
   background: transparent;
   border: none;
   padding: 0;
   margin: 0;
   appearance: none;
   -webkit-appearance: none;
   font: inherit;
   line-height: inherit;

   color: var(--b-sehr-dunkel);
   cursor: pointer; 
   
   padding-left: 0;
   padding-right: 0;
   text-align: left;
}
.b-button-link {
  text-decoration: underline; 
}
.b-button-link-diskret {
   text-decoration: none; 
}
.b-button-link-inline {
   display: inline-block !important;
}



.b-fragezeichen {
   /* Hyperlink als Fragezeichen anzeigen - für Infotexte */
   color: var(--b-dunkel);
   font-size: 13px; /* mit 12px erscheint es flach gedrückt */
   font-weight: 600;      
   padding: 2px 6.5px 2px 6.5px;  /* oben rechts unten links, damit es rund wird */
   border: 1px solid var(--b-dunkel);
   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-left: 0;
   position:relative;
   top:-2px;    
}
.b-fragezeichen::after {
   /* Klickfläche erweitern */
   content: "";
   position: absolute;
   top: -15px;
   bottom: -15px;
   left: -15px;
   right: -15px;
   /* background: rgba(255, 0, 0, 0.2); /* zeigt Klickfläche an */
}



.anchor {
   /* lokale Hyperlinks verschieben sich um Hiederhöhe, darum diesen anchor-Trick */
   /* Container für den .anchor <span>, welcher die Verschiebung enthält */
   position:relative;
}
.anchor span {   
   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-abstand300 {
   margin-top: 300px;
}
.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-abstand36 {
   margin-top: 36px;
}
.b-abstand30 {
   margin-top: 30px;
}
.b-abstand28 {
   margin-top: 28px;
}
.b-abstand26 {
   margin-top: 26px;
}
.b-abstand24 {
   margin-top: 24px;
}
.b-abstand22 {
   margin-top: 22px;
}
.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-abstandLeer {
   display: inline-block;
   width: 100%;
}
.b-abstandLeer::before {
   /* gewährleistet, dass ein leeres <div> den Margin nicht mit dem angrenzenden kollabiert */
   /* leere Abstand-Div: <div class="b-abstand20 b-abstandLeer"></div> */
   content: "";
   display: block;
   height: 0;
}

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

@media screen and (max-width: 992px) and (-webkit-min-device-pixel-ratio: 2) {
  :root {
    --scale: 1.2; /* iPad-Mini mit iOS haben eine grössere Pixel-Ratio, d.h. alles erscheint kleiner. Darum diese Korrektur */
  }
}