/* ===========================================================================
   menues.css — Menüarten und Orientierung
   ---------------------------------------------------------------------------
   Nach basis.css einbinden. Welche Art wann sinnvoll ist, steht in
   references/menues.md — dort zuerst nachlesen, sonst hat man am Ende drei
   Menüs nebeneinander, die dasselbe tun.

   Alles hier ist variablengesteuert und kommt ohne Inline-Handler aus.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Untermenü in der Seitenleiste (aufklappbar)
   Baut auf <details>/<summary> auf: das kann der Browser von sich aus, ganz
   ohne JavaScript. Damit funktioniert es auch, wenn ein Skript einmal nicht
   lädt — und unter der strikten CSP gibt es nichts zu konfigurieren.
   ------------------------------------------------------------------------- */
.nav-gruppe { border: 0; }
.nav-gruppe > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 15px; min-height: 44px;
  color: var(--dunkel-schwach); font-size: .87rem; cursor: pointer;
  list-style: none;                       /* Standarddreieck weg */
  border-left: 3px solid transparent;
}
.nav-gruppe > summary::-webkit-details-marker { display: none; }
.nav-gruppe > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.nav-gruppe[open] > summary::after { transform: rotate(-135deg); }
.nav-gruppe[open] > summary { color: var(--dunkel-text); }
.nav-gruppe > summary:hover { background: var(--dunkel-flaeche); }
.nav-gruppe svg { width: 17px; height: 17px; flex: none; }

/* Die Einträge des Untermenüs — eingerückt, damit die Ebene sichtbar ist */
.nav-gruppe a {
  padding-left: 42px !important;
  font-size: .84rem;
}

/* ---------------------------------------------------------------------------
   2. Brotkrumen — wo bin ich, und wie komme ich zurück
   ------------------------------------------------------------------------- */
.krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .84rem; color: var(--schwach);
  padding: calc(var(--luft) * .6) 0; margin: 0; list-style: none;
}
.krumen li { display: flex; align-items: center; gap: 6px; }
.krumen li + li::before {
  content: "›"; color: var(--schwach); opacity: .6;
}
.krumen a { color: var(--schwach); text-decoration: none; }
.krumen a:hover { color: var(--akzent); text-decoration: underline; }
.krumen [aria-current="page"] { color: var(--text); font-weight: 600; }

/* Am Telefon nur die letzte Stufe plus "zurück" – der ganze Pfad kostet dort
   nur Platz und wird ohnehin nicht gelesen. */
@media (max-width: 640px) {
  .krumen li { display: none; }
  .krumen li:nth-last-child(2) { display: flex; }
  .krumen li:nth-last-child(2)::before { content: "‹ "; }
}

/* ---------------------------------------------------------------------------
   3. Reiter (Tabs) und Unterreiter
   Immer echte Links mit eigener URL, nie per JavaScript umgeschaltet:
   dann funktionieren Zurück-Knopf, Lesezeichen und Neuladen wie erwartet.
   ------------------------------------------------------------------------- */
.reiter {
  display: flex; gap: 22px; overflow-x: auto;
  border-bottom: 1px solid var(--rand);
  margin-bottom: var(--luft);
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
  color: var(--schwach); text-decoration: none; white-space: nowrap;
  padding: 10px 0 9px; min-height: 44px;
  border-bottom: 3px solid transparent; font-size: .95rem;
}
.reiter a:hover { color: var(--text); }
.reiter a[aria-current="page"] {
  color: var(--text); border-bottom-color: var(--akzent); font-weight: 650;
}
.reiter .anzahl {
  display: inline-block; margin-left: 6px; font-size: .72rem;
  background: var(--flaeche2); border: 1px solid var(--rand);
  border-radius: 999px; padding: 1px 7px; color: var(--schwach);
}

/* Unterreiter: eine Ebene tiefer, deshalb Pillen statt Unterstrich —
   zwei gleich aussehende Reiterreihen übereinander verwirren. */
.reiter--unter {
  border-bottom: 0; gap: 6px; padding: 3px 0;
}
.reiter--unter a {
  border-bottom: 0; padding: 7px 13px; min-height: 38px;
  border-radius: 999px; font-size: .87rem;
  background: var(--flaeche2); border: 1px solid var(--rand);
}
.reiter--unter a[aria-current="page"] {
  background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent);
}

/* ---------------------------------------------------------------------------
   4. Aufklappmenü (Kontextmenü an einem Knopf)
   Für selten gebrauchte Aktionen an einem Element: Bearbeiten, Duplizieren,
   Löschen. Nicht für Hauptnavigation.
   ------------------------------------------------------------------------- */
