/* ==========================================================================
     GESTALTUNGEN
     Vier Welten, jede in einer hellen und einer dunklen Fassung. Ausgewaehlt wird
     ueber data-design am <html>, hell/dunkel wie gehabt ueber data-theme.

     Reihenfolge ist wichtig und darf nicht umgestellt werden:
       1. :root                                  = Papier hell (Grundfall)
       2. Papier dunkel (Systemwunsch + Schalter)
       3. je Gestaltung hell   -> steht NACH Papier dunkel, gewinnt bei gleicher Staerke
       4. je Gestaltung dunkel -> zwei Merkmale, gewinnt gegen 3
     ========================================================================== */

  /* ---------- 1 · PAPIER (Standard) ---------- */
  :root {
    color-scheme: light;
    /* Vorgegebene Palette: Basis #103028 / Paper #F0E8E0 / Clay #C4693A / Sage #B8D8C0.
       Die Flaechen dazwischen sind aus Paper abgeleitet, nicht aus Neutralgrau - ein
       kaltes Weiss neben einem warmen Papierton liest sich als Fehler, nicht als Kontrast. */
    /* Gewaehlte Richtung: helles Schreibpapier statt warmem Werkdruckpapier.
       --bg ist die ARBEITSFLAECHE (#F9F7F3); der Grund darunter entsteht daraus
       durch Abdunkeln mit Tinte (siehe --ton-kraft) und landet bei #EFEDE8.
       Deutlich weniger Gelbanteil als vorher - dadurch treten Gruen und Clay
       hervor, statt in einer beigen Flaeche unterzugehen. */
    --bg: #f9f7f3;
    /* Weiss. Die Karten SIND das Papier - eine gebrochen-weisse Karte auf einem
       ebenfalls warmen Blatt ergab eine einzige beige Masse ohne Stufen. */
    --surface: #ffffff;
    --surface-2: #f2f0eb;
    --surface-3: #e8e5de;
    --border: #e3e0d8;
    --border-strong: #bfbbb1;
    --ink: #1a2320;                /* fast schwarz mit Gruenstich - Familie der Basis */
    --ink-secondary: #4f5c57;
    --ink-muted: #6e7a75;
    --brand: #103028;              /* Basis */
    /* Gleich der Basis, damit die Leiste GENAU den vorgegebenen Ton traegt. Der
       Dunkler-Zustand gefuellter Knoepfe kommt deshalb aus einer Mischung (FARB-EBENE),
       nicht aus dieser Variable - sonst haette ein Knopf beim Zeigen keine Reaktion. */
    --brand-strong: #103028;
    /* Sage stand hier und landete damit auf den GROSSEN Flaechen: Tabellenkopf,
       Ticket-Nummer, Hero-Schein. Ein Mintgruen neben warmem Papier liest sich kuehl
       und klinisch - es passte nicht. Die Flaechen tragen jetzt einen tieferen
       Papierton; das Gruen bleibt als TINTE (--brand) erhalten, nicht als Flaeche.
       Sage ist nicht verschwunden, sondern hat einen Job bekommen, der zu ihr passt:
       sie ist unten der Grund fuer "fertig"/"bezahlt". */
    --brand-wash: #edebe4;         /* das ruhige Band: eine Spur tiefer als die Flaeche */
    --gold: #c4693a;               /* Clay */
    --auf-brand: #f0e8e0; --auf-gold: #fff;
    --gold-wash: #f6e6da;
    --series-badminton: #2f6b52;
    --series-tennis: #c4693a;
    --wissen: #3f5f8a;   /* Bereichsfarbe "Wissen" (Wiki, Konfigurator, Hilfe) */
    --status-good: #2b6448;
    --status-good-wash: #b8d8c0;   /* Sage - jetzt das Signal fuer "erledigt" */
    --status-warning: #a9761b;
    --status-warning-wash: #f6e7cc;
    --status-critical: #a8402a;
    --status-critical-wash: #f6e0d8;
    --focus: #103028;
    /* Der Grund soll #F0E8E0 sein und nicht eine graugruene Ableitung davon. Die
       Arbeitsflaeche traegt Paper deshalb unveraendert (Staerke 0), und der Grund
       darunter wird nur um eine Spur Clay abgesetzt - waermer, nicht entsaettigt.
       Mit der dunkelgruenen Basis als Toenung kam #CECCC4 heraus: gemessen ein
       fast neutrales Grau, in dem von Paper nichts mehr uebrig war. */
    /* Der Grund wird mit TINTE abgedunkelt, nicht mit einer Akzentfarbe eingefaerbt.
       Vorher stand hier Clay - und 12 % Clay in Paper verdoppeln den Rotanteil
       (Balance R-G von +8 auf +18): aus Papier wurde ein Hautton. Tinte dagegen
       nimmt nur Helligkeit weg und laesst die Balance bei +7/+8 - also genau das,
       was ein Blatt Papier im Schatten tut.
       Die KANTE darf warm bleiben, die ist klein genug dafuer - dafuer der eigene
       Regler --kante-farbe. */
    --ton-farbe: var(--ink);
    /* 4,5 % Tinte in #F9F7F3 ergibt #EFEDE8 - genau der gewaehlte Grundton. */
    --ton-kraft: 4.5%;
    --ton-blatt-kraft: 0%;
    /* Die Kante trug 18 % Clay - an jeder Karte, jeder Zeile, jedem Kopf. Das
       summierte sich zu einem orangen Rauschen ueber die ganze Flaeche. Clay gehoert
       dorthin, wo etwas HANDELT oder ZAEHLT (Knopf, Betraege, "STRING."), nicht an
       jede Kante. --border in --border gemischt ergibt --border: eine ruhige, warme
       Linie ohne Zusatzfarbe. */
    --kante-farbe: var(--border);
    /* Tiefen-Stufen: --shadow = ruhende Flaeche (Karten, Kacheln), --schatten-2 = angehoben
       (Hover, aktive Elemente), --schatten-3 = schwebend (Fenster, Toasts). --glanz ist eine
       hauchduenne helle Oberkante, die Flaechen koerperlich statt aufgeklebt wirken laesst -
       immer als gueltiger inset-Schatten (notfalls durchsichtig), damit
       "box-shadow: var(--shadow), var(--glanz)" nie eine ungueltige Regel ergibt. */
    /* Warmer Schattenton (Papier-Braun), nicht Neutralgrau: ein grauer Schatten auf
       warmem Papier sieht aus wie Schmutz, nicht wie Tiefe. */
    --shadow: 0 1px 2px rgba(38,36,30,.05), 0 4px 12px -3px rgba(38,36,30,.08), 0 14px 32px -10px rgba(38,36,30,.13);
    --schatten-2: 0 2px 5px rgba(38,36,30,.07), 0 10px 24px -6px rgba(38,36,30,.12), 0 26px 52px -14px rgba(38,36,30,.18);
    --schatten-3: 0 8px 18px -5px rgba(38,36,30,.13), 0 28px 58px -14px rgba(38,36,30,.24), 0 48px 92px -28px rgba(38,36,30,.24);
    --glanz: inset 0 1px 0 rgba(255,255,255,.72);
    --font-display: "Libre Franklin", system-ui, sans-serif;
    --font-body: "Libre Franklin", system-ui, sans-serif;
    /* Die Zeile hiess frueher "--font-mono: var(--font-mono)" - eine Selbstreferenz, die in
       CSS ungueltig ist. Die Variable war damit LEER, und alle rund 50 Stellen mit
       "font-family: var(--font-mono)" fielen still auf die Fliesstextschrift zurueck: der
       Kassenbuch-Charakter der Zahlen hat nie funktioniert, waehrend IBM Plex Mono in drei
       Staerken geladen und nie benutzt wurde. */
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Ueberschriften in einer Serifenschrift ueber einer Grotesk - das ist der Unterschied
       zwischen "sauberes Werkzeug" und "Werkstattbuch". Bewusst NUR bei Papier; die anderen
       drei Gestaltungen behalten ihre eigene Anmutung (siehe --font-titel weiter unten). */
    --font-titel: "Newsreader", Georgia, "Times New Roman", serif;
    --display-weight: 600;
    --display-spacing: -.022em;
    --titel-weight: 400;
    --titel-spacing: -.012em;
    --zahl-weight: 300;
    /* Vorher 3/4px - das war so knapp, dass Karten wie ausgeschnittene Rechtecke wirkten.
       Etwas weichere Ecken lassen dieselbe Flaeche gleich wertiger aussehen, ohne verspielt
       zu werden. --pill bleibt bewusst kantig: das ist die Handschrift von "Papier". */
    /* Groesser als zuvor (6/10). Kanten von 6px lassen eine Karte wie ein ausgeschnittenes
       Rechteck wirken; ein Abo-Produkt traegt weichere Ecken. --pill war 3px - damit war ein
       "Pill" kein Pill, sondern ein Kaestchen. Status-Abzeichen sind jetzt echte Pillen. */
    --radius: 10px;
    --radius-gross: 16px;
    --pill: 999px;
  }
  /* ---------- 2 · Papier dunkel ---------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #121917; --surface: #1a2320; --surface-2: #212c28; --surface-3: #2b3733;
      --border: #28342f; --border-strong: #41504a;
      --ink: #ece6dd; --ink-secondary: #a8b2ac; --ink-muted: #838d88;
      --brand: #8fcfae; --brand-strong: #0e241e; --brand-wash: #1c302a;
      --gold: #d98b5c; --gold-wash: #33231a; --auf-brand: #0c1a16; --auf-gold: #1e1208;
      --series-badminton: #8fcfae; --series-tennis: #d98b5c; --wissen: #9db8de;
      --status-good: #8fcfae; --status-good-wash: #1c302a;
      --status-warning: #d9b05c; --status-warning-wash: #33291a;
      --status-critical: #e08a72; --status-critical-wash: #3a221c;
      --focus: #8fcfae;
      --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px -2px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.5);
      --schatten-2: 0 2px 5px rgba(0,0,0,.5), 0 10px 22px -6px rgba(0,0,0,.5), 0 24px 48px -14px rgba(0,0,0,.6);
      --schatten-3: 0 8px 18px -6px rgba(0,0,0,.55), 0 28px 56px -12px rgba(0,0,0,.65), 0 48px 90px -28px rgba(0,0,0,.6);
      --glanz: inset 0 1px 0 rgba(255,255,255,.055);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121917; --surface: #1a2320; --surface-2: #212c28; --surface-3: #2b3733;
    --border: #28342f; --border-strong: #41504a;
    --ink: #ece6dd; --ink-secondary: #a8b2ac; --ink-muted: #838d88;
    --brand: #8fcfae; --brand-strong: #0e241e; --brand-wash: #1c302a;
    --gold: #d98b5c; --gold-wash: #33231a; --auf-brand: #0c1a16; --auf-gold: #1e1208;
    --series-badminton: #8fcfae; --series-tennis: #d98b5c; --wissen: #9db8de;
    --status-good: #8fcfae; --status-good-wash: #1c302a;
    --status-warning: #d9b05c; --status-warning-wash: #33291a;
    --status-critical: #e08a72; --status-critical-wash: #3a221c;
    --focus: #8fcfae;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px -2px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.5);
    --schatten-2: 0 2px 5px rgba(0,0,0,.5), 0 10px 22px -6px rgba(0,0,0,.5), 0 24px 48px -14px rgba(0,0,0,.6);
    --schatten-3: 0 8px 18px -6px rgba(0,0,0,.55), 0 28px 56px -12px rgba(0,0,0,.65), 0 48px 90px -28px rgba(0,0,0,.6);
    --glanz: inset 0 1px 0 rgba(255,255,255,.055);
  }

  /* ---------- 3 · WERKSTATT hell ---------- */
  :root[data-design="werkstatt"] {
    color-scheme: light;
    --bg: #e8e6e0; --surface: #f6f5f1; --surface-2: #dedbd3; --surface-3: #d2cec4;
    --border: #cbc7bd; --border-strong: #a8a294;
    --ink: #211f1b; --ink-secondary: #58544b; --ink-muted: #756f62;
    --brand: #8a5a08; --brand-strong: #221f18; --brand-wash: #f2e6cc;
    --gold: #8a5a08; --gold-wash: #f2e6cc; --auf-brand: #fff; --auf-gold: #fff;
    --series-badminton: #4a5c3a; --series-tennis: #a35a22;
    --status-good: #4a6b34; --status-good-wash: #e6eddc;
    --status-warning: #8a5a08; --status-warning-wash: #f5e9cf;
    --status-critical: #a8391a; --status-critical-wash: #f6e2da;
    --focus: #8a5a08;
    --shadow: 0 1px 2px rgba(33,31,27,.07), 0 3px 8px -2px rgba(33,31,27,.08), 0 10px 22px -8px rgba(33,31,27,.12);
    --schatten-2: 0 2px 4px rgba(33,31,27,.08), 0 8px 18px -4px rgba(33,31,27,.12), 0 20px 38px -12px rgba(33,31,27,.18);
    --schatten-3: 0 6px 14px -4px rgba(33,31,27,.14), 0 22px 46px -12px rgba(33,31,27,.24), 0 40px 78px -24px rgba(33,31,27,.24);
    --glanz: inset 0 1px 0 rgba(255,255,255,.6);
    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, sans-serif;
    /* Die Zeile hiess frueher "--font-mono: var(--font-mono)" - eine Selbstreferenz, die in
       CSS ungueltig ist. Die Variable war damit LEER, und alle rund 50 Stellen mit
       "font-family: var(--font-mono)" fielen still auf die Fliesstextschrift zurueck: der
       Kassenbuch-Charakter der Zahlen hat nie funktioniert, waehrend IBM Plex Mono in drei
       Staerken geladen und nie benutzt wurde. */
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --display-weight: 700; --display-spacing: -.012em; --zahl-weight: 600;
    /* Werkstatt bleibt kantiger als Papier - technischer Charakter. Die Pillen sind
       aber auch hier rund: ein Status-Abzeichen ist eine Pille, keine Gestaltungsfrage. */
    --radius: 7px; --radius-gross: 11px; --pill: 999px;
  }
  /* ---------- WERKSTATT dunkel ---------- */
  @media (prefers-color-scheme: dark) {
    :root[data-design="werkstatt"]:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #22211e; --surface: #2b2a26; --surface-2: #33322c; --surface-3: #3d3b34;
      --border: #3a3833; --border-strong: #54514a;
      --ink: #ece9e2; --ink-secondary: #b3ada1; --ink-muted: #979185;
      --brand: #f0a71c; --brand-strong: #191815; --brand-wash: #3a2f14;
      --gold: #f0a71c; --gold-wash: #3a2f14; --auf-brand: #10201c; --auf-gold: #241c08;
      --series-badminton: #8fc06a; --series-tennis: #e8974a;
      --status-good: #8fc06a; --status-good-wash: #24301b;
      --status-warning: #f0a71c; --status-warning-wash: #3a2f14;
      --status-critical: #e8734a; --status-critical-wash: #3a2318;
      --focus: #f0a71c;
      --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px -2px rgba(0,0,0,.42), 0 12px 26px -10px rgba(0,0,0,.5);
      --schatten-2: 0 2px 5px rgba(0,0,0,.5), 0 10px 20px -6px rgba(0,0,0,.5), 0 24px 46px -14px rgba(0,0,0,.6);
      --schatten-3: 0 8px 18px -6px rgba(0,0,0,.55), 0 28px 54px -12px rgba(0,0,0,.65), 0 48px 88px -28px rgba(0,0,0,.6);
      --glanz: inset 0 1px 0 rgba(255,255,255,.05);
    }
  }
  :root[data-design="werkstatt"][data-theme="dark"] {
    color-scheme: dark;
    --bg: #22211e; --surface: #2b2a26; --surface-2: #33322c; --surface-3: #3d3b34;
    --border: #3a3833; --border-strong: #54514a;
    --ink: #ece9e2; --ink-secondary: #b3ada1; --ink-muted: #979185;
    --brand: #f0a71c; --brand-strong: #191815; --brand-wash: #3a2f14;
    --gold: #f0a71c; --gold-wash: #3a2f14; --auf-brand: #10201c; --auf-gold: #241c08;
    --series-badminton: #8fc06a; --series-tennis: #e8974a;
    --status-good: #8fc06a; --status-good-wash: #24301b;
    --status-warning: #f0a71c; --status-warning-wash: #3a2f14;
    --status-critical: #e8734a; --status-critical-wash: #3a2318;
    --focus: #f0a71c;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px -2px rgba(0,0,0,.42), 0 12px 26px -10px rgba(0,0,0,.5);
    --schatten-2: 0 2px 5px rgba(0,0,0,.5), 0 10px 20px -6px rgba(0,0,0,.5), 0 24px 46px -14px rgba(0,0,0,.6);
    --schatten-3: 0 8px 18px -6px rgba(0,0,0,.55), 0 28px 54px -12px rgba(0,0,0,.65), 0 48px 88px -28px rgba(0,0,0,.6);
    --glanz: inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* ---------- 4 · PLATZ hell ---------- */
  :root[data-design="platz"] {
    color-scheme: light;
    --bg: #f6f1ec; --surface: #ffffff; --surface-2: #efe6dc; --surface-3: #e3d9cf;
    --border: #ddd0c3; --border-strong: #21201d;
    --ink: #21201d; --ink-secondary: #6b6259; --ink-muted: #7f756a;
    --brand: #16325c; --brand-strong: #101f3a; --brand-wash: #dee6f2;
    --gold: #c2603c; --gold-wash: #f7e0d7; --auf-brand: #fff; --auf-gold: #fff;
    --series-badminton: #16325c; --series-tennis: #c2603c;
    --status-good: #16325c; --status-good-wash: #dee6f2;
    --status-warning: #b8791f; --status-warning-wash: #f8ecd4;
    --status-critical: #b23a20; --status-critical-wash: #f7e0d7;
    --focus: #16325c;
    /* "Platz" ist bewusst flach/plakatig (harte Versatz-Kante statt Weichzeichner) - die Tiefe
       kommt hier ueber groesseren Versatz, nicht ueber Unschaerfe, sonst waere der Charakter weg.
       --glanz deshalb durchsichtig, aber gesetzt, damit die Kombi-Regeln gueltig bleiben. */
    --shadow: 0 2px 0 rgba(33,32,29,.16);
    --schatten-2: 0 4px 0 rgba(33,32,29,.2);
    --schatten-3: 0 6px 0 rgba(33,32,29,.22), 0 24px 48px -20px rgba(33,32,29,.35);
    --glanz: inset 0 1px 0 rgba(255,255,255,0);
    --font-display: "Archivo Black", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, sans-serif;
    /* Die Zeile hiess frueher "--font-mono: var(--font-mono)" - eine Selbstreferenz, die in
       CSS ungueltig ist. Die Variable war damit LEER, und alle rund 50 Stellen mit
       "font-family: var(--font-mono)" fielen still auf die Fliesstextschrift zurueck: der
       Kassenbuch-Charakter der Zahlen hat nie funktioniert, waehrend IBM Plex Mono in drei
       Staerken geladen und nie benutzt wurde. */
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --display-weight: 400; --display-spacing: -.03em; --zahl-weight: 700;
    --radius: 0px; --radius-gross: 0px; --pill: 999px;
  }
  /* ---------- PLATZ dunkel ---------- */
  @media (prefers-color-scheme: dark) {
    :root[data-design="platz"]:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #14161d; --surface: #1c2029; --surface-2: #242934; --surface-3: #2d323e;
      --border: #2f3541; --border-strong: #e8e3dc;
      --ink: #f0ece6; --ink-secondary: #b0aaa2; --ink-muted: #8d877f;
      --brand: #7ba3dd; --brand-strong: #101f3a; --brand-wash: #1d2a3f;
      --gold: #e08a5f; --gold-wash: #38231a; --auf-brand: #10201c; --auf-gold: #241c08;
      --series-badminton: #7ba3dd; --series-tennis: #e08a5f;
      --status-good: #7ba3dd; --status-good-wash: #1d2a3f;
      --status-warning: #d9a441; --status-warning-wash: #362a13;
      --status-critical: #e5705a; --status-critical-wash: #3a1f1b;
      --focus: #7ba3dd;
      --shadow: 0 2px 0 rgba(232,227,220,.18);
      --schatten-2: 0 4px 0 rgba(232,227,220,.22);
      --schatten-3: 0 6px 0 rgba(232,227,220,.24), 0 24px 48px -20px rgba(0,0,0,.6);
      --glanz: inset 0 1px 0 rgba(255,255,255,0);
    }
  }
  :root[data-design="platz"][data-theme="dark"] {
    color-scheme: dark;
    --bg: #14161d; --surface: #1c2029; --surface-2: #242934; --surface-3: #2d323e;
    --border: #2f3541; --border-strong: #e8e3dc;
    --ink: #f0ece6; --ink-secondary: #b0aaa2; --ink-muted: #8d877f;
    --brand: #7ba3dd; --brand-strong: #101f3a; --brand-wash: #1d2a3f;
    --gold: #e08a5f; --gold-wash: #38231a; --auf-brand: #10201c; --auf-gold: #241c08;
    --series-badminton: #7ba3dd; --series-tennis: #e08a5f;
    --status-good: #7ba3dd; --status-good-wash: #1d2a3f;
    --status-warning: #d9a441; --status-warning-wash: #362a13;
    --status-critical: #e5705a; --status-critical-wash: #3a1f1b;
    --focus: #7ba3dd;
    --shadow: 0 2px 0 rgba(232,227,220,.18);
    --schatten-2: 0 4px 0 rgba(232,227,220,.22);
    --schatten-3: 0 6px 0 rgba(232,227,220,.24), 0 24px 48px -20px rgba(0,0,0,.6);
    --glanz: inset 0 1px 0 rgba(255,255,255,0);
  }

  /* ---------- 5 · ABENDS hell ---------- */
  :root[data-design="abends"] {
    color-scheme: light;
    --bg: #eef1f4; --surface: #ffffff; --surface-2: #e6eaef; --surface-3: #dbe1e8;
    --border: #dce1e7; --border-strong: #b6bfc9;
    --ink: #171a20; --ink-secondary: #596069; --ink-muted: #6f7781;
    --brand: #10795a; --brand-strong: #0b5340; --brand-wash: #dff0e8;
    --gold: #9a7215; --gold-wash: #f5ecd6; --auf-brand: #fff; --auf-gold: #fff;
    --series-badminton: #10795a; --series-tennis: #9a7215;
    --status-good: #10795a; --status-good-wash: #dff0e8;
    --status-warning: #9a7215; --status-warning-wash: #f5ecd6;
    --status-critical: #b4453c; --status-critical-wash: #f8e6e4;
    --focus: #10795a;
    --shadow: 0 1px 2px rgba(23,26,32,.05), 0 4px 12px -2px rgba(23,26,32,.07), 0 14px 32px -10px rgba(23,26,32,.12);
    --schatten-2: 0 2px 6px rgba(23,26,32,.07), 0 10px 24px -6px rgba(23,26,32,.12), 0 26px 50px -14px rgba(23,26,32,.18);
    --schatten-3: 0 8px 20px -6px rgba(23,26,32,.14), 0 28px 60px -14px rgba(23,26,32,.24), 0 50px 96px -28px rgba(23,26,32,.24);
    --glanz: inset 0 1px 0 rgba(255,255,255,.8);
    --font-display: "Sora", system-ui, sans-serif;
    --font-body: "Sora", system-ui, sans-serif;
    /* Die Zeile hiess frueher "--font-mono: var(--font-mono)" - eine Selbstreferenz, die in
       CSS ungueltig ist. Die Variable war damit LEER, und alle rund 50 Stellen mit
       "font-family: var(--font-mono)" fielen still auf die Fliesstextschrift zurueck: der
       Kassenbuch-Charakter der Zahlen hat nie funktioniert, waehrend IBM Plex Mono in drei
       Staerken geladen und nie benutzt wurde. */
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --display-weight: 600; --display-spacing: -.03em; --zahl-weight: 500;
    --radius: 12px; --radius-gross: 18px; --pill: 999px;
  }
  /* ---------- ABENDS dunkel ---------- */
  @media (prefers-color-scheme: dark) {
    :root[data-design="abends"]:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #101319; --surface: #171b23; --surface-2: #1d222c; --surface-3: #252b36;
      --border: #232935; --border-strong: #3a4250;
      --ink: #e6eaf0; --ink-secondary: #a3abba; --ink-muted: #7d8593;
      --brand: #7fe0b0; --brand-strong: #12332a; --brand-wash: #16261f;
      --gold: #e0c07f; --gold-wash: #302713; --auf-brand: #10201c; --auf-gold: #241c08;
      --series-badminton: #7fe0b0; --series-tennis: #e0c07f;
      --status-good: #7fe0b0; --status-good-wash: #16261f;
      --status-warning: #e0c07f; --status-warning-wash: #302713;
      --status-critical: #f0a3a3; --status-critical-wash: #2a1d20;
      --focus: #7fe0b0;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.42), 0 16px 36px -12px rgba(0,0,0,.5);
      --schatten-2: 0 3px 8px rgba(0,0,0,.45), 0 12px 28px -6px rgba(0,0,0,.5), 0 28px 56px -16px rgba(0,0,0,.6);
      --schatten-3: 0 10px 24px -8px rgba(0,0,0,.55), 0 32px 64px -14px rgba(0,0,0,.65), 0 56px 100px -30px rgba(0,0,0,.6);
      --glanz: inset 0 1px 0 rgba(255,255,255,.06);
    }
  }
  :root[data-design="abends"][data-theme="dark"] {
    color-scheme: dark;
    --bg: #101319; --surface: #171b23; --surface-2: #1d222c; --surface-3: #252b36;
    --border: #232935; --border-strong: #3a4250;
    --ink: #e6eaf0; --ink-secondary: #a3abba; --ink-muted: #7d8593;
    --brand: #7fe0b0; --brand-strong: #12332a; --brand-wash: #16261f;
    --gold: #e0c07f; --gold-wash: #302713; --auf-brand: #10201c; --auf-gold: #241c08;
    --series-badminton: #7fe0b0; --series-tennis: #e0c07f;
    --status-good: #7fe0b0; --status-good-wash: #16261f;
    --status-warning: #e0c07f; --status-warning-wash: #302713;
    --status-critical: #f0a3a3; --status-critical-wash: #2a1d20;
    --focus: #7fe0b0;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.42), 0 16px 36px -12px rgba(0,0,0,.5);
    --schatten-2: 0 3px 8px rgba(0,0,0,.45), 0 12px 28px -6px rgba(0,0,0,.5), 0 28px 56px -16px rgba(0,0,0,.6);
    --schatten-3: 0 10px 24px -8px rgba(0,0,0,.55), 0 32px 64px -14px rgba(0,0,0,.65), 0 56px 100px -30px rgba(0,0,0,.6);
    --glanz: inset 0 1px 0 rgba(255,255,255,.06);
  }

  /* ==========================================================================
     ABGELEITETE WERTE - stehen NACH allen Gestaltungen, damit sie fuer jede gelten.
     Sie rechnen sich aus den jeweiligen Theme-Farben aus, statt sie zwoelfmal von Hand
     einzutragen: --rule ist die Haarlinie im Satz (heller als --border, fuer Zeilen
     innerhalb einer Flaeche), --rule-stark die Abschluss-/Summenlinie.
     ========================================================================== */
  :root {
    /* Erst der schlichte Rueckfall, dann die gemischte Fassung: kennt ein Browser color-mix
       nicht, verwirft er nur die zweite Zeile und die Linien sehen aus wie vorher - statt
       ganz zu verschwinden. */
    --rule: var(--border);
    --rule: color-mix(in srgb, var(--border) 62%, var(--surface));
    --rule-stark: var(--border-strong);
    --rule-stark: color-mix(in srgb, var(--border-strong) 55%, var(--surface));
    /* Getoente Papiertoene. Die Grundflaechen waren neutrales Grau und damit in
       jeder Gestaltung dieselben - die Farbe steckte nur in Leiste und Knoepfen.
       Jetzt traegt auch das Papier einen Hauch der Markenfarbe: --ton ist der
       Grund unter allem, --ton-blatt die Arbeitsflaeche darauf (heller, damit
       weisse Karten darauf wieder als Karten lesbar sind), --ton-kante die
       Kanten. Wieder erst der schlichte Rueckfall, dann die gemischte Fassung. */
    /* Staerke UND Farbe der Toenung stehen hier bewusst nur als Rueckfall in der
       Verwendung, nicht als eigene Deklaration. Nur so kann eine einzelne Gestaltung
       sie in ihrem EIGENEN Block setzen - dieser abgeleitete Block steht spaeter und
       wuerde eine Deklaration sonst wieder ueberschreiben.
       "Papier" nutzt genau das: dort ist der Grund der vorgegebene Papierton, mit
       Clay gewaermt statt mit der dunkelgruenen Basis entsaettigt. */
    --ton: var(--bg);
    --ton: color-mix(in srgb, var(--ton-farbe, var(--brand)) var(--ton-kraft, 15%), var(--bg));
    --ton-blatt: var(--bg);
    --ton-blatt: color-mix(in srgb, var(--ton-farbe, var(--brand)) var(--ton-blatt-kraft, 7%), var(--bg));
    --ton-kante: var(--border);
    --ton-kante: color-mix(in srgb, var(--kante-farbe, var(--brand)) 18%, var(--border));
  }
  /* Im Dunkeln ist --brand die HELLSTE Farbe im Satz - dieselbe Beimischung wie im
     Hellen wuerde den Grund aufhellen, bis er auf der Kartenfarbe liegt (gemessen:
     Kontrast 1,01, also wieder Flaeche auf Flaeche). Dort also deutlich sparsamer. */
  @media (prefers-color-scheme: dark) {
    /* Im Dunkeln wird GAR NICHT getoent - bewusst.
       Erster Versuch war --brand: die ist im Dunkeln die hellste Farbe im Satz und
       hob den Grund an, bis er HELLER war als die Karten darauf (gemessen: Grund
       #202D28 gegen Karte #1A2320, die Staffelung stand also auf dem Kopf).
       Zweiter Versuch war --brand-strong: das stimmt bei Papier, kippt aber bei
       "Abends", wo --brand-strong heller ist als der Grund - dort schrumpfte der
       Abstand Karte/Flaeche auf 1,02, also praktisch unsichtbar.
       Die Lehre: in dunklen Themes liegen Grund, Flaeche und Karte alle nah an
       Schwarz; jede Beimischung frisst einen Abstand auf, den es kaum gibt. Die
       Farbe kommt dort ohnehin von der Leiste, den Tabellenbaendern und den
       Akzenten - die sind im Dunkeln kraeftiger als im Hellen. */
    :root:not([data-theme="light"]) { --ton-kraft: 0%; --ton-blatt-kraft: 0%; }
  }
  :root[data-theme="dark"] { --ton-kraft: 0%; --ton-blatt-kraft: 0%; }

  /* Nur "Papier" bekommt die Serifen-Ueberschrift. Werkstatt/Platz/Abends behalten ihre
     eigene Anzeigeschrift - sonst waere die Gestaltungs-Auswahl sinnlos. */
  :root[data-design]:not([data-design="papier"]) {
    --font-titel: var(--font-display);
    --titel-weight: var(--display-weight);
    --titel-spacing: var(--display-spacing);
  }

    /* ---------- Raster und Schriftskala (intern) ----------
     Dieselbe Skala wie auf der Startseite, damit Anmeldung und Arbeitsflaeche
     nicht wie zwei Produkte wirken. Die Schriftgroessen liegen hier bewusst
     etwas enger beieinander: im Dashboard stehen viele Ebenen dicht nebeneinander,
     da traegt ein ruhiger Rhythmus mehr als grosse Spruenge. */
  :root {
    --raum-1: 4px;   --raum-2: 8px;   --raum-3: 12px;  --raum-4: 16px;  --raum-5: 24px;
    --raum-6: 32px;  --raum-7: 48px;  --raum-8: 64px;
    --t-mini:  11.5px;
    --t-klein: 13px;
    --t-basis: 14.5px;
    --t-gross: 16px;
    --t-h4:    17.5px;
    --t-h3:    20px;
    --t-h2:    clamp(22px, 2.2vw, 27px);
    --zeile-titel: 1.2;
    --zeile-text:  1.6;
    /* Etiketten ueber Feldern und Spalten: eine eigene, etwas groessere Stufe.
       10,5 px waren an der Grenze des Lesbaren, gerade in Grossbuchstaben. */
    --t-etikett: 11.5px;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  /* Ohne das hier scrollte die Seite dahinter munter mit, wenn man mit dem Mausrad ueber
     einem offenen Fenster war - wirkte kaputt/unprofessionell. */
  body.modal-offen { overflow: hidden; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .display {
    font-family: var(--font-titel);
    font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    text-wrap: balance;
    color: var(--ink);
  }
  /* Serifen tragen bei kleinen Groessen weniger gut - h4 und die kleinen Abschnitts-
     ueberschriften bleiben deshalb bewusst in der Grotesk. */
  h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--display-spacing); }
  .num, .mono, table td.num, table th.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  a { color: var(--brand); }
  button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* ============ SHELL ============ */
  .shell { display: flex; min-height: 100vh; }

  .rail {
    width: 232px;
    flex: none;
    background: var(--brand-strong);
    color: #eef5ee;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    /* dvh statt vh, wo verstanden: Safari auf iPad/iPhone rechnet "100vh" gegen die volle
       Seite, auch wenn die eigene Adressleiste/Symbolleiste gerade einen Teil davon
       ueberdeckt - der Fuss (Mein Profil/Einstellungen/Hilfe Center) ragte dadurch unten
       aus dem tatsaechlich sichtbaren Bereich. "dvh" kennt die wirklich sichtbare Hoehe;
       Browser, die es nicht verstehen, ignorieren die Zeile und bleiben bei 100vh. */
    height: 100dvh;
    /* Die Leiste liegt ueber dem Inhalt, nicht daneben - ohne diese Kante stossen zwei
       Flaechen einfach stumpf aneinander. Am Handy ueberschreibt die Schubladen-Regel das. */
    box-shadow: 1px 0 0 rgba(0,0,0,.10), 8px 0 28px -14px rgba(0,0,0,.35);
    z-index: 5;
    /* Faengt den weichen Schein und die Schwunglinien unten (.rail-glow) an der Kante ab -
       sonst wuerde der unscharfe Kreis ueber den Rand der Leiste hinausblaseln. */
    overflow: hidden;
  }
  /* Rein dekorative Tiefe fuer die sonst flache, einfarbige Leiste - derselbe Gedanke wie
     .lp-glow auf der Startseite (siehe index.html). Farbe: "Asche" wie der Aschenplatz im
     Tennis, nicht Grau (Nutzer-Klarstellung) - trifft sich mit --gold, das fuer die
     Gestaltung "Papier" ohnehin schon als Ziegel-/Sandplatzton definiert ist (siehe
     Kommentar "/* Clay */" bei der Token-Definition). Ueber --gold statt fest verdrahtet,
     damit jede Gestaltung automatisch ihren eigenen warmen Akzent zeigt statt ueberall
     denselben Papier-Ton. */
  /* Faengt erst UNTER Zeichen+Slogan an (.rail-brand ist gut 90px hoch) - sonst legt sich
     der Schein ueber die Marke, die selbst keine deckende Flaeche hat und ihn durchschimmern
     liesse (Nutzer-Feedback). */
  .rail-glow {
    position: absolute; top: 96px; left: 0; right: 0; bottom: 0;
    z-index: 0; pointer-events: none; overflow: hidden;
  }
  .rail-glow .schein {
    position: absolute; border-radius: 50%; filter: blur(46px);
    background: radial-gradient(circle at 50% 50%, var(--gold), transparent 70%);
  }
  .rail-glow .schein.eins { top: -20px; left: -80px; width: 240px; height: 240px; opacity: .28; }
  .rail-glow .schein.zwei { top: 320px; right: -90px; width: 200px; height: 200px; opacity: .16; }
  .rail-glow .schein.drei { bottom: -60px; left: -40px; width: 180px; height: 180px; opacity: .14; }
  .rail-glow svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .rail-brand, .rail-tabs, .rail-foot { position: relative; z-index: 1; }
  .rail-brand {
    padding: 22px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  /* Zeichen und Schriftzug nebeneinander. Der Schriftzug steht bewusst gesperrt und leicht -
     fett und eng wirkte neben dem feinen Monogramm wie aus zwei verschiedenen Haeusern. */
  .rail-brand .mark {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 15px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.05;
    color: #fff;
  }
  .rail-brand .mark svg {
    width: 30px; height: 30px; flex: none;
    background: var(--bg); border-radius: 8px; padding: 1px;
  }
  .rail-brand .sub {
    margin-top: 4px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b9d6c2;
  }
  /* Zweifarbig wie das Zeichen darueber (S terrakotta, C gruenlich-weiss) - derselbe helle
     Terrakotta-Ton wie im Monogramm, damit Slogan und Zeichen als ein Auftritt wirken. */
  .rail-brand .sub .sub-akzent { color: var(--gold); }
  /* min-height:0 statt eines festen Bodenwerts: ein Flex-Kind schrumpft sonst nicht unter
     seine INHALTSHOEHE, egal was "flex:1" sagt - genau das liess .rail-tabs bei vielen
     eingeschalteten Reitern und wenig Bildschirmhoehe (z.B. iPad quer) ueber die 100vh-Leiste
     hinauswachsen und den Fuss (Mein Profil/Einstellungen/Hilfe Center) nach unten aus dem
     Bild schieben, statt selbst zu scrollen. */
  .rail-tabs { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
  .rail-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #d7e8da;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 500;
  }
  .rail-tab .ico {
    width: 22px; height: 22px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 12px;
  }
  .rail-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
  /* Vorher eine reine Weissflaeche - wirkte technisch/neutral statt wie ein bewusster
     Markenauftritt. Jetzt der warme Goldton der Gestaltung (--gold/--auf-gold gibt es in
     jeder der vier Gestaltungen UND fuer Hell/Dunkel je eine passende Textfarbe dazu - siehe
     Token-Definitionen oben), damit die aktive Seite auch aus den Augenwinkeln klar auffaellt. */
  .rail-tab.active { background: var(--gold); color: var(--auf-gold); font-weight: 600; }
  .rail-tab.active .ico { background: rgba(0,0,0,.18); color: var(--auf-gold); }

  .rail-foot { padding: 14px 18px 18px; border-top: 1px solid rgba(255,255,255,.12); }
  .rail-foot button {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.22);
    background: transparent;
    color: #d7e8da;
    cursor: pointer;
    font-size: 12.5px;
    text-align: left;
  }
  .rail-foot button:hover { background: rgba(255,255,255,.1); color: #fff; }
  /* Hilfe und Einstellungen stehen gleichberechtigt unter dem Konto.
     Das Icon davor gibt ihnen dieselbe Anmutung wie den Reitern darüber. */
  .rail-foot button.mit-ico { display: flex; align-items: center; gap: 9px; }
  .rail-foot button.mit-ico .ico {
    width: 20px; height: 20px; flex: none;
    display: grid; place-items: center;
    border-radius: 6px; background: rgba(255,255,255,.12);
    font-size: 11.5px; line-height: 1;
  }
  .rail-foot button.mit-ico.active {
    background: #fff; color: var(--brand-strong); border-color: #fff; font-weight: 600;
  }
  .rail-foot button.mit-ico.active .ico { background: var(--brand-strong); color: #fff; }
  .rail-foot .theme-row { display: flex; gap: 6px; margin-top: 8px; }
  .rail-foot .theme-row button { flex: 1; min-width: 0; text-align: center; margin-bottom: 0; }
  .rail-foot .theme-row button.active { background: #fff; color: var(--brand-strong); border-color: #fff; }
  /* "Einstellungen" ist ein einzelnes, nicht umbrechbares Wort - bei zwei Knoepfen nebeneinander
     nahm es sich frueher den groessten Teil der Zeile und quetschte "Hilfe Center" haesslich in
     zwei Zeilen. Icon ueber statt neben dem Text (wie schon bei der mobilen Tableiste
     .ul-knopf) macht beide Knoepfe unabhaengig von der Wortlaenge gleich breit und gleich hoch. */
  .rail-foot .theme-row button.mit-ico {
    flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 11px;
  }
  .rail-foot .theme-row button.mit-ico .ico { width: 18px; height: 18px; font-size: 10px; }
  .settings-panel { margin-top: 4px; padding-top: 12px; margin-bottom: 8px; border-top: 1px dashed rgba(255,255,255,.2); max-height: 38vh; overflow-y: auto; }
  .settings-panel .settings-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #b9d6c2; margin: 0 0 6px; }
  .settings-panel .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; font-size: 13px; color: #d7e8da; }
  .settings-panel .toggle-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex: none; }
  .settings-panel .sep { height: 12px; }
  .csv-help { background: rgba(255,255,255,.06); border-radius: 8px; padding: 10px; margin-top: 6px; }
  .csv-help .csv-explain { font-size: 12px; line-height: 1.5; color: #d7e8da; margin: 8px 0; }
  .csv-help .csv-explain code { background: rgba(255,255,255,.12); padding: 1px 4px; border-radius: 4px; font-size: 11px; }

  /* ============ MENÜKNOPF ============ */
  .topbar-rechts { display: flex; align-items: center; gap: 10px; flex: none; }
  .burger {
    display: none;
    width: 40px; height: 40px; flex: none; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 9px;
    background: var(--surface); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  }
  .burger span {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--ink); transition: transform .2s ease, opacity .2s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .rail-backdrop {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(8,16,11,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .rail-backdrop.offen { opacity: 1; pointer-events: auto; }

  /* ============ HANDY ============ */
  /* Bis hier ist die Navigation eine feste 232px-Spalte links. Auf einem Telefon bliebe damit
     kaum Platz für den Inhalt - deshalb wird sie unter 820px zu einer Schublade, die über den
     Menüknopf oben rechts aufgeht. Der Inhalt bekommt damit die volle Breite. */
  @media (max-width: 820px) {
    .shell { flex-direction: column; }
    .burger { display: flex; }
    .rail {
      position: fixed; top: 0; right: 0; bottom: 0; left: auto;
      width: 82%; max-width: 300px; height: 100%;
      flex-direction: column;
      transform: translateX(100%); transition: transform .22s ease;
      box-shadow: -8px 0 26px rgba(0,0,0,.28);
      z-index: 70;
    }
    .rail.offen { transform: translateX(0); }
    .rail-brand { padding: 20px 18px 14px; }
    .rail-tabs { padding: 10px 10px; }
    .rail-tab { padding: 12px 12px; font-size: 15px; }

    .main { width: 100%; }
  }
  @media (max-width: 560px) {
    .topbar .tagline { display: none; }
    /* .lang-toggle button steht weiter unten, direkt hinter seiner Grundregel - hier oben
       hat es die spaetere Grundregel jedes Mal ueberschrieben. */
  }

  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topbar {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 20px 32px 14px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  }
  /* Foto-Hintergrund fuer die Kopfzeile - Nutzer-Wunsch: bewusst hier statt auf der
     Gruess-Karte, weil das dem Original-Vorbild naeher kommt (Foto hinter dem Seitentitel,
     die Karte darunter bleibt eine ruhige, foto-lose Flaeche). Diese Leiste steht auf JEDER
     Unterseite (Statistik, Kasse, Tennis, ...), nicht nur auf der Verwaltung-Startseite -
     das Foto ist also ueberall zu sehen, mit wechselndem Titel davor (Nutzer-Entscheidung).
     Derselbe Schleier-Kniff wie zuvor auf der Gruess-Karte, hier als eigener Layer VOR dem
     Fallback-Hintergrund, damit .topbar h1/.tagline (dunkle Schrift) ueberall lesbar bleiben.
     Nur Papier (siehe Rueckbau-Regel bei der Glas-Fassung weiter unten). */
  :root:not([data-design]) .topbar, :root[data-design="papier"] .topbar {
    /* Lesbarkeit: ein DUNKLER Verlauf von links (dort steht der Titel) nach rechts (dort ist
       das Foto frei) statt des frueheren hellen, milchigen Schleiers - das Foto bleibt kraeftig,
       nur hinter der Schrift wird es abgedunkelt. Auf JEDER Seite gleich (Nutzer-Feedback:
       "die Ueberschrift kann man auf keiner Seite mehr lesen"). */
    background:
      linear-gradient(90deg, rgba(8,24,19,.8) 0%, rgba(8,24,19,.52) 40%, rgba(8,24,19,.12) 72%, rgba(8,24,19,0) 100%),
      url("/images/hero-banner.jpg") center/cover no-repeat,
      var(--bg);
    /* Die Glas-Unschaerfe der Grundfassung ist mit einem Foto-Hintergrund sinnlos. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Ab 821px, alle Seiten AUSSER der Verwaltung-Startseite: das Foto der Kopfzeile laeuft
     UNTER ihr als weicher Auslauf nur links und rechts neben dem Inhalt weiter (Nutzer-Wunsch:
     wie auf der Verwaltung-Seite, aber ohne den scharfen Bildteil zu verkleinern). Damit
     Kopfzeile und Auslauf nahtlos ineinander uebergehen, benutzen BEIDE (hier und .foto-band
     bei .main-glow) dieselbe Bildgroesse und denselben Versatz, beide ab y=0 - die Kopfzeile ist
     also nur der obere Ausschnitt desselben Bildes. */
  @media (min-width: 821px) {
    :root:not([data-design]) body:not(.tab-start) .topbar, :root[data-design="papier"] body:not(.tab-start) .topbar {
      background:
        linear-gradient(90deg, rgba(8,24,19,.8) 0%, rgba(8,24,19,.52) 40%, rgba(8,24,19,.12) 72%, rgba(8,24,19,0) 100%),
        url("/images/hero-banner.jpg") 50% -118px / max(100%, 1700px) auto no-repeat,
        var(--bg);
    }
  }
  /* Nur Verwaltung-Startseite, nur ab 821px (siehe renderContent(): body.tab-start): die
     Kopfzeile klebt hier NICHT oben mit (Nutzer-Feedback: ein dauerhaft festsitzender fetter
     Rahmen beim Scrollen), sondern scrollt mit weg, und hat eine FESTE Hoehe statt einer aus
     Padding geschaetzten - dadurch ist der Ueberlapp der Gruess-Karte (.hero) berechenbar und
     kann Titel/Untertitel nicht mehr treffen. Der weiche Auslauf unten (mask) betrifft nur die
     Kopfzeile selbst, nie die Karte davor. Am Handy/Tablet bleibt sie kompakt und klebend (dort
     sitzt der Menueknopf drin). */
  @media (min-width: 821px) {
    :root:not([data-design]) body.tab-start .topbar, :root[data-design="papier"] body.tab-start .topbar {
      position: relative;
      box-sizing: border-box;
      min-height: 230px;
      box-shadow: none;
      -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    }
  }
  /* Ohne Schleier (Nutzer-Wunsch) braucht die Schrift eine andere Art von Kontrast-Hilfe:
     helle statt dunkler Schrift, mit einem dunklen Schlagschatten als Kontur. Der Trick
     funktioniert VERLAESSLICH ueber helle UND dunkle Bildbereiche hinweg (dunkle Schrift +
     Schatten haette auf den dunklen Ecken des Fotos trotzdem versagt - dunkel auf dunkel
     bleibt dunkel auf dunkel, egal wie viel Schatten man draufpackt). */
  :root:not([data-design]) .topbar h1, :root[data-design="papier"] .topbar h1,
  :root:not([data-design]) .topbar .tagline, :root[data-design="papier"] .topbar .tagline {
    color: #fdfaf5;
    text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 3px 16px rgba(0,0,0,.4);
  }
  .topbar-text { min-width: 0; }
  .topbar h1 { font-size: 28px; margin: 0; }
  .topbar .tagline { color: var(--ink-secondary); font-size: 13.5px; margin-top: 2px; }
  .lang-toggle { display: flex; flex: none; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
  .lang-toggle button {
    border: none; background: transparent; color: var(--ink-secondary); cursor: pointer;
    font-size: 12.5px; font-weight: 700; letter-spacing: .03em; padding: 7px 14px;
  }
  .lang-toggle button.active { background: var(--brand); color: var(--auf-brand); }
  /* Am schmalen Handy enger, damit der Schalter neben der Ueberschrift nicht drueckt.
     Muss HINTER der Grundregel stehen: gleicher Selektor, gleiche Staerke - die spaetere
     gewinnt. Stand frueher weiter oben und kam deshalb nie an. */
  @media (max-width: 560px) { .lang-toggle button { padding: 7px 10px; } }
  .lang-toggle button:not(.active):hover { background: var(--surface-2); color: var(--ink); }
  /* flex+column: bei kurzen Seiten (z.B. Feedback ohne viele Eintraege) soll die Fusszeile
     unten am Rand kleben, nicht mittig hinter dem letzten Absatz. .haupt-fuss bekommt dafuer
     unten margin-top:auto - schiebt sich damit immer ganz nach unten, egal wie viel (oder
     wenig) Seiteninhalt davor steht. Reicht der Inhalt nicht bis zum Bildschirmrand, bleibt
     die Fusszeile trotzdem am unteren Rand - reicht er drueber hinaus, wandert sie normal mit. */
  /* margin-left/-right:auto zentriert den Inhalt, sobald die max-width greift - ohne das
     klebte auf sehr breiten Bildschirmen alles links neben der Navi-Leiste, waehrend rechts
     nur Leerraum blieb (Nutzer-Feedback, betraf jede Seite, nicht nur die Wiki-Liste).
     WICHTIG: .main ist flex-direction:column, die Breite von .content ist also seine
     QUER-Achse. Ein Auto-Margin auf der Quer-Achse schaltet laut Flexbox-Spezifikation das
     normale align-items:stretch ab - ohne festes "width" faellt .content dann auf
     fit-content zurueck und schrumpft auf ~0 (echter Bug, hat auf normalen Bildschirmen die
     komplette Seite zerschossen). "width: 100%" gibt der Box wieder eine echte Breite, bevor
     max-width sie deckelt und die Auto-Margins nur den wirklich uebrigen Platz verteilen -
     das uebliche ".container{width:100%;max-width:…;margin:0 auto}"-Muster. */
  .content { padding: var(--raum-5) var(--raum-6) var(--raum-8); max-width: 2400px; width: 100%; margin-left: auto; margin-right: auto; flex: 1; display: flex; flex-direction: column; }
  /* Nutzer-Feedback: der erste Versuch (ein Farbverlauf auf .content selbst) war so gut wie
     unsichtbar - die Kennzahlen-Karten beginnen fast direkt nach der Gruess-Karte und
     ueberdecken die obere Ecke, bevor der Schein zur Geltung kommt. Jetzt bildschirmfest
     verankert (wie .rail-glow in der Seitenleiste), damit er in den Raendern DAUERHAFT
     sichtbar bleibt, egal wie lang die Seite ist oder wie weit gescrollt wurde - nicht an
     .content gebunden, sondern eine eigene, feste Ebene direkt davor im Markup (siehe
     <div class="main-glow"> vor #content). Nur Papier (dort gibt es das Foto, mit dem er
     zusammenspielt). Ab 820px abgeschaltet - dort wird die Seitenleiste zur Schublade,
     "links: 232px" (die feste Rail-Breite) ergaebe dann keinen Sinn mehr. */
  .main-glow { display: none; }
  :root:not([data-design]) .main-glow, :root[data-design="papier"] .main-glow {
    display: block;
    /* KEIN overflow:hidden mehr - das schnitt den weichen Blur-Rand genau an der Kante zur
       Karte hart ab ("abgeschnitten", Nutzer-Feedback), statt ihn auslaufen zu lassen. Ohne
       Begrenzung darf die Unschaerfe frei ausfransen; pointer-events:none verhindert trotzdem
       jede Beeintraechtigung der Bedienung darunter/daneben. */
    position: fixed; top: 0; right: 0; bottom: 0; left: 232px; z-index: 0; pointer-events: none;
  }
  /* top:20px statt am Bildoberrand - .main-glow ist bildschirmfest (scrollt nicht mit), die
     sticky Kopfzeile (~139px hoch, deckend) liegt aber IMMER bei y=0. Bei -100px lag der
     Schein fast vollstaendig dahinter versteckt (Nutzer-Feedback: "links und rechts von der
     Karte" war nichts mehr zu sehen) - jetzt beginnt er dort, wo die Gruess-Karte selbst
     sichtbar wird, statt hinter der Kopfzeile zu verschwinden. Deutlich groesser (560px statt
     360px) und weiter nach innen gerueckt (-60px statt -140px), damit der Schein wirklich
     HINTER der Karte liegt und an beiden Seiten sichtbar herausblutet, statt nur die
     aeusserste Ecke zu streifen (Nutzer-Wunsch: "soll hinter die Karte gehen komplett"). */
  /* Die Foto-Ebene und die hohe Deckkraft (0,4) sind wieder raus - zusammen legten sie einen
     grauen, verwaschenen Nebel ueber die ganze Flaeche (Nutzer-Feedback: "gesamte Laenge
     verblichen"). Nur noch der Gold-Verlauf, deutlich zurueckhaltender. */
  .main-glow .schein {
    position: absolute; top: 60px; width: 460px; height: 460px;
    border-radius: 50%; filter: blur(96px);
    background: radial-gradient(circle at 50% 50%, var(--gold), transparent 70%);
  }
  /* Foto-Auslauf unter der Kopfzeile: dasselbe Bild mit demselben Versatz wie die Kopfzeile
     (siehe dort), ab dem oberen Rand, nach unten weich ausgeblendet. Der Inhalts-Bogen
     (.content) liegt davor und deckt die Mitte ab - sichtbar bleibt nur der Streifen
     links/rechts daneben und die Luecke ueber dem Bogen. Nicht auf der Verwaltung-Seite: dort
     hat die Kopfzeile ihren eigenen Auslauf. */
  .main-glow .foto-band {
    position: absolute; top: 0; left: 0; right: 0; height: 250px;
    background:
      linear-gradient(90deg, rgba(8,24,19,.8) 0%, rgba(8,24,19,.52) 40%, rgba(8,24,19,.12) 72%, rgba(8,24,19,0) 100%),
      url("/images/hero-banner.jpg") 50% -118px / max(100%, 1700px) auto no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 95px, transparent 250px);
    mask-image: linear-gradient(to bottom, #000 95px, transparent 250px);
  }
  @media (min-width: 821px) { body.tab-start .main-glow .foto-band { display: none; } }
  .main-glow .schein.links { left: -60px; opacity: .22; }
  .main-glow .schein.rechts { right: -60px; opacity: .18; }
  /* Handy/Tablet: dieselbe Idee wie am Desktop - Kopfzeile scharf, das Foto laeuft darunter
     weich nur links/rechts neben den Karten weiter. Keine feste Seitenleiste hier, also
     left:0 statt 232px; die Gold-Flecken entfallen (dort war vorher nur grauer Nebel zu sehen -
     die alte "display:none"-Regel an dieser Stelle griff wegen zu niedriger Spezifitaet nie).
     Bildgroesse/Versatz fuer Kopfzeile und .foto-band identisch, damit es nahtlos bleibt. */
  @media (max-width: 820px) {
    :root:not([data-design]) .main-glow, :root[data-design="papier"] .main-glow { left: 0; }
    .main-glow .schein { display: none; }
    .main-glow .foto-band {
      height: 150px;
      background:
        linear-gradient(90deg, rgba(8,24,19,.8) 0%, rgba(8,24,19,.52) 40%, rgba(8,24,19,.12) 72%, rgba(8,24,19,0) 100%),
        url("/images/hero-banner.jpg") 60% -10px / max(100%, 760px) auto no-repeat;
      -webkit-mask-image: linear-gradient(to bottom, #000 80px, transparent 150px);
      mask-image: linear-gradient(to bottom, #000 80px, transparent 150px);
    }
    :root:not([data-design]) .topbar, :root[data-design="papier"] .topbar {
      background:
        linear-gradient(90deg, rgba(8,24,19,.8) 0%, rgba(8,24,19,.52) 40%, rgba(8,24,19,.12) 72%, rgba(8,24,19,0) 100%),
        url("/images/hero-banner.jpg") 60% -10px / max(100%, 760px) auto no-repeat,
        var(--bg);
    }
  }
  /* Impressum/Datenschutz muessen von jeder Seite aus leicht erreichbar sein, auch angemeldet
     (TMG Par. 5) - AGB/AVV NICHT (das sind Vertragsdokumente, keine Anbieterkennzeichnung),
     die stehen stattdessen bei Konto -> Passwort als "AGB/AVV lesen". Bewusst am Ende jeder
     Seite statt in der Navi-Leiste, damit es nicht wie ein weiterer Menüpunkt wirkt. */
  .haupt-fuss { display: flex; justify-content: center; gap: 20px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; }
  .haupt-fuss a { color: var(--ink-secondary); text-decoration: none; }
  .haupt-fuss a:hover { text-decoration: underline; color: var(--ink); }

  /* ACHTUNG: Diese Regeln muessen HINTER den Grundwerten stehen. Stehen sie davor,
     gewinnt der Grundwert und der Block ist stumm - genau das war hier lange der Fall. */
  @media (max-width: 820px) {
    .topbar { padding: 14px 16px 10px; }
    .topbar h1 { font-size: 22px; }
    .content { padding: 16px 16px 28px; }
    /* .section margin-bottom steht weiter unten hinter seiner Grundregel. */
  }
  @media (max-width: 560px) {
    .topbar { padding: 12px 12px 9px; }
    .content { padding: 12px 12px 24px; }
    /* Ein Knopf, der allein in einer Zeile steht, darf am Handy die ganze Breite haben -
       rechtsbuendig blieb links die halbe Zeile leer. */
    .zeile-rechts { justify-content: stretch !important; }
    .zeile-rechts > .btn { width: 100%; }
    /* .schnellzugriff steht weiter unten hinter seiner Grundregel. */
  }

  /* ---- Schwebe-Knopf für "Neue Bespannung" (nur Handy, siehe .unten-leiste oben) ---- */
  .schnell-fab-hinter, .schnell-fab-saeule { display: none; }
  @media (max-width: 820px) {
    /* Ganz oben auf dem Bildschirm ist mit dem Daumen schlecht zu erreichen - die Zeile
       weicht am Handy dem Schwebe-Knopf unten links, direkt über der Navigationsleiste. */
    .schnellzugriff.schnellzugriff-oben { display: none; }

    .schnell-fab-hinter {
      display: block; position: fixed; inset: 0; z-index: 55;
      background: rgba(8,16,11,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .schnell-fab-hinter.offen { opacity: 1; pointer-events: auto; }

    /* Knopf und Leiste sitzen auf demselben Fleck (gleiches left/bottom) und lösen sich ab,
       statt sich zu stapeln: der erste der beiden Knöpfe erscheint genau dort, wo eben noch
       der Schwebe-Knopf war, der zweite direkt daneben - nicht darüber. */
    .schnell-fab-saeule {
      display: block; position: fixed; left: 16px; z-index: 57;
      bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 12px);
      transition: transform .18s ease, opacity .18s ease;
    }
    /* Weicht nach unten aus, solange abwaerts gelesen wird (siehe fabBeimScrollenWegblenden). */
    .schnell-fab-saeule.ausgewichen {
      transform: translateY(96px); opacity: 0; pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .schnell-fab-saeule { transition: opacity .18s ease; }
      .schnell-fab-saeule.ausgewichen { transform: none; }
    }
    .schnell-fab {
      width: 50px; height: 50px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 0; background: var(--brand); color: var(--auf-brand);
      font-size: 26px; font-weight: 600; line-height: 1; cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,.3);
      transition: opacity .15s ease, transform .15s ease, background .18s ease;
    }
    .schnell-fab:hover { background: var(--brand-strong); }
    .schnell-fab.versteckt { opacity: 0; pointer-events: none; transform: scale(.7); }

    .schnell-fab-leiste {
      position: absolute; left: 0; bottom: 0;
      display: flex; flex-direction: row; align-items: stretch; gap: 8px;
      max-width: calc(100vw - 32px);
      opacity: 0; pointer-events: none; transform: scale(.94); transform-origin: left bottom;
      transition: opacity .15s ease, transform .15s ease;
    }
    .schnell-fab-leiste.offen { opacity: 1; pointer-events: auto; transform: scale(1); }
    .schnell-fab-leiste .btn {
      flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.25;
      padding: 11px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
    }
  }

  /* ============ MODAL ============ */
  /* Der leichte Weichzeichner hinter dem Fenster trennt Vorder- und Hintergrund deutlicher
     als eine reine Abdunklung - dadurch wirkt das Fenster davor und nicht darin. */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(10,18,13,.55);
    display: none; align-items: flex-start; justify-content: center;
    padding: 6vh 20px; z-index: 80; overflow-y: auto;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  .modal-overlay.show { display: flex; }
  .modal-box {
    background: var(--surface); color: var(--ink); border-radius: 14px;
    width: 100%; max-width: 720px; box-shadow: var(--schatten-3), var(--glanz);
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; flex: none;
  }
  .modal-box.wide { max-width: 860px; }
  /* Nur beim Durchklicken der Einstellungen: feste Höhe statt springender Größe je nach
     Seiteninhalt (Konto ist kurz, Warnungen mit vier Blöcken ist lang) - .modal-body füllt
     den Rest und scrollt selbst, wenn eine Seite doch mal länger ist. max-height oben bleibt
     als Sicherheitsnetz auf kleinen Bildschirmen bestehen (gewinnt bei Konflikt gegen height). */
  .modal-box.einstellungen-fest { height: 640px; }
  .modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--border); flex: none;
  }
  .modal-head h2 { margin: 0; font-size: 19px; }
  .modal-close {
    border: none; background: transparent; color: var(--ink-muted); font-size: 17px;
    cursor: pointer; padding: 4px 9px; border-radius: 8px; line-height: 1;
  }
  .modal-close:hover { background: var(--surface-2); color: var(--ink); }
  .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
  .modal-body h3 { font-size: 15.5px; margin: 18px 0 8px; }
  .modal-body h3:first-child { margin-top: 0; }
  .modal-body p { margin: 0 0 10px; line-height: 1.55; font-size: 13.5px; color: var(--ink-secondary); }
  .modal-back {
    border: none; background: transparent; color: var(--brand); cursor: pointer;
    font-size: 12.5px; font-weight: 600; padding: 0 0 14px; display: inline-flex; align-items: center; gap: 4px;
  }
  .modal-back:hover { text-decoration: underline; }
  .modal-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 10px 0 16px; font-size: 12.5px; }
  .modal-table th, .modal-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
  .modal-table th:nth-child(1), .modal-table td:nth-child(1) { width: 24%; }
  .modal-table th:nth-child(2), .modal-table td:nth-child(2) { width: 18%; }
  .modal-table th { background: var(--surface-2); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
  .modal-table td.req { color: var(--status-critical); font-weight: 600; white-space: nowrap; }
  .modal-table td.opt { color: var(--ink-muted); white-space: nowrap; }

  /* ---- settings modal content ---- */
  .modal-settings-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 18px 0 8px; }
  .modal-settings-label:first-child { margin-top: 0; }
  .modal-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--border); }
  .modal-toggle-row:last-of-type { border-bottom: none; }
  .modal-toggle-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; flex: none; }
  .modal-toggle-row input[type="number"] { width: 70px; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 8px; text-align: right; font-size: 13.5px; }
  .modal-toggle-row select { max-width: 55%; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 8px; font-size: 13.5px; }
  .modal-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .modal-btn {
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
    border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  }
  .modal-btn:hover { background: var(--surface-2); }
  .modal-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--auf-brand); }
  .modal-btn.primary:hover { background: var(--brand-strong); }
  /* ---- Auswahl der Gestaltung ----
     Vorher: 34px-Farbstreifen, 10px Innenabstand, 8px Abstand zwischen den Karten - wirkte
     dicht und eher wie eine technische Liste als eine bewusste Auswahl. Jetzt: groesserer
     Farbmuster-Chip mit eigener Tiefe (dasselbe --shadow/--glanz-Paar wie jede andere Karte
     der App, siehe Tiefen-System), mehr Luft, und ein Haken-Abzeichen am aktiven Chip statt
     nur einer duennen Rahmenfarbe - man soll die aktuelle Wahl auf den ersten Blick sehen,
     ohne dass sie die Farbflaeche selbst verdeckt. */
  .design-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 560px) { .design-liste { grid-template-columns: minmax(0, 1fr); } }
  .design-karte {
    display: flex; align-items: center; gap: 16px; text-align: left;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
    border-radius: var(--radius-gross); padding: 16px 18px; cursor: pointer;
    box-shadow: var(--shadow), var(--glanz);
    transition: border-color .15s ease, box-shadow .18s ease, transform .12s ease;
  }
  .design-karte:hover { border-color: var(--brand); box-shadow: var(--schatten-2), var(--glanz); transform: translateY(-1px); }
  .design-karte.active { border-color: var(--brand); background: var(--brand-wash); box-shadow: var(--schatten-2), var(--glanz); }
  .design-probe {
    position: relative; display: flex; flex: none; width: 50px; height: 50px; border-radius: 13px;
    overflow: hidden; border: 1px solid rgba(0,0,0,.16);
  }
  .design-probe i { display: block; flex: 1; }
  /* Feste Farben — sie zeigen die jeweilige Gestaltung, nicht die gerade aktive. */
  .design-probe-papier    i:nth-child(1){background:#fbfbfa} .design-probe-papier    i:nth-child(2){background:#16403a} .design-probe-papier    i:nth-child(3){background:#a8442c}
  .design-probe-werkstatt i:nth-child(1){background:#22211e} .design-probe-werkstatt i:nth-child(2){background:#f0a71c} .design-probe-werkstatt i:nth-child(3){background:#8fc06a}
  .design-probe-platz     i:nth-child(1){background:#16325c} .design-probe-platz     i:nth-child(2){background:#c2603c} .design-probe-platz     i:nth-child(3){background:#f6f1ec}
  .design-probe-abends    i:nth-child(1){background:#101319} .design-probe-abends    i:nth-child(2){background:#7fe0b0} .design-probe-abends    i:nth-child(3){background:#f0a3a3}
  /* Haken-Abzeichen ragt nur in die Ecke - der Farb-Chip bleibt vollstaendig sichtbar, anders
     als ein Haken quer ueber die ganze Flaeche es taete. */
  .design-karte.active .design-probe::after {
    content: "✓"; position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px;
    border-radius: 50%; background: var(--brand); color: var(--auf-brand); border: 2px solid var(--surface);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1;
  }
  .design-text { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
  .design-name { font-size: 15px; font-weight: 700; }
  .design-hinweis { font-size: 12px; color: var(--ink-muted); line-height: 1.4; }

  /* Hell/Dunkel/Automatisch - dieselbe Karten-Optik wie die Gestaltungs-Auswahl darüber
     (Rahmen, aktiv-Zustand, jetzt auch dieselbe Tiefe), statt wie zuvor drei schlichte
     Text-Knoepfe in einer anderen Bildsprache direkt darunter. */
  .theme-liste { display: flex; gap: 10px; }
  .theme-karte {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
    border-radius: var(--radius-gross); padding: 16px 10px; cursor: pointer; font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow), var(--glanz);
    transition: border-color .15s ease, box-shadow .18s ease, transform .12s ease;
  }
  .theme-karte:hover { border-color: var(--brand); box-shadow: var(--schatten-2), var(--glanz); transform: translateY(-1px); }
  .theme-karte.active { border-color: var(--brand); box-shadow: var(--schatten-2), var(--glanz); background: var(--brand-wash); }
  .theme-ico { font-size: 22px; }

  /* ---- Namensvorschläge ---- */
  /* Das Feld liegt in .field (flex-column) - deshalb bekommt der Elternteil position:relative,
     damit die Liste darunter schwebt statt die Formularzeile auseinanderzudrücken. */
  .field { position: relative; }
  .namensliste {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    margin-top: 3px; max-height: 240px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius); box-shadow: var(--shadow);
    display: flex; flex-direction: column;
  }
  .namensliste[hidden] { display: none; }
  .namensliste button {
    text-align: left; border: none; background: transparent; color: var(--ink);
    padding: 9px 12px; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .namensliste button:hover { background: var(--brand-wash); color: var(--brand); }

  /* ---- Schnellzugriff und Vorlagen ---- */
  .schnellzugriff { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  /* "+ Bespannung Badminton/Tennis" fielen bei schmalen Handys mangels Platz untereinander -
     erzwingt stattdessen gleich breite Knoepfe nebeneinander, der Text darf dafuer zweizeilig
     umbrechen statt abgeschnitten zu werden. Musste hinter die Grundregel wandern: die setzt
     flex-wrap wieder auf "wrap", stand spaeter und gewann - der Fix war also nie aktiv. */
  @media (max-width: 560px) {
    .schnellzugriff { flex-wrap: nowrap; }
    .schnellzugriff .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
  }
  .setup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .setup-chip {
    display: inline-flex; align-items: baseline; gap: 7px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
    border-radius: var(--pill); padding: 6px 12px; cursor: pointer;
    font-family: inherit; font-size: 13px; text-align: left; max-width: 100%;
  }
  .setup-chip:hover { border-color: var(--brand); background: var(--brand-wash); }
  .setup-chip .nm { font-weight: 700; white-space: nowrap; }
  .setup-chip .sl { color: var(--ink-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .setup-chip .kg { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
  .status-knopf { font-family: inherit; }

  .modal-theme-row { display: flex; gap: 6px; }
  .modal-theme-row button { flex: 1; }
  .modal-theme-row button.active { background: var(--brand); border-color: var(--brand); color: var(--auf-brand); }
  .modal-nav-row { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .modal-nav-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
    border-radius: 9px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left;
    box-shadow: var(--shadow), var(--glanz);
    transition: background .15s ease, border-color .15s ease, box-shadow .18s ease, transform .12s ease;
  }
  .modal-nav-btn:hover { background: var(--surface-2); border-color: var(--brand); box-shadow: var(--schatten-2), var(--glanz); transform: translateY(-1px); }
  .modal-nav-btn:active { transform: translateY(0); box-shadow: var(--shadow), var(--glanz); }
  /* .arrow traegt manchmal einen echten Wert (E-Mail-Adresse, Design+Theme-Name) statt nur
     des Pfeils - bei flex:none ohne Deckelung nahm sich ein langer Wert (z.B. die E-Mail auf
     der Konto-Karte) seine volle, ungebrochene Breite und drueckte .modal-nav-text auf 0px
     zusammen; der Titel/Hinweis-Text lief dann sichtbar UNTER dem Wert weiter statt daneben -
     kein Umbruch-Problem, sondern ein Breiten-Verteilungs-Problem zwischen den beiden
     Flex-Kindern. .arrow-wert traegt jetzt die Kuerzung, der Pfeil selbst bleibt immer sichtbar. */
  .modal-nav-btn .arrow {
    display: flex; align-items: center; gap: 3px; min-width: 0; max-width: 46%;
    color: var(--ink-muted); font-weight: 400; flex: none;
  }
  .modal-nav-btn .arrow-wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Icon-Kreis links im Navigationsknopf (nur Einstellungen-Übersicht) - .modal-nav-text hat
     flex:1 und schluckt dadurch jeden Rest-Platz, der sonst per justify-content:space-between
     verteilt würde. Die anderen, älteren modal-nav-btn-Verwender (Schläger-Auswahl u.a.) haben
     kein solches Element und bleiben deshalb unverändert bei ihrem bisherigen Layout. */
  .modal-nav-ico {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: var(--brand-wash); color: var(--brand);
  }
  .modal-nav-text { flex: 1; min-width: 0; }
  /* Untertitel im Navigationsknopf - erklaert, was hinter dem Punkt steckt. */
  .modal-nav-btn small {
    display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400;
    color: var(--ink-muted); letter-spacing: 0; text-transform: none; line-height: 1.35;
  }
  /* Groessere Fassung fuer die drei Hauptpunkte der Einstellungen-Wurzel. */
  .modal-nav-row.gross { gap: 12px; }
  .modal-nav-btn.gross { padding: 16px 16px; }
  .modal-nav-btn.gross .modal-nav-ico { width: 44px; height: 44px; font-size: 18px; }
  .modal-nav-titel { display: block; font-size: 15px; }
  .modal-sport-row { display: flex; gap: 6px; margin: 10px 0 14px; }
  .modal-sport-row button {
    flex: 1; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
    border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .modal-sport-row button.active { background: var(--brand); border-color: var(--brand); color: var(--auf-brand); }
  /* ---- Hilfeseite ---- */
  /* Bewusst OHNE max-width auf der Karte selbst - die durfte bis zu 78ch breit sein und liess
     auf einem grossen Bildschirm die halbe Seite leer. Nur Einleitung und Fusszeile (reiner
     Fliesstext) bleiben schmal genug zum Lesen; die Kapitel-Karten darunter (.help-sections)
     nutzen die volle Breite als mehrspaltiges Raster. */
  .help-karte { padding: 26px 28px; }
  /* Kategorie-Reiter statt einer langen Kapitelliste: Wer die Hilfe aufruft, will meist nur
     einen Bereich und nicht an elf anderen Kapiteln vorbeiscrollen. */
  .help-kats { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 26px; }
  .help-kat-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 6px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); font-family: inherit; cursor: pointer;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
  }
  .help-kat-pill:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
  .help-kat-pill.active { background: var(--brand); border-color: var(--brand); color: var(--auf-brand); }
  .help-kat-pill.active .ico { background: rgba(255,255,255,.25); color: var(--auf-brand); }
  /* Glyph in --brand, nicht --brand-strong: letzteres ist im Dunkelmodus fast derselbe Ton
     wie --brand-wash, das Zeichen wäre unsichtbar. */
  .help-kat-pill .ico, .help-section h3 .ico {
    width: 20px; height: 20px; flex: none;
    display: grid; place-items: center;
    border-radius: 6px; background: var(--brand-wash); color: var(--brand);
    font-size: 11.5px; font-weight: 700; line-height: 1;
  }
  /* Ein Raster aus Kapitel-Karten statt einer langen Liste mit Trennlinien - so wird die
     Breite eines grossen Bildschirms tatsaechlich genutzt. Faellt am Handy von selbst auf
     eine Spalte zusammen (siehe auto-fit), keine eigene Handy-Regel noetig. */
  .help-sections {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px; align-items: start;
  }
  /* Zwoelf Kapitel sind ein Buch, kein FAQ - also auch wie ein Buch gesetzt: keine grauen
     Kaesten mehr (die Hilfe-Karte drumherum ist schon eine Flaeche, das war Karte in Karte),
     sondern Kapitel, die durch eine Haarlinie und Weissraum getrennt sind, mit ruhigerem
     Zeilenabstand und begrenzter Satzbreite. */
  .help-section {
    scroll-margin-top: 90px;
    padding: 20px 0 0; border-top: 1px solid var(--rule);
  }
  .help-sections > .help-section:first-child { border-top: none; padding-top: 4px; }
  /* Schriftart, Gewicht und Laufweite kommen aus der globalen h3-Regel - so bleibt die
     Hilfeseite an die gewählte Gestaltung gebunden statt fest auf einer Schrift zu sitzen. */
  .help-section h3 {
    display: flex; align-items: center; gap: 9px; font-size: 20px;
    margin: 0 0 10px;
  }
  .help-section h3 .ico { width: 22px; height: 22px; font-size: 12px; }
  .help-lead { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-secondary); max-width: 62ch; }
  .help-section ul { margin: 12px 0 0; padding-left: 20px; max-width: 62ch; }
  .help-section li { font-size: 13.5px; line-height: 1.75; color: var(--ink-secondary); margin-bottom: 9px; }
  .help-section li:last-child { margin-bottom: 0; }
  .help-section li strong { color: var(--ink); font-weight: 600; }
  .help-fuss {
    margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
    max-width: 70ch; font-size: 13px; color: var(--ink-muted);
  }
  @media (max-width: 720px) {
    .help-karte { padding: 20px 18px; }
  }

  /* ============ CARDS / SECTIONS ============ */
  .section { margin-bottom: var(--raum-7); }
  /* Am Handy enger. Musste hierher wandern: oben im 820px-Block wurde es von dieser
     Grundregel ueberschrieben, also standen die Abschnitte auch am Handy 40 px auseinander. */
  @media (max-width: 820px) { .section { margin-bottom: 28px; } }
  /* Eigenständige Abschnittsüberschrift ohne die Zeile mit Zusatztext daneben.
     Muss hier stehen und nicht unter .section-head — dort wäre sie an einen Elternteil
     gebunden, den diese Überschriften gar nicht haben. */
  .section-title {
    font-family: var(--font-titel);
    font-weight: var(--titel-weight);
    font-size: 22px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
  }
  /* Abschluss-Haarlinie unter jeder Abschnittsueberschrift - der klassische Satzkniff, der
     eine Ueberschrift als Ueberschrift ausweist, ohne sie fetter oder groesser zu machen. */
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); flex-wrap: wrap;
  }
  .section-head h2 { font-size: 22px; margin: 0; }
  /* Rechte Seite einer Abschnittsueberschrift: Hinweis und/oder ein Sprung-Knopf. */
  .kopf-rechts { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .kopf-link {
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    background: none; border: none; color: var(--brand); padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  }
  .kopf-link:hover { border-bottom-color: var(--brand); }
  /* Nur fuer die drei Aktions-Knoepfe oben auf "Mein Profil" (Anzeige anpassen/Profil
     exportieren/Schon ausprobiert) - eigene, kompaktere Pillenform statt des einfachen
     Unterstrich-Links, damit auf den ersten Blick klar ist, dass das eigene Aktionen sind,
     ohne mehr Platz als vorher zu brauchen (Nutzer-Wunsch). Bewusst NICHT an .kopf-link
     angehaengt, das benutzen viele andere Abschnittskoepfe im Code unveraendert. */
  .profil-kopf-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
  .profil-kopf-knopf {
    display: inline-flex; align-items: center; gap: 5px;
    font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-secondary);
    padding: 5px 10px; border-radius: 999px;
  }
  .profil-kopf-knopf svg { flex: none; }
  .profil-kopf-knopf:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
  /* Am Handy zaehlt der Sprung mehr als der Erklaertext - dort ist der Weg nach unten lang. */
  @media (max-width: 720px) { .nur-breit { display: none; } }
  /* Wie bei .note: kleiner Erklaertext braucht --ink-secondary, sonst 2,8:1. */
  .section-head .hint { font-size: 12.5px; color: var(--ink-secondary); }
  /* Nur fuer "In Arbeit"/"Offene Posten" auf der Verwaltung-Seite - dort stehen die
     Ueberschriften jetzt direkt neben den zurueckhaltenderen KPI-Kacheln, eine volle
     20px-Ueberschrift wirkte dort zu wuchtig. */
  .section-head.klein h2 { font-size: 15px; font-weight: 600; }
  /* Dieselben runden Icon-Abzeichen wie bei den Kennzahlen-Kacheln (.kpi-grid-dash .kpi-ico),
     jetzt auch vor "In Arbeit"/"Offene Posten" - zieht die Bildsprache konsequent weiter,
     statt dass sie nur auf die Kachelreihe beschraenkt bleibt (Nutzer-Wunsch). Eigene,
     etwas kleinere Fassung fuer den Ueberschriften-Kontext statt der 26px-Kachel-Groesse. */
  .verw-kopf-akzent h2 { display: flex; align-items: center; gap: 10px; }
  /* Alle drei Abschnitte der Verwaltung (In Arbeit, Offene Posten, Im Bestand) gleich gross -
     vorher waren die zwei wichtigsten winzig (15px) und "Im Bestand" gross (22px). */
  .section-head.verw-kopf-akzent h2 { font-size: 20px; font-weight: var(--titel-weight); }
  .verw-kopf-akzent .kpi-ico {
    width: 28px; height: 28px; flex: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-wash); color: var(--brand);
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 13px;
  }
  /* Bestandskarten ruhiger: weisse Karte mit farbigem Streifen links und Balken statt komplett
     rot/gelb gefuellter Flaeche - dieselbe Aussage, ohne dass ein Hinweis die ganze Seite anschreit. */
  .vorrat-gitter .vr.warnung, .vorrat-gitter .vr.kritisch { background: var(--surface); }
  .vorrat-gitter .vr.warnung .vr-bar, .vorrat-gitter .vr.kritisch .vr-bar { background: var(--surface-3); }
  /* Offene Posten: kompaktere Zeilen und eine besser lesbare "Bezahlt?"-Beschriftung. */
  .verw-doppel .table-wrap tbody td { padding-top: 10px; padding-bottom: 10px; }
  .verw-doppel .op-bezahlt-beschriftung { font-size: 12px; font-weight: 600; color: var(--brand); }
  .verw-kopf-akzent .kpi-ico.kpi-ico-gold { background: var(--gold-wash); color: var(--gold); }
  /* Nutzer-Feedback: leerer "In Arbeit"-Zustand (Abzeichen+Titel+Untertext+Kennzahlen)
     wirkte neben dem duennen leeren "Offene Posten" (nur eine Zeile) schief - eine grosse,
     fast leere Box neben einer winzigen. Fix: beide Spalten strecken sich auf gleiche
     Hoehe, der jeweilige Karten-Inhalt wird darin vertikal zentriert statt oben zu kleben.
     Betrifft nur direkte .card-Kinder (= die beiden Leerzustaende); Ticket-Raster und
     Tabelle bleiben natuerlich fliessend. */
  .verw-doppel { display: flex; gap: 22px; flex-wrap: wrap; align-items: stretch; }
  .verw-doppel-teil { flex: 1 1 340px; min-width: 280px; display: flex; flex-direction: column; }
  .verw-doppel-teil > .card,
  .verw-doppel-teil > .arbeit-tickets,
  .verw-doppel-teil > .table-wrap { flex: 1; }
  .verw-doppel-teil > .card { display: flex; flex-direction: column; justify-content: center; }

  /* "In Arbeit"-Karte: Leerzustand mit ruhigem Haken-Abzeichen statt nacktem Text, dazu
     zwei kleine Kennzahlen darunter - wirkte vorher (nur "Nichts offen") leer/tot, obwohl
     ein leerer Bestand eigentlich eine gute Nachricht ist. */
  .arbeit-leer { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 20px 28px; }
  .arbeit-abzeichen {
    width: 40px; height: 40px; border-radius: 50%; background: var(--status-good-wash);
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px; flex: none;
  }
  .arbeit-abzeichen svg { width: 18px; height: 18px; stroke: var(--status-good); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .arbeit-leer .titel { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
  .arbeit-leer .neben { font-size: 12px; color: var(--ink-secondary); max-width: 28ch; }
  .arbeit-leer .kennzahlen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); width: 100%; display: flex; justify-content: center; gap: 20px; }
  .arbeit-leer .kennzahlen div { text-align: center; }
  .arbeit-leer .kz-zahl { font-size: 15px; font-weight: 600; }
  .arbeit-leer .kz-bez { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }

  /* Wenn "In Arbeit" UND "Offene Posten" gleichzeitig leer sind, ersetzt diese eine
     Zeile die ganze Zweispaltigkeit - sonst vergleicht man zwei leere Kacheln miteinander,
     die es beide nicht braucht. Sobald eine Seite wieder Inhalt hat, greift wieder die
     normale .verw-doppel-Ansicht oben. */
  .beides-leer { display: flex; align-items: center; gap: 16px; padding: 18px 22px; flex-wrap: wrap; }
  .beides-leer-abzeichen {
    width: 42px; height: 42px; border-radius: 50%; background: var(--status-good-wash);
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .beides-leer-abzeichen svg { width: 19px; height: 19px; stroke: var(--status-good); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .beides-leer-mitte { flex: 1; min-width: 180px; }
  .beides-leer-mitte .titel { font-size: 14px; font-weight: 600; }
  .beides-leer-mitte .neben { font-size: 12.5px; color: var(--ink-secondary); margin-top: 2px; }
  .beides-leer-kennzahlen { display: flex; gap: 22px; flex: none; }
  .beides-leer-kennzahlen div { text-align: center; }
  .beides-leer-kz-zahl { font-size: 16px; font-weight: 600; }
  .beides-leer-kz-bez { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
  /* Die kleine Bilanz unter "Alles erledigt" - vier ruhige Spalten, durch Haarlinien getrennt,
     damit der erledigte Zustand nach Abschluss aussieht und nicht nach Leere. */
  .erledigt-bilanz {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    border-top: 1px solid var(--rule); margin: 0 22px; padding: 14px 0 4px;
  }
  .erledigt-bilanz > div { text-align: center; padding: 4px 10px; border-left: 1px solid var(--rule); }
  .erledigt-bilanz > div:first-child { border-left: none; }
  /* Bei zwei Spalten faengt das dritte Feld eine neue Reihe an - ohne diese Regel behielte es
     seinen linken Strich und haenge frei in der Luft. */
  @media (max-width: 560px) {
    .erledigt-bilanz { grid-template-columns: repeat(2, 1fr); }
    .erledigt-bilanz > div:nth-child(odd) { border-left: none; }
    .erledigt-bilanz > div:nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 8px; }
  }
  .eb-zahl { display: block; font-size: 20px; font-weight: var(--zahl-weight); color: var(--brand); letter-spacing: -.02em; }
  .eb-bez { display: block; font-size: 9.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; }

  /* Werkstattzeile statt Werkstattkarten - jeder Schlaeger eine eigene volle Zeile mit
     Laufnummer, wie ein Abholschein. Ersetzt sowohl die fruehere Initial-Kreis-Zeile
     (Nutzer-Feedback: wirkte wie eine langweilige Liste) ALS AUCH das kurz darauf gefolgte
     Kachelraster (Nutzer-Feedback: bei vielen offenen Schlaegern blieb die letzte Reihe oft
     nur halb voll - eine einzelne Karte hing dann sichtbar allein in der Flaeche). Das hier
     ist genau die Bauform, die vorher NUR als Sonderfall fuer ein einzelnes Ticket galt
     (siehe die fruehere :only-child-Regel) - jetzt als Normalfall fuer jede Anzahl: waechst
     nur noch nach unten, kein Umbruch, keine Luecke. */
  /* Unsichtbarer Platzhalter in genau der Hoehe von "thead th" (siehe dort) - "Offene
     Posten" hat eine Spaltenkopfzeile, "In Arbeit" nicht, darum stand Zeile 1 links sonst
     ueber der Kopfzeile rechts statt neben deren erster Datenzeile. Dieselben Eigenschaften
     wie thead th (Polsterung, Schriftgroesse, Randlinie) statt einer festen Pixelzahl, damit
     das automatisch mitgeht, falls sich die Kopfzeile der Tabelle je aendert. */
  .arbeit-kopf-spacer {
    padding: var(--raum-3) var(--raum-4); font-size: var(--t-etikett); line-height: 1.3;
    border-bottom: 1px solid var(--rule-stark); visibility: hidden;
    /* thead th steht "position:sticky" - das schiebt die erste tbody-Zeile im Zusammenspiel
       mit border-collapse messbar weiter runter, als die eigene Hoehe von thead th allein
       vermuten liesse (im Test 8px). Kein Rechenfehler hier, sondern ein Ausgleich fuer
       dieses Zusammenspiel - per Hand nachgemessen, nicht hergeleitet. */
    margin-bottom: 8px;
  }
  .arbeit-tickets { display: flex; flex-direction: column; gap: var(--raum-2); }
  .arbeit-ticket {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-gross);
    box-shadow: var(--shadow), var(--glanz); display: flex; overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  /* Bindet die Goldfarbe auch in eine taegliche Bedienhandlung ein, nicht nur in Deko -
     eigene, neue Regel statt der bestehenden gruenen tbody-Hover-Farbe (die bleibt ueberall
     sonst unveraendert, das waere ein zu grosser, unnoetiger Eingriff gewesen). */
  .arbeit-ticket:hover { border-color: var(--gold); box-shadow: var(--schatten-2), var(--glanz); }
  @media (prefers-reduced-motion: reduce) { .arbeit-ticket { transition: none; } }
  .arbeit-ticket-nr {
    flex: none; width: 46px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 16px;
    background: var(--brand-wash); color: var(--brand); border-right: 1px dashed var(--border-strong);
  }
  /* min-height passt sich der Offene-Posten-Zeile daneben an (siehe tbody td, var(--raum-3)
     Polsterung plus .op-bezahlt-block) - beide Listen sind gleich hoch aufgeteilt, damit
     Zeile 1 neben Zeile 1 steht, Zeile 2 neben Zeile 2 usw., statt schief auseinanderzulaufen.
     minmax(64px, 1fr) statt minmax(0, 1fr): ohne Untergrenze nahm sich die "auto"-Fuss-Spalte
     (Status-Regler + "Nachricht kopieren") je nach Inhalt unterschiedlich viel Platz, und die
     Namensspalte wurde bei manchen Zeilen so schmal, dass der Name auf zwei Zeilen umbrach -
     einzelne Tickets wurden dadurch hoeher als andere, obendrein uneinheitlich zur Nachbarliste.
     white-space:nowrap+ellipsis auf dem Namen selbst (wie beim Schlaeger schon) verhindert das
     jetzt zuverlaessig, auch bei sehr schmaler Spalte. */
  .arbeit-ticket-inhalt {
    flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(64px, 1fr) auto;
    align-items: center; gap: 2px var(--raum-4); padding: var(--raum-3) var(--raum-4);
    min-height: 78px;
  }
  .arbeit-ticket-name { grid-column: 1; font-size: var(--t-h4); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arbeit-ticket-neben { grid-column: 1; font-size: var(--t-klein); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arbeit-ticket-fuss { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
  /* Stufen-Band je Auftrag (siehe statusStepperHtml): alle drei Stufen nebeneinander. Aktuell =
     farbige Pille (amber angenommen, gruen fertig), naechste = der EINE gefuellte gruene Knopf
     mit Pfeil, vorherige = gestrichelt und unauffaellig, uebrige blass. */
  .status-stepper { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  .status-stepper .st {
    font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 4px 11px; border-radius: 999px; border: 1px solid transparent;
  }
  .status-stepper .st b { font-size: 14px; line-height: 1; font-weight: 700; }
  /* Nutzer-Feedback: "Weiter" war als dunkler Vollknopf so laut, dass er wie der aktuelle Stand
     aussah (der dagegen blass). Jetzt umgekehrt: der AKTUELLE Stand ist die einzige gefuellte
     Farbflaeche (mit Haken), "Weiter" nur ein Umriss mit Pfeil, "Zurueck" nur Text. */
  .status-stepper .st.aktuell { color: #fff; padding-left: 9px; }
  .status-stepper .st.aktuell::before { content: "\2713"; font-weight: 800; }
  .status-stepper .st.aktuell.angenommen { background: var(--status-warning); }
  .status-stepper .st.aktuell.fertig { background: var(--status-good); }
  .status-stepper .st.aktuell.abgeholt { background: var(--ink-secondary); }
  .status-stepper .st.offen { display: none; }
  .status-stepper .st.weiter { cursor: pointer; background: none; border: 1.5px solid var(--brand); color: var(--brand); }
  .status-stepper .st.weiter:hover { background: var(--brand); color: var(--auf-brand); }
  .status-stepper .st.zurueck { cursor: pointer; background: none; border-color: transparent; color: var(--ink-muted); padding-left: 4px; padding-right: 4px; order: -1; }
  .status-stepper .st.zurueck:hover { color: var(--ink); text-decoration: underline; }
  /* Der Stand steht auch am Auftrag selbst: farbiger Streifen links und getoente Nummer -
     schon beim Ueberfliegen der Liste sichtbar, welche Schlaeger fertig sind. */
  .arbeit-ticket { border-radius: 18px; }
  .arbeit-ticket.st-angenommen { box-shadow: inset 5px 0 0 var(--status-warning), var(--shadow), var(--glanz); }
  .arbeit-ticket.st-fertig { box-shadow: inset 5px 0 0 var(--status-good), var(--shadow), var(--glanz); }
  .arbeit-ticket.st-angenommen:hover { box-shadow: inset 5px 0 0 var(--status-warning), var(--schatten-2), var(--glanz); }
  .arbeit-ticket.st-fertig:hover { box-shadow: inset 5px 0 0 var(--status-good), var(--schatten-2), var(--glanz); }
  .arbeit-ticket.st-angenommen .arbeit-ticket-nr { background: var(--status-warning-wash); color: var(--status-warning); }
  .arbeit-ticket.st-fertig .arbeit-ticket-nr { background: var(--status-good-wash); color: var(--status-good); }
  /* Schiedsrichter-Tabelle (13 Spalten, nur ueber 1500px Fensterbreite, darunter Karten - siehe
     orsAlsKarten()): nie seitlich scrollen. Zellen duerfen umbrechen, engere Abstaende, kein
     Scrollbehaelter. #content davor, weil die allgemeinen Tabellen-Regeln ueber #content
     laufen und sonst gewinnen. */
  #content .table-wrap.ors-wrap { overflow-x: visible; }
  #content .ors-tabelle { width: 100%; }
  /* Erste Fassung liess ALLE Zellen umbrechen (overflow-wrap:anywhere) - dadurch brachen Datum,
     Betraege und Ueberschriften mitten im Wort (Nutzer-Feedback: die muessen einzeilig sein).
     Jetzt: alles einzeilig, nur die drei Textspalten (Veranstaltung, Heim, Gast) duerfen
     umbrechen und nehmen den uebrigen Platz. Der Status steht gestapelt (Stempel oben,
     "bezahlt am ..." darunter) und spart so die Breite, die Betraege und Daten brauchen. */
  #content .ors-tabelle th, #content .ors-tabelle td { white-space: nowrap; padding-left: 6px; padding-right: 6px; font-size: 13px; }
  /* "Honorar (o. Fahrt)" ist der breiteste Kopf der Tabelle - in zwei Zeilen spart er ca. 80px. */
  #content .ors-tabelle th.ors-th-honorar { white-space: normal; line-height: 1.2; max-width: 96px; }
  #content .ors-tabelle th:last-child, #content .ors-tabelle td:last-child { padding-left: 2px; padding-right: 2px; }
  /* Nur noch die Veranstaltung darf umbrechen (Heim/Gast stehen schon darin und haben keine eigenen Spalten mehr). */
  /* Mannschaftsnamen in EINER Zeile; nur bei ungewoehnlich langen Namen wird mit "..." gekuerzt (voller Name beim Daraufzeigen). */
  /* width:100% + max-width:0 ist der uebliche Kniff: die Zelle nimmt genau den Rest der Zeile, statt die Tabelle ueber den Rand zu schieben; zu lange Namen werden gekuerzt. min-width haelt ein Mindestmass. */
  #content .ors-tabelle td:nth-child(3) { white-space: nowrap; width: 100%; max-width: 0; min-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  /* Konkurrenz eines Medenspiels (z. B. "Herren 30"): eigene Spalte, deutlich lesbare Markierung.
     Herren in der Markenfarbe, Damen in Gold - schon beim Ueberfliegen der Liste unterscheidbar. */
  .ors-konk { display: inline-flex; align-items: center; white-space: nowrap; padding: 3px 10px; min-width: 44px; justify-content: center; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; border: 1px solid transparent; }
  .ors-konk-h { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--ink); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
  .ors-konk-d { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--ink); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
  /* Turnier-Kategorien (A/J/N/S): Farben exakt aus den Vorlagebildern des Nutzers (Pixelwerte). Rand #2b2e39, schwarze Schrift.
     A und N haben in den Vorlagen denselben Hintergrund (#e5ebff). */
  .ors-konk-j { background: #ebfda9; color: #000; border-color: #2b2e39; }
  .ors-konk-a { background: #e5ebff; color: #000; border-color: #2b2e39; }
  .ors-konk-n { background: #e5ebff; color: #000; border-color: #2b2e39; }
  .ors-konk-s { background: #d7fbff; color: #000; border-color: #2b2e39; }
  .ekarte .ors-konk { margin-left: 4px; font-size: 12px; padding: 2px 9px; }
  #content .ors-tabelle .zahl-stand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  /* Gleiche Kartenform wie oben (18px) auch bei Bestand, Spieler-Suche und den Listen darunter. */
  .vorrat-gitter .vr, .player-lookup, .verw-doppel .table-wrap { border-radius: 18px; }

  /* ---------- Gleiches Design auf ALLEN Seiten ----------
     Nutzer-Wunsch: das Muster der Verwaltung (gleich grosse Ueberschriften, Serifen-Kennzahlen,
     einheitliche Kartenform) auch auf Statistik, Kasse, Tennis, Badminton usw. Bewusst nur ueber
     die gemeinsamen Klassen, nicht seitenweise umgebaut - die Seiten selbst bleiben unangetastet. */
  /* Alle Abschnittsueberschriften gleich gross (20px, Serife wo die Gestaltung eine hat). Auch die
     kleine Fassung (.klein), die vorher nur 15px hatte. */
  /* .content davor: die spaetere Premium-Regel (.section-head h2 mit --t-h2) steht weiter unten
     und haette dieselbe Spezifitaet - sie wuerde die 20px sonst wieder ueberschreiben. */
  .content .section-head h2, .content .section-head.klein h2 { font-size: 20px; font-weight: var(--titel-weight); }
  /* Wo kein Icon-Chip vor der Ueberschrift steht (siehe .verw-kopf-akzent, Verwaltung), stattdessen
     ein schmaler Akzentstrich in Gold - dieselbe Farbfamilie, ohne pro Seite ein Symbol zu brauchen. */
  .section-head:not(.verw-kopf-akzent) h2::before {
    content: ""; display: inline-block; width: 4px; height: .85em; margin-right: 10px;
    border-radius: 2px; background: var(--gold); vertical-align: -.08em;
  }
  /* Kennzahlen ueberall in der Serife der Ueberschriften statt Monospace (gleiche Regel wie in der
     Verwaltung) - nur Schrift, nicht die Groesse, damit nirgends etwas umbricht. Ab 561px. */
  @media (min-width: 561px) {
    .kpi .value { font-family: var(--font-titel); font-weight: var(--titel-weight); font-variant-numeric: lining-nums tabular-nums; }
  }
  .status-stepper .st:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .arbeit-dauer { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
  .arbeit-dauer.frisch { background: var(--surface-2); color: var(--ink-secondary); }
  .arbeit-dauer.faellig { background: var(--status-warning-wash); color: var(--status-warning); }
  .arbeit-dauer.ueberfaellig { background: var(--status-critical-wash); color: var(--status-critical); }
  @media (max-width: 560px) {
    /* Am Handy ist die Breite ohnehin knapp - Name/Schlaeger oben, Status/Dauer/Knopf
       darunter, statt alles in eine zu schmale Zeile zu zwaengen. */
    .arbeit-ticket-inhalt { grid-template-columns: minmax(0, 1fr); }
    .arbeit-ticket-fuss { grid-column: 1; grid-row: auto; margin-top: var(--raum-2); justify-content: space-between; flex-wrap: wrap; }
    /* Bei dieser Breite stehen "In Arbeit" und "Offene Posten" ohnehin untereinander statt
       nebeneinander (.verw-doppel bricht um) - der Platzhalter fuer den Hoehenausgleich
       waere dort nur unnoetiger Leerraum. */
    .arbeit-kopf-spacer { display: none; }
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-gross);
    box-shadow: var(--shadow), var(--glanz);
    transition: box-shadow .18s ease;
  }

  /* Frueher vier gerahmte Kacheln nebeneinander - vier Rahmen fuer vier Zahlen, die
     ohnehin zusammengehoeren. Jetzt Spalten EINER Flaeche, nur durch eine Haarlinie
     getrennt: dieselbe Information, deutlich ruhiger, und die Zahl darf groesser werden. */
  /* Kopf der Statistik-Seite: eine Leitzahl gross, ihr Verlauf daneben, drei stille
     Nebenzahlen darueber. Ersetzt zwei fast identische Kennzahl-Baender, die vorher als
     Erstes kamen und die Diagramme nach ganz unten geschoben haben. */
  /* Der Kopf traegt die Zahlen des laufenden Jahres und darunter das Jahr als Silhouette.
     Die Jahreszahl steht gross und blass im Hintergrund - sie sagt sofort, worauf sich
     alles bezieht, ohne eine eigene Zeile zu verbrauchen. */
  .st-kopf { position: relative; padding: 24px 26px 18px; overflow: hidden; }
  .st-jahr-marke {
    position: absolute; top: 6px; right: 18px; pointer-events: none;
    font-family: var(--font-mono); font-size: 76px; font-weight: 300; letter-spacing: -.04em;
    color: var(--brand); opacity: .06; line-height: 1;
  }
  .st-zahlen { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: flex-end; position: relative; }
  .st-zahl { display: flex; flex-direction: column; min-width: 0; }
  .st-zahl .label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); font-weight: 700; }
  .st-gross {
    font-family: var(--font-mono); font-weight: var(--zahl-weight); font-size: 58px;
    line-height: 1; letter-spacing: -.035em; color: var(--brand); margin: 4px 0 0;
  }
  .st-mittel { font-family: var(--font-mono); font-weight: var(--zahl-weight); font-size: 26px; line-height: 1.1; margin-top: 6px; color: var(--ink); letter-spacing: -.02em; }
  .st-mittel.gold { color: var(--gold); }
  .st-zahl.fuehrend { flex: 0 0 auto; margin-right: 8px; }
  .st-split { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ink-secondary); }
  .st-split i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
  .st-split b { font-weight: 600; color: var(--ink); }

  /* Jahres-Silhouette: zwoelf Saeulen, laufender Monat golden, kuenftige Monate nur als
     leere Spur - so sieht man auf einen Blick, wie viel vom Jahr noch vor einem liegt. */
  .jahr-saeulen {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule);
  }
  .js-spalte { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
  .js-wert { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-secondary); height: 13px; }
  .js-spur {
    width: 100%; height: 64px; background: var(--surface-2); border-radius: 3px;
    display: flex; align-items: flex-end; overflow: hidden;
  }
  .js-spur i { display: block; width: 100%; background: var(--brand); border-radius: 3px; transition: height .25s ease; }
  .js-monat { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
  /* Das eingenommene Geld je Monat direkt unter dem Monat - vorher stand es nur im Tooltip,
     also genau da, wo man es nicht sieht. */
  .js-geld { font-family: var(--font-mono); font-size: 10px; color: var(--gold); height: 13px; white-space: nowrap; }
  .js-spalte.jetzt .js-spur i { background: var(--gold); }
  .js-spalte.jetzt .js-monat { color: var(--gold); font-weight: 600; }
  .js-spalte.jetzt .js-wert { color: var(--gold); }
  .js-spalte.jetzt .js-geld { font-weight: 600; }
  .js-spalte.kuenftig .js-spur { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--surface) 4px 8px); }
  @media (max-width: 720px) {
    .st-gross { font-size: 46px; }
    .st-jahr-marke { font-size: 54px; }
    .js-spur { height: 48px; }
    .jahr-saeulen { gap: 3px; }
  }

  .kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-gross);
    box-shadow: var(--shadow), var(--glanz); padding: 4px 2px;
  }
  .kpi {
    padding: var(--raum-5) var(--raum-5);
    border-left: 1px solid var(--rule);
  }
  /* Farbpunkt vor den Bereichs-Ueberschriften der Statistik - gibt den sonst gleich
     aussehenden Baendern eine Zugehoerigkeit, ohne dass sie bunt werden. */
  .st-bereich-punkt {
    display: inline-block; width: 9px; height: 9px; border-radius: 2px;
    margin-right: 10px; vertical-align: 2px;
  }
  .kpi:first-child { border-left: none; }
  /* 11,5 px sind klein - dafuer reicht --ink-muted nicht (3,2:1). */
  .kpi .label { font-size: var(--t-etikett); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-secondary); font-weight: 600; }
  /* Kennzahlen in der Monospace der App statt in der Anzeigeschrift: gleiche Ziffernbreite
     heisst, dass untereinanderstehende Zahlen dieselbe Kante haben - wie in einem Kassenbuch. */
  .kpi .value { font-family: var(--font-mono); font-weight: var(--zahl-weight); letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-size: 29px; margin-top: 5px; color: var(--brand); }
  .kpi .value.gold { color: var(--gold); }
  .kpi .sub { font-size: 12px; color: var(--ink-secondary); margin-top: 2px; }
  /* Kleiner Trend-Hinweis unter zwei KPI-Kacheln, die sich sinnvoll ueber die Zeit
     vergleichen lassen (Jahr gegen Vorjahr zum selben Kalendertag, Monat gegen Vormonat) -
     bewusst NICHT bei "Offene Betraege", weil sich ein frueherer Standwert dafuer nicht aus
     den vorhandenen Daten rekonstruieren laesst (nur der aktuelle Status ist bekannt). */
  .kpi-delta { font-size: 11.5px; margin-top: 6px; }
  .kpi-delta.auf { color: var(--status-good); }
  .kpi-delta.ab { color: var(--status-critical); }
  .kpi-delta.neutral { color: var(--ink-secondary); }
  /* "Offene Beträge" + "Im Haus" auf Wunsch in EINER Kachel statt zwei - auf schmalen
     Bildschirmen brechen die beiden Haelften einfach untereinander um. */
  .kpi-split { display: flex; flex-wrap: wrap; gap: 14px 22px; }
  .kpi-split-teil { flex: 1 1 130px; min-width: 130px; }
  .kpi-split-teil .value { font-size: 24px; }
  /* Kleine, rein dekorative Kennzahlen-Icons auf dem Verwaltungs-Dashboard (kpi-grid-dash) -
     dieselbe Buchstaben/Zeichen-Ikonografie wie in der Seitenleiste (.rail-tab .ico), keine
     neue Bildsprache. Bewusst KEIN Pfeil/Chevron dazu: die Karten fuehren aktuell nirgendwo
     hin, ein Pfeil waere eine Klickbarkeit, die es (noch) nicht gibt. */
  .kpi-grid-dash .kpi-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .kpi-grid-dash .kpi-ico {
    width: 26px; height: 26px; flex: none; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-wash); color: var(--brand);
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 12.5px;
  }
  /* Ein einheitliches Kartenmuster (Nutzer-Wunsch nach ruhigerem Gesamtbild): gleiche Randlinie,
     gleicher Radius, gleicher Schatten wie die Begruessungskarten - ein Akzent je Karte (das
     Icon-Abzeichen) statt Streifen, Toenung und Icon zusammen. */
  .kpi-grid-dash .kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow), var(--glanz);
  }
  /* Kleine Verlaufslinie unten in den beiden Bilanz-Karten (Bespannungen/Einnahmen je Monat).
     Am Handy ausgeblendet: der Bilanzstreifen dort ist auf zwei knappe Spalten ausgelegt. */
  .kpi-spark { margin-top: 10px; }
  .kpi-spark-svg { display: block; width: 100%; height: 36px; }
  @media (max-width: 560px) { .kpi-spark { display: none; } }
  /* Grosse Zahlen in der Serifenschrift der Ueberschriften (--font-titel: nur in Papier eine
     Serife, sonst die jeweilige Anzeigeschrift) statt der Monospace - die Zahl ist der
     Blickfang, nicht die Farbe. Nur ab 561px; am Handy sind die Groessen der Zeilenform
     (siehe dort) fein abgestimmt und bleiben unberuehrt. */
  @media (min-width: 561px) {
    .kpi-grid-dash .kpi .value {
      font-family: var(--font-titel); font-weight: var(--titel-weight);
      font-size: clamp(32px, 2.8vw, 44px); line-height: 1.05; letter-spacing: -.01em;
      font-variant-numeric: lining-nums tabular-nums; margin-top: 8px;
    }
    .kpi-grid-dash .kpi-split-teil .value { font-size: clamp(28px, 2.3vw, 36px); }
  }
  /* Feinheiten: Karten heben sich beim Drueberfahren leicht an (nur Geraete mit Zeiger,
     nicht bei reduzierter Bewegung). */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .kpi-grid-dash .kpi { transition: transform .18s ease, box-shadow .18s ease; }
    .kpi-grid-dash .kpi:hover { transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz); }
  }
  /* Farbkonzept (Nutzer-Rueckmeldung: "warum ist Einnahmen September jetzt rot?"): Gruen =
     in Ordnung/Einnahmen, das Sandplatz-Rot bleibt fuer Rahmen und Akzente, echtes Rot nur fuer
     Offenes/Ueberfaelliges. Einnahmen war vorher gold getoent und sah dadurch aus wie eine
     Warnung - und kaum unterscheidbar von "Offene Betraege" daneben. */
  .kpi-grid-dash.kpi-zweirang .kpi-bilanz .value.gold { color: var(--status-good); }

  /* ---------- Statistik im Stil der Verwaltung ----------
     Dieselben Bausteine wie dort: Icon-Chips vor Ueberschriften und Kennzahlen (.kpi-ico),
     Serifenzahlen, freistehende Karten, Hochzaehlen. Geld ist gruen (Einnahmen), Rot bleibt
     dem Offenen vorbehalten - deshalb faerbt .st-dash die goldenen Werte gruen. */
  .kpi-grid-dash.st-dash .kpi .value.gold, .st-kopf .st-mittel.gold { color: var(--status-good); }
  /* Auf allen anderen Seiten setzt seiteDesignAufsetzen() die Klasse .geld auf goldene
     Geldbetraege. In Papier (dort wirkt Gold wie ein Warnton) werden sie gruen - andere
     Gestaltungen behalten ihre eigene Farbwelt. */
  :root:not([data-design]) .kpi .value.geld,
  :root[data-design="papier"] .kpi .value.geld { color: var(--status-good); }
  .kpi .kpi-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .kpi .kpi-ico {
    width: 26px; height: 26px; flex: none; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-wash); color: var(--brand);
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 12.5px;
  }
  .verw-kopf-akzent .kpi-ico.kpi-ico-gruen { background: var(--status-good-wash); color: var(--status-good); }
  .st-kopf .kpi-kopf { display: flex; align-items: center; gap: 8px; }
  .chart-card h3 { display: flex; align-items: center; gap: 10px; }
  .st-kopf .kpi-ico, .chart-card h3 .kpi-ico, .marge-kopf h3 .kpi-ico {
    width: 26px; height: 26px; flex: none; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-wash); color: var(--brand);
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 12.5px;
  }
  .st-kopf .kpi-ico { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
  .marge-kopf h3 { display: flex; align-items: center; gap: 10px; }
  /* Kopfkarte lockerer: mehr Luft, weichere Saeulen. */
  .st-kopf { padding: 28px 30px 22px; }
  .js-spur, .js-spur i { border-radius: 6px; }
  @media (min-width: 561px) {
    .st-gross, .st-mittel {
      font-family: var(--font-titel); font-weight: var(--titel-weight);
      font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
    }
    .st-gross { font-size: 66px; line-height: 1; }
    .st-mittel { font-size: 34px; line-height: 1.05; margin-top: 8px; }
    .st-jahr-marke { font-family: var(--font-titel); font-weight: var(--titel-weight); opacity: .07; }
  }
  @media (max-width: 560px) { .st-kopf { padding: 20px 18px 16px; } }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .chart-card, .marge-karte, .st-kopf { transition: transform .18s ease, box-shadow .18s ease; }
    .chart-card:hover, .marge-karte:hover, .st-kopf:hover { transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz); }
  }

  /* Am Handy ist ein Kachel-Raster der falsche Aufbau: "Offene Beträge/Im Haus" ist eine
     zusammengelegte, doppelt hohe Kachel, daneben stand eine kurze - das riss ein grosses
     weisses Loch auf (Nutzer-Feedback). Statt Raster deshalb eine Liste: Bezeichnung links,
     Zahl rechts auf derselben Grundlinie, Zusatz darunter.
     ACHTUNG, dieser Block MUSS hinter den Grundregeln stehen. Er stand davor - und weil die
     Selektoren gleich schwer sind (.kpi .value hier wie dort), gewann jedes Mal die spaetere
     Grundregel: die Zahlen blieben bei 29 px statt 24 und die margin-top-Werte, die hier auf
     0 gesetzt werden, kamen nie an. Sichtbar war das als vier Zeilen mit ZWEI verschiedenen
     Zahlengroessen (die beiden Haelften der zusammengelegten Kachel kleiner als der Rest,
     weil nur die eine eigene, noch spaetere Regel hatte). Gleiche Bugklasse wie .sk-kopf. */
  @media (max-width: 560px) {
    /* Ohne Innenabstand laufen die Trennlinien von Kartenkante zu Kartenkante - vorher sassen
       sie 6 px innen und die der zusammengelegten Kachel noch einmal 10 px weiter. Drei
       verschieden breite Linien in einer Karte. */
    .kpi-grid { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
    /* Bezeichnung und Zusatz stapeln sich links, die Zahl steht mittig daneben statt in einer
       eigenen Zeile darueber. Das spart pro Zeile rund 25 px - vorher fuellte allein dieser
       Block den halben Bildschirm, bevor "In Arbeit" anfing.
       Drei ausdrueckliche Zeilen, damit die Zahl mit "grid-row: 1 / -1" ueber den ganzen
       Textstapel mittig sitzt (Bezeichnung + Zusatz + Trend); leere Zeilen fallen auf 0
       zusammen, solange kein row-gap gesetzt ist. */
    .kpi, .kpi-split-teil {
      display: grid; grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto auto; align-items: center; column-gap: 16px;
      padding: 12px 16px; border-left: none; border-top: 1px solid var(--rule);
    }
    .kpi-grid > .kpi:first-child, .kpi-split > .kpi-split-teil:first-child { border-top: none; }
    /* Die zusammengelegte Kachel ist am Handy nur noch ein Behaelter; ihre beiden Haelften
       sind ganz normale Zeilen und tragen deshalb selbst Abstand und Trennlinie. */
    .kpi.kpi-split { display: block; padding: 0; }
    .kpi > .label, .kpi > .sub, .kpi > .kpi-delta, .kpi > .kpi-kopf,
    .kpi-split-teil > .label, .kpi-split-teil > .sub, .kpi-split-teil > .kpi-delta, .kpi-split-teil > .kpi-kopf { grid-column: 1; }
    .kpi > .value, .kpi-split-teil > .value {
      grid-column: 2; grid-row: 1 / -1; justify-self: end; align-self: center;
      font-size: 25px; margin-top: 0;
    }
    .kpi > .sub, .kpi > .kpi-delta, .kpi-split-teil > .sub { margin-top: 2px; }

    /* Zweiter Rang: die beiden Bilanzzahlen nebeneinander in einem getoenten Streifen am Fuss
       der Karte. Sie gehoeren dazu, verlangen aber nichts - was zu tun ist, steht immer oben.
       Zahl zuerst (order: -1), darunter der Zeitraum; so liest sich der Streifen als Bilanz
       und nicht als zwei weitere Aufgaben. */
    .kpi-zweirang { grid-template-columns: 1fr 1fr; }
    /* Zwei Spalten gelten NUR fuer den Bilanzstreifen. Alles darueber bleibt volle Breite -
       sonst rutschen auch die normalen Zeilen nebeneinander und die Karte hat wieder zwei
       verschiedene Zeilenformen, statt einer Liste mit einem Fuss. */
    .kpi-zweirang > .kpi:not(.kpi-bilanz) { grid-column: 1 / -1; }
    /* Der Streifen ist auf ein Paar ausgelegt. Steht dort nur EIN Wert (Bespannen, Trainer),
       nimmt er die ganze Breite - sonst bliebe daneben eine leere getoente Haelfte stehen. */
    .kpi-zweirang > .kpi-bilanz { grid-column: 1 / -1; }
    .kpi-zweirang > .kpi-bilanz:has(~ .kpi-bilanz),
    .kpi-zweirang > .kpi-bilanz ~ .kpi-bilanz { grid-column: auto; }
    .kpi-zweirang > .kpi-bilanz {
      display: flex; flex-direction: column; align-items: flex-start;
      padding: 11px 14px 12px;
      background: var(--surface-2); border-top: 2px solid var(--rule);
    }
    .kpi-zweirang > .kpi-bilanz + .kpi-bilanz { border-left: 1px solid var(--rule); }
    /* align-self muss hier ausdruecklich zurueckgesetzt werden: die allgemeine Zeilenregel
       setzt "align-self: center" fuer das Raster (senkrecht mittig neben dem Text) - in der
       Flex-SPALTE des Bilanzstreifens steuert dieselbe Eigenschaft aber die Waagerechte und
       schob die Zahl in die Spaltenmitte, waehrend die Bezeichnung links stand. */
    .kpi-zweirang > .kpi-bilanz .value {
      order: -1; align-self: flex-start; font-size: 21px; margin: 0 0 1px; color: var(--ink);
    }
    .kpi-zweirang > .kpi-bilanz .value.gold { color: var(--gold); }
    .kpi-zweirang > .kpi-bilanz .label { font-size: 9.5px; letter-spacing: .07em; }
    /* Der Bilanzstreifen ist auf zwei knappe Spalten ausgelegt - das 26px-Icon-Abzeichen
       waere dort neben der auf 9.5px geschrumpften Beschriftung zu dominant. Dieselbe
       Weglass-Logik wie bei .sub direkt darunter: am Handy nur das Noetigste. */
    .kpi-zweirang > .kpi-bilanz .kpi-ico { display: none; }
    /* In der halben Spaltenbreite bricht "aus 1 bezahlten Bespannungen" dreizeilig um und macht
       aus dem ruhigen Streifen wieder einen Block. Der Vergleich zum Vormonat sagt hier mehr. */
    .kpi-zweirang > .kpi-bilanz .sub { display: none; }
    .kpi-zweirang > .kpi-bilanz .kpi-delta { margin-top: 3px; font-size: 11px; }
  }

  /* "Was bleibt je Bespannung" - eine Rechnung, keine Kachelsammlung: Umsatz, minus Material,
     ergibt was bleibt. Deshalb drei Glieder in einer Zeile statt drei gleichwertiger Kacheln,
     und das Ergebnis rechts abgesetzt wie unter einem Strich. */
  /* .card bringt bewusst keinen Innenabstand mit - jede Karte setzt ihren eigenen. Der fehlte
     hier, weshalb Ueberschrift und Betraege an den Kartenrand stiessen und die Zahlen rechts
     sogar heraushingen. Gleiche Werte wie beim Statistik-Kopf darueber, damit die Karte zu
     ihren Nachbarn passt statt wie ein Fremdkoerper zu wirken. */
  .marge-karte { margin-top: 14px; padding: 22px 26px 18px; }
  @media (max-width: 560px) { .marge-karte { padding: 16px 16px 12px; } }
  .marge-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .marge-kopf h3 { margin: 0; }
  /* Die Zeile stand als Fliesstext da und wog dadurch so schwer wie die Ueberschrift. */
  .marge-kopf .hint { font-size: 12px; color: var(--ink-secondary); }
  .marge-reihe { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
  .marge-teil { flex: 1 1 120px; min-width: 0; padding: 2px 16px 2px 0; }
  .marge-teil + .marge-teil { padding-left: 16px; border-left: 1px solid var(--rule); }
  .marge-wert { display: block; font-size: 22px; font-weight: var(--zahl-weight); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .marge-wert.minus { color: var(--ink-secondary); }
  .marge-bez { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--ink-secondary); }
  .marge-ergebnis .marge-wert { color: var(--gold); }
  .marge-ergebnis { border-left-width: 2px !important; border-left-color: var(--rule-stark) !important; }
  @media (max-width: 560px) {
    .marge-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .marge-teil { padding: 10px 14px; border-top: 1px solid var(--rule); }
    .marge-teil:nth-child(1), .marge-teil:nth-child(2) { border-top: none; }
    .marge-teil + .marge-teil { padding-left: 14px; }
    .marge-teil:nth-child(3) { grid-column: 1 / -1; border-left: none !important; }
    .marge-wert { font-size: 20px; }
  }

  /* ---- Trainer-Wochenraster ---- */
  .trainer-modus-toggle { display: inline-flex; flex: none; }
  .tw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .tw-navi { display: flex; gap: 6px; }
  .tw-spanne { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .tw-raster {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--border); border-radius: var(--radius-gross);
    background: var(--surface); overflow: hidden; box-shadow: var(--shadow), var(--glanz);
  }
  .tw-tag { min-width: 0; border-left: 1px solid var(--rule); display: flex; flex-direction: column; }
  .tw-tag:first-child { border-left: none; }
  .tw-tag.heute .tw-tag-kopf { background: var(--brand); color: var(--auf-brand); }
  .tw-tag-kopf {
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
    padding: 7px 9px; border-bottom: 1px solid var(--rule); background: var(--surface-2);
  }
  .tw-wochentag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink-secondary); }
  .tw-tag.heute .tw-wochentag, .tw-tag.heute .tw-tagnr { color: var(--auf-brand); }
  .tw-tagnr { font-size: 13px; font-weight: 600; color: var(--ink); }
  /* .tw-tag-inhalt ist jetzt eine Spalte: oben (falls vorhanden) die Termine OHNE Uhrzeit als
     eigene, immer sichtbare Zeile, darunter die Zeitreihe (Y-Achse + Zeitgitter nebeneinander,
     beide bekommen dieselbe Hoehe per Inline-Style, siehe trainerWochenRasterHtml). */
  .tw-tag-inhalt { display: flex; flex-direction: column; padding: 8px 8px 8px 4px; }
  .tw-zeitreihe { display: flex; align-items: flex-start; gap: 2px; }
  .tw-ohne-zeit { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .tw-stunde-ohnezeit {
    display: inline-flex; align-items: center; max-width: 100%; cursor: pointer;
    padding: 3px 8px; font: inherit; font-size: 11px; text-align: left;
    border: 1px solid var(--border); border-left: 3px solid var(--brand);
    border-radius: 6px; background: var(--surface); color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tw-stunde-ohnezeit:hover { border-color: var(--brand); filter: brightness(0.97); }
  .tw-stunde-ohnezeit.erledigt { border-left-color: var(--status-good); }
  .tw-stunde-ohnezeit.abgesagt { border-left-color: var(--ink-muted); opacity: .55; text-decoration: line-through; }
  .tw-achse { position: relative; flex: none; width: 30px; }
  .tw-achse-marke {
    position: absolute; right: 4px; transform: translateY(-50%);
    font-size: 9px; line-height: 1; color: var(--ink-muted); font-family: var(--font-mono); white-space: nowrap;
  }
  .tw-zeitgitter { position: relative; flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--rule); }
  .tw-gitterlinie { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); opacity: .55; }
  .tw-stunde {
    position: absolute; display: flex; flex-direction: column; gap: 0; text-align: left;
    overflow: hidden; cursor: pointer; padding: 4px 6px; margin-left: 3px;
    border: 1px solid var(--border); border-left: 3px solid var(--brand);
    border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit;
  }
  .tw-stunde:hover { border-color: var(--brand); filter: brightness(0.97); }
  .tw-stunde.erledigt { border-left-color: var(--status-good); }
  .tw-stunde.abgesagt { border-left-color: var(--ink-muted); opacity: .55; text-decoration: line-through; }
  .tw-zeit { font-size: 10.5px; color: var(--ink-secondary); }
  .tw-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tw-preis { font-size: 10.5px; color: var(--ink-secondary); }
  /* Offener Betrag: ein Punkt in der Ecke, kein Schild - im Raster ist kein Platz fuer Worte. */
  .tw-offen { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--status-critical); }
  /* Auf dem Desktop stehen alle sieben Tage nebeneinander - dieselbe Uhrzeit siebenmal zu
     wiederholen war reine Wiederholung ohne neue Information. Nur der erste Tag (Montag)
     behaelt seine Achse, sie wirkt dann wie eine gemeinsame linke Spalte fuer die ganze Woche. */
  .tw-tag:not(:first-child) .tw-achse { display: none; }
  /* Am Handy sind sieben Spalten unlesbar: aus dem Raster wird eine Tagesfolge untereinander -
     dort steht dagegen immer nur EIN Tag auf einmal im Bild, deshalb bekommt dort wieder jeder
     Tag seine eigene Achse (siehe Ueberschreibung unten). Leere Tage bleiben drin (leeres
     Gitter statt Text), sonst waere es wieder nur eine Liste. */
  @media (max-width: 720px) {
    .tw-raster { grid-template-columns: 1fr; }
    .tw-tag { border-left: none; border-top: 1px solid var(--rule); flex-direction: row; align-items: stretch; }
    .tw-tag:first-child { border-top: none; }
    .tw-tag-kopf {
      flex-direction: column; align-items: center; justify-content: center; gap: 1px;
      flex: 0 0 58px; border-bottom: none; border-right: 1px solid var(--rule);
      /* Bei einer vollen Woche ist die Zeitspalte lang - ohne "kleben" scrollt die Tages-
         beschriftung (Mo 14) oben aus dem Bild, waehrend man noch mitten im selben Tag ist.
         55px = Hoehe der .topbar (siehe dort, ebenfalls sticky). */
      position: sticky; top: 55px; align-self: flex-start; z-index: 1;
    }
    .tw-tag-inhalt { flex: 1 1 auto; min-height: 0; padding: 8px 9px 8px 4px; }
    /* Gleiche Selektor-Spezifitaet wie die Verstecken-Regel oben (":not(:first-child)" zaehlt
       als Klasse) - sonst gewinnt die spezifischere Basisregel trotz spaeterer Media-Query
       (genau die Falle, vor der kaskade.py warnt). */
    .tw-tag:not(:first-child) .tw-achse { display: block; }
    .tw-name { white-space: normal; }
  }
  /* ---- Farb-Schalter (Trainer-Mannschaften/Einzelpersonen) ---- */
  .farb-waehler { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; }
  .farb-swatch {
    width: 15px; height: 15px; border-radius: 50%; border: 2px solid transparent; padding: 0;
    cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent);
  }
  .farb-swatch.an { border-color: var(--ink); }
  .farb-swatch.farb-keine {
    background: var(--surface-2); color: var(--ink-muted); font-size: 10px; line-height: 11px;
    box-shadow: inset 0 0 0 1px var(--border-strong);
  }

  /* Marge je Saite: eine Rangliste, kein Diagramm. Der Balken ist relativ zum Besten -
     absolute Euro stehen daneben, der Balken macht nur den Abstand sichtbar. */
  .marge-saiten { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .marge-saiten .ms-kopf {
    display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px;
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink-muted);
  }
  .marge-saiten .ms-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) 84px auto;
    align-items: center; gap: 10px; padding: 6px 0;
  }
  .marge-saiten .ms-zeile + .ms-zeile { border-top: 1px solid var(--rule); }
  .marge-saiten .ms-name { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marge-saiten .ms-anzahl { margin-left: 8px; font-size: 11px; color: var(--ink-muted); }
  .marge-saiten .ms-balken { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
  .marge-saiten .ms-balken > i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
  .marge-saiten .ms-wert { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) {
    .marge-saiten .ms-zeile { grid-template-columns: minmax(0, 1fr) 52px auto; gap: 8px; }
    .marge-saiten .ms-name { font-size: 12.5px; }
  }

  /* Schlusszeile des Gesamt-Berichts: deutlicher abgesetzt, weil darunter nichts mehr kommt. */
  .ber-schluss { border-top: 2px solid var(--rule-stark); padding-top: 10px; }
  .ber-schluss .ber-klein { margin: 8px 0 0; line-height: 1.45; }

  /* Monospace setzt JEDES Zeichen auf dieselbe Breite - auch Komma und Euro-Zeichen. Bei
     grossen Betraegen reisst "52,00 €" dadurch sichtbar auseinander (gemessen: 102 px statt
     87 px proportional). Das engere Wortabstand holt vor allem das Euro-Zeichen wieder heran,
     ohne die Ziffern zu quetschen - die sollen ja weiter sauber untereinander stehen.
     Nur bei den grossen Zahlen noetig; kleine Betraege und Datumsangaben tragen es nicht auf. */
  /* NUR dort, wo hinter der Zahl ein Waehrungszeichen steht. Elemente, deren Text eine
     Einheit als Wort traegt ("112,5 m", "von 200,0 m"), duerfen NICHT mit rein - dort frisst
     der enge Wortabstand das Leerzeichen und es steht "112,5m von200,0m". */
  .st-mittel, .kpi .value, .kunde-offen, .marge-wert {
    word-spacing: -.22em;
  }

  .two-col { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 16px; align-items: start; }
  @media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
  .chart-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
  @media (max-width: 900px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }
  /* Wenn eine Sportart/OSR ausgeblendet ist, bleibt evtl. nur eine ungerade Kartenzahl übrig —
     die letzte Karte füllt dann die ganze Zeile statt eine halbleere Lücke zu lassen. */
  .chart-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .chart-card { padding: 16px 18px 12px; }
  .chart-card h3 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
  .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ink-secondary); }
  .legend .sw { display: inline-flex; align-items: center; gap: 5px; }
  .legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

  /* ============ TABLES ============ */
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-gross); background: var(--surface); box-shadow: var(--shadow); }
  table { border-collapse: collapse; width: 100%; min-width: 640px; }
  /* Ein Fenster ist nie breiter als 640 bis 860 Punkte - die Mindestbreite von 640 fuer
     Tabellen passt dort NIE und schob Bericht, Rechnung und Kundenkarte seitlich raus.
     Gilt unabhaengig von der Bildschirmgroesse, nicht nur am Handy. */
  #modalBody table { min-width: 0; }
  /* Die Kopfzeile war ein gefuellter gruener Balken - viel Gewicht fuer etwas, das man nur
     einmal liest. Jetzt eine gesetzte Kolumnenzeile: Kleinversalien, gesperrt, zurueckhaltend,
     darunter eine kraeftigere Linie als Abschluss. Sie bleibt weiterhin beim Scrollen stehen,
     braucht dafuer aber einen undurchsichtigen Hintergrund. */
  thead th {
    position: sticky; top: 0;
    background: var(--surface);
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-etikett);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--raum-3) var(--raum-4);
    white-space: nowrap;
    border-bottom: 1px solid var(--rule-stark);
  }
  thead th.num { text-align: right; }
  thead th.sortable { cursor: pointer; user-select: none; }
  thead th.sortable:hover { color: var(--brand); }
  thead th.sortable .arrow { opacity: .85; margin-left: 3px; }
  /* Etwas mehr Luft je Zeile - eng gesetzte Tabellen wirken nach Datenbank-Auszug,
     grosszuegigere nach fertigem Produkt. Trennung nur noch per Haarlinie: der frueher
     zusaetzliche Zebrastreifen legte ein zweites Raster ueber dasselbe Raster. */
  tbody td { padding: var(--raum-3) var(--raum-4); border-top: 1px solid var(--border); font-size: var(--t-basis); white-space: nowrap; }
  tbody td.num { text-align: right; }
  tbody tr:first-child td { border-top: none; }
  /* Erste Fassung hatte nur eine sehr helle Haarlinie und gar keine Flaechenunterscheidung -
     man sah nicht mehr, wo eine Zeile aufhoert (Nutzer-Feedback). Jetzt drei Dinge zusammen:
     sichtbare Trennlinie, mehr Zeilenhoehe, und eine sehr zarte Bandierung - deutlich leiser
     als der frueher zu kraeftige Zebrastreifen, aber die Zeile ist wieder als Flaeche lesbar. */
  tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
  /* Zwischenzeile je Zeitraum - bricht lange Listen in Bloecke, die man wirklich liest.
     Eigener, undurchsichtiger Hintergrund, damit sie nicht als gebaenderte Datenzeile
     missverstanden wird, und ohne Hover, weil hier nichts anzuklicken ist. */
  tbody tr.gruppen-zeile td {
    background: var(--surface); padding: 18px 14px 6px;
    border-top: 1px solid var(--rule-stark); border-bottom: none;
    font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  }
  tbody tr.gruppen-zeile:first-child td { padding-top: 4px; border-top: none; }
  tbody tr.gruppen-zeile:hover td { background: var(--surface); }
  tbody tr.gruppen-zeile + tr td { border-top: none; }
  /* Ein Monatswechsel ist der eigentliche Einschnitt - der bekommt eine kraeftige Kante,
     mehr Luft davor und den Namen in der Serifenschrift statt in Kleinversalien. Die nahen
     Zeitraeume darueber ("Diese Woche") bleiben bewusst leise, sonst waere alles gleich laut. */
  /* Erste Fassung zog eine kraeftige Linie ueber die ganze Tabellenbreite. Bei wenigen
     Bespannungen pro Monat kam die aber alle ein bis zwei Zeilen und zerhackte die Liste
     (Nutzer-Feedback). Jetzt traegt die Beschriftung selbst den Akzent: Serifenschrift mit
     einer kurzen Unterstreichung nur unter dem Wort, dazu Luft darueber. Die Trennung kommt
     also aus Weissraum und Typografie statt aus einem Strich quer durchs Bild. */
  tbody tr.gruppen-zeile.monat td {
    padding: 26px 14px 10px;
    border-top: none;
    font-family: var(--font-titel); font-size: 16.5px; font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing); text-transform: none; color: var(--ink);
  }
  tbody tr.gruppen-zeile.monat .gz-text {
    display: inline-block; padding-bottom: 4px;
    border-bottom: 2px solid var(--brand);
  }
  tbody tr.gruppen-zeile.monat:first-child td { padding-top: 8px; }
  tbody tr:hover td { background: var(--brand-wash); }
  tbody td.wrap { white-space: normal; min-width: 160px; }
  /* Summenzeile wie im Kassenbuch: doppelter Abschlussstrich statt nur fetterer Schrift.
     Der Hover-Wechsel entfaellt hier - eine Summe ist keine anklickbare Zeile. */
  tbody tr.summenzeile td { border-top: 2px solid var(--ink); font-weight: 700; padding-top: 12px; }
  tbody tr.summenzeile:hover { background: none; }
  /* Schmale Farbkante links an Zeilen, an denen noch etwas zu tun ist. Das ist der Grund,
     warum die Liste nach dem Entfernen des Zebrastreifens trotzdem nicht flach wirkt: die
     Struktur kommt jetzt aus der Bedeutung, nicht aus abwechselnden Hintergruenden. */
  tbody tr.zeile-arbeit td:first-child { box-shadow: inset 3px 0 0 var(--status-warning); }
  tbody tr.zeile-fertig td:first-child { box-shadow: inset 3px 0 0 var(--status-good); }
  tbody tr.zeile-offen  td:first-child { box-shadow: inset 3px 0 0 var(--status-critical); }
  /* Der Name ist der Anker jeder Zeile - er darf schwerer sein als der Rest. */
  .name-knopf { font-weight: 600; }
  .datum-zelle { color: var(--ink-secondary); }
  .datum-zelle b { color: var(--ink); font-weight: 600; }
  /* Ein Abzeichen, das gleichzeitig Schalter ist (Status, Bezahlt-Stempel). Der Rahmen kommt
     jeweils aus .status-knopf bzw. .stempel - hier wird nur die Knopf-Optik neutralisiert. */
  /* Ohne das Zuruecksetzen blieb der Standard-Knopfrahmen stehen - "Offen" sass in einem
     grauen Kasten. .badge.stempel gewinnt mit zwei Klassen und behaelt seinen eigenen Rahmen. */
  .badge-knopf { font: inherit; cursor: pointer; border: none; background: none; }
  /* Beleg-Datum NEBEN dem Stempel, nicht darunter - darunter wuchs die Zeilenhoehe, und zwar
     nur bei bezahlten Zeilen, wodurch die Liste ungleichmaessig wurde. */
  .zahl-stand { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
  .zahl-am { font-size: 10.5px; color: var(--ink-muted); font-family: var(--font-mono); white-space: nowrap; }
  /* Zeilen-Menue: ein "⋯" statt Stift + Kreuz. Die Liste selbst haengt an <body>
     (position:fixed), siehe zeilenMenueOeffnen() - in der Tabelle wuerde sie abgeschnitten. */
  .zeilen-menue-knopf {
    border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-muted);
    font-size: 17px; line-height: 1; padding: 2px 8px; border-radius: var(--radius);
  }
  .zeilen-menue-knopf:hover { color: var(--brand); background: var(--brand-wash); }
  .zeilen-menue {
    position: fixed; z-index: 60; min-width: 190px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-gross); box-shadow: var(--schatten-3);
    padding: 5px; display: flex; flex-direction: column; gap: 1px;
  }
  .zm-eintrag {
    text-align: left; background: none; border: none; cursor: pointer;
    font: inherit; font-size: 13.5px; color: var(--ink);
    padding: 9px 12px; border-radius: var(--radius);
  }
  .zm-eintrag:hover { background: var(--surface-2); }
  /* Loeschen sitzt unten, abgesetzt und rot - nicht mehr einen Daumen breit neben Bearbeiten. */
  .zm-eintrag.gefahr { color: var(--status-critical); margin-top: 4px; border-top: 1px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); padding-top: 11px; }
  .zm-eintrag.gefahr:hover { background: var(--status-critical-wash); }
  .badge.critical.status-knopf { color: var(--status-critical); }
  td.actions { text-align: right; }
  /* Die Aktionsspalte bleibt am rechten Rand kleben, auch wenn die Tabelle breiter ist als
     der Bildschirm. Sonst muss man erst seitwärts schieben, um an das Löschen zu kommen.
     Der Hintergrund muss undurchsichtig sein und zur jeweiligen Zeile passen, sonst
     scheint der scrollende Inhalt durch. */
  .table-wrap thead th:last-child,
  .table-wrap td.actions {
    position: sticky; right: 0; z-index: 2;
  }
  .table-wrap thead th:last-child { background: var(--surface); }
  .table-wrap tbody td.actions { background: var(--surface); }
  .table-wrap tbody tr:nth-child(even) td.actions { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
  .table-wrap tbody tr:hover td.actions { background: var(--brand-wash); }
  /* Schmaler Schatten als Kante, damit man sieht, dass darunter etwas weiterläuft. */
  .table-wrap td.actions::before, .table-wrap thead th:last-child::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    transform: translateX(-100%);
    background: linear-gradient(to right, transparent, rgba(0,0,0,.10));
    pointer-events: none;
  }
  .row-edit {
    border: none; background: transparent; color: var(--ink-muted);
    cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; margin-right: 2px;
  }
  .row-edit:hover { color: var(--brand); background: var(--brand-wash); }
  .row-del {
    border: none; background: transparent; color: var(--ink-muted);
    cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px;
  }
  .row-del:hover { color: var(--status-critical); background: var(--status-critical-wash); }

  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; }
  .badge.critical { background: var(--status-critical-wash); color: var(--status-critical); }
  .badge.warning { background: var(--status-warning-wash); color: var(--status-warning); }
  .badge.good { background: var(--status-good-wash); color: var(--status-good); }
  .badge.muted { background: var(--surface-3); color: var(--ink-muted); }
  /* Der Status-Knopf war eine gefuellte Pille - dabei ist ein Status nur eine Randnotiz,
     keine Hauptsache. Jetzt Punkt + Wort: dieselbe Information, ein Bruchteil des Laerms.
     Bewusst nur .status-knopf, nicht .badge allgemein - Abzeichen anderswo sollen bleiben. */
  .badge.status-knopf {
    background: none; padding: 2px 0; gap: 7px; font-weight: 500;
    color: var(--ink-secondary); border-radius: 3px;
  }
  .badge.status-knopf::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--border-strong);
  }
  .badge.good.status-knopf::before { background: var(--status-good); }
  .badge.warning.status-knopf::before { background: var(--status-warning); }
  .badge.critical.status-knopf::before { background: var(--status-critical); }
  .badge.status-knopf:hover { color: var(--brand); }
  /* Bezahlt ist auf Papier keine Pille, sondern ein Stempel. Leicht schief, ausgesperrt,
     doppelte Kontur - die Geste, die man dafuer im echten Leben benutzt. */
  .badge.stempel {
    background: none; border: 2px solid currentColor; border-radius: 3px;
    padding: 2px 8px 1px; font-size: 10px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; transform: rotate(-4deg); opacity: .85;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  }

  /* ============ FEEDBACK-BOARD ============ */
  .fb-ansicht-reihe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  /* Segmentierter Umschalter Liste/Roadmap - gleiches Muster wie der Sprachschalter oben rechts. */
  .fb-view-toggle { display: flex; flex: none; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
  .fb-view-toggle button { padding: 6px 14px; border: none; background: transparent; color: var(--ink-secondary); cursor: pointer; font-size: 12.5px; font-weight: 600; }
  .fb-view-toggle button.an { background: var(--brand); color: var(--auf-brand); }
  /* .fb-view-toggle ist "display:flex" (fuellt die volle Breite des Elternelements) - im
     Feedback-Board steckt es in einer eigenen Flex-Zeile (.fb-ansicht-reihe), die es via
     "flex:none" auf seine Inhaltsbreite zwingt. Im Wiki-Kopf steckt es direkt in .section
     (kein Flex-Elternteil), wo "flex:none" wirkungslos ist - deshalb hier zusaetzlich
     "inline-flex", das von sich aus nur so breit wie der Inhalt wird. */
  .fb-view-toggle.wiki-modus-toggle { display: inline-flex; }
  .fb-filter { display: flex; gap: 6px; flex-wrap: wrap; }
  .fb-filter button { font-size: 12px; padding: 5px 11px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: transparent; color: var(--ink-secondary); cursor: pointer; }
  .fb-filter button.an { background: var(--brand); color: #fff; border-color: var(--brand); }
  /* Kategorie-Chip auf der Karte: eigene, kleine Pille neben dem Status-Abzeichen - Farbe
     kommt inline aus FEEDBACK_KATEGORIE_FARBE (bespannen/trainer/schiedsrichter), damit jede
     Kategorie auf einen Blick unterscheidbar ist, ohne dass man den Text lesen muss. */
  .fb-kategorie-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--pill); font-size: 11px; font-weight: 700; }
  /* Dasselbe Muster fuer die kombinierte Kasse-Liste - eigene Klasse, weil die Farben aus
     KASSE_KATEGORIE_FARBE kommen (Sportarten-Toene + dieselbe Trainer/Schiedsrichter-Zuordnung
     wie schon auf der Uebersicht-Seite), nicht aus FEEDBACK_KATEGORIE_FARBE. */
  .kasse-kategorie-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
  /* Sportart und Modus sind zwei gleichrangige Weichen derselben Seite - also auch zwei
     gleich aussehende Schalter: eine Kapsel, innen geteilt, gleiche Hoehe. Vorher waren es
     zwei breite Kacheln UEBER einer schmalen Kapsel; zusammen mit dem goldenen Knopf und der
     Suchzeile standen am Handy vier verschiedene Knopfformen untereinander, bevor der erste
     Schlaeger kam. Beide Umschalter teilen sich jetzt eine Reihe, die am Handy umbricht.
     WICHTIG zur Groesse: das sind die Hauptbedienelemente der Seite. Sie duerfen nicht
     kleiner wirken als die untere Navigation (Kacheln ~44 px hoch) - sonst sieht das
     Nebenmenue wichtiger aus als die Seite selbst. Daher 44 px Mindesthoehe fuer beide
     Kapseln, nicht die schmale Feedback-Board-Groesse. */
  .wiki-steuerung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  .wiki-intro { margin: 0; max-width: 74ch; }
  .wiki-steuerung > * { min-height: 44px; }
  .wiki-sport-switch {
    display: inline-flex; flex: none; overflow: hidden;
    border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  }
  .wiki-sport-switch button {
    display: inline-flex; align-items: center; align-self: stretch; gap: 8px;
    padding: 0 16px; border: none; background: transparent;
    color: var(--ink-secondary); font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: background .12s, color .12s;
  }
  .wiki-sport-switch button + button { box-shadow: inset 1px 0 0 var(--border); }
  .wiki-sport-switch button .ico {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
    background: var(--surface-2); color: var(--ink-secondary);
  }
  .wiki-sport-switch button:hover:not(.an) { color: var(--ink); }
  .wiki-sport-switch button.an { background: var(--brand); color: var(--auf-brand); }
  .wiki-sport-switch button.an .ico { background: rgba(255,255,255,.25); color: var(--auf-brand); }
  /* Gleiche Hoehe wie die Sportart-Kapsel, damit die beiden nebeneinander ein Paar ergeben. */
  .wiki-steuerung .wiki-modus-toggle button { align-self: stretch; padding: 0 18px; font-size: 14px; }
  @media (max-width: 720px) {
    .wiki-steuerung { gap: 8px; margin-top: 10px; }
    .wiki-intro { font-size: 12.5px; line-height: 1.45; }
  }
  /* Tags statt Freitext: zwei Gruppen, farblich getrennt - Gruppe A (Marke) beschreibt den
     Schlaeger selbst, Gruppe B (Gold) beschreibt die konkrete Bespannung (Saite+Haerte). Dieselbe
     Farbzuordnung fuer Auswahl-Haeckchen (.wiki-tag-chip) und reine Anzeige (.wiki-tag-pill). */
  .wiki-tag-liste { display: flex; flex-wrap: wrap; gap: 6px; }
  .wiki-tag-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px;
    border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
    font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none;
  }
  .wiki-tag-chip input { width: 14px; height: 14px; margin: 0; flex: none; }
  .wiki-tag-chip.a { border-color: color-mix(in srgb, var(--brand) 45%, var(--border-strong)); }
  .wiki-tag-chip.a:has(input:checked) { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); font-weight: 600; }
  .wiki-tag-chip.b { border-color: color-mix(in srgb, var(--gold) 45%, var(--border-strong)); }
  .wiki-tag-chip.b:has(input:checked) { background: var(--gold-wash); border-color: var(--gold); color: var(--gold); font-weight: 600; }
  .wiki-tag-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
  .wiki-tag-pill.a { background: var(--brand-wash); color: var(--brand); }
  .wiki-tag-pill.b { background: var(--gold-wash); color: var(--gold); }
  .wiki-jahr-ueberschrift {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-muted); margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
  }
  .wiki-jahr-ueberschrift:first-child { margin-top: 0; }
  /* ---- Trainer ---- */
  /* Ansicht-Umschalter (Anstehend/Vergangen/Alle/Ausgefallen): echtes Grid statt Flexbox -
     bei Flexbox+Wrap bekommt eine Zeile, die alleine nicht mehr mit den anderen zusammenpasst,
     die volle Breite fuer sich (genau das sah man im Screenshot: "Anstehend" riesig, der Rest
     zusammengequetscht). grid-auto-flow:column macht IMMER gleich breite Spalten, unabhaengig
     von Textlaenge und egal ob 3 oder 4 Reiter da sind. Am Handy zwei feste Spalten (2x2/2+1),
     statt dass das Grid unvorhersehbar umbricht. */
  .trainer-ansicht-switch {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
    background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 14px;
  }
  .trainer-ansicht-switch button {
    border: none; background: transparent; border-radius: 999px; padding: 9px 6px;
    font-size: 12px; font-weight: 600; color: var(--ink-secondary); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .trainer-ansicht-switch button.active { background: var(--brand); color: var(--auf-brand); }
  .trainer-ansicht-zahl { opacity: .75; font-size: 11px; }
  @media (max-width: 720px) {
    .trainer-ansicht-switch { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-gross); }
  }
  /* Sammelauswahl: "Alle auswaehlen"-Haken + Loeschen-Knopf ueber der Liste, Loeschen-Knopf
     taucht erst auf, sobald wirklich etwas angehakt ist - sonst staende dauerhaft ein
     Knopf da, der nichts zu tun haette. */
  .trainer-auswahl-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 10px; flex-wrap: wrap; }
  .trainer-auswahl-alle { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-secondary); cursor: pointer; user-select: none; }
  .trainer-auswahl-alle input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
  .trainer-auswahl-leiste .btn-mini.gefahr { color: var(--status-critical); border-color: var(--status-critical); }
  .trainer-zeile-auswahl { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
  /* Preise/Mannschaften/Einzelpersonen/Bausteine: eingeklappter Kopf + nebeneinanderliegende
     Spalten, wenn aufgeklappt - wickelt am Handy/bei vielen Eintraegen automatisch untereinander. */
  .trainer-verwaltung-kopf {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    border: none; background: none; cursor: pointer; padding: 0; text-align: left; font: inherit;
  }
  .trainer-verwaltung-kopf:hover h2 { color: var(--brand); }
  .trainer-verwaltung-kopf .pfeil { color: var(--ink-muted); font-size: 15px; flex: none; margin-left: 10px; }
  .trainer-verwaltung-spalten { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
  .trainer-verwaltung-spalte {
    flex: 1 1 220px; min-width: 220px; padding: 12px 14px; border-radius: var(--radius-gross);
    background: var(--surface-2);
  }
  .trainer-verwaltung-spalte h4 {
    margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
  }
  .trainer-verwaltung-spalte .hint { display: block; font-size: 12px; color: var(--ink-secondary); margin: 0 0 10px; }
  /* Klare Liste statt einer verschwimmenden Chip-Wolke - jeder Eintrag eine eigene Zeile mit
     Farbpunkt/Name/Loeschen, das "+ Neu"-Formular sichtbar ABGESETZT darunter statt wie ein
     weiterer Eintrag mitten in der Liste zu wirken. */
  .trainer-verwaltung-liste { display: flex; flex-direction: column; gap: 6px; }
  .trainer-verwaltung-zeile {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px;
    border-radius: 8px; background: var(--surface);
  }
  .trainer-verwaltung-punkt {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff;
  }
  .trainer-verwaltung-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); border: none; background: transparent; font-family: inherit; padding: 0; }
  .trainer-verwaltung-name:focus { outline: none; }
  .trainer-verwaltung-betrag { display: flex; align-items: center; gap: 3px; color: var(--ink-secondary); font-size: 12px; flex: none; }
  .trainer-verwaltung-betrag input { width: 42px; border: none; background: transparent; font: inherit; font-family: var(--font-mono); color: var(--ink-secondary); padding: 0; text-align: right; }
  .trainer-verwaltung-betrag input:focus { outline: none; }
  .trainer-verwaltung-leer { font-size: 12.5px; color: var(--ink-secondary); margin: 0 0 8px; }
  .trainer-verwaltung-neu {
    display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
  }
  .trainer-verwaltung-neu input {
    border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; font: inherit;
    font-size: 12.5px; background: var(--surface); color: var(--ink); min-width: 0;
  }
  .trainer-verwaltung-neu input[name="name"] { flex: 1; }
  .trainer-verwaltung-neu input[name="preis"] { width: 56px; flex: none; }
  .trainer-notiz-feld {
    width: 100%; margin-top: 8px; resize: vertical; font: inherit; font-size: 13px;
    padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink);
  }
  /* "Hat stattgefunden": zwei eigene Knoepfe statt einer Checkbox - keiner aktiv, solange
     nichts bestaetigt/abgesagt wurde. */
  .trainer-statt-knoepfe { display: flex; gap: 5px; }
  .trainer-statt-btn {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-secondary);
    font-size: 13px; font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1;
  }
  .trainer-statt-btn.aktiv-ja { background: var(--status-good); border-color: var(--status-good); color: #fff; }
  .trainer-statt-btn.aktiv-nein { background: var(--status-critical); border-color: var(--status-critical); color: #fff; }
  /* Trainingsstunden-Karte: Loeschen klein oben rechts (statt eine ganze Knopfreihe fuer sich
     zu beanspruchen). Info-Zeile (Preis-Chip + Plan nebeneinander, bricht bei Bedarf um) UND
     Aktions-Zeile (✓/✕, Zahlung, Plan, Bearbeiten) je eine eigene Zeile darunter - auf
     Nutzerwunsch, damit der Plan zwischen den Chips und den Knoepfen steht statt ganz unten. */
  .trainer-zeile-karte {
    position: relative; padding: 14px 16px; margin-bottom: 10px;
    border-radius: var(--radius-gross); border: 1px solid var(--border-strong); background: var(--surface);
  }
  .trainer-zeile-loeschen { position: absolute; top: 10px; right: 10px; }
  .trainer-zeile-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-right: 26px; }
  .trainer-zeile-kopf b { font-size: 15px; }
  .trainer-zeile-datum { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
  .trainer-zeile-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .trainer-zeile-notiz-text { font-size: 13px; color: var(--ink-secondary); }
  .trainer-zeile-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .trainer-zeile-aktionen .btn-mini { padding: 7px 13px; font-size: 12.5px; }
  .trainer-plan-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--gold-wash); color: var(--gold); }
  .trainer-plan-editor { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); }
  .trainer-plan-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .trainer-plan-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px;
    border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
    font-size: 12.5px; cursor: pointer; user-select: none;
  }
  .trainer-plan-chip input { width: 14px; height: 14px; margin: 0; }
  .trainer-plan-chip.an { background: var(--gold-wash); border-color: var(--gold); color: var(--gold); font-weight: 600; }
  .fb-liste { display: flex; flex-direction: column; gap: 10px; }
  /* Roadmap: eine Spalte je Status, nebeneinander scrollbar statt gequetscht - am Handy
     wischt man einfach durch, genau wie man es von einem Kanban-Brett kennt. */
  .fb-roadmap { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
  /* Frueher eine graue Box, in der graue Karten lagen - Karte in Karte, genau das, was eine
     Ansicht schwammig macht. Jetzt traegt eine kraeftige Kopflinie die Spalte, die Karten
     stehen hell auf der Seite und heben sich dadurch von selbst ab. */
  .fb-spalte { flex: 0 0 270px; display: flex; flex-direction: column; gap: 10px; padding: 0; }
  .fb-spalte-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-bottom: 8px; border-bottom: 2px solid var(--rule-stark);
  }
  .fb-spalte-kopf b, .fb-spalte-kopf > span:first-child {
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  }
  .fb-spalte-anzahl { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); }
  .fb-spalte-karten { display: flex; flex-direction: column; gap: 8px; }
  .fb-leer-spalte { font-size: 12.5px; color: var(--ink-muted); padding: 6px 2px; }
  /* Auf Tablet/Handy ist seitliches Wischen durch fuenf Spalten unbequem - dort werden
     die Spalten stattdessen ganz normal untereinander gestapelt, wie jeder andere Abschnitt
     auch. Kein horizontales Scrollen mehr noetig. */
  @media (max-width: 900px) {
    .fb-roadmap { flex-direction: column; overflow-x: visible; }
    .fb-spalte { flex: 1 1 auto; width: 100%; }
  }
  /* Wiki: Hersteller als Zwischenueberschrift - aus der Kachelwand wird ein Katalog. Der
     Hersteller-Filter daneben bleibt, das eine ersetzt das andere nicht. */
  .wiki-gruppen-kopf {
    display: flex; align-items: center; gap: 9px;
    margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule-stark);
  }
  .wiki-gruppen-kopf:first-child { margin-top: 0; }
  .wgk-punkt { width: 9px; height: 9px; border-radius: 2px; flex: none; }
  .wgk-name { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-secondary); }
  .wgk-zahl { margin-left: auto; font-size: 11.5px; color: var(--ink-muted); }
  /* Belastbarkeit des Durchschnitts: Beitraege im Verhaeltnis zum bestbelegten Modell. */
  .wiki-beleg { display: block; width: 54px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; flex: none; }
  .wiki-beleg i { display: block; height: 100%; background: var(--brand); }
  .wiki-eigener { color: var(--gold); }
  .fb-karte { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); align-items: flex-start; box-shadow: var(--shadow); transition: border-color .15s ease, transform .12s ease, box-shadow .18s ease; }
  @media (hover: hover) {
    .fb-karte:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); }
  }
  .fb-karte:active { transform: translateY(0); }
  .fb-karte.hervorgehoben { border-color: var(--status-warning); border-left-width: 3px; background: linear-gradient(90deg, var(--status-warning-wash), var(--surface-2) 40%); }
  .fb-inhalt:hover .fb-titel { color: var(--brand); }
  .fb-stimme { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 9px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; flex: none; color: var(--ink-secondary); font-family: var(--font-mono); }
  .fb-stimme.an { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
  .fb-stimme .fb-pfeil { font-size: 11px; line-height: 1; }
  .fb-stimme .fb-anzahl { font-size: 14.5px; font-weight: 700; }
  .fb-inhalt { flex: 1; min-width: 0; cursor: pointer; }
  .fb-titel { font-weight: 600; margin-bottom: 3px; }
  /* Schläger-Wiki-Karte: Name links, Beitragszahl rechts auf DERSELBEN Zeile, wenn Platz ist -
     sonst faellt sie per flex-wrap von selbst auf eine eigene Zeile darunter. Kein fester
     Abstand reserviert, damit die Karte im umgebrochenen Fall nicht unnoetig hoch wird - der
     Name rutscht dann einfach mit hoch, statt dass eine Luecke stehen bleibt. */
  .wiki-modell-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
  .wiki-modell-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  /* Hintergrund/Text kommen jetzt direkt aus der festen WIKI_HERSTELLER_PALETTE (Inline-Style),
     nicht mehr per color-mix() aus einer Theme-Variable - siehe wikiHerstellerFarbe(). */
  .wiki-modell-chip {
    font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  }
  /* Ab 1100px (istSchmal()): feste Namensspalte statt frei fliessender Chips - jede Karte
     faengt die Chips an derselben Stelle an (Variante B, Nutzerwunsch). */
  .wiki-modell-kopf-breit { display: flex; align-items: center; gap: 14px; }
  .wiki-modell-name-spalte {
    width: 190px; flex: none; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fb-text { font-size: 13.5px; color: var(--ink-secondary); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .fb-fuss { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-muted); }
  .fb-detail-text { font-size: 14px; color: var(--ink-secondary); white-space: pre-wrap; margin: 10px 0 16px; }
  .fb-kommentare { margin-top: 10px; }
  .fb-kommentar { padding: 10px 0; border-top: 1px solid var(--border); }
  .fb-kommentar:first-child { border-top: none; }
  .fb-kommentar-kopf { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; flex-wrap: wrap; }
  .fb-kommentar-name { font-weight: 600; font-size: 13px; }
  .fb-kommentar-team { font-size: 10.5px; padding: 1px 7px; border-radius: var(--pill); background: var(--brand-wash); color: var(--brand); font-weight: 600; }
  .fb-kommentar-zeit { font-size: 11.5px; color: var(--ink-muted); }
  .fb-kommentar-text { font-size: 13.5px; white-space: pre-wrap; }
  .fb-leer { text-align: center; padding: 30px 10px; color: var(--ink-muted); font-size: 13.5px; }

  /* EINE Regel statt elf Sonderfaellen: Eine Klasse mit "display:flex/grid/block" schlaegt
     sonst die eingebaute [hidden]-Regel des Browsers, und das Element bleibt trotz hidden
     sichtbar. Dieser Fehler hat hier schon dreimal zugeschlagen (.sk-kopf, .sp-chip,
     .auth-btn) und wurde jedes Mal einzeln geflickt. 310 Klassen setzen display - jede
     naechste koennte es wieder ausloesen. Mit !important ist die Klasse fuer immer erledigt;
     die vorhandenen Einzelregeln darunter sind dadurch nur noch ueberfluessig, nicht falsch. */
  /* Sagt an, dass sich Felder von selbst gefuellt haben und woher - mit einem Knopf zum
     Raeumen. Volle Breite unter der Formularzeile, damit die Zeile darueber nicht springt. */
  .uebernahme-hinweis {
    flex: 1 1 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: -2px 0 4px; padding: 6px 10px; border-radius: 7px;
    background: var(--brand-wash); color: var(--ink-secondary); font-size: 12px;
  }

  [hidden] { display: none !important; }

  .rest-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
  .rest-bar { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; flex: none; }
  .rest-bar > span { display: block; height: 100%; border-radius: 3px; }
  /* Gleiche Optik wie .rest-bar, nur volle Breite - fuer den Frische-Balken auf der
     Profil-Seite, der neben einem Text steht statt neben einer Zahl. */
  .profil-frische-bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
  .profil-frische-bar > span { display: block; height: 100%; border-radius: 3px; }

  /* Restbalken einer Rolle (Bestand-Seite). Vorher ein 56-px-Stummel unter einer 24-px-Zahl:
     er sagte weder, wie voll die Rolle einmal war, noch wie nah die Nachbestellung ist.
     Jetzt misst er in BESPANNUNGEN - jede Kerbe ist eine. Das ist die Einheit, in der die
     Warnschwelle eingestellt wird ("warnen, wenn nur noch 3 Bespannungen reichen") und in der
     man ueber eine Rolle nachdenkt; "reicht noch fuer 6" laesst sich damit abzaehlen, statt
     dem Satz darunter glauben zu muessen. Links liegt die Reserve wie das rote Feld einer
     Tankanzeige - sie braucht keine Legende, weil jeder dieses Bild kennt. */
  .roll-balken {
    position: relative; display: block; width: 100%; height: 14px;
    border-radius: 7px; background: var(--surface-3); overflow: hidden;
  }
  .roll-balken .rb-fuell {
    position: absolute; left: 0; top: 0; bottom: 0; width: var(--anteil);
    background: var(--farbe); border-radius: 7px;
  }
  /* Die Nachbestell-Marke ist genau eine der Kerben - die dritte von links, wenn die Schwelle
     bei drei Bespannungen steht -, nur rot. Deshalb eine Linie und keine getoente Flaeche:
     Rot ueber Gruen wird zu schmutzigem Gruen, das nach Darstellungsfehler aussieht statt
     nach Warnung. Sie liegt ueber den Kerben, sonst wuerde die weisse Kerbe an derselben
     Stelle sie uebermalen. */
  .roll-balken .rb-reserve {
    position: absolute; left: var(--reserve); top: 0; bottom: 0;
    width: 2px; margin-left: -1px; z-index: 2; background: var(--status-critical);
  }
  .roll-balken.gekerbt::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(to right,
      transparent 0, transparent calc(var(--kerbe) - 1.5px),
      var(--surface) calc(var(--kerbe) - 1.5px), var(--surface) var(--kerbe));
  }
  /* Die Startlaenge gibt dem Balken einen Massstab: ohne sie ist "halb voll" eine Behauptung. */
  .sk-von { margin-left: auto; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--ink-secondary); }

  /* ============ FORMS (add row) ============ */
  .add-row-form {
    display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: flex-end;
    padding: var(--raum-4) var(--raum-5); border-top: 1px dashed var(--border-strong);
    background: var(--surface-2);
  }
  /* Erzwingt einen Zeilenumbruch zwischen thematischen Gruppen im Formular (Wer/Wann,
     Details, Saite, Verbrauch, Preis) - eine schmale, gestrichelte Trennlinie statt nur
     Leerraum, damit auf einen Blick klar ist, was zusammengehoert. */
  .add-row-trenner { flex-basis: 100%; height: 0; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
  /* Erzwingt zwei Felder nebeneinander, unabhaengig von der Bildschirmbreite - am Handy sonst
     oft nur ein einzelnes schmales Feld pro Zeile, das macht das Formular unnoetig lang. */
  .feld-paar { display: flex; gap: 8px; flex-basis: 100%; min-width: 0; }
  .feld-paar .field { flex: 1 1 0; min-width: 0; }
  /* Wie .feld-paar, aber NUR am Handy aktiv - display:contents laesst die Felder auf breiten
     Bildschirmen unveraendert als eigene, unabhaengige Flex-Items im Formular mitlaufen (exakt
     wie vorher), erst unter 640px wird daraus eine echte Zweier-Reihe. Fuer Felder, die eng
     zusammengehoeren, aber am Desktop schon genug Platz haben, um einzeln zu stehen. */
  .feld-paar-handy { display: contents; }
  @media (max-width: 720px) {
    .feld-paar-handy { display: flex; gap: 8px; flex-basis: 100%; min-width: 0; }
    .feld-paar-handy .field { flex: 1 1 0; min-width: 0; }
  }
  /* Kleine Abschnitts-Labels ("Wer & wann", "Saite", ...) - nur am Handy, wo die Feldwand ohne
     Orientierung schnell unuebersichtlich wirkt. Am Desktop verrieten die Trennlinien allein
     schon genug Struktur, ein zusaetzliches Label waere dort nur Redundanz. */
  .formular-abschnitt { display: none; }
  @media (max-width: 720px) {
    .formular-abschnitt {
      display: block; flex-basis: 100%;
      font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      color: var(--ink-muted); margin: 0 0 2px;
    }
  }
  /* min-width: 0 und max-width: 100% sind hier Pflicht: Ein Auswahlfeld wird sonst so
     breit wie seine laengste Option - seit die Saiten Farbe und Staerke im Namen tragen,
     schob das die ganze Seite ueber den Bildschirmrand hinaus. */
  .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
  /* Ohne das hier gewinnt "display:flex" gegen die eingebaute [hidden]-Regel des Browsers -
     Autoren-CSS schlaegt immer die UA-Vorgabe, egal wie spezifisch. Betraf u.a. "Welche Saite
     hat der Kunde mitgebracht?": stand als hidden im DOM, war aber trotzdem sichtbar. */
  .field[hidden] { display: none; }
  .field select { max-width: 100%; }
  .field label { font-size: var(--t-etikett); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); font-weight: 600;}
  .field input, .field select {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    padding: var(--raum-2) var(--raum-3);
    font-size: var(--t-basis);
    min-width: 84px;
  }
  .field.grow input { min-width: 150px; }
  .field.small input { min-width: 64px; }
  /* Sichtbarer Fokusring statt nur einer eingefaerbten Kante - hilft bei Tastaturbedienung
     und laesst das Feld beim Tippen "aktiv" wirken. brand-wash gibt es in jeder Gestaltung. */
  .field input:focus, .field select:focus, .search-box:focus-within {
    border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash);
  }
  .field input, .field select { transition: border-color .15s ease, box-shadow .15s ease; }
  .btn {
    border: none; border-radius: var(--radius); padding: var(--raum-2) var(--raum-4); cursor: pointer;
    font-weight: 600; font-size: var(--t-basis); background: var(--brand); color: var(--auf-brand);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
    transition: background .15s ease, color .15s ease, box-shadow .18s ease, transform .12s ease;
  }
  /* brand-strong ist in JEDER Gestaltung dunkel - beim Ueberfahren also wieder weiss. */
  .btn:hover { background: var(--brand-strong); color: #fff; box-shadow: var(--schatten-2), inset 0 1px 0 rgba(255,255,255,.14); transform: translateY(-1px); }
  /* Beim Druecken wieder auf die Flaeche zurueck - der kurze Weg nach unten ist das, was
     einen Knopf koerperlich statt gemalt wirken laesst. */
  .btn:active { transform: translateY(0); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14); }
  /* Der Geister-Knopf ist die leise Zweitwahl - der bleibt bewusst flach, sonst konkurriert
     er optisch mit dem Hauptknopf daneben. */
  .btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); box-shadow: none; }
  .btn.ghost:hover { background: var(--brand-wash); box-shadow: none; transform: none; }
  .btn.gold { background: var(--gold); color: var(--auf-gold); }
  /* --ink-muted ist fuer grosse oder rein schmueckende Schrift gedacht. Hier stehen
     Erklaersaetze in 12 px - die kamen damit auf 2,8:1 und waren schwer zu lesen. */
  .note { font-size: 12px; color: var(--ink-secondary); margin-top: 8px; }
  .note.warn { color: var(--status-warning); }

  /* ============ SEARCH / MISC ============ */
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-strong); border-radius: 8px;
    padding: 7px 12px; background: var(--surface); max-width: 320px;
  }
  .search-box input { border: none; outline: none; background: transparent; width: 100%; font-size: 13.5px; color: var(--ink); }

  .player-lookup { padding: 18px 20px; }
  /* Zuletzt bespannte Spieler als Knoepfe - fuellt die frueher leere Flaeche rechts neben
     dem Suchfeld und ist meistens schneller als tippen. */
  /* Eine Zeile: Suchfeld links, Namen rechts daneben. Der Block wird dadurch nicht hoeher,
     egal wie breit der Bildschirm ist - was nicht mehr hineinpasst, ist seitlich erreichbar
     statt in einer zweiten Reihe. */
  .pl-zeile { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .pl-zeile input[type="search"] { flex: 0 1 260px; min-width: 150px; }
  /* Kein seitliches Scrollen (ausdruecklicher Nutzerwunsch): was nicht ganz hineinpasst,
     wird gar nicht erst gezeigt. Welche das sind, rechnet spielerChipsAnpassen() nach dem
     Zeichnen aus - rein per CSS liesse sich nur mittendrin abschneiden. */
  .sp-chips {
    display: flex; flex-wrap: nowrap; gap: 8px; flex: 1 1 auto; min-width: 0;
    overflow: hidden;
  }
  .sp-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: none;
    text-align: left; cursor: pointer; font: inherit; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 12px;
  }
  /* Ohne diese Zeile bliebe ein ausgeblendeter Knopf sichtbar: die Klasse setzt display:flex
     und schlaegt damit die eingebaute [hidden]-Regel. Dieselbe Falle wie schon mehrfach. */
  .sp-chip[hidden] { display: none; }
  .sp-chip:hover { border-color: var(--brand); background: var(--brand-wash); }
  .sp-chip-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .sp-chip-datum { font-size: 10.5px; color: var(--ink-muted); font-family: var(--font-mono); }
  /* Am Handy ist neben dem Suchfeld kein Platz mehr - dort die Namen in eine eigene, aber
     weiterhin EINZEILIGE Reihe darunter. Kostet eine Zeile, nicht mehrere. */
  @media (max-width: 720px) {
    .pl-zeile { flex-direction: column; align-items: stretch; gap: 10px; }
    .pl-zeile input[type="search"] { flex: none; }
  }
  /* Am Handy zaehlt, dass ueberhaupt ein paar Namen dastehen - das Datum kostet dort zu viel
     Breite und steht ohnehin in der Kundenkarte. Ohne es passen drei statt zwei. */
  @media (max-width: 560px) {
    .sp-chip { padding: 8px 10px; }
    .sp-chip-datum { display: none; }
  }
  .player-lookup select { width: 100%; max-width: 320px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-size: 14.5px; margin-bottom: 14px; }
  .stat-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; }
  .stat-tile { background: var(--surface-2); border-radius: 9px; padding: 10px 12px; }
  .stat-tile .k { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
  .stat-tile .v { font-family: var(--font-display); font-weight: var(--zahl-weight); letter-spacing: var(--display-spacing); font-size: 19px; margin-top: 2px; }

  /* Die Zahlungs-Tabellen stehen zu zweit nebeneinander und haben nur vier schmale Spalten -
     die globale Mindestbreite von 640px schob dort ausgerechnet den Bezahlt-Schalter hinter
     den Seitwaerts-Scroll. */
  .tabelle-schmal table { min-width: 330px; }
  .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
  @media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } }
  /* Ist nur eine Seite (z.B. nur Badminton oder nur Tennis) sichtbar, füllt sie die ganze Breite. */
  .split > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Ein Saitenbett ist ein Raster aus gekreuzten Linien - als hauchzartes Wasserzeichen wird
     daraus das Erkennungszeichen der App. Hier hinter leeren Zustaenden: ruhig, aber nicht tot.
     Als Hintergrundbild statt als Pseudo-Element, damit der Text ohne z-index darueber bleibt. */
  /* Erste Fassung war ein gekreuztes Raster - das las sich aber als Karopapier statt als
     Saitenbett (Nutzer-Feedback). Jetzt nur noch die Laengssaiten, sehr weit auseinander und
     sehr blass: derselbe Gedanke, aber ruhig statt kariert. */
  .saitenbild, .empty-note {
    background-image:
      repeating-linear-gradient(to right, color-mix(in srgb, var(--brand) 7%, transparent) 0 1px, transparent 1px 14px);
  }
  .empty-note { padding: 26px 18px; color: var(--ink-muted); font-size: 13px; text-align: center; }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  .top-actions { display: flex; gap: 8px; }

  ::-webkit-scrollbar { height: 10px; width: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }


  /* ============ STARTSEITE (nicht angemeldet) ============ */
  /* Liegt über allem, bis feststeht, wer angemeldet ist. Solange sie sichtbar ist,
     wurde noch nichts aus der Datenbank geladen - die App dahinter ist absichtlich leer. */
  /* Liegt ueber allem, auch ueber der Anmeldeseite. */
  .start-schirm {
    position: fixed; inset: 0; z-index: 400;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    transition: opacity .25s ease;
  }
  .start-schirm[hidden] { display: none; }
  .start-schirm.fort { opacity: 0; pointer-events: none; }
  .start-schirm svg { width: 68px; height: 68px; border-radius: 16px; }
  .ss-balken {
    width: 132px; height: 3px; border-radius: 2px; overflow: hidden;
    background: var(--border-strong);
  }
  .ss-balken i {
    display: block; width: 40%; height: 100%; border-radius: 2px;
    background: var(--brand); animation: ss-lauf 1.15s ease-in-out infinite;
  }
  @keyframes ss-lauf {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(360%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ss-balken i { animation: none; width: 100%; opacity: .5; }
  }
  .auth-gate {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg); color: var(--ink);
    overflow-y: auto;
  }
  .auth-gate[hidden] { display: none; }
  /* ---- Startseite: Breite ----
     Frueher fest 1080 px. Auf einem 27-Zoll-Bildschirm stand die Seite damit als schmale
     Saeule in der Mitte und liess links und rechts je ein Drittel leer. Jetzt waechst sie
     mit - und die Raster darin bekommen mehr Spalten statt breiterer Kaesten. */
  .lp {
    width: 100%; max-width: 1560px; margin: 0 auto;
    padding: 0 clamp(14px, 3.4vw, 60px);
    box-sizing: border-box;
  }
  /* Die App zeigt nur noch die Anmeldung - eine schmale Spalte, mittig. */
  .lp.lp-anmeldung { max-width: 560px; display: flex; flex-direction: column; min-height: 100vh; }
  .anmelde-karte { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 30px 0; }
  .lp-anmeldung .anmelde-box { position: static; width: 100%; max-width: none; }
  .anmelde-zurueck { align-self: center; font-size: 13.5px; color: var(--ink-secondary); text-decoration: none; }
  .anmelde-zurueck:hover { color: var(--brand); text-decoration: underline; }

  .lp-top-los {
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
    border-radius: 999px; padding: 8px 16px; font-family: inherit; font-size: 13px;
    font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  .lp-top-los:hover { border-color: var(--brand); color: var(--brand); }
  @media (max-width: 720px) { .lp-top-los { display: none; } }

  /* Die drei Haken unter dem Knopf - kurze Antworten auf die Fragen, die man sich
     stellt, bevor man irgendwo auf "loslegen" drueckt. */
  .lp-haken { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .lp-haken li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; color: var(--ink-secondary);
  }
  .lp-haken li::before {
    content: "✓"; flex: none; color: var(--brand); font-weight: 700; line-height: 1.5;
  }

  /* Sachliches Band unter dem Aufmacher. */
  .lp-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: 13px; overflow: hidden; margin-top: 8px;
  }
  .lp-band-eintrag {
    background: var(--surface); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .lp-band-eintrag b {
    font-family: var(--font-display); font-weight: var(--display-weight);
    font-size: clamp(17px, 1.5vw, 22px); color: var(--brand); line-height: 1.15;
  }
  .lp-band-eintrag span { font-size: 12.5px; color: var(--ink-secondary); }

  /* Zeichen statt Zaehlnummern in den Merkmalen - eine "4" sagt nichts ueber das Merkmal. */
  .lp-feature .ic svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Vorratsrolle als Ausschnitt - die einzige Zahl auf der Seite, die sich von selbst bewegt. */
  .shot-rolle { display: flex; flex-direction: column; gap: 5px; }
  .shot-rolle + .shot-rolle { border-top: 1px dashed var(--border-strong); padding-top: 11px; }
  .sr-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .sr-kopf b { font-size: 13px; color: var(--ink); font-weight: 600; }
  .sr-preis { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
  .sr-zahl {
    font-family: var(--font-display); font-weight: var(--display-weight);
    font-size: 23px; color: var(--brand); line-height: 1;
  }
  .sr-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
  .sr-bar i { display: block; height: 100%; background: var(--status-good); border-radius: 3px; }
  .sr-bar i.knapp { background: var(--status-critical); }
  .sr-note { font-size: 11.5px; color: var(--ink-secondary); }
  .sr-note.kritisch { color: var(--status-critical); }

  /* Gegenueberstellung */
  .lp-vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
  .lv-spalte {
    border: 1px solid var(--border); border-radius: 13px; padding: 20px 22px;
    background: var(--surface);
  }
  .lv-spalte.alt { background: var(--surface-2); }
  .lv-spalte.neu { border-color: var(--brand); }
  .lv-spalte h3 {
    margin: 0 0 12px; font-family: var(--font-display); font-weight: var(--display-weight);
    font-size: 17px; color: var(--ink);
  }
  .lv-spalte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .lv-spalte li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.5; color: var(--ink-secondary);
  }
  .lv-spalte li::before { flex: none; font-weight: 700; line-height: 1.5; }
  .lv-spalte.alt li::before { content: "–"; color: var(--ink-muted); }
  .lv-spalte.neu li::before { content: "✓"; color: var(--brand); }

  /* Haeufige Fragen. <details> statt eigener Klapptechnik: das kann der Browser selbst,
     es funktioniert ohne JavaScript und die Suchmaschine liest den Text trotzdem. */
  .lp-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; align-content: start; }
  .lp-frage {
    border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
    padding: 0 16px; align-self: start;
  }
  .lp-frage summary {
    cursor: pointer; list-style: none; padding: 14px 0;
    font-size: 14.5px; font-weight: 600; color: var(--ink);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .lp-frage summary::-webkit-details-marker { display: none; }
  .lp-frage summary::after { content: "+"; color: var(--ink-muted); font-size: 18px; flex: none; line-height: 1; }
  .lp-frage[open] summary::after { content: "–"; }
  .lp-frage[open] summary { border-bottom: 1px solid var(--border); }
  .lp-frage p { margin: 0; padding: 12px 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-secondary); }
  .lp-frage summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

  /* --- Kopfzeile --- */
  .lp-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 0 0;
  }
  /* Auf der Startseite steht das Zeichen im eigenen hellen Feld - es traegt seinen
     Papiergrund mit, damit es auf hellem wie dunklem Untergrund gleich aussieht. */
  .lp-brand {
    display: flex; align-items: center; gap: 11px;
    font-family: var(--font-display); font-weight: 300;
    font-size: 17px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink); line-height: 1;
  }
  .lp-brand svg { width: 34px; height: 34px; flex: none; }
  @media (max-width: 720px) {
    .lp-brand { font-size: 14px; letter-spacing: .16em; gap: 9px; }
    .lp-brand svg { width: 28px; height: 28px; }
  }
  .lp-top-right { display: flex; align-items: center; gap: 10px; }

  /* --- Hero --- */
  .lp-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 46px; align-items: center; padding: 56px 0 40px;
  }
  @media (max-width: 900px) { .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 34px 0 26px; } }
  .lp-hero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .lp-eyebrow {
    font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted);
  }
  .lp-hero h1 {
    font-family: var(--font-display); font-weight: var(--display-weight);
    font-size: clamp(38px, 5.6vw, 62px); line-height: 1.02; margin: 0;
    letter-spacing: -.005em; text-wrap: balance; color: var(--ink);
  }
  .lp-hero h1 em { font-style: normal; color: var(--brand); }
  .lp-lead { font-size: 18px; line-height: 1.55; color: var(--ink-secondary); max-width: 46ch; }

  /* --- Anmeldebereich --- */
  .lp-signin { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 340px; }
  .auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px 20px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--brand); background: var(--brand-strong); color: #fff;
    font-size: 15.5px; font-weight: 700;
  }
  .auth-btn:hover { background: var(--brand); color: var(--surface); }
  .auth-btn[disabled] { opacity: .55; cursor: default; }
  /* Derselbe .sk-kopf-Fehlertyp: "display:flex" in der Klasse schlaegt sonst das [hidden]-
     Attribut (Autoren-Regel gewinnt immer gegen die UA-Standardregel), zusammengesetzter
     Selektor holt das [hidden]-Verhalten zurueck - siehe btnHerkunftSonstigesWeiter. */
  .auth-btn[hidden] { display: none; }
  .auth-btn .g {
    width: 21px; height: 21px; flex: none; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 14px; color: #4285f4;
  }
  .auth-btn.hell { margin-top: 2px; }

  .auth-trenner {
    display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
    font-size: 12px; color: var(--ink-secondary); text-transform: uppercase; letter-spacing: .1em;
  }
  .auth-trenner::before, .auth-trenner::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
  }
  .auth-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  /* :not([hidden]) statt einfach "#vertragGate { display:flex }" - eine ID-Regel schlaegt sonst
     unbedingt die Klassen+Attribut-Regel ".auth-gate[hidden]{display:none}" weiter oben (hoehere
     Spezifitaet gewinnt IMMER, unabhaengig vom hidden-Attribut) - derselbe Fehlertyp wie beim
     .sk-kopf-Fund vom selben Tag. */
  #vertragGate:not([hidden]) { display: flex; align-items: center; justify-content: center; padding: 24px; }
  #vertragGate .anmelde-box { max-width: 440px; width: 100%; }
  .vertrag-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-secondary); margin: 0 0 16px; }
  .vertrag-haken {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    font-size: 13px; line-height: 1.5; color: var(--ink-secondary); margin-bottom: 18px;
  }
  .vertrag-haken input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--brand); cursor: pointer; }
  .vertrag-haken a { color: var(--brand); }
  /* Herkunfts-Frage: Antworten als tippbare Kacheln statt Dropdown - ein Tipp reicht,
     kein Aufklappen+Auswaehlen+Bestaetigen fuer eine einzelne, unverbindliche Frage. */
  .herkunft-optionen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
  .herkunft-option {
    padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13px;
    cursor: pointer;
  }
  .herkunft-option:hover { border-color: var(--brand); color: var(--brand); }
  .herkunft-option.aktiv { background: var(--brand); border-color: var(--brand); color: #fff; }

  /* Persoenliche Begruessung nach der Anmeldung. Bewusst wie ein kurzer Brief gesetzt und
     nicht wie ein Systemhinweis - der Punkt ist ja gerade, dass hier ein Mensch spricht. */
  .willk-kopf { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
  .willk-siegel {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
    font-family: var(--font-display, inherit); font-size: 18px; font-weight: 600;
  }
  .willk-absender { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .willk-rolle { font-size: 12.5px; color: var(--ink-muted); }
  .willk-text { font-size: 14px; line-height: 1.62; color: var(--ink-secondary); margin: 0 0 14px; }
  .willk-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 11px; }
  .willk-liste li {
    position: relative; padding-left: 16px;
    font-size: 13.5px; line-height: 1.55; color: var(--ink-secondary);
  }
  .willk-liste li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
  }
  .willk-liste b { color: var(--ink); font-weight: 600; }

  /* Wer-bin-ich-Zeile ueber dem Wiki-Formular und auf der Beitragskarte. */
  .wiki-absender {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    font-size: 13px; color: var(--ink-muted);
    padding: 9px 12px; margin-bottom: 10px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  }
  .wiki-absender b { color: var(--ink); font-weight: 600; }
  .wiki-absender .wa-hinweis { flex-basis: 100%; font-size: 12px; }
  .wiki-beitrag-fuss {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--ink-muted);
  }
  .wiki-beitrag-fuss .wbf-name { color: var(--ink); font-weight: 600; }
  .auth-feld { display: flex; flex-direction: column; gap: 5px; }
  .auth-feld span {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-muted);
  }
  .auth-feld input {
    width: 100%; box-sizing: border-box;
    padding: 12px 13px; border-radius: 9px;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--ink); font-size: 15px; font-family: inherit;
  }
  .auth-feld input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
  .auth-feld[hidden] { display: none; }
  .auth-links {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 11px 0 14px;
  }
  .auth-link {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--brand); text-decoration: underline;
  }
  .auth-link:hover { color: var(--brand-strong); }
  .auth-gut {
    font-size: 13.5px; color: var(--status-good);
    background: var(--status-good-wash); border-radius: 8px; padding: 10px 12px;
    width: 100%; box-sizing: border-box;
  }
  .auth-gut[hidden] { display: none; }
  /* Der eine grosse Knopf. Bewusst deutlich groesser und anders als alles andere auf der
     Seite - er ist die einzige Handlung, um die es hier geht. */
  /* ---- Ablauf-Abschnitt auf der Startseite ---- */
  .lp-abschnitt-text {
    font-size: 15px; color: var(--ink-secondary); margin: -6px 0 22px; max-width: 60ch;
  }
  .lp-ablauf {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px;
  }
  .lp-schritt {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 20px 20px 18px;
  }
  .lp-schritt .nr {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; margin-bottom: 12px;
    background: var(--brand-strong); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
  }
  .lp-schritt h3 { margin: 0 0 6px; font-size: 17px; }
  .lp-schritt p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-secondary); }
  .lp-mini {
    background: var(--surface-2); border-radius: 9px; padding: 11px 12px;
  }
  .mini-zeile {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding: 3px 0; font-size: 12.5px;
  }
  .mini-k { color: var(--ink-secondary); }
  .mini-v { font-family: var(--font-mono); color: var(--ink); }
  .mini-v.gold { color: var(--gold); }
  .mini-balken {
    height: 5px; border-radius: 3px; background: var(--surface-3); margin-top: 8px; overflow: hidden;
  }
  .mini-balken i { display: block; height: 100%; background: var(--gold); }
  /* Nutzungsauswertung (Admin): dezente Zwischenkoepfe statt gleichrangiger Karten-Titel ueberall -
     gliedert die Seite in Konten/Bespannungen/Bereiche/Verteilungen/Je Konto, ohne so schwer wie
     ein echtes <h2> zu wirken. */
  .anutz-unterkopf {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-muted); margin: 0 0 8px;
  }
  /* Zwangsabmeldung ist eine seltene, riskante Aktion - eingeklappt statt permanent sichtbar,
     damit sie auf dieser sonst informativen Seite nicht wie eine gleichrangige Kennzahl wirkt. */
  .anutz-verwaltung { border-top: 1px solid var(--border); padding-top: 14px; }
  .anutz-verwaltung summary {
    cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-muted);
  }
  .mini-status {
    margin-top: 8px; padding: 5px 9px; border-radius: 6px; text-align: center;
    background: var(--status-critical-wash); color: var(--status-critical);
    font-size: 12px; font-weight: 600;
  }

  /* Kopf der Kundenkarten-Ansicht */
  .shot-karte-kopf {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .skk-name { font-size: 16px; font-weight: 600; color: var(--ink); }
  .skk-sub { font-size: 11.5px; color: var(--ink-secondary); margin-top: 2px; }
  .skk-offen {
    display: flex; flex-direction: column; align-items: flex-end; flex: none;
    font-family: var(--font-mono); font-size: 16px; color: var(--status-critical);
  }
  .skk-offen span {
    font-family: var(--font-body); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-muted); margin-top: 1px;
  }

  /* ---- Vertrauens-Abschnitt ---- */
  .lp-punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
  @media (max-width: 820px) { .lp-punkte { grid-template-columns: minmax(0, 1fr); } }
  .lp-punkt { display: flex; gap: 12px; align-items: flex-start; }
  .lp-punkt .pk {
    width: 24px; height: 24px; flex: none; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: var(--status-good-wash); color: var(--status-good);
  }
  .lp-punkt h3 { margin: 0 0 5px; font-size: 15.5px; }
  .lp-punkt p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-secondary); }
  /* ---- Sprachwahl ---- */
  .sprach-wahl {
    position: relative; display: flex; align-items: center; gap: 5px; flex: none;
    border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface); padding: 5px 9px 5px 10px;
  }
  .sprach-wahl .flagge { font-size: 15px; line-height: 1; }
  .sprach-wahl .pfeil { font-size: 10px; color: var(--ink-muted); pointer-events: none; }
  /* Das echte Auswahlfeld liegt unsichtbar darüber - so bedient man auf dem Telefon die
     gewohnte Auswahlliste des Geräts, und weitere Sprachen brauchen keine eigene Bedienung. */
  .sprach-wahl select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0;
    font-size: 16px;   /* unter 16px zoomt iOS beim Antippen hinein */
  }
  .sprach-wahl:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }

  /* ---- Untere Leiste ---- */
  /* Umschalter zwischen Badminton und Tennis - nur am Handy noetig, am Rechner stehen
     beide Seiten ohnehin in der Spalte links. */
  .sport-umschalter { display: none; }
  @media (max-width: 820px) {
    .sport-umschalter {
      display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
      gap: 4px; margin: 0 0 14px; padding: 4px;
      background: var(--surface-2); border-radius: 999px;
    }
  }
  .sport-umschalter button {
    padding: 9px 10px; border: 0; border-radius: 999px; cursor: pointer;
    background: none; color: var(--ink-secondary);
    font-family: inherit; font-size: 14px; font-weight: 600;
  }
  .sport-umschalter button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .unten-leiste { display: none; }
  @media (max-width: 820px) {
    .unten-leiste {
      display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      background: var(--surface);
      border-top: 1px solid var(--border);
      /* Die Leiste schwebt ueber dem Inhalt, der darunter durchscrollt - zwei Lagen Schatten
         plus feine Lichtkante an der Oberkante machen genau das sichtbar. */
      box-shadow: 0 -1px 3px rgba(0,0,0,.06), 0 -8px 24px -8px rgba(0,0,0,.18), var(--glanz);
      /* Platz für den Balken am unteren Rand neuerer iPhones. */
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .ul-knopf {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
      min-width: 0; padding: 9px 4px 8px;
      border: 0; background: none; cursor: pointer;
      /* --ink-muted liegt hier bei nur 3,2:1 - fuer 10,5px-Beschriftungen zu wenig. */
      color: var(--ink-secondary); font-family: inherit;
    }
    .ul-knopf .ico {
      width: 24px; height: 24px; display: grid; place-items: center;
      border-radius: 8px; font-size: 12.5px; font-weight: 700;
      background: var(--surface-2); color: var(--ink-secondary);
    }
    .ul-knopf .tx {
      font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ul-knopf.active { color: var(--brand-strong); }
    .ul-knopf.active .ico { background: var(--brand-strong); color: #fff; }

    /* Der Inhalt darf nicht unter der Leiste verschwinden. */
    .content { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    /* Der Menüknopf oben entfällt - "Mehr" in der Leiste öffnet die Schublade. */
    .burger { display: none; }
    /* .undo-toast steht weiter unten hinter seiner Grundregel. */
  }
  .lp-los {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 17px 34px; border-radius: 999px; cursor: pointer;
    border: 0; background: var(--brand-strong); color: #fff;
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    letter-spacing: .01em; box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .lp-los:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(0,0,0,.24); }
  .lp-los:active { transform: translateY(0); }
  .lp-los .pfeil { font-size: 19px; line-height: 1; }
  .lp-cta .lp-los { margin-top: 6px; }

  .anmelde-schicht {
    position: fixed; inset: 0; z-index: 400;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(12,14,13,.6);
    overflow-y: auto;
  }
  .anmelde-schicht[hidden] { display: none; }
  .anmelde-box {
    position: relative; width: 100%; max-width: 400px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 26px 26px 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    max-height: 100%; overflow-y: auto;
  }
  .anmelde-box h2 { margin: 0 0 16px; font-size: 21px; }
  .anmelde-zu {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: none; color: var(--ink-muted); font-size: 22px; line-height: 1; cursor: pointer;
  }
  .anmelde-zu:hover { background: var(--surface-2); color: var(--ink); }
  .anmelde-fuss { margin: 16px 0 0; font-size: 12px; color: var(--ink-secondary); line-height: 1.5; }
  body.schicht-offen { overflow: hidden; }
  .auth-note { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
  .auth-error {
    font-size: 13.5px; color: var(--status-critical);
    background: var(--status-critical-wash); border-radius: 8px; padding: 10px 12px;
    width: 100%; box-sizing: border-box;
  }
  .auth-error[hidden] { display: none; }
  .auth-status { font-size: 13.5px; color: var(--ink-muted); }
  .auth-status[hidden] { display: none; }

  /* --- Nachgebaute Ansichten (erfundene Daten, keine echten Kundendaten) --- */
  .shot {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
  }
  .shot-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  }
  .shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); display: block; }
  .shot-bar span {
    margin-left: 7px; font-family: var(--font-mono);
    font-size: 10.5px; color: var(--ink-muted); letter-spacing: .04em;
  }
  /* overflow-x als Netz: sollte eine Tabelle doch einmal breiter werden, wird sie schiebbar
     statt am Rand abgeschnitten - abgeschnittener Inhalt fällt bei Textprüfungen nicht auf. */
  .shot-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow-x: auto; }
  /* Auf schmalen Geräten reicht der Platz nicht für alle vier Spalten. Das Schlägermodell
     ist die verzichtbarste - die Aussage der Ansicht bleibt ohne sie erhalten. */
  @media (max-width: 560px) { .shot .opt { display: none; } }
  .shot-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .shot-kpi { background: var(--surface-2); border-radius: 8px; padding: 9px 11px; }
  .shot-kpi .k {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .shot-kpi .v {
    font-family: var(--font-display); font-weight: var(--display-weight);
    font-size: 21px; color: var(--brand); line-height: 1.1;
  }
  .shot-kpi .v.gold { color: var(--gold); }
  .shot table { width: 100%; min-width: 0; border-collapse: collapse; }
  .shot th {
    text-align: left; font-family: var(--font-display); font-weight: var(--display-weight);
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-muted); padding: 0 8px 6px 0; border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .shot td {
    padding: 7px 8px 7px 0; font-size: 12.5px; color: var(--ink);
    border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .shot tr:last-child td { border-bottom: none; }
  .shot td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .shot .pill {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
  }
  .shot .pill.open { background: var(--status-critical-wash); color: var(--status-critical); }
  .shot .pill.paid { background: var(--status-good-wash); color: var(--status-good); }

  /* --- Was die App kann --- */
  .lp-section { padding: 46px 0 0; display: flex; flex-direction: column; gap: 20px; }
  .lp-section > h2 {
    font-family: var(--font-display); font-weight: var(--display-weight);
    font-size: clamp(24px, 2.3vw, 34px);
    margin: 0; color: var(--ink); text-wrap: balance;
  }
  .lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 14px; }
  .lp-feature {
    background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
    padding: 17px 19px; display: flex; flex-direction: column; gap: 7px;
  }
  .lp-feature .ic {
    width: 30px; height: 30px; border-radius: 8px; background: var(--brand-wash);
    color: var(--brand); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 15px;
  }
  .lp-feature h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17.5px; margin: 0; color: var(--ink); }
  .lp-feature p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-secondary); }

  /* --- zweite Bilderreihe --- */
  /* auto-fit statt fester Spaltenzahl: ein breiter Bildschirm bekommt mehr Ausschnitte
     nebeneinander statt breiterer Ausschnitte. */
  .lp-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }

  /* --- Abschluss --- */
  .lp-cta {
    margin-top: 46px; background: var(--brand-strong); border-radius: 14px;
    padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; align-items: center;
    text-align: center;
  }
  .lp-cta h2 {
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px;
    margin: 0; color: #fff; text-wrap: balance;
  }
  .lp-cta p { margin: 0; color: #c3ddc9; font-size: 14.5px; max-width: 52ch; }
  .lp-cta .auth-btn { background: #fff; color: var(--brand-strong); max-width: 300px; }
  .lp-cta .auth-btn:hover { background: #e7f0e6; }

  /* --- Fußzeile --- */
  .lp-foot {
    margin-top: 44px; padding: 20px 0 34px; border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between;
  }
  .lp-foot .cr { font-size: 12.5px; color: var(--ink-muted); }
  .lp-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
  .lp-foot a { font-size: 12.5px; color: var(--ink-secondary); text-decoration: none; }
  .lp-foot a:hover { color: var(--brand); text-decoration: underline; }

  /* Angemeldete Person unten in der Navigation - zugleich der Knopf zu "Mein Profil",
     damit dort nicht zusaetzlich zum Konto-Bild noch ein eigener Knopf steht. Die
     "button.rail-user"-Kette schlaegt ".rail-foot button" an Spezifitaet, sonst wuerde
     dessen generisches Kachel-Aussehen (Rahmen, Auffuellung) das Konto-Bild verunstalten. */
  .rail-foot button.rail-user {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 8px 10px; margin-bottom: 6px;
    border: 1px solid rgba(255,255,255,.22); border-radius: 7px;
    background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  }
  .rail-foot button.rail-user:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
  .rail-foot button.rail-user.active { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
  .rail-user .avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: rgba(255,255,255,.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: var(--display-weight); font-size: 13px;
    overflow: hidden;
  }
  .rail-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .rail-user .who { min-width: 0; flex: 1; text-align: left; }
  .rail-user .who .nm {
    font-size: 12.5px; color: #fff; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rail-user .who .st { font-size: 10.5px; color: #b9d6c2; }
  .rail-user .who .st.saving { color: var(--gold); }

  /* ============ HINWEIS: ANDERES GERÄT ============ */
  .sync-hinweis {
    /* Ueber ALLEM, auch ueber der Anmeldeseite (200): "keine Verbindung" und "neue Fassung"
       sind Meldungen zum Zustand der App selbst, nicht zum Inhalt darunter. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    background: var(--gold); color: #1c1405;
    padding: 9px 16px; font-size: 13.5px; font-weight: 600;
    transform: translateY(-100%); transition: transform .2s ease;
  }
  .sync-hinweis.show { transform: translateY(0); }
  .sync-hinweis button {
    border: 1px solid rgba(0,0,0,.35); background: transparent; color: inherit;
    border-radius: 7px; padding: 4px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  }
  .sync-hinweis button:hover { background: rgba(0,0,0,.12); }
  /* Ohne Netz ist kein Fehler, sondern ein Zustand - deshalb ruhiger als der goldene Balken. */
  .sync-hinweis.ohne-netz { background: var(--ink-secondary); color: #fff; font-weight: 500; }

  /* Betragszeile unter der Monatskurve - die Balken zeigen die Anzahl, hier steht das Geld. */
  .monat-summen {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  }
  .ms-zelle { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
  .ms-monat { font-size: 9.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
  .ms-betrag {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  @media (max-width: 720px) {
    .monat-summen { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 8px; }
  }
  /* Namen in Tabellen fuehren zur Kundenkarte. Bewusst kein auffaelliger Knopf - die Spalte
     soll weiter wie eine Namensspalte aussehen, nur eben anklickbar. */
  /* Fußzeile unter einer gekürzten Tabelle. */
  .mehr-zeile td {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface-2); font-size: 12.5px; color: var(--ink-muted);
  }
  .konto-adresse { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 10px; }
  /* Die Kontolöschung steht bewusst klein und unauffällig - sie ist der seltene Notfall,
     nicht die Nachbarschaft des Abmelde-Knopfs. */
  .modal-btn.breit { width: 100%; justify-content: center; }
  .konto-loeschen-zeile { margin: 14px 0 0; text-align: center; }
  .konto-loeschen-zeile button {
    border: 0; background: none; padding: 2px 4px; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--ink-muted); text-decoration: underline;
  }
  .konto-loeschen-zeile button:hover { color: var(--status-critical); }

  .name-knopf {
    border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
    border-bottom: 1px dotted var(--border-strong);
  }
  .name-knopf:hover { color: var(--brand); border-bottom-color: var(--brand); }

  /* ---- Erste Einrichtung ---- */
  .imp-schritt-zeile {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px;
  }
  .einr-liste { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
  .einr-wahl {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    padding: 13px 15px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-gross); background: var(--surface);
  }
  .einr-wahl.an { border-color: var(--brand); background: var(--brand-wash); }
  .einr-wahl input { width: auto; margin: 2px 0 0; flex: none; }
  .einr-wahl b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .einr-wahl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-muted); }
  .einr-sport { margin-bottom: 18px; }
  .einr-sport h4 {
    margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
  }
  /* Name breit, Preis schmal, Art dazwischen - in dieser Reihenfolge liest man die Zeile. */
  .einr-saite {
    display: grid; grid-template-columns: minmax(0, 1fr) 78px 120px auto;
    gap: 6px; align-items: center; margin-bottom: 6px;
  }
  .einr-saite input, .einr-saite select {
    width: 100%; box-sizing: border-box; padding: 9px 10px;
    border: 1px solid var(--border-strong); border-radius: 7px;
    background: var(--surface); color: var(--ink); font-size: 13.5px; font-family: inherit;
  }
  @media (max-width: 560px) {
    .einr-saite { grid-template-columns: minmax(0, 1fr) 72px auto; }
    .einr-saite select { grid-column: 1 / -1; }
  }
  .einr-gross {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 15px 17px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-gross); background: var(--surface); color: var(--ink);
  }
  .einr-gross:hover { border-color: var(--brand); background: var(--brand-wash); }
  .einr-gross b { display: block; font-size: 15px; font-weight: 600; }
  .einr-gross small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-muted); }
  /* ---- Bestand: eine Karte je Saite ---- */
  .saiten-gitter {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  }
  /* Mein Profil: Karussell statt Raster - zeigt genau EINEN Schlaeger prominent statt eines
     Rasters. Ein Raster mit nur 1-2 Karten wirkte auf der Seite immer "leer"; ein grosses
     Karussell sieht bei jeder Anzahl Schlaeger gleich vollstaendig aus. Naeheres siehe
     profilKarussellHtml() und profilKarussellWechsel(). */
  /* Volle Breite wie die Nachbar-Abschnitte (KPI-Kacheln, Vergleichstabelle) - keine eigene
     Breitengrenze mehr. Frueher gestaffelte Deckel (460/560/660/900px) wirkten immer schmaler
     als alles drumherum, egal wie hoch der Deckel gerade stand (Nutzer-Feedback ueber mehrere
     Runden). Die Karte bleibt trotzdem uebersichtlich, weil .profil-stat-block und
     .profil-karte-chart innen selbst mitwachsen statt die Karte nur leer zu strecken. */
  .profil-karussell { position: relative; width: 100%; }
  .pk-buehne { display: grid; }
  .pk-buehne > .pk-karte { grid-area: 1 / 1; min-width: 0; }
  .pk-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
    cursor: pointer; padding: 0;
  }
  .pk-pfeil:hover { background: var(--surface-2); border-color: var(--border-strong); }
  .pk-pfeil.links { left: -14px; }
  .pk-pfeil.rechts { right: -14px; }
  @media (max-width: 540px) {
    .pk-pfeil.links { left: -6px; }
    .pk-pfeil.rechts { right: -6px; }
  }
  /* Zweitverwendung im Detail-Fenster (schlaegerDetailBody): dort stehen die Pfeile IN der
     Kopfzeile statt aussen an der Karte zu haengen - dieselbe runde Form, nur ohne die
     absolute Positionierung. */
  .pk-pfeil-inline { position: static; transform: none; flex: none; }
  /* Etwas geraeumigerer Innenabstand ab Tablet/Desktop - die Kartenbreite selbst kommt jetzt
     komplett aus .profil-karussell (100%, siehe oben). */
  @media (min-width: 700px) {
    .pk-karte .saite-karte { padding: 22px 26px; }
    .pk-karte .sk-name { font-size: 19px; }
  }
  .pk-punkte { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
  .pk-punkt { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: var(--surface-3); cursor: pointer; }
  .pk-punkt.aktiv { background: var(--brand); }
  /* Wechsel-Animation: die alte Karte gleitet zur Seite raus, waehrend die neue von der
     Gegenseite reinkommt - "rechts" = Richtung "naechster", "links" = Richtung "vorheriger".
     Beide Karten liegen waehrenddessen kurz uebereinander (siehe grid-area oben). */
  @keyframes pkEinRechts { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  @keyframes pkEinLinks  { from { transform: translateX(-28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  @keyframes pkAusLinks  { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-28px); opacity: 0; } }
  @keyframes pkAusRechts { from { transform: translateX(0); opacity: 1; } to { transform: translateX(28px); opacity: 0; } }
  .pk-betritt-rechts { animation: pkEinRechts .26s ease both; }
  .pk-betritt-links  { animation: pkEinLinks .26s ease both; }
  .pk-verlaesst-links  { animation: pkAusLinks .2s ease both; pointer-events: none; }
  .pk-verlaesst-rechts { animation: pkAusRechts .2s ease both; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    .pk-betritt-rechts, .pk-betritt-links, .pk-verlaesst-links, .pk-verlaesst-rechts { animation: none; }
  }
  .saite-karte {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-gross); box-shadow: var(--shadow);
    padding: 13px 14px;
  }
  /* Kennzahlen der Karte (Datum, Haerte, Anzahl, Gewicht, Griff, Aussehen) als kleine Kacheln
     statt reiner Fliesstext-Zeilen - jede fuer sich lesbar, statt als eine lange Zeile
     zusammenzulaufen. */
  .profil-stat-block { display: flex; flex-wrap: wrap; gap: 6px; }
  .profil-stat-chip {
    display: flex; flex-direction: column; gap: 1px;
    background: var(--surface-2); border-radius: 7px; padding: 5px 9px;
  }
  .profil-stat-chip .psc-label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-secondary);
  }
  .profil-stat-chip .psc-value {
    font-size: 12.5px; font-weight: 600; color: var(--ink); font-family: var(--font-mono);
  }
  .sk-kopf { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 7px; }
  /* Name und Preis sind direkt beschreibbar - sie sehen aus wie Text, bis man hineinklickt.
     Ein eigener Speichern-Knopf entfaellt damit; gespeichert wird beim Verlassen des Feldes. */
  .sk-name {
    min-width: 0; border: 1px solid transparent; background: transparent; color: var(--ink);
    border-radius: 6px; padding: 4px 6px; font-size: 15px; font-weight: 600; font-family: inherit;
  }
  .sk-preis { display: flex; align-items: center; gap: 2px; }
  .sk-preis input {
    width: 62px; text-align: right; border: 1px solid transparent; background: transparent;
    color: var(--ink); border-radius: 6px; padding: 4px 4px; font-size: 14px; font-family: var(--font-mono);
  }
  .sk-preis span { font-size: 13px; color: var(--ink-secondary); }
  .sk-name:hover, .sk-preis input:hover { border-color: var(--border-strong); }
  .sk-name:focus, .sk-preis input:focus { border-color: var(--brand); background: var(--surface-2); outline: none; }
  .sk-sport-badge {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-secondary); background: var(--surface-2); border-radius: 999px;
    padding: 3px 8px; white-space: nowrap; flex: none;
  }
  /* Sportart-Abzeichen in den Serienfarben der App - dasselbe Gruen/Braun wie in den
     Diagrammen und im Wiki-Umschalter. Bei Proben ist das noetig: sie stehen gemischt aus
     beiden Sportarten in EINER Liste, und ein Saitenname allein verraet nicht, wohin er gehoert. */
  .sport-marke {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-secondary); white-space: nowrap;
  }
  .sport-marke i {
    width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--sportfarbe);
  }
  .sport-marke.tennis { --sportfarbe: var(--series-tennis); }
  .sport-marke.badminton { --sportfarbe: var(--series-badminton); }
  .pz-neben { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .proben-sportkopf { margin: 18px 0 8px; font-size: 13px; }
  .proben-sportkopf:first-child { margin-top: 0; }
  .profil-name-knopf { cursor: pointer; }
  /* Immer sichtbarer Knopf statt einer Anzeige, die nur beim automatisch ermittelten Favoriten
     erschien (siehe profilFavoritKnopfHtml()) - so laesst sich der Vorschlag der Automatik
     uebersteuern. Inaktiv: dezenter Umriss (Angebot zum Festlegen). Aktiv: dieselbe goldene
     Farbe wie vorher die reine Anzeige. */
  .profil-favorit-knopf {
    font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 8px;
    white-space: nowrap; flex: none; cursor: pointer;
    border: 1px solid var(--border); background: transparent; color: var(--ink-muted);
  }
  .profil-favorit-knopf:hover { border-color: var(--gold); color: var(--gold); }
  .profil-favorit-knopf.aktiv { color: var(--gold); background: var(--gold-wash); border-color: transparent; }
  /* Eigene Kopfzeile statt der geteilten .sk-kopf (die ist fest auf zwei Spalten ausgelegt -
     mit Favorit-Abzeichen kommt hier aber ein drittes Element dazu, das sonst in eine eigene
     Zeile rutscht und dadurch riesig wirkt). Flex statt Grid-Spalten löst das grundsätzlich,
     unabhängig davon, wie viele Abzeichen gerade dazukommen. */
  /* Der Kartenkopf bekommt das Saitenbett als Wasserzeichen - randlos bis an die Kartenkante
     (negative Aussenabstaende), mit denselben runden Ecken wie die Karte darunter. */
  .profil-karte-kopf {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin: -13px -14px 0; padding: 13px 14px 11px;
    border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    border-bottom: 1px solid var(--rule);
    /* Ruhiges Farbband statt des frueheren Karo-Rasters (sah nach Rechenpapier aus) - der
       Kopf hebt sich trotzdem klar vom Kartenkoerper ab, nur eben unaufdringlich. */
    background: linear-gradient(to bottom, var(--surface-2), var(--surface));
  }
  .profil-karte-kopf .profil-name-knopf { flex: 1 1 auto; min-width: 0; }
  /* Trennlinie vor den Knoepfen, damit sie nicht einfach unten "drangeklatscht" wirken.
     Ueberarbeitet nach Nutzer-Feedback: Preset/Haerte/Griffband sind im Alltag mindestens so
     wichtig wie "Ich hab gespielt!" (Presets decken dessen Zweck oft sogar schneller ab) - alle
     vier stehen deshalb jetzt gleichrangig als beschriftete Kacheln nebeneinander, nicht mehr
     drei kleine Icon-Kreise neben zwei grossen Textknoepfen. "Details ansehen" tritt als reiner
     Text-Link darunter bewusst zurueck: der wird jetzt seltener gebraucht, seit die wichtigsten
     Zahlen/Diagramme schon auf der Karte stehen. */
  .profil-karte-aktionen {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  }
  .profil-karte-aktionen button {
    flex: 1 1 130px; padding: 9px 12px; font-size: 13px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .profil-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--auf-brand); }
  .profil-btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--auf-brand); }
  /* Preset/Haerte/Griffband: helle Akzentflaeche statt nur Rahmen, damit sie als eigene,
     gleichwertige Aktionsart erkennbar bleiben - jetzt aber MIT Beschriftung. Ein Icon ganz
     ohne sichtbaren Text (vorherige Fassung, nur per Tooltip erklaerbar) war laut Nutzer-
     Feedback auf den ersten Blick nicht verstaendlich. */
  .profil-karte-aktionen .profil-btn-icon {
    border-color: transparent; background: var(--gold-wash); color: var(--gold);
  }
  .profil-karte-aktionen .profil-btn-icon:hover { background: var(--gold); color: var(--auf-gold); }
  .profil-karte-aktionen .profil-btn-icon svg { flex: none; }
  /* Genau zwei je Reihe am schmalen Handy statt vier eng gequetschten oder einer langen Saeule. */
  @media (max-width: 480px) {
    .profil-karte-aktionen button { flex: 1 1 calc(50% - 4px); }
  }
  .profil-details-link {
    display: block; width: 100%; text-align: center; margin-top: 8px;
    background: none; border: none; color: var(--ink-muted); font-size: 12.5px; cursor: pointer;
  }
  .profil-details-link:hover { color: var(--brand); text-decoration: underline; }
  .profil-schnitt { color: var(--gold); font-weight: 600; }
  /* ---- Schläger-Detail-Fenster: eigener Kopf + Kennzahlen-Kacheln + Karten-Bloecke statt
     der schlichten .ber-zeile-Liste, damit die wichtigen Zahlen wirklich hervorstechen. ---- */
  .profil-detail-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
  .profil-detail-icon {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 19px;
    background: var(--brand-wash); color: var(--brand);
  }
  .profil-detail-kopf h3 { margin: 0; font-size: 20px; }
  .profil-detail-block, .settings-block {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-gross);
    padding: 14px 16px; margin-bottom: 14px;
    box-shadow: var(--shadow);
  }
  .profil-detail-block:last-child, .settings-block:last-child { margin-bottom: 0; }
  .profil-detail-block h4, .settings-block h4 {
    margin: 0 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
  }
  /* Gruppen-Ueberschrift zwischen den Diagramm- und Eintrags-Abschnitten im Detail-Fenster
     (Nutzer-Wunsch: klarere Struktur) - bewusst ausserhalb jeder Karte, damit sie als
     Trennlinie zwischen zwei Zonen wirkt statt als Titel EINES Abschnitts. */
  .profil-detail-gruppe {
    margin: 20px 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
  }
  .profil-detail-gruppe:first-child { margin-top: 0; }
  /* "Kennzahlen auswaehlen"-Fenster: eine saubere, umrandete Liste mit echten Schaltern statt
     nackter Checkboxen - Nutzer-Feedback, das vorherige sah "nicht professionell" aus. Jede
     Zeile ist ein <label>, damit ein Klick irgendwo in der Zeile genuegt (nicht nur exakt auf
     den kleinen Schalter). */
  .profil-sichtbar-liste {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--radius-gross);
    background: var(--surface); overflow: hidden;
  }
  .profil-sichtbar-zeile {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; font-size: 13.5px; color: var(--ink); cursor: pointer;
    border-bottom: 1px solid var(--border); transition: background .15s ease;
  }
  .profil-sichtbar-zeile:last-child { border-bottom: 0; }
  .profil-sichtbar-zeile:hover { background: var(--surface-2); }
  /* Klassischer An/Aus-Schalter: die eigentliche Checkbox liegt unsichtbar (aber weiter
     bedienbar/per Tastatur fokussierbar) UEBER der gezeichneten Spur+Knopf-Optik. */
  .toggle-switch { position: relative; flex: none; width: 40px; height: 24px; display: block; }
  .toggle-switch input {
    position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
  }
  .toggle-track {
    display: block; width: 100%; height: 100%; border-radius: 999px;
    background: var(--surface-3); border: 1px solid var(--border-strong);
    transition: background .18s ease, border-color .18s ease;
  }
  .toggle-thumb {
    display: block; width: 16px; height: 16px; margin: 3px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: transform .18s ease;
  }
  .toggle-switch input:checked ~ .toggle-track { background: var(--brand); border-color: var(--brand); }
  .toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(16px); }
  .toggle-switch input:focus-visible ~ .toggle-track { outline: 2px solid var(--brand); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    .toggle-track, .toggle-thumb { transition: none; }
  }
  /* Erklaertext innerhalb eines .settings-block - ersetzt die bisherigen Ad-hoc-Inline-Styles
     (mal 12.5px, mal 13px, mal 13.5px, an jeder Stelle leicht anders) durch eine Fassung. */
  .settings-hinweis { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 10px; line-height: 1.5; }
  .settings-hinweis a { color: var(--brand); }
  .settings-hinweis:last-child { margin-bottom: 0; }
  .settings-block .modal-toggle-row:last-of-type { border-bottom: none; }
  /* Kopfzeile eines einklappbaren Bereiche-Blocks: Titel+Pfeil links (klickbar), Schalter rechts -
     ersetzt die fruehere Doppelanzeige aus Ueberschrift + gleichlautendem Umschalter-Label. */
  .settings-block-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .settings-block-titel {
    display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0;
    cursor: pointer; font: inherit; text-align: left;
  }
  .settings-block-titel h4 { margin: 0; }
  .settings-block-titel .pfeil { color: var(--ink-muted); font-size: 12px; }
  .settings-block-titel:hover h4 { color: var(--brand); }
  .settings-block-kopf > input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; flex: none; }
  .profil-chart { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .profil-chart-titel { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; margin-bottom: 4px; }
  /* Kacheln und Mini-Diagramm auf der Schlaegerkarte: am Handy untereinander (wie bisher),
     ab genug Breite nebeneinander - sonst wirkt die jetzt breitere Karussell-Karte nur nach
     unten gestreckt ("langgezogen") statt die Breite wirklich zu nutzen. */
  .profil-karte-unten { display: flex; flex-direction: column; gap: 12px; }
  /* Grid statt Flex-Wrap NUR hier auf der jetzt volle-Breite-Karussellkarte: die Kacheln sollen
     bei viel Platz mehr Spalten bilden statt in einer duennen Saeule zu bleiben, waehrend
     .profil-stat-block ueberall sonst im Code (Wiki, Kasse, ...) unveraendert bleibt (siehe
     die geteilte Basisregel weiter oben). */
  .pk-karte .profil-stat-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* Beide Diagramme (Gefuehl + Haerteverlauf) NEBENEINANDER statt untereinander, sobald Platz
     da ist - macht die jetzt breite Karte bewusst auch tiefer/informativer (Nutzer-Wunsch),
     statt nur in die Breite zu gehen. */
  .profil-karte-diagramme { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
  .profil-karte-chart { flex: 1 1 320px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .profil-karte-chart .chart-x-labels span { font-size: 8.5px; }
  /* Am Handy kostete die Karte (seit beide Diagramme + alle Kacheln dazukamen) zu viel
     Scrollen - Nutzer-Feedback. Dieselbe Grenze wie istDiagrammSchmal() (760px), die auch die
     Diagrammhoehe selbst reduziert (siehe profilSchlaegerKarte()). Nur enger gepackt, nichts
     wird hier ausgeblendet. */
  @media (max-width: 760px) {
    .profil-karussell .saite-karte { gap: 6px; }
    .profil-karte-unten { gap: 6px; }
    /* Fest zwei Spalten statt auto-fit: bei sehr schmalen Handys (~360px) passten selbst
       zwei 150px-Kacheln nicht mehr nebeneinander, auto-fit fiel dann auf eine einzige Spalte
       zurueck - genau das Scrollen, das vermieden werden sollte (Nutzer-Feedback). */
    .pk-karte .profil-stat-block { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .pk-karte .profil-stat-chip { padding: 4px 7px; }
    .profil-karte-diagramme { gap: 10px; margin-top: 6px; }
    .pk-karte .profil-chart-titel { margin-bottom: 2px; }
  }
  .chart-x-labels { display: flex; justify-content: space-between; padding: 0 2px; margin-top: 2px; }
  .chart-x-labels span { font-size: 9.5px; color: var(--ink-secondary); }
  /* Dauer als Knopfreihe statt Zahlenfeld - im Halbstundentakt antippen geht schneller. */
  .wahl-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .wahl-btn {
    padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit; cursor: pointer;
  }
  .wahl-btn:hover { border-color: var(--brand); }
  .wahl-btn.aktiv { background: var(--brand); border-color: var(--brand); color: var(--auf-brand); font-weight: 600; }
  .sterne-reihe { display: flex; gap: 4px; margin-top: 6px; }
  .stern-btn {
    border: none; background: none; cursor: pointer; font-size: 26px; line-height: 1;
    color: var(--border-strong); padding: 2px;
  }
  .stern-btn.aktiv { color: var(--gold); }
  .stern-btn:hover { color: var(--gold); }
  /* Eigene Einfaerbung statt der normalen (goldenen/markenfarbenen) .aktiv-Markierung - ein
     Riss ist eine Warnung, kein neutraler Auswahlzustand. */
  .wahl-btn.gerissen-aktiv { background: var(--status-critical); border-color: var(--status-critical); color: #fff; font-weight: 600; }
  .profil-gerissen-tag { color: var(--status-critical); font-weight: 600; }
  .profil-ergebnis-tag { font-weight: 600; }
  .profil-ergebnis-tag.sieg { color: var(--status-good); }
  .profil-ergebnis-tag.niederlage { color: var(--status-critical); }
  /* "Ich hab gespielt"-Formular: klar nummerierte Abschnitte statt einer undifferenzierten
     Feldliste - macht sichtbar, dass man sich Schritt fuer Schritt durchtippt (Datum, Dauer,
     Sterne, Art, Notiz), auch wenn es technisch weiterhin EINE Seite bleibt. */
  .spiel-schritt { display: flex; gap: 12px; margin-top: 20px; }
  .spiel-schritt:first-child { margin-top: 0; }
  .spiel-schritt-nr {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-wash); color: var(--brand);
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
  }
  .spiel-schritt-inhalt { flex: 1; min-width: 0; padding-top: 2px; }
  .spiel-schritt-inhalt label {
    display: block; font-size: 13px; text-transform: none; letter-spacing: 0;
    color: var(--ink); font-weight: 600; margin-bottom: 2px;
  }
  /* Presets-Formular (spielPresetsModalBody): eigene, einfache Spalte statt .add-row-form -
     das ist ein Flex-Zeilen-Raster fuer kurze Einzelfelder und verwirbelte sich hier, sobald
     mehrere breite Knopfreihen (Dauer/Sterne/Art) danebenstanden (Nutzer-Feedback: Ueberlappung).
     Jedes .field steht dadurch garantiert auf einer eigenen, vollen Breite. */
  .preset-form { display: flex; flex-direction: column; gap: 16px; }
  .sk-art {
    border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink-secondary);
    border-radius: 7px; padding: 5px 8px; font-size: 12.5px; font-family: inherit; width: 100%;
  }
  .sk-bestand { display: flex; flex-direction: column; gap: 6px; }
  .sk-zahl {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-family: var(--font-display); font-weight: var(--zahl-weight); font-size: 24px; line-height: 1;
  }
  .sk-reicht { font-size: 12.5px; color: var(--ink-secondary); }
  .sk-aufgebraucht-hinweis {
    margin-top: 6px; font-size: 12px; color: var(--ink);
    background: var(--status-warning-wash); border-radius: 6px; padding: 5px 8px;
  }
  /* Rechnerisch ueberzogener Bestand - kein Warnton, sondern ein Rechenfehler, der erklaert
     werden muss. Deshalb Rot-Wash und ein ganzer Satz statt eines Schlagworts. */
  .sk-ueberzogen {
    margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink);
    background: var(--status-critical-wash); border-radius: 6px; padding: 6px 9px;
  }
  .sk-leer { font-size: 12.5px; color: var(--ink-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .sk-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
  .sk-mehr {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    width: 100%; padding: 7px 0 0; margin-top: 2px;
    border: 0; border-top: 1px solid var(--border); background: none; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--ink-secondary); text-align: left;
  }
  .sk-mehr:hover { color: var(--brand); }
  .sk-mehr .pfeil { color: var(--ink-muted); }
  .sk-details h4 {
    margin: 8px 0 4px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
  }
  .sk-zeile {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto auto;
    gap: 8px; align-items: center; padding: 4px 0; font-size: 12px;
    border-bottom: 1px dotted var(--border);
  }
  .sk-zeile:last-child { border-bottom: 0; }
  .sk-zeile .num { font-family: var(--font-mono); color: var(--ink-secondary); white-space: nowrap; }
  .sk-knoepfe { display: flex; gap: 2px; }

  /* Die Karte zum Anlegen sieht aus wie die anderen, nur gestrichelt - so ist klar,
     dass sie an dieselbe Stelle gehoert. */
  .saite-neu {
    display: flex; flex-direction: column; gap: 8px; justify-content: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-gross);
    padding: 13px 14px; background: none;
  }
  .saite-neu .sn-plus {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-wash); color: var(--brand); font-size: 16px; font-weight: 700;
  }
  .saite-neu input, .saite-neu select {
    width: 100%; box-sizing: border-box; padding: 7px 9px;
    border: 1px solid var(--border-strong); border-radius: 7px;
    background: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit;
  }
  .saite-neu .sn-zeile { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 6px; }
  .saite-neu .btn { width: 100%; }
  /* Der Sammelkauf-Knopf sieht aus wie das Anlegen-Feld, nur flacher - er gehoert
     dazu, ist aber nicht der Normalfall. */
  .saite-sammel {
    display: flex; align-items: center; gap: 9px; text-align: left;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-gross);
    padding: 13px 14px; background: none; cursor: pointer;
    color: var(--ink-secondary); font-family: inherit; font-size: 13.5px;
  }
  .saite-sammel:hover { border-color: var(--brand); color: var(--ink); }
  .saite-sammel .ss-plus {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--brand-wash); color: var(--brand); font-size: 14px; font-weight: 700;
  }
  /* Admin: Saitenkatalog-Bearbeiten. Volle Eingabezeilen statt .sn-zeile (deren feste
     80px-Spalte war fuer Preis+Art gedacht, nicht fuer Marke+Modell) - eigene, einfache
     Flex-Zeile, die am Handy umbricht statt zu quetschen. */
  .admin-saiten-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .admin-saiten-form input, .admin-saiten-form select {
    box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--border-strong);
    border-radius: 7px; background: var(--surface); color: var(--ink);
    font-size: 13px; font-family: inherit;
  }
  .admin-saiten-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
  .admin-saiten-zeile > * { flex: 1 1 140px; min-width: 0; }
  .admin-saiten-stats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
    padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  }
  .admin-stat-feld { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-muted); }
  .admin-stat-feld input { width: 100%; }
  /* Rechner: schreibgeschuetzte Vorschau derselben .admin-stat-feld-Kacheln (statt Input
     ein <b>), damit sie optisch wie das echte Formular aussieht, aber klar als Ergebnis
     erkennbar ist. */
  .admin-stat-feld b.num { font-family: var(--font-mono); color: var(--ink); font-size: 13px; }
  .admin-rechner-schluessel {
    display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
    font-size: 13px;
  }
  .admin-rechner-schluessel label { display: flex; align-items: center; gap: 8px; }
  .admin-rechner-schluessel input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
  /* Admin: Schlaeger-Spezifikationen-Uebersicht - eine Spalte statt Raster (.saiten-gitter),
     weil hier jede Zeile ein aufklappbares Modell mit potentiell mehreren Baujahren/
     Ausfuehrungen ist, kein gleichfoermiges Kartenraster. */
  .admin-spez-liste { display: flex; flex-direction: column; gap: 10px; }
  /* Wiki: Spezifikationen-Verwaltung (Baujahr -> Ausfuehrungen), auf der Modellseite UND in
     der Admin-Uebersicht identisch verwendet. */
  .wiki-spez-jahr { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 10px; }
  .wiki-spez-jahr:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .wiki-spez-jahr-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .wiki-spez-eintrag { margin-bottom: 6px; }
  .wiki-spez-zeile {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface-2); color: var(--ink); font-size: 12.5px; cursor: pointer; font-family: inherit;
  }
  .wiki-spez-neues-jahr { margin-top: 10px; }
  .ohne-zeile {
    display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,190px) auto;
    gap: 10px; align-items: center; padding: 8px 0;
    border-bottom: 1px dotted var(--border); font-size: 13.5px;
  }
  .ohne-zeile:last-child { border-bottom: 0; }
  .ohne-zeile .oz-name { font-weight: 600; }
  .ohne-zeile .oz-info { font-size: 12px; color: var(--ink-secondary); white-space: nowrap; }
  .ohne-zeile select {
    width: 100%; box-sizing: border-box; padding: 6px 8px;
    border: 1px solid var(--border-strong); border-radius: 7px;
    background: var(--surface); color: var(--ink); font-size: 12.5px; font-family: inherit;
  }
  @media (max-width: 720px) {
    .ohne-zeile { grid-template-columns: minmax(0,1fr) auto; row-gap: 6px; }
    .ohne-zeile select { grid-column: 1 / -1; }
  }
  /* Ersatzrollen: was ungeoeffnet im Schrank liegt. Steht bewusst UNTER der Restlaenge
     und optisch abgesetzt - es ist ein anderer Zustand als "gerade im Geraet". */
  .sk-ersatz {
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-strong);
    display: flex; flex-direction: column; gap: 4px;
  }
  .se-kopf { display: flex; align-items: center; gap: 7px; font-size: 12.5px; flex-wrap: wrap; }
  .se-punkt {
    width: 8px; height: 8px; border-radius: 2px; flex: none;
    background: var(--brand); opacity: .5;
  }
  .se-kopf b { font-weight: 600; color: var(--ink); }
  .se-meter { font-family: var(--font-mono); color: var(--ink-secondary); }
  .se-hinweis {
    font-size: 11.5px; color: var(--ink); background: var(--status-warning-wash);
    border-radius: 5px; padding: 3px 7px; align-self: flex-start;
  }
  .se-gesamt { font-size: 12.5px; color: var(--ink-secondary); }
  .se-gesamt b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
  .se-reicht { color: var(--ink-muted); }
  /* Zurueckhaltendes Zeichen in der Saitenkarte - ein Punkt und ein kurzer Satz. */
  .vz {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink-secondary);
  }
  .vz i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .vz-grau i { background: var(--ink-muted); }
  .vz-rot i { background: var(--status-critical); }
  .vz-rot { color: var(--status-critical); }

  /* Hinweis oben auf der Verwaltungsseite. Ruhig, aber nicht zu uebersehen. */
  .vorrat-hinweis {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: var(--surface-2); border: 1px solid var(--border-strong);
    border-left: 3px solid var(--ink-muted);
    border-radius: var(--radius-gross); padding: 11px 13px; margin-bottom: 16px;
  }
  .vorrat-hinweis.dringend { border-left-color: var(--status-critical); }
  .vh-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .vh-text b { font-size: 13.5px; color: var(--ink); }
  .vh-text span { font-size: 12.5px; color: var(--ink-secondary); }
  .vh-knoepfe { display: flex; align-items: center; gap: 6px; flex: none; }
  .vh-zu {
    width: 28px; height: 28px; border: 0; border-radius: 7px; background: none;
    color: var(--ink-muted); font-size: 19px; line-height: 1; cursor: pointer;
  }
  .vh-zu:hover { background: var(--surface-3); color: var(--ink); }
  /* Sammelkauf: eine Zeile je Rolle. Zwei Reihen statt einer langen - so passt es
     auch auf ein Handy, ohne dass etwas aus dem Fenster laeuft. */
  .sammel-zeile {
    border: 1px solid var(--border); border-radius: var(--radius-gross);
    background: var(--surface-2); padding: 9px 10px; margin-bottom: 8px;
    display: flex; flex-direction: column; gap: 7px;
  }
  .sz-kopf { display: grid; grid-template-columns: auto minmax(0, 104px) minmax(0, 1fr) auto; gap: 7px; align-items: center; }
  /* Laufende Nummer: sonst weiss man bei vier, fuenf Zeilen nicht mehr, wo man ist. */
  .sz-nr {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-wash); color: var(--brand);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  }
  .sz-unten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sz-feld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sz-feld span { font-size: 10.5px; color: var(--ink-secondary); text-transform: uppercase; letter-spacing: .04em; }
  .sammel-zeile select, .sammel-zeile input {
    width: 100%; min-width: 0; box-sizing: border-box; font-family: inherit; font-size: 13px;
    border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 7px;
    background: var(--surface); color: var(--ink);
  }
  /* Ein selbst getippter Preis wird von der Verteilung nicht mehr angefasst - das
     soll man sehen, sonst wundert man sich, warum sich eine Zeile nicht mitbewegt. */
  .sammel-zeile input.manuell { border-color: var(--brand-strong); }
  .sammel-fuss {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; font-size: 13px; color: var(--ink-secondary);
  }
  .sammel-fuss b { font-family: var(--font-mono); color: var(--ink); }
  .sf-diff { color: var(--status-warning); }
  /* Summe und Knoepfe kleben am unteren Rand des Fensters - siehe Kommentar im Markup. */
  .sammel-abschluss {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--surface); margin-top: 14px; padding-top: 10px;
    border-top: 1px solid var(--rule-stark);
  }
  .sammel-abschluss .sammel-fuss { margin-top: 0; margin-bottom: 10px; }
  @media (max-width: 720px) {
    /* Die Saitenauswahl bekommt eine eigene volle Zeile - zu dritt nebeneinander war ihr
       Text abgeschnitten ("neue Saite anle..."). */
    .sz-kopf { grid-template-columns: auto minmax(0, 1fr) auto; }
    /* Beide ausdruecklich platzieren: sonst rutscht das Loeschen-Kreuz hinter die
       vollbreite Saitenauswahl in eine dritte, fast leere Zeile. */
    .sz-kopf .sz-weg { grid-row: 1; grid-column: 3; }
    .sz-kopf .sz-saite { grid-row: 2; grid-column: 1 / -1; }
    .sammel-zeile { padding: 10px 11px; }
    #formSammel > .note { font-size: 12.5px; line-height: 1.45; }
  }
  @media (max-width: 560px) {
    .sz-unten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Erklaerung auf Karten ohne Vorrat - sie steht dort, wo bei einer eigenen Rolle
     Farbe und Staerke stuenden, damit die Karte nicht in sich zusammenfaellt. */
  .sk-hinweis {
    font-size: 12px; color: var(--ink-secondary); line-height: 1.45;
    border-left: 2px solid var(--border-strong); padding-left: 8px;
  }
  /* Die vom Kunden mitgebrachte Saite in der Tabelle - nachrangig zum Eintrag selbst. */
  .eigen-name { font-size: 11.5px; color: var(--ink-secondary); font-style: italic; }
  /* --- Karten statt Tabelle auf schmalen Geraeten --- */
  .kartenliste { display: flex; flex-direction: column; gap: 8px; }
  /* In der Kasse steht die Kartenliste im selben Rahmen wie vorher die Tabelle. Der
     Rahmen um lauter gerahmte Karten waere aber ein Kasten zu viel - also weg damit. */
  .table-wrap:has(> .kartenliste) { border: 0; background: none; box-shadow: none; overflow: visible; }
  .table-wrap > .kartenliste + .add-row-form { margin-top: 10px; }
  .ekarte {
    position: relative; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-gross);
    background: var(--surface); padding: 11px 34px 11px 13px;
    display: flex; flex-direction: column; gap: 5px;
    box-shadow: var(--shadow), var(--glanz);
    transition: box-shadow .18s ease, transform .12s ease, border-color .15s ease;
  }
  @media (hover: hover) {
    .ekarte:hover { box-shadow: var(--schatten-2), var(--glanz); transform: translateY(-1px); }
  }
  /* Beim Antippen wieder herunterdruecken - das ist die Rueckmeldung, die am Handy fehlt,
     wo es kein Hover gibt. */
  .ekarte:active { transform: translateY(0); box-shadow: var(--shadow), var(--glanz); }
  /* Aufgeklappt liegt die Karte bewusst hoeher als der Rest der Liste. */
  .ekarte.auf { border-color: var(--border-strong); box-shadow: var(--schatten-2), var(--glanz); }
  .ek-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .ek-name { font-weight: 600; font-size: 15px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
  .ek-datum { font-size: 12px; color: var(--ink-secondary); flex: none; font-family: var(--font-mono); }
  .ek-betrag { font-size: 15px; font-weight: 600; color: var(--ink); flex: none; }
  /* flex-wrap + min-width:0: ohne beides konnte eine lange Zeile nicht umbrechen und lief
     rechts aus der Karte heraus, statt sich auf zwei Zeilen zu verteilen. */
  .ek-mitte { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-secondary); min-width: 0; }
  .ek-schlaeger { min-width: 0; overflow-wrap: anywhere; }
  .ek-kg { flex: none; font-family: var(--font-mono); }
  /* Zahlungsstand der Schiedsrichter-Karte auf eigener Zeile - mit Stempel UND Bezahlt-Datum
     passt er nicht mehr neben Datum und Honorar. */
  .ek-zahlzeile { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ek-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .ek-saite { font-size: 12.5px; color: var(--ink-secondary); min-width: 0; overflow-wrap: anywhere; }
  .ek-rest { font-size: 11.5px; color: var(--ink-muted); }
  .ek-pfeil { position: absolute; top: 11px; right: 12px; color: var(--ink-muted); font-size: 12px; }
  .ek-mehr {
    margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border-strong);
    display: flex; flex-direction: column; gap: 5px;
  }
  .ek-paar { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
  .ek-paar span { color: var(--ink-secondary); flex: none; }
  .ek-paar b { font-weight: 500; color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .ek-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .ek-knoepfe .btn-mini.gefahr { color: var(--status-critical); border-color: var(--status-critical); }
  /* Der "mehr anzeigen"-Fuss ist ausserhalb einer Tabelle kein <tr> mehr. */
  .kartenliste .mehr-karte {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center;
    padding: 10px 6px; font-size: 12.5px; color: var(--ink-secondary);
  }
  .sortwahl { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-secondary); }
  .sortwahl select {
    flex: 1; min-width: 0; font-family: inherit; font-size: 13px;
    border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 8px;
    background: var(--surface); color: var(--ink);
  }
  /* Karten ohne Klappfunktion - der Zeiger soll dort nicht zur Hand werden. */
  .ekarte.still { cursor: default; padding-right: 13px; }
  /* Kaufkarte: die beiden Zeichen zum Bearbeiten und Loeschen sitzen rechts in der
     zweiten Zeile, wo bei den anderen Karten die Haerte steht. */
  .ekarte.kk .ek-kg { display: flex; gap: 4px; }
  .ekarte.kk .ek-name { display: flex; align-items: center; gap: 6px; font-size: 14px; }
  /* Die uebrigen Tabellen duerfen auf schmalen Geraeten schrumpfen statt zu schieben.
     Ohne das erzwingt die Grundregel table { min-width: 640px } den Querbalken. */
  @media (max-width: 1100px) {
    /* Auch die Tabellen in Fenstern - Bericht, Kundenkarte. Die Grundregel
       table { min-width: 640px } liess sie sonst seitlich aus dem Fenster laufen. */
    #content table, #modalBody table { min-width: 0; font-size: 12.5px; }
    /* Auch die 160 px Mindestbreite der Textspalten muessen weg - eine davon reicht,
       um die ganze Tabelle wieder ueber den Rand zu schieben. */
    #content tbody td.wrap, #modalBody tbody td.wrap { min-width: 0; }
  }
  /* Am Handy muessen sich die verbliebenen Tabellen die Breite teilen. Ohne feste
     Aufteilung richtet sich jede Spalte nach ihrem laengsten Wort und die Tabelle
     schiebt sich wieder aus dem Bild. */
  @media screen and (max-width: 720px) {
    #content table { table-layout: fixed; }
    #content th, #content td { overflow-wrap: anywhere; }
    #content td .badge { white-space: normal; }
    #content thead th, #content tbody td,
    #modalBody thead th, #modalBody tbody td { padding-left: 7px; padding-right: 7px; overflow-wrap: anywhere; }
  }
  /* --- Turniermodus --- */
  .turnier-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-gross); padding: 16px 18px; box-shadow: var(--shadow);
  }
  .tw-zahl {
    font-family: var(--font-display); font-weight: var(--zahl-weight);
    font-size: 40px; line-height: 1; color: var(--brand);
  }
  .tw-label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-secondary); }
  .tw-rechnung { text-align: right; font-size: 12.5px; color: var(--ink-secondary); }
  .tw-fertig { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
  .tw-eng { color: var(--status-critical); font-weight: 600; margin-top: 3px; max-width: 34ch; }
  .tw-gut { color: var(--status-good); margin-top: 3px; }
  .tw-express { font-size: 12px; font-weight: 600; color: var(--gold); margin-top: 2px; }

  .turnier-liste { display: flex; flex-direction: column; gap: 8px; }
  .tk {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-gross); padding: 11px 13px;
  }
  /* Express faellt auf, Zeitnot faellt mehr auf - aber beides ueber den Streifen links,
     nicht ueber die Flaeche. Eine Liste aus lauter farbigen Kaesten liest sich nicht. */
  .tk.express { border-left-color: var(--gold); }
  .tk.knapp { border-left-color: var(--status-critical); }
  .tk-nr {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: var(--surface-3);
    font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  }
  .tk-mitte { min-width: 0; }
  .tk-kopf { display: flex; align-items: center; gap: 7px; }
  /* Zurueckhaltendes Kuerzel statt Farbflaeche - passt zur T/B-Sprache der Rail-Navigation. */
  .tk-sport {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; border-radius: 4px;
    background: var(--surface-3); color: var(--ink-secondary);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  }
  .tk-name { font-weight: 600; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
  .tk-blitz { color: var(--gold); font-size: 13px; }
  .tk-zeile { font-size: 12.5px; color: var(--ink-secondary); overflow-wrap: anywhere; }
  .tk-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
  .tk-frist { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
  .tk-frist.warn { color: var(--status-critical); font-weight: 700; }
  .tk-countdown { font-size: 11px; color: var(--ink-muted); margin-top: -4px; }
  .tk-countdown.warn { color: var(--status-critical); font-weight: 600; }
  .tk-knoepfe { display: flex; gap: 5px; }
  .tk-knoepfe .btn-mini.an { border-color: var(--gold); color: var(--gold); }
  .tk-knoepfe .btn-mini.gut { border-color: var(--status-good); color: var(--status-good); }
  .frist-schnell { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  @media (max-width: 560px) {
    .tk { grid-template-columns: auto minmax(0, 1fr); }
    .tk-rechts { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  }
  /* --- Rechnung --- */
  .rechnung-blatt { }
  .rg-storno {
    border: 2px solid var(--status-critical); color: var(--status-critical);
    border-radius: 8px; padding: 7px 12px; margin-bottom: 14px;
    font-weight: 700; text-align: center; letter-spacing: .04em; text-transform: uppercase; font-size: 12px;
  }
  .rg-kopf { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
  .rg-von { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-secondary); }
  .rg-von b { font-size: 14px; color: var(--ink); }
  .rg-titel { text-align: right; }
  .rg-titel h3 { margin: 0 0 3px; font-size: 21px; }
  .rg-nr { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
  .rg-datum { font-size: 12.5px; color: var(--ink-secondary); }
  .rg-an { margin-bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
  .rg-an span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-secondary); }
  .rg-an b { font-size: 15px; }
  .rg-posten { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
  .rg-posten th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-secondary); padding: 0 6px 6px 0; border-bottom: 1px solid var(--border-strong);
  }
  .rg-posten td { padding: 9px 6px 9px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
  .rg-posten .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
  .rg-summe { display: flex; flex-direction: column; gap: 3px; align-items: stretch; margin-left: auto; max-width: 320px; }
  .rg-summe .ber-zeile.gross { border-top: 1px solid var(--border-strong); padding-top: 7px; margin-top: 4px; font-size: 15px; }
  .rg-hinweis { font-size: 12px; color: var(--ink-secondary); margin: 16px 0 0; }
  .rg-liste { display: flex; flex-direction: column; gap: 4px; }
  .rg-eintrag {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 11px; cursor: pointer; font-family: inherit; font-size: 13px; text-align: left; color: var(--ink);
  }
  .rg-eintrag:hover { border-color: var(--brand); }
  .rg-eintrag.storniert { opacity: .55; text-decoration: line-through; }
  .rg-e-nr { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
  .rg-e-name { overflow-wrap: anywhere; }
  .rg-e-betrag { font-family: var(--font-mono); }
  .sich-liste { display: flex; flex-direction: column; gap: 6px; }
  .sich-zeile {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 12px;
  }
  .sich-zeile b { font-size: 13.5px; display: block; }
  .sich-zeile span { font-size: 11.5px; color: var(--ink-secondary); font-family: var(--font-mono); }
  /* --- Verwaltung: zuletzt bespannt --- */
  .letzte-liste { display: flex; flex-direction: column; gap: 6px; }
  .lz {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-gross);
    padding: 10px 13px; cursor: pointer; font-family: inherit; text-align: left; width: 100%;
  }
  .lz:hover { border-color: var(--brand); }
  .lz-links { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lz-name { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
  .lz-sub { font-size: 12.5px; color: var(--ink-secondary); overflow-wrap: anywhere; }
  .lz-datum { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-secondary); flex: none; }

  /* --- Verwaltung: Vorrat --- */
  .vorrat-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
  /* Proben auf der Verwaltung: eine ruhige Reihe unter den Rollen. Bewusst kleiner und ohne
     Balken/Warnfarben - sie sind kein Bestand, den man im Blick behalten muss. */
  /* Ueberschrift auf eigener Zeile ueber den Proben, nicht daneben - daneben las sie sich
     wie ein Etikett am ersten Chip statt wie die Ueberschrift der ganzen Reihe. */
  .proben-reihe { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule); }
  .pr-titel { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; flex: none; }
  .pr-liste { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
  .pr-chip {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 12px 5px 6px;
  }
  .pr-chip:hover { border-color: var(--brand); background: var(--brand-wash); }
  .pr-chip .spule { width: 20px; height: 20px; }
  .pr-chip .spule::after { inset: 6.5px; }
  .pr-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .pr-meter { font-size: 11px; color: var(--ink-muted); }
  /* Proben-Karte auf der Bestand-Seite */
  .sk-probe { display: flex; flex-direction: column; gap: 8px; }
  .sk-probe-zeile { display: flex; align-items: baseline; gap: 7px; }
  .sk-probe-meter { font-family: var(--font-mono); font-size: 19px; color: var(--ink); font-weight: var(--zahl-weight); }
  .sk-probe-bez { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
  .sk-probe-getestet { font-size: 12px; color: var(--status-good); font-weight: 600; }
  /* Historie der ausprobierten Proben */
  .probe-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
  .probe-zeile + .probe-zeile { border-top: 1px solid var(--rule); }
  .pz-text { flex: 1; min-width: 0; }
  .pz-name { font-size: 13.5px; font-weight: 600; }
  .pz-neben { font-size: 11.5px; color: var(--ink-secondary); margin-top: 1px; }
  .pz-datum { font-size: 12px; color: var(--ink-muted); flex: none; }
  .vr {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 9px; text-align: left; width: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-gross);
    padding: 13px 15px; cursor: pointer; font-family: inherit;
    box-shadow: var(--shadow), var(--glanz);
  }
  .vr:hover { border-color: var(--brand); }
  /* Knappe und leere Rollen faerben die GANZE Kachel ein, samt farbiger Kante links - so
     sieht man den Zustand aus dem Augenwinkel, ohne die Fusszeile zu lesen. */
  .vr.warnung { background: var(--status-warning-wash); border-color: color-mix(in srgb, var(--status-warning) 35%, var(--border)); }
  .vr.kritisch { background: var(--status-critical-wash); border-color: color-mix(in srgb, var(--status-critical) 40%, var(--border)); }
  .vr.warnung::before, .vr.kritisch::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  }
  .vr.warnung::before { background: var(--status-warning); }
  .vr.kritisch::before { background: var(--status-critical); }
  .vr-oben { display: flex; align-items: center; gap: 11px; }
  .vr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
  .vr-name { font-size: 13px; color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
  .vr-sport { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
  .vr-meter { font-size: 17px; color: var(--ink); flex: none; font-weight: var(--zahl-weight); }
  .vr-bar { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
  .vr.warnung .vr-bar, .vr.kritisch .vr-bar { background: rgba(255,255,255,.55); }
  .vr-bar i { display: block; height: 100%; border-radius: 3px; }
  .vr-fuss { font-size: 11.5px; color: var(--ink-secondary); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  /* Die Rolle in der Kachel etwas kleiner als auf der Saiten-Seite. */
  .vr .spule { width: 26px; height: 26px; }
  .vr .spule::after { inset: 8.5px; }

  /* --- Spielersuche --- */
  .player-lookup input[type="search"] {
    width: 100%; max-width: 380px; box-sizing: border-box;
    padding: 10px 13px; border-radius: 8px; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font-size: 15px; font-family: inherit;
  }
  .sp-treffer { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; max-width: 380px; }
  .spt {
    display: flex; flex-direction: column; gap: 1px; text-align: left; width: 100%;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 11px; cursor: pointer; font-family: inherit;
  }
  .spt:hover { border-color: var(--brand); background: var(--brand-wash); }
  .spt-name { font-size: 14px; font-weight: 600; color: var(--ink); }
  .spt-sub { font-size: 11.5px; color: var(--ink-secondary); font-family: var(--font-mono); }
  /* Aus dem flachen Farbquadrat wird ein kleines Stueck gewickelte Saite: die schraegen
     hellen Striche lesen sich als Wicklung, die Farbe bleibt exakt dieselbe. Kostet kein
     Markup und wirkt ueberall dort, wo eine Saitenfarbe steht (Saiten, Kasse, Karten). */
  .farb-punkt {
    width: 13px; height: 13px; border-radius: 3px; flex: none; display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(128,128,128,.45);
    background-image: repeating-linear-gradient(118deg, rgba(255,255,255,.55) 0 1px, transparent 1px 4px);
    vertical-align: -2px;
  }
  /* Der Name bekommt eine eigene Zeile ueber die volle Breite - vorher stand er neben
     Preis und Loeschknopf und wurde bei laengeren Namen abgeschnitten. */
  .sk-kopf { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; }
  /* Vorrats-Saiten bekommen die Rolle vorangestellt - dafuer eine Spalte mehr. */
  .sk-kopf.mit-spule { grid-template-columns: auto minmax(0,1fr) auto; }
  .spule {
    width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;
    background-image: repeating-linear-gradient(122deg, rgba(255,255,255,.5) 0 1.5px, transparent 1.5px 5px);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 -3px 7px rgba(0,0,0,.12);
  }
  /* Das Loch in der Mitte - erst dadurch liest sich der Kreis als Rolle und nicht als Punkt. */
  .spule::after {
    content: ""; position: absolute; inset: 10px; border-radius: 50%;
    background: var(--surface); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  }
  .sk-name { font-size: 15.5px; }
  .sk-zweite {
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px;
  }
  /* Das Schloss steht dort, wo bei loeschbaren Saiten das Kreuz sitzt - gleiche Stelle,
     gleiche Groesse, und es kostet 16 statt 106 Punkte. */
  .sk-schloss {
    flex: none; font-size: 13px; line-height: 1; opacity: .5; cursor: help;
    padding: 4px 2px;
  }
  .sk-kopf .row-del { flex: none; }
  .sk-merkmale { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 6px; }
  .sk-farbe { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .sk-farbe select, .sk-staerke input {
    width: 100%; min-width: 0; box-sizing: border-box;
    border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink-secondary);
    border-radius: 7px; padding: 5px 7px; font-size: 12.5px; font-family: inherit;
  }
  .sk-staerke { display: flex; align-items: center; gap: 4px; }
  .sk-staerke span { font-size: 11.5px; color: var(--ink-muted); }
  .sp-summe {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 100%; box-sizing: border-box; cursor: pointer; text-align: left;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-gross);
    padding: 12px 16px; font-size: 13.5px; color: var(--ink-secondary); font-family: inherit;
  }
  .sp-summe:hover { border-color: var(--brand); }
  .sp-summe b { font-family: var(--font-mono); font-size: 16px; color: var(--ink); margin-left: auto; }
  .sp-summe .ss-titel { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
  .sp-summe .ss-anzahl {
    background: var(--surface-3); color: var(--ink-secondary);
    border-radius: var(--pill); padding: 1px 8px; font-size: 11.5px; font-weight: 600;
  }
  .sp-summe .ss-pfeil { color: var(--ink-muted); }
  .ss-sport { font-size: 11px; color: var(--ink-muted); }
  .ss-ohne {
    font-size: 11px; color: var(--status-warning); background: var(--status-warning-wash);
    border-radius: 5px; padding: 1px 6px;
  }
  /* ---- Kundenkarte und Auftragszettel ---- */
  .kunde-kopf {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
  }
  .kunde-kopf h3 { margin: 0; font-size: 21px; }
  .kunde-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
  .kunde-offen {
    display: flex; flex-direction: column; align-items: flex-end; flex: none;
    font-family: var(--font-mono); font-size: 20px; font-weight: var(--zahl-weight);
    color: var(--status-critical); line-height: 1.1;
  }
  .kunde-offen span {
    font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 2px;
  }
  /* Kleiner Knopf in Tabellenzeilen - fuer den Auftragszettel je Bespannung. */
  .btn-mini {
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--ink-secondary); border-radius: var(--pill);
    padding: 2px 9px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .btn-mini:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
  .zettel-status {
    margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-gross);
    font-size: 13.5px; font-weight: 600; text-align: center;
  }
  .zettel-status.bezahlt { background: var(--status-good-wash); color: var(--status-good); }
  .zettel-status.offen { background: var(--status-critical-wash); color: var(--status-critical); }
  /* ---- Namen zusammenfuehren ---- */
  .namen-gruppen { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
  .namen-gruppe {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px;
    width: 100%; text-align: left; padding: 11px 13px;
    border: 1px solid var(--border); border-radius: var(--radius-gross);
    background: var(--surface); color: var(--ink); cursor: pointer; font-size: 13.5px;
  }
  .namen-gruppe:hover { border-color: var(--brand); background: var(--brand-wash); }
  .namen-gruppe .ng-namen { font-weight: 600; }
  .namen-gruppe .ng-info { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
  .namen-gruppe .arrow { color: var(--ink-muted); }
  .namen-wahl { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
  .namen-zeile {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px;
    padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-gross);
    background: var(--surface); cursor: pointer; font-size: 13.5px;
  }
  .namen-zeile:hover { border-color: var(--brand); }
  .namen-zeile input { width: auto; margin: 0; }
  .namen-zeile .nz-name { font-weight: 600; }
  .namen-zeile .nz-info { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
  /* ---- Bericht und Auftragszettel ---- */
  .ber-blatt, .zettel-blatt {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-gross); padding: 20px 22px; margin-top: 14px;
  }
  .ber-kopf, .zettel-kopf {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
  }
  /* Profil-Export: eigene Farbgebung statt des neutralen Bericht-Weiss (Nutzer-Feedback: "nur
     weiss sieht langweilig aus", spaeter "mehr Pep, auch das Logo") - nutzt dieselben Marken-/
     Gold-Variablen wie der Rest der App, also automatisch passend zu jeder gewaehlten
     Gestaltung, keine fest verdrahtete Farbe (nur das Logo selbst behaelt seine echten
     Markenfarben, siehe .export-logo - ein Logo mit Theme-Farbe waere kein Wiedererkennen mehr).
     Kopf bekommt eine eigene, bis zum Kartenrand reichende Flaeche (dieselbe negative-Rand-
     Technik wie z.B. .profil-karte-kopf), die Bloecke einen goldenen Akzentstrich. */
  #profilExportBlatt { overflow: hidden; }
  #profilExportBlatt .ber-kopf {
    margin: -20px -22px 18px; padding: 20px 22px;
    background: linear-gradient(120deg, var(--brand-wash), var(--gold-wash));
    border-bottom: 3px solid var(--brand);
    align-items: center;
  }
  #profilExportBlatt .export-logo-zeile { display: flex; align-items: center; gap: 12px; }
  #profilExportBlatt .export-logo { display: block; width: 38px; height: 38px; flex: none; }
  #profilExportBlatt .export-logo svg { display: block; width: 100%; height: 100%; }
  #profilExportBlatt .ber-marke { color: var(--brand); font-weight: 700; margin-bottom: 2px; }
  #profilExportBlatt .ber-kopf h3 { color: var(--ink); }
  #profilExportBlatt .ber-block { border-left: 3px solid var(--gold); padding-left: 13px; }
  #profilExportBlatt .ber-block h4 { color: var(--brand); }
  #profilExportBlatt .ber-zeile b { color: var(--gold); }
  #profilExportBlatt .ber-fuss { border-top: 1px solid var(--gold); color: var(--brand); font-weight: 600; }
  body.druckt-bericht #profilExportBlatt .ber-kopf { background: transparent !important; border-bottom-color: #111 !important; }
  body.druckt-bericht #profilExportBlatt .ber-block { border-left-color: #111 !important; }
  body.druckt-bericht #profilExportBlatt .ber-fuss { border-top-color: #111 !important; }
  .ber-marke, .zettel-marke {
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-muted); margin-bottom: 3px;
  }
  .ber-kopf h3, .zettel-kopf h3 { margin: 0; font-size: 18px; }
  .ber-wer { font-size: 12px; color: var(--ink-muted); text-align: right; }
  .ber-block { margin-bottom: 18px; }
  .ber-block:last-of-type { margin-bottom: 0; }
  .ber-block h4 {
    margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
  }
  .ber-zeile {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 5px 0; font-size: 13.5px; border-bottom: 1px dotted var(--border);
  }
  .ber-zeile:last-child { border-bottom: 0; }
  .ber-zeile b { font-family: var(--font-mono); font-weight: var(--zahl-weight); }
  .ber-zeile b.gut { color: var(--status-good); }
  .ber-zeile b.offen { color: var(--status-critical); }
  .ber-zeile b.gesamt { font-size: 16px; color: var(--ink); font-weight: 600; }
  .ber-klein { font-size: 11.5px; color: var(--ink-muted); }
  .ber-klein.offen { color: var(--status-critical); }
  .ber-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .ber-tabelle th {
    text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border-strong);
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
  }
  .ber-tabelle td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
  .ber-tabelle .num { text-align: right; font-family: var(--font-mono); }
  .ber-fuss { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border);
              font-size: 11px; color: var(--ink-muted); }
  .ber-steuerung { margin-bottom: 4px; }
  /* Auf schmalen Geraeten muessen die Berichtstabellen in die Breite passen. Ohne
     table-layout: fixed richtet sich die Tabelle nach dem laengsten Inhalt und schiebt
     das ganze Fenster zur Seite - dann wandern beim Blaettern auch die Ueberschriften mit.
     Beim Drucken gilt das nicht: dort ist Platz, und die Spalten sollen sitzen. */
  @media screen and (max-width: 1100px) {
    .ber-tabelle, .rg-posten { table-layout: fixed; }
    .ber-tabelle th, .ber-tabelle td,
    .rg-posten th, .rg-posten td { overflow-wrap: anywhere; white-space: normal; }
    /* Der Kopf der Rechnung steht am Handy untereinander statt nebeneinander. */
    .rg-titel { text-align: left; }
    .rg-summe { max-width: none; }
    .ber-tabelle .num { font-size: 11.5px; }
  }

  /* Beim Drucken bleibt NUR das Blatt stehen. Ohne das kaeme die halbe App mit aufs Papier. */
  @media print {
    body.druckt-bericht .shell,
    body.druckt-bericht .auth-gate,
    body.druckt-bericht .sync-hinweis,
    body.druckt-bericht .undo-toast,
    body.druckt-bericht .rail-backdrop,
    body.druckt-bericht .nicht-drucken,
    body.druckt-bericht .modal-head { display: none !important; }
    body.druckt-bericht .modal-overlay {
      position: static !important; display: block !important;
      background: none !important; padding: 0 !important;
    }
    body.druckt-bericht .modal-box {
      max-height: none !important; box-shadow: none !important;
      border: 0 !important; width: auto !important; max-width: none !important;
      background: #fff !important;
    }
    body.druckt-bericht .modal-body { overflow: visible !important; padding: 0 !important; max-height: none !important; }
    body.druckt-bericht .ber-blatt,
    body.druckt-bericht .zettel-blatt { border: 0; padding: 0; margin: 0; background: #fff; }
    body.druckt-bericht .ber-tabelle { page-break-inside: auto; }
    body.druckt-bericht .ber-tabelle tr { page-break-inside: avoid; }
    body.druckt-bericht .ber-block { page-break-inside: avoid; }
    /* Auf Papier gehoert schwarz auf weiss, egal welche Gestaltung gerade gewaehlt ist. */
    body.druckt-bericht { background: #fff !important; }
    body.druckt-bericht .ber-blatt *,
    body.druckt-bericht .zettel-blatt * { color: #111 !important; }
    body.druckt-bericht .ber-klein,
    body.druckt-bericht .ber-fuss,
    body.druckt-bericht .ber-wer,
    body.druckt-bericht .ber-marke,
    body.druckt-bericht .ber-block h4 { color: #666 !important; }
    @page { margin: 16mm; }
  }

  /* ============ UNDO TOAST ============ */
  .undo-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
    display: flex; align-items: center; gap: 14px;
    background: var(--brand-strong); color: #fff;
    padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
    font-size: 13.5px; z-index: 50;
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  }
  .undo-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  /* Am Handy ueber die untere Navigationsleiste heben. Das stand bisher oben im 820px-Block
     und wurde von der Grundregel (bottom: 24px) ueberschrieben - die Meldung sass also
     HINTER der Leiste, und "Rueckgaengig" war je nach Geraet gar nicht antippbar. */
  @media (max-width: 820px) {
    .undo-toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  }
  .undo-toast button {
    border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff;
    border-radius: 7px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .undo-toast button:hover { background: rgba(255,255,255,.15); }

  /* ==================================================================
     PREMIUM-EBENE (intern)
     Zurueckhaltender als auf der Startseite: hier wird gearbeitet.
     ================================================================== */

  /* ---------- Sehr leiser Schein hinter der Arbeitsflaeche ----------
     Gerade so viel, dass die Flaeche nicht wie ein leeres Blatt wirkt. Fest im
     Sichtfeld, damit beim Scrollen nichts mitwandert und ablenkt. */
  /* Hier stand ein Schein als .content::before samt "z-index: 1" auf allen
     Kindern. Der Schein sitzt inzwischen am .shell; uebrig blieb nur das
     Stapel-Geruest - und das hat den Schwebe-Knopf unten links verdeckt.
     Entfernt; .content braucht keine eigene Ebene mehr. */
  .content { position: relative; }

  /* ---------- Kopfleiste als Glas ----------
     Sie klebt ohnehin oben; mit Unschaerfe wirkt der Inhalt, der darunter
     durchlaeuft, wie geschoben statt wie abgeschnitten. Hohe Deckkraft, damit
     ein Ausfall von backdrop-filter folgenlos bleibt. */
  .topbar {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    z-index: 6;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .topbar {
      background: color-mix(in srgb, var(--bg) 78%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      backdrop-filter: blur(16px) saturate(1.4);
    }
  }

  /* ---------- Tabellen ----------
     Der wichtigste Ort der App. Drei Dinge: die Kopfzeile muss sich beim Scrollen
     abheben, die Zeile unter dem Zeiger muss eindeutig sein, und Zahlen muessen
     untereinander stehen. */
  thead th {
    box-shadow: 0 1px 0 var(--rule-stark);
    background: color-mix(in srgb, var(--surface) 94%, var(--ink));
  }
  @supports (backdrop-filter: blur(1px)) {
    thead th {
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
  tbody tr { transition: background .12s ease; }
  tbody tr:hover td { background: color-mix(in srgb, var(--brand-wash) 80%, var(--surface)); }
  /* Zahlenspalten rechtsbuendig mit gleicher Ziffernbreite - ohne das springen
     Betraege beim Scrollen optisch hin und her. */
  td.num, th.num, .num { font-variant-numeric: tabular-nums; }

  /* ---------- Formularfelder: sichtbarer Zustand ----------
     Wer Daten eintippt, muss ohne Nachdenken sehen, wo er ist. */
  .field input, .field select, .field textarea {
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .field input:hover, .field select:hover {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border-strong));
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  }

  /* ---------- Karten ----------
     Sehr kleine Bewegung. Eine Karte im Dashboard soll auf Beruehrung reagieren,
     aber nicht tanzen - man zeigt hier hundertmal am Tag drauf. */
  .card, .saite-karte {
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
  }
  .saite-karte:hover {
    transform: translateY(-2px);
    box-shadow: var(--schatten-2), var(--glanz);
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  }

  /* ---------- Knoepfe ---------- */
  .btn { transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s ease, background .15s ease; }
  .btn:hover  { transform: translateY(-1px); box-shadow: var(--schatten-2); }
  .btn:active { transform: translateY(0) scale(.985); }

  /* ---------- Seitenleiste ----------
     Der aktive Eintrag bekommt eine Marke am linken Rand statt nur einer anderen
     Farbe - das liest sich auf einen Blick, auch aus dem Augenwinkel. */
  .rail a, .rail button { transition: background .16s ease, color .16s ease; }

  /* ---------- Ueberschriften im Inhalt ---------- */
  .card-kopf h2, .section > h2 {
    font-family: var(--font-titel);
    font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    line-height: var(--zeile-titel);
  }

  @media (prefers-reduced-motion: reduce) {
    tbody tr, .card, .saite-karte, .btn,
    .field input, .field select, .field textarea,
    .rail a, .rail button { transition: none; }
    .saite-karte:hover, .btn:hover, .btn:active { transform: none; }
  }

  /* ---------- Abstands-Klassen ----------
     Ersetzen die haeufigsten wiederholten Inline-Styles im Markup. Vorher standen
     dieselben Abstaende als style="margin-top:10px" hundertfach im HTML - nicht
     ueberschreibbar, nicht gebuendelt aenderbar und an der Skala vorbei. */
  .mt-3 { margin-top: var(--raum-3); }
  .mt-0 { margin-top: 0; }
  .mb-4 { margin-bottom: var(--raum-4); }
  .w-auto { width: auto; }
  .fb-voll { flex-basis: 100%; }
  .mt-4 { margin-top: var(--raum-4); }
  .m-0 { margin: 0; }
  .mt-2 { margin-top: var(--raum-2); }
  .mb-3 { margin-bottom: var(--raum-3); }
  .mt-1 { margin-top: var(--raum-1); }

  /* ==================================================================
     WOW-EBENE (intern) - Struktur, Tiefe, Karten
     ================================================================== */

  /* ---------- 1. Der Grund und das schwebende Blatt ---------- */
  .shell {
    background:
      radial-gradient(90% 60% at 82% -10%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
      radial-gradient(70% 50% at 0% 100%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%),
      var(--bg);
    background-attachment: fixed;
  }
  :root[data-design="platz"] .shell { background: var(--bg); }

  .main { min-width: 0; display: flex; flex-direction: column; }

  /* Die Kopfzeile sitzt jetzt AUF dem Grund, nicht auf dem Blatt - dadurch
     wirkt das Blatt darunter wie hineingelegt. */
  /* Die Kopfzeile klebt oben - wenn sie durchsichtig ist, scrollt der Inhalt
     sichtbar DURCH die Ueberschrift. Genau das ist passiert ("Verwaltung" lag
     ueber der Kennzahl). Sie braucht also eine deckende Flaeche; die Unschaerfe
     ist die Kuer, die hohe Deckkraft die Pflicht. */
  .topbar {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-bottom: none;
    padding: var(--raum-6) var(--raum-6) var(--raum-4);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .topbar {
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      backdrop-filter: blur(18px) saturate(1.4);
    }
  }

  .content {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 20px;
    box-shadow: var(--schatten-2), var(--glanz);
    padding: var(--raum-6);
    margin: 0 var(--raum-6) var(--raum-6);
    width: auto;
  }
  .content::before { display: none; }   /* der Schein sitzt jetzt am Grund */

  /* ---------- 2. Seitenleiste ----------
     Hier stand eine Fassung in hellem Glas, die alle Farben der Leiste
     zuruecknahm. Das Ergebnis war eine App, der man die gewaehlte Gestaltung
     nicht mehr ansah: heller Grund, weisses Blatt, helle Leiste. Die Leiste
     traegt ihre Farbe wieder selbst (Grundregeln weiter oben), die Feinheiten
     stehen in der FARB-EBENE ganz unten. */

  /* ---------- 3. Kennzahlen als schwebende Karten ----------
     Vorher ein Raster mit Trennlinien, das wie eine Tabellenzeile wirkte.
     Jetzt einzelne Karten mit Luft dazwischen. */
  .kpi-grid {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    gap: var(--raum-4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  .kpi {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 16px;
    box-shadow: var(--shadow), var(--glanz);
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
  }
  .kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--schatten-2), var(--glanz);
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  }
  .kpi .value { font-size: 34px; margin-top: var(--raum-2); }
  .kpi .label { color: var(--ink-muted); }

  /* ---------- 4. Tabellen: ein Blatt, keine Gitterlinien ---------- */
  .table-wrap {
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    border-radius: 16px;
    box-shadow: var(--shadow), var(--glanz);
  }
  thead th {
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    color: var(--ink-muted);
  }
  @supports (backdrop-filter: blur(1px)) {
    thead th { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  tbody td { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
  /* Zebra sehr viel leiser - die Zeilenhoehe traegt die Trennung, nicht der Streifen. */
  tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 22%, var(--surface)); }
  tbody tr:hover td { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }

  /* ---------- 5. Status als kraeftige Pillen ---------- */
  .badge {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: var(--t-mini);
    font-weight: 700;
    letter-spacing: .02em;
    /* Ring als box-shadow statt border: Die Status-Pille ist ein <button> mit
       inline "border:none" (siehe statusBadge()), und inline schlaegt jede
       Regel. Ueber den Schatten bekommen beide Bauformen dieselbe Kante. */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  }
  .badge.good    { background: var(--status-good-wash);     color: var(--status-good); }
  .badge.warning { background: var(--status-warning-wash);  color: var(--status-warning); }
  .badge.critical{ background: var(--status-critical-wash); color: var(--status-critical); }
  /* "abgeholt" hat bewusst keine Statusfarbe - ohne Flaeche sah es aber aus wie
     loser Text neben einem Punkt. Eine neutrale Pille macht daraus wieder ein
     erkennbares Etikett, ohne Aufmerksamkeit zu ziehen. */
  .badge:not(.good):not(.warning):not(.critical) {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink-secondary);
  }

  /* ---------- 6. Hauptaktionen springen ins Auge ---------- */
  .btn {
    padding: var(--raum-3) var(--raum-5);
    border-radius: 12px;
    font-weight: 700;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 88%, #fff), var(--brand));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 30%, transparent),
                0 8px 20px -8px color-mix(in srgb, var(--brand) 55%, transparent);
  }
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--brand) 32%, transparent),
                0 14px 30px -10px color-mix(in srgb, var(--brand) 62%, transparent);
  }
  .btn.gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 88%, #fff), var(--gold));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--gold) 30%, transparent),
                0 8px 20px -8px color-mix(in srgb, var(--gold) 55%, transparent);
  }
  /* Sekundaere Knoepfe treten bewusst zurueck: keine Flaeche, nur eine Kante. */
  .btn.ghost, .btn.sekundaer {
    background: transparent;
    color: var(--ink-secondary);
    border: 1px solid var(--border-strong);
    box-shadow: none;
  }

  /* ---------- 7. Karten allgemein ---------- */
  .card {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--border) 85%, transparent);
  }

  /* ---------- Schmale Schirme: das Blatt gibt seine Raender auf ----------
     Auf dem Handy waeren 24 px Rand ringsum verschenkte Flaeche; dort soll der
     Inhalt wieder bis an die Kante laufen. */
  @media (max-width: 820px) {
    /* Das Entscheidende am Handy: Die Arbeitsflaeche gibt ihr Weiss ab und laesst
       den getoenten Grund der .shell durch. Vorher war die Flaeche weiss UND die
       Karten weiss - dadurch war von Karten nichts zu sehen, und genau deshalb
       wirkte das Redesign auf dem Telefon wie gar keines. Jetzt liegen weisse,
       schwebende Karten auf getoentem Grund; das ist derselbe Aufbau wie am
       grossen Schirm, nur ohne den Rahmen ringsum. */
    .content {
      margin: 0;
      border-radius: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      padding: var(--raum-4) var(--raum-4) var(--raum-8);
    }
    .card, .kpi, .saite-karte, .table-wrap, .arbeit-karte {
      background: var(--surface);
      box-shadow: var(--shadow), var(--glanz);
      border-radius: 16px;
    }
    /* Mehr Luft zwischen den Bloecken - am Telefon traegt Abstand die Gliederung,
       weil es keine Spalten gibt, die es fuer einen tun. */
    .section { margin-bottom: var(--raum-6); }
    .kpi-grid { gap: var(--raum-3); }
    /* Die Bilanz-Kachel im Zweirang-Layout hatte einen grauen Grund - sinnvoll,
       solange alle Kacheln in EINEM Rahmen sassen und sich absetzen mussten.
       Als freistehende Karte auf getoentem Grund macht Grau sie unsichtbar.
       Gleiche Spezifitaet wie die Ursprungsregel, aber spaeter - gewinnt. */
    .kpi-zweirang > .kpi-bilanz { background: var(--surface); }
    .topbar { padding: var(--raum-4) var(--raum-4) var(--raum-3); }
    .kpi { border-radius: 14px; }
    /* Die Leiste ist hier eine Schublade, die von rechts hereinfaehrt - ohne
       Schlagschatten klebt sie flach auf dem Inhalt.
       UND sie muss deckend sein: als halbdurchsichtiges Glas schimmert der
       Inhalt darunter durch, die Eintraege wirken ausgewaschen und schlecht
       lesbar. Glas ist richtig fuer eine Leiste NEBEN dem Inhalt, falsch fuer
       eine Schublade UEBER dem Inhalt. */
    .rail {
      background: var(--brand-strong);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: -8px 0 26px rgba(0,0,0,.28);
    }
  }
  @media (max-width: 560px) {
    .topbar { padding: var(--raum-3); }
    .content { padding: var(--raum-3); }
    /* Einspaltig wie gehabt. "overflow: visible", damit der Schatten der
       einzelnen Karten nicht abgeschnitten wird - im alten Raster mit
       Trennlinien war hidden richtig, bei freistehenden Karten nicht mehr. */
    .kpi-grid { grid-template-columns: 1fr; overflow: visible; }
    /* Die Handy-Regel weiter oben nimmt der Kachel linken Rand und setzt
       stattdessen eine Trennlinie oben - das passte zum Raster, nicht zu
       einzelnen Karten. Hier bekommt sie ihre vier Kanten zurueck. */
    .kpi,
    .kpi-grid > .kpi:first-child {
      border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .kpi, .btn { transition: none; }
    .kpi:hover, .btn:hover { transform: none; }
  }

  /* ==================================================================
     LISTEN-EBENE - Bespannungskarten und Bestand
     ================================================================== */

  /* ---------- Bespannungskarte (Tennis / Badminton) ---------- */
  .ekarte {
    border-radius: 16px;
    padding: var(--raum-4) var(--raum-5);
    gap: var(--raum-2);
    border-color: color-mix(in srgb, var(--border) 85%, transparent);
    box-shadow: var(--shadow), var(--glanz);
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
  }
  /* Nur auf Geraeten mit echtem Zeiger. Auf dem Telefon gibt es kein "darueber
     schweben" - dort bliebe der Effekt nach einem Tipp haengen. Die Ursprungs-
     regel stand aus demselben Grund in @media (hover: hover). */
  @media (hover: hover) {
    .ekarte:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
    }
  }
  /* Statusstreifen links. Welcher Zustand gilt, steht schon in der Pille in der
     Karte - :has() liest sie aus, dadurch braucht das Markup keine Aenderung. */
  .ekarte:has(.badge.good)     { box-shadow: inset 4px 0 0 var(--status-good),     var(--shadow), var(--glanz); }
  .ekarte:has(.badge.warning)  { box-shadow: inset 4px 0 0 var(--status-warning),  var(--shadow), var(--glanz); }
  .ekarte:has(.badge.critical) { box-shadow: inset 4px 0 0 var(--status-critical), var(--shadow), var(--glanz); }
  .ekarte:has(.badge.good):hover     { box-shadow: inset 4px 0 0 var(--status-good),     var(--schatten-2), var(--glanz); }
  .ekarte:has(.badge.warning):hover  { box-shadow: inset 4px 0 0 var(--status-warning),  var(--schatten-2), var(--glanz); }
  .ekarte:has(.badge.critical):hover { box-shadow: inset 4px 0 0 var(--status-critical), var(--schatten-2), var(--glanz); }

  .ek-name { font-size: var(--t-h4); font-weight: 700; letter-spacing: -.01em; }
  /* Das Datum als ruhiger Chip statt als konkurrierende Zeile. */
  .ek-datum {
    font-size: var(--t-mini);
    color: var(--ink-muted);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    border-radius: 999px;
    padding: 2px 9px;
  }
  .ek-mitte { font-size: var(--t-basis); color: var(--ink-secondary); margin-top: 2px; }
  .ek-schlaeger { font-weight: 500; color: var(--ink); }
  .ek-kg {
    font-weight: 600; color: var(--ink);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    border-radius: 8px; padding: 1px 8px;
  }
  .ek-fuss { margin-top: var(--raum-2); padding-top: var(--raum-2); border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
  .ek-saite { font-size: var(--t-klein); }
  .kartenliste { gap: var(--raum-3); }

  /* ---------- Bestand ---------- */
  .saite-karte {
    border-radius: 16px;
    padding: var(--raum-5);
    gap: var(--raum-3);
    border-color: color-mix(in srgb, var(--border) 85%, transparent);
  }
  .sk-name { font-size: var(--t-h4); font-weight: 700; }
  /* Die verbliebene Laenge ist die wichtigste Zahl der Seite - sie darf das auch zeigen. */
  .sk-zahl { font-size: 26px; letter-spacing: -.02em; }
  .sk-reicht { font-size: var(--t-klein); }
  .sk-art, .sk-sport-badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--t-mini);
    font-weight: 700;
  }
  .sk-bestand { gap: var(--raum-2); }

  /* Der Rollenbalken: hoeher, runder, mit einer feinen Vertiefung - dadurch liest
     er sich als Behaelter mit Inhalt statt als bunter Strich. */
  .roll-balken {
    height: 18px;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .roll-balken .rb-fuell {
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent);
  }

  /* Die Sammel-Zeile oben (Summe je Sportart) wird ein richtiger Kartenkopf. */
  .sp-summe {
    border-radius: 14px;
    padding: var(--raum-3) var(--raum-4);
    background: var(--surface);
    box-shadow: var(--shadow), var(--glanz);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  @media (hover: hover) {
    .sp-summe:hover { transform: translateY(-1px); box-shadow: var(--schatten-2), var(--glanz); }
    .sp-chip:hover { transform: translateY(-1px); }
  }
  .sp-summe b { font-size: 18px; }

  /* Die Probe-Karten (Test-Saiten) bekommen dieselbe Sprache. */
  .sk-probe-meter { font-size: 22px; }

  /* Spieler-Chips auf der Saiten-Seite */
  .sp-chip { border-radius: 12px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }

  @media (max-width: 820px) {
    .ekarte { padding: var(--raum-4); }
    .saite-karte { padding: var(--raum-4); }
    .sk-zahl { font-size: 23px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ekarte, .sp-summe, .sp-chip { transition: none; }
    .ekarte:hover, .sp-summe:hover, .sp-chip:hover { transform: none; }
  }

  /* ---------- Schlanke Listen-Leiste (Suche + Sortierung) ---------- */
  .listen-leiste {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2);
    margin-bottom: var(--raum-4);
  }
  .ll-suche { position: relative; flex: 1 1 200px; min-width: 0; display: flex; align-items: center; }
  /* Echte Grafik statt des Zeichens U+2315 - das rendert je nach Schrift als
     unklarer Strich oder gar nicht. */
  .ll-suche .ll-lupe {
    position: absolute; left: 12px; width: 16px; height: 16px;
    color: var(--ink-muted); pointer-events: none;
  }
  .ll-suche input {
    width: 100%; box-sizing: border-box;
    padding: var(--raum-3) var(--raum-4) var(--raum-3) 34px;
    border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: var(--t-basis);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ll-suche input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  }
  .listen-leiste .sortwahl { margin: 0; flex: 0 1 auto; }
  .listen-leiste .sortwahl select {
    border-radius: 999px; padding: var(--raum-2) var(--raum-4);
    border: 1px solid var(--border-strong); background: var(--surface);
  }
  .ll-reset { flex: none; border-radius: 999px; }

  .zeile-rechts.nur-breit { display: flex; justify-content: flex-end; margin-bottom: var(--raum-3); }
  @media (max-width: 820px) { .zeile-rechts.nur-breit { display: none; } }

  /* ---------- Zwischenueberschriften in der Kartenliste ---------- */
  .karten-gruppe {
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-muted);
    padding: var(--raum-4) 2px var(--raum-1);
  }
  .karten-gruppe:first-child { padding-top: 0; }
  .karten-gruppe.monat {
    font-family: var(--font-titel); font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing); text-transform: none;
    font-size: var(--t-h4); color: var(--ink);
  }

  /* ---------- Initiale als Anker ---------- */
  .ek-kopf { align-items: center; gap: var(--raum-3); }
  .ek-initial {
    flex: none; width: 34px; height: 34px; border-radius: 12px;
    display: grid; place-items: center;
    font-family: var(--font-titel); font-size: 16px; font-weight: 600;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 13%, transparent);
  }
  .ek-kopf .ek-name { flex: 1 1 auto; }
  .ek-datum b { font-weight: 600; color: var(--ink); }

  /* ==================================================================
     SAITEN & PREISE - und Abschnittskoepfe, die ueberall gelten
     ================================================================== */

  /* ---------- Abschnittskopf ----------
     Steht auf fast jeder Seite. Vorher: Ueberschrift und Hinweis auf einer
     Grundlinie mit duenner Trennlinie darunter - beides gleich laut. Jetzt
     traegt die Ueberschrift, der Hinweis tritt als ruhige Zeile zurueck. */
  .section-head {
    align-items: flex-end;
    margin-bottom: var(--raum-4);
    padding-bottom: var(--raum-3);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  .section-head h2 {
    font-family: var(--font-titel);
    font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    font-size: var(--t-h2);
    line-height: var(--zeile-titel);
    margin: 0;
  }
  .section-head .hint {
    font-size: var(--t-klein);
    color: var(--ink-muted);
    text-align: right;
    flex: 0 1 auto;
  }

  /* ---------- Raster der Saitenkarten ---------- */
  .saiten-gitter {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--raum-4);
  }

  /* ---------- Die beiden Zusatz-Kacheln ----------
     Sie sollen sichtbar, aber nachrangig sein: der Bestand ist der Inhalt der
     Seite, "neu anlegen" ist ein Werkzeug. Deshalb gestrichelt, ohne Schatten,
     mit zurueckgenommener Flaeche - und erst bei Beruehrung in Markenfarbe. */
  .saite-neu, .saite-sammel {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--border-strong) 65%, transparent);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  @media (hover: hover) {
    .saite-neu:hover, .saite-sammel:hover {
      border-color: color-mix(in srgb, var(--brand) 45%, var(--border-strong));
      background: color-mix(in srgb, var(--brand) 5%, var(--surface));
    }
    .saite-sammel:hover { transform: translateY(-2px); }
  }
  .saite-neu .sn-plus, .saite-sammel .ss-plus {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    font-size: 17px; font-weight: 600; line-height: 1;
  }
  .saite-neu .sn-plus { margin-bottom: var(--raum-1); }
  .saite-neu input, .saite-neu select {
    border-radius: var(--radius);
    padding: var(--raum-2) var(--raum-3);
    font-size: var(--t-basis);
  }

  /* ---------- Kaufhistorie-Knopf ---------- */
  .sp-summe .ss-anzahl {
    border-radius: 999px; padding: 2px 9px;
    font-size: var(--t-mini); font-weight: 700;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
  }

  /* ---------- Gilt fuer alle uebrigen Seiten mit ---------- */
  /* Kasse und Schiedsrichter benutzen dieselben .ekarte-Karten wie die
     Bespann-Listen; Mein Profil und das Wiki dieselben .card-Flaechen. Die
     Arbeit von vorhin traegt dort also schon. Was fehlte, waren die Koepfe
     innerhalb von Karten - die standen als nackte Zeilen ohne Rang. */
  .card > h3, .card-kopf h3 {
    font-family: var(--font-titel);
    font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    font-size: var(--t-h4);
    line-height: var(--zeile-titel);
  }
  .empty-note {
    font-size: var(--t-basis);
    color: var(--ink-muted);
    padding: var(--raum-6) var(--raum-4);
    text-align: center;
  }

  /* Der Absende-Knopf der Anlege-Kachel tritt zurueck: Inhalt der Seite ist der
     Bestand, nicht das Anlegen. Als voller Markenknopf war er das Lauteste auf
     dem Schirm und hat die Rangfolge umgedreht. */
  .saite-neu .btn {
    background: transparent;
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
    box-shadow: none;
  }
  @media (hover: hover) {
    .saite-neu .btn:hover {
      background: color-mix(in srgb, var(--brand) 10%, transparent);
      border-color: var(--brand);
      box-shadow: none;
    }
  }

  /* ---------- Saitenkarte: Fakten statt Formular ----------
     Die Karte zeigt in Ruhe nur noch Zahlen und Text. Alles Bedienbare liegt
     hinter dem Aufklapper - das ist der Unterschied zwischen einer Eingabemaske
     und einem Werkzeug, das man ueberfliegt. */
  .sk-fakten {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--raum-1) var(--raum-3);
    font-size: var(--t-klein);
    color: var(--ink-muted);
  }
  .sk-fakten .skf-preis { font-weight: 700; color: var(--ink); font-family: var(--font-mono); }
  .sk-fakten .skf-farbe { display: inline-flex; align-items: center; gap: 5px; }
  .sk-fakten .skf-art {
    margin-left: auto;
    border-radius: 999px; padding: 2px 9px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    font-size: var(--t-mini); font-weight: 700;
  }
  /* Der Bestand ist jetzt das Erste unter dem Namen und darf entsprechend tragen. */
  .saite-karte .sk-zahl { font-size: 30px; line-height: 1.1; }
  .saite-karte .sk-bestand { gap: var(--raum-2); }
  /* Im aufgeklappten Bereich sitzen die Bedienelemente - dort duerfen sie auch
     wie Bedienelemente aussehen. */
  .sk-details .sk-zweite, .sk-details .sk-merkmale { margin-bottom: var(--raum-3); }
  .sk-details .sk-aktionen { margin-bottom: var(--raum-2); }
  .sk-mehr { font-size: var(--t-klein); }

  /* ---------- Ueberblick oben auf der Bestand-Seite ---------- */
  .saiten-ueberblick { margin-bottom: var(--raum-5); }
  .saiten-ueberblick .value.gold { color: var(--gold); }
  .saiten-ueberblick .kpi .sub { font-size: var(--t-klein); color: var(--ink-muted); margin-top: 2px; }

  /* ---------- Dringlichkeit an der Saitenkarte ----------
     vorratLage() kennt drei Zustaende. Sichtbar waren sie bisher nur als Textzeile
     mitten in der Karte - beim Ueberfliegen also gar nicht. Jetzt traegt die Karte
     links einen Streifen, wie die Bespannungskarten auch. */
  .saite-karte.lage-nachbestellen {
    box-shadow: inset 4px 0 0 var(--status-critical), var(--shadow), var(--glanz);
    border-color: color-mix(in srgb, var(--status-critical) 26%, var(--border));
  }
  .saite-karte.lage-ersatzDa {
    box-shadow: inset 4px 0 0 var(--status-warning), var(--shadow), var(--glanz);
  }
  @media (hover: hover) {
    .saite-karte.lage-nachbestellen:hover { box-shadow: inset 4px 0 0 var(--status-critical), var(--schatten-2), var(--glanz); }
    .saite-karte.lage-ersatzDa:hover { box-shadow: inset 4px 0 0 var(--status-warning), var(--schatten-2), var(--glanz); }
  }

  /* Scroll-Sperre bei offener Schublade - siehe menuOeffnen(). */
  html.menue-offen, body.menue-offen { overflow: hidden; }
  body.menue-offen .auth-gate { overflow: hidden; }

  /* ---------- Mein Profil: die wichtigste Frage zuerst ----------
     "Wann wurde der zuletzt bespannt" ist der Grund, warum man diese Seite
     aufmacht. Sie stand als Kleingedrucktes unter fuenf gleich grossen Chips. */
  .profil-frische { display: flex; flex-direction: column; gap: var(--raum-2); margin: var(--raum-2) 0 var(--raum-3); }
  .profil-frische .pf-text {
    font-size: var(--t-h4);
    font-weight: 600;
    color: var(--ink);
    line-height: var(--zeile-titel);
  }
  .profil-frische .pf-text .profil-schnitt { font-weight: 400; color: var(--ink-muted); font-size: var(--t-basis); }
  /* Ohne Spiel-Daten steht hier ein erklaerender Absatz statt einer Kennzahl.
     Der darf NICHT das Gewicht der Kennzahl bekommen - sonst schiebt die
     Erklaerung die eigentlichen Angaben aus dem Blick. */
  .profil-frische .pf-hinweis { font-size: var(--t-klein); line-height: 1.5; margin: 0; color: var(--ink-muted); }
  .profil-frische:not(:has(.profil-frische-bar)) .pf-text {
    font-size: var(--t-basis);
    font-weight: 600;
    color: var(--ink-secondary);
  }
  .profil-frische-bar { height: 10px; border-radius: 999px; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent); }
  .profil-frische-bar > span { border-radius: 999px; }

  /* Die Chips tragen jetzt Nebenangaben - klein, ruhig, aber lesbar.
     9,5 px waren in Grossbuchstaben an der Grenze. */
  .profil-stat-block { gap: var(--raum-2); }
  .profil-stat-chip { border-radius: 10px; padding: var(--raum-2) var(--raum-3); }
  .profil-stat-chip .psc-label { font-size: var(--t-mini); letter-spacing: .06em; color: var(--ink-muted); }
  .profil-stat-chip .psc-value { font-size: var(--t-basis); }

  /* ---------- Schlaeger-Wiki ---------- */
  .wiki-tag-pill {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--t-mini);
    font-weight: 600;
  }
  .wiki-modell-chip {
    border-radius: 12px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }
  @media (hover: hover) { .wiki-modell-chip:hover { transform: translateY(-1px); } }
  .wiki-gruppen-kopf {
    font-family: var(--font-titel);
    font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    font-size: var(--t-h4);
    color: var(--ink);
  }
  .wiki-jahr-ueberschrift {
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-muted);
  }
  .wiki-beitrag-fuss { font-size: var(--t-klein); }

  /* ---------- Wiki: Kopfbereich zusammengezogen ---------- */
  .wiki-intro {
    font-size: var(--t-klein);
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0 0 var(--raum-3);
    max-width: 62ch;
  }
  .wiki-steuerung { align-items: center; gap: var(--raum-2); }
  .wiki-neu-knopf { margin-left: auto; flex: none; }
  @media (max-width: 560px) {
    /* Am schmalsten Schirm bekommt der Knopf die volle Breite - als schmaler
       Rest neben zwei Umschaltern waere er kaum zu treffen. */
    .wiki-neu-knopf { margin-left: 0; width: 100%; }
  }
  .listen-leiste .ll-filter {
    flex: 0 1 auto; min-width: 0; max-width: 100%;
    border-radius: 999px;
    padding: var(--raum-2) var(--raum-4);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit; font-size: var(--t-basis);
  }

  /* ---------- Diagramm-Karten ---------- */
  .chart-grid { gap: var(--raum-4); }
  .chart-card { padding: var(--raum-5) var(--raum-5) var(--raum-4); }
  .chart-card h3 {
    font-family: var(--font-titel);
    font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    font-size: var(--t-h4);
    margin: 0 0 var(--raum-4);
  }
  .chart-x-labels span { font-size: var(--t-mini); color: var(--ink-muted); font-family: var(--font-mono); }
  .profil-chart-titel { font-size: var(--t-mini); color: var(--ink-muted); }

  /* ---------- Turnier: die Warteschlange ----------
     Jede Karte ist ein Ticket. Vorher unterschieden sich dringend und normal nur
     durch die Farbe des linken Rands - 1 px, beim Ueberfliegen unsichtbar. Jetzt
     dieselbe Sprache wie auf den Bespann-Seiten: breiter Streifen, runde Ecken,
     Tiefe. Die Nummer wird zum Anker, wie die Initiale in der Bespannungskarte. */
  .tk {
    border-radius: 16px;
    padding: var(--raum-4) var(--raum-5);
    gap: var(--raum-4);
    border-color: color-mix(in srgb, var(--border) 85%, transparent);
    box-shadow: var(--shadow), var(--glanz);
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
  }
  .tk.express { box-shadow: inset 4px 0 0 var(--gold), var(--shadow), var(--glanz); }
  .tk.knapp   { box-shadow: inset 4px 0 0 var(--status-critical), var(--shadow), var(--glanz);
                border-color: color-mix(in srgb, var(--status-critical) 26%, var(--border)); }
  @media (hover: hover) {
    .tk:hover { transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz); }
    .tk.express:hover { box-shadow: inset 4px 0 0 var(--gold), var(--schatten-2), var(--glanz); }
    .tk.knapp:hover   { box-shadow: inset 4px 0 0 var(--status-critical), var(--schatten-2), var(--glanz); }
  }
  .tk-nr {
    width: 34px; height: 34px; border-radius: 12px;
    font-family: var(--font-titel); font-size: 16px; font-weight: 600;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 13%, transparent);
  }
  .tk.knapp .tk-nr   { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 14%, transparent); }
  .tk.express .tk-nr { color: var(--gold);            background: color-mix(in srgb, var(--gold) 16%, transparent); }
  .tk-name { font-size: var(--t-h4); font-weight: 700; }
  .tk-zeile { font-size: var(--t-klein); }
  /* Die Frist ist die Zahl, auf die es hier ankommt. */
  .tk-frist { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
  .tk-countdown { font-size: var(--t-mini); }
  .tk-knoepfe { gap: var(--raum-2); }

  /* Kopf der Turnier-Seite: Beschriftung und Knopfreihe enger zusammen. */
  .modal-settings-label.mt-0 { margin-bottom: var(--raum-2); }
  @media (prefers-reduced-motion: reduce) {
    .tk { transition: none; }
    .tk:hover { transform: none; }
  }

  /* ---------- Hilfe Center: Kapitel als Karten ----------
     Vorher lagen alle Kapitel in EINER grossen Karte und waren nur durch eine Linie
     oben getrennt. In einem mehrspaltigen Raster heisst das aber nicht "Trennlinie
     zum Vorgaenger", sondern "Strich ueber jeder Zelle ausser der allerersten" - die
     zweite Spalte der ersten Reihe bekam einen Strich aus dem Nichts. */
  .help-kats { margin: 0 0 var(--raum-5); gap: var(--raum-2); }
  .help-kat-pill .zahl {
    min-width: 18px; padding: 0 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink-muted);
    font-size: var(--t-mini); font-weight: 700; font-family: var(--font-mono);
    text-align: center;
  }
  .help-kat-pill.active .zahl { background: rgba(255,255,255,.25); color: var(--auf-brand); }
  .help-kat-pill:hover .zahl { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
  .help-treffer {
    margin: 0 0 var(--raum-4);
    font-size: var(--t-klein); font-weight: 700; color: var(--ink-muted);
    letter-spacing: .04em; text-transform: uppercase;
  }
  .help-sections { gap: var(--raum-4); }
  .help-section {
    padding: var(--raum-5); border-top: none;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow), var(--glanz);
  }
  .help-sections > .help-section:first-child { padding-top: var(--raum-5); }
  .help-section-kopf {
    display: flex; align-items: flex-start; gap: var(--raum-3);
    margin: 0 0 var(--raum-3);
  }
  .help-section-kopf .ico {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center;
    border-radius: 9px; background: var(--brand-wash); color: var(--brand);
    font-size: 14px; font-weight: 700; line-height: 1;
  }
  .hs-titel { min-width: 0; }
  /* Nur waehrend einer Suche: bei Treffern quer durch alle Bereiche muss man sehen,
     wo die Antwort herkommt. Innerhalb eines Reiters waere es fuer jedes Kapitel
     derselbe Text und damit nur Rauschen. */
  .hs-kat {
    display: block; margin-bottom: 2px;
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-muted);
  }
  .help-section h3 { display: block; font-size: var(--t-h4); margin: 0; }
  .help-fuss {
    margin: var(--raum-6) 0 0; padding-top: var(--raum-4);
    border-top: 1px solid var(--rule);
    max-width: 70ch; font-size: var(--t-klein); color: var(--ink-muted);
  }
  @media (max-width: 720px) {
    .help-section { padding: var(--raum-4); }
    /* Muss mitgenannt werden: die :first-child-Regel oben ist spezifischer und wuerde
       sonst ihre 24 px Kopfabstand auch am Handy durchsetzen - die Karte haette dann
       oben mehr Luft als an den Seiten. */
    .help-sections > .help-section:first-child { padding-top: var(--raum-4); }
    /* Fuenf Reiter brachen am Handy auf drei Zeilen um und fuellten damit ein Drittel
       des Schirms, bevor das erste Kapitel anfing. Als eine schiebbare Reihe bleibt es
       bei einer Zeile; gesucht wird ohnehin oben im Feld. Der negative Aussenabstand
       laesst die Reihe bis an den Rand laufen, damit sichtbar ist, dass sie weitergeht. */
    .help-kats {
      flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
      margin-inline: calc(var(--raum-4) * -1); padding-inline: var(--raum-4);
    }
    .help-kats::-webkit-scrollbar { display: none; }
    .help-kat-pill { flex: none; }
  }

  /* ---------- Einstellungen: Kopf mit Weg ---------- */
  .modal-head { align-items: flex-start; }
  .modal-kopf-text { flex: 1; min-width: 0; }
  .modal-pfad {
    display: block; margin-bottom: 1px;
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .modal-zurueck {
    flex: none; width: 30px; height: 30px; margin-top: 1px;
    display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--ink);
    font-size: 15px; line-height: 1; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .modal-zurueck:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }

  /* ---------- Einstellungen: Suche ---------- */
  /* Frueher senkrecht zentriert - das war richtig, solange nur drei Kacheln in einem fest
     hohen Fenster standen. Mit dem Suchfeld fuellt die Seite die Hoehe ohnehin, und
     "justify-content: center" haette den Inhalt an BEIDEN Enden ueberlaufen lassen: oben
     waere ein toter Streifen entstanden und die unterste Kachel angeschnitten. */
  .settings-wurzel { min-height: 100%; display: flex; flex-direction: column; }
  /* Der Kachelblock nimmt den uebrigen Platz mittig ein - aber ueber auto-Raender, nicht
     ueber justify-content: center. Bleibt kein Platz uebrig, werden auto-Raender zu null;
     "center" haette den Inhalt an BEIDEN Enden hinausgedrueckt und oben einen toten
     Streifen erzeugt, waehrend unten die letzte Kachel angeschnitten war. */
  #settingsWurzel { margin-block: auto; }
  /* flex: none ist Pflicht: .ll-suche traegt "flex: 1 1 200px" fuer die WAAGERECHTE
     Listenleiste. Hier steht das Feld in einer senkrechten Spalte - dort meint die
     Basis die Hoehe, das Feld wurde also 200 px hoch und wuchs auch noch mit. */
  .settings-suche { flex: none; margin-bottom: var(--raum-4); }
  .settings-suche-leer { text-align: center; padding: 24px 10px; color: var(--ink-muted); font-size: var(--t-klein); }

  /* ---------- Einstellungen: Abschnitte statt Kaesten ----------
     Die Bloecke lagen als graue Kaesten mit Rahmen UND Schatten auf der ohnehin schon
     hellen Fensterflaeche - Karte in Karte. Jetzt gliedern Ueberschrift und Haarlinie,
     ganz ohne zweite Flaeche. .profil-detail-block behaelt bewusst seinen Kasten: der
     steht einzeln in einem Fenster und ist kein Abschnitt in einer Reihe. */
  .settings-block {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    padding: 0; margin: 0 0 var(--raum-6);
  }
  .settings-block:last-child { margin-bottom: 0; }
  .settings-block h4 {
    margin: 0 0 var(--raum-3); padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
  }
  /* Im einklappbaren Bereiche-Block sitzt die Ueberschrift in einem Knopf neben dem
     Schalter - dort traegt die Linie die ganze Kopfzeile, nicht nur den Textstummel. */
  .settings-block-titel h4 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .settings-block-kopf { padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: var(--raum-3); }
  /* Die einklappbaren Bereiche sind Listenzeilen, keine Abschnitte. Seit die grauen
     Kaesten weg sind, saehe eine Ueberschrift in Grossbuchstaben genau aus wie
     "SPORTARTEN" oder "FINANZEN" - also wie die Beschriftung des Blocks DARUNTER statt
     wie ein Schalter. Deshalb dieselbe Schrift wie die Zeilen "Badminton"/"Tennis". */
  .settings-block.klappblock { margin-bottom: 0; }
  .settings-block.klappblock + .settings-block:not(.klappblock) { margin-top: var(--raum-6); }
  .settings-block.klappblock .settings-block-kopf { padding: 8px 0; margin-bottom: 0; }
  /* Dieselbe Linie wie bei den Block-Ueberschriften: "Darstellung" benutzt als einzige
     Seite .modal-settings-label statt .settings-block > h4 und haette sonst als einzige
     Seite keine Gliederungslinien. */
  .modal-settings-label { padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
  .settings-block.klappblock h4 {
    font-size: var(--t-basis); font-weight: 600; letter-spacing: 0;
    text-transform: none; color: var(--ink);
  }
  /* Ein einzelner Kasten bleibt dort erlaubt, wo etwas GEZEIGT und nicht eingestellt
     wird - die Wiki-Vorschau zeigt, was spaeter unter einem Beitrag steht. */
  .settings-block.kasten {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-gross); padding: 14px 16px;
  }
  .settings-block.kasten h4 { border-bottom: none; padding-bottom: 0; }

  /* ---------- Einstellungen: Schiebeschalter ----------
     Drei gleich aussehende Knoepfe, von denen einer eingefaerbt ist, lesen sich als
     "drei Aktionen" - hier ist es aber eine Auswahl mit genau einem gueltigen Zustand.
     Eine gemeinsame Spur macht daraus sichtbar ein Feld. */
  .modal-theme-row {
    gap: 0; padding: 3px; border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    border: 1px solid var(--border);
  }
  .modal-theme-row .modal-btn {
    flex: 1; border: 0; background: transparent; box-shadow: none;
    border-radius: 999px; text-align: center; padding: 7px 10px;
    color: var(--ink-secondary);
    transition: background .15s ease, color .15s ease;
  }
  .modal-theme-row .modal-btn:hover { background: transparent; color: var(--ink); }
  .modal-theme-row button.active {
    background: var(--brand); color: var(--auf-brand); border-color: transparent;
    box-shadow: var(--shadow);
  }

  /* ==================================================================
     FARB-EBENE
     Die Umbauten davor haben Flaeche gewonnen und Farbe verloren. Diese
     Ebene bringt sie zurueck - aber ueber getoente Flaechen statt ueber
     bunte Bauteile: das Papier traegt einen Hauch der Markenfarbe, und was
     ohnehin Gliederung ist, sagt das in der Farbe der Gestaltung.
     ================================================================== */

  /* ---------- Die Leiste in der Farbe der jeweiligen Gestaltung ----------
     Die Grundregeln setzen feste Gruentoene (#d7e8da, #b9d6c2). Die passen zu
     "Papier" und liegen bei "Werkstatt" (braun), "Platz" (blau) und "Abends"
     daneben. Aus der Markenfarbe gemischt stimmt jede Gestaltung. */
  /* Bewusst OHNE Zwischen-Variablen auf .rail: eine dort deklarierte Eigenschaft,
     die selbst var(--brand) enthaelt, loeste beim Gestaltungswechsel nicht zuverlaessig
     neu auf - die Leiste blieb im Ton der zuerst geladenen Gestaltung. Direkt in der
     Regel gemischt gibt es diese Zwischenstufe nicht. */
  .rail { color: color-mix(in srgb, var(--brand) 8%, #ffffff); }
  .rail-brand { border-bottom-color: color-mix(in srgb, #ffffff 16%, transparent); }
  .rail-brand .sub { color: color-mix(in srgb, var(--brand) 34%, #ffffff); }
  .rail-tab { color: color-mix(in srgb, var(--brand) 16%, #ffffff); }
  .rail-tab:hover { background: color-mix(in srgb, #ffffff 10%, transparent); color: #fff; }
  .rail-foot { border-top-color: color-mix(in srgb, #ffffff 16%, transparent); }
  .rail-foot button {
    border-color: color-mix(in srgb, #ffffff 24%, transparent);
    color: color-mix(in srgb, var(--brand) 16%, #ffffff);
  }
  .rail-foot button:hover { background: color-mix(in srgb, #ffffff 12%, transparent); color: #fff; }
  .settings-panel { border-top-color: color-mix(in srgb, #ffffff 22%, transparent); }
  .settings-panel .settings-label { color: color-mix(in srgb, var(--brand) 34%, #ffffff); }
  .settings-panel .toggle-row { color: color-mix(in srgb, var(--brand) 16%, #ffffff); }

  /* ---------- Grund und Blatt ----------
     Vorher: grauer Grund, weisses Blatt, weisse Karten - also Weiss auf Weiss,
     und das Blatt war gar nicht mehr zu sehen. Jetzt drei Stufen, die sich
     unterscheiden: getoenter Grund, hellere getoente Arbeitsflaeche, weisse
     Karten und Tabellen darauf. */
  .shell {
    background:
      radial-gradient(90% 60% at 82% -10%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
      radial-gradient(70% 50% at 0% 100%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
      var(--ton);
  }
  /* "Platz" ist bewusst plakatig-flach, ohne Schein - das bleibt so, nur der
     Grundton kommt jetzt auch dort aus der Gestaltung. */
  :root[data-design="platz"] .shell { background: var(--ton); }

  .content {
    background: var(--ton-blatt);
    border-color: var(--ton-kante);
  }
  .topbar { background: color-mix(in srgb, var(--ton) 94%, transparent); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .topbar { background: color-mix(in srgb, var(--ton) 82%, transparent); }
  }
  /* Am Handy gibt es kein schwebendes Blatt - dort laeuft der Inhalt direkt auf dem
     Grund. Muss hier noch einmal stehen: die Regel oben ist gleich schwer und steht
     spaeter, sie haette die Handy-Fassung also still ueberschrieben (genau die
     Kaskadenfalle, die der Pruefer meldet). */
  @media (max-width: 820px) {
    .content { background: transparent; }
  }

  /* ---------- Tabellenkopf als Farbband ----------
     Er war zuletzt ein fast unsichtbares Grau. Frueher ein voll gefuellter
     gruener Balken - das war zu schwer. Der Wash mit Markenschrift liegt
     dazwischen: klar als Kopf erkennbar, ohne die Zeilen zu erschlagen.
     Muss deckend bleiben, die Zeile klebt beim Scrollen oben. */
  thead th {
    background: var(--brand-wash);
    color: var(--brand);
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 30%, var(--rule-stark));
  }
  .table-wrap thead th:last-child { background: var(--brand-wash); }
  thead th.sortable:hover { color: var(--brand-strong); }

  /* ---------- Zeitraum-Zeilen ----------
     "Gestern", "Juli 2026": das ist die Gliederung der Liste und darf die
     Farbe der Gestaltung tragen statt Grau zu sein. */
  tbody tr.gruppen-zeile td { color: var(--brand); }
  .karten-gruppe { color: var(--brand); }
  /* Der Monatswechsel ist der groessere Einschnitt und stand deshalb in Tinte. Jetzt
     traegt er die Markenfarbe wie die kleineren Zwischenzeilen auch - sonst waere
     ausgerechnet die staerkste Gliederungsstufe die einzige farblose. */
  tbody tr.gruppen-zeile.monat td, .karten-gruppe.monat { color: var(--brand); }

  /* ---------- Kanten und Abschnittslinien ---------- */
  .card, .table-wrap, .saite-karte, .kpi, .help-section, .arbeit-karte {
    border-color: var(--ton-kante);
  }
  .section-head { border-bottom-color: color-mix(in srgb, var(--brand) 28%, var(--rule)); }
  .section-head h2 { color: var(--brand); }
  .add-row-form { background: var(--ton-blatt); border-top-color: color-mix(in srgb, var(--brand) 30%, var(--border-strong)); }

  /* ---------- Gefuellte Knoepfe: Reaktion unabhaengig von --brand-strong ----------
     Bei "Papier" ist --brand-strong absichtlich GLEICH --brand, damit die Seitenleiste
     exakt den vorgegebenen Basiston #103028 traegt. Ein Knopf, der beim Zeigen auf
     --brand-strong wechselt, haette dort also gar nicht mehr reagiert. Die Mischung
     funktioniert in allen vier Gestaltungen und in beiden Helligkeiten. */
  .btn.primary:hover, .btn.gold:hover, .modal-btn.primary:hover {
    background: color-mix(in srgb, var(--brand) 84%, var(--ink));
  }
  .modal-theme-row button.active:hover { background: color-mix(in srgb, var(--brand) 84%, var(--ink)); }

  /* ==================================================================
     PREMIUM-EBENE II - Begruessung, Leer-Zustaende, grosse Schirme
     ================================================================== */

  /* ---------- Begruessung ----------
     Zwei Spalten ab 901px: links der Gruss, rechts die Einsichten hinter einer
     Haarlinie. Darunter fallen sie untereinander. Die Groessen sind durchgaengig
     fluid (clamp), damit zwischen Handy und 27-Zoll nichts springt. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
    margin-bottom: var(--raum-6);
    padding: clamp(20px, 2.6vw, 34px);
    border-radius: clamp(16px, 1.6vw, 24px);
    border: 1px solid var(--ton-kante);
    /* Der Schein sitzt oben rechts und laeuft aus - die Flaeche bekommt dadurch eine
       Richtung, statt als gleichmaessiger Block dazuliegen. Kraeftiger als zuvor plus ein
       zweiter, goldener Schein unten links (Nutzer-Feedback: "mehr mit den Farben
       arbeiten") - die Karte traegt jetzt beide Akzentfarben, nicht nur eine angedeutete. */
    background:
      radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--brand-wash) 92%, transparent), transparent 62%),
      radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--gold-wash) 85%, transparent), transparent 58%),
      var(--surface);
    box-shadow: var(--schatten-2), var(--glanz);
    overflow: clip;
  }
  /* Nutzer-Wunsch nach dem Vorbild: die Gruess-Karte soll nicht sauber UNTER dem Foto-Streifen
     der Kopfzeile beginnen, sondern in dessen unteren Teil hineinragen ("schwebt darueber").
     Rechnung, jetzt ohne Schaetzwerte: Kopfzeile hat auf dieser Seite eine FESTE Mindesthoehe
     von 230px (siehe body.tab-start .topbar), .content beginnt mit 24px Innenabstand, also
     saesse die Karte natuerlich bei ~254px. -100px zieht sie auf ~154px hoch - Titel und
     Untertitel enden um ~75px, dazwischen bleiben gut 75px freies Foto. Hoeherer Stapel-Wert
     (8, .topbar hat 6) ist jetzt gefahrlos: die Kopfzeile klebt hier nicht mehr, sondern
     scrollt mit - frueher (kleberte sie) verschwand die Karte dadurch VOR statt HINTER ihr.
     Nur Papier und nur ab 821px - dort, wo auch das Foto so gross ist. */
  @media (min-width: 821px) {
    :root:not([data-design]) .hero, :root[data-design="papier"] .hero {
      margin-top: -100px;
      position: relative;
      z-index: 8;
    }
  }

  /* ---------- Rahmen-Sprache "Ascherot" (nur Papier) ----------
     Nutzer-Wunsch nach dem Mockup: Hauptkarten bekommen einen Rahmen im Ton des Sandplatzes
     (--gold ist in Papier ohnehin der Ziegel-/Sandplatzton) mit feiner Innenlinie, statt des
     braunen Kupfers aus dem Mockup. Leicht mit Grau gedaempft ("Asche"), damit er sich klar
     vom Warn-Rot fuer Ueberfaelliges unterscheidet. Bewusst nur auf den Karten der
     Verwaltung-Startseite - eine Formensprache, kein Einzelfall. :is() statt einer langen
     Selektor-Liste je Gestaltung. */
  :root:not([data-design]), :root[data-design="papier"] {
    --radius-gross: 18px;
    --rahmen-asche: color-mix(in srgb, var(--gold) 82%, var(--ink-muted));
    --asche-linie: color-mix(in srgb, var(--rahmen-asche) 32%, transparent);
    --asche-linie-stark: color-mix(in srgb, var(--rahmen-asche) 55%, transparent);
  }
  /* Die Ascherot-Rahmen sind wieder raus (Nutzer-Feedback: gefallen ueberhaupt nicht) - die
     beiden Begruessungskarten haben jetzt dieselbe schlichte Randlinie wie vorher die
     gemeinsame Karte. Kennzahlen und "In Arbeit"/"Offene Posten" sind wieder unverrahmt. */
  :is(:root:not([data-design]), :root[data-design="papier"]) :is(.hero-text, .hero-einsichten) {
    border: 1px solid var(--border);
    border-radius: 18px;
    background-color: var(--surface);
    box-shadow: var(--shadow), var(--glanz);
  }
  /* Begruessung getrennt: links Gruss+Knoepfe, rechts die drei Hinweise - jede Seite eine
     eigene gerahmte Karte statt einer gemeinsamen mit Trennlinie. Der Container .hero selbst
     wird dadurch zur reinen Anordnung (kein eigener Grund, Rahmen, Schatten). */
  :is(:root:not([data-design]), :root[data-design="papier"]) .hero {
    background: none; border: 0; box-shadow: none; padding: 0; overflow: visible;
    align-items: stretch; gap: clamp(14px, 1.6vw, 22px);
  }
  :is(:root:not([data-design]), :root[data-design="papier"]) .hero-text {
    padding: clamp(18px, 2.1vw, 26px) clamp(20px, 2.6vw, 34px);
  }
  :is(:root:not([data-design]), :root[data-design="papier"]) .hero-einsichten {
    padding: clamp(18px, 2.1vw, 26px) clamp(20px, 2.2vw, 28px);
    justify-content: center;
  }
  :is(:root:not([data-design]), :root[data-design="papier"]) .hero-gruss {
    color: color-mix(in srgb, var(--gold) 80%, var(--ink));
  }
  /* "In Arbeit"/"Offene Posten": jede Spalte als gerahmter Bereich. Die Linien darin (Kopfzeile,
     Tabellenzeilen) tragen den Ton ueber die lokal ueberschriebenen Linien-Variablen, ohne die
     Tabellen-Regeln einzeln anzufassen. */
  /* Linien einheitlich: der Sandplatz-Ton der Trennlinien (Ueberschrift, Summenzeile,
     Legende) stand neben den grauen Linien von "Im Bestand" und wirkte uneinheitlich. */
  /* "Nachricht kopieren" als gefuellte gruene Pille - die eine Handlung in der Zeile soll
     auffallen (Mockup), nicht wie ein Umriss-Knopf unter vielen aussehen. */
  :is(:root:not([data-design]), :root[data-design="papier"]) [data-nachricht-id] {
    background: var(--brand); border-color: var(--brand); color: var(--auf-brand); border-radius: 999px;
  }
  :is(:root:not([data-design]), :root[data-design="papier"]) [data-nachricht-id]:hover {
    background: color-mix(in srgb, var(--brand) 84%, var(--ink)); color: var(--auf-brand);
  }
  .hero-text { min-width: 0; }
  .hero-kopf { display: flex; align-items: center; gap: var(--raum-4); }
  .hero-worte { min-width: 0; flex: 1; }
  .hero-datum {
    margin: 0 0 3px;
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-muted);
  }
  .hero-gruss {
    margin: 0;
    font-size: clamp(23px, 1.2rem + 1.6vw, 36px);
    line-height: 1.12;
    color: var(--ink);
  }
  /* Die Marke ist bewusst KEIN Foto - Werkstattbilder sind aus dieser App
     ausgeschlossen. Ein gesetzter Buchstabe auf Markenton traegt dieselbe Rolle. */
  .hero-marke {
    flex: none;
    width: clamp(42px, 4vw, 54px); height: clamp(42px, 4vw, 54px);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--brand); color: var(--auf-brand);
    font-family: var(--font-titel); font-weight: var(--titel-weight);
    font-size: clamp(18px, 1.8vw, 23px); line-height: 1;
    /* Duenner Goldring, passend zum Foto-Akzent - box-shadow statt border, damit die
       Kreisgroesse (und damit das clamp()-Mass) unveraendert bleibt. */
    box-shadow: var(--shadow), 0 0 0 2px var(--gold);
  }
  .hero-einsichten {
    display: flex; flex-direction: column;
    gap: var(--raum-2);
    margin: 0; padding: 0; list-style: none;
  }
  .he {
    display: flex; align-items: flex-start; gap: var(--raum-3);
    font-size: var(--t-basis); line-height: 1.45; color: var(--ink-secondary);
  }
  .he-punkt {
    flex: none; width: 9px; height: 9px; margin-top: 6px;
    border-radius: 50%; background: var(--ink-muted);
  }
  .he.gut .he-punkt { background: var(--status-good); }
  .he.achtung .he-punkt { background: var(--status-warning); }
  .he.dringend .he-punkt { background: var(--status-critical); }
  /* Nur die dringende Zeile wird lauter - waeren alle drei fett, waere keine es. */
  .he.dringend { color: var(--ink); font-weight: 600; }
  @media (min-width: 901px) {
    .hero {
      grid-template-columns: minmax(0, 1fr) minmax(240px, 22rem);
      align-items: center;
      column-gap: clamp(24px, 3vw, 44px);
    }
    .hero-einsichten {
      padding-left: clamp(20px, 2vw, 30px);
      border-left: 1px solid var(--ton-kante);
    }
  }
  @media (max-width: 560px) {
    .hero { padding: var(--raum-4); }
    .hero-einsichten { padding-top: var(--raum-3); border-top: 1px solid var(--ton-kante); }
  }

  /* ---------- Leer-Zustaende ----------
     Eine eigene Karte mit Zeichen, Satz und Hinweis. Der Ring um das Zeichen ist
     gestrichelt: er sagt "hier ist Platz", nicht "hier fehlt etwas". */
  .leerkarte {
    display: grid; justify-items: center; text-align: center;
    gap: var(--raum-3);
    padding: clamp(30px, 4.5vw, 54px) clamp(20px, 4vw, 40px);
    background: var(--surface);
    border: 1px solid var(--ton-kante);
    border-radius: clamp(14px, 1.4vw, 20px);
    box-shadow: var(--shadow), var(--glanz);
  }
  .leerkarte-zeichen {
    width: clamp(64px, 7vw, 84px); height: clamp(64px, 7vw, 84px);
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--brand) 34%, transparent);
    background: color-mix(in srgb, var(--brand-wash) 55%, transparent);
    color: var(--brand);
  }
  .leerkarte-zeichen svg { width: 52%; height: 52%; display: block; }
  .leerkarte-titel {
    font-family: var(--font-titel); font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    font-size: clamp(17px, 1rem + .5vw, 21px);
    color: var(--ink);
  }
  .leerkarte-text {
    margin: 0; max-width: 46ch;
    font-size: var(--t-basis); line-height: 1.65; color: var(--ink-secondary);
  }
  .leerkarte .btn { margin-top: var(--raum-2); }

  /* Alle uebrigen Leer-Stellen heben mit an, ohne dass 46 Aufrufstellen angefasst
     werden muessen: mehr Luft, lesbarere Farbe und derselbe gestrichelte Ring.
     Ausgenommen sind die Stellen in Tabellenzellen - dort waere ein Ring absurd. */
  .empty-note, .fb-leer {
    padding: clamp(24px, 3.5vw, 38px) var(--raum-5);
    color: var(--ink-secondary);
    font-size: var(--t-basis); line-height: 1.6;
  }
  .empty-note::before, .fb-leer::before {
    content: ""; display: block;
    width: 34px; height: 34px; margin: 0 auto var(--raum-3);
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--brand) 32%, transparent);
    background: color-mix(in srgb, var(--brand-wash) 45%, transparent);
  }
  td .empty-note::before, .fb-leer-spalte::before { display: none; }

  /* ---------- Sehr breite Schirme ----------
     Stand hier vorher bei 1520px gedeckelt (Sorge: zu breite Tabellenzeilen auf einem
     34-Zoll-Monitor). Nutzer-Feedback (2026-09-28): auf einem 2000+px breiten Fenster wirkte
     das als groye leere Randflaeche neben "Mein Profil" - deutlich naeher an der tatsaechlich
     verfuegbaren Breite lassen, die Tabellen selbst brechen dank .table-wrap/overflow ohnehin
     nicht um. Diese Regel gewinnt gegenueber der Basisregel bei .content weiter oben (spaeter
     im Stylesheet, gleiche Spezifitaet) - Aenderungen an der Breite MUESSEN hier passieren. */
  @media (min-width: 821px) {
    .content {
      /* "width: 100%" ist Pflicht, nicht Kosmetik: .content ist ein Flex-Kind in einer
         SPALTE. Dort kommt die Breite sonst aus align-items: stretch - und automatische
         Raender auf der Querachse schalten genau dieses Strecken ab. Ohne die Zeile
         schrumpfte die Arbeitsflaeche auf ihre Inhaltsbreite (gemessen: 822 statt
         1194 px bei einem 1500-px-Fenster). Derselbe Fehler wie bei der frueheren
         Zentrierungs-Regression - deshalb hier ausdruecklich notiert. */
      width: 100%;
      max-width: min(2400px, 100% - 2 * var(--raum-6));
      margin-left: auto; margin-right: auto;
    }
  }

  /* ==================================================================
     PREMIUM-EBENE III - Zeilen-Karten, Status-Pillen, Profil in der Leiste
     ================================================================== */

  /* ---------- Tabellen-Zeilen als Karten ----------
     Voraussetzung ist "border-collapse: separate": nur dann darf eine Zeile eigene
     Kanten, Radien und einen Schatten tragen. Mit "collapse" verschmelzen die
     Kanten benachbarter Zellen und jede Zeile waere wieder Teil EINES Blattes.
     Streng auf die Seiten-Tabellen begrenzt (#content): in Fenstern waeren
     Zeilen-Karten bei 640px Breite nur verschenkter Platz. */
  #content .table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    /* Luft fuer die Schatten der Zeilen - ohne sie schneidet das seitliche Scrollen
       sie oben und unten ab. */
    padding: 2px 2px var(--raum-2);
  }
  #content .table-wrap > table {
    border-collapse: separate;
    border-spacing: 0 var(--raum-2);
  }
  #content .table-wrap > table > thead th {
    border-bottom: none;
    padding-top: var(--raum-2); padding-bottom: var(--raum-2);
  }
  #content .table-wrap > table > thead th:first-child { border-radius: 10px 0 0 10px; }
  #content .table-wrap > table > thead th:last-child { border-radius: 0 10px 10px 0; }

  #content .table-wrap > table > tbody > tr {
    box-shadow: var(--shadow);
    transition: box-shadow .18s ease, background .15s ease;
  }
  #content .table-wrap > table > tbody > tr > td {
    background: var(--surface);
    border-top: 1px solid var(--ton-kante);
    border-bottom: 1px solid var(--ton-kante);
    padding: var(--raum-4) var(--raum-4);
  }
  #content .table-wrap > table > tbody > tr > td:first-child {
    border-left: 1px solid var(--ton-kante);
    border-top-left-radius: 13px; border-bottom-left-radius: 13px;
  }
  #content .table-wrap > table > tbody > tr > td:last-child {
    border-right: 1px solid var(--ton-kante);
    border-top-right-radius: 13px; border-bottom-right-radius: 13px;
  }
  /* Die Bandierung faellt weg: sie war der Ersatz dafuer, dass man die Zeile als
     Flaeche nicht sah. Jetzt IST jede Zeile eine Flaeche. */
  #content .table-wrap > table > tbody > tr:nth-child(even) > td { background: var(--surface); }
  @media (hover: hover) {
    #content .table-wrap > table > tbody > tr:hover { box-shadow: var(--schatten-2); }
    #content .table-wrap > table > tbody > tr:hover > td {
      background: color-mix(in srgb, var(--brand-wash) 42%, var(--surface));
      border-color: color-mix(in srgb, var(--brand) 26%, var(--ton-kante));
    }
  }
  /* Die angeheftete Aktionsspalte muss dieselbe Flaeche tragen wie die Zeile,
     sonst schwimmt ein andersfarbiges Rechteck am rechten Rand mit. */
  #content .table-wrap > table > tbody > tr > td.actions { background: var(--surface); }
  #content .table-wrap > table > tbody > tr:nth-child(even) > td.actions { background: var(--surface); }
  @media (hover: hover) {
    #content .table-wrap > table > tbody > tr:hover > td.actions {
      background: color-mix(in srgb, var(--brand-wash) 42%, var(--surface));
    }
  }
  #content .table-wrap > table > thead th:last-child { background: var(--brand-wash); }

  /* Zwischenzeilen sind KEINE Karten - sie beschriften die Karten darunter.
     Ohne diese Ausnahme saehe jede Monatsueberschrift aus wie eine leere Zeile. */
  #content .table-wrap > table > tbody > tr.gruppen-zeile { box-shadow: none; }
  #content .table-wrap > table > tbody > tr.gruppen-zeile > td {
    background: transparent;
    border: none; border-radius: 0;
    padding: var(--raum-5) 4px var(--raum-1);
  }
  #content .table-wrap > table > tbody > tr.gruppen-zeile:first-child > td { padding-top: 0; }
  @media (hover: hover) {
    #content .table-wrap > table > tbody > tr.gruppen-zeile:hover > td { background: transparent; }
  }
  /* Dasselbe fuer die Summenzeile: sie schliesst ab, sie ist kein Eintrag. */
  #content .table-wrap > table > tbody > tr.summenzeile { box-shadow: none; }
  #content .table-wrap > table > tbody > tr.summenzeile > td {
    background: transparent; border: none; border-radius: 0;
    border-top: 2px solid var(--rule-stark);
  }

  /* Der Zustandsstreifen wird zur linken Kante der Karte. Vier Pixel statt drei -
     an einer gerundeten Ecke wirkt ein duenner Streifen wie ein Zeichenfehler. */
  #content .table-wrap > table > tbody > tr.zeile-arbeit > td:first-child { box-shadow: inset 4px 0 0 var(--status-warning); }
  #content .table-wrap > table > tbody > tr.zeile-fertig > td:first-child { box-shadow: inset 4px 0 0 var(--status-good); }
  #content .table-wrap > table > tbody > tr.zeile-offen  > td:first-child { box-shadow: inset 4px 0 0 var(--status-critical); }

  /* ---------- Status-Pillen ----------
     --pill steht jetzt in allen vier Gestaltungen auf 999px. Die Abzeichen bekommen
     dazu eine weiche Flaeche statt einer Kontur: ein Zustand ist eine ruhige Angabe,
     kein Warnschild. */
  .badge {
    padding: 3px 11px;
    font-size: var(--t-mini);
    font-weight: 700;
  }

  /* ---------- Das Profil in der Navigation ----------
     Der Konto-Knopf war eine Zeile wie jede andere am Fuss der Leiste. Als eigene
     Karte mit Marke ist er das, was er sein soll: der eine Ort, der DIR gehoert. */
  .rail-foot button.rail-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 11px;
    border-radius: 14px;
    background: color-mix(in srgb, #ffffff 9%, transparent);
    border-color: color-mix(in srgb, #ffffff 18%, transparent);
    margin-bottom: 10px;
  }
  .rail-user .avatar {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-wash) 88%, transparent);
    color: var(--brand);
    font-family: var(--font-titel); font-weight: var(--titel-weight);
    font-size: 15px; line-height: 1;
  }
  .rail-user .who { min-width: 0; text-align: left; }
  .rail-user .who .nm {
    display: block; font-size: 13.5px; font-weight: 600;
    color: color-mix(in srgb, var(--brand) 8%, #ffffff);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rail-user .who .st { font-size: 11px; color: color-mix(in srgb, var(--brand) 38%, #ffffff); }
  .rail-foot button.rail-user:hover { background: color-mix(in srgb, #ffffff 15%, transparent); }

  /* ---------- Die Leiste in Gruppen; die Profil-Karte sagt, wohin sie fuehrt ----------
     Ueberschriften sind bewusst leise: kleine Grossbuchstaben in gedaempftem Gold, kein
     Strich - der Abstand darueber trennt schon genug. */
  .rail-block { display: block; }
  .rail-block + .rail-block { margin-top: 6px; }
  .rail-gruppe {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 10px 12px 6px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    font: inherit; text-align: left;
    /* Serifenschrift wie die Seitenueberschriften im Inhalt, deutlich groesser und heller als
       die Eintraege darunter - so liest sich das als Ueberschrift und nicht als Beschriftung. */
    font-family: var(--font-titel, var(--font-display));
    font-size: 16px; font-weight: var(--titel-weight, 500); line-height: 1.2;
    letter-spacing: .01em; text-transform: none;
    color: #fff;
  }
  .rail-gruppe .txt {
    display: inline-flex; align-items: center; gap: 9px;
    opacity: .95; transition: opacity .15s ease; flex: none;
  }
  /* Goldener Balken vor dem Namen - dasselbe Zeichen wie vor den Ueberschriften im Inhalt. */
  .rail-gruppe .txt::before {
    content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--gold); flex: none;
  }
  .rail-gruppe .chev { color: var(--gold); }
  /* Feine Linie bis zum Pfeil: macht aus der Ueberschrift eine Trennung, ohne einen
     durchgehenden Strich zwischen den Gruppen zu brauchen. */
  .rail-gruppe .linie {
    flex: 1; height: 1px; min-width: 8px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent), transparent);
  }
  .rail-gruppe .chev {
    flex: none; font-size: 11px; line-height: 1; opacity: .6;
    transition: transform .2s ease, opacity .15s ease;
  }
  .rail-gruppe:hover .txt, .rail-gruppe:hover .chev { opacity: 1; }
  .rail-gruppe:focus-visible { outline-offset: -2px; }
  .rail-block.zu .rail-gruppe .chev { transform: rotate(-90deg); }
  /* Ueberschrift einer Gruppe mit nur einem Eintrag: zwei getrennte Klickflaechen. Links der
     Name (oeffnet die Seite), rechts der Pfeil (klappt auf/zu). Beide sehen aus wie die
     gewohnte Ueberschrift - nur der Name unterstreicht sich beim Darueberfahren leicht. */
  .rail-gruppe.direkt { cursor: default; padding: 0 4px 0 0; gap: 0; }
  .rail-gruppe.direkt .kopf-link, .rail-gruppe.direkt .chev-knopf {
    border: 0; background: transparent; font: inherit; color: inherit;
    letter-spacing: inherit; text-transform: inherit; cursor: pointer; border-radius: 8px;
  }
  .rail-gruppe.direkt .kopf-link {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
    padding: 10px 6px 6px 12px; text-align: left;
  }
  .rail-gruppe.direkt .chev-knopf { flex: none; padding: 10px 8px 6px; line-height: 1; }
  .rail-gruppe.direkt .kopf-link:hover .txt { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
  .rail-gruppe.direkt .chev-knopf:hover .chev { opacity: 1; }
  .rail-gruppe.direkt .chev-knopf:focus-visible, .rail-gruppe.direkt .kopf-link:focus-visible { outline-offset: -2px; }
  /* Eingeklappt, aber die aktuelle Seite steckt darin: ein goldener Punkt sagt, wo man ist. */
  .rail-gruppe .aktiv-punkt {
    display: none; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  }
  .rail-block.zu.hat-aktiv .rail-gruppe .aktiv-punkt { display: block; }
  /* Auf- und Zuklappen ueber die Zeilenhoehe (0fr -> 1fr): braucht keine feste Hoehe und
     funktioniert, egal wie viele Eintraege in der Gruppe stehen. */
  .rail-liste { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; }
  .rail-liste-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
  .rail-block.zu .rail-liste { grid-template-rows: 0fr; }
  .rail-block.zu .rail-liste-in { visibility: hidden; transition: visibility 0s .22s; }
  @media (prefers-reduced-motion: reduce) {
    .rail-liste, .rail-gruppe .chev { transition: none; }
    .rail-block.zu .rail-liste-in { transition: none; }
  }

  /* Der Speicherstand ist nur noch ein Punkt am Bild. Der Text bleibt im Knopf (Vorlesegeraete,
     Tooltip), ist aber nicht zu sehen. */
  .rail-user .who .st {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rail-user .avatar { position: relative; overflow: visible; }
  .rail-user .avatar img { border-radius: 50%; }
  .rail-user .avatar .punkt {
    position: absolute; right: -2px; bottom: -2px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #6cc28a;
    border: 2px solid var(--brand-strong, #16403a);
    box-sizing: border-box;
  }
  .rail-foot button.rail-user[data-sync="arbeit"] .punkt { background: var(--gold); }
  .rail-foot button.rail-user[data-sync="offline"] .punkt { background: #e0705a; }
  .rail-user .who .mein {
    font-size: 11.5px; font-weight: 500; color: var(--gold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rail-user .who .mein .pfeil { display: inline-block; transition: transform .15s ease; }
  .rail-foot button.rail-user:hover .who .mein .pfeil { transform: translateX(3px); }
  /* Auf der Profilseite selbst: wie ein aktiver Reiter oben (Gold), damit man sieht, wo man ist. */
  .rail-foot button.rail-user.active,
  .rail-foot button.rail-user.active:hover {
    background: var(--gold); border-color: var(--gold);
  }
  .rail-foot button.rail-user.active .who .nm,
  .rail-foot button.rail-user.active .who .mein { color: var(--auf-gold); }

  /* ---------- Statistik: Loecher im Diagramm-Raster schliessen ----------
     Hier stand kurzzeitig ein asymmetrisches 12-Spalten-Bento (7/5 im Wechsel). Das
     war ein Fehler: "Die letzten zwoelf Monate" traegt ein INLINE grid-column:1/-1,
     weil ein Zwoelf-Monats-Verlauf die volle Breite braucht - und inline schlaegt
     jede Regel. Die Vollbreit-Karte zerreisst damit jeden festen Rhythmus, und die
     Karte davor blieb allein mit einer Luecke daneben stehen.
     Was tatsaechlich fehlte, war nur das: eine halbe Karte, die eine offene Luecke
     weiter oben auffuellen darf. Genau das macht "dense" - ohne Annahmen darueber,
     wie viele Diagramme es gibt oder welches davon breit ist. */
  .chart-grid { grid-auto-flow: dense; }
  /* Und die letzte Karte nimmt die volle Breite: nach der Vollbreit-Karte in der
     Mitte kippt die Paarbildung, die letzte bliebe sonst als halbe Karte neben
     einer Luecke stehen. "dense" kann das nicht auffuellen - danach kommt nichts
     mehr, was nachruecken koennte. */
  @media (min-width: 901px) {
    .chart-grid > *:last-child { grid-column: 1 / -1; }
  }

  /* ---------- Wiki-Kopf: zwei Schalter, eine Sprache ----------
     Vorher standen dort zwei hart umrandete Kapseln neben einem gefuellten Knopf -
     drei verschiedene Gewichte in einer Reihe. Jetzt dieselbe Bauform wie die
     Schiebeschalter in den Einstellungen: eine ruhige Spur, darin die aktive Wahl
     als gefuellte Pille. Der Anlege-Knopf bleibt gefuellt - er ist die Hauptaktion
     der Seite und SOLL als einziger herausstechen. */
  .wiki-sport-switch,
  .fb-view-toggle.wiki-modus-toggle {
    border: 1px solid var(--ton-kante);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    overflow: visible;
  }
  .wiki-sport-switch button,
  .fb-view-toggle.wiki-modus-toggle button {
    border-radius: 999px;
    color: var(--ink-secondary);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  /* Die Trennlinie zwischen den Knoepfen faellt weg - in einer Spur trennt der
     Abstand, nicht ein Strich. */
  .wiki-sport-switch button + button { box-shadow: none; }
  .wiki-sport-switch button.an,
  .fb-view-toggle.wiki-modus-toggle button.an {
    background: var(--brand); color: var(--auf-brand);
    box-shadow: var(--shadow);
  }
  .wiki-sport-switch button:hover:not(.an),
  .fb-view-toggle.wiki-modus-toggle button:hover:not(.an) {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    color: var(--ink);
  }
  .wiki-sport-switch button.an .ico {
    background: color-mix(in srgb, #ffffff 26%, transparent);
    color: var(--auf-brand);
  }

  /* ---------- Wiki-Liste: die Marke steht in der Ueberschrift, nicht elfmal ----------
     Jede Modellkarte trug inline einen 4px-Streifen in der Herstellerfarbe. Innerhalb
     einer Gruppe ist das aber elfmal DERSELBE Streifen - und die Gruppenueberschrift
     darueber traegt Punkt, Name und Anzahl bereits. Der Streifen hat also nichts
     unterschieden, nur Farbe hinzugefuegt.
     In "Aehnlich bespannt" bleibt er: dort stehen Modelle VERSCHIEDENER Hersteller
     ohne Gruppenueberschrift, da trennt er tatsaechlich. */
  .wiki-modell-karte { box-shadow: var(--shadow); }
  /* Elf gleiche Saetze "Noch keine Angaben - sei der Erste." untereinander lesen sich
     wie eine Fehlerliste. Der einladende Satz steht weiterhin dort, wo er wirkt: im
     leeren Zustand der ganzen Liste. In der Zeile reicht ein leiser Vermerk. */
  .wiki-noch-nichts {
    flex: none;
    font-size: var(--t-mini);
    color: var(--ink-muted);
    font-style: italic;
  }
  /* Wiki-Beispielkarte: gestrichelter Rand statt normaler Kartenoptik, damit sie sich auf den
     ersten Blick von den echten Modell-Karten abhebt - man soll sie erkennen, bevor man den
     Text liest. Dieselbe "Vorschau/Beispieldaten"-Kennzeichnung wie im String Configurator. */
  .wiki-beispiel-karte {
    display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
    padding: 14px 16px; margin-bottom: 14px; border: 1px dashed var(--border-strong);
    background: var(--surface); border-radius: var(--radius-gross);
  }
  .wiki-beispiel-karte:hover { border-color: var(--brand); background: var(--brand-wash); }
  .wiki-beispiel-zeile { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  /* Die Gruppenueberschrift traegt jetzt die Marke allein - also darf sie auch
     aussehen wie eine Ueberschrift und nicht wie ein Etikett. */
  .wiki-gruppen-kopf .wgk-name {
    font-family: var(--font-titel); font-weight: var(--titel-weight);
    letter-spacing: var(--titel-spacing);
    font-size: var(--t-gross); text-transform: none;
  }

  /* ---------- Kopfleiste: voll in Ruhe, schmal beim Scrollen ----------
     Gemessen waren es 112 px, die dauerhaft oben kleben. Beim Scrollen faellt die
     Unterzeile weg und die Ueberschrift geht auf Abschnittsgroesse zurueck - der
     Name der Seite bleibt, die Erklaerung dazu hat man laengst gelesen. */
  .topbar, .topbar h1, .topbar .tagline {
    transition: padding .18s ease, font-size .18s ease, opacity .14s ease;
  }
  body.kopf-eng .topbar {
    padding-top: var(--raum-3);
    padding-bottom: var(--raum-3);
    border-bottom: 1px solid var(--ton-kante);
  }
  body.kopf-eng .topbar h1 { font-size: var(--t-h3); }
  /* Nicht display:none - das liesse die Zeile ohne Uebergang verschwinden. Hoehe und
     Deckkraft zusammen ergeben ein Zusammenklappen statt eines Sprungs. */
  body.kopf-eng .topbar .tagline {
    opacity: 0; height: 0; margin: 0; overflow: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .topbar, .topbar h1, .topbar .tagline { transition: none; }
  }
  /* Auch in Ruhe etwas knapper: 32 px ueber der Ueberschrift waren grosszuegig
     gedacht, kosten aber auf jedem Bildschirm Platz fuer echte Inhalte. */
  .topbar { padding-top: var(--raum-5); }
  .hero { padding: clamp(18px, 2.1vw, 26px) clamp(20px, 2.6vw, 34px); }
  /* Muss mitgenannt werden: die Handy-Fassung weiter oben ist gleich schwer und steht
     FRUEHER - die Zeile darueber haette ihr Padding sonst still ueberschrieben. */
  @media (max-width: 560px) { .hero { padding: var(--raum-4); } }

  /* ---------- Schnellzugriff im Hero ----------
     Die beiden "+ Bespannung"-Knoepfe standen in einer eigenen Zeile zwischen Hero und
     Kennzahlen - rund 60 px, die nichts trugen als zwei Knoepfe. Im Hero stehen sie
     dort, wo der Blick nach dem Gruss ohnehin hinfaellt.
     Am Handy bleibt alles wie es war: dort ist diese Reihe ohnehin ausgeblendet und
     der Schwebe-Knopf unten links uebernimmt (siehe .schnell-fab-saeule). */
  .hero-knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-4); }
  .hero-knoepfe .btn { font-size: var(--t-klein); padding: 9px 16px; }
  @media (max-width: 820px) {
    .hero-knoepfe { display: none; }
  }

  /* ---------- Waechter fuer den Kopf ----------
     56 px hoch, damit der Kopf erst nach einem echten Scroll-Stueck schrumpft und
     nicht schon beim Antippen. Der negative Aussenabstand nimmt die Hoehe wieder
     aus dem Fluss - der Waechter ueberlagert die Kopfleiste unsichtbar. */
  #kopfWaechter { height: 56px; margin-bottom: -56px; pointer-events: none; }

  /* ---------- iPad: Doppeltippen zoomt nicht mehr ----------
     Safari wartet bei jedem Tipp ~300 ms ab, ob ein zweiter folgt (Doppeltipp-Zoom).
     Das macht jeden Knopf traege UND zoomt beim schnellen Nacheinander-Tippen die
     Seite. "manipulation" laesst Wischen und Kneifen zu, nimmt nur den Doppeltipp. */
  button, a, input, select, textarea, label,
  .ul-knopf, .rail-tab, .badge, .btn, .btn-mini, .sk-mehr, [data-ul], [role="button"] {
    touch-action: manipulation;
  }

  /* ---------- Profil: Knoepfe duerfen hier schrumpfen statt zu ueberlaufen ----------
     Vier gleichrangige Kacheln (siehe die Basisregel bei .profil-karte-aktionen weiter oben) -
     am Handy reicht dafuer text-overflow statt eines eigenen Nowrap/Wrap-Umbaus. */
  .profil-karte-aktionen button {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }


  /* ---------- Untere Leiste: der aktive Reiter ----------
     Vorher unterschied sich der aktive Knopf nur durch die Schriftfarbe - auf einem
     hellen Grund kaum zu sehen. Jetzt traegt er eine eigene Flaeche in der Farbe der
     Gestaltung, wie die aktive Zeile in der Seitenleiste am Desktop. */
  @media (max-width: 820px) {
    .unten-leiste { background: var(--surface); }
    .ul-knopf {
      position: relative;
      border-radius: 12px;
      margin: 4px 3px;
      padding: 7px 4px 6px;
      transition: background .15s ease, color .15s ease;
    }
    .ul-knopf.active {
      background: var(--brand-wash);
      color: var(--brand);
      font-weight: 700;
    }
    .ul-knopf.active .ico { background: var(--brand); color: var(--auf-brand); }
    .ul-knopf.active .tx { font-weight: 700; }
  }

  /* Der Minus-Streifen traegt dieselbe Form wie der Vorrats-Hinweis, aber ohne
     Wegklicken: ein Datenfehler verschwindet nicht dadurch, dass man ihn ignoriert. */
  .ueberzogen-hinweis .vh-knoepfe { flex-wrap: wrap; gap: var(--raum-2); }
  .ueberzogen-hinweis .btn-mini { font-variant-numeric: tabular-nums; }

  /* ---------- Kopfzeile der Diagrammkarte ----------
     Ueberschrift links, Umschalter rechts. Bricht am Handy von selbst um, damit der
     Umschalter nicht die Ueberschrift zusammenquetscht. */
  .chart-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--raum-3); flex-wrap: wrap;
    margin-bottom: var(--raum-4);
  }
  .chart-kopf h3 { margin: 0; }
  .chart-toggle { flex: none; }
  .chart-toggle button { padding: 5px 12px; font-size: var(--t-mini); }
  /* Die Monatssummen unter dem Diagramm: am Handy zwoelf Spalten nebeneinander sind
     nicht lesbar - dort in zwei Reihen zu sechs. */
  @media (max-width: 760px) {
    .monat-summen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--raum-1); }
    .monat-summen .ms-zelle { min-width: 0; }
  }

  /* ---------- "Als bezahlt" direkt in den offenen Posten ----------
     Ein Haken statt eines Wortes: die Spalte ist schmal, und die Handlung ist an
     dieser Stelle eindeutig. Zurueckgenommen wird ueber den Rueckgaengig-Streifen,
     den zahlungStandUmschalten() ohnehin einblendet. Vorher war der Haken neutral-grau
     und wurde erst beim Hover gruen - am Handy (kein Hover) sah er dadurch nach gar
     nichts Bestimmtem aus. Jetzt steht die gruene "das ist die gute Handlung hier"-Farbe
     schon im Ruhezustand da, dieselbe Farbe wie ueberall sonst fuer "bezahlt" (stempel/
     status-good). Ein zweiter Tipp bestaetigt (siehe data-bezahlt-anfragen-*, dasselbe
     Rueckfrage-Muster wie in der Kasse) - erst DANN wird tatsaechlich umgeschaltet. */
  .op-bezahlt {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid color-mix(in srgb, var(--status-good) 45%, transparent);
    border-radius: 50%;
    background: var(--status-good-wash); color: var(--status-good);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  }
  .op-bezahlt:hover { background: color-mix(in srgb, var(--status-good) 28%, var(--status-good-wash)); border-color: var(--status-good); }
  .op-bezahlt:active { transform: scale(.92); }
  /* Haken + Unterschrift: oben bleibt der runde Haken so kompakt wie zuvor, direkt darunter
     steht in Worten, was er tut ("Bezahlt?" / bei der Rueckfrage "Wirklich bezahlt?") - sonst
     war dem Haken selbst nicht anzusehen, wofuer er da ist. Dieselbe Huelle traegt beide
     Zustaende (siehe wireInlineBestaetigen), deshalb bleibt die Spalte an derselben Stelle
     stehen, egal wie schmal sie ist - anders als bei textgefuellten Knoepfen, die je nach
     Geraetebreite unterschiedlich breit waeren. */
  .op-bezahlt-block { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
  .op-bezahlt-beschriftung { font-size: 10px; font-weight: 700; color: var(--status-good); white-space: nowrap; }
  .op-bezahlt-beschriftung.zurueckhaltend { color: var(--ink-muted); }
  .op-bezahlt-abbrechen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 50%;
    background: var(--surface-2); color: var(--ink-secondary);
    cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  }
  .op-bezahlt-abbrechen:hover { background: color-mix(in srgb, var(--status-critical) 12%, var(--surface-2)); color: var(--status-critical); border-color: var(--status-critical); }
  .op-bezahlt-abbrechen:active { transform: scale(.92); }

  /* Das Laengenfeld im Anlege-Formular: Zahl links, Einheit rechts - dieselbe Form
     wie die Preiszeile darueber, damit die Reihe nicht aus dem Raster faellt. */
  .saite-neu .sn-laenge { align-items: center; }
  .saite-neu .sn-einheit { font-size: var(--t-klein); color: var(--ink-muted); white-space: nowrap; }
  .saite-neu .sn-laenge[hidden] { display: none; }

  /* ---------- Abgezogene Meter auf der Proben-Karte ----------
     Steht ueber der Knopfreihe, damit man vor dem naechsten Abzug sieht, was schon
     abgezogen wurde. Bewusst leise: das ist ein Beleg, keine Kennzahl. */
  .sk-abzuege { margin-top: 2px; }
  .sk-abzug-kopf {
    margin: 0 0 2px; font-size: 11px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-muted); font-weight: 700;
    font-family: var(--font-body);
  }
  .sk-probe .roll-balken { margin: 1px 0 2px; }

  /* ---------- Knopfzeile ueber dem Bestand ----------
     ".zeile-rechts" hatte bisher NUR zusammen mit ".nur-breit" eine Regel - allein
     stehend war es ein gewoehnlicher Block, der Knopf klebte links. Hier die fehlende
     Grundregel. Die engere Regel ".zeile-rechts.nur-breit" gewinnt weiterhin (hoehere
     Spezifitaet), die bestehenden Zeilen verstecken sich am Handy also wie bisher. */
  .zeile-rechts { display: flex; justify-content: flex-end; margin-bottom: var(--raum-3); }
  /* HINWEIS fuer den Kaskaden-Pruefer: die 560px-Regel weiter oben setzt hier
     "justify-content: stretch !important" - sie gewinnt trotz frueherer Position.
     Ein gemeldeter Verdacht auf diese Zeile ist deshalb ein Fehlalarm. */

  /* ---------- Anlege-Modus der Bestand-Seite ----------
     Zwei Kacheln, die sich auf einem 27-Zoll-Schirm ueber die ganze Breite ziehen,
     waeren nur leerer Platz. Gedeckelt wird deshalb der CONTAINER, nicht die Spur:
     bei repeat(auto-fit, minmax(a, b)) rechnet der Browser die Spaltenzahl mit b,
     sobald b eine feste Laenge ist - eine Obergrenze in der Spur wuerde also die
     Spaltenzahl deckeln statt die Breite. */
  .anlege-modus .saiten-gitter { max-width: 640px; }
  .anlege-modus > .section-head { margin-bottom: var(--raum-3); }

  /* ---------- Statuswechsel ----------
     Drei Segmente statt eines Punktes: der Schlaeger laeuft durch drei Zustaende, und
     das soll man sehen, ohne die Woerter zu vergleichen. Der Pfeil sagt, dass der
     Schalter etwas tut; am Ende der Folge wird er zum Rueckpfeil, weil der naechste
     Klick wieder vorne anfaengt - vorher war genau das die Ueberraschung.
     Steht bewusst am Ende des Stilblatts: .badge weiter oben setzt Flaeche und Ring,
     die dieser Schalter nicht haben soll. */
  .badge.status-schalter {
    /* Feste Breite statt "so breit wie das Wort": angenommen/fertig/abgeholt sind
       unterschiedlich lang und liessen den Schalter je nach Status springen - gerade
       am Handy, wo man das taeglich oft ansieht, war das unruhig. Jetzt steckt der
       Status nur noch in Spur-Farbe und Icon, beide immer gleich gross; der volle
       Name steht in title/aria-label (siehe statusBadge). */
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 76px; flex: none;
    padding: 3px 6px; border-radius: 999px;
    background: none; box-shadow: none; border: none; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--ink-secondary);
    transition: background .15s ease, color .15s ease;
  }
  .status-schalter .sk-spur { display: inline-flex; gap: 2px; flex: none; }
  .status-schalter .sk-spur i {
    width: 9px; height: 4px; border-radius: 2px; flex: none;
    background: color-mix(in srgb, var(--ink) 15%, transparent);
    transition: background .18s ease;
  }
  /* Abgeholt hat keine Statusfarbe - erledigt ist kein Zustand, der Aufmerksamkeit will. */
  .badge.status-schalter .sk-spur i.an { background: var(--ink-muted); }
  .badge.warning.status-schalter .sk-spur i.an { background: var(--status-warning); }
  .badge.good.status-schalter .sk-spur i.an { background: var(--status-good); }
  .status-schalter .sk-icon { display: inline-flex; flex: none; color: var(--ink-muted); }
  .badge.warning.status-schalter .sk-icon { color: var(--status-warning); }
  .badge.good.status-schalter .sk-icon { color: var(--status-good); }
  /* ---------- Legende ueber den drei Icons ----------
     Steht jetzt UNTER den Tickets statt ueber ihnen, an derselben Stelle wie .op-summe
     drueben bei "Offene Posten" (gleiche margin-top/padding-top/border-top) - "In Arbeit"
     hat keine Geldsumme, aber dieselbe Fusszeilen-Position haelt beide Spalten auf
     gleicher Hoehe. Vorher stand die Legende ueber dem Ticket-Raster und schob es nach
     unten, waehrend "Offene Posten" an derselben Stelle nichts hatte - am PC sah man das
     als deutlichen Hoehenversatz zwischen den beiden Spalten. */
  .status-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-muted);
    margin-top: var(--raum-2); padding-top: var(--raum-3); border-top: 2px solid var(--rule-stark); }
  .status-legende span { display: inline-flex; align-items: center; gap: 5px; }
  .status-legende svg { flex: none; }
  .status-legende .warm { color: var(--status-warning); }
  .status-legende .gut { color: var(--status-good); }
  /* ---------- Status zurueck + Inline-Bestaetigung ---------- */
  .status-schalter-zeile { display: inline-flex; align-items: center; gap: 4px; }
  .status-zurueck-knopf {
    flex: none; width: 20px; height: 20px; border-radius: 50%; border: none; padding: 0;
    background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-muted);
    font-size: 14px; line-height: 1; cursor: pointer;
  }
  .status-zurueck-knopf:hover { background: var(--brand-wash); color: var(--brand); }
  .inline-bestaetigen { display: inline-flex; align-items: center; gap: 5px; }
  .status-schalter .sk-pfeil {
    font-size: 13px; line-height: 1; color: var(--ink-muted);
    transition: transform .15s ease, color .15s ease;
  }
  @media (hover: hover) {
    .badge.status-schalter:hover { background: var(--brand-wash); color: var(--brand); }
    .badge.status-schalter:hover .sk-pfeil { color: var(--brand); transform: translateX(2px); }
  }
  .badge.status-schalter:active { transform: scale(.97); }
  .badge.status-schalter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* Die Zeile, die durch den Wechsel aus der Liste faellt, geht weich. Bei einer
     Tabellenzeile nur ueber die Deckkraft: transform auf <tr> ist in keinem Browser
     verlaesslich. */
  .zeile-geht { opacity: 0; transition: opacity .19s ease; pointer-events: none; }
  .zeile-geht:not(tr) { transform: translateY(-5px); transition: opacity .19s ease, transform .19s ease; }
  @media (prefers-reduced-motion: reduce) {
    .zeile-geht { transition: none; }
    .zeile-geht:not(tr) { transition: none; transform: none; }
  }

  /* ---------- Offene Posten als Karten (Handy) ----------
     Der Gegenpart zur Tabelle in offenePostenTabelle(). Ueber vier Wochen offen traegt
     dieselbe rote Kante wie in der Tabelle, nur an der Karte statt an der ersten Zelle. */
  .op-karte .ek-mitte { align-items: center; }
  .op-karte.op-alt { border-left: 3px solid var(--status-critical); }
  .op-seit { font-size: 12px; color: var(--ink-muted); }
  .op-seit.alt { color: var(--status-critical); font-weight: 600; }
  .op-summe {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-4);
    margin-top: var(--raum-2); padding-top: var(--raum-3);
    border-top: 2px solid var(--rule-stark);
    font-size: var(--t-klein); color: var(--ink-secondary);
  }
  .op-summe b { font-family: var(--font-mono); font-size: 15px; color: var(--status-critical); }

  /* ---------- Dichtes Kennzahlen-Raster (Nutzerauswertung) ----------
     Stand vorher als style-Attribut an den beiden Gittern - und inline schlaegt jede
     Regel, auch die Handy-Regel, die auf eine Spalte stellt. In der halbbreiten Kachel
     blieben fuer lange Beschriftungen zwanzig Pixel uebrig. Als Klasse laesst es sich
     unten wieder zuruecknehmen. */
  .kpi-dicht { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  @media (max-width: 560px) {
    .kpi-dicht { grid-template-columns: 1fr; }
  }

  /* ---------- Klapp-Karten: Platz fuer den Pfeil ----------
     Der Pfeil steht absolut oben rechts, die Kopfzeile lief aber bis an den Kartenrand -
     Betrag und Datum beruehrten ihn. Nur Karten, die wirklich einen Pfeil tragen,
     bekommen den Rand; die stillen Karten (z.B. Rollenkaeufe) behalten ihre Breite. */
  .ekarte:has(> .ek-pfeil) > .ek-kopf { padding-right: 18px; }

  /* ---------- Kennzahl-Beschriftung: lange Woerter duerfen brechen ----------
     Am Handy stehen Bezeichnung und Zahl nebeneinander. "Bruttoeinnahmen" ist EIN Wort -
     ohne Bruchstelle lief es aus seiner Spalte heraus und unter die Zahl, sobald der
     Bildschirm schmal wurde (gemessen bei 320 px: 136 px Text in 115 px Platz).
     Deutsche Komposita sind hier der Normalfall, nicht die Ausnahme. */
  .kpi .label, .kpi-split-teil .label, .kpi .sub, .kpi-split-teil .sub { overflow-wrap: anywhere; }

  /* ---------- Jahres-Silhouette auf sehr schmalen Geraeten ----------
     Zwoelf Spalten auf 272 px Inhaltsbreite geben je 19 Pixel; "Mär" braucht bei 9,5 px
     Schrift und Sperrung rund 20 und stiess damit an den Nachbarmonat. Unter 360 px
     etwas kleiner und ohne Sperrung - das ist die Breite alter iPhone-SE-Geraete,
     darueber bleibt alles wie bisher. */
  @media (max-width: 360px) {
    .js-monat { font-size: 8.5px; letter-spacing: 0; }
  }

  /* ==================================================================
     STRING CONFIGURATOR
     ================================================================== */
  /* Echter Fehler, im Testkanal aufgefallen: .card selbst hat KEIN Padding (andere
     Verwendungen im Code setzen es jeweils per Inline-Style), Configurator-Karten hatten
     bisher keins bekommen - Inhalt sass fast am Kartenrand (1px Abstand statt spuerbarer
     Luft). Ein Token fuer beide Kartentypen. */
  .skon-panel, .skon-karte { padding: var(--raum-5); }
  .skon-panel h3 { margin: 0 0 var(--raum-3); }
  .skon-info-zeile { display: flex; align-items: center; gap: 8px; margin: var(--raum-2) 0; color: var(--ink-secondary); }
  .skon-form-ico { flex: none; color: var(--ink-muted); }
  .skon-form-text { font-size: var(--t-klein); color: var(--ink-muted); }
  .skon-zeile-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3); margin-top: var(--raum-3); }
  .skon-tension-wert { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
  .skon-tension-wahl { width: 100%; accent-color: var(--brand); cursor: pointer; margin-top: 8px; }
  .skon-fullbed-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3); flex-wrap: wrap; margin-bottom: var(--raum-2); }
  .skon-fullbed-kopf h3 { margin: 0; }
  .skon-fullbed-toggle { flex: none; }
  .skon-fullbed-hinweis { font-size: var(--t-klein); color: var(--ink-secondary); margin: 0 0 var(--raum-2); }
  .skon-karte h3 { margin: 0 0 var(--raum-2); }
  .skon-legende { margin-top: var(--raum-2); }
  .skon-hinweis-richtwerte { margin: var(--raum-2) 0 0; font-size: 11px; color: var(--ink-muted); }
  .skon-stiff-zahl { font-family: var(--font-mono); font-weight: var(--zahl-weight); font-size: 26px; color: var(--ink); }
  .skon-stiff-einheit { font-size: var(--t-klein); font-weight: 500; color: var(--ink-muted); }
  .skon-stiff-enden { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
  .skon-match-reihe { display: flex; align-items: center; gap: var(--raum-4); margin-top: var(--raum-2); }
  .skon-match-ring { position: relative; flex: none; width: 84px; height: 84px; display: grid; place-items: center; }
  /* Die SVG hatte width/height=72 als HTML-Attribute, aber inset:0 auf dem 84px-Rahmen -
     bei einem ersetzten Element wie <svg> zaehlt bei einem Groessen-Missverhaeltnis die
     eigene (72px-)Groesse, nicht der Rahmen, und ohne margin:auto blieb sie oben links
     kleben statt zu zentrieren. Die Prozentzahl daneben (normales Grid-Kind) stand dagegen
     brav in der Mitte - beides zusammen sah wie ein verrutschter Ring aus. width/height:100%
     laesst die SVG den ganzen (quadratischen) Rahmen fuellen, dann passt inset:0 wieder. */
  .skon-match-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .skon-match-prozent { position: relative; font-family: var(--font-mono); font-weight: var(--zahl-weight); font-size: 17px; color: var(--ink); }
  .skon-match-text { margin: 0; font-size: var(--t-basis); color: var(--ink-secondary); line-height: 1.5; }
  @media (max-width: 560px) {
    .skon-zeile-zwei { grid-template-columns: 1fr; }
    .skon-match-reihe { flex-direction: column; align-items: flex-start; }
  }

  /* ==================================================================
     ABZEICHEN FUER MATERIAL UND PROFIL
     ==================================================================
     Die Materialfarben sind als EINZIGE Farben der App in allen vier Gestaltungen
     gleich. Das ist Absicht: die Serienfarben der Diagramme gehoeren zur jeweiligen
     Palette, ein Material dagegen soll man ueberall am selben Ton wiedererkennen.
     Deshalb hier am Ende des Stilblatts einmal definiert statt in jedem der zwoelf
     Gestaltungs-Bloecke - und mit denselben Schutzklauseln fuer den Dunkelmodus,
     die die App auch sonst benutzt (erst Systemeinstellung, dann ausdrueckliche Wahl). */
  :root {
    --mat-poly: #1d4ed8;        --mat-poly-wash: #dbe6fb;
    --mat-multi: #15803d;       --mat-multi-wash: #d8ecdd;
    --mat-darm: #92610c;        --mat-darm-wash: #f6e8cc;
    --mat-synth: #4b5563;       --mat-synth-wash: #e6e8ec;
    --mat-hybrid: #6d28d9;      --mat-hybrid-wash: #e7dcfa;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --mat-poly: #93b4f8;      --mat-poly-wash: #17233d;
      --mat-multi: #8fd3a5;     --mat-multi-wash: #142a1d;
      --mat-darm: #e0b268;      --mat-darm-wash: #2f2413;
      --mat-synth: #b6bdc7;     --mat-synth-wash: #23272e;
      --mat-hybrid: #c0a4f5;    --mat-hybrid-wash: #251a3a;
    }
  }
  :root[data-theme="dark"] {
    --mat-poly: #93b4f8;        --mat-poly-wash: #17233d;
    --mat-multi: #8fd3a5;       --mat-multi-wash: #142a1d;
    --mat-darm: #e0b268;        --mat-darm-wash: #2f2413;
    --mat-synth: #b6bdc7;       --mat-synth-wash: #23272e;
    --mat-hybrid: #c0a4f5;      --mat-hybrid-wash: #251a3a;
  }

  .mat-badge, .profil-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .02em;
    white-space: nowrap; flex: none;
  }
  .mat-badge.mat-polyester     { background: var(--mat-poly-wash);   color: var(--mat-poly); }
  .mat-badge.mat-multifilament { background: var(--mat-multi-wash);  color: var(--mat-multi); }
  .mat-badge.mat-naturalgut    { background: var(--mat-darm-wash);   color: var(--mat-darm); }
  .mat-badge.mat-syntheticgut  { background: var(--mat-synth-wash);  color: var(--mat-synth); }
  .mat-badge.mat-hybrid        { background: var(--mat-hybrid-wash); color: var(--mat-hybrid); }
  /* Das Profil traegt kein eigenes Signal - gedeckte Flaeche, Schrift wie ein Etikett. */
  .profil-badge {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink-secondary); font-weight: 600;
  }
  .profil-badge .skon-form-ico { width: 14px; height: 14px; color: var(--ink-muted); }

  /* ---------- Vorschlagsliste im Anlege-Formular ----------
     Nutzt die Bauform der Wiki-Saitensuche (.namensliste) - dieselbe Optik, dieselbe
     Bedienung. Hier steht rechts zusaetzlich das Material-Abzeichen, damit man die
     Polyester- von der Multifilament-Variante schon in der Liste unterscheidet. */
  .saite-neu .sn-suche { position: relative; }
  .namensliste button .snv-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .namensliste button:has(.mat-badge) {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  /* Auf der Saitenkarte stehen die Abzeichen vor den Zahlen - erst was es IST, dann was
     es kostet. */
  .sk-fakten .mat-badge, .sk-fakten .profil-badge { margin-right: 2px; }

  /* ---------- Saitenkarte: Abzeichen unter dem Titel ---------- */
  .sk-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -2px; }
  .sk-info-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0;
    background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-secondary);
    font-size: 11px; line-height: 1; cursor: pointer; flex: none;
  }
  .sk-info-knopf:hover { background: var(--brand-wash); color: var(--brand); }

  /* ---------- Saitenkarte: Durchmesser + Bestand als Fuss-Chips ----------
     Dieselbe Chip-Bauform wie in Mein Profil (.profil-stat-chip) - ein Datenpunkt, den
     man in einer Reihe aus vielen Karten scannt, statt ihn aus Fliesstext herauszulesen. */
  .sk-daten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .sk-daten .profil-stat-chip { flex: none; }

  /* ==================================================================
     STRING CONFIGURATOR: Sans-Serif-Ueberschriften, Custom-Select,
     verfeinerte Diagramme
     ================================================================== */
  /* Nur hier, nicht app-weit (Ruecksprache): die App-Identitaet (Newsreader-Serifen bei
     Ueberschriften) bleibt ueberall sonst wie vom Werkstattbuch-Redesign festgelegt. */
  .skon-seite h2, .skon-seite h3, .skon-seite h4 {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: normal;
  }
  /* Etwas straffer als die App-weiten Abzeichen (3px/10px, 11.5px) - in den dichten
     Auswahl-Panels wirkt eine knappere Pille wie ein Etikett statt wie ein zweiter Knopf. */
  .skon-info-zeile .mat-badge, .skon-info-zeile .profil-badge {
    padding: 2.5px 8px;
    font-size: 10.5px;
    letter-spacing: .03em;
  }
  /* ---------- RA-Erklaerung, Info-Liste, Full-Bed-Werte, Synergie-Text ----------
     Alle vier teilen dieselbe ruhige, kleine Fliesstext-Optik - sie ergaenzen ihre Karte,
     sollen aber neben Zahl/Chart/Regler nicht lauter wirken als die Karte selbst. */
  .skon-stiff-erklaerung {
    margin: var(--raum-2) 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-secondary);
  }
  /* ---------- Kartenkopf mit Symbol ---------- */
  .skon-kopf-ico { display: flex; align-items: center; gap: 8px; }
  .skon-kopf-ico .skon-ico { flex: none; color: var(--ink-muted); }

  /* ---------- Saiten-DNA-Box (ersetzt die vorherige Fliesstext-Liste) ---------- */
  .skon-dna {
    margin-top: var(--raum-3); padding: var(--raum-3); border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
  }
  .skon-dna-kopf {
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-muted); margin-bottom: 8px;
  }
  .skon-dna-liste { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .skon-dna-liste li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-secondary); }
  .skon-dna-liste .skon-ico { flex: none; }
  .skon-dna-liste li.gut .skon-ico { color: var(--status-good); }
  .skon-dna-liste li.schwach { opacity: .75; }
  .skon-dna-liste li.schwach .skon-ico { color: var(--ink-muted); }
  .skon-dna-besonderheit {
    margin: 0; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    font-size: 12px; line-height: 1.5; color: var(--ink-secondary);
  }

  /* ---------- Zusammengelegte "Technischer Score"-Karte (RA-Wert + Spielertyp-Match) ---------- */
  .skon-score-trenner {
    margin: var(--raum-3) 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  .skon-score-unterkopf { margin: 0 0 var(--raum-2); font-size: var(--t-basis); }
  .skon-fullbed-werte {
    display: flex; flex-wrap: wrap; gap: var(--raum-3);
    font-size: 12.5px; color: var(--ink-secondary); margin-bottom: var(--raum-1);
  }
  .skon-fullbed-werte b { color: var(--ink); font-weight: 600; }
  .skon-synergie p {
    margin: 0 0 4px; font-size: var(--t-basis); line-height: 1.5; color: var(--ink-secondary);
  }
  .skon-synergie p:last-child { margin-bottom: 0; }
  .skon-synergie b { color: var(--ink); font-weight: 600; }

  /* ---------- Custom-Select ---------- */
  .cselect { position: relative; }
  .cselect-knopf {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-radius: 6px; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
    cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .cselect-knopf:hover { border-color: var(--brand); }
  .cselect-knopf:focus-visible,
  .cselect-knopf[aria-expanded="true"] {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  }
  .cselect-wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* Knopf mit einem Icon VOR dem Wert (z.B. die Lupe bei der Schlaeger-Suche) - Icon+Text als
     ein Block, damit .cselect-knopf weiter nur zwei Kinder sieht (space-between bliebe sonst
     mit drei Kindern falsch verteilt). */
  .cselect-wert-mit-icon { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
  .cselect-wert-mit-icon svg { flex: none; color: var(--ink-muted); }
  .cselect-pfeil { flex: none; color: var(--ink-muted); transition: transform .15s ease; }
  .cselect-knopf[aria-expanded="true"] .cselect-pfeil { transform: rotate(180deg); }
  .cselect-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
    box-shadow: var(--schatten-2); overflow: hidden; display: flex; flex-direction: column;
  }
  /* Der Gauge-Knopf sass in der schmalen Haelfte von .skon-zeile-zwei und war fuer
     "1.30 mm" (54px Text) mit 49px Platz knapp zu eng - die Ellipse schnitt ab. Etwas
     weniger Innenabstand plus eine Mindestbreite schaffen genug Luft. */
  .cselect-schmal .cselect-knopf { padding-left: 9px; padding-right: 7px; gap: 4px; min-width: 0; }
  .cselect-schmal .cselect-panel { min-width: 100px; }
  .cselect-suche {
    border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink);
    padding: 9px 12px; font: inherit; font-size: 13px;
  }
  .cselect-suche:focus { outline: none; background: var(--surface-2); }
  .cselect-liste { max-height: 260px; overflow-y: auto; padding: 4px; }
  .cselect-gruppe[hidden] { display: none; }
  .cselect-gruppen-label {
    padding: 7px 10px 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-muted); font-weight: 700;
  }
  .cselect-option {
    display: block; width: 100%; text-align: left; border: none; background: transparent;
    color: var(--ink); padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 13.5px;
    cursor: pointer;
  }
  .cselect-option[hidden] { display: none; }
  .cselect-option:hover { background: var(--brand-wash); color: var(--brand); }
  .cselect-option.an { background: var(--brand-wash); color: var(--brand); font-weight: 600; }

  /* ---------- Match-Karte: Typ-Name eigene Zeile, staerker als der Fliesstext ---------- */
  .skon-match-text-block { min-width: 0; }
  .skon-match-typ { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
  .skon-match-text { margin: 0; font-size: 12.5px; color: var(--ink-secondary); line-height: 1.5; }

  /* ==================================================================
     STRING CONFIGURATOR: Zonen-Layout (Konfiguration/Analyse/Bewertung),
     Kurzfazit, Skala-Balken, Material-Symbole, Reissgefahr-Karte,
     Schlaeger-Vorschau
     ==================================================================
     Ersetzt das bisherige 3-Spalten-Raster (Mains/Ergebnis/Crosses) durch drei
     uebereinanderliegende Abschnitte, die eine Reihenfolge erzaehlen (erst
     einrichten, dann die Analyse, dann das Ergebnis) statt drei gleichrangige
     Spalten zu zeigen. */
  .skon-zone { margin-bottom: var(--raum-5); }
  .skon-zone:last-child { margin-bottom: 0; }
  .skon-zone-label { display: flex; align-items: center; gap: var(--raum-2); margin-bottom: var(--raum-3); }
  .skon-zone-label .skon-zone-nr {
    flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-3); color: var(--ink-secondary); font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  }
  .skon-zone-label .skon-zone-txt {
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
  }
  .skon-zone-label .skon-zone-linie { flex: 1 1 auto; height: 1px; background: var(--border); }
  /* Die Analyse-Zone ist der Kern des Tools - eigene, kraeftigere Marke statt derselben
     stillen Grau-Beschriftung wie Konfiguration/Bewertung. */
  .skon-zone-label.hoch .skon-zone-nr { background: var(--brand-wash); color: var(--brand); }
  .skon-zone-label.hoch .skon-zone-txt { color: var(--brand); }
  .skon-zone-label.hoch .skon-zone-linie { background: color-mix(in srgb, var(--brand) 30%, var(--border)); }
  .skon-zone-reihe { display: flex; flex-direction: column; gap: var(--raum-4); }
  @media (min-width: 1000px) {
    .skon-zone-reihe { flex-direction: row; align-items: stretch; }
    .skon-zone-reihe > * { flex: 1 1 0; min-width: 0; }
  }

  /* ---------- Empfehlungs-Assistent ("welche Saite passt zu mir?") ---------- */
  .skon-empfehlung-karte { margin-bottom: var(--raum-4); padding: var(--raum-4); }
  .skon-empfehlung-karte form.add-row-form { margin-top: var(--raum-2); }
  .skon-empfehlung-treffer { display: flex; flex-direction: column; gap: var(--raum-3); margin-top: var(--raum-4); }
  .skon-empfehlung-treffer-karte {
    display: flex; align-items: center; gap: var(--raum-3); padding: var(--raum-3) var(--raum-4);
  }
  .skon-empfehlung-treffer-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .skon-empfehlung-treffer-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- Kurzfazit-Leiste ---------- */
  .skon-kurzfazit {
    display: flex; align-items: center; gap: var(--raum-3); margin-bottom: var(--raum-4);
    padding: var(--raum-3) var(--raum-4); border-radius: 14px;
    background: var(--brand-wash); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  }
  .skon-kurzfazit .skon-ico { flex: none; color: var(--brand); }
  .skon-kurzfazit p { margin: 0; font-size: var(--t-basis); line-height: 1.5; color: var(--ink); }

  /* ---------- Analyse-Karte: Profil + Verlauf in EINER Karte, hervorgehoben ----------
     Spart einen ganzen Kartenrahmen gegenueber zwei getrennten Karten, dezenter
     Markenfarb-Ring statt eines lauten Rahmens ("Kernstueck", keine Warnung). */
  .skon-analyse-karte { border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent); }
  .skon-analyse-innen { display: flex; gap: var(--raum-5); align-items: stretch; }
  .skon-analyse-trenner { width: 1px; flex: none; background: var(--border); align-self: stretch; }
  .skon-analyse-spalte { display: flex; flex-direction: column; position: relative; overflow: hidden; }
  .skon-analyse-schein {
    position: absolute; inset: 20px -10px auto -10px; height: 300px;
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 68%);
    pointer-events: none; z-index: 0;
  }
  .skon-analyse-inhalt { position: relative; z-index: 1; }
  @media (max-width: 900px) {
    .skon-analyse-innen { flex-direction: column; }
    .skon-analyse-trenner { width: auto; height: 1px; }
    /* Die beiden Spalten tragen inline flex:1.15 1 0 / flex:0.95 1 0 - Basis 0, Groesse kommt
       nur aus flex-grow. Das ist fuer eine ZEILE (Breite verteilen) gedacht, aber sobald
       .skon-analyse-innen hier auf Spalte umschaltet, ist das auf einmal die HOEHE: die Karte
       selbst hat keine feste Hoehe, es gibt also keinen "freien Raum", den flex-grow verteilen
       koennte, und .skon-analyse-spalte hat zusaetzlich overflow:hidden - das schaltet laut
       Spezifikation die automatische Mindesthoehe ab. Ergebnis auf echten Handys: beide
       Spalten kollabierten auf 0px und die ganze Analyse-Karte wirkte leer (nur die Trennlinie
       war noch zu sehen). !important, weil eine Stilregel einen einfachen Inline-Wert nur so
       schlagen kann. */
    .skon-analyse-spalte { flex: 1 1 auto !important; }
  }

  /* ---------- Skala-Balken: Gradient-Spur + Positionsmarke (RA-Wert, Haltbarkeit) ----------
     Die Farbe der Spur traegt die Bedeutung (kuehl/warm bzw. rot/gruen), der Punkt zeigt nur
     noch die Position darauf - statt eines bedeutungslosen "Fuellstand von links"-Balkens. */
  .skon-skala-spur { position: relative; height: 8px; border-radius: 999px; margin: var(--raum-3) 0 var(--raum-1); }
  .skon-skala-spur.ra { background: linear-gradient(to right, #6b93c9, #b0523a); }
  .skon-skala-spur.haltbarkeit { background: linear-gradient(to right, var(--status-critical), var(--status-good)); }
  .skon-skala-punkt {
    position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--ink); transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    animation: skon-punkt-pop .5s cubic-bezier(.3,1.4,.4,1) .4s backwards;
  }
  @keyframes skon-punkt-pop { from { transform: translate(-50%,-50%) scale(0); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

  /* ---------- Zuggewicht-Regler: Empfehlungsband + Skalen-Endwerte ---------- */
  .skon-zug-spur { position: relative; height: 4px; border-radius: 999px; background: var(--surface-3); margin-top: 6px; }
  .skon-zug-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--brand) 35%, transparent); }
  .skon-zug-enden { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--ink-muted); font-family: var(--font-mono); }
  .skon-zug-hinweis { font-size: 10px; color: var(--ink-muted); margin-top: 3px; }

  /* ---------- Delta-Anzeige (Saiten-DNA gegenueber vorheriger Wahl) ---------- */
  .skon-dna-vergleich { font-size: 10px; color: var(--ink-muted); margin: -2px 0 8px; font-style: italic; }
  .skon-delta { display: inline-flex; align-items: center; gap: 1px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; margin-left: auto; }
  .skon-delta.auf { color: var(--status-good); }
  .skon-delta.ab { color: var(--ink-muted); }

  /* ---------- Material-Symbol im Abzeichen ---------- */
  .mat-badge .skon-mat-ico { width: 14px; height: 14px; }

  /* ---------- Symbol-Legende ---------- */
  .skon-symbol-legende {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2) var(--raum-4); margin-top: var(--raum-4);
    padding: var(--raum-3) var(--raum-4); border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  }
  .skon-legende-titel {
    font-size: var(--t-mini); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-muted); flex: 1 1 100%;
  }
  .skon-legende-eintrag { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-secondary); }
  .skon-legende-eintrag .skon-mat-ico, .skon-legende-eintrag .skon-form-ico { flex: none; color: var(--ink-muted); width: 16px; height: 16px; }
  .skon-legende-eintrag.mat-polyester .skon-mat-ico { color: var(--mat-poly); }
  .skon-legende-eintrag.mat-multifilament .skon-mat-ico { color: var(--mat-multi); }
  .skon-legende-eintrag.mat-syntheticgut .skon-mat-ico { color: var(--mat-synth); }
  .skon-legende-eintrag.mat-naturalgut .skon-mat-ico { color: var(--mat-darm); }
  .skon-legende-trenn { width: 1px; align-self: stretch; background: var(--border); }
  @media (max-width: 640px) { .skon-legende-trenn { display: none; } }

  /* ---------- Reissgefahr & Lebensdauer ---------- */
  .skon-risiko-kopf-reihe { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--raum-3); margin-bottom: var(--raum-2); }
  .skon-risiko-zahl { font-family: var(--font-mono); font-weight: var(--zahl-weight); font-size: 26px; color: var(--ink); }
  .skon-risiko-label { font-size: var(--t-mini); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
  .skon-risiko-pille { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: var(--t-mini); font-weight: 700; }
  .skon-risiko-pille.niedrig { background: var(--status-good-wash); color: var(--status-good); }
  .skon-risiko-pille.mittel { background: var(--status-warning-wash); color: var(--status-warning); }
  .skon-risiko-pille.hoch { background: var(--status-critical-wash); color: var(--status-critical); }
  .skon-risiko-erklaerung { margin: var(--raum-2) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-secondary); }

  /* ---------- Setup-Auswertung: "Geeignet fuer"/"Kompromiss" als markierte Punkte ---------- */
  .skon-synergie-punkt { display: flex; gap: var(--raum-2); margin-bottom: var(--raum-3); }
  .skon-synergie-punkt:last-child { margin-bottom: 0; }
  .skon-synergie-punkt .skon-ico { flex: none; margin-top: 1px; }
  .skon-synergie-punkt.gut .skon-ico { color: var(--status-good); }
  .skon-synergie-punkt.kompromiss .skon-ico { color: var(--status-warning); }
  .skon-synergie-punkt b { display: block; color: var(--ink); font-weight: 700; font-size: 12.5px; margin-bottom: 2px; }
  .skon-synergie-punkt span { font-size: 12.5px; line-height: 1.5; color: var(--ink-secondary); }

  /* ---------- Schlaeger-Spezifikationen (Vorschau mit Beispieldaten) ----------
     Die App-Daten fuer Kopfgroesse/Gewicht/Balance/Saitenbild existieren im
     Schlaeger-Wiki heute noch nicht - deshalb ausdruecklich als Vorschau markiert,
     nicht als bedienbares Formular. */
  .skon-spec-vorschau-marke {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--surface-3); color: var(--ink-muted); margin-bottom: var(--raum-3);
  }
  /* Neutrale Fassung derselben Marke, ausserhalb des Configurators (z.B. Wiki-Beispielseite). */
  .vorschau-marke {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--surface-3); color: var(--ink-muted);
  }
  .skon-spec-suche {
    display: flex; align-items: center; gap: var(--raum-2); padding: 9px 12px; border-radius: 6px;
    border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 13.5px; margin-bottom: var(--raum-3);
  }
  .skon-spec-suche svg { flex: none; color: var(--ink-muted); }
  .skon-spec-relevant {
    display: flex; align-items: center; justify-content: space-between; gap: var(--raum-2);
    padding: var(--raum-2) var(--raum-3); margin-bottom: var(--raum-3); border-radius: 10px;
    background: var(--brand-wash); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  }
  .skon-spec-relevant .skon-spec-label { font-size: var(--t-mini); letter-spacing: .05em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
  .skon-spec-relevant .skon-spec-wert { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--ink); }
  .skon-spec-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--raum-2); opacity: .75; }
  .skon-spec-liste li { display: flex; flex-direction: column; gap: 2px; }
  .skon-spec-liste .skon-spec-label { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
  .skon-spec-liste .skon-spec-wert { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; color: var(--ink-secondary); }
  /* Einzelnes Feld ohne hinterlegten Wert - eigene, blasse Schrift statt Zahl, macht sichtbar
     WAS fehlt statt die Zeile stillschweigend weg zulassen (siehe Wiki-Leerzustand-Ueberlegung). */
  .skon-spec-wert.skon-spec-fehlt { font-family: inherit; font-style: italic; font-weight: 400; color: var(--ink-muted); }
  .skon-spec-suche-laedt { opacity: .7; }

  /* ---------- Karten heben sich beim Hover leicht an - dasselbe Prinzip wie
     .saite-karte:hover, jetzt konsequent auf den ganzen Configurator uebertragen. ---------- */
  .skon-seite .card:hover { transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz); }
  .skon-analyse-karte:hover { box-shadow: var(--schatten-2), var(--glanz), 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent); }

  /* ---------- Match-Ring zeichnet sich beim Laden ein ---------- */
  @keyframes skon-ring-draw { from { stroke-dashoffset: 263.9; } to { stroke-dashoffset: 0; } }
  .skon-match-ring circle + circle { stroke-dashoffset: 263.9; animation: skon-ring-draw 1.1s cubic-bezier(.25,.8,.3,1) .15s forwards; }

  /* ==================================================================
     BEREICHSFARBEN
     Jede Gruppe der Seitenleiste hat eine eigene Farbe, die sich durch den Inhalt zieht:
     Icon-Chips, Ueberschriften-Linie, Hover-Rand, Hauptknopf, Tabellenkopf und leere Zustaende.
     Das Kopfbild bleibt bewusst unangetastet (Nutzerwunsch). renderContent() setzt body.bereich-*.
     Bewusst OHNE Zwischen-Variable (z.B. --bereich): eine Variable, die selbst var(--brand)
     enthaelt, loeste beim Gestaltungswechsel nicht zuverlaessig neu auf (siehe Kommentar bei
     der Leiste). Deshalb steht die Farbe in jeder Regel direkt.
     Regel dahinter: hoechstens drei Farben je Seite - Bereichsfarbe, Gruen fuers Geld (.geld,
     .betrag-ein), Rot nur fuers Ueberfaellige.
     ================================================================== */

  /* ---------- ueberblick ---------- */
  body.bereich-ueberblick #content .table-wrap thead th { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
  body.bereich-ueberblick #content .table-wrap > table > tbody > tr.summenzeile > td { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
  body.bereich-ueberblick .leerkarte { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface) 72%); }

  /* ---------- bespannen ---------- */
  body.bereich-bespannen #content .table-wrap thead th { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
  body.bereich-bespannen #content .table-wrap > table > tbody > tr.summenzeile > td { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
  body.bereich-bespannen .leerkarte { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface) 72%); }

  /* ---------- badminton ---------- */
  body.bereich-badminton #content .table-wrap thead th { background: color-mix(in srgb, var(--series-badminton) 7%, var(--surface)); }
  body.bereich-badminton #content .table-wrap > table > tbody > tr.summenzeile > td { background: color-mix(in srgb, var(--series-badminton) 9%, var(--surface)); }
  body.bereich-badminton .leerkarte { background: linear-gradient(180deg, color-mix(in srgb, var(--series-badminton) 14%, var(--surface)), var(--surface) 72%); }
  body.bereich-badminton .kpi .kpi-ico, body.bereich-badminton .verw-kopf-akzent .kpi-ico, body.bereich-badminton .chart-card h3 .kpi-ico, body.bereich-badminton .st-kopf .kpi-ico { background: color-mix(in srgb, var(--series-badminton) 14%, var(--surface)); color: var(--series-badminton); }
  body.bereich-badminton .section-head { border-bottom-color: color-mix(in srgb, var(--series-badminton) 30%, var(--rule)); }
  body.bereich-badminton .kpi:hover { border-color: color-mix(in srgb, var(--series-badminton) 40%, var(--border)); }
  body.bereich-badminton .leerkarte-zeichen { border-color: color-mix(in srgb, var(--series-badminton) 45%, transparent); background: color-mix(in srgb, var(--series-badminton) 14%, var(--surface)); color: var(--series-badminton); }
  body.bereich-badminton .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger), body.bereich-badminton .btn.gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--series-badminton) 88%, #fff), var(--series-badminton));
    color: var(--auf-brand);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--series-badminton) 30%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--series-badminton) 55%, transparent);
  }
  body.bereich-badminton .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger):hover, body.bereich-badminton .btn.gold:hover {
    background: color-mix(in srgb, var(--series-badminton) 84%, var(--ink)); color: var(--auf-brand);
  }

  /* ---------- tennis ---------- */
  body.bereich-tennis #content .table-wrap thead th { background: color-mix(in srgb, var(--series-tennis) 7%, var(--surface)); }
  body.bereich-tennis #content .table-wrap > table > tbody > tr.summenzeile > td { background: color-mix(in srgb, var(--series-tennis) 9%, var(--surface)); }
  body.bereich-tennis .leerkarte { background: linear-gradient(180deg, color-mix(in srgb, var(--series-tennis) 14%, var(--surface)), var(--surface) 72%); }
  body.bereich-tennis .kpi .kpi-ico, body.bereich-tennis .verw-kopf-akzent .kpi-ico, body.bereich-tennis .chart-card h3 .kpi-ico, body.bereich-tennis .st-kopf .kpi-ico { background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); }
  body.bereich-tennis .section-head { border-bottom-color: color-mix(in srgb, var(--series-tennis) 30%, var(--rule)); }
  body.bereich-tennis .kpi:hover { border-color: color-mix(in srgb, var(--series-tennis) 40%, var(--border)); }
  body.bereich-tennis .leerkarte-zeichen { border-color: color-mix(in srgb, var(--series-tennis) 45%, transparent); background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); }
  body.bereich-tennis .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger), body.bereich-tennis .btn.gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--series-tennis) 88%, #fff), var(--series-tennis));
    color: var(--auf-gold);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--series-tennis) 30%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--series-tennis) 55%, transparent);
  }
  body.bereich-tennis .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger):hover, body.bereich-tennis .btn.gold:hover {
    background: color-mix(in srgb, var(--series-tennis) 84%, var(--ink)); color: var(--auf-gold);
  }

  /* ---------- platz ---------- */
  body.bereich-platz #content .table-wrap thead th { background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
  body.bereich-platz #content .table-wrap > table > tbody > tr.summenzeile > td { background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
  body.bereich-platz .leerkarte { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--surface) 72%); }
  body.bereich-platz .kpi .kpi-ico, body.bereich-platz .verw-kopf-akzent .kpi-ico, body.bereich-platz .chart-card h3 .kpi-ico, body.bereich-platz .st-kopf .kpi-ico { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--gold); }
  body.bereich-platz .section-head { border-bottom-color: color-mix(in srgb, var(--gold) 30%, var(--rule)); }
  body.bereich-platz .kpi:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
  body.bereich-platz .leerkarte-zeichen { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--gold); }
  body.bereich-platz .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger), body.bereich-platz .btn.gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 88%, #fff), var(--gold));
    color: var(--auf-gold);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--gold) 30%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--gold) 55%, transparent);
  }
  body.bereich-platz .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger):hover, body.bereich-platz .btn.gold:hover {
    background: color-mix(in srgb, var(--gold) 84%, var(--ink)); color: var(--auf-gold);
  }

  /* ---------- finanzen ---------- */
  body.bereich-finanzen #content .table-wrap thead th { background: color-mix(in srgb, var(--status-good) 7%, var(--surface)); }
  body.bereich-finanzen #content .table-wrap > table > tbody > tr.summenzeile > td { background: color-mix(in srgb, var(--status-good) 9%, var(--surface)); }
  body.bereich-finanzen .leerkarte { background: linear-gradient(180deg, color-mix(in srgb, var(--status-good) 14%, var(--surface)), var(--surface) 72%); }
  body.bereich-finanzen .kpi .kpi-ico, body.bereich-finanzen .verw-kopf-akzent .kpi-ico, body.bereich-finanzen .chart-card h3 .kpi-ico, body.bereich-finanzen .st-kopf .kpi-ico { background: color-mix(in srgb, var(--status-good) 14%, var(--surface)); color: var(--status-good); }
  body.bereich-finanzen .section-head { border-bottom-color: color-mix(in srgb, var(--status-good) 30%, var(--rule)); }
  body.bereich-finanzen .kpi:hover { border-color: color-mix(in srgb, var(--status-good) 40%, var(--border)); }
  body.bereich-finanzen .leerkarte-zeichen { border-color: color-mix(in srgb, var(--status-good) 45%, transparent); background: color-mix(in srgb, var(--status-good) 14%, var(--surface)); color: var(--status-good); }
  body.bereich-finanzen .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger), body.bereich-finanzen .btn.gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-good) 88%, #fff), var(--status-good));
    color: var(--auf-brand);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--status-good) 30%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--status-good) 55%, transparent);
  }
  body.bereich-finanzen .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger):hover, body.bereich-finanzen .btn.gold:hover {
    background: color-mix(in srgb, var(--status-good) 84%, var(--ink)); color: var(--auf-brand);
  }

  /* ---------- wissen ---------- */
  body.bereich-wissen #content .table-wrap thead th { background: color-mix(in srgb, var(--wissen, var(--brand)) 7%, var(--surface)); }
  body.bereich-wissen #content .table-wrap > table > tbody > tr.summenzeile > td { background: color-mix(in srgb, var(--wissen, var(--brand)) 9%, var(--surface)); }
  body.bereich-wissen .leerkarte { background: linear-gradient(180deg, color-mix(in srgb, var(--wissen, var(--brand)) 14%, var(--surface)), var(--surface) 72%); }
  body.bereich-wissen .kpi .kpi-ico, body.bereich-wissen .verw-kopf-akzent .kpi-ico, body.bereich-wissen .chart-card h3 .kpi-ico, body.bereich-wissen .st-kopf .kpi-ico { background: color-mix(in srgb, var(--wissen, var(--brand)) 14%, var(--surface)); color: var(--wissen, var(--brand)); }
  body.bereich-wissen .section-head { border-bottom-color: color-mix(in srgb, var(--wissen, var(--brand)) 30%, var(--rule)); }
  body.bereich-wissen .kpi:hover { border-color: color-mix(in srgb, var(--wissen, var(--brand)) 40%, var(--border)); }
  body.bereich-wissen .leerkarte-zeichen { border-color: color-mix(in srgb, var(--wissen, var(--brand)) 45%, transparent); background: color-mix(in srgb, var(--wissen, var(--brand)) 14%, var(--surface)); color: var(--wissen, var(--brand)); }
  body.bereich-wissen .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger), body.bereich-wissen .btn.gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wissen, var(--brand)) 88%, #fff), var(--wissen, var(--brand)));
    color: var(--auf-brand);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--wissen, var(--brand)) 30%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--wissen, var(--brand)) 55%, transparent);
  }
  body.bereich-wissen .btn:not(.ghost):not(.sekundaer):not(.gefahr):not(.danger):hover, body.bereich-wissen .btn.gold:hover {
    background: color-mix(in srgb, var(--wissen, var(--brand)) 84%, var(--ink)); color: var(--auf-brand);
  }

  /* ---------- Seitenleiste: jede Gruppe in ihrer Farbe ----------
     Auf dunklem Grund, deshalb helle Toene. Der Balken vor der Ueberschrift, die Linie, der
     Pfeil und der aktive Eintrag tragen dieselbe Farbe wie der Inhalt der Seite. */
  .rail-block[data-gruppe="rail.gr.ueberblick"] { --rg: #f0e8e0; }
  .rail-block[data-gruppe="rail.gr.bespannen"] { --rg: #7fd0bd; }
  .rail-block[data-gruppe="rail.gr.platz"] { --rg: #e08a5c; }
  .rail-block[data-gruppe="rail.gr.finanzen"] { --rg: #b8d8c0; }
  .rail-block[data-gruppe="rail.gr.wissen"] { --rg: #9db8de; }
  .rail-block[data-gruppe] .rail-gruppe .txt::before { background: var(--rg, var(--gold)); }
  .rail-block[data-gruppe] .rail-gruppe .chev { color: var(--rg, var(--gold)); }
  .rail-block[data-gruppe] .rail-gruppe .linie {
    background: linear-gradient(90deg, color-mix(in srgb, var(--rg, var(--gold)) 50%, transparent), transparent);
  }
  .rail-block[data-gruppe] .rail-gruppe .aktiv-punkt { background: var(--rg, var(--gold)); }
  .rail-block[data-gruppe] .rail-tab.active { background: var(--rg, var(--gold)); color: #0e241e; }
  .rail-block[data-gruppe] .rail-tab.active .ico { background: rgba(0,0,0,.14); color: #0e241e; }

  /* ---------- Sportarten haben feste Farben ----------
     Tennis = Clay, Badminton = Gruen - auf Karten, Initialen und dem Rand links. Der Streifen
     zeigt den STAND (angenommen/fertig, siehe .ekarte:has(.badge...) weiter oben); wo es noch
     keinen gibt, faerbt ihn die Sportart leise ein. */
  .ekarte.sport-tennis .ek-initial { background: color-mix(in srgb, var(--series-tennis) 16%, var(--surface)); color: var(--series-tennis); }
  .ekarte.sport-badminton .ek-initial { background: color-mix(in srgb, var(--series-badminton) 16%, var(--surface)); color: var(--series-badminton); }
  .ekarte.sport-tennis:not(:has(.badge.good, .badge.warning, .badge.critical)) {
    box-shadow: inset 4px 0 0 color-mix(in srgb, var(--series-tennis) 55%, transparent), var(--shadow), var(--glanz);
  }
  .ekarte.sport-badminton:not(:has(.badge.good, .badge.warning, .badge.critical)) {
    box-shadow: inset 4px 0 0 color-mix(in srgb, var(--series-badminton) 55%, transparent), var(--shadow), var(--glanz);
  }

  /* ---------- Geld folgt einer Regel ----------
     Einnahmen gruen (.geld / .betrag-ein), Kosten neutral in gedaempftem Clay (.kosten),
     Offenes bernsteinfarben - ROT erst, wenn es laenger als drei Tage aussteht. */
  .kpi .value.kosten { color: color-mix(in srgb, var(--gold) 62%, var(--ink)); }
  #content td.num.betrag-ein, .ek-betrag.betrag-ein { color: var(--status-good); }
  #content td.num.betrag-offen, .ek-betrag.betrag-offen { color: var(--status-warning); font-weight: 600; }
  #content td.num.betrag-offen.ueberfaellig, .ek-betrag.betrag-offen.ueberfaellig { color: var(--status-critical); }

  /* ---------- Einheitliche Statusetiketten ----------
     Bezahlt, offen, in Arbeit, faellig, Kategorie: alles dieselbe Pille - weicher Farbgrund,
     farbiger Text, gleiche Hoehe und Schrift. Vorher war "offen" nur ein Punkt mit Wort, die
     Dauer-Pille kleiner und die Kategorie-Chips wieder anders. Der Stempel fuer "bezahlt"
     bleibt bewusst er selbst. */
  .badge.status-knopf.critical, .badge.status-knopf.warning, .badge.status-knopf.good {
    padding: 3px 11px; border-radius: var(--pill); font-weight: 700;
  }
  .badge.status-knopf.critical { background: var(--status-critical-wash); color: var(--status-critical); }
  .badge.status-knopf.warning { background: var(--status-warning-wash); color: var(--status-warning); }
  .badge.status-knopf.good { background: var(--status-good-wash); color: var(--status-good); }
  .arbeit-dauer { font-size: 11px; font-weight: 700; padding: 3px 11px; letter-spacing: .02em; }
  .kasse-kategorie-chip, .fb-kategorie-chip { padding: 3px 11px; letter-spacing: .02em; }

  /* ==================================================================
     STRING CONFIGURATOR im neuen Design
     Zwei Farben tragen die Seite: Gruen (Einrichten, Bewertung) und das Ascherot/Clay
     (Analyse, Schwaechen, Verlust). Dazu serife Ueberschriften und Zahlen, Icon-Chips
     statt grauer Linienzeichen, weiche Flaechen statt Grauboxen.
     ================================================================== */
  .skon-zone { margin-bottom: var(--raum-6); }
  .skon-zone-label { gap: 12px; margin-bottom: var(--raum-4); }
  .skon-zone-label .skon-zone-nr {
    width: 32px; height: 32px; border-radius: 10px; font-size: 15px; font-weight: var(--titel-weight);
    font-family: var(--font-titel);
    background: color-mix(in srgb, var(--series-badminton) 14%, var(--surface)); color: var(--series-badminton);
  }
  .skon-zone-label .skon-zone-txt {
    font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 21px;
    letter-spacing: var(--titel-spacing); text-transform: none; color: var(--ink);
  }
  .skon-zone-label .skon-zone-linie {
    height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--series-badminton) 40%, var(--border)), transparent);
  }
  /* Analyse = Clay */
  .skon-zone-label.hoch .skon-zone-nr { background: color-mix(in srgb, var(--series-tennis) 15%, var(--surface)); color: var(--series-tennis); }
  .skon-zone-label.hoch .skon-zone-txt { color: var(--ink); }
  .skon-zone-label.hoch .skon-zone-linie { background: linear-gradient(90deg, color-mix(in srgb, var(--series-tennis) 45%, var(--border)), transparent); }
  /* Bewertung = das satte Gruen des Erfolgs */
  #skonErgebnis > .skon-zone-bewertung .skon-zone-label .skon-zone-nr { background: var(--status-good-wash); color: var(--status-good); }
  #skonErgebnis > .skon-zone-bewertung .skon-zone-label .skon-zone-linie { background: linear-gradient(90deg, color-mix(in srgb, var(--status-good) 40%, var(--border)), transparent); }

  .skon-panel, .skon-karte { padding: var(--raum-5) var(--raum-5) var(--raum-5); border-radius: 18px; }
  .skon-kopf-ico { gap: 10px; }
  .skon-kopf-ico > span { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 18px; letter-spacing: var(--titel-spacing); }
  .skon-kopf-ico .skon-ico {
    width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 9px;
    background: color-mix(in srgb, var(--series-badminton) 13%, var(--surface)); color: var(--series-badminton);
  }
  #skonErgebnis > .skon-zone-analyse .skon-kopf-ico .skon-ico { background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); }
  #skonErgebnis > .skon-zone-bewertung .skon-kopf-ico .skon-ico { background: var(--status-good-wash); color: var(--status-good); }

  .skon-stiff-zahl, .skon-risiko-zahl {
    font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 36px; line-height: 1.1; letter-spacing: -.01em;
  }
  .skon-match-prozent { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 22px; }
  .skon-stiff-einheit { font-family: var(--font-body); }
  .skon-skala-spur { height: 9px; }
  .skon-skala-spur.ra { background: linear-gradient(to right, #9cc7ac, var(--series-tennis)); }
  .skon-skala-spur.haltbarkeit { background: linear-gradient(to right, var(--series-tennis), var(--status-good)); }
  .skon-skala-punkt { border-color: var(--ink); background: var(--surface); }
  .skon-tension-wahl { accent-color: var(--status-good); }
  .skon-zug-band { background: color-mix(in srgb, var(--status-good) 38%, transparent); }

  .skon-kurzfazit {
    border-radius: 18px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--status-good) 13%, var(--surface)), var(--surface) 78%);
    border: 1px solid color-mix(in srgb, var(--status-good) 26%, var(--border));
  }
  .skon-kurzfazit .skon-ico {
    width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 10px;
    background: var(--status-good-wash); color: var(--status-good);
  }
  .skon-kurzfazit p { font-family: var(--font-titel); font-size: 17px; line-height: 1.45; letter-spacing: var(--titel-spacing); }

  .skon-analyse-karte {
    border-color: color-mix(in srgb, var(--series-tennis) 26%, var(--border));
    box-shadow: var(--shadow), var(--glanz);
  }
  .skon-analyse-schein { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--series-tennis) 9%, transparent), transparent 68%); }
  .skon-analyse-karte:hover { box-shadow: var(--schatten-2), var(--glanz); }

  .skon-dna {
    border-radius: 14px;
    background: color-mix(in srgb, var(--series-badminton) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--series-badminton) 14%, var(--border));
  }
  .skon-dna-kopf { color: var(--series-badminton); }
  .skon-dna-liste li.schwach { opacity: 1; }
  .skon-dna-liste li.schwach .skon-ico { color: var(--series-tennis); }
  .skon-delta.ab { color: var(--series-tennis); }
  .skon-synergie-punkt.kompromiss .skon-ico { color: var(--series-tennis); }
  .skon-synergie-punkt.gut .skon-ico { color: var(--status-good); }
  .skon-risiko-pille.mittel { background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); }

  .skon-spec-relevant {
    border-radius: 12px;
    background: color-mix(in srgb, var(--series-badminton) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--series-badminton) 20%, transparent);
  }
  .skon-spec-relevant .skon-spec-label { color: var(--series-badminton); }
  .skon-symbol-legende { border-radius: 16px; background: color-mix(in srgb, var(--series-badminton) 4%, var(--surface-2)); }
  .skon-legende-titel { color: var(--series-badminton); }
  .cselect-knopf { border-radius: 10px; }
  .cselect-panel { border-radius: 14px; }
  .cselect-option:hover, .cselect-option.an { background: color-mix(in srgb, var(--series-badminton) 12%, var(--surface)); color: var(--series-badminton); }

  /* ==================================================================
     HANDY-FIXES
     1) Kennzahl-Kacheln (z.B. oben im Profil): Die Zahl-Spalte war "auto" und durfte bei langem
        Text (Favorit-Schlaegername) die ganze Kachelbreite fressen - die Beschriftung bekam
        dann 0 px und brach mit "overflow-wrap: anywhere" Buchstabe fuer Buchstabe um. Jetzt hat
        die Beschriftung eine Mindestbreite, die Zahl eine Hoechstbreite.
     2) Schlaeger-Karussell im Profil: Beim Wischen fahren die Karten 28 px zur Seite und ragten
        dabei ueber den Seitenrand hinaus. Das machte die Seite kurz breiter als den Bildschirm -
        und die untere Leiste (fixed) rutschte mit aus dem Bild. Jetzt wird seitlich abgeschnitten,
        und das waagerechte Wischen gehoert der Karte, nicht der Seite.
     ================================================================== */
  @media (max-width: 560px) {
    .kpi, .kpi-split-teil { grid-template-columns: minmax(96px, 1fr) minmax(0, auto); }
    .kpi > .value, .kpi-split-teil > .value { max-width: 52vw; min-width: 0; overflow-wrap: anywhere; text-align: right; }
    .kpi .kpi-kopf { min-width: 0; }
    .kpi .kpi-kopf .label { min-width: 0; overflow-wrap: break-word; }
  }
  .pk-buehne { overflow-x: clip; touch-action: pan-y; }
  @media (max-width: 820px) {
    .content { overflow-x: clip; }
  }

  /* ==================================================================
     KONFIGURATOR: Live-Vorschau, Werte-Balken, Regler, Setups, Rangliste, Handy-Leiste
     ================================================================== */
  /* Setup-Band oben: das aktuelle Setup, zwei Aktionen, gemerkte Setups. Ohne Bild. */
  .skon-band {
    padding: var(--raum-5) var(--raum-6); border-radius: 20px; margin-bottom: var(--raum-6);
    background: linear-gradient(115deg,
      color-mix(in srgb, var(--status-good) 9%, var(--surface)) 0%, var(--surface) 55%,
      color-mix(in srgb, var(--series-tennis) 8%, var(--surface)) 100%);
  }
  .skon-seite .skon-band:hover { transform: none; box-shadow: var(--shadow), var(--glanz); }
  .skon-band-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4); flex-wrap: wrap; }
  .skon-band-aktuell { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
  .skon-band-label { font-size: var(--t-mini); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--series-badminton); }
  .skon-band-name {
    font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 24px; line-height: 1.2;
    letter-spacing: var(--titel-spacing); margin-top: 4px; color: var(--ink); overflow-wrap: anywhere;
  }
  .skon-band-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
  .skon-band-aktionen .btn { padding: 9px 16px; }
  .skon-setups { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
  .skon-setups-titel { font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
  .skon-setups-hinweis { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-secondary); line-height: 1.5; }
  .skon-setups-leer { margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
  .skon-setup-zeile { display: flex; align-items: center; gap: 6px; padding: 5px 0; flex-wrap: wrap; }
  .skon-setup-name { flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skon-setup-zeile.vergleich .skon-setup-name { color: var(--series-tennis); font-weight: 600; }
  .skon-mini {
    flex: none; border: 1px solid var(--border-strong); background: transparent; color: var(--ink-secondary);
    border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  }
  .skon-mini:hover { background: color-mix(in srgb, var(--status-good) 12%, var(--surface)); color: var(--status-good); border-color: var(--status-good); }
  .skon-mini.an { background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); border-color: var(--series-tennis); }
  .skon-mini.gefahr:hover { background: var(--status-critical-wash); color: var(--status-critical); border-color: var(--status-critical); }
  @media (max-width: 700px) {
    .skon-band { padding: var(--raum-4); }
    .skon-band-name { font-size: 20px; }
  }

  /* Konfiguration: Modus-Schalter im Kopf, die zweite Saite nur bei Hybrid */
  .skon-zone-label { flex-wrap: wrap; }
  .skon-modus { flex: none; margin-left: auto; }
  .skon-konf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .skon-konf > .card { min-width: 0; }
  @media (min-width: 1000px) {
    .skon-konf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .skon-konf.hybrid > .skon-racket-karte { grid-column: 1 / -1; }
  }
  .skon-racket-karte .skon-spec-liste { opacity: 1; }

  /* Bewertung: Score links ueber die ganze Hoehe, rechts Reissgefahr und Setup-Auswertung uebereinander */
  .skon-bewertung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .skon-bewertung > .card { min-width: 0; }
  @media (min-width: 1000px) {
    .skon-bewertung { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "score risiko" "score synergie"; }
    .skon-bewertung > .skon-score { grid-area: score; }
    .skon-bewertung > .skon-risiko-karte { grid-area: risiko; }
    .skon-bewertung > .skon-synergie { grid-area: synergie; }
  }

  /* Vergleich */
  .skon-zone-label.vergleich .skon-zone-nr { background: var(--ink); color: var(--surface); }
  .skon-zone-label.vergleich .skon-zone-linie { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 35%, var(--border)), transparent); }
  .skon-vgl-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); margin-bottom: var(--raum-3); }
  @media (max-width: 700px) { .skon-vgl-kopf { grid-template-columns: 1fr; } }
  .skon-vgl-seite { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 14px; min-width: 0; }
  .skon-vgl-seite.a { background: color-mix(in srgb, var(--status-good) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--status-good) 25%, var(--border)); }
  .skon-vgl-seite.b { background: color-mix(in srgb, var(--series-tennis) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--series-tennis) 25%, var(--border)); }
  .skon-vgl-tag { font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .skon-vgl-seite.a .skon-vgl-tag { color: var(--status-good); }
  .skon-vgl-seite.b .skon-vgl-tag { color: var(--series-tennis); }
  .skon-vgl-seite b { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
  .skon-vgl-seite small { font-size: 12px; color: var(--ink-secondary); }
  .skon-vgl-fazit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--raum-3); }
  .skon-vgl-fazit-titel { font-size: 12.5px; color: var(--ink-secondary); font-weight: 600; }
  .skon-vgl-chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
  .skon-vgl-chip.auf { background: var(--status-good-wash); color: var(--status-good); }
  .skon-vgl-chip.ab { background: color-mix(in srgb, var(--series-tennis) 15%, var(--surface)); color: var(--series-tennis); }
  .skon-vgl-tabelle { display: grid; gap: 12px; }
  .skon-vgl-zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
  @media (max-width: 520px) { .skon-vgl-zeile { grid-template-columns: 92px minmax(0, 1fr) 46px; gap: 8px; } }
  .skon-vgl-name { font-size: 12.5px; color: var(--ink-secondary); }
  .skon-vgl-paar { display: flex; flex-direction: column; gap: 4px; }
  .skon-vgl-balken { position: relative; display: block; height: 13px; border-radius: 999px; background: var(--surface-2); }
  .skon-vgl-balken i { display: block; height: 100%; border-radius: 999px; }
  .skon-vgl-balken.a i { background: var(--status-good); }
  .skon-vgl-balken.b i { background: var(--series-tennis); }
  .skon-vgl-balken em { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-secondary); }
  .skon-vgl-delta { text-align: right; font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 15px; white-space: nowrap; }
  .skon-vgl-delta.auf { color: var(--status-good); }
  .skon-vgl-delta.ab { color: var(--series-tennis); }
  .skon-vgl-delta.gleich, .skon-vgl-delta.neutral { color: var(--ink-muted); }

  /* Hybrid: Laengs und Quer nebeneinander */
  .skon-seiten { margin-bottom: var(--raum-4); }
  .skon-seiten-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); margin-top: var(--raum-3); }
  @media (min-width: 900px) { .skon-seiten-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .skon-seite-spalte { min-width: 0; padding: 14px 16px; border-radius: 16px; }
  .skon-seite-spalte.laengs { background: color-mix(in srgb, var(--series-badminton) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--series-badminton) 20%, var(--border)); }
  .skon-seite-spalte.quer { background: color-mix(in srgb, var(--series-tennis) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--series-tennis) 20%, var(--border)); }
  .skon-seite-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
  .skon-seite-rolle { font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .skon-seite-spalte.laengs .skon-seite-rolle { color: var(--series-badminton); }
  .skon-seite-spalte.quer .skon-seite-rolle { color: var(--series-tennis); }
  .skon-seite-kopf b { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 17px; overflow-wrap: anywhere; }
  .skon-seite-zahlen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; font-size: 12.5px; color: var(--ink-secondary); font-weight: 600; }
  .skon-bereich { padding: 3px 10px; border-radius: 999px; font-size: var(--t-mini); font-weight: 700; }
  .skon-bereich.drin { background: var(--status-good-wash); color: var(--status-good); }
  .skon-bereich.aus { background: color-mix(in srgb, var(--series-tennis) 15%, var(--surface)); color: var(--series-tennis); }
  .skon-seite-spalte .skon-werte-raster { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .skon-seite-spalte .skon-wert-zeile { grid-template-columns: 120px minmax(0, 1fr) 48px; }
  .skon-seite-verlust { margin: 12px 0 0; font-size: 12px; color: var(--ink-secondary); line-height: 1.5; }
  .skon-seiten-hinweis { margin: var(--raum-3) 0 0; font-size: 12px; color: var(--ink-muted); }

  .skon-info-zeile { flex-wrap: wrap; }
  .skon-lager {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: var(--t-mini); font-weight: 700; background: var(--status-good-wash); color: var(--status-good);
  }

  /* Werte als Balken */
  .skon-werte { margin-top: var(--raum-5); padding-top: var(--raum-4); border-top: 1px solid var(--border); }
  .skon-werte-kopf {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px; font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 17px;
  }
  .skon-werte-vergleich { font-family: var(--font-body); font-size: 12px; color: var(--series-tennis); font-weight: 600; }
  .skon-werte-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
  @media (max-width: 760px) { .skon-werte-raster { grid-template-columns: 1fr; } }
  .skon-wert-zeile { display: grid; grid-template-columns: 138px 1fr 64px; align-items: center; gap: 10px; }
  .skon-wert-name { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-secondary); min-width: 0; }
  .skon-wert-name .skon-ico { width: 16px; height: 16px; flex: none; }
  .skon-wert-spur { position: relative; height: 10px; border-radius: 999px; background: var(--surface-2); }
  .skon-wert-spur i { display: block; height: 100%; border-radius: 999px; background: var(--ink-muted); transition: width .3s ease; }
  .skon-wert-zeile.hoch .skon-wert-spur i { background: linear-gradient(90deg, color-mix(in srgb, var(--status-good) 65%, var(--surface)), var(--status-good)); }
  .skon-wert-zeile.tief .skon-wert-spur i { background: linear-gradient(90deg, color-mix(in srgb, var(--series-tennis) 65%, var(--surface)), var(--series-tennis)); }
  .skon-wert-zeile.mittel .skon-wert-spur i { background: color-mix(in srgb, var(--status-good) 38%, var(--ink-muted)); }
  .skon-wert-marke { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--series-tennis); }
  .skon-wert-zahl { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 16px; text-align: right; white-space: nowrap; }
  .skon-wert-zahl em { font-family: var(--font-body); font-style: normal; font-size: 11px; font-weight: 700; margin-left: 5px; }
  .skon-wert-zahl em.auf { color: var(--status-good); }
  .skon-wert-zahl em.ab { color: var(--series-tennis); }
  @media (max-width: 420px) { .skon-wert-zeile { grid-template-columns: 112px 1fr 58px; gap: 8px; } }

  /* Rangliste der Spielertypen */
  .skon-rang { margin-top: var(--raum-4); padding-top: var(--raum-3); border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
  .skon-rang-titel { font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
  .skon-rang-zeile {
    display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 12.5px;
    color: var(--ink-secondary); cursor: pointer; text-align: left;
  }
  .skon-rang-zeile:hover { background: var(--surface-2); }
  .skon-rang-zeile.an { background: color-mix(in srgb, var(--status-good) 11%, var(--surface)); color: var(--ink); font-weight: 600; }
  .skon-rang-spur { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .skon-rang-spur i { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--status-good) 50%, var(--surface)); }
  .skon-rang-zeile.an .skon-rang-spur i { background: var(--status-good); }
  .skon-rang-p { text-align: right; font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 15px; }

  /* Zuggewicht-Regler mit Farbverlauf und Blase */
  .skon-regler { position: relative; padding-top: 30px; margin-top: 4px; }
  .skon-blase {
    position: absolute; top: 0; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap; pointer-events: none;
    background: var(--status-good); color: var(--auf-brand); box-shadow: var(--shadow);
  }
  .skon-blase::after {
    content: ""; position: absolute; left: 50%; bottom: -3px; width: 8px; height: 8px; margin-left: -4px;
    transform: rotate(45deg); background: inherit; border-radius: 1px;
  }
  .skon-blase.aus { background: var(--series-tennis); color: var(--auf-gold); }
  .skon-regler .skon-tension-wahl { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
  .skon-tension-wahl::-webkit-slider-runnable-track {
    height: 10px; border-radius: 999px;
    background: linear-gradient(to right,
      color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) 0, color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) var(--von),
      color-mix(in srgb, var(--status-good) 55%, var(--surface-3)) var(--von), color-mix(in srgb, var(--status-good) 55%, var(--surface-3)) var(--bis),
      color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) var(--bis), color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) 100%);
  }
  .skon-tension-wahl::-moz-range-track {
    height: 10px; border-radius: 999px;
    background: linear-gradient(to right,
      color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) 0, color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) var(--von),
      color-mix(in srgb, var(--status-good) 55%, var(--surface-3)) var(--von), color-mix(in srgb, var(--status-good) 55%, var(--surface-3)) var(--bis),
      color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) var(--bis), color-mix(in srgb, var(--series-tennis) 32%, var(--surface-3)) 100%);
  }
  .skon-tension-wahl::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: -6px;
    border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.25);
  }
  .skon-tension-wahl::-moz-range-thumb {
    box-sizing: content-box; width: 16px; height: 16px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.25);
  }

  /* Saitenwahl: Material-Chips und Farbpunkte */
  .cs-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-muted); }
  .cs-punkt.mat-polyester { background: var(--mat-poly); }
  .cs-punkt.mat-multifilament { background: var(--mat-multi); }
  .cs-punkt.mat-syntheticgut { background: var(--mat-synth); }
  .cs-punkt.mat-naturalgut { background: var(--mat-darm); }
  .cselect-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .cselect-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: transparent; font: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--ink-secondary); cursor: pointer;
  }
  .cselect-chip:hover { background: var(--surface-2); }
  .cselect-chip.an { background: color-mix(in srgb, var(--status-good) 14%, var(--surface)); border-color: var(--status-good); color: var(--status-good); }
  .cselect-option { display: flex; align-items: center; gap: 8px; }
  .cselect-option .cs-name { flex: 1; min-width: 0; }
  .cs-lager { flex: none; color: var(--status-good); font-size: 11px; }

  /* Ergebnisleiste am Handy: bleibt beim Drehen an den Reglern sichtbar */
  .skon-leiste { display: none; }
  @media (max-width: 820px) {
    .skon-leiste {
      display: flex; justify-content: space-around; align-items: center; gap: 8px;
      position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 55;
      padding: 8px 12px; border-radius: 16px; border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 95%, transparent);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--schatten-2);
    }
    .sl-teil { display: flex; flex-direction: column; align-items: center; min-width: 0; }
    .sl-teil b { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 21px; line-height: 1.1; }
    .sl-teil small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
    .sl-teil b.sl-risiko { font-family: var(--font-body); font-weight: 700; font-size: 14px; padding-top: 4px; }
    .sl-risiko.niedrig { color: var(--status-good); }
    .sl-risiko.mittel { color: var(--series-tennis); }
    .sl-risiko.hoch { color: var(--status-critical); }
    .skon-seite { padding-bottom: 84px; }
  }

  /* ==================================================================
     KONFIGURATOR: Vergleich klar beschriftet (A/B), Vorschlaege, "So wird gerechnet"
     ================================================================== */
  /* A und B: zwei Farben, zwei Buchstaben - ueberall dieselben. A = aktuelles Setup (Gruen),
     B = Vergleichs-Setup (Ascherot). */
  .skon-buchstabe {
    display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
    font-family: var(--font-body); font-size: 11px; font-weight: 800; font-style: normal; line-height: 1;
    color: var(--surface); letter-spacing: 0;
  }
  .skon-buchstabe.a { background: var(--status-good); }
  .skon-buchstabe.b { background: var(--series-tennis); }

  /* Banner oben, solange verglichen wird */
  .skon-band.vergleicht { box-shadow: var(--shadow), 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
  .skon-vgl-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; margin-bottom: var(--raum-4);
    border-radius: 16px; border: 1px solid var(--border-strong);
    background: linear-gradient(100deg, color-mix(in srgb, var(--status-good) 14%, var(--surface)) 0%, var(--surface) 50%, color-mix(in srgb, var(--series-tennis) 14%, var(--surface)) 100%);
  }
  .skon-vgl-modus {
    padding: 4px 11px; border-radius: 999px; background: var(--ink); color: var(--surface);
    font-size: var(--t-mini); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  }
  .skon-vgl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; min-width: 0; max-width: 100%; background: var(--surface); }
  .skon-vgl-pill.a { border: 2px solid var(--status-good); }
  .skon-vgl-pill.b { border: 2px solid var(--series-tennis); }
  .skon-vgl-pill-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
  .skon-vgl-pill-text small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .skon-vgl-vs { font-size: 20px; color: var(--ink-muted); }
  .skon-vgl-banner-aktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
  .skon-bearbeite {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--status-good) 12%, var(--surface)); color: var(--status-good);
    font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0;
  }

  /* Vergleichs-Karte: Kopf und Tabelle */
  .skon-vgl-titel { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
  .skon-vgl-seite .skon-vgl-tag { display: inline-flex; align-items: center; gap: 8px; }
  .skon-vgl-seite .skon-vgl-tag b.skon-buchstabe { font-family: var(--font-body); font-size: 11px; font-weight: 800; }
  .skon-vgl-b-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .skon-vgl-kopfzeile { align-items: end; }
  .skon-vgl-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
  .skon-vgl-legende > span { display: inline-flex; align-items: center; gap: 6px; }
  .skon-vgl-delta-kopf { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-muted); white-space: nowrap; }
  .skon-vgl-balken { position: static; display: flex; align-items: center; gap: 7px; height: auto; background: none; border-radius: 0; }
  .skon-vgl-spur { position: relative; flex: 1; min-width: 0; height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .skon-vgl-balken i { display: block; height: 100%; border-radius: 999px; }
  .skon-vgl-balken em { position: static; transform: none; width: 34px; flex: none; text-align: right; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-secondary); }
  .skon-vgl-legendenzeile { margin: var(--raum-3) 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }

  /* Ergebnisleiste am Handy im Vergleich */
  .sl-teil small { display: inline-flex; align-items: center; gap: 4px; }
  .sl-teil small .skon-buchstabe { width: 15px; height: 15px; font-size: 9px; }
  .sl-teil b.sl-delta.auf { color: var(--status-good); }
  .sl-teil b.sl-delta.ab { color: var(--series-tennis); }

  /* Vorschlaege */
  .skon-vor-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: var(--raum-2); }
  .skon-vor-ziel { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--ink-secondary); line-height: 1.5; }
  .skon-vor-filter { display: flex; flex-wrap: wrap; gap: 8px; }
  .skon-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: transparent; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--ink-secondary); cursor: pointer;
  }
  .skon-chip:hover { background: var(--surface-2); }
  .skon-chip.an { background: color-mix(in srgb, var(--status-good) 14%, var(--surface)); border-color: var(--status-good); color: var(--status-good); }
  .skon-vor-titel { margin: var(--raum-4) 0 var(--raum-2); font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 16px; }
  .skon-vor-zeile {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
    padding: 10px 12px; margin-bottom: 8px; border-radius: 14px;
    background: color-mix(in srgb, var(--status-good) 6%, var(--surface));
  }
  .skon-vor-zeile.fein { background: color-mix(in srgb, var(--series-tennis) 8%, var(--surface)); }
  .skon-vor-rang {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--status-good-wash); color: var(--status-good); font-weight: 700; font-size: 12px;
  }
  .skon-vor-zeile.fein .skon-vor-rang { background: color-mix(in srgb, var(--series-tennis) 16%, var(--surface)); color: var(--series-tennis); }
  .skon-vor-info b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
  .skon-vor-info small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-secondary); line-height: 1.4; }
  .skon-vor-match { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
  .skon-vor-match b { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 20px; line-height: 1.1; }
  .skon-vor-match small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
  .skon-vor-match.plus b { color: var(--status-good); }
  .skon-vor-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  @media (max-width: 700px) {
    .skon-vor-zeile { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .skon-vor-aktionen { grid-column: 2 / -1; justify-content: flex-start; }
  }
  .skon-vor-leer { margin: 4px 0; font-size: 12.5px; color: var(--ink-muted); }
  .skon-vor-fuss { margin: var(--raum-4) 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
  .skon-lager-punkt { color: var(--status-good); font-weight: 700; }

  /* "So wird gerechnet" */
  .skon-rechnung { margin-top: var(--raum-6); padding: 0; border-radius: 18px; overflow: hidden; }
  .skon-rechnung > summary { position: relative; list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: var(--raum-4) 56px var(--raum-4) var(--raum-5); }
  .skon-rechnung > summary::-webkit-details-marker { display: none; }
  .skon-rechnung > summary::after { content: "▾"; position: absolute; right: 22px; top: 50%; margin-top: -10px; color: var(--series-badminton); transition: transform .2s ease; }
  .skon-rechnung[open] > summary::after { transform: rotate(180deg); }
  .skon-rechnung-titel { display: flex; align-items: center; gap: 10px; font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 18px; }
  .skon-rechnung-titel .skon-ico {
    width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 9px;
    background: color-mix(in srgb, var(--series-badminton) 13%, var(--surface)); color: var(--series-badminton);
  }
  .skon-rechnung-unter { padding-left: 40px; font-size: 12.5px; color: var(--ink-secondary); }
  .skon-rechnung-inhalt { padding: var(--raum-4) var(--raum-5) var(--raum-5); border-top: 1px solid var(--border); }
  .skon-rechnung p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink-secondary); }
  .skon-rechnung-schritte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--raum-4) var(--raum-6); margin-top: var(--raum-4); }
  @media (max-width: 900px) { .skon-rechnung-schritte { grid-template-columns: minmax(0, 1fr); } }
  .skon-rechnung h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
  .skon-rechnung h4 b {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--status-good-wash); color: var(--status-good); font-size: 12px;
  }
  .skon-rechnung-tab { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: 12.5px; }
  .skon-rechnung-tab th { padding: 4px 8px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--border); background: transparent; }
  .skon-rechnung-tab td { padding: 4px 8px; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); background: transparent; }
  .skon-rechnung-liste { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-secondary); }
  .skon-rechnung-liste li { margin-bottom: 4px; }
  .skon-rechnung-liste a { color: var(--series-badminton); }
  .skon-rechnung-klein { font-size: 12px !important; }
  .skon-rw { margin-top: var(--raum-5); padding-top: var(--raum-4); border-top: 1px dashed var(--border-strong); }
  .skon-rw-zeile { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
  .skon-rw-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
  .skon-rw-name .skon-ico { width: 16px; height: 16px; flex: none; }
  .skon-rw-name b { margin-left: auto; font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 18px; }
  .skon-rw-teile { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; color: var(--ink-secondary); }
  .skon-rw-seite, .skon-rw-mix, .skon-rw-regel { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); }
  .skon-rw-seite.laengs { background: color-mix(in srgb, var(--series-badminton) 10%, var(--surface)); }
  .skon-rw-seite.quer { background: color-mix(in srgb, var(--series-tennis) 10%, var(--surface)); }
  .skon-rw-regel { background: color-mix(in srgb, var(--series-tennis) 8%, var(--surface)); }
  .skon-rw em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
  .skon-rw i { font-style: normal; color: var(--ink-muted); }
  .skon-rechnung-grenzen { margin-top: var(--raum-5); padding-top: var(--raum-4); border-top: 1px dashed var(--border-strong); }

  /* Schlaeger: was fliesst in die Rechnung ein */
  .skon-racket-wirkung { margin-top: var(--raum-3); padding: var(--raum-3); border-radius: 14px; background: color-mix(in srgb, var(--series-badminton) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--series-badminton) 14%, var(--border)); }
  .skon-racket-wirkung-titel { margin-bottom: 6px; font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--series-badminton); }
  .skon-racket-wirkung-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 4px 0; font-size: 12.5px; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
  .skon-racket-wirkung-zeile:first-of-type { border-top: 0; }
  .skon-rww-wert { color: var(--ink); }
  .skon-rww-wert b { font-weight: 700; }
  .skon-rww-eff { color: var(--ink-secondary); }
  .skon-racket-fehlt { margin: 6px 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
  .skon-spec-liste { grid-template-columns: 1fr 1fr 1fr; }
  .skon-rechnung-tab-breit td, .skon-rechnung-tab-breit th { vertical-align: top; }

  /* Setup optimieren: Ziel, Abstand, drei Stufen */
  .skon-opt-intro { margin: 0 0 var(--raum-4); font-size: 13px; line-height: 1.55; color: var(--ink-secondary); }
  .skon-opt-block { padding: var(--raum-4) 0; border-top: 1px solid var(--border); }
  .skon-opt-intro + .skon-opt-block { border-top: 0; padding-top: 0; }
  .skon-opt-block > h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--raum-3); font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 17px; }
  .skon-opt-block > h4 b {
    width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); font-size: 13px;
  }
  .skon-ziel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .skon-ziel-chip {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-secondary);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .skon-ziel-chip b { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 16px; color: var(--ink-muted); }
  .skon-ziel-chip:hover { background: var(--surface-2); }
  .skon-ziel-chip.an { border-color: var(--series-tennis); background: color-mix(in srgb, var(--series-tennis) 12%, var(--surface)); color: var(--ink); }
  .skon-ziel-chip.an b { color: var(--series-tennis); }
  .skon-opt-hinweis { margin: var(--raum-2) 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
  .skon-opt-stand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: var(--raum-3); font-size: 13px; color: var(--ink-secondary); }
  .skon-opt-stand b { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 28px; color: var(--ink); line-height: 1; }
  .skon-opt-stand small { flex: 1 1 100%; font-size: 12px; color: var(--ink-muted); }
  .skon-ziel-raster .skon-wert-zeile { grid-template-columns: 138px minmax(0, 1fr) 84px; }
  .skon-ziel-marke { background: var(--ink); }
  .skon-opt-hebel { margin-top: var(--raum-3); padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--series-tennis) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--series-tennis) 16%, var(--border)); }
  .skon-opt-hebel-titel { font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--series-tennis); margin-bottom: 4px; }
  .skon-opt-hebel ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-secondary); }
  .skon-opt-filter { margin-bottom: var(--raum-3); }
  .skon-opt-stufe { margin-bottom: var(--raum-4); }
  .skon-opt-stufe:last-of-type { margin-bottom: 0; }
  .skon-opt-stufe-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
  .skon-opt-stufe-nr { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--status-good-wash); color: var(--status-good); font-size: 12px; font-weight: 700; }
  .skon-opt-stufe-titel { font-size: 14px; font-weight: 700; }
  .skon-opt-stufe-beschr { margin: 0 0 var(--raum-2) 32px; font-size: 12.5px; color: var(--ink-secondary); line-height: 1.5; }
  .skon-opt-unter { margin: var(--raum-3) 0 var(--raum-2) 32px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
  .skon-opt-stufe .skon-vor-leer { margin-left: 32px; }
  .skon-opt-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
    padding: 10px 12px; margin: 0 0 8px 32px; border-radius: 14px;
    background: color-mix(in srgb, var(--status-good) 6%, var(--surface));
  }
  .skon-opt-aend ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
  .skon-opt-aend small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-secondary); line-height: 1.4; }
  .skon-opt-stufe .skon-vor-zeile { margin-left: 32px; }
  @media (max-width: 700px) {
    .skon-opt-stufe-beschr, .skon-opt-unter, .skon-opt-stufe .skon-vor-leer { margin-left: 0; }
    .skon-opt-zeile, .skon-opt-stufe .skon-vor-zeile { margin-left: 0; }
    .skon-opt-zeile { grid-template-columns: minmax(0, 1fr) auto; }
    .skon-opt-zeile .skon-vor-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
    .skon-ziel-raster .skon-wert-zeile { grid-template-columns: 112px minmax(0, 1fr) 72px; }
  }

  /* ==================================================================
     KONFIGURATOR ordnen: kompaktes Band, Sprungleiste, deutlichere Abschnittskoepfe
     ================================================================== */
  .skon-band { padding: var(--raum-4) var(--raum-5); margin-bottom: var(--raum-4); }
  .skon-band-kopf { align-items: flex-end; }
  .skon-band-name { font-size: 22px; }
  .skon-band-detail { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
  .skon-setups { margin-top: 12px; padding-top: 12px; }
  .skon-setups-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
  .skon-setups-titel { margin: 0; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .skon-setups-titel em { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-secondary); font-style: normal; letter-spacing: 0; }
  .skon-setups-hinweis { margin: 0; font-size: 12px; color: var(--ink-muted); }
  .skon-setup-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
  .skon-setup-chip { display: flex; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
  .skon-setup-chip.vergleich { border-color: var(--series-tennis); background: color-mix(in srgb, var(--series-tennis) 8%, var(--surface)); }
  .skon-setup-laden {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
    border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer;
  }
  .skon-setup-laden b { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skon-setup-laden small { font-size: 11px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skon-setup-laden:hover { background: var(--surface-2); }
  .skon-setup-icon { flex: none; width: 34px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--ink-muted); font: inherit; font-size: 14px; cursor: pointer; }
  .skon-setup-icon:hover { background: color-mix(in srgb, var(--status-good) 12%, var(--surface)); color: var(--status-good); }
  .skon-setup-icon.an { background: color-mix(in srgb, var(--series-tennis) 16%, var(--surface)); color: var(--series-tennis); }
  .skon-setup-icon.gefahr:hover { background: var(--status-critical-wash); color: var(--status-critical); }
  .skon-setup-neu {
    min-height: 44px; padding: 7px 10px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: transparent;
    color: var(--series-badminton); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  }
  .skon-setup-neu:hover { background: color-mix(in srgb, var(--series-badminton) 8%, var(--surface)); border-color: var(--series-badminton); }

  .skon-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--raum-5); }
  .skon-nav-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-secondary);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .skon-nav-chip:hover { background: var(--surface-2); color: var(--ink); }
  .skon-nav-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }
  .skon-nav-chip i.nav-konf { background: var(--series-badminton); }
  .skon-nav-chip i.nav-vgl { background: var(--ink); }
  .skon-nav-chip i.nav-ana { background: var(--series-tennis); }
  .skon-nav-chip i.nav-bew { background: var(--status-good); }
  .skon-nav-chip i.nav-opt { background: var(--brand); }

  /* Abschnittskoepfe: groesser, mit Untertitel - "hier kannst du etwas tun" */
  .skon-zone { scroll-margin-top: 96px; }
  .skon-zone-label { gap: 14px; margin-bottom: var(--raum-4); align-items: center; }
  .skon-zone-label .skon-zone-nr { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .skon-zone-titel { display: flex; flex-direction: column; min-width: 0; }
  .skon-zone-label .skon-zone-txt { font-size: 25px; line-height: 1.15; }
  .skon-zone-sub { margin-top: 2px; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--ink-secondary); }
  .skon-zone-vorschlag .skon-zone-label .skon-zone-nr { background: var(--brand); color: var(--auf-brand); }
  .skon-zone-label.kollabierbar { cursor: pointer; user-select: none; }
  .skon-zone-label.kollabierbar:hover .skon-zone-txt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
  .skon-zone-chev { flex: none; margin-left: 4px; font-size: 16px; color: var(--ink-muted); transition: transform .2s ease; }
  .skon-zone.zu .skon-zone-chev { transform: rotate(-90deg); }
  .skon-zone.zu > :not(.skon-zone-label):not(.skon-kopf) { display: none; }
  .skon-zone.zu .skon-zone-label { margin-bottom: 0; }
  @media (max-width: 700px) {
    .skon-zone-label .skon-zone-txt { font-size: 21px; }
    .skon-zone-label .skon-zone-nr { width: 32px; height: 32px; font-size: 16px; }
    .skon-setup-chips { grid-template-columns: minmax(0, 1fr); }
  }

  /* ==================================================================
     KONFIGURATOR im Design der Verwaltung
     Weisse Karten mit 18px-Rundung, Icon-Chips in Ueberschriften und Kennzahlen, Tickets mit Streifen
     links, ruhige Flaechen (--surface-2) statt bunter Verlaeufe. Farbe nur dort, wo sie etwas sagt:
     Gruen = A / Laengs / gut, Ascherot = B / Quer / Abweichung.
     ================================================================== */
  /* Abschnittskoepfe = .section-head der Verwaltung */
  .skon-kopf { margin-bottom: var(--raum-4); align-items: center; }
  .skon-kopf h2 { flex: 0 1 auto; }
  .skon-kopf .hint { flex: 1 1 200px; min-width: 0; }
  .skon-kopf-rechts { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
  .skon-kopf.kollabierbar { cursor: pointer; user-select: none; }
  .skon-kopf.kollabierbar:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
  .skon-zone.zu > :not(.skon-kopf) { display: none; }
  .skon-zone.zu .skon-kopf { margin-bottom: 0; }
  .skon-zone-analyse .skon-kopf .kpi-ico { background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); }
  .skon-zone-bewertung .skon-kopf .kpi-ico { background: var(--status-good-wash); color: var(--status-good); }
  .skon-zone-vergleich .skon-kopf .kpi-ico { background: var(--ink); color: var(--surface); }
  .skon-zone-vorschlag .skon-kopf .kpi-ico { background: var(--brand); color: var(--auf-brand); }
  .skon-zone-konf .skon-kopf .kpi-ico, #skonKonfig .skon-kopf .kpi-ico { background: color-mix(in srgb, var(--series-badminton) 14%, var(--surface)); color: var(--series-badminton); }

  /* Aktuelles Setup: wie eine Kennzahl-Karte */
  .skon-aktuell { padding: var(--raum-4) var(--raum-5); margin-bottom: var(--raum-5); }
  .skon-aktuell.vergleicht { box-shadow: inset 5px 0 0 var(--status-good), var(--shadow), var(--glanz); }
  .skon-aktuell .kpi-kopf { margin-bottom: 6px; }
  .skon-aktuell-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--raum-3) var(--raum-4); }
  .skon-aktuell-text { min-width: 0; flex: 1 1 260px; }
  .skon-aktuell-name { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: var(--titel-spacing); overflow-wrap: anywhere; }
  .skon-aktuell .sub { margin-top: 4px; }
  /* Gemerkte Setups: Tickets wie "In Arbeit" */
  .skon-setups { margin-bottom: var(--raum-5); }
  .skon-anzahl { margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-secondary); font-family: var(--font-body); font-size: 12px; font-style: normal; font-weight: 600; }
  .skon-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--raum-2); }
  .skon-ticket .arbeit-ticket-nr { width: 40px; }
  .skon-ticket-inhalt { min-height: 64px; padding: var(--raum-2) var(--raum-3); }
  .skon-ticket-fuss { gap: 6px; }
  .skon-ticket-fuss .btn-mini { padding: 5px 11px; }
  .skon-ticket-fuss .btn-mini.gefahr { color: var(--status-critical); border-color: var(--status-critical); }
  .skon-ticket-fuss .btn-mini.gefahr:hover { background: var(--status-critical-wash); }
  .skon-ticket-fuss .btn-mini.gold { border-color: var(--series-tennis); color: var(--series-tennis); background: color-mix(in srgb, var(--series-tennis) 12%, var(--surface)); }
  .arbeit-ticket.skon-ticket.st-vgl { box-shadow: inset 5px 0 0 var(--series-tennis), var(--shadow), var(--glanz); }
  .arbeit-ticket.skon-ticket.st-vgl:hover { box-shadow: inset 5px 0 0 var(--series-tennis), var(--schatten-2), var(--glanz); }
  .skon-ticket.st-vgl .arbeit-ticket-nr { background: color-mix(in srgb, var(--series-tennis) 15%, var(--surface)); color: var(--series-tennis); }
  .skon-ticket-neu {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: var(--raum-2) var(--raum-3);
    border: 1.5px dashed var(--border-strong); border-radius: 18px; background: transparent; color: var(--brand); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .skon-ticket-neu b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-wash); font-size: 16px; }
  .skon-ticket-neu:hover { background: var(--brand-wash); border-color: var(--brand); }
  @media (max-width: 560px) { .skon-tickets { grid-template-columns: minmax(0, 1fr); } }
  /* Vergleichs-Banner ruhiger */
  .skon-vgl-banner { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow), var(--glanz); }

  /* Ruhige Flaechen statt bunter Verlaeufe und Toenungen */
  .skon-kurzfazit { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: inset 5px 0 0 var(--status-good), var(--shadow), var(--glanz); }
  .skon-analyse-karte { border-color: var(--border); box-shadow: var(--shadow), var(--glanz); }
  .skon-analyse-karte:hover { box-shadow: var(--schatten-2), var(--glanz); }
  .skon-analyse-schein { display: none; }
  .skon-dna, .skon-spec-relevant, .skon-racket-wirkung, .skon-symbol-legende { background: var(--surface-2); border: 0; }
  .skon-opt-hebel { background: var(--surface-2); border: 0; box-shadow: inset 4px 0 0 var(--series-tennis); }
  .skon-vgl-seite { border: 0; background: var(--surface-2); }
  .skon-vgl-seite.a { box-shadow: inset 5px 0 0 var(--status-good); }
  .skon-vgl-seite.b { box-shadow: inset 5px 0 0 var(--series-tennis); }
  .skon-seite-spalte { border: 0; background: var(--surface-2); }
  .skon-seite-spalte.laengs { box-shadow: inset 5px 0 0 var(--series-badminton); }
  .skon-seite-spalte.quer { box-shadow: inset 5px 0 0 var(--series-tennis); }
  .skon-vor-zeile, .skon-opt-zeile { background: var(--surface-2); }
  .skon-vor-zeile.fein { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--series-tennis); }
  .skon-rw-seite, .skon-rw-mix, .skon-rw-regel { background: var(--surface-2); }
  .skon-nav-chip { background: var(--surface); }

  /* ==================================================================
     Gemerkte Setups als Mappen, Aktionen unter der Konfiguration
     ================================================================== */
  .skon-mappen { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--raum-3); }
  .skon-mappe {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow), var(--glanz);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .skon-mappe:hover { border-color: var(--brand); box-shadow: var(--schatten-2), var(--glanz); }
  .skon-mappe.vgl { box-shadow: inset 5px 0 0 var(--series-tennis), var(--shadow), var(--glanz); }
  .skon-mappe.vgl:hover { box-shadow: inset 5px 0 0 var(--series-tennis), var(--schatten-2), var(--glanz); }
  .skon-mappe-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .skon-mappe-nr {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
    background: var(--brand-wash); color: var(--brand); font-family: var(--font-titel); font-size: 14px;
  }
  .skon-mappe.vgl .skon-mappe-nr { background: var(--series-tennis); color: var(--surface); font-family: var(--font-body); font-weight: 800; }
  .skon-mappe-titel { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skon-mappe-match { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-secondary); font-size: 12px; font-weight: 700; }
  .skon-mappe-match.hoch { background: var(--status-good-wash); color: var(--status-good); }
  .skon-mappe-match.tief { background: color-mix(in srgb, var(--series-tennis) 14%, var(--surface)); color: var(--series-tennis); }
  .skon-mappe-saiten { display: flex; flex-direction: column; gap: 3px; }
  .skon-mappe-saite { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink); }
  .skon-mappe-saite span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lq { flex: none; width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--ink-secondary); font-family: var(--font-body); font-size: 10.5px; font-weight: 800; font-style: normal; }
  .lq.l { background: color-mix(in srgb, var(--series-badminton) 16%, var(--surface)); color: var(--series-badminton); }
  .lq.q { background: color-mix(in srgb, var(--series-tennis) 16%, var(--surface)); color: var(--series-tennis); }
  .skon-mappe-kurz { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
  .skon-mappe-fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
  .skon-profil { flex: none; display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
  .skon-profil i { display: block; width: 6px; border-radius: 2px 2px 0 0; background: var(--ink-muted); opacity: .55; }
  .skon-profil i.hoch { background: var(--status-good); opacity: 1; }
  .skon-profil i.tief { background: var(--series-tennis); opacity: 1; }
  .skon-mappe-knoepfe { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
  .skon-mappe-knoepfe .btn-mini { padding: 4px 10px; font-size: 12px; }
  .skon-mappe-knoepfe .btn-mini.gefahr { color: var(--status-critical); border-color: var(--status-critical); }
  .skon-mappe-knoepfe .btn-mini.gefahr:hover { background: var(--status-critical-wash); }
  .skon-mappe-knoepfe .btn-mini.gold { border-color: var(--series-tennis); color: var(--series-tennis); background: color-mix(in srgb, var(--series-tennis) 12%, var(--surface)); }
  .skon-mappe-neu {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 130px; padding: 14px;
    border: 1.5px dashed var(--border-strong); border-radius: 18px; background: transparent; color: var(--brand); font: inherit; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .skon-mappe-neu b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-wash); font-size: 18px; }
  .skon-mappe-neu span { font-size: 14px; font-weight: 600; }
  .skon-mappe-neu small { font-size: 12px; color: var(--ink-muted); text-align: center; }
  .skon-mappe-neu:hover { background: var(--brand-wash); border-color: var(--brand); }
  @media (max-width: 560px) { .skon-mappen { grid-template-columns: minmax(0, 1fr); } .skon-mappe-neu { min-height: 90px; } }

  .skon-konf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--raum-4); padding-top: var(--raum-3); border-top: 1px solid var(--border); }
  .skon-konf-aktionen .skon-neu { margin-left: auto; }
  @media (max-width: 560px) { .skon-konf-aktionen .btn { flex: 1 1 100%; } .skon-konf-aktionen .skon-neu { margin-left: 0; } }

  /* ==================================================================
     Gemerkte Setups: schlanke Zeilen in einer Karte
     ================================================================== */
  .skon-liste { padding: 0; overflow: hidden; }
  .skon-zs {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 4px 14px;
    padding: 8px 14px; border-top: 1px solid var(--border); transition: background .15s ease;
  }
  .skon-zs:first-child { border-top: 0; }
  .skon-zs:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
  .skon-zs.vgl { box-shadow: inset 5px 0 0 var(--gold); background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
  .skon-zs .skon-mappe-nr { width: 26px; height: 26px; }
  .skon-zs.vgl .skon-mappe-nr { background: var(--gold); color: var(--auf-gold); font-family: var(--font-body); font-weight: 800; }
  .skon-zs-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .skon-zs-titel { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skon-zs-saiten { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-secondary); }
  .skon-zs-saiten .lq { margin: 0 5px 0 0; vertical-align: -3px; }
  .skon-zs-saiten .lq.q { margin-left: 8px; }
  .skon-zs-kurz { font-size: 12px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
  .skon-zs .skon-profil { height: 22px; }
  .skon-zs-knoepfe { display: inline-flex; gap: 5px; }
  .skon-zs-knoepfe .btn-mini { padding: 4px 10px; font-size: 12px; }
  .skon-zs-knoepfe .btn-mini.gefahr { color: var(--status-critical); border-color: var(--status-critical); }
  .skon-zs-knoepfe .btn-mini.gefahr:hover { background: var(--status-critical-wash); }
  .skon-zs-knoepfe .btn-mini.gold { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
  .skon-zs-neu {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px;
    border: 0; border-top: 1px dashed var(--border-strong); background: transparent; color: var(--brand); font: inherit; cursor: pointer;
    transition: background .15s ease;
  }
  .skon-liste > .skon-zs-neu:first-child { border-top: 0; }
  .skon-zs-neu b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-wash); font-size: 16px; }
  .skon-zs-neu span { font-size: 13.5px; font-weight: 600; }
  .skon-zs-neu small { font-size: 12px; color: var(--ink-muted); }
  .skon-zs-neu:hover { background: var(--brand-wash); }
  @media (max-width: 1000px) { .skon-zs-kurz { display: none; } .skon-zs { grid-template-columns: 28px minmax(0, 1fr) auto auto auto; } }
  @media (max-width: 700px) {
    .skon-zs { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 10px 12px; }
    .skon-zs .skon-profil { grid-column: 2; grid-row: 2; justify-self: start; }
    .skon-zs .skon-zs-knoepfe { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
    .skon-zs-neu small { display: none; }
  }

  /* ==================================================================
     Farben des Designs Papier: dunkles Gruen (Marke) und Clay, Flaechen in warmem Beige
     ================================================================== */
  /* Chips und Ueberschriften-Zeichen: Beige mit dunkelgruenem Zeichen, wie in der Verwaltung */
  #skonKonfig .skon-kopf .kpi-ico, .skon-kopf-ico .skon-ico, .skon-rechnung-titel .skon-ico { background: var(--brand-wash); color: var(--brand); }
  #skonErgebnis > .skon-zone-analyse .skon-kopf-ico .skon-ico, .skon-zone-analyse .skon-kopf .kpi-ico { background: var(--gold-wash); color: var(--gold); }
  #skonErgebnis > .skon-zone-bewertung .skon-kopf-ico .skon-ico { background: var(--status-good-wash); color: var(--status-good); }
  .skon-rechnung > summary::after, .skon-rechnung-liste a { color: var(--brand); }
  .skon-dna-kopf, .skon-spec-relevant .skon-spec-label, .skon-legende-titel, .skon-racket-wirkung-titel,
  .skon-seite-spalte.laengs .skon-seite-rolle { color: var(--brand); }
  .cselect-option:hover, .cselect-option.an { background: var(--brand-wash); color: var(--brand); }
  .cselect-chip.an, .skon-chip.an { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
  .skon-mini:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
  .skon-mini.an, .skon-vgl-chip.ab, .skon-bereich.aus, .skon-risiko-pille.mittel { background: var(--gold-wash); color: var(--gold); }
  .skon-mini.an { border-color: var(--gold); }
  .skon-opt-block > h4 b { background: var(--gold-wash); color: var(--gold); }
  .skon-ziel-chip.an { background: var(--gold-wash); border-color: var(--gold); }
  .skon-ziel-chip.an b { color: var(--gold); }
  .skon-seite-spalte.laengs { box-shadow: inset 5px 0 0 var(--brand); }
  .skon-seite-spalte.quer { box-shadow: inset 5px 0 0 var(--gold); }
  .lq.l { background: var(--brand-wash); color: var(--brand); }
  .lq.q { background: var(--gold-wash); color: var(--gold); }
  .skon-nav-chip i.nav-konf { background: var(--brand); }
  .skon-nav-chip i.nav-ana { background: var(--gold); }
  /* A = dunkles Marken-Gruen, B = Clay */
  .skon-buchstabe.a { background: var(--brand); color: var(--auf-brand); }
  .skon-buchstabe.b { background: var(--gold); color: var(--auf-gold); }
  .skon-vgl-pill.a { border-color: var(--brand); }
  .skon-vgl-pill.b { border-color: var(--gold); }
  .skon-vgl-seite.a { box-shadow: inset 5px 0 0 var(--brand); }
  .skon-vgl-seite.b { box-shadow: inset 5px 0 0 var(--gold); }
  .skon-vgl-seite.a .skon-vgl-tag { color: var(--brand); }
  .skon-vgl-seite.b .skon-vgl-tag { color: var(--gold); }
  .skon-vgl-balken.a i { background: var(--brand); }
  .skon-vgl-balken.b i { background: var(--gold); }
  .skon-aktuell.vergleicht { box-shadow: inset 5px 0 0 var(--brand), var(--shadow), var(--glanz); }
  /* Zeichen der Bespannung: Kurzfazit und Karten mit dem Streifen der Marke */
  .skon-kurzfazit { box-shadow: inset 5px 0 0 var(--brand), var(--shadow), var(--glanz); }
  .skon-kurzfazit .skon-ico { background: var(--brand-wash); color: var(--brand); }

  /* ==================================================================
     Handy und Tablet im Design Papier: weniger grau-beiger Rand
     Der getoente Grund (--ton, mit 4,5 % Tinte abgedunkelt) liess die weissen Karten auf einer
     grossen grau-beigen Flaeche stehen. Am Handy gibt es kein schwebendes Blatt - dort zaehlt jeder
     Millimeter Rand doppelt. Deshalb: der Grund wird die helle, warme Arbeitsflaeche (--bg) mit
     nur einem Hauch Clay unten, und der seitliche Rand schrumpft auf 10 px.
     ================================================================== */
  @media (max-width: 820px) {
    :root:not([data-design]) .shell, :root[data-design="papier"] .shell {
      background:
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%),
        var(--bg);
    }
  }
  @media (max-width: 560px) {
    :root:not([data-design]) .content, :root[data-design="papier"] .content {
      padding-left: 10px; padding-right: 10px; padding-top: 12px;
    }
    :root:not([data-design]) .section, :root[data-design="papier"] .section { margin-bottom: 24px; }
  }


  /* ==================================================================
     HANDY (Design Papier): Papierstruktur, niedrigeres Kopfbild, Abschnitte statt Karten,
     Bereichston im Grund. Jede der vier Ideen ist ein eigener Block und laesst sich einzeln entfernen.
     ================================================================== */
  /* (2) Grund mit kaum sichtbarer Papierstruktur + (5) Hauch der Bereichsfarbe von oben */
  @media (max-width: 820px) {
    :root:not([data-design]) body.bereich-ueberblick .shell, :root[data-design="papier"] body.bereich-ueberblick .shell {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 260px),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%),
        var(--bg);
    }
    :root:not([data-design]) body.bereich-bespannen .shell, :root[data-design="papier"] body.bereich-bespannen .shell {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 260px),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%),
        var(--bg);
    }
    :root:not([data-design]) body.bereich-badminton .shell, :root[data-design="papier"] body.bereich-badminton .shell {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--series-badminton) 6%, transparent), transparent 260px),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%),
        var(--bg);
    }
    :root:not([data-design]) body.bereich-tennis .shell, :root[data-design="papier"] body.bereich-tennis .shell {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--series-tennis) 6%, transparent), transparent 260px),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%),
        var(--bg);
    }
    :root:not([data-design]) body.bereich-platz .shell, :root[data-design="papier"] body.bereich-platz .shell {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 260px),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%),
        var(--bg);
    }
    :root:not([data-design]) body.bereich-finanzen .shell, :root[data-design="papier"] body.bereich-finanzen .shell {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--status-good) 6%, transparent), transparent 260px),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%),
        var(--bg);
    }
    :root:not([data-design]) body.bereich-wissen .shell, :root[data-design="papier"] body.bereich-wissen .shell {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--wissen, var(--brand)) 6%, transparent), transparent 260px),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%),
        var(--bg);
    }
  }
  /* (3) Kopfbild am Handy: scharf und etwas hoeher statt scharf und dann milchig auslaufend.
     Die Auslauf-Zone unter der Kopfzeile (.foto-band) entfaellt am Handy - dort stand nichts, was sie
     verdecken musste, und der Auslauf in die helle Flaeche wirkte wie ein Milchschleier. Stattdessen
     ist die Kopfzeile in Ruhe hoeher (das Bild ist ein Stueck nach unten gerueckt); beim Scrollen
     schrumpft sie wie immer (body.kopf-eng). */
  @media (max-width: 560px) {
    :root:not([data-design]) .main-glow .foto-band, :root[data-design="papier"] .main-glow .foto-band { display: none; }
    :root:not([data-design]) .topbar, :root[data-design="papier"] .topbar {
      box-sizing: border-box; min-height: 116px; align-items: center;
      padding-top: 12px; padding-bottom: 12px;
      background-position: 0 0, 60% 10px, 0 0;
    }
    :root:not([data-design]) body.kopf-eng .topbar, :root[data-design="papier"] body.kopf-eng .topbar { min-height: 0; }
    /* (4) Abschnitte statt Karten: keine Schatten, keine Rahmen, keine Rundung - nur eine feine Linie
       oben. Kennzahl-Kacheln (.kpi), Tickets und Bespannungskarten (Streifen links) bleiben Karten. */
    :root:not([data-design]) #content .card:not(.skon-aktuell), :root[data-design="papier"] #content .card:not(.skon-aktuell),
    :root:not([data-design]) #content .table-wrap, :root[data-design="papier"] #content .table-wrap {
      background: transparent; box-shadow: none; border-radius: 0;
      border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid var(--border);
    }
  }


  /* ==================================================================
     HANDY (Design Papier): DAS BLATT
     Die ganze Seite ist ein grosses weisses Blatt mit runden oberen Ecken, das unten an das Kopfbild
     anschliesst - kein grauer Grund, keine seitlichen Raender. Karten und Kacheln darauf tragen den
     warmen Papierton (--bg) statt Schatten. Ein einziger Block: entfernt man ihn, gilt wieder der
     Zustand davor.
     ================================================================== */
  @media (max-width: 560px) {
    /* Die Rundung des Blattes sitzt am unteren Rand der Kopfzeile und wandert mit ihr */
    :root:not([data-design]) .topbar, :root[data-design="papier"] .topbar { padding-bottom: 32px; }
    :root:not([data-design]) .topbar::after, :root[data-design="papier"] .topbar::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px;
      background: var(--surface); border-radius: 22px 22px 0 0; pointer-events: none;
    }
    /* Ist die Kopfzeile beim Scrollen schmal, endet sie gerade - dann braucht sie die Rundung nicht */
    :root:not([data-design]) body.kopf-eng .topbar::after, :root[data-design="papier"] body.kopf-eng .topbar::after { display: none; }
    :root:not([data-design]) body.kopf-eng .topbar, :root[data-design="papier"] body.kopf-eng .topbar { padding-bottom: var(--raum-3); }
    :root:not([data-design]) .content, :root[data-design="papier"] .content {
      background: var(--surface); box-shadow: none; border-radius: 0;
      padding-left: 14px; padding-right: 14px;
    }
    /* Karten auf dem Blatt: warmer Papierton, feine Kante (Schatten und Streifen bleiben wie sie sind) */
    :root:not([data-design]) #content .kpi, :root[data-design="papier"] #content .kpi, :root:not([data-design]) #content .saite-karte, :root[data-design="papier"] #content .saite-karte, :root:not([data-design]) #content .arbeit-ticket, :root[data-design="papier"] #content .arbeit-ticket, :root:not([data-design]) #content .ekarte, :root[data-design="papier"] #content .ekarte,
    :root:not([data-design]) #content .hero-text, :root[data-design="papier"] #content .hero-text, :root:not([data-design]) #content .hero-einsichten, :root[data-design="papier"] #content .hero-einsichten, :root:not([data-design]) #content .player-lookup, :root[data-design="papier"] #content .player-lookup,
    :root:not([data-design]) #content .vorrat-gitter .vr:not(.warnung):not(.kritisch), :root[data-design="papier"] #content .vorrat-gitter .vr:not(.warnung):not(.kritisch) {
      background: var(--bg);
    }
  }


  /* ==================================================================
     HANDY (Design Papier): mehr Papier-Farben
     Untere Leiste wie die Seitenleiste am Desktop: dunkles Markengruen mit cremefarbenen Zeichen,
     der aktive Reiter in Clay. Kennzahl-Kacheln tragen oben eine Linie in der Bereichsfarbe.
     ================================================================== */
  @media (max-width: 820px) {
    :root:not([data-design]) .unten-leiste, :root[data-design="papier"] .unten-leiste { background: var(--brand-strong); border-top: 0; box-shadow: 0 -10px 26px -12px rgba(16,48,40,.5); }
    :root:not([data-design]) .ul-knopf, :root[data-design="papier"] .ul-knopf { color: color-mix(in srgb, var(--brand) 16%, #ffffff); }
    :root:not([data-design]) .ul-knopf .ico, :root[data-design="papier"] .ul-knopf .ico { background: rgba(255,255,255,.10); color: color-mix(in srgb, var(--brand) 16%, #ffffff); }
    :root:not([data-design]) .ul-knopf.active, :root[data-design="papier"] .ul-knopf.active { background: rgba(255,255,255,.08); color: #ffffff; }
    :root:not([data-design]) .ul-knopf.active .ico, :root[data-design="papier"] .ul-knopf.active .ico { background: var(--gold); color: var(--auf-gold); }
  }
  @media (max-width: 560px) {
    :root:not([data-design]) body.bereich-ueberblick #content .kpi, :root[data-design="papier"] body.bereich-ueberblick #content .kpi { border-top: 3px solid var(--brand); }
    :root:not([data-design]) body.bereich-bespannen #content .kpi, :root[data-design="papier"] body.bereich-bespannen #content .kpi { border-top: 3px solid var(--brand); }
    :root:not([data-design]) body.bereich-badminton #content .kpi, :root[data-design="papier"] body.bereich-badminton #content .kpi { border-top: 3px solid var(--series-badminton); }
    :root:not([data-design]) body.bereich-tennis #content .kpi, :root[data-design="papier"] body.bereich-tennis #content .kpi { border-top: 3px solid var(--series-tennis); }
    :root:not([data-design]) body.bereich-platz #content .kpi, :root[data-design="papier"] body.bereich-platz #content .kpi { border-top: 3px solid var(--gold); }
    :root:not([data-design]) body.bereich-finanzen #content .kpi, :root[data-design="papier"] body.bereich-finanzen #content .kpi { border-top: 3px solid var(--status-good); }
    :root:not([data-design]) body.bereich-wissen #content .kpi, :root[data-design="papier"] body.bereich-wissen #content .kpi { border-top: 3px solid var(--wissen, var(--brand)); }
  }

  /* Materialfarben im Design Papier: aus der Papier-Palette statt Blau/Lila (andere Gestaltungen behalten ihre) */
  @media (prefers-color-scheme: light) {
    :root:not([data-design]):not([data-theme="dark"]), :root[data-design="papier"]:not([data-theme="dark"]) {
      --mat-poly: #103028;   --mat-poly-wash: #e4e9e4;
      --mat-multi: #2b6448;  --mat-multi-wash: #d9e6dd;
      --mat-darm: #c4693a;   --mat-darm-wash: #f6e6da;
      --mat-synth: #6e7a75;  --mat-synth-wash: #eeeeea;
      --mat-hybrid: #a9761b; --mat-hybrid-wash: #f6e7cc;
    }
  }
  :root:not([data-design])[data-theme="light"], :root[data-design="papier"][data-theme="light"] {
    --mat-poly: #103028;   --mat-poly-wash: #e4e9e4;
    --mat-multi: #2b6448;  --mat-multi-wash: #d9e6dd;
    --mat-darm: #c4693a;   --mat-darm-wash: #f6e6da;
    --mat-synth: #6e7a75;  --mat-synth-wash: #eeeeea;
    --mat-hybrid: #a9761b; --mat-hybrid-wash: #f6e7cc;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-design]):not([data-theme="light"]), :root[data-design="papier"]:not([data-theme="light"]) {
      --mat-poly: #8fcfae;   --mat-poly-wash: #1c302a;
      --mat-multi: #7fb894;  --mat-multi-wash: #16261f;
      --mat-darm: #d98b5c;   --mat-darm-wash: #33231a;
      --mat-synth: #a8b2ac;  --mat-synth-wash: #212c28;
      --mat-hybrid: #d9b05c; --mat-hybrid-wash: #33291a;
    }
  }
  :root:not([data-design])[data-theme="dark"], :root[data-design="papier"][data-theme="dark"] {
    --mat-poly: #8fcfae;   --mat-poly-wash: #1c302a;
    --mat-multi: #7fb894;  --mat-multi-wash: #16261f;
    --mat-darm: #d98b5c;   --mat-darm-wash: #33231a;
    --mat-synth: #a8b2ac;  --mat-synth-wash: #212c28;
    --mat-hybrid: #d9b05c; --mat-hybrid-wash: #33291a;
  }

  /* Ergebnisleiste (Handy): klebt oben unter der Kopfzeile statt fest unten ueber der Menueleiste */
  @media (max-width: 820px) {
    .skon-leiste {
      position: sticky; bottom: auto; left: auto; right: auto; top: 64px; z-index: 4;
      margin: 0 0 var(--raum-3); padding: 8px 12px; border-radius: 14px;
      box-shadow: var(--shadow), var(--glanz);
    }
    .skon-seite { padding-bottom: 0; }
  }

  /* ==================================================================
     MEHR-BLATT (Handy) und groessere untere Leiste
     ================================================================== */
  .mehr-hinter, .mehr-blatt { display: none; }
  @media (max-width: 820px) {
    .mehr-hinter {
      display: block; position: fixed; inset: 0; z-index: 64; background: rgba(8,16,11,.5);
      opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .mehr-hinter.offen { opacity: 1; pointer-events: auto; }
    .mehr-blatt {
      display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 66;
      max-height: 88vh; max-height: 88dvh; background: var(--surface); border-radius: calc(var(--radius-gross) * 1.3) calc(var(--radius-gross) * 1.3) 0 0;
      box-shadow: 0 -14px 44px rgba(0,0,0,.30); transform: translateY(104%);
      transition: transform .28s cubic-bezier(.2,.8,.3,1);
    }
    .mehr-blatt.offen { transform: translateY(0); }
    .mehr-griff { flex: none; display: grid; place-items: center; padding: 8px 0 3px; cursor: grab; touch-action: none; }
    .mehr-griff i { width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); }
    .mehr-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 0; }

    .mehr-suchzeile { display: flex; gap: 8px; margin-bottom: 8px; }
    .mehr-suche { position: relative; flex: 1; min-width: 0; }
    .mehr-leiste-knopf { flex: none; width: 40px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--brand-wash); color: var(--brand); cursor: pointer; }
    .mehr-leiste-knopf:active { transform: scale(.96); }
    .mehr-suche-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-52%); font-size: 18px; color: var(--ink-muted); pointer-events: none; }
    .mehr-suche input {
      width: 100%; box-sizing: border-box; padding: 9px 12px 9px 38px; border: 1px solid var(--border-strong); border-radius: var(--radius);
      background: var(--surface-2); color: var(--ink); font: inherit; font-size: 16px;
    }
    .mehr-suche input:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-wash); }

    .mehr-gruppe-titel {
      display: flex; align-items: center; gap: 8px; margin: 12px 0 6px;
      font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 15px; letter-spacing: var(--titel-spacing);
    }
    .mehr-gruppe-titel::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--brand); flex: none; }
    .mehr-gruppe.g-platz .mehr-gruppe-titel::before { background: var(--gold); }
    .mehr-gruppe.g-finanzen .mehr-gruppe-titel::before { background: var(--status-good); }
    .mehr-gruppe.g-wissen .mehr-gruppe-titel::before { background: var(--wissen, var(--brand)); }
    .mehr-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .mehr-kachel {
      display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 10px; min-width: 0;
      border: 1px solid var(--border); border-radius: var(--radius-gross); background: var(--bg); color: var(--ink);
      font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
    }
    .mehr-kachel:active { transform: scale(.98); }
    .mehr-kachel .ico {
      flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius);
      background: var(--brand-wash); color: var(--brand); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 12.5px;
    }
    .mehr-kachel .tx { min-width: 0; overflow: hidden; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .mehr-inhalt { scrollbar-width: none; }
    .mehr-inhalt::-webkit-scrollbar { display: none; }
    .g-platz .mehr-kachel .ico { background: var(--gold-wash); color: var(--gold); }
    .g-finanzen .mehr-kachel .ico { background: var(--status-good-wash); color: var(--status-good); }
    .g-wissen .mehr-kachel .ico { background: color-mix(in srgb, var(--wissen, var(--brand)) 14%, var(--surface)); color: var(--wissen, var(--brand)); }
    .mehr-kachel.aktiv { border-color: var(--gold); background: var(--gold-wash); }
    .mehr-kachel.aktiv .ico { background: var(--gold); color: var(--auf-gold); }
    .mehr-kunden { display: flex; flex-direction: column; gap: 8px; }
    .mehr-kunde { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
    .mehr-nichts { margin: 16px 4px; color: var(--ink-muted); font-size: 14px; }
    #mehrTreffer .mehr-kacheln { margin-top: 8px; }

    .mehr-fuss { position: sticky; bottom: 0; margin: 12px -16px 0; padding: 9px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
    .mehr-konto { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-gross); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
    .mehr-konto.aktiv { border-color: var(--gold); background: var(--gold-wash); }
    .mehr-konto .avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--brand); color: var(--auf-brand); font-family: var(--font-titel); font-size: 15px; }
    .mehr-konto .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .mehr-konto-text { display: flex; flex-direction: column; min-width: 0; }
    .mehr-konto-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mehr-konto-text small { font-size: 12px; font-weight: 600; color: var(--gold); }
    .mehr-fuss-knoepfe { display: grid; grid-template-columns: 1fr 1fr 42px; gap: 6px; margin-top: 6px; }
    .mehr-fuss-knoepfe button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .mehr-fuss-knoepfe button.nur-icon { padding: 6px 0; color: var(--ink-secondary); }
    .mehr-fuss-knoepfe button.nur-icon svg { width: 19px; height: 19px; }

    /* Untere Leiste: hoehere Knoepfe, ein Strich unter der aktiven Seite */
    .ul-knopf { position: relative; min-height: 54px; padding-top: 7px; }
    .ul-knopf.active::after {
      content: ""; position: absolute; left: 50%; bottom: 3px; width: 20px; height: 3px; margin-left: -10px;
      border-radius: 2px; background: var(--gold);
    }
    .content { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  }

  /* ==================================================================
     EINSTELLUNGEN AM HANDY: ganze Seite statt Fenster
     Ohne Rand und Schatten fuellt der Bereich den Bildschirm, der Kopf mit Zurueck-Pfeil und Titel
     bleibt oben stehen, darunter scrollen die Bloecke auf warmem Grund. Ein Wechsel zwischen den
     Unterseiten laeuft weiter ueber Zurueck (auch die Zurueck-Taste des Handys).
     ================================================================== */
  @media (max-width: 820px) {
    .modal-overlay.als-seite { padding: 0; overflow: hidden; align-items: stretch; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .modal-overlay.als-seite .modal-box {
      max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: none;
      border-radius: 0; box-shadow: none; background: var(--bg);
    }
    .modal-overlay.als-seite .modal-head {
      align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
      background: var(--brand-strong); color: #fff; border-bottom: 0;
    }
    .modal-overlay.als-seite .modal-head h2 { font-family: var(--font-titel); font-weight: var(--titel-weight); font-size: 21px; color: #fff; }
    .modal-overlay.als-seite .modal-pfad { color: color-mix(in srgb, var(--brand) 25%, #ffffff); margin-bottom: 2px; }
    .modal-overlay.als-seite .modal-zurueck { width: 40px; height: 40px; margin-top: 0; font-size: 19px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
    .modal-overlay.als-seite .modal-close { color: #fff; font-size: 19px; padding: 8px 12px; }
    .modal-overlay.als-seite .modal-close:hover { background: rgba(255,255,255,.12); color: #fff; }
    .modal-overlay.als-seite .modal-body { padding: 16px 14px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
    .modal-overlay.als-seite .modal-nav-btn { background: var(--surface); box-shadow: none; border-radius: var(--radius-gross); }
    .modal-overlay.als-seite .modal-nav-btn:hover { transform: none; }
    .modal-overlay.als-seite .settings-block { background: var(--surface); border-radius: var(--radius-gross); }
  }

  /* ==================================================================
     BEISPIEL-MODUS (/demo): Hinweis unten, mit Weg zur echten Anmeldung
     ================================================================== */
  .demo-hinweis {
    position: fixed; z-index: 58; right: 20px; bottom: 20px; max-width: min(460px, calc(100vw - 40px));
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-sizing: border-box;
    padding: 10px 10px 10px 16px; border-radius: 999px;
    background: var(--brand-strong); color: #fff; font-size: 13px; line-height: 1.3;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
  }
  .demo-hinweis .dh-text { flex: 1 1 180px; min-width: 0; }
  .demo-hinweis .dh-los {
    flex: none; padding: 8px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    background: var(--gold); color: var(--auf-gold); font-weight: 700; font-size: 13px;
  }
  body.demo .content { padding-bottom: 96px; }
  @media (max-width: 820px) {
    .demo-hinweis { left: auto; right: 12px; max-width: calc(100vw - 96px); flex-wrap: nowrap; gap: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); border-radius: 999px; padding: 5px 5px 5px 14px; font-size: 12.5px; }
    .demo-hinweis .dh-mehr { display: none; }
    .demo-hinweis .dh-text { flex: 0 0 auto; }
    .demo-hinweis .dh-los { padding: 8px 14px; font-size: 12.5px; }
    body.demo .content { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  }

  /* Beispiel-Modus: Hinweis auf eingeschraenkte Bereiche, Wiki nur zum Ansehen */
  .demo-sperre {
    margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.45;
    background: var(--gold-wash); color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  }
  .demo-sperre::before { content: "\1F512  "; }
  body.demo [data-wiki-oeffnen] { pointer-events: none; cursor: default; }
  body.demo #btnWikiFormKnopf, body.demo .wiki-modus-toggle, body.demo .wiki-beispiel-karte { display: none; }

  /* Instagram-Symbol im Fuss der Seitenleiste: nur das Zeichen, schmal neben Feedback und Einstellungen */
  .rail-foot .theme-row button.nur-icon { flex: 0 0 38px; padding-left: 0; padding-right: 0; display: grid; place-items: center; }
  .rail-foot .theme-row button.nur-icon svg { width: 17px; height: 17px; }

  /* =========================================================================
     MEIN PROFIL - Schlaeger-Karte (.pkx)
     Aufbau: ein dunkles Kopfband in der Brand-Farbe der jeweiligen Gestaltung (Name, Frische-Ring,
     Reiter) und darunter der helle Koerper (Kennzahlen, Diagramme, Knoepfe). Alle Farben kommen
     aus den Gestaltungs-Variablen - --brand-strong ist in JEDER Gestaltung dunkel, deshalb
     funktioniert das Band in Papier, Werkstatt, Platz, Abends und im Dunkelmodus. Das Layout
     richtet sich nach der BREITE DER KARTE (Container-Abfragen), nicht nach der des Fensters.
     Bewegung ist nur Beiwerk: Ohne Skript und bei "weniger Bewegung" steht alles fertig da.
     ========================================================================= */
  .pk-karte { container-type: inline-size; }
  /* Auf sehr breiten Bildschirmen endet die Karte bei 1400px (linksbuendig wie die Seite) -
     sonst blieben die Diagramme riesig und der Rest leer. */
  .profil-karussell, .pk-punkte { max-width: 1400px; }
  .pk-buehne { grid-template-columns: minmax(0, 1fr); }
  .pkx {
    --pkx-p: 18px;
    --pkx-auf: color-mix(in oklab, #fff 90%, var(--brand-strong));          /* Schrift auf dem Band */
    --pkx-auf-2: color-mix(in oklab, #fff 66%, var(--brand-strong));        /* gedaempft */
    --pkx-licht: color-mix(in oklab, #fff 58%, var(--brand-strong));        /* helle Tinte der Gestaltung */
    display: block; padding: 0; overflow: hidden;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 22px;
    box-shadow: var(--shadow), var(--glanz);
  }

  /* ---- Kopfband ---- */
  .pkx-band {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: center;
    padding: var(--pkx-p) var(--pkx-p) 0; color: var(--pkx-auf);
    background:
      radial-gradient(62% 140% at 100% 0%, color-mix(in srgb, var(--pkx-status) 32%, transparent), transparent 72%),
      radial-gradient(75% 130% at 0% 100%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 68%),
      linear-gradient(165deg, color-mix(in oklab, var(--brand-strong), #fff 9%), var(--brand-strong) 70%);
  }
  /* Ein feines Saitenbild, das nach rechts oben hin sichtbar wird */
  .pkx-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 15px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 15px);
    -webkit-mask-image: radial-gradient(75% 130% at 100% 0%, #000, transparent 78%);
            mask-image: radial-gradient(75% 130% at 100% 0%, #000, transparent 78%);
  }
  .pkx-kopf { grid-column: 1 / -1; min-width: 0; }
  .pkx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; font-size: 13px; }
  .pkx-sport {
    padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    background: var(--gold); color: var(--auf-gold);
  }
  .pkx-sport-badminton { background: #7fd1a5; color: #0b2a1e; }
  .pkx-farbe { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
  .pkx .pkx-fav {
    border: 0; background: none; padding: 2px 0; margin: 0; border-radius: 0; font: inherit; font-size: 13px; font-weight: 500;
    color: var(--pkx-auf-2); cursor: pointer; transition: color .2s;
  }
  .pkx .pkx-fav:hover { color: #ecc15a; }
  .pkx .pkx-fav.aktiv { color: #ecc15a; background: none; font-weight: 600; }
  .pkx-name {
    display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--font-titel); font-weight: var(--titel-weight); letter-spacing: -.015em;
    font-size: 30px; line-height: 1.08; color: var(--pkx-auf); overflow-wrap: anywhere;
    background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .35s cubic-bezier(.2,.7,.2,1);
  }
  .pkx-name:hover { background-size: 100% 1px; }

  /* Frische: Ring + Aussage (der Behaelter loest sich auf, damit beide im Band-Raster stehen) */
  .pkx-hero { display: contents; }
  .pkx-ring { grid-column: 1; }
  .pkx-ring svg { display: block; width: 100px; height: auto; overflow: visible; }
  .pkx-ring-spur { stroke: rgba(255,255,255,.14); }
  .pkx-ring-bogen { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--pkx-status) 60%, transparent)); }
  .pkx-ring-zahl { font-family: var(--font-mono); font-size: 36px; font-weight: 500; fill: var(--pkx-auf); letter-spacing: -1.5px; }
  .pkx-ring-klein { font-size: 11px; fill: var(--pkx-auf-2); }
  .pkx-hero-text { grid-column: 2; display: grid; gap: 3px; min-width: 0; }
  .pkx-hero-leer .pkx-hero-text { grid-column: 1 / -1; }
  .pkx-klein { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--pkx-auf-2); }
  .pkx-klein.pkx-fein { margin-top: 8px; font-size: 12.5px; opacity: .85; }
  .pkx-kicker { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in oklab, var(--gold) 62%, #fff); }
  .pkx-gross {
    margin: 2px 0 2px; font-family: var(--font-titel); font-weight: 400; font-size: 23px; line-height: 1.12; letter-spacing: -.015em; color: var(--pkx-auf);
  }
  .pkx-gross .profil-schnitt { color: #ecc15a; }

  /* Reiter im Band: der Strich gleitet von Reiter zu Reiter */
  .pkx-reiter {
    position: relative; grid-column: 1 / -1; display: flex; gap: 26px; margin: 4px calc(var(--pkx-p) * -1) 0; padding: 0 var(--pkx-p);
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .pkx-reiter button {
    border: 0; background: none; cursor: pointer; padding: 13px 0 14px; border-bottom: 3px solid transparent;
    font-size: 14.5px; font-weight: 500; color: var(--pkx-auf-2); transition: color .2s;
  }
  .pkx-reiter button:hover { color: var(--pkx-auf); }
  .pkx-reiter button[aria-selected="true"] { color: var(--pkx-auf); font-weight: 600; border-bottom-color: var(--gold); }
  .pkx-reiter button:focus-visible { outline: 2px solid var(--pkx-licht); outline-offset: -2px; border-radius: 6px; }
  .pkx-strich {
    position: absolute; left: 0; bottom: 0; height: 3px; width: var(--sb, 0); border-radius: 3px 3px 0 0; background: var(--gold); opacity: 0;
    transform: translateX(var(--sx, 0)); transition: transform .5s cubic-bezier(.3,.9,.25,1), width .5s cubic-bezier(.3,.9,.25,1);
    box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 70%, transparent);
  }
  .pkx-reiter.mit-strich .pkx-strich { opacity: 1; }
  .pkx-reiter.mit-strich button[aria-selected="true"] { border-bottom-color: transparent; }

  /* ---- Koerper ---- */
  .pkx-koerper { display: grid; gap: 20px; padding: var(--pkx-p) var(--pkx-p) calc(var(--pkx-p) + 2px); }
  .pkx-tafel { display: grid; gap: 14px; align-content: start; min-width: 0; }
  .pkx-tafel[hidden] { display: none; }
  .pkx-leer { color: var(--ink-muted); font-size: 14px; }
  .pkx-hinweise { display: grid; gap: 8px; }
  .pkx-hinweis {
    margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
    background: var(--surface-2); color: var(--ink-secondary);
  }
  .pkx-hinweis.kritisch { background: var(--status-critical-wash); color: var(--status-critical); font-weight: 600; }

  /* Kennzahlen: eingefaerbte Kacheln mit Symbol */
  .pkx-zahlen { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; margin: 0; }
  .pkx-zt {
    --tone: var(--brand);
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; padding: 13px 13px 14px; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), color-mix(in srgb, var(--tone) 3%, var(--surface)));
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  }
  .pkx-zt:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .pkx-zt-gut { --tone: var(--status-good); }
  .pkx-zt-gold { --tone: var(--gold); }
  .pkx-zt-marke { --tone: var(--brand); }
  .pkx-zt dt { order: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.25; color: var(--ink-secondary); }
  .pkx-zt dt i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tone); color: var(--surface); }
  .pkx-zt dd {
    order: 2; margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; line-height: 1;
    letter-spacing: -.04em; color: var(--tone); white-space: nowrap;
  }

  /* Diagramme: jedes in einer eigenen, leicht getoenten Flaeche */
  .pkx-dias { display: grid; gap: 12px; align-content: start; min-width: 0; }
  .pkx-dia {
    --tone: var(--status-good);
    margin: 0; min-width: 0; padding: 15px 15px 10px; border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
    background: color-mix(in srgb, var(--tone) 3%, var(--surface));
  }
  .pkx-dia-gold { --tone: var(--gold); }
  .pkx-dia figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
  .pkx-dia-titel { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14.5px; }
  .pkx-dia-titel b { font-weight: 600; }
  .pkx-dia-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--tone) 17%, transparent); color: var(--tone); }
  .pkx-dia-wert {
    flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone);
  }
  .pkx-dia-wert:empty { display: none; }
  .pkx-dia svg { display: block; overflow: visible; }
  .pkx-raster { stroke: color-mix(in srgb, var(--tone) 16%, var(--border)); stroke-width: 1; stroke-dasharray: 2 4; }
  .pkx-achse { font-family: var(--font-body); font-size: 10px; fill: var(--ink-muted); }
  .pkx-etikett { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--surface); }
  .pkx-punkt-rand { stroke: var(--surface); stroke-width: 1.5; }

  /* Reiter "Saiten" und "Details" */
  .pkx-saiten { display: grid; gap: 12px; }
  .pkx-saite {
    --tone: var(--status-good);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag kg" "name name"; gap: 16px 12px; align-items: center;
    padding: 15px 18px 18px; border-radius: 18px; min-width: 0;
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), color-mix(in srgb, var(--tone) 3%, var(--surface)));
  }
  .pkx-saite.quer { --tone: var(--gold); }
  .pkx-saite-tag {
    grid-area: tag; justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    background: var(--tone); color: var(--surface);
  }
  .pkx-saite em { grid-area: kg; font-family: var(--font-mono); font-style: normal; font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--tone); white-space: nowrap; }
  .pkx-saite b { grid-area: name; font-family: var(--font-titel); font-weight: 400; font-size: 23px; line-height: 1.15; letter-spacing: -.012em; color: var(--ink); overflow-wrap: anywhere; }
  .pkx-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
  .pkx-liste > div {
    display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 13px 15px 14px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .pkx-liste dt { font-size: 12.5px; color: var(--ink-muted); }
  .pkx-liste dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 500; color: var(--brand); overflow-wrap: anywhere; }

  /* Vier gleiche Knoepfe */
  .pkx-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pkx-ak {
    position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 62px; padding: 9px 12px 9px 9px; text-align: left;
    border: 1px solid var(--border); border-radius: 16px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .25s;
  }
  .pkx-ak-ic {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--gold); color: var(--auf-gold);
    transition: background .25s, color .25s, transform .4s cubic-bezier(.3,1.5,.5,1);
  }
  .pkx-ak:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
  .pkx-ak:hover .pkx-ak-ic { background: var(--brand-strong); color: var(--pkx-auf); transform: rotate(-9deg) scale(1.07); }
  .pkx-ak:active { transform: translateY(0) scale(.98); box-shadow: none; }
  .pkx-ak:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .pkx .profil-details-link { width: auto; justify-self: end; margin: -4px 0 0; padding: 4px 2px; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
  .pkx .profil-details-link span { display: inline-block; transition: transform .25s; }
  .pkx .profil-details-link:hover { color: var(--brand); text-decoration: none; }
  .pkx .profil-details-link:hover span { transform: translateX(4px); }

  /* Die Pfeile des Karussells sitzen oben rechts im Band */
  .profil-karussell .pk-pfeil {
    top: 16px; transform: none; width: 34px; height: 34px; font-size: 16px; box-shadow: none; z-index: 2;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; transition: background .2s;
  }
  .profil-karussell .pk-pfeil:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
  .profil-karussell .pk-pfeil.links { left: auto; right: 58px; }
  .profil-karussell .pk-pfeil.rechts { right: 14px; }
  .profil-karussell:has(.pk-pfeil) .pkx-kopf { padding-right: 92px; }

  /* ---- Bewegung (nur wenn nicht "weniger Bewegung" gewuenscht) ---- */
  @keyframes pkxHoch { from { opacity: 0; transform: translateY(14px); } }
  @keyframes pkxEin { from { opacity: 0; } }
  @keyframes pkxRing { from { opacity: 0; transform: scale(.86); } }
  @keyframes pkxBogen { from { stroke-dashoffset: 1000; } }
  @keyframes pkxLinie { from { stroke-dashoffset: 1; } }
  @keyframes pkxPop { from { opacity: 0; transform: scale(0); } }
  @media (prefers-reduced-motion: no-preference) {
    .pkx-kopf { animation: pkxHoch .75s cubic-bezier(.2,.7,.2,1) backwards; }
    .pkx-ring { animation: pkxRing .9s cubic-bezier(.2,.8,.2,1) .1s backwards; transform-origin: 50% 50%; }
    .pkx-ring-bogen { animation: pkxBogen 1.5s cubic-bezier(.3,.7,.2,1) .25s backwards; }
    .pkx-ring-zahl, .pkx-ring-klein { animation: pkxEin .8s ease .35s backwards; }
    .pkx-hero-text > * { animation: pkxHoch .7s cubic-bezier(.2,.7,.2,1) backwards; }
    .pkx-hero-text > :nth-child(1) { animation-delay: .15s; }
    .pkx-hero-text > :nth-child(2) { animation-delay: .22s; }
    .pkx-hero-text > :nth-child(3) { animation-delay: .29s; }
    .pkx-hero-text > :nth-child(4) { animation-delay: .36s; }
    .pkx-reiter { animation: pkxEin .7s ease .35s backwards; }
    .pkx-tafel:not([hidden]) > * { animation: pkxHoch .6s cubic-bezier(.2,.7,.2,1) backwards; }
    .pkx-tafel:not([hidden]) > :nth-child(2) { animation-delay: .08s; }
    .pkx-tafel:not([hidden]) > :nth-child(3) { animation-delay: .16s; }
    .pkx-zt, .pkx-dia, .pkx-saite, .pkx-liste > div { animation: pkxHoch .65s cubic-bezier(.2,.7,.2,1) backwards; }
    .pkx-zt:nth-child(2), .pkx-dia:nth-child(2), .pkx-saite:nth-child(2) { animation-delay: .1s; }
    .pkx-zt:nth-child(3) { animation-delay: .2s; }
    .pkx-dia { animation-delay: .25s; }
    .pkx-dia:nth-child(2) { animation-delay: .35s; }
    .pkx-linie { stroke-dasharray: 1; stroke-dashoffset: 0; animation: pkxLinie 1.3s cubic-bezier(.45,.05,.2,1) .45s backwards; }
    .pkx-flaeche { animation: pkxEin 1s ease .9s backwards; }
    .pkx-punkt { transform-box: fill-box; transform-origin: center; animation: pkxPop .45s cubic-bezier(.3,1.6,.5,1) 1.1s backwards; }
    .pkx-etikett-g { animation: pkxEin .6s ease 1.35s backwards; }
    .pkx-aktionen > * { animation: pkxHoch .6s cubic-bezier(.2,.7,.2,1) .5s backwards; }
    .pkx-aktionen > :nth-child(2) { animation-delay: .57s; }
    .pkx-aktionen > :nth-child(3) { animation-delay: .64s; }
    .pkx-aktionen > :nth-child(4) { animation-delay: .71s; }
    /* Noch nicht im Bild: alles am Start anhalten, beim Sichtbarwerden laeuft es los */
    .pkx[data-anim="bereit"] * { animation-play-state: paused !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pkx *, .pkx *::before { animation: none !important; transition: none !important; }
  }

  /* ---- Rest der Seite "Mein Profil" (.pkx-seite): Ueberschriften, Werkzeug-Knoepfe, Vergleiche, Proben, Archiv ----
     Alles bewusst unter .pkx-seite, damit andere Seiten mit denselben Bauteilen unberuehrt bleiben. */
  .pkx-seite .section-head {
    align-items: center; border-bottom: 0; padding-bottom: 13px; margin-bottom: 14px;
    background:
      linear-gradient(var(--gold), var(--gold)) 0 100% / 56px 3px no-repeat,
      linear-gradient(var(--border), var(--border)) 0 100% / 100% 1px no-repeat;
  }
  .pk-punkt { transition: width .35s cubic-bezier(.3,.9,.3,1), background .25s; }
  .pk-punkt.aktiv { width: 26px; border-radius: 999px; background: var(--gold); }

  /* Die drei Werkzeug-Knoepfe sitzen in der Zeile der Ueberschrift "Meine Schlaeger": am Computer mit
     Beschriftung, am Handy nur als Symbol (der Name steht als Tooltip/Vorlesetext dran). */
  .pkx-seite .section-head .kopf-rechts { align-items: center; }
  .pkx-seite .profil-kopf-aktionen { gap: 8px; flex-wrap: nowrap; }
  .pkx-seite .profil-kopf-knopf {
    gap: 7px; padding: 7px 14px 7px 11px; font-size: 12.5px; color: var(--ink-secondary);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s, color .2s;
  }
  .pkx-seite .profil-kopf-knopf svg { color: var(--gold); width: 15px; height: 15px; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
  .pkx-seite .profil-kopf-knopf:hover { transform: translateY(-1px); background: var(--surface); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); color: var(--brand); }
  .pkx-seite .profil-kopf-knopf:hover svg { transform: rotate(-10deg) scale(1.12); }
  .pkx-seite .profil-kopf-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  @media (max-width: 760px) {
    .pkx-seite .profil-kopf-aktionen { gap: 6px; }
    .pkx-seite .profil-kopf-knopf { position: relative; justify-content: center; width: 36px; height: 36px; padding: 0; }
    .pkx-seite .profil-kopf-knopf svg { width: 17px; height: 17px; }
    .pkx-seite .profil-kopf-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }

  /* Vergleiche: eine Zeile je Eintrag, jede Zahl mit Balken, der Beste in Clay */
  .pkx-vgl { display: grid; gap: 10px; }
  .pkx-vgl-kopf, .pkx-vgl-zeile { display: grid; grid-template-columns: var(--cols); column-gap: 20px; align-items: center; }
  .pkx-vgl-kopf { padding: 0 20px; }
  .pkx-vgl-th {
    padding: 4px 0; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-muted); text-align: left; cursor: default;
  }
  button.pkx-vgl-th { cursor: pointer; transition: color .2s; }
  button.pkx-vgl-th:hover, .pkx-vgl-th.aktiv { color: var(--brand); }
  .pkx-vgl-th .arrow { margin-left: 6px; font-size: 9px; }
  .pkx-vgl-zeile {
    padding: 15px 20px; border-radius: 18px; border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow), var(--glanz);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  }
  .pkx-vgl-zeile:hover { transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz); }
  .pkx-vgl-name { font-family: var(--font-titel); font-weight: 400; font-size: 19px; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); overflow-wrap: anywhere; }
  .pkx-vgl-z { display: grid; gap: 7px; align-content: start; min-width: 0; }
  .pkx-vgl-z b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; }
  .pkx-vgl-bar { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--status-good) 14%, var(--surface-3)); overflow: hidden; }
  .pkx-vgl-bar u { display: block; height: 100%; border-radius: inherit; background: var(--status-good); transform-origin: left center; }
  .pkx-vgl-z.best b { color: var(--gold); font-weight: 600; }
  .pkx-vgl-z.best .pkx-vgl-bar { background: color-mix(in srgb, var(--gold) 16%, var(--surface-3)); }
  .pkx-vgl-z.best .pkx-vgl-bar u { background: var(--gold); }
  .pkx-vgl-text { font-size: 14px; line-height: 1.35; color: var(--ink-secondary); }
  @media (max-width: 720px) {
    .pkx-vgl-kopf { display: none; }
    .pkx-vgl-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 13px 14px 14px; border-radius: 16px; }
    .pkx-vgl-name { grid-column: 1 / -1; font-size: 18px; }
    .pkx-vgl-text { grid-column: 1 / -1; }
    .pkx-vgl-z::before { content: attr(data-l); order: -1; font-size: 11.5px; line-height: 1.2; color: var(--ink-muted); }
    .pkx-vgl-z b { font-size: 15px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes pkxBalken { from { transform: scaleX(0); } }
    .pkx-vgl-bar u { animation: pkxBalken 1.1s cubic-bezier(.3,.7,.2,1) .2s backwards; }
  }

  /* Schon ausprobiert (Probe-Verlauf) und Archiv: einzelne getoente Kacheln statt einer Linienliste */
  .pkx-seite #probenHistorie > .card, .pkx-seite .card:has(> .sk-zeile) {
    padding: 0; border: 0; background: none; box-shadow: none; display: grid; gap: 10px;
  }
  .pkx-seite #probenHistorie > .card { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
  .pkx-seite .probe-zeile {
    --tone: var(--gold); gap: 13px; padding: 13px 16px; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), color-mix(in srgb, var(--tone) 3%, var(--surface)));
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  }
  .pkx-seite .probe-zeile + .probe-zeile { border-top: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border)); }
  .pkx-seite .probe-zeile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .pkx-seite .pz-name { font-family: var(--font-titel); font-weight: 400; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
  .pkx-seite .pz-neben { margin-top: 4px; font-size: 12.5px; }
  .pkx-seite .pz-datum { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--tone) 15%, transparent); color: var(--tone); }
  .pkx-seite .sk-zeile {
    padding: 12px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2);
  }
  .pkx-seite .sk-zeile:last-child { border-bottom: 1px solid var(--border); }

  /* ---- "Schon ausprobiert": Kennzahlen, Ansicht waehlen, drei Sichten ---- */
  .ph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .ph-stat {
    --tone: var(--gold); display: flex; flex-direction: column-reverse; gap: 3px; min-width: 0; padding: 12px 15px 13px; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), color-mix(in srgb, var(--tone) 3%, var(--surface)));
  }
  .ph-gut { --tone: var(--status-good); }
  .ph-stat b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.035em; color: var(--tone); white-space: nowrap; }
  .ph-stat span { font-size: 12.5px; line-height: 1.2; color: var(--ink-secondary); }
  .ph-steuer { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 16px; }
  .ph-seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
  .ph-seg button {
    border: 0; background: none; cursor: pointer; padding: 8px 17px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-secondary);
    transition: background .25s, color .25s, box-shadow .25s;
  }
  .ph-seg button:hover { color: var(--ink); }
  .ph-seg button[aria-selected="true"] { background: var(--gold); color: var(--auf-gold); box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--gold) 85%, transparent); }
  .ph-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .ph-chips button {
    border: 1px solid var(--border); background: var(--surface); cursor: pointer; padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-secondary);
    transition: background .2s, border-color .2s, color .2s;
  }
  .ph-chips button[aria-pressed="true"] { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--pkx-auf, #fff); }
  .ph-seg button:focus-visible, .ph-chips button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .ph-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
  .ph-karte {
    --tone: var(--gold); min-width: 0; overflow: hidden; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
    background: var(--surface); box-shadow: var(--shadow), var(--glanz);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  }
  .ph-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz); }
  .ph-kopf {
    display: flex; align-items: center; gap: 13px; padding: 14px 16px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), color-mix(in srgb, var(--tone) 3%, var(--surface)));
    border-bottom: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
  }
  .ph-spule { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 16%, var(--border)); }
  .ph-spule .spule { transform: scale(1.15); }
  .ph-spule.ph-schl { background: var(--tone); color: var(--auf-gold); box-shadow: none; }
  .ph-spule.ph-schl svg { width: 24px; height: 24px; }
  .ph-titel { flex: 1; min-width: 0; }
  .ph-titel h4 { margin: 0; font-family: var(--font-titel); font-weight: 400; font-size: 19px; line-height: 1.15; letter-spacing: -.012em; color: var(--ink); overflow-wrap: anywhere; }
  .ph-titel p { margin: 3px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-secondary); }
  .ph-zahl { flex: none; min-width: 34px; padding: 4px 11px; border-radius: 999px; text-align: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; background: var(--tone); color: var(--auf-gold); }
  .ph-liste { margin: 0; padding: 4px 16px; list-style: none; }
  .ph-liste li { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
  .ph-liste li + li { border-top: 1px dashed color-mix(in srgb, var(--tone) 16%, var(--border)); }
  .ph-mehr { border-top: 1px dashed color-mix(in srgb, var(--tone) 16%, var(--border)); }
  .ph-mehr summary {
    list-style: none; cursor: pointer; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--gold); display: flex; align-items: center; gap: 6px;
  }
  .ph-mehr summary::-webkit-details-marker { display: none; }
  .ph-mehr summary::after { content: "▾"; transition: transform .25s; }
  .ph-mehr[open] summary::after { transform: rotate(180deg); }
  .ph-mehr[open] summary { border-bottom: 1px dashed color-mix(in srgb, var(--tone) 16%, var(--border)); }
  .ph-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .ph-text b { font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
  .ph-sub { font-size: 12.5px; color: var(--ink-secondary); }
  .ph-hyb { font-size: 12px; color: var(--ink-secondary); }
  .ph-hyb b { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--surface); }
  .ph-hyb b.laengs { background: var(--status-good); }
  .ph-hyb b.quer { background: var(--gold); color: var(--auf-gold); }
  .ph-kg { flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--brand); white-space: nowrap; }
  .ph-datum { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--gold); white-space: nowrap; }
  .ph-liste .spule { flex: none; }
  .ph-karte.ph-r { --tone: var(--status-good); }
  .ph-r .ph-spule.ph-schl, .ph-r .ph-zahl { color: var(--surface); }
  .ph-r .ph-datum, .ph-r .ph-mehr summary { color: var(--status-good); }

  /* Verlauf: eine Zeitleiste je Monat */
  .ph-verlauf { display: grid; gap: 22px; }
  .ph-monat h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--font-titel); font-weight: 400; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
  .ph-monat h4 span { padding: 1px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
  .ph-monat ol { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; display: grid; gap: 8px; }
  .ph-monat ol::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--gold) 30%, var(--border)); }
  .ph-monat li {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-radius: 14px; border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface), var(--surface-2)); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  }
  .ph-monat li:hover { transform: translateX(3px); box-shadow: var(--shadow); }
  .ph-monat li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--bg); }
  .ph-tag { flex: none; width: 46px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--gold); }
  @media (max-width: 760px) {
    .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ph-stat { padding: 9px 12px 10px; border-radius: 14px; }
    .ph-stat b { font-size: 20px; }
    .ph-steuer { flex-direction: column; align-items: stretch; gap: 10px; }
    .ph-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
    .ph-seg button { padding: 8px 6px; font-size: 13px; }
    .ph-gitter { gap: 10px; }
    .ph-kopf { padding: 12px 14px; gap: 11px; }
    .ph-liste { padding: 2px 14px; }
    .ph-liste li { flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; }
    .ph-monat li { flex-wrap: wrap; padding: 10px 12px; gap: 4px 10px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes phEin { from { opacity: 0; transform: translateY(12px); } }
    .ph-karte, .ph-monat, .ph-stat { animation: phEin .6s cubic-bezier(.2,.7,.2,1) backwards; }
    .ph-karte:nth-child(2), .ph-monat:nth-child(2), .ph-stat:nth-child(2) { animation-delay: .06s; }
    .ph-karte:nth-child(3), .ph-monat:nth-child(3), .ph-stat:nth-child(3) { animation-delay: .12s; }
    .ph-karte:nth-child(4), .ph-monat:nth-child(4), .ph-stat:nth-child(4) { animation-delay: .18s; }
    .ph-karte:nth-child(n+5) { animation-delay: .24s; }
  }


  /* Das Papier im Hintergrund liegt jetzt in neu.css (auf .shell, damit es bis zum unteren Rand reicht) */
  /* Auch die weissen Blaetter bekommen einen Hauch Maserung - sonst wirken sie wie Kunststoff */
  .pkx-koerper, .ph-karte {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* Kennzahl-Kacheln: dezent, mit Papier-Schatten statt schwerem Hochglanz */
  .pkx-li { box-shadow: 0 1px 1px rgba(60,50,30,.05), 0 6px 14px -8px rgba(60,50,30,.16); }

  /* ---- "Schon ausprobiert": Art-Abzeichen und Filter ---- */
  .ph-filter { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
  .ph-art { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .ph-art-probe { background: var(--gold); color: var(--auf-gold); }
  .ph-art-rolle { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-secondary); }
  .ph-text .ph-art { align-self: flex-start; }
  @media (max-width: 760px) { .ph-filter { width: 100%; } }

  /* ---- Kennzahlen-Leiste ueber den Schlaegerkarten (Sessions, Stunden, Lieblingsschlaeger, bestes Gefuehl) ---- */
  .pkx-leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .pkx-li {
    --tone: var(--brand);
    display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px 15px; border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), color-mix(in srgb, var(--tone) 3%, var(--surface)));
    box-shadow: var(--shadow), var(--glanz);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  }
  .pkx-li:hover { transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz); }
  .pkx-li-gut { --tone: var(--status-good); }
  .pkx-li-gold { --tone: var(--gold); }
  .pkx-li-marke { --tone: var(--brand); }
  .pkx-li > i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tone); color: var(--surface); }
  .pkx-li > i svg { width: 18px; height: 18px; }
  .pkx-li > div { display: grid; gap: 3px; min-width: 0; }
  .pkx-li span { font-size: 12.5px; line-height: 1.2; color: var(--ink-secondary); }
  .pkx-li b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.035em; color: var(--tone); white-space: nowrap; }
  .pkx-li-name b { font-family: var(--font-titel); font-weight: 400; font-size: 19px; letter-spacing: -.012em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 1100px) { .pkx-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 760px) {
    .pkx-leiste { gap: 8px; }
    .pkx-li { gap: 9px; padding: 8px 11px; border-radius: 14px; box-shadow: none; }
    .pkx-li > i { width: 28px; height: 28px; }
    .pkx-li > i svg { width: 14px; height: 14px; }
    .pkx-li > div { gap: 1px; }
    .pkx-li span { font-size: 11.5px; }
    .pkx-li b { font-size: 17px; }
    .pkx-li-name b { font-size: 15px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes pkxLiHoch { from { opacity: 0; transform: translateY(12px); } }
    .pkx-li { animation: pkxLiHoch .7s cubic-bezier(.2,.7,.2,1) backwards; }
    .pkx-li:nth-child(2) { animation-delay: .07s; }
    .pkx-li:nth-child(3) { animation-delay: .14s; }
    .pkx-li:nth-child(4) { animation-delay: .21s; }
  }

  /* ---- Schmale Karte (Handy): Symbol ueber der Beschriftung, damit auch "Siegquote" Platz hat ---- */
  @container (max-width: 479px) {
    /* Kompakt: Die ganze Karte (Uebersicht) soll am Handy ohne Scrollen auf einen Bildschirm passen */
    .pkx { --pkx-p: 14px; border-radius: 20px; }
    .pkx-band { column-gap: 12px; row-gap: 8px; }
    .pkx-meta { margin-bottom: 5px; }
    .pkx-name { font-size: 23px; line-height: 1.08; }
    .pkx-ring svg { width: 78px; }
    .pkx-gross { font-size: 20px; margin: 0; }
    .pkx-klein { font-size: 12.5px; line-height: 1.3; }
    .pkx-klein.pkx-fein { display: none; }
    .pkx-reiter { margin-top: 0; gap: 22px; }
    .pkx-reiter button { padding: 9px 0 10px; font-size: 14px; }
    .pkx-koerper { gap: 10px; padding-bottom: 12px; }
    .pkx-tafel { gap: 10px; }
    .pkx-zahlen { gap: 8px; }
    .pkx-zt { gap: 5px; padding: 8px 11px 9px; border-radius: 14px; }
    .pkx-zt dt { font-size: 12px; }
    .pkx-zt dt i { display: none; }
    .pkx-zt dd { font-size: 21px; }
    .pkx-dias { gap: 8px; }
    .pkx-dia { padding: 8px 12px 4px; border-radius: 15px; }
    .pkx-dia figcaption { margin-bottom: 4px; }
    .pkx-dia-titel { font-size: 13.5px; gap: 7px; }
    .pkx-dia-ic { width: 24px; height: 24px; border-radius: 8px; }
    .pkx-dia-wert { font-size: 12px; padding: 2px 9px; }
    .pkx-aktionen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .pkx-ak { flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 0; padding: 7px 4px 7px; text-align: center; font-size: 11.5px; line-height: 1.2; border-radius: 14px; }
    .pkx-ak-ic { width: 30px; height: 30px; border-radius: 10px; }
    .pkx-ak-ic svg { width: 17px; height: 17px; }
    .pkx .profil-details-link { display: none; }   /* der Name oeffnet dieselben Details */
  }
  /* ---- Breiter werdende Karte (Breite der Karte, nicht des Fensters) ---- */
  @container (min-width: 480px) {
    .pkx { --pkx-p: 22px; }
    .pkx-name { font-size: 34px; }
    .pkx-ring svg { width: 112px; }
    .pkx-gross { font-size: 25px; }
    .pkx-zt { padding: 15px 16px 16px; }
    .pkx-zt dd { font-size: 27px; }
  }
  @container (min-width: 540px) {
    .pkx-ring svg { width: 124px; }
    .pkx-dias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
    .pkx-saiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pkx-aktionen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pkx-ak { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 104px; padding: 12px 14px 14px; }
  }
  @container (min-width: 720px) {
    .pkx { --pkx-p: 32px; border-radius: 26px; }
    .pkx-band { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 4px; padding-top: calc(var(--pkx-p) - 10px); }
    .pkx-kopf { grid-column: 1; grid-row: 1; align-self: end; }
    .pkx-hero-text { grid-column: 1; grid-row: 2; align-self: start; padding-bottom: 14px; }
    .pkx-meta { margin-bottom: 7px; }
    .pkx-hero-leer .pkx-hero-text { grid-column: 1; }
    .pkx-ring { grid-column: 2; grid-row: 1 / span 2; padding-bottom: 10px; }
    .pkx-ring svg { width: 118px; }
    .pkx-reiter { grid-row: 3; }
    .pkx-name { font-size: 36px; }
    .pkx-gross { font-size: 25px; }
    .pkx-reiter button { padding: 12px 0 13px; }
    .pkx-koerper { gap: 22px; }
    /* Am Computer eine zusammenhaengende Leiste statt vier einzelner Kacheln */
    .pkx-aktionen {
      display: flex; gap: 4px; padding: 6px; border-radius: 20px;
      border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
      background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, var(--surface)), color-mix(in srgb, var(--gold) 16%, var(--surface)));
    }
    .pkx-ak {
      flex: 1 1 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 58px; padding: 8px 14px 8px 8px;
      border: 0; border-radius: 15px; background: transparent; box-shadow: none; font-size: 14.5px;
    }
    .pkx-ak + .pkx-ak::before { content: ""; position: absolute; left: -3px; top: 24%; bottom: 24%; width: 1px; background: color-mix(in srgb, var(--gold) 32%, transparent); transition: opacity .2s; }
    .pkx-ak:hover::before, .pkx-ak:hover + .pkx-ak::before { opacity: 0; }
    .pkx-ak-ic { width: 42px; height: 42px; border-radius: 50%; }
    .pkx-ak:hover, .pkx-ak:hover + .pkx-ak { transform: none; }
    .pkx-ak:hover { border-color: transparent; background: var(--gold); color: var(--auf-gold); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--gold) 80%, transparent); }
    .pkx-ak:hover .pkx-ak-ic { background: var(--surface); color: var(--gold); transform: rotate(-8deg) scale(1.07); }
    .pkx-ak:active { transform: scale(.985); }
  }
  @container (min-width: 1040px) {
    .pkx { --pkx-p: 40px; }
    .pkx-band { column-gap: 64px; }
    .pkx-ring svg { width: 134px; }
    .pkx-name { font-size: 42px; }
    .pkx-gross { font-size: 28px; }
    .pkx-ta { grid-template-columns: minmax(260px, .5fr) minmax(0, 2fr); column-gap: 20px; align-items: stretch; }
    .pkx-hinweise { grid-column: 1 / -1; }
    .pkx-zahlen { grid-template-columns: minmax(0, 1fr); }
    .pkx-zt { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
    .pkx-ak { min-height: 62px; font-size: 15px; }
    .pkx-ak-ic { width: 46px; height: 46px; }
  }
  @container (min-width: 1500px) {
    .pkx-ta { column-gap: 28px; }
    .pkx-name { font-size: 46px; }
  }