/* stil.css — TOUCHÉ.
   Farben, Abstaende und Schriften aus dem Designvorschlag. Alles haengt an
   Variablen; ein Wechsel auf hell/dunkel tauscht nur diese Variablen aus,
   kein Bauteil kennt eine feste Farbe. */

/* ---------- Schriften (liegen mit, damit die App offline gleich aussieht) --- */
@font-face { font-family:"Space Grotesk"; src:url("schriften/space-grotesk-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("schriften/space-grotesk-600.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("schriften/space-grotesk-700.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("schriften/source-serif-4-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("schriften/source-serif-4-600.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("schriften/ibm-plex-mono-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("schriften/ibm-plex-mono-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }

/* ---------- Farben ---------- */
:root {
  --bg:#E9EDEE; --flaeche:#FFFFFF; --flaeche-2:#F3F5F5; --flaeche-3:#E4E9EA;
  --tinte:#1A2226; --tinte-weich:#4B565B; --stahl:#5C6B72; --stahl-weich:#AEB8BC;
  --linie:#D4DADB;
  --akzent:#1E6B4E; --akzent-tinte:#123B2B; --akzent-weich:#DEEAE3;
  --messing:#9C7A3C; --messing-weich:#F1E7D2;
  --florett:#3B6EA5; --degen:#B5542A; --saebel:#7B4B94; --allgemein:#6B7478;
  --schatten:0 1px 3px rgba(20,30,25,.08);
  --schatten-hoch:0 8px 30px -12px rgba(20,30,25,.35);
  --schleier:rgba(10,16,18,.38);

  --schrift-anzeige:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --schrift-text:"Source Serif 4", Georgia, "Times New Roman", serif;
  --schrift-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius:14px;
  --leiste-hoehe:calc(58px + env(safe-area-inset-bottom, 0px));
}

:root[data-thema="dunkel"] {
  --bg:#12181A; --flaeche:#1A2225; --flaeche-2:#212B2E; --flaeche-3:#2A363A;
  --tinte:#E6ECEC; --tinte-weich:#B3BFC2; --stahl:#8C9A9F; --stahl-weich:#5A686D;
  --linie:#2E3A3E;
  --akzent:#4FB58A; --akzent-tinte:#BFE6D4; --akzent-weich:#1C3A2E;
  --messing:#D3AD68; --messing-weich:#33291A;
  --florett:#7BA8D8; --degen:#E08A5F; --saebel:#B58BCB; --allgemein:#9AA6AA;
  --schatten:0 1px 3px rgba(0,0,0,.5);
  --schatten-hoch:0 8px 30px -12px rgba(0,0,0,.7);
  /* Dunkel muss der Schleier kraeftiger sein: 38 % Schwarz auf fast schwarzem
     Grund sieht man nicht, und dann steht das Menue ohne erkennbaren Abstand
     mitten in der Trefferliste. */
  --schleier:rgba(0,0,0,.62);
  color-scheme: dark;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; height:100%; }
body {
  background:var(--bg); color:var(--tinte);
  font-family:var(--schrift-text); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; border-radius:6px; }
a { color:inherit; }
button { font:inherit; color:inherit; }

/* ---------- Grundgeruest ---------- */
#app { min-height:100%; display:flex; flex-direction:column; }
.rumpf {
  flex:1; width:100%; max-width:900px; margin:0 auto;
  padding:14px 16px calc(var(--leiste-hoehe) + 20px);
}
@media (min-width:900px) {
  #app { flex-direction:row; }
  .rumpf { padding:26px 34px 60px; max-width:1000px; }
}

/* ---------- Kopf ---------- */
.kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 14px; }
.marke { font-family:var(--schrift-anzeige); font-weight:700; font-size:20px; letter-spacing:-.01em; line-height:1.1; }
.marke small { display:block; font-family:var(--schrift-mono); font-weight:400; font-size:9.5px;
               letter-spacing:.14em; color:var(--stahl); text-transform:uppercase; margin-top:2px; }
.kopf-titel { font-family:var(--schrift-anzeige); font-weight:700; font-size:22px; margin:0; letter-spacing:-.01em; }
.kopf-unter { color:var(--stahl); font-size:13.5px; margin-top:2px; }
.kopf-knoepfe { display:flex; gap:8px; flex-shrink:0; }

.symbolknopf {
  width:38px; height:38px; border-radius:11px; background:var(--flaeche);
  border:1px solid var(--linie); display:flex; align-items:center; justify-content:center;
  color:var(--tinte); cursor:pointer; flex-shrink:0; padding:0;
}
.symbolknopf:hover { background:var(--flaeche-2); }
.symbolknopf[aria-pressed="true"] { background:var(--akzent); border-color:var(--akzent); color:#fff; }

/* ---------- Piste-Trenner (die Fechtbahn als Gliederung) ---------- */
.piste { margin:22px 0 10px; }
.piste .l1 { height:2px; background:var(--tinte); opacity:.85; }
.piste .l2 { height:1px; margin-top:3px;
  background-image:linear-gradient(to right, var(--stahl-weich) 60%, transparent 0%);
  background-size:7px 1px; background-repeat:repeat-x; }
.piste-schrift { font-family:var(--schrift-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stahl); display:block; margin:0 0 10px; }

/* ---------- Suchfeld ---------- */
.suchzeile { display:flex; align-items:center; gap:10px; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:12px; padding:11px 13px; color:var(--stahl);
  cursor:text; width:100%; }
.suchzeile svg { flex-shrink:0; }
.suchzeile input { border:none; outline:none; background:none; width:100%;
  font-family:var(--schrift-text); font-size:15.5px; color:var(--tinte); min-width:0; }
.suchzeile input::placeholder { color:var(--stahl-weich); }
/* Chrome und Safari setzen bei input[type=search] ein eigenes Kreuz hinein.
   Neben unserem Loeschknopf stuenden dann zwei nebeneinander — das eigene
   bleibt, weil es in beiden Browsern gleich aussieht und den Wert sauber
   ueber beiEingabe zuruecksetzt. */
.suchzeile input::-webkit-search-cancel-button,
.suchzeile input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }
.such-loeschen { border:none; background:none; cursor:pointer; color:var(--stahl); padding:2px;
  display:flex; align-items:center; }

/* ---------- Chips / Filter ---------- */
.chipzeile { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  font-family:var(--schrift-anzeige); font-size:12px; font-weight:600; white-space:nowrap;
  padding:6px 12px; border-radius:999px; border:1px solid var(--linie);
  background:var(--flaeche); color:var(--tinte-weich); cursor:pointer;
}
.chip:hover { border-color:var(--stahl-weich); }
.chip[aria-pressed="true"] { background:var(--tinte); color:var(--bg); border-color:var(--tinte); }
.chip .zahl { font-family:var(--schrift-mono); font-size:10px; opacity:.65; margin-left:5px; }
.chip[disabled] { opacity:.35; cursor:default; }

.filterblock { margin-bottom:12px; }
.filterblock > span { font-family:var(--schrift-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stahl); display:block; margin-bottom:6px; }

.filterleiste { background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:var(--radius); padding:14px; margin-bottom:14px; }
.filterkopf { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:2px; }
.filterkopf-links { display:flex; align-items:center; gap:8px; font-family:var(--schrift-anzeige);
  font-weight:600; font-size:13.5px; }
.textknopf { background:none; border:none; cursor:pointer; font-family:var(--schrift-anzeige);
  font-size:12.5px; font-weight:600; color:var(--akzent); padding:4px 2px; }

/* ---------- Trefferliste ---------- */
.trefferzahl { font-family:var(--schrift-mono); font-size:11px; color:var(--stahl); margin:2px 0 6px; }
.liste { display:flex; flex-direction:column; }
.eintrag { display:flex; align-items:flex-start; gap:11px; padding:12px 4px;
  border-bottom:1px solid var(--linie); cursor:pointer; text-decoration:none; color:inherit; }
.eintrag:hover { background:var(--flaeche-2); }
.punkt { width:8px; height:8px; border-radius:50%; margin-top:7px; flex-shrink:0;
  background:var(--punktfarbe, var(--allgemein)); }
.eintrag-haupt { flex:1; min-width:0; }
.eintrag-kopf { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.eintrag-titel { font-family:var(--schrift-anzeige); font-weight:600; font-size:15.5px; }
.eintrag-kennung { font-family:var(--schrift-mono); font-size:10px; color:var(--stahl); }
.eintrag-vorschau { font-size:13.5px; color:var(--tinte-weich); margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.eintrag-merk { border:none; background:none; cursor:pointer; color:var(--stahl-weich);
  padding:4px; display:flex; align-items:center; flex-shrink:0; }
.eintrag-merk[aria-pressed="true"] { color:var(--messing); }

.leer { color:var(--stahl); font-size:14px; padding:34px 8px; text-align:center; }
.leer b { display:block; font-family:var(--schrift-anzeige); color:var(--tinte); margin-bottom:6px; }

/* ---------- Karten ---------- */
.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:14px 15px; margin-bottom:9px; display:block; text-decoration:none; color:inherit; }
a.karte:hover { border-color:var(--stahl-weich); }
.karte-kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.karte-name { font-family:var(--schrift-anzeige); font-weight:600; font-size:14.5px; }
.karte-text { font-size:13.5px; color:var(--tinte-weich); line-height:1.5; margin-top:4px; }
.karte-meta { font-family:var(--schrift-mono); font-size:10px; color:var(--stahl); margin-top:8px; }

.kachelgitter { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.kachel { background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:22px;
  text-decoration:none; color:inherit; }
.kachel:hover { border-color:var(--akzent); }
.kachel svg { color:var(--akzent); }
.kachel-name { font-family:var(--schrift-anzeige); font-weight:600; font-size:14.5px; }
.kachel-zahl { font-family:var(--schrift-mono); font-size:10px; color:var(--stahl); margin-top:2px; }

/* ---------- Begriff der Woche ---------- */
.woche { background:var(--akzent-tinte); color:#F4F7F5; border-radius:var(--radius);
  padding:18px; text-decoration:none; display:block; }
:root[data-thema="dunkel"] .woche { background:var(--akzent-weich); color:var(--tinte); }
.woche-kw { font-family:var(--schrift-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#9FC4B2; margin-bottom:8px; }
:root[data-thema="dunkel"] .woche-kw { color:var(--akzent); }
.woche-begriff { font-family:var(--schrift-anzeige); font-weight:700; font-size:24px; margin:0 0 6px; }
.woche-text { font-size:14.5px; line-height:1.5; color:#DCE7E1; margin:0 0 12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
:root[data-thema="dunkel"] .woche-text { color:var(--tinte-weich); }
.woche-mehr { font-family:var(--schrift-anzeige); font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px; }

/* ---------- Notizseite ---------- */
.notiz-kopf { margin-bottom:6px; }
.notiz-typ { font-family:var(--schrift-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stahl); }
.notiz-titel { font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(24px,5vw,32px);
  margin:6px 0 4px; line-height:1.2; letter-spacing:-.01em; }
.notiz-fremd { font-family:var(--schrift-mono); font-size:12px; color:var(--stahl); margin-bottom:10px; }
.merkmale { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 4px; }
.merkmal { display:inline-flex; align-items:center; gap:5px; font-family:var(--schrift-anzeige);
  font-weight:600; font-size:11px; padding:5px 10px; border-radius:999px;
  background:var(--flaeche-2); color:var(--tinte-weich); border:1px solid var(--linie);
  text-decoration:none; }
a.merkmal:hover { border-color:var(--akzent); color:var(--akzent); }
.merkmal i { width:6px; height:6px; border-radius:50%; background:currentColor; display:block; }
.merkmal-schluessel { font-family:var(--schrift-mono); font-weight:400; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.06em; opacity:.7; }

.abschnitt { margin-top:20px; }
.abschnitt-titel { font-family:var(--schrift-anzeige); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--stahl); margin:0 0 8px; }
.abschnitt-koerper { font-size:16.5px; line-height:1.65; }
.abschnitt-koerper p { margin:0 0 12px; }
.abschnitt-koerper > :last-child { margin-bottom:0; }

.md-liste { margin:0 0 12px; padding-left:22px; }
.md-liste li { margin-bottom:5px; }
.md-verweis { color:var(--akzent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--akzent) 35%, transparent); }
.md-verweis:hover { border-bottom-color:var(--akzent); }
.md-verweis-offen { color:var(--stahl); border-bottom:1px dashed var(--stahl-weich); cursor:help; }
.md-zitat { margin:0 0 12px; padding:8px 14px; border-left:3px solid var(--akzent-weich);
  color:var(--tinte-weich); background:var(--flaeche-2); border-radius:0 8px 8px 0; }
.md-hinweis { margin:0 0 12px; padding:11px 14px; border-radius:10px; font-size:15px;
  border-left:3px solid var(--hinweisfarbe, var(--stahl)); background:var(--flaeche-2); }
.md-hinweis > :last-child { margin-bottom:0; }
.md-hinweis-titel { font-family:var(--schrift-anzeige); font-weight:600; font-size:13px;
  color:var(--hinweisfarbe, var(--stahl)); margin-bottom:4px; }
.md-hinweis-info { --hinweisfarbe:var(--florett); }
.md-hinweis-tipp { --hinweisfarbe:var(--akzent); }
.md-hinweis-warnung { --hinweisfarbe:var(--degen); }
.md-code { background:var(--flaeche-2); border:1px solid var(--linie); border-radius:10px;
  padding:12px; overflow-x:auto; font-family:var(--schrift-mono); font-size:13px; }
.md-inline-code { font-family:var(--schrift-mono); font-size:.88em; background:var(--flaeche-2);
  padding:1px 5px; border-radius:5px; }
.md-trenner { border:none; border-top:1px solid var(--linie); margin:16px 0; }
.md-tabelle-rahmen { overflow-x:auto; margin-bottom:12px; }
.md-tabelle { border-collapse:collapse; font-size:14px; width:100%; }
.md-tabelle th, .md-tabelle td { border:1px solid var(--linie); padding:7px 10px; text-align:left; }
.md-tabelle th { background:var(--flaeche-2); font-family:var(--schrift-anzeige); font-weight:600; }
.md-bild { margin:0 0 14px; }
.md-bild img { max-width:100%; height:auto; border-radius:10px; border:1px solid var(--linie);
  background:var(--flaeche); }
.md-ueberschrift { font-family:var(--schrift-anzeige); font-weight:600; font-size:17px;
  margin:16px 0 8px; }

.beziehung { display:flex; gap:7px; flex-wrap:wrap; }
.beziehung a { display:inline-flex; align-items:center; gap:6px; background:var(--akzent-weich);
  color:var(--akzent-tinte); font-family:var(--schrift-anzeige); font-size:12.5px; font-weight:600;
  padding:7px 11px; border-radius:10px; text-decoration:none; }
:root[data-thema="dunkel"] .beziehung a { color:var(--akzent); }
.beziehung a:hover { background:color-mix(in srgb, var(--akzent) 22%, var(--flaeche)); }
.beziehung .herkunft { font-family:var(--schrift-mono); font-size:9.5px; opacity:.65;
  font-weight:400; text-transform:none; }

.quellenkasten { display:flex; gap:10px; background:var(--messing-weich); border-radius:10px;
  padding:12px 13px; align-items:flex-start; margin-top:6px; }
.quellenkasten svg { color:var(--messing); flex-shrink:0; margin-top:1px; }
.quellenkasten-text { font-size:13.5px; line-height:1.5; color:var(--tinte-weich); }

.blaettern { display:flex; justify-content:space-between; gap:10px; margin-top:24px; }
.blaettern a { flex:1; min-width:0; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:12px; padding:10px 12px; text-decoration:none; color:inherit; }
.blaettern a:hover { border-color:var(--akzent); }
.blaettern .richtung { font-family:var(--schrift-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stahl); }
.blaettern .ziel { font-family:var(--schrift-anzeige); font-weight:600; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blaettern .rechts { text-align:right; }

/* ---------- Regelwerk ---------- */
.kapitel { border:1px solid var(--linie); border-radius:12px; background:var(--flaeche);
  margin-bottom:8px; overflow:hidden; }
.kapitel > summary { cursor:pointer; padding:12px 14px; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:10px; }
.kapitel > summary::-webkit-details-marker { display:none; }
.kapitel-oben { font-family:var(--schrift-mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stahl); }
.kapitel-unten { font-family:var(--schrift-anzeige); font-weight:600; font-size:14px; margin-top:2px; }
.kapitel-zahl { font-family:var(--schrift-mono); font-size:11px; color:var(--stahl); flex-shrink:0; }
.kapitel-inhalt { border-top:1px solid var(--linie); padding:4px 14px 8px; }
.artikelzeile { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--linie);
  text-decoration:none; color:inherit; align-items:baseline; }
.artikelzeile:last-child { border-bottom:none; }
.artikelzeile .nr { font-family:var(--schrift-mono); font-size:12px; font-weight:500;
  color:var(--akzent); flex-shrink:0; min-width:44px; }
.artikelzeile .txt { font-size:13.5px; color:var(--tinte-weich); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.sprungfeld { background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--radius);
  padding:13px 14px; margin-bottom:14px; }
.sprungfeld label { font-family:var(--schrift-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stahl); display:block; margin-bottom:7px; }
.sprungfeld .zeile { display:flex; gap:8px; }
.sprungfeld input { flex:1; min-width:0; border:1px solid var(--linie); border-radius:10px;
  padding:9px 12px; font-family:var(--schrift-mono); font-size:15px; background:var(--flaeche);
  color:var(--tinte); }
.sprungfeld button { background:var(--tinte); color:var(--bg); border:none; border-radius:10px;
  padding:9px 16px; font-family:var(--schrift-anzeige); font-weight:600; cursor:pointer; }
.sprung-hinweis { font-size:12.5px; color:var(--stahl); margin-top:7px; }
.sprung-hinweis a { color:var(--akzent); font-family:var(--schrift-mono); }

/* ---------- Fussleiste (mobil) / Seitenleiste (Desktop) ---------- */
/* Vier Reiter: Start · Wissen · Training · Merkzettel. Hinter "Wissen" haengt
   ein Klappmenue mit den einzelnen Bestaenden. Am Handy faehrt es ueber der
   Leiste hoch (langes Druecken, siehe ui/leiste.js); ab 900 px steht es
   dauerhaft als eingerueckte Untergruppe in der Seitenleiste. Dieselbe
   Auszeichnung, zwei Darstellungen — die Entscheidung faellt hier, nicht im
   JavaScript. */
.leiste { position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--flaeche);
  border-top:1px solid var(--linie); padding:7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
  z-index:40; }
.leiste .leisten-marke { display:none; }

.leisten-reiter { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--stahl-weich); padding:5px 0 0; position:relative;
  /* Ohne diese drei Zeilen legt der Browser beim langen Druecken seine eigene
     Linkvorschau darueber (iOS) oder faengt an, die Beschriftung zu markieren
     (Android) — beides genau in dem Moment, in dem unser Menue aufgehen soll. */
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.leisten-name { font-family:var(--schrift-anzeige); font-size:9.5px; font-weight:600; }
.leisten-reiter[aria-current="page"] { color:var(--akzent); }
.leisten-reiter[aria-current="page"]::before { content:""; position:absolute; top:-7px; left:50%;
  transform:translateX(-50%); border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--akzent); }
.leiste .plakette { position:absolute; top:0; right:50%; margin-right:-20px; background:var(--messing);
  color:#fff; font-family:var(--schrift-mono); font-size:9px; min-width:15px; height:15px;
  border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.leiste .plakette:empty { display:none; }

/* Der Reiter, hinter dem mehr steckt */
.leisten-gruppe { flex:1; display:flex; }
.leisten-gruppe > .leisten-reiter { flex:1; }
.klapppfeil { position:absolute; top:6px; left:50%; margin-left:11px; display:flex;
  color:var(--stahl-weich); transition:transform .16s ease-out; }
.leisten-reiter[aria-current="page"] .klapppfeil { color:var(--akzent); }
.leisten-reiter[aria-expanded="true"] .klapppfeil { transform:rotate(180deg); }

.klappmenue { position:fixed; left:8px; right:8px; bottom:calc(var(--leiste-hoehe) + 8px);
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:var(--schatten-hoch); padding:6px; z-index:60; display:none; }
.leiste[data-menue="auf"] .klappmenue { display:block; animation:menue-auf .16s ease-out; }
@keyframes menue-auf { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Der Schleier endet oberhalb der Leiste: wer das Menue offen hat und
   stattdessen auf "Training" will, soll nicht erst zumachen muessen. */
.leisten-schleier { position:fixed; left:0; right:0; top:0; bottom:var(--leiste-hoehe);
  background:var(--schleier); z-index:50; display:none; }
.leiste[data-menue="auf"] .leisten-schleier { display:block; }

.klapp-eintrag { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px;
  text-decoration:none; color:var(--tinte); }
.klapp-eintrag svg { color:var(--stahl); flex-shrink:0; }
.klapp-eintrag:hover { background:var(--flaeche-2); }
.klapp-name { font-family:var(--schrift-anzeige); font-weight:600; font-size:14.5px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.klapp-zahl { margin-left:auto; padding-left:8px; font-family:var(--schrift-mono); font-size:11px;
  color:var(--stahl); flex-shrink:0; }
.klapp-eintrag[aria-current="page"] { background:var(--akzent-weich); color:var(--akzent-tinte); }
.klapp-eintrag[aria-current="page"] svg { color:var(--akzent); }

@media (min-width:900px) {
  .leiste { position:sticky; top:0; left:auto; right:auto; bottom:auto; height:100vh; width:216px;
    flex-direction:column; align-items:stretch; border-top:none; border-right:1px solid var(--linie);
    padding:24px 14px; gap:3px; flex-shrink:0; overflow-y:auto; }
  .leiste .leisten-marke { display:block; font-family:var(--schrift-anzeige); font-weight:700;
    font-size:19px; padding:0 10px 24px; }
  .leiste .leisten-marke small { display:block; font-family:var(--schrift-mono); font-weight:400;
    font-size:9.5px; letter-spacing:.14em; color:var(--stahl); text-transform:uppercase; margin-top:3px; }
  .leisten-reiter { flex:0 0 auto; flex-direction:row; gap:11px; justify-content:flex-start;
    padding:10px 12px; border-radius:10px; color:var(--tinte-weich); }
  .leisten-name { font-size:13.5px; }
  .leisten-reiter:hover { background:var(--flaeche-2); }
  .leisten-reiter[aria-current="page"] { background:var(--tinte); color:var(--bg); }
  .leisten-reiter[aria-current="page"]::before { display:none; }
  .leiste .plakette { position:static; margin:0 0 0 auto; }

  /* Breit ist Platz: das Menue klappt nicht, es steht. */
  .leisten-gruppe { flex:0 0 auto; flex-direction:column; align-items:stretch; }
  .klapppfeil { display:none; }
  .leiste[data-menue] .leisten-schleier { display:none; }
  .leiste[data-menue] .klappmenue { position:static; display:block; background:none; border:none;
    box-shadow:none; border-left:1px solid var(--linie); border-radius:0;
    margin:3px 0 5px 22px; padding:0 0 0 6px; animation:none; }
  .klapp-eintrag { padding:7px 10px; gap:9px; color:var(--tinte-weich); }
  .klapp-name { font-size:12.5px; font-weight:500; }
  .klapp-zahl { font-size:10px; }

  :root { --leiste-hoehe:0px; }
}

/* ---------- Ausblick (Reiter "Training", solange M6 nicht steht) ---------- */
.vorschau-liste { display:grid; gap:8px; }
.vorschau { background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:12px 14px; }
.vorschau-kopf { display:flex; align-items:center; gap:8px; color:var(--stahl); }
.vorschau-titel { font-family:var(--schrift-anzeige); font-weight:600; font-size:14px;
  color:var(--tinte); }
.vorschau-text { margin:6px 0 0; font-size:14px; color:var(--tinte-weich); line-height:1.5; }

/* ---------- Zustaende ---------- */
.hinweisband { display:flex; align-items:center; gap:9px; background:var(--messing-weich);
  color:var(--tinte); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:14px; }
.hinweisband svg { color:var(--messing); flex-shrink:0; }
.hinweisband button { margin-left:auto; background:none; border:none; cursor:pointer;
  color:var(--messing); font-family:var(--schrift-anzeige); font-weight:600; font-size:12.5px; }

.ladeschirm { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:70vh; color:var(--stahl); text-align:center; padding:20px; }
.ladeschirm .marke { font-size:28px; }
.balken { width:180px; height:3px; background:var(--linie); border-radius:999px; overflow:hidden; }
.balken i { display:block; height:100%; width:40%; background:var(--akzent); border-radius:999px;
  animation:wandern 1.1s ease-in-out infinite; }
@keyframes wandern { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

.einstellzeile { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--linie); }
.einstellzeile .beschriftung { font-family:var(--schrift-anzeige); font-weight:600; font-size:14.5px; }
.einstellzeile .erklaerung { font-size:13px; color:var(--stahl); margin-top:2px; }
.wahlgruppe { display:flex; gap:4px; background:var(--flaeche-2); padding:4px; border-radius:11px;
  flex-shrink:0; }
.wahlgruppe button { border:none; background:none; cursor:pointer; padding:6px 12px; border-radius:8px;
  font-family:var(--schrift-anzeige); font-size:12.5px; font-weight:600; color:var(--tinte-weich); }
.wahlgruppe button[aria-pressed="true"] { background:var(--flaeche); color:var(--tinte);
  box-shadow:var(--schatten); }

.kennzahlen { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:8px;
  margin-top:10px; }
.kennzahl { background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; padding:11px 12px; }
.kennzahl b { display:block; font-family:var(--schrift-anzeige); font-size:20px; font-weight:700; }
.kennzahl span { font-family:var(--schrift-mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stahl); }