/* =====================================================
   MOBILE-NAVIGATION (Schublade)
   -----------------------------------------------------
   Ersetzt die aufklappende Kachelliste unterhalb der Kopfzeile.
   Drei Probleme der alten Loesung, in dieser Reihenfolge behoben:

   1. Nicht bis unten scrollbar.
      Die alte Klappe war position:absolute mit
      max-height: calc(100vh - 90px). Auf dem Handy ist 100vh die Hoehe
      OHNE eingeblendete Adressleiste, der sichtbare Bereich also
      kleiner als die gerechnete Hoehe - der untere Teil der Liste
      (z. B. Abmelden im Konto-Menue) stand ausserhalb des Bildes und
      liess sich nicht erreichen. Jetzt position:fixed mit
      top/bottom statt einer gerechneten Hoehe: der Kasten endet
      immer exakt am unteren Bildrand, egal was die Adressleiste tut.
      overscroll-behavior:contain verhindert zusaetzlich, dass der
      Wisch am Listenende auf die Seite dahinter durchschlaegt -
      das war der Moment, in dem die Liste "haengen blieb".
      Die Seite dahinter wird waehrenddessen gesperrt (html.hz-nav-open,
      Klasse setzt das Script in header.tpl).

   2. Hover blieb beim Scrollen haengen.
      Auf Touch-Geraeten setzt der Browser :hover beim Antippen und
      loest ihn erst beim naechsten Tipp woanders - beim Wischen ueber
      die Liste blieben die Eintraege eingefaerbt. Deshalb stehen hier
      alle :hover-Zustaende mit denselben Werten wie der Normalzustand.
      Einen sichtbaren Hover bekommt nur, wer wirklich einen Zeiger hat:
      der Block (hover: hover) and (pointer: fine) ganz unten, und dort
      aendert er ausschliesslich die Schriftfarbe.

   3. Aussehen.
      Statt Kacheln (jeder Punkt ein Kasten mit eigenem Hintergrund,
      Untermenues nochmal ein Kasten im Kasten) jetzt eine ruhige
      Liste: Zeilen mit Haarlinie dazwischen, Untermenues eingerueckt
      an einer senkrechten Linie, ein Pfeil der sich beim Oeffnen dreht.
      Das spart pro Punkt rund 10px Hoehe und nimmt der Liste die
      Unruhe der vielen Raender.

   Die Datei wird in header.tpl als letztes Stylesheet geladen und
   korrigiert damit die aelteren Handy-Regeln aus custom.css
   (Abschnitte um Zeile 3400 und 16750). .hz-nav.hz-nav ist der im
   Theme uebliche Trick: derselbe Klassenname doppelt zaehlt in der
   Spezifitaet doppelt und schlaegt so die Altregeln, ohne dass hier
   IDs erfunden werden muessen.

   Grenze 1199px, weil ab 1200px (d-xl-none am Knopf) die waagerechte
   Leiste gilt.
   ===================================================== */

/* Ebene hz-drawer (Reihenfolge in css/tokens.css): die Schublade gewinnt
   mit !important gegen die aelteren Regeln und gegen die allgemeine
   Dropdown-Vorlage aus css/components.css. Alle Angaben hier tragen
   !important - ohne waeren sie in der Ebene schwaecher als jede Regel
   ausserhalb. */
@layer hz-drawer {

@media (max-width: 1199px) {

    /* -------------------------------------------------
       1. Die Schublade selbst
       ------------------------------------------------- */

    /* Solange sie zu ist, bleibt sie weg - auch waehrend Bootstrap
       die Klasse .collapse traegt. */
    #header .hz-nav.hz-nav.collapse:not(.show):not(.collapsing) {
        display: none !important;
    }

    #header .hz-nav.hz-nav.show,
    #header .hz-nav.hz-nav.collapsing {
        display: block !important;
        position: fixed !important;
        top: var(--hz-header-h, 76px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;

        /* height:auto schlaegt die Inline-Hoehe, die Bootstrap waehrend
           des Aufklappens setzt. Ohne das waere der Kasten in der
           Animationsphase 0px hoch und wuerde aufblitzen. */
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;

        /* Unten Luft fuer die Chat-Blase, die links ueber der Seite
           schwebt: mit ihrem Band "Let's Chat" ist sie rund 135px hoch.
           Ihre Elemente tragen bei jedem Aufruf neu erzeugte IDs, sie
           laesst sich also nicht gezielt ausblenden - deshalb bekommt
           die Liste stattdessen einen Abstand, der den letzten Punkt
           darueber haelt. Sichtbar wird der Abstand nur am Ende einer
           langen Liste. env() ergaenzt den Streifen des
           iPhone-Home-Indikators. */
        padding: 2px 16px calc(140px + env(safe-area-inset-bottom, 0px)) !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: var(--hz-navy-900) !important;
        box-shadow: none !important;
        z-index: 10000 !important;
        isolation: isolate !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;

        /* Kein Hoehen-Uebergang mehr: die Schublade steht sofort.
           Die alte Animation lief gegen eine feste Hoehe und sah
           deshalb gestaucht aus. */
        transition: none !important;
    }

    /* Hier stand einmal overflow:hidden am <html>, um die Seite hinter
       der offenen Schublade stillzustellen. Das ist wieder raus:
       sobald der Scroll-Container overflow:hidden bekommt, verliert
       Chrome den Scrollport und die Kopfzeile (position:sticky, top:0)
       faellt auf ihre statische Stelle zurueck - bei gescrollter Seite
       also nach oben aus dem Bild. Der Knopf zum Schliessen der
       Schublade waere damit nicht mehr erreichbar gewesen.

       Gebraucht wird die Sperre auch nicht: die Schublade deckt alles
       unterhalb der Kopfzeile ab, jede Beruehrung landet also in ihr,
       und overscroll-behavior:contain (oben) haelt den Wisch am
       Listenende in ihr fest, statt ihn an die Seite weiterzugeben.
       Genau dieses Weiterreichen war das "Haengenbleiben" beim
       Scrollen. */

    /* Der Knopf zeigt im offenen Zustand ein Kreuz statt der Balken. */
    html.hz-nav-open #header .hz-toggle i::before {
        content: "\f00d" !important;
    }

    html.hz-nav-open #header .hz-toggle {
        color: #fff !important;
    }

    /* Der schwebende Hinweiskasten (#syFloatingAlert, kommt aus einem
       Hook ausserhalb des Themes) liegt mit z-index 99999 ueber allem
       und verdeckt das untere Drittel der offenen Schublade - also
       genau die Stelle, an der das Konto-Menue steht. Solange die
       Schublade offen ist, tritt er zurueck; beim Schliessen ist er
       wieder da. */
    html.hz-nav-open #syFloatingAlert {
        display: none !important;
    }

    /* -------------------------------------------------
       2. Listen
       ------------------------------------------------- */
    #header .hz-nav.hz-nav .hz-menu,
    #header .hz-nav.hz-nav .hz-menu-account {
        display: block !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Konto-Liste als zweiter Block, durch eine kraeftigere Linie
       abgesetzt. */
    #header .hz-nav.hz-nav .hz-menu-account {
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, .12) !important;
    }

    #header .hz-nav.hz-nav .hz-menu > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    }

    #header .hz-nav.hz-nav .hz-menu > li:last-child {
        border-bottom: 0 !important;
    }

    /* -------------------------------------------------
       3. Zeilen der ersten Ebene

       :hover steht ausdruecklich mit drin und traegt dieselben Werte -
       siehe Punkt 2 im Kopf der Datei.
       ------------------------------------------------- */
    #header .hz-nav.hz-nav .hz-menu > li > a,
    #header .hz-nav.hz-nav .hz-menu > li > a:hover,
    #header .hz-nav.hz-nav .hz-menu > li > a:focus,
    #header .hz-nav.hz-nav .hz-menu .dropdown-toggle,
    #header .hz-nav.hz-nav .hz-menu .dropdown-toggle:hover,
    #header .hz-nav.hz-nav .hz-menu .dropdown-toggle:focus {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: rgba(255, 255, 255, .92) !important;
        font-size: 15px !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 1.3 !important;
        letter-spacing: .1px !important;
        text-align: left !important;
        white-space: normal !important;
        text-decoration: none !important;
        transform: none !important;
        transition: color var(--hz-dur-fast) ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Der geoeffnete Punkt wird nur heller - keine Flaeche, kein Rand. */
    #header .hz-nav.hz-nav .hz-menu > li.mobile-open > a,
    #header .hz-nav.hz-nav .hz-menu > li > a:active {
        color: #fff !important;
    }

    /* -------------------------------------------------
       4. Pfeil bei Punkten mit Untermenue

       Aus zwei Raendern gebaut statt aus einem Icon-Zeichen: so haengt
       er an keiner Schriftart und dreht sich sauber.
       margin-left:auto schiebt ihn ans Zeilenende, ohne dass die
       Zeile auf space-between umgestellt werden muss.
       ------------------------------------------------- */
    #header .hz-nav.hz-nav .hz-menu > li.dropdown > a::after {
        content: "" !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 7px !important;
        height: 7px !important;
        margin: -3px 3px 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        border-radius: 1px !important;
        opacity: .45 !important;
        transform: rotate(45deg) !important;
        transition: transform var(--hz-dur) ease, opacity var(--hz-dur) ease !important;
        vertical-align: baseline !important;
    }

    #header .hz-nav.hz-nav .hz-menu > li.dropdown.mobile-open > a::after {
        margin-top: 3px !important;
        opacity: .9 !important;
        transform: rotate(-135deg) !important;
    }

    /* Symbole in den Zeilen auf eine feste Spalte bringen, damit die
       Beschriftungen untereinander stehen. */
    #header .hz-nav.hz-nav .hz-menu a > i {
        flex: 0 0 auto !important;
        width: 18px !important;
        margin: 0 !important;
        font-size: 14px !important;
        text-align: center !important;
        opacity: .7 !important;
    }

    /* -------------------------------------------------
       5. Untermenues

       Kein Kasten mehr, sondern eine Einrueckung an einer senkrechten
       Linie. Geoeffnet wird ueber .mobile-open, gesetzt vom Script in
       header.tpl; .show ist der Fall, in dem Bootstrap selbst geoeffnet
       hat.
       ------------------------------------------------- */
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu {
        display: none !important;
        position: static !important;
        float: none !important;
        inset: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 10px 3px !important;
        padding: 0 0 0 15px !important;
        border: 0 !important;
        border-left: 2px solid rgba(255, 255, 255, .12) !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    #header .hz-nav.hz-nav .hz-menu li.mobile-open > .dropdown-menu,
    #header .hz-nav.hz-nav .hz-menu li.show > .dropdown-menu,
    #header .hz-nav.hz-nav .hz-menu li.open > .dropdown-menu {
        display: block !important;
    }

    /* Der Pfeil des Desktop-Menues (dreieckige Spitze am Kasten) hat
       hier nichts zu suchen. */
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu::before,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu::after {
        display: none !important;
        content: none !important;
    }

    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu a,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu a:hover,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu a:focus,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item:hover,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item:focus {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: rgba(255, 255, 255, .72) !important;
        font-size: 14px !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: normal !important;
        text-decoration: none !important;
        direction: ltr !important;
        transform: none !important;
        transition: color var(--hz-dur-fast) ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu a:active,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item:active {
        color: #fff !important;
    }

    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-divider {
        height: 1px !important;
        margin: 6px 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .10) !important;
        background: transparent !important;
    }

    #header .hz-nav.hz-nav .hz-menu .badge {
        margin-left: 6px !important;
    }

    /* -------------------------------------------------
       6. Arabisch: Untermenues spiegeln

       Die erste Ebene ist auf Arabisch bereits rechtslaeufig - sie
       erbt direction:rtl aus den .hz-layout-ar-Regeln in custom.css,
       und justify-content:flex-start setzt die Beschriftung damit von
       selbst nach rechts. Die Untermenues nicht: sie standen auf
       direction:ltr, das stammt noch aus dem nach links aufklappenden
       Desktop-Menue und wurde oben uebernommen.

       Gedreht wird nur, was zur Leserichtung gehoert: Textrichtung,
       Ausrichtung und die Seite, an der die Einrueckungslinie steht.
       Groessen, Abstaende und Farben bleiben wie im uebrigen Menue.

       .hz-layout-ar setzt header.tpl an .hz-inner, wenn die Sprache
       Arabisch ist - der Block greift also nur dort.
       ------------------------------------------------- */
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu {
        margin: 0 3px 10px 0 !important;
        padding: 0 15px 0 0 !important;
        border-left: 0 !important;
        border-right: 2px solid rgba(255, 255, 255, .12) !important;
    }

    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu a,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu a:hover,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu a:focus,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item:hover,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item:focus {
        text-align: right !important;
        direction: rtl !important;
    }
}

/* -----------------------------------------------------
   Hover nur fuer echte Zeiger (Maus, Trackpad) - also fuer
   schmale Fenster am Rechner. Auf dem Handy trifft die Abfrage
   nicht zu, dort bleibt es beim Zustand von oben.
   Geaendert wird ausschliesslich die Schriftfarbe.
   ----------------------------------------------------- */
@media (max-width: 1199px) and (hover: hover) and (pointer: fine) {
    #header .hz-nav.hz-nav .hz-menu > li > a:hover,
    #header .hz-nav.hz-nav .hz-menu .dropdown-toggle:hover {
        color: #fff !important;
    }

    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu a:hover,
    #header .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item:hover {
        color: rgba(255, 255, 255, .95) !important;
    }
}

/* Die mobile Datei wird zuletzt geladen. Darum die sprachabhaengige
   Ausrichtung hier nochmals abschliessend festlegen, damit auch spaetere
   Bootstrap-/Dropdown-Regeln keinen Eintrag zentrieren. */
@media (max-width: 1199px) {
    #header .hz-layout-en .hz-nav.hz-nav .hz-menu li .dropdown-menu,
    #header .hz-layout-en .hz-nav.hz-nav .hz-menu li .dropdown-menu > li,
    #header .hz-layout-en .hz-nav.hz-nav .hz-menu li .dropdown-menu a,
    #header .hz-layout-en .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item {
        direction: ltr !important;
        text-align: left !important;
    }

    #header .hz-layout-en .hz-nav.hz-nav .hz-menu li .dropdown-menu a,
    #header .hz-layout-en .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item {
        justify-content: flex-start !important;
    }

    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu > li,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu a,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item {
        direction: rtl !important;
        text-align: right !important;
    }

    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu a,
    #header .hz-layout-ar .hz-nav.hz-nav .hz-menu li .dropdown-menu .dropdown-item {
        justify-content: flex-start !important;
    }
}

/* -----------------------------------------------------
   Oeffnen: die Schublade blendet kurz ein, statt aufzuspringen.
   Tempo aus css/tokens.css (--hz-dur-slow). Beim Schliessen
   verschwindet sie sofort - Bootstrap nimmt dann .show weg und das
   Element faellt auf display:none, dafuer gibt es keinen Uebergang.
   ----------------------------------------------------- */
@media (max-width: 1199px) {
    #header .hz-nav.hz-nav.show {
        animation: hz-drawer-in var(--hz-dur-slow) var(--hz-ease) !important;
    }
}

@keyframes hz-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

} /* Ende @layer hz-drawer */