.menue { position: relative; display: inline-block; }
.menue__liste {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 60;
  display: none; min-width: 190px; padding: 5px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}
.menue__liste[data-offen="1"] { display: block; }
.menue__liste a, .menue__liste button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; min-height: 42px;
  background: none; border: 0; border-radius: var(--radius);
  font: inherit; font-size: .9rem; color: var(--text);
  text-align: left; text-decoration: none; cursor: pointer;
}
.menue__liste a:hover, .menue__liste button:hover { background: var(--flaeche2); }
.menue__liste .gefahr { color: var(--fehler); }
.menue__trenner { height: 1px; background: var(--rand-fein); margin: 5px 0; }
.menue__titel {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--schwach); padding: 7px 11px 3px;
}

/* Am Telefon von unten einfahren statt als kleines Kästchen —
   die Liste ist dort sonst zu schmal zum Treffen. */
@media (max-width: 640px) {
  .menue__liste {
    position: fixed; inset: auto 0 0 0; top: auto; right: 0;
    min-width: 0; border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    border-bottom: 0; padding: 9px 9px calc(9px + env(safe-area-inset-bottom, 0px));
  }
  .menue__liste a, .menue__liste button { min-height: 50px; font-size: .98rem; }
}

/* ---------------------------------------------------------------------------
   5. Seitenblättern
   ------------------------------------------------------------------------- */
.blaettern {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: var(--luft) 0; list-style: none; margin: 0;
}
.blaettern a, .blaettern span {
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  padding: 0 11px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text);
  text-decoration: none; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.blaettern a:hover { border-color: var(--akzent); }
.blaettern [aria-current="page"] {
  background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent);
  font-weight: 650;
}
.blaettern .aus { opacity: .45; pointer-events: none; }
.blaettern__info { margin-left: auto; color: var(--schwach); font-size: .85rem; }

@media (max-width: 640px) {
  /* Am Telefon nur zurück/weiter plus Stand – Ziffernreihen trifft man kaum */
  .blaettern .ziffer { display: none; }
  .blaettern__info { margin: 0; order: -1; width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   6. Sprungmarken / Inhaltsverzeichnis (für lange Texte, Aufbau Magazin)
   ------------------------------------------------------------------------- */
.sprungmarken {
  border-left: 3px solid var(--rand); padding: 4px 0 4px 15px;
  margin: 0 0 var(--luft); list-style: none; font-size: .9rem;
}
.sprungmarken li { padding: 4px 0; }
.sprungmarken a { color: var(--schwach); text-decoration: none; }
.sprungmarken a:hover { color: var(--akzent); text-decoration: underline; }
.sprungmarken [aria-current="true"] { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------------------
   7. Zurück-Leiste (Detailseite am Telefon)
   ------------------------------------------------------------------------- */
.zurueckleiste {
  display: flex; align-items: center; gap: 10px;
  padding: calc(var(--luft) * .55) var(--luft);
  border-bottom: 1px solid var(--rand); background: var(--flaeche);
  position: sticky; top: 0; z-index: 30;
}
.zurueckleiste a.zurueck {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; color: var(--akzent); text-decoration: none; font-size: .92rem;
}
.zurueckleiste b { font-size: .98rem; }

/* ---------------------------------------------------------------------------
   8. Schrittleiste (waagrecht) — Alternative zur Stufenliste der
   Formularstrasse, wenn es keine Seitenspalte gibt
   ------------------------------------------------------------------------- */
.schritte { display: flex; gap: 4px; list-style: none; margin: 0 0 var(--luft); padding: 0; }
.schritte li {
  flex: 1; font-size: .78rem; color: var(--schwach);
  padding-top: 9px; border-top: 4px solid var(--rand);
}
.schritte li.fertig { border-top-color: var(--akzent); color: var(--text); }
.schritte li.jetzt  { border-top-color: var(--akzent); color: var(--text); font-weight: 650; }
@media (max-width: 640px) { .schritte li { font-size: 0; padding-top: 0; } }

/* ---------------------------------------------------------------------------
   9. "Mehr"-Blatt für die Bottom-Tab-Bar
   Passen nicht alle Bereiche in vier Tabs, kommt der Rest hier hinein —
   NICHT ein Hamburger-Menü oben links.
   ------------------------------------------------------------------------- */
.mehrblatt { list-style: none; margin: 0; padding: 0; }
.mehrblatt a {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 4px; min-height: 54px;
  color: var(--text); text-decoration: none; font-size: 1rem;
  border-bottom: 1px solid var(--rand-fein);
}
.mehrblatt a::after {
  content: "›"; margin-left: auto; color: var(--schwach); font-size: 1.3rem;
}
.mehrblatt svg { width: 21px; height: 21px; color: var(--schwach); flex: none; }