/* Vollbild-Menü (verbindlich, siehe directions.md) */

/* Kopfleiste bleibt beim Scrollen oben, damit der Menü-Knopf erreichbar ist */
.kopf { position: sticky; top: 0; z-index: 40; }
.kopf-innen { gap: 16px; }
.kopf-logo { margin-right: auto; }

/* Menü-Knopf: Pixel-Icon in vier Stufen vom Hamburger zum X */
.menue-knopf {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 6px;
  color: var(--tinte); text-decoration: none;
}
.menue-knopf:hover { background: var(--blau-hell); }
.menue-icon { width: 28px; height: 28px; fill: currentColor; display: block; }
.menue-icon path { display: none; }
.menue-icon[data-f="0"] .f0, .menue-icon[data-f="1"] .f1, .menue-icon[data-f="2"] .f2, .menue-icon[data-f="3"] .f3 { display: inline; }

/* Ebene über der Seite */
.menue { display: none; position: fixed; inset: 0; z-index: 100; color: var(--weiss); overflow-y: auto; overscroll-behavior: contain; }
.menue.offen, .menue:target { display: block; }
/* mit JavaScript: immer im Layout, nur unsichtbar */
.menue.bereit { display: block; visibility: hidden; pointer-events: none; }
.menue.bereit.offen { visibility: visible; pointer-events: auto; }
.menue-leiste, .menue-inhalt { will-change: opacity, transform; }
.menue:target { background: var(--blau); } /* ohne JavaScript: sofort offen, ohne Animation */
.menue.gefuellt { background: var(--blau); }
.menue-flaeche { position: fixed; inset: 0; pointer-events: none; }
.menue :focus-visible { outline-color: var(--weiss); }

/* Leiste liegt über dem Inhaltsbereich, sonst fängt dessen oberer Innenabstand die Klicks auf Kreuz, Logo und „Anfrage senden“ ab */
.menue-leiste { position: absolute; left: 0; right: 0; top: var(--leiste-oben, 0px); z-index: 2; }
.menue-leiste .kopf-innen { min-height: 76px; }
.menue-leiste .kopf-logo img { height: 44px; width: auto; }
.menue-schliessen { color: var(--weiss); }
.menue-schliessen:hover { background: var(--blau-tief); }
/* Knopf-Regel: „Anfrage senden“ weiß mit dunkelblauer Schrift, auf Blau ohne Rand */
.menue-anfrage { background: var(--weiss); color: var(--blau); box-shadow: none; }
.menue-anfrage:hover { background: var(--blau-hell); }

.menue-inhalt {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px 64px;
  padding-top: calc(var(--leiste-oben, 0px) + 76px + clamp(32px, 5vw, 64px)); padding-bottom: 64px;
}
.menue-leiste, .menue-inhalt { opacity: 0; }
.menue-inhalt { transform: translateY(8px); }
.menue.inhalt-sichtbar .menue-leiste, .menue:target .menue-leiste { opacity: 1; transition: opacity 160ms var(--ease-out); }
.menue.inhalt-sichtbar .menue-inhalt, .menue:target .menue-inhalt { opacity: 1; transform: none; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }

/* Navigation links: groß in Rokkitt, nummeriert */
.menue-haupt { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.menue-punkt { border-bottom: 1px solid rgba(207, 196, 180, .3); }
.menue-zeile { position: relative; display: flex; align-items: center; gap: 12px; }
.menue-link {
  display: flex; align-items: baseline; gap: 20px; flex: 1; min-height: 64px; padding: 10px 0;
  font-family: var(--slab); font-weight: 600; font-size: clamp(1.875rem, 1.3rem + 1.8vw, 3rem); line-height: 1.1;
  color: var(--weiss); text-decoration: none;
}
.menue-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.menue-nr { font-size: 1.0625rem; color: var(--sand-auf-blau); min-width: 1.75rem; }
.menue-nr .ziffern { font-size: 1em; }
/* Aktiver Bereich: roter Punkt vor der Nummer (auf Blau reine Zier, dazu aria-current und Unterstreichung) */
.menue-nr { position: relative; }
.menue-nr { min-width: 2.6rem; }
.ist-aktiv .menue-nr::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; background: var(--rot); vertical-align: .1em; }
.menue-link[aria-current], .menue-sub a[aria-current], .menue-weitere a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.menue-sub a[aria-current] { font-weight: 600; }
.menue-auf {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 6px;
  background: transparent; border: 0; color: var(--sand-auf-blau); cursor: pointer;
}
.menue-auf:hover { background: var(--blau-tief); color: var(--weiss); }
.menue-pfeil { width: 20px; height: 12px; fill: currentColor; }
.menue-auf[aria-expanded="true"] .menue-pfeil { transform: rotate(180deg); }
/* Unterseiten untereinander, bündig mit dem Wort des Bereichs (Nummernspalte 2.6rem + Abstand 20px),
   in Rokkitt wie die Bereiche, nur kleiner; unterstrichen erst bei Hover, Fokus oder als aktuelle Seite */
.menue-sub { list-style: none; margin: -4px 0 20px; padding: 0 0 0 calc(2.6rem + 20px); display: grid; gap: 0; }
.menue-sub[hidden] { display: none; }
.menue-sub a, .menue-weitere a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--weiss); text-decoration: none;
  font-family: var(--slab); font-weight: 600; font-size: 1.375rem; line-height: 1.2;
}
.menue-sub a:hover, .menue-weitere a:hover, .menue-sub a:focus-visible, .menue-weitere a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.menue-weitere { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }

/* Schnellzugang rechts */
.menue-schnell { align-self: start; }
.menue-schnell-titel { font-size: 1.0625rem; font-family: var(--text); font-weight: 600; color: var(--sand-auf-blau); margin: 0 0 16px; letter-spacing: 0; }
.menue-schnell-knoepfe { display: grid; gap: 12px; }
.menue-schnell-knoepfe .knopf { justify-content: flex-start; font-size: 1.25rem; }
.menue-daten { margin: 28px 0 0; }
.menue-daten div { padding: 12px 0; border-top: 1px solid rgba(207, 196, 180, .3); }
.menue-daten dt { color: var(--sand-auf-blau); font-weight: 600; }
.menue-daten dd { margin: 2px 0 0; font-size: 1.125rem; }
.menue-daten a { color: var(--weiss); display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; }

/* Seite dahinter scrollt nicht: das Menü fängt das Scrollen ab (siehe menue.js), ohne die Seite neu zu berechnen */

/* Bei reduzierter Bewegung: nur weiches Einblenden */
.menue.weich { background: var(--blau); opacity: 0; transition: opacity 200ms ease; }
.menue.weich.inhalt-sichtbar { opacity: 1; }
.menue.weich .menue-inhalt { transform: none; }

@media (max-width: 900px) {
  .menue-inhalt { grid-template-columns: 1fr; }
  /* mobil zuerst Hilfe bei Störungen */
  .menue-schnell { order: -1; }
}
@media (max-width: 600px) {
  .kopf-knopf { padding: 10px 14px; min-height: 44px; font-size: 1.0625rem; }
  .menue-link { gap: 14px; min-height: 56px; }
  .menue-sub { padding-left: calc(2.6rem + 14px); }
  .menue-sub a, .menue-weitere a { font-size: 1.25rem; }
}
/* „Anfrage senden“ bleibt auch auf dem Handy neben dem Menü-Knopf sichtbar */
@media (max-width: 760px) {
  .kopf .kopf-knopf, .menue-leiste .kopf-knopf { display: inline-flex; }
}