/* seiten.css - Blatt und Seite (Werte uebernommen aus dem bisherigen Programm, Stand 21.09.2026; Grundgeruest
   06.10.2026): drei Breiten (schmal fuer Formulare, normal, breit fuer Tabellen), Seitenkopf mit "wo bin ich",
   Titel, einem Satz und den Aktionen, Reiter, Seitenfeld rechts, gefuehrter Ablauf. Nur Tokens aus tokens.css. */

/* position: relative haelt auch absolut gesetzte Teile (z. B. Vorlese-Texte) im Blatt; sonst rollte am Handy die ganze
   Seite samt Kopf mit (14.10.2026). */
.blatt { position: relative; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; outline: none; scroll-behavior: smooth; }
/* Beim Neuzeichnen derselben Seite haelt das Blatt kurz seine Hoehe (Kern.lageHalten), damit es nicht nach oben springt. */
.blatt > * { min-height: var(--blatt-halten, 0); }
.seite { padding-bottom: var(--r-8); }
.seite-koerper { max-width: var(--inhalt-breite); margin: 0 auto; padding: 0 clamp(var(--r-5), 6vw, calc(2 * var(--r-7))); }
.seite.breit .seite-koerper { max-width: var(--inhalt-breite-weit); padding: 0 clamp(var(--r-5), 4vw, var(--r-8)); }
.seite.schmal .seite-koerper { max-width: var(--inhalt-breite-schmal); }
.seite-kopf { display: flex; align-items: flex-end; gap: var(--r-4); padding: var(--r-5) 0 var(--r-4); flex-wrap: wrap; }
.seite-titel { font: 650 var(--groesse-titel)/var(--zeile-eng) var(--schrift); letter-spacing: -.02em; color: var(--tinte); margin: 0; padding: var(--r-1) 0; }
.seite-unter { margin: 2px 0 0; color: var(--tinte-leise); font-size: var(--groesse-2); }
.seite-kopf-text { flex: 1 1 auto; min-width: 0; }
.seite-aktionen { margin-left: auto; display: flex; align-items: center; gap: var(--r-2); flex-wrap: wrap; }
.seite-kopf.klein { padding: 0 0 var(--r-3); }
.seite-kopf.klein .seite-titel { font-size: var(--groesse-5); }
.eingebettet .seite-koerper { padding: 0; max-width: none; }

/* ── Wo bin ich (im Seitenkopf) ───────────────────────────────────── */
.krume { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: var(--r-1); font-size: var(--groesse-1); color: var(--tinte-leise); }
.krume a { color: var(--tinte-leise); text-decoration: none; padding: 2px var(--r-1); margin-left: calc(-1 * var(--r-1)); border-radius: var(--rundung-klein); }
.krume a:hover { background: var(--flaeche-leise); color: var(--tinte); }
.krume [aria-current] { color: var(--tinte-leise); font-weight: var(--halbfett); }
.krume-trenner { display: inline-flex; color: var(--tinte-leise); }
.krume a + .krume-trenner, .krume-trenner + a { margin-left: 0; }

/* ── Reiter: Ansichten eines Bereichs ─────────────────────────────── */
.reiter { display: flex; gap: var(--r-1); margin: 0 0 var(--r-5); border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.reiter-punkt { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--r-2); padding: var(--r-2) var(--r-3); min-height: 40px; color: var(--tinte-leise); text-decoration: none; font-size: var(--groesse-2); font-weight: var(--halbfett); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: var(--rundung-klein) var(--rundung-klein) 0 0; }
.reiter-punkt:hover { color: var(--tinte); background: var(--flaeche-leise); }
.reiter-punkt.aktiv { color: var(--petrol); border-bottom-color: var(--petrol); }

/* ── Seitenfeld rechts: Bearbeiten, die Liste bleibt sichtbar ─────── */
.seitenfeld { position: fixed; top: var(--r-3); right: var(--r-3); bottom: var(--r-3); width: var(--seitenfeld-breite); display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--hebung-3); z-index: var(--ebene-karte); outline: none; animation: feld-rein var(--dauer) var(--kurve); }
@keyframes feld-rein { from { transform: translateX(var(--r-5)); opacity: 0; } }
.haupt.mit-seitenfeld .blatt { padding-right: calc(var(--seitenfeld-breite) + var(--r-3)); }
.seitenfeld-kopf { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-3) var(--r-3) var(--r-5); border-bottom: 1px solid var(--linie-zart); }
.seitenfeld-titel { margin: 0; flex: 1 1 auto; font: var(--fett) var(--groesse-4)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.seitenfeld-zu { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rundung-klein); color: var(--tinte-leise); flex: 0 0 auto; }
.seitenfeld-zu:hover { background: var(--flaeche-leise); color: var(--tinte); }
.seitenfeld-koerper { flex: 1 1 auto; overflow-y: auto; padding: var(--r-4) var(--r-5); }
.seitenfeld-fuss { display: flex; justify-content: flex-end; gap: var(--r-2); padding: var(--r-3) var(--r-5); border-top: 1px solid var(--linie-zart); }

