/* ===========================================================================
   Guideline als App
   ---------------------------------------------------------------------------
   Warum es diese Seite gibt: die lange Guideline ist 19.000 px - rund
   23 Bildschirmhoehen am Handy. Allein die zwoelf Skripte machen 8.200 px
   davon aus. Merts Regel sind 8-10. Hier steht derselbe Inhalt als App:
   ein Ueberblick, aus dem man in jedes Kapitel springt, statt an allem
   vorbeizuscrollen.

   Farben und Formen sind 1:1 aus dashboard.html uebernommen.
   Die Bewegung der Kapitelliste ist 1:1 aus dem 21st-Baustein
   "Drilldown Menu" (@ruixen.ui): Zeilen liegen absolut auf einem Raster von
   1.85em, gehende Zeilen nehmen keinen Platz mit, nichts rutscht seitlich,
   und die Feder ist bewusst OHNE Ueberschwinger - "every row is carrying a
   word someone is reading".
   =========================================================================== */

:root{
  --grund:#100C0F; --flaeche:#171216; --flaeche-2:#1E1519;
  --linie:rgba(243,233,236,.10);
  --text:#F3E9EC; --text-leise:#A99AA0; --text-still:#6E6167;
  --rot:#E5142A; --pink:#FF4B7E; --lila:#B784FF; --gold:#E8C07A; --gruen:#4ADE80;
  --schrift:"Manrope",system-ui,-apple-system,sans-serif;
  --anzeige:"Bricolage Grotesque",var(--schrift);

  --leiste-h:58px;
  --app-max:520px;
  --r-karte:14px; --r-blatt:18px; --r-knopf:16px; --r-pille:999px;
  --kurve:cubic-bezier(.22,.61,.36,1);       /* Merts Hauskurve, kein Ueberschwinger */
  --kurve-blatt:cubic-bezier(.45,0,.25,1);
  --kurve-feder:cubic-bezier(.34,1.3,.64,1);
  --kurve-weich:cubic-bezier(.16,1,.3,1);

  /* Raster der Kapitelliste.
     Das Original arbeitet mit 1.85em Abstand - dort ist eine Zeile aber
     EINZEILIG. Hier steht unter dem Namen noch eine Erklaerzeile, damit man
     die neun Kapitel ohne Antippen einordnen kann. Gemessen braucht so eine
     Zeile rund 2.2em, plus Innenabstand 0.7em. Bei 1.85em lagen die Zeilen
     uebereinander - deshalb 3.0em. Verhaeltnis Abstand zu Hoehe bleibt wie
     im Original (Abstand etwas groesser als die Zeile). */
  --zeilen-abstand:3.35em;   /* gemessen: die Zeile ist 3.18em hoch. Der
     Abstand MUSS groesser sein, sonst ueberlappen die Tippflaechen und ein
     Druck an der Unterkante trifft das naechste Kapitel (gemessen 2,9 px). */
  --zeilen-hoehe:2.7em;
  --einzug:0.9em;

  /* GLASFLAECHEN — in BEIDEN Modi richtig (06.09.2026).
     Vorher standen in auftrag.css und management.css elf Mal feste Werte wie
     rgba(255,255,255,.04). Im Dunkeln ist das die gewollte Glasoptik, im
     Hellen aber "4 % Weiss auf Weiss" - die Flaechen waren dort schlicht
     unsichtbar, unter anderem die grosse Zustandskarte im Auftrag.
     Deshalb hier einmal zentral, nie wieder von Hand. */
  --glas:       rgba(255,255,255,.055);
  --glas-tief:  rgba(255,255,255,.03);
  --glas-kante: rgba(255,255,255,.115);
  --glas-licht: inset 0 1px 0 rgba(255,255,255,.09);
  --glas-an:    rgba(255,255,255,.08);   /* ausgewaehlt/aktiv */
}
html.hell{
  --grund:#FAF7F5; --flaeche:#FFFFFF; --flaeche-2:#F5F0F2;
  --linie:rgba(38,34,29,.12);
  --text:#241318; --text-leise:#6B5860; --text-still:#9A8B90;

  /* Im Hellen wird aus der Innenkante ein feiner Schatten - sonst haette
     eine weisse Karte auf cremefarbenem Grund keine Kontur. */
  --glas:       #FFFFFF;
  --glas-tief:  #FFFFFF;
  --glas-kante: rgba(38,34,29,.10);
  --glas-licht: 0 1px 2px rgba(38,34,29,.05);
  /* Aktiv traegt im Hellen einen zarten Goldton - Weiss auf Weiss
     waere kein Zustand, sondern nur eine Kante. */
  --glas-an:    rgba(232,192,122,.20);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overscroll-behavior:none; }
html{ overflow-x:hidden; background:var(--grund); }
body{
  background:var(--grund); color:var(--text);
  font-family:var(--schrift); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
input,textarea,[contenteditable]{ -webkit-user-select:text; user-select:text; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }

.app{
  position:relative; width:100%; max-width:var(--app-max); margin-inline:auto;
  min-height:100dvh; display:flex; flex-direction:column; background:var(--grund);
}
@media (min-width:600px){
  body{ background:#0a080a; }
  html.hell body{ background:#EFE9EA; }
  .app{ border-inline:1px solid var(--linie); }
}

/* --- Kopf ---------------------------------------------------------------- */
.kopf{
  position:sticky; top:0; z-index:40;
  height:calc(52px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
  display:flex; align-items:center; gap:10px; padding-inline:14px;
  background:color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--linie);
}
.kopf__zeichen{
  width:32px; height:32px; flex:none; border-radius:9px;
  background:#100C0F; border:1px solid rgba(255,255,255,.13);
  display:grid; place-items:center; box-shadow:0 4px 14px -4px rgba(229,20,42,.55);
}
.kopf__zeichen img{ width:20px; height:20px; object-fit:contain; }
.kopf__titel{
  font-family:var(--anzeige); font-size:16.5px; font-weight:800; letter-spacing:-.02em;
  margin:0; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wkz{
  position:relative; width:36px; height:36px; border-radius:10px; flex:none;
  border:1px solid var(--linie); background:var(--flaeche);
  display:grid; place-content:center; color:var(--text-leise);
  transition:color .18s, background .18s, border-color .18s;
}
.wkz:active{ background:var(--flaeche-2); }
.wkz svg{ width:17px; height:17px; }

.inhalt{
  flex:1; min-height:0;
  padding:14px 14px calc(var(--leiste-h) + env(safe-area-inset-bottom) + 22px);
}
.bild{ display:none; }
.bild[data-an="1"]{ display:block; animation:bildAuf .26s var(--kurve) both; }
@keyframes bildAuf{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .bild[data-an="1"]{ animation:none } }

/* --- Untere Leiste ------------------------------------------------------- */
.leiste{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:50;
  width:100%; max-width:var(--app-max);
  height:calc(var(--leiste-h) + env(safe-area-inset-bottom));
  padding:0 6px env(safe-area-inset-bottom); display:flex; align-items:center;
  background:color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-top:1px solid var(--linie);
}
.leiste__reihe{ position:relative; display:flex; width:100%; height:var(--leiste-h); }
.leiste__marke{
  position:absolute; top:7px; height:calc(var(--leiste-h) - 14px);
  border-radius:var(--r-knopf); background:rgba(229,20,42,.13);
  box-shadow:inset 0 0 0 1px rgba(229,20,42,.22);
  transition:transform .34s cubic-bezier(.34,1.26,.64,1), width .34s cubic-bezier(.34,1.26,.64,1);
  pointer-events:none;
}
.tab{
  position:relative; z-index:1; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-still); border-radius:var(--r-knopf);
  transition:color .18s var(--kurve);
}
.tab svg{ width:21px; height:21px; transition:transform .3s var(--kurve-feder); }
.tab__text{ font-size:10px; font-weight:700; white-space:nowrap; }
.tab[aria-selected="true"]{ color:var(--text); }
.tab[aria-selected="true"] svg{ transform:translateY(-1px) scale(1.06); }
.tab:active svg{ transform:scale(.9); }

/* ===========================================================================
   KAPITELLISTE  —  Bauart 1:1 aus 21st "Drilldown Menu" (@ruixen.ui)
   Zeilen liegen absolut auf einem Raster. Eine gehende Zeile nimmt keinen
   Platz mit, also muss nichts dahinter neu umbrechen. Der Einzug haengt an
   der Tiefe, nicht am geoeffneten Zweig - dadurch bewegt sich nie etwas
   seitlich unter dem Finger weg.
   =========================================================================== */
.kapitel{
  position:relative;
  font-size:clamp(17px,4.6vw,21px);
  transition:height .3s ease-out;   /* Hoehe als CSS-Uebergang, wie im Original */
}
@media (prefers-reduced-motion:reduce){ .kapitel{ transition:none } }

.kzeile{
  /* left UND right: sonst ist die Zeile so breit wie ihr Text und ein langer
     Titel schiebt die ganze Seite seitlich raus (gemessen: 72 px). */
  position:absolute; left:0; right:0; top:0;
  transition:transform .3s var(--kurve), opacity .2s var(--kurve);
  /* Feder des Originals: stiffness 520, damping 46 -> leicht ueberdaempft,
     rund 300 ms, KEIN Ueberschwinger. Als Kurve nachgebildet. */
}
.kzeile[data-weg="1"]{ opacity:0; pointer-events:none; }

.kzeile__k{
  display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; padding:6px 8px 6px 6px;
  border-radius:10px; transition:background .16s;
  min-height:var(--zeilen-hoehe);   /* min-height, nicht height: sonst wird
     eine Zeile mit langem Untertitel abgeschnitten statt mitzuwachsen */
}
.kzeile__k:active{ background:var(--flaeche-2); }
@media (hover:hover){ .kzeile__k:hover{ background:var(--flaeche-2); } }

.kzeile__nr{
  width:1.55em; height:1.55em; flex:none; border-radius:8px;
  display:grid; place-content:center;
  font-size:.56em; font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--flaeche-2); color:var(--text-still);
  transition:background .2s, color .2s;
}
.kzeile__wort{
  display:block; white-space:nowrap; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis;
}
/* Zeichenweises Aufziehen - Stagger 15 ms hinein, 8 ms hinaus (Original) */
.kzeile__z{
  display:inline-block; opacity:0; transform:scale(0); filter:blur(4px);
  transition:opacity .28s var(--kurve), transform .28s var(--kurve), filter .28s var(--kurve);
  transition-delay:calc(var(--z,0) * 15ms);
}
.kzeile[data-da="1"] .kzeile__z{ opacity:1; transform:none; filter:blur(0); }
@media (prefers-reduced-motion:reduce){
  .kzeile__z{ opacity:1 !important; transform:none !important; filter:none !important; transition:none }
}
.kzeile__dazu{
  display:block; font-size:.58em; color:var(--text-still); font-weight:600;
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kzeile__zahl{
  margin-left:auto; flex:none; font-size:.55em; font-weight:700;
  color:var(--text-still); font-variant-numeric:tabular-nums;
}
.kzeile__pfeil{ width:.62em; height:.62em; flex:none; color:var(--text-still); }

/* Zurueck-Zeile (Brotkrume): gleiche Schriftstaerke, nur grau — sonst
   springt die Zeilenbreite im Moment des Klicks. */
.kzeile[data-krume="1"] .kzeile__wort{ color:var(--text-still); }
.kzeile[data-krume="1"] .kzeile__nr{ background:transparent; color:var(--text-still); }
.kzeile__zurueck{
  width:.9em; height:.9em; flex:none; color:var(--text-still);
  transition:transform .2s ease-out, opacity .2s ease-out;
}

/* --- Kapitelinhalt -------------------------------------------------------- */
.kinhalt{ margin-top:6px; }
.kinhalt[data-an="0"]{ display:none; }

/* ===========================================================================
   KARTEN, ZEILEN, CHIPS  (1:1 aus dashboard.html)
   =========================================================================== */
.karte{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r-karte); padding:14px 15px;
}
.karte + .karte{ margin-top:12px; }
.karte__kopf{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.karte h3{ font-family:var(--anzeige); font-size:16px; font-weight:700; margin:0; }
.karte__mehr{ color:var(--gold); font-size:12.5px; font-weight:700; flex:none; }

.gruss{ margin:2px 0 16px; }
.gruss__klein{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 5px;
}
.gruss h1{
  font-family:var(--anzeige); font-size:clamp(23px,6.4vw,29px); font-weight:800;
  letter-spacing:-.02em; margin:0; line-height:1.14;
}
.gruss p{ color:var(--text-leise); margin:6px 0 0; font-size:13.5px; }

.zeile{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:10px; border-radius:10px; transition:background .16s;
}
.zeile:active{ background:var(--flaeche-2); }
@media (hover:hover){ .zeile:hover{ background:var(--flaeche-2); } }
.zeile__sym{ width:33px; height:33px; border-radius:9px; display:grid; place-content:center; flex:none; }
.zeile__sym svg{ width:15px; height:15px; }
.sym--rot{ background:rgba(229,20,42,.13); color:var(--rot); }
.sym--gold{ background:rgba(232,192,122,.14); color:var(--gold); }
.sym--gruen{ background:rgba(74,222,128,.12); color:var(--gruen); }
.sym--lila{ background:rgba(183,132,255,.13); color:var(--lila); }
.sym--pink{ background:rgba(255,75,126,.13); color:var(--pink); }
.zeile__text{ flex:1; min-width:0; }
/* display:block ist Pflicht, nicht Geschmack: Beide werden als <span>
   eingesetzt. Ohne block laufen Titel und Zusatz in EINE Zeile
   ("Keine FixkostenKein Beitrag, keine Grundgebuehr...") - derselbe Fehler
   wie am 05.09.2026 bei den Skripttiteln. Gefunden am 06.09.2026 im
   Management-Bereich; die Regel gilt fuer alle Bereiche gemeinsam. */
.zeile__was{ display:block; font-size:13.5px; font-weight:600; margin:0; }
.zeile__dazu{ display:block; font-size:11.5px; color:var(--text-still); margin:1px 0 0; line-height:1.45; }
.zeile__pfeil{ width:15px; height:15px; color:var(--text-still); flex:none; }

/* Filterchips - waagerecht scrollbar, wie in einer App */
.chips{
  display:flex; gap:8px; overflow-x:auto; padding:2px 14px 12px;
  margin:0 -14px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; padding:9px 14px; border-radius:var(--r-pille);
  background:var(--flaeche-2); border:1px solid var(--linie);
  font-size:12.5px; font-weight:700; color:var(--text-leise); white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s, transform .18s var(--kurve-feder);
}
.chip:active{ transform:scale(.96); }
.chip[aria-pressed="true"]{
  background:rgba(229,20,42,.13); border-color:rgba(229,20,42,.3); color:var(--text);
}

.zeichen{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:var(--r-pille); font-size:10.5px; font-weight:800; white-space:nowrap;
}
.zeichen--gold{ background:rgba(232,192,122,.14); color:var(--gold); }
.zeichen--gruen{ background:rgba(74,222,128,.13); color:var(--gruen); }
.zeichen--still{ background:var(--flaeche-2); color:var(--text-still); }

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 20px; width:100%; border-radius:var(--r-pille);
  font-size:15px; font-weight:800; transition:transform .18s var(--kurve), background .18s;
}
.knopf svg{ width:17px; height:17px; flex:none; }
.knopf:active{ transform:scale(.97); }
.knopf--haupt{ background:var(--rot); color:#fff; }
.knopf--still{ background:var(--flaeche-2); color:var(--text); border:1px solid var(--linie); }

.mini{ font-size:12px; color:var(--text-still); line-height:1.55; }
.trenner{ height:1px; background:var(--linie); border:0; margin:14px 0; }
.leer{
  text-align:center; padding:24px 14px; color:var(--text-still); font-size:12.5px;
  border:1px dashed var(--linie); border-radius:11px;
}
/* Eigene Zeile - sonst klebt die Ueberschrift am Satz
   ("Noch nichts freigeschaltetGib unten den Code ein"). */
.leer b{ display:block; color:var(--text-leise); font-size:13.5px; margin-bottom:4px; }

/* ===========================================================================
   SKRIPTE
   =========================================================================== */
.skript{
  display:block; width:100%; text-align:left;
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r-karte); padding:13px 14px; margin-bottom:9px;
  transition:border-color .2s, transform .28s var(--kurve-feder), box-shadow .28s;
}
.skript:active{ transform:scale(.985); }
@media (hover:hover){
  .skript:hover{ border-color:rgba(229,20,42,.28); transform:translateY(-3px);
                 box-shadow:0 16px 34px -22px rgba(0,0,0,.7); }
}
.skript__kopf{ display:flex; align-items:center; gap:11px; }
.skript__nr{
  width:30px; height:30px; flex:none; border-radius:9px;
  display:grid; place-content:center; font-size:12.5px; font-weight:800;
  background:rgba(232,192,122,.14); color:var(--gold); font-variant-numeric:tabular-nums;
}
.skript__t{ flex:1; min-width:0; }
/* display:block, weil beides <span> ist - sonst laufen Titel und Zusatz in
   einer Zeile ineinander ("Der Griff in die TascheUnterwegs, 12 Sekunden"). */
.skript__titel{
  display:block; font-size:14.5px; font-weight:700; margin:0; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Einzeilig, damit alle Zeilen gleich hoch sind - eine App-Liste mit
   springenden Hoehen wirkt unruhig. Der volle Text steht im Blatt. */
.skript__meta{
  display:block; font-size:11.5px; color:var(--text-still); margin:3px 0 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.skript__pfeil{ width:15px; height:15px; color:var(--text-still); flex:none; }

/* Beats im Blatt */
.beat{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linie); }
.beat:last-child{ border-bottom:0; }
.beat__zeit{
  flex:none; width:62px; font-size:11.5px; font-weight:800; color:var(--gold);
  font-variant-numeric:tabular-nums; padding-top:2px;
}
.beat__t{ flex:1; min-width:0; }
.beat__tun{ font-size:13.5px; font-weight:700; margin:0; }
.beat__wie{ font-size:13px; color:var(--text-leise); margin:2px 0 0; }
.beat__sagen{
  display:block; margin:8px 0 0; padding:10px 12px;
  background:var(--flaeche-2); border-left:2px solid var(--rot); border-radius:0 10px 10px 0;
  font-size:13.5px; line-height:1.5; color:var(--text);
}
.beat__sagen::before{ content:"„"; } .beat__sagen::after{ content:"\201C"; }

/* ===========================================================================
   BLATT VON UNTEN  (1:1 aus 21st "Bottom Menu": .3s cubic-bezier(.45,0,.25,1))
   =========================================================================== */
.blatt-grund{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .3s var(--kurve-blatt);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.blatt-grund[data-an="1"]{ opacity:1; pointer-events:auto; }
.blatt{
  position:fixed; bottom:0; left:50%; z-index:61;
  width:100%; max-width:var(--app-max);
  transform:translateX(-50%) translateY(100%);
  background:var(--flaeche); border:1px solid var(--linie); border-bottom:0;
  border-radius:var(--r-blatt) var(--r-blatt) 0 0;
  box-shadow:0 -22px 60px -30px rgba(0,0,0,.9);
  transition:transform .3s var(--kurve-blatt);
  max-height:88dvh; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.blatt[data-an="1"]{ transform:translateX(-50%) translateY(0); }
.blatt__griff{ flex:none; padding:9px 0 4px; display:grid; place-items:center; touch-action:none; }
.blatt__griff span{ width:38px; height:4px; border-radius:99px; background:var(--linie); }
.blatt__kopf{ flex:none; display:flex; align-items:flex-start; gap:10px; padding:2px 16px 12px; }
.blatt__kopf h2{
  font-family:var(--anzeige); font-size:18px; font-weight:800; letter-spacing:-.02em;
  margin:0; flex:1; min-width:0;
}
.blatt__kopf p{ font-size:12px; color:var(--text-still); margin:3px 0 0; }
.blatt__zu{
  width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-content:center;
  color:var(--text-still); background:var(--flaeche-2);
}
.blatt__zu svg{ width:16px; height:16px; }
.blatt__inhalt{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 16px 16px; overscroll-behavior:contain;
}
.blatt[data-an="1"] .blatt__inhalt{ animation:blattInhalt .25s cubic-bezier(.42,0,.58,1) both; }
@keyframes blattInhalt{
  from{ opacity:0; transform:scale(.96); filter:blur(10px) }
  to  { opacity:1; transform:none;      filter:blur(0) }
}
@media (prefers-reduced-motion:reduce){
  .blatt,.blatt-grund{ transition:none } .blatt[data-an="1"] .blatt__inhalt{ animation:none }
}

/* ===========================================================================
   CHECKLISTE
   =========================================================================== */
.haken{
  display:flex; align-items:flex-start; gap:11px; padding:12px;
  border-radius:12px; background:var(--flaeche); border:1px solid var(--linie);
  margin-bottom:8px; width:100%; text-align:left;
  transition:border-color .18s, background .18s;
}
.haken[aria-pressed="true"]{ border-color:rgba(74,222,128,.4); }
.haken__kasten{
  width:22px; height:22px; flex:none; margin-top:1px; border-radius:7px;
  border:1.5px solid var(--text-still); display:grid; place-content:center; color:transparent;
  transition:background .2s var(--kurve), border-color .2s, color .2s;
}
.haken__kasten svg{ width:13px; height:13px; }
.haken[aria-pressed="true"] .haken__kasten{ background:var(--gruen); border-color:var(--gruen); color:#0d1f12; }
.haken__text{ font-size:13.5px; line-height:1.45; }
.haken[aria-pressed="true"] .haken__text{ color:var(--text-still); text-decoration:line-through; }

.fortschritt{ margin-bottom:14px; }
.fortschritt__kopf{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; }
.fortschritt__kopf b{ font-weight:700; font-variant-numeric:tabular-nums; }
.fortschritt__bahn{ height:7px; border-radius:99px; background:var(--flaeche-2); overflow:hidden; }
.fortschritt__fuell{ height:100%; border-radius:99px; background:var(--gruen); transition:width .8s var(--kurve-weich); }

/* Aufklapper */
.klapp{ border-bottom:1px solid var(--linie); }
.klapp:last-child{ border-bottom:0; }
.klapp__k{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:13px 2px; }
.klapp__f{ flex:1; min-width:0; font-size:13.5px; font-weight:600; }
.klapp__p{ width:15px; height:15px; flex:none; color:var(--text-still); transition:transform .3s var(--kurve); }
.klapp[data-auf="1"] .klapp__p{ transform:rotate(180deg); }
.klapp__i{ overflow:hidden; height:0; transition:height .3s var(--kurve); }
.klapp__i > div{ padding:0 2px 13px; font-size:13px; color:var(--text-leise); line-height:1.6; }

/* Meldung unten */
.toast{
  position:fixed; left:50%; z-index:90;
  bottom:calc(var(--leiste-h) + env(safe-area-inset-bottom) + 14px);
  width:calc(100% - 28px); max-width:calc(var(--app-max) - 28px);
  transform:translateX(-50%) translateY(16px);
  display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:14px;
  background:var(--flaeche-2); border:1px solid var(--linie);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.85);
  font-size:13px; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .28s var(--kurve), transform .28s var(--kurve);
}
.toast[data-an="1"]{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:17px; height:17px; flex:none; color:var(--gruen); }

/* Ruhe: nichts laeuft, wenn niemand hinsieht - aber nie Inhalt verstecken. */
html.ruht .toast{ transition:none }
html.ruht .kzeile__z{ opacity:1 !important; transform:none !important; filter:none !important; }
html.ruht .bild[data-an="1"]{ animation:none !important; }