/* ============================================================
   HAUPTNAVIGATION – Burger + seitliches Panel (20.07.2026)
   Gehört zu dem einen Kopf aus base.html (zusammengelegt 22.07.2026).
   Muss NACH design.css geladen werden; nutzt die Tokens aus
   design-tokens.css.

   Ab --nav-breite (900px) bleibt alles wie bisher: die Navigation
   steht als Zeile im Kopf, Burger und Panel-Kopf sind aus.
   Darunter wandert die Navigation in ein Panel, das von rechts
   einfährt. Ohne JavaScript (html ohne .js) fällt die Navigation
   auf die zweizeilige Darstellung zurück – siehe ganz unten.
   ============================================================ */

@media (max-width: 899.98px) {

  /* ---- Burger-Knopf ---- */
  /* Bewusst mit Beschriftung: Für die Zielgruppe (55+) ist das
     reine Drei-Strich-Icon deutlich schlechter erkennbar. */
  .nav-burger {
    display: none;             /* erst mit JS sichtbar, s. .js unten */
    align-items: center; gap: 8px;
    background: none; border: 1.5px solid var(--pw-linie-stark);
    border-radius: var(--pw-radius-s, 10px);
    padding: 8px 12px; min-height: 44px;
    font: inherit; font-size: 14.5px; font-weight: 700;
    color: var(--pw-gruen-700); cursor: pointer;
  }
  .js .nav-burger { display: inline-flex; }
  .nav-burger:hover { border-color: var(--pw-gruen-700); }
  .nav-burger:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }

  /* Im Kopf konkurrieren Logo, Vergleichs-CTA und Burger um dieselbe Zeile.
     Unter 480px weicht deshalb die Burger-Beschriftung und bleibt nur für
     Screenreader da – der Vergleichs-CTA hat hier Vorrang.
     (Bis 22.07.2026 galt das nur für zwei der drei Kopfzeilen; seit alle Seiten
     denselben Kopf tragen, greift die Regel an einer Stelle für alle.) */
  @media (max-width: 479.98px) {
    .dk-header-inner .nav-burger-text {
      position: absolute; width: 1px; height: 1px;
      margin: -1px; padding: 0; border: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .dk-header-inner .nav-burger { padding-inline: 11px; }
    .dk-header-inner { gap: 10px; }
  }

  /* Drei Striche aus einem Element: mittlerer Strich = Grundfläche,
     oberer und unterer als Pseudo-Elemente darüber/darunter. */
  .nav-burger-strich,
  .nav-burger-strich::before,
  .nav-burger-strich::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-burger-strich { position: relative; }
  .nav-burger-strich::before,
  .nav-burger-strich::after { content: ''; position: absolute; left: 0; }
  .nav-burger-strich::before { top: -6px; }
  .nav-burger-strich::after { top: 6px; }

  /* ---- Abdunkelung hinter dem Panel (wird von nav.js eingehängt) ---- */
  .nav-overlay {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(20, 30, 25, 0.5);
    opacity: 0; transition: opacity 0.26s ease;
  }
  .nav-overlay.ist-offen { opacity: 1; }

  /* ---- Panel ---- */
  .nav-drawer {
    position: fixed; top: 0; right: 0; z-index: 100;
    width: min(84vw, 320px); height: 100dvh;
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; padding: 18px 22px calc(22px + env(safe-area-inset-bottom));
    background: var(--pw-flaeche-warm); box-shadow: -8px 0 28px rgba(20, 30, 25, 0.22);
    overflow-y: auto; overscroll-behavior: contain;
    /* Geschlossen auch für Tastatur und Screenreader unerreichbar:
       visibility schaltet erst NACH der Bewegung ab. */
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.26s ease, visibility 0s linear 0.26s;
  }
  .nav-drawer.ist-offen {
    transform: none; visibility: visible;
    transition: transform 0.26s ease, visibility 0s;
  }

  .nav-drawer-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-bottom: 12px; margin-bottom: 6px;
    border-bottom: 1px solid var(--pw-linie);
  }
  .nav-drawer-titel {
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--pw-text-mild);
  }
  .nav-drawer-zu {
    background: none; border: 0; padding: 8px; margin: -8px -8px -8px 0;
    min-width: 44px; min-height: 44px;
    font-size: 20px; line-height: 1; color: var(--pw-gruen-700); cursor: pointer;
  }
  .nav-drawer-zu:hover { color: var(--pw-gruen-800); }
  .nav-drawer-zu:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: 2px; }

  .nav-drawer a {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--pw-linie);
    font-size: 17px; font-weight: 700; color: var(--pw-gruen-700);
    text-decoration: none; border-radius: 0;
  }
  .nav-drawer a:hover { color: var(--pw-gruen-800); }
  .nav-drawer a:focus-visible { outline: 3px solid var(--pw-fokus); outline-offset: -3px; }
  .nav-drawer a[aria-current="page"] {
    color: var(--pw-gruen-800);
    box-shadow: inset 3px 0 0 var(--pw-terra-600); padding-left: 12px;
  }

  /* Solange das Panel offen ist, scrollt nur das Panel. */
  body.nav-offen { overflow: hidden; }

  /* ---- Fallback ohne JavaScript ----
     Kein Burger, kein Panel: die Navigation bleibt als zweite Zeile
     im Kopf stehen, damit die Unterseiten trotzdem erreichbar sind. */
  html:not(.js) .nav-drawer {
    position: static; width: auto; height: auto; padding: 6px 0 0;
    background: none; box-shadow: none; overflow: visible;
    transform: none; visibility: visible;
    flex-direction: row; flex-wrap: wrap; gap: 18px;
    order: 3; width: 100%; border-top: 1px solid var(--pw-linie);
  }
  html:not(.js) .nav-drawer a {
    padding: 4px 0; border-bottom: 0; font-size: 14.5px;
  }
  html:not(.js) .nav-drawer-kopf { display: none; }
}

/* Ab 900px ist der Burger weg – die Navigation steht wieder als
   Zeile im Kopf (Darstellung in design.css bzw. portal.css). */
@media (min-width: 900px) {
  .nav-burger, .nav-drawer-kopf { display: none; }
}