/* ── Gefuehrter Ablauf ────────────────────────────────────────────── */
.ablauf-schritte { list-style: none; display: flex; gap: var(--r-2); margin: 0 0 var(--r-4); padding: 0; flex-wrap: wrap; }
.ablauf-schritt { display: inline-flex; align-items: center; gap: var(--r-2); font-size: var(--groesse-1); color: var(--tinte-leise); }
.ablauf-schritt + .ablauf-schritt::before { content: ""; width: var(--r-5); height: 1px; background: var(--linie-stark); }
.ablauf-nr { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--flaeche); border: 1px solid var(--linie-stark); font-weight: var(--fett); }
.ablauf-schritt.aktiv { color: var(--tinte); font-weight: var(--fett); }
.ablauf-schritt.aktiv .ablauf-nr { background: var(--petrol); border-color: var(--petrol); color: var(--creme); }
.ablauf-schritt.fertig .ablauf-nr { background: var(--salbei); border-color: var(--salbei); color: var(--petrol); }
.ablauf-stelle { margin: 0; font-size: var(--groesse-1); color: var(--tinte-leise); }
.ablauf-titel { margin: var(--r-1) 0 var(--r-4); font: var(--fett) var(--groesse-5)/var(--zeile-eng) var(--schrift); color: var(--tinte); outline: none; }
.ablauf-inhalt p { margin: 0 0 var(--r-3); }
.ablauf-fuss { display: flex; align-items: center; gap: var(--r-2); padding: var(--r-3) var(--r-5); border-top: 1px solid var(--linie-zart); background: var(--flaeche-leise); }
.ablauf-luecke { flex: 1 1 auto; }
.ablauf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r-2); }
.ablauf-liste li { display: flex; align-items: center; gap: var(--r-2); font-size: var(--groesse-2); }
.ablauf-liste .ic { color: var(--ok); }

@media (max-width: 767px) {
  .seite-koerper, .seite.breit .seite-koerper, .seite.schmal .seite-koerper { padding: 0 var(--r-4); }
  .eingebettet .seite-koerper { padding: 0; }
  .seitenfeld { inset: var(--sicher-oben) 0 0; width: auto; border-radius: 0; z-index: var(--ebene-suche); }
  .seitenfeld-fuss { flex-wrap: wrap; padding-bottom: calc(var(--r-3) + var(--sicher-unten)); }
  .seitenfeld-koerper:last-child { padding-bottom: calc(var(--r-4) + var(--sicher-unten)); }
  .haupt.mit-seitenfeld .blatt { padding-right: 0; }
  .seitenfeld-zu, .reiter-punkt { min-height: var(--treffer-min); min-width: var(--treffer-min); }
  /* Pfad am Handy in einer Zeile (17.10.2026): rollt seitlich statt drei Zeilen hoch zu werden */
  /* Pfad am Handy (17.10.2026): nur der Weg eine Stufe zurueck ("‹ Bereich"); die Seite selbst steht gross darunter. */
  .krume > * { display: none; }
  .krume > a:nth-last-child(3) { display: inline-flex; align-items: center; gap: var(--r-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--petrol); font-weight: var(--halbfett); }
  .krume > a:nth-last-child(3)::before { content: "‹"; font-size: var(--groesse-4); line-height: 1; }
  .reiter { -webkit-mask-image: linear-gradient(90deg, var(--schwarz-voll) 88%, transparent); mask-image: linear-gradient(90deg, var(--schwarz-voll) 88%, transparent); }
  .ablauf-fuss { flex-wrap: wrap; padding: var(--r-3) var(--r-4); }
  .ablauf-schritt span:last-child { display: none; }
  .ablauf-schritt.aktiv span:last-child { display: inline; }
  .seite-kopf { padding-top: var(--r-4); }
  .seite-titel { font-size: var(--groesse-6); }
  .seite-aktionen { margin-left: 0; width: 100%; }
}
/* Eingebettete Seiten (Verlauf, Papierkorb, Einstellungen eines Bereichs) stehen buendig in ihrem Rahmen, auch in breiten Seiten (17.10.2026). */
.seite .eingebettet .seite-koerper, .seite.breit .eingebettet .seite-koerper, .seite.schmal .eingebettet .seite-koerper { padding: 0; max-width: none; }