/* zf-nav-thema.css  ·  September 2026
   ------------------------------------------------------------
   Mobiles Kopfmenue der Themenseiten (Kopf mit Ankreuzfeld).
   Ursache des alten Verhaltens: .zf-nav war absolut im Kopf
   positioniert, ohne Hoehenbegrenzung und ohne eigenen
   Scrollbereich. Aufgeklappt ist das Menue rund 1160 Pixel hoch,
   auf dem Handy passen davon nur etwa 770 ins Bild. Der Rest war
   nur erreichbar, indem die Seite dahinter mitscrollte.

   Diese Datei wird NACH dem eingebetteten Stilblock der Seite
   geladen und gewinnt deshalb bei gleicher Spezifitaet.
   --zf-kopf setzt /zf-nav.js beim Oeffnen auf die aktuelle
   Unterkante des Kopfes. Steuerung dort, Teil B.
   ------------------------------------------------------------ */

@media (max-width:640px){

  /* Eigener, kontrollierter Scrollbereich statt Ueberlaenge */
  .zf-nav-toggle:checked ~ .zf-nav{
    position:fixed;
    top:var(--zf-kopf,73px);
    left:0; right:0;
    max-height:calc(100vh - var(--zf-kopf,73px));
    max-height:calc(100dvh - var(--zf-kopf,73px));
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    /* Wichtig: .zf-nav erbt flex-wrap:wrap. Sobald die Hoehe
       begrenzt ist, bricht eine Spalte sonst in mehrere Spalten
       um und laeuft seitlich aus dem Bild. */
    flex-wrap:nowrap;
    scrollbar-width:thin;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
    z-index:1001;
  }

  /* Der Kopf muss ueber dem Schleier bleiben, sonst ist das
     Schliessen nicht mehr antippbar. */
  html.zf-nav-offen .zf-header{ position:relative; z-index:1002; }

  .zf-nav a, .zf-burger, .zf-dropdown-label{ -webkit-tap-highlight-color:transparent }
}