/* =========================================================================
   PAPIER 2.0 - die Bildsprache von "Mein Profil" auf allen Seiten
   -------------------------------------------------------------------------
   Diese Datei laedt NACH stil.css und ueberschreibt nur, was die Bausteine der Seiten
   gemeinsam haben (Kennzahl-Kacheln, Ueberschriften, Karten, Knoepfe, Kopfbaender) - die
   Seiten selbst muessen dafuer nicht einzeln umgeschrieben werden. Farben kommen aus den
   Gestaltungs-Variablen; --brand-strong ist in JEDER Gestaltung dunkel, deshalb tragen die
   dunklen Baender ueberall. Bewegung ist Beiwerk: Ohne Skript oder bei "weniger Bewegung"
   steht alles fertig da (siehe @media (prefers-reduced-motion) ganz unten).
   Reihenfolge der Abschnitte: 1 Ton-Variablen  2 Ueberschriften  3 Kennzahl-Kacheln
   4 Karten  5 Kopfbaender (Begruessung, Statistik)  6 Knoepfe und Auswahl  7 Bewegung
   ========================================================================= */

/* ---------- 1 · Tonwerte ----------
   Jede Kachel traegt EINEN Ton; Flaeche, Rand, Symbol und Zahl leiten sich davon ab. */
:root {
  /* Die Baender (Begruessung, Statistik, Schlaegerkarte, Fenster) sind ein MITTLERES Gruen der Gestaltung -
     vorher fast schwarz, das wirkte gegen den Rest der Seite zu schwer. Hell gerechnet aus --status-good; im
     Dunkelmodus (siehe unten) wieder das tiefe Brand-Dunkel. */
  --band-a: color-mix(in oklab, var(--status-good) 84%, #fff);
  --band-b: color-mix(in oklab, var(--status-good) 78%, var(--brand-strong));
  --ton-schein: color-mix(in oklab, #fff 95%, var(--band-b));         /* Schrift auf den Baendern */
  --ton-schein-2: color-mix(in oklab, #fff 82%, var(--band-b));
  --ton-licht: color-mix(in oklab, var(--gold) 34%, #fff);            /* helle Clay-Tinte fuer Kleingedrucktes auf dem Band */
  --band-grund: linear-gradient(160deg, var(--band-a), var(--band-b) 78%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band-a: color-mix(in oklab, var(--brand-strong), #fff 9%); --band-b: var(--brand-strong);
    --ton-schein: color-mix(in oklab, #fff 90%, var(--brand-strong)); --ton-schein-2: color-mix(in oklab, #fff 66%, var(--brand-strong));
  }
}
:root[data-theme="dark"] {
  --band-a: color-mix(in oklab, var(--brand-strong), #fff 9%); --band-b: var(--brand-strong);
  --ton-schein: color-mix(in oklab, #fff 90%, var(--brand-strong)); --ton-schein-2: color-mix(in oklab, #fff 66%, var(--brand-strong));
}
[data-ton="gold"]  { --tone: var(--gold); }
[data-ton="gut"]   { --tone: var(--status-good); }
[data-ton="marke"] { --tone: var(--brand); }
[data-ton="krit"]  { --tone: var(--status-critical); }
[data-ton="warn"]  { --tone: var(--status-warning); }

/* ---------- 1b · Papier im Hintergrund (Gestaltung "Papier") ----------
   Das Papier liegt auf .shell, nicht auf .content: .shell fuellt immer den ganzen Bildschirm, .content
   endet mit dem Inhalt - auf kurzen Seiten haette sich sonst eine Kante gezeigt. Der Ton ist eine Mischung
   aus dem Grund und einem waermeren Papier und kommt aus den Gestaltungs-Variablen (im Dunkelmodus dunkel,
   dann ohne Maserung). Der Bereichston (--bereichston) faerbt den Kopf der Seite leicht ein, wie vorher. */
:root { --papier-ton: color-mix(in srgb, color-mix(in oklab, var(--bg) 80%, var(--surface-3)), var(--gold) 2%); }
body { --bereichston: var(--brand); }
body.bereich-badminton { --bereichston: var(--series-badminton); }
body.bereich-tennis { --bereichston: var(--series-tennis); }
body.bereich-platz { --bereichston: var(--gold); }
body.bereich-finanzen { --bereichston: var(--status-good); }
body.bereich-wissen { --bereichston: var(--wissen, var(--brand)); }
:root { --papier-bilder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .07 -.01'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }
:root:root:root:not([data-design]) .shell, :root:root:root[data-design="papier"] .shell {
  background-color: var(--papier-ton);
  background-image:
    var(--papier-bilder),
    linear-gradient(180deg, color-mix(in srgb, var(--bereichston) 5%, transparent), transparent 260px),
    radial-gradient(75% 45% at 100% 0%, color-mix(in srgb, var(--gold) 3%, transparent), transparent 70%),
    radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:root:root:not([data-theme="light"]):not([data-design]) .shell, :root:root:root:not([data-theme="light"])[data-design="papier"] .shell { background-image: none; }
}
:root:root:root[data-theme="dark"]:not([data-design]) .shell, :root:root:root[data-theme="dark"][data-design="papier"] .shell { background-image: none; }
/* .content selbst ist nur noch Durchblick aufs Papier (am Handy war es reines Weiss, am Computer ein eigener Ton) */
:root:root:root:not([data-design]) .content, :root:root:root[data-design="papier"] .content {
  /* Das Blatt mit den Inhalten ist undurchsichtig im selben Papierton wie der Grund darunter: so scheint das Kopfbild
     nicht hindurch, und trotzdem gibt es auf kurzen Seiten keine Kante zum Grund. */
  background-color: var(--papier-ton); background-image: var(--papier-bilder);
}
@media (prefers-color-scheme: dark) {
  :root:root:root:not([data-theme="light"]):not([data-design]) .content, :root:root:root:not([data-theme="light"])[data-design="papier"] .content { background-image: none; }
}
:root:root:root[data-theme="dark"]:not([data-design]) .content, :root:root:root[data-theme="dark"][data-design="papier"] .content { background-image: none; }
:root:root:not([data-design]) .topbar::after, :root:root[data-design="papier"] .topbar::after { background: color-mix(in srgb, var(--bereichston) 5%, var(--papier-ton)); }

/* ---------- 2 · Ueberschriften ----------
   Kurze Clay-Linie unter jeder Abschnittsueberschrift, der Chip davor in Clay getoent. */
:root:root .content .section-head {
  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;
}
:root:root .content .section-head .kpi-ico:not(.kpi-ico-gruen) {
  background: color-mix(in srgb, var(--gold) 15%, var(--surface)); color: var(--gold);
}
:root:root .content .section-head .kpi-ico.kpi-ico-gruen { background: color-mix(in srgb, var(--status-good) 15%, var(--surface)); color: var(--status-good); }
.content .section-head h2::before { display: none; }

/* ---------- 3 · Kennzahl-Kacheln ---------- */
/* Kacheln wie in einem professionellen Dashboard: ruhige weisse Flaeche, die Farbe sitzt nur an wenigen Stellen -
   dem Symbol, einer kurzen Linie oben und bei Offenem/Nachzubestellendem in der Zahl. */
:root:root .kpi-grid-dash .kpi { background: var(--surface); border-color: var(--border); position: relative; }
:root:root .kpi-grid-dash .kpi::before {
  content: ""; position: absolute; left: 20px; top: -1px; width: 34px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--tone, var(--brand)); opacity: .9;
}
:root:root .kpi .kpi-ico {
  width: 28px; height: 28px; border-radius: 50%; font-size: 12px;
  background: color-mix(in srgb, var(--tone, var(--brand)) 15%, var(--surface)); color: var(--tone, var(--brand)); box-shadow: none;
}
:root:root .kpi[data-ton] .value, :root:root .kpi[data-ton] .kpi-split-teil .value { color: var(--ink); }
:root:root .kpi[data-ton="krit"] .value, :root:root .kpi[data-ton="warn"] .value { color: var(--tone); }
:root:root .kpi[data-ton] .kpi-split-teil:nth-child(2) .value { color: var(--ink); }
:root:root .kpi .label { color: var(--ink-secondary); letter-spacing: .07em; overflow-wrap: normal; word-break: normal; }
:root:root .kpi .kpi-kopf { gap: 7px; }
:root:root .kpi .kpi-ico { flex: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root:root .kpi-grid-dash .kpi:hover { transform: translateY(-3px); box-shadow: var(--schatten-2), var(--glanz); }
}

/* Handy: Zahl etwas kleiner, damit die Beschriftung daneben nicht mitten im Wort bricht */
@media (max-width: 560px) {
  :root:root .kpi > .value, :root:root .kpi-split-teil > .value { font-size: 22px; }
  :root:root .kpi .label { font-size: 10.5px; letter-spacing: .06em; overflow-wrap: normal; word-break: normal; hyphens: manual; }
}

:root:root:root #content .kpi[data-ton] { border-top-width: 1px; border-top-color: var(--border); }

/* Handy: die Kennzahlen-Reihen (Kasse, Bestand, Schiedsrichter ...) als kompaktes Raster statt vier hoher
   Einzelkacheln untereinander - die Zahl ist der Blickfang, die Zeile darunter nur Beiwerk. */
@media (max-width: 560px) {
  :root:root #content .kpi-grid:not(.kpi-grid-dash) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
  :root:root #content .kpi-grid.saiten-ueberblick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root:root #content .kpi-grid:not(.kpi-grid-dash) > .kpi {
    display: block; position: relative; padding: 12px 12px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  }
  :root:root #content .kpi-grid:not(.kpi-grid-dash) > .kpi::before {
    content: ""; position: absolute; left: 14px; top: -1px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone, var(--brand));
  }
  :root:root #content .kpi-grid:not(.kpi-grid-dash) > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :root:root #content .kpi-grid.saiten-ueberblick > .kpi:last-child:nth-child(odd) { grid-column: auto; }
  :root:root #content .kpi-grid:not(.kpi-grid-dash) > .kpi > .kpi-kopf { margin-bottom: 8px; gap: 6px; }
  :root:root #content .kpi-grid:not(.kpi-grid-dash) > .kpi .kpi-ico { width: 22px; height: 22px; font-size: 10.5px; }
  :root:root #content .kpi-grid:not(.kpi-grid-dash) > .kpi > .value { display: block; font-size: 20px; margin-top: 0; text-align: left; justify-self: start; }
  :root:root #content .kpi-grid:not(.kpi-grid-dash) > .kpi > .sub { font-size: 11px; line-height: 1.25; margin-top: 4px; }
  :root:root #content .kpi-grid.saiten-ueberblick > .kpi > .sub { display: none; }
  :root:root #content .kpi-grid.saiten-ueberblick > .kpi > .value { font-size: 17px; }
  :root:root #content .kpi-grid.saiten-ueberblick > .kpi .label { font-size: 9px; letter-spacing: .04em; }
  :root:root #content .kpi-grid.saiten-ueberblick > .kpi .kpi-ico { display: none; }
}

/* ---------- 4 · Karten ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ekarte, .saite-karte, .arbeit-karte, .arbeit-ticket, .fb-karte, .chart-card, .card:not(.kein-heben) {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .25s;
  }
  .ekarte:hover, .saite-karte:hover, .arbeit-ticket:hover, .fb-karte:hover {
    transform: translateY(-2px); box-shadow: var(--schatten-2), var(--glanz);
  }
}

/* Zeilenkarten (Bespannungen, Zahlungen, Einsaetze): statt eines schmalen Farbstreifens links ein
   Farbverlauf von links - Tennis Clay, Badminton Gruen; Offen rot, Fertig/Bezahlt gruen, Angenommen
   bernstein. Der Ton steht in --tone und treibt Verlauf, Rand und Kreis. */
:root:root .ekarte { --tone: var(--ink-muted); border-radius: 18px; }
:root:root .ekarte.sport-tennis { --tone: var(--series-tennis); }
:root:root .ekarte.sport-badminton { --tone: var(--series-badminton); }
:root:root .ekarte:has(.badge.good) { --tone: var(--status-good); }
:root:root .ekarte:has(.badge.warning) { --tone: var(--status-warning); }
:root:root .ekarte:has(.badge.critical) { --tone: var(--status-critical); }
:root:root #content .ekarte,
:root:root #content .ekarte:has(.badge.good), :root:root #content .ekarte:has(.badge.warning), :root:root #content .ekarte:has(.badge.critical),
:root:root #content .ekarte.sport-tennis:not(:has(.badge.good, .badge.warning, .badge.critical)),
:root:root #content .ekarte.sport-badminton:not(:has(.badge.good, .badge.warning, .badge.critical)) {
  background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 7%, var(--surface)) 0, var(--surface) 48%);
  border-color: color-mix(in srgb, var(--tone) 16%, var(--border));
  box-shadow: var(--shadow), var(--glanz);
  position: relative;
}
:root:root .ekarte:hover,
:root:root .ekarte:has(.badge.good):hover, :root:root .ekarte:has(.badge.warning):hover, :root:root .ekarte:has(.badge.critical):hover {
  box-shadow: var(--schatten-2), var(--glanz);
}
:root:root .ekarte .ek-initial {
  background: linear-gradient(145deg, var(--tone), color-mix(in oklab, var(--tone) 72%, #000)); color: #fff;
  box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--tone) 80%, transparent);
}
/* Farb-Akzente in der Zeile: kurze Markierung links, Datum und Haerte als getoente Pillen, Schlaeger mit Punkt */
:root:root #content .ekarte::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 4px; border-radius: 0 4px 4px 0; background: var(--tone);
}
:root:root .ekarte .ek-datum { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 13%, transparent); }
:root:root .ekarte .ek-datum, :root:root .ekarte .ek-datum b { color: color-mix(in srgb, var(--tone) 78%, var(--ink)); }
:root:root .ekarte .ek-kg { padding: 2px 10px; border-radius: 999px; font-weight: 600; background: color-mix(in srgb, var(--series-tennis) 14%, transparent); color: color-mix(in srgb, var(--series-tennis) 82%, var(--ink)); }
:root:root .ekarte.sport-badminton .ek-kg { background: color-mix(in srgb, var(--series-badminton) 14%, transparent); color: color-mix(in srgb, var(--series-badminton) 82%, var(--ink)); }
:root:root .ekarte .ek-schlaeger { font-weight: 600; color: var(--ink); }
:root:root .ekarte .ek-schlaeger::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--tone); vertical-align: 1px; }
:root:root .ekarte .ek-rest { padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-secondary); }
:root:root .ekarte .ek-fuss { border-top: 0; padding-top: 0; margin-top: var(--raum-2); }

/* ---------- 5 · Kopfbaender ----------
   Das dunkle Band der Schlaegerkarte: Brand-Farbe der Gestaltung, Clay-Schein unten links, ein feines
   Saitenmuster, das nach rechts oben sichtbar wird. Fuer die Begruessung und den Statistik-Kopf. */
.band-dunkel, :root:root:root #content .hero, :root:root:root #content .card.st-kopf {
  position: relative; isolation: isolate; overflow: hidden; color: var(--ton-schein);
  border: 0; border-radius: 22px;
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(80% 140% at 0% 100%, color-mix(in srgb, var(--gold) 46%, transparent), transparent 66%),
    var(--band-grund);
  box-shadow: var(--schatten-2);
}
.band-dunkel::before, :root:root:root #content .hero::before, :root:root:root #content .card.st-kopf::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%);
}

/* Begruessung (Verwaltung): beide Haelften liegen jetzt auf EINEM dunklen Band */
:root:root:root #content .hero { padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.8vw, 36px); gap: clamp(16px, 2vw, 26px); }
:root:root:root #content .hero-text, :root:root:root #content .hero-einsichten {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}
:root:root .hero-datum { color: var(--ton-licht); }
:root:root .hero-gruss { color: var(--ton-schein); font-weight: 400; letter-spacing: -.015em; }
:root:root .hero-marke { background: var(--gold); color: var(--auf-gold); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--gold) 80%, transparent), 0 0 0 3px rgba(255,255,255,.18); }
:root:root .he { color: var(--ton-schein-2); }
:root:root .he.dringend { color: var(--ton-schein); }
:root:root .he-punkt { background: rgba(255,255,255,.55); }
:root:root .he.gut .he-punkt { background: #c9f0d8; }
:root:root .he.achtung .he-punkt { background: #ffd978; }
:root:root .he.dringend .he-punkt { background: #ffb08f; }
:root:root .hero-knoepfe .btn { background: var(--gold); border-color: var(--gold); color: var(--auf-gold); }
@media (min-width: 901px) {
  :root:root .hero-einsichten { border-left: 1px solid rgba(255,255,255,.16); padding-left: clamp(20px, 2vw, 30px); }
}
@media (max-width: 900px) {
  :root:root .hero-einsichten { padding-top: var(--raum-3); border-top: 1px solid rgba(255,255,255,.16); }
}
@media (max-width: 560px) { :root:root:root #content .hero { padding: 18px 18px 16px; border-radius: 20px; } }

/* Statistik-Kopf auf dem dunklen Band: Zahlen hell, Jahres-Saeulen mint, der laufende Monat in Clay */
:root:root:root #content .card.st-kopf { padding: 26px 30px 22px; }
@media (max-width: 560px) { :root:root:root #content .card.st-kopf { padding: 20px 18px 16px; border-radius: 20px; } }
:root:root .st-kopf .label, :root:root .st-kopf .js-monat, :root:root .st-kopf .js-wert, :root:root .st-kopf .st-split { color: var(--ton-schein-2); }
:root:root .st-kopf .st-gross, :root:root .st-kopf .st-mittel, :root:root .st-kopf .st-split b { color: var(--ton-schein); }
:root:root .st-kopf .st-mittel.gold { color: #d6f5e2; }
:root:root .st-kopf .st-mittel[style] { color: #ffc2a6 !important; }
:root:root .st-kopf .kpi-delta.auf { color: #d6f5e2; }
:root:root .st-kopf .kpi-delta.ab { color: #ffc2a6; }
:root:root .st-kopf .st-jahr-marke { color: #fff; opacity: .08; }
:root:root .st-kopf .kpi-ico { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
:root:root .st-kopf .jahr-saeulen { border-top-color: rgba(255,255,255,.16); }
:root:root .st-kopf .js-spur { background: rgba(255,255,255,.12); }
:root:root .st-kopf .js-spur i { background: rgba(255,255,255,.88); }
:root:root .st-kopf .js-spalte.jetzt .js-spur i { background: #ffb98f; }
:root:root .st-kopf .js-spalte.jetzt .js-monat, :root:root .st-kopf .js-spalte.jetzt .js-wert { color: var(--ton-licht); }
:root:root .st-kopf .js-geld { color: var(--ton-licht); }
:root:root .st-kopf .js-spalte.kuenftig .js-spur { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 4px, transparent 4px 8px); }

/* ---------- 6 · Knoepfe und Auswahl ---------- */
:root:root .btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s, border-color .2s, color .2s; }
@media (hover: hover) { :root:root .btn:hover { transform: translateY(-1px); } }
:root:root .btn:active { transform: scale(.98); }

/* Bestand: Rollenkarten mit Ton (gruen = genug da, bernstein = Ersatz im Schrank, rot = nachbestellen,
   Clay = Probe oder Kundensaite) statt des schmalen Streifens links */
:root:root .saite-karte { --tone: var(--gold); border-radius: 20px; }
:root:root .saite-karte.vorrat { --tone: var(--status-good); }
:root:root .saite-karte.lage-ersatzDa { --tone: var(--status-warning); }
:root:root .saite-karte.lage-nachbestellen { --tone: var(--status-critical); }
:root:root #content .saite-karte, :root:root #content .saite-karte.lage-ersatzDa, :root:root #content .saite-karte.lage-nachbestellen {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 5%, var(--surface)) 0, var(--surface) 40%);
  border-color: color-mix(in srgb, var(--tone) 14%, var(--border));
  box-shadow: var(--shadow), var(--glanz);
}
@media (hover: hover) {
  :root:root .saite-karte:hover, :root:root .saite-karte.lage-ersatzDa:hover, :root:root .saite-karte.lage-nachbestellen:hover { box-shadow: var(--schatten-2), var(--glanz); }
}
:root:root .saite-karte .profil-stat-chip { background: color-mix(in srgb, var(--tone) 8%, var(--surface)); border-color: color-mix(in srgb, var(--tone) 18%, var(--border)); border-radius: 12px; }
:root:root .saite-karte .psc-value { color: var(--tone); }

/* Diagramm-Karten: Ueberschrift-Chip in Clay-Tint wie bei den Abschnitten */
:root:root .chart-card h3 .kpi-ico, :root:root .marge-kopf h3 .kpi-ico {
  background: color-mix(in srgb, var(--gold) 15%, var(--surface)); color: var(--gold); box-shadow: none; border-radius: 9px;
}

/* ---------- 6 · Knoepfe und Auswahl (Fortsetzung) ----------
   Hover wird ueberall Clay - dieselbe Bewegung wie bei den Knoepfen auf "Mein Profil". */
:root:root .btn:not(.ghost):not(.gold):not(.gefahr):not(.danger):not(:disabled):hover { background: var(--gold); border-color: var(--gold); color: var(--auf-gold); }
:root:root .btn.ghost:hover { background: color-mix(in srgb, var(--gold) 10%, var(--surface)); border-color: var(--gold); color: var(--gold); }
:root:root .btn-mini { transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s, color .2s; }
:root:root .btn-mini:hover { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
:root:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, :root:root select:focus, :root:root textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: none;
}
:root:root .search-box { transition: border-color .2s, box-shadow .2s; }
:root:root .search-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }

/* Filter-Pillen: der aktive Knopf ist dunkel (wie die Auswahl unter "Schon ausprobiert") */
:root:root .fb-filter button { padding: 6px 14px; font-weight: 600; background: var(--surface); border-color: var(--border); transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, color .2s, background .2s; }
:root:root .fb-filter button:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); color: var(--brand); transform: translateY(-1px); }
:root:root .fb-filter button.an { background: var(--brand); border-color: var(--brand); color: var(--auf-brand); }

/* Umschalter (Segmente): der aktive Teil ist Clay */
:root:root .fb-view-toggle { padding: 4px; gap: 3px; background: var(--surface-2); border-color: var(--border); overflow: visible; }
:root:root .fb-view-toggle button { border-radius: 999px; padding: 7px 16px; transition: background .25s, color .25s, box-shadow .25s; }
:root:root .fb-view-toggle button.an { background: var(--gold); color: var(--auf-gold); box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--gold) 85%, transparent); }

/* Sport-Umschalter (Tennis | Badminton): der aktive Teil ist Clay, wie die anderen Umschalter */
:root:root .sport-umschalter { background: var(--surface-2); border: 1px solid var(--border); padding: 4px; gap: 3px; }
:root:root .sport-umschalter button { border-radius: 999px; transition: background .25s, color .25s, box-shadow .25s; }
:root:root .sport-umschalter button.active { background: var(--gold); color: var(--auf-gold); box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--gold) 85%, transparent); }

/* Zwischenzeilen in langen Listen (Heute, Gestern, Oktober 2026 ...): eine Clay-Pille statt grauer Kleinschrift */
:root:root .gruppen-zeile .gz-text {
  display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 13%, var(--surface)); color: color-mix(in srgb, var(--gold) 85%, var(--ink));
  font-weight: 700; letter-spacing: .09em;
}
:root:root .gruppen-zeile.monat .gz-text {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--border));
  padding-bottom: 3px;
}

/* ---------- 6b · Tabellen ---------- */
:root:root .table-wrap { border-radius: 18px; }
:root:root thead th { background: color-mix(in srgb, var(--gold) 8%, var(--surface-2)); color: var(--ink-secondary); }
:root:root tbody tr:hover td, :root:root .table-wrap tbody tr:hover td.actions { background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
:root:root thead th.sortable:hover { color: var(--gold); }

/* Verwaltung, "Offene Posten": steht neben "In Arbeit" nur eine halbe Seite zur Verfuegung, war die Tabelle
   immer 640 px breit und schob den Knopf "Bezahlt?" ueber den Betrag. Jetzt darf sie schrumpfen, und
   in der schmalen Haelfte entfaellt die Spalte "Sportart" (steht ohnehin im Namen der Zeile darunter nicht -
   der Betrag und die Tage zaehlen mehr). */
:root:root .verw-doppel-teil .table-wrap { container-type: inline-size; }
:root:root .verw-doppel-teil .table-wrap table { min-width: 0; }
@container (max-width: 520px) {
  .verw-doppel-teil table thead th:nth-child(2), .verw-doppel-teil table tbody tr:not(.summenzeile) td:nth-child(2) { display: none; }
}

/* ---------- 6c · Fenster (Einstellungen, Eintragen, Hilfe ...) ----------
   Der Kopf ist das dunkle Band der Marke - am Handy war er das schon, jetzt auch am Computer. */
:root:root .modal-box { border-radius: 24px; }
:root:root .modal-head {
  position: relative; isolation: isolate; overflow: hidden; border-bottom: 0; color: var(--ton-schein);
  background:
    radial-gradient(75% 150% at 0% 100%, color-mix(in srgb, var(--gold) 40%, transparent), transparent 66%),
    var(--band-grund);
}
:root:root .modal-head::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(70% 160% at 100% 0%, #000, transparent 80%); mask-image: radial-gradient(70% 160% at 100% 0%, #000, transparent 80%);
}
:root:root .modal-head h2 { color: var(--ton-schein); font-family: var(--font-titel); font-weight: var(--titel-weight); letter-spacing: -.012em; }
:root:root .modal-head .modal-pfad { color: var(--ton-licht); }
:root:root .modal-head .modal-zurueck { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
:root:root .modal-head .modal-close { color: var(--ton-schein); }
:root:root .modal-head .modal-close:hover { background: rgba(255,255,255,.14); color: #fff; }
:root:root .modal-body { background: var(--papier-ton); }
:root:root .modal-btn.primary:not(:disabled):hover { background: var(--gold); border-color: var(--gold); color: var(--auf-gold); }
:root:root .modal-btn:not(.primary):hover { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }

/* Auswahlzeilen (Einstellungen, Schlaeger waehlen ...): getoente Kacheln mit gefuelltem Symbolkreis */
:root:root .modal-nav-btn {
  --tone: var(--gold); border-radius: 16px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 9%, var(--surface)) 0, var(--surface) 55%);
  border-color: color-mix(in srgb, var(--tone) 22%, var(--border));
}
:root:root .modal-nav-row > .modal-nav-btn:nth-child(even) { --tone: var(--status-good); }
:root:root .modal-nav-btn:hover { background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 14%, var(--surface)) 0, var(--surface) 62%); border-color: var(--tone); transform: translateY(-2px); }
:root:root .modal-nav-ico { background: var(--tone, var(--gold)); color: var(--surface); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--tone, var(--gold)) 70%, transparent); }
:root:root .modal-nav-btn .arrow { transition: transform .25s; }
:root:root .modal-nav-btn:hover .arrow { transform: translateX(3px); color: var(--tone); }
:root:root .modal-overlay.als-seite .modal-nav-btn { box-shadow: var(--shadow); }
:root:root .modal-overlay.als-seite .modal-nav-btn:hover { transform: translateY(-2px); }

/* ---------- 7 · Bewegung ----------
   Beim Oeffnen einer Seite steigen Ueberschriften, Kacheln und Karten gestaffelt auf
   (#content[data-ein], gesetzt in renderContent()). Die Reihenfolge steht in --i (programm.js). */
@keyframes neuHoch { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: no-preference) {
  #content[data-ein] [data-i] { animation: neuHoch .65s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 45ms) backwards; }
}
@keyframes neuFenster { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes neuWachsen { from { transform: scaleY(0); } }
@keyframes neuStrich { from { stroke-dashoffset: 1; } }
@keyframes neuBreit { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  #content[data-ein] .js-spur i { transform-origin: bottom; animation: neuWachsen .9s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--sp, 0) * 40ms) backwards; }
}
@media (prefers-reduced-motion: no-preference) {
  .modal-overlay.show .modal-box { animation: neuFenster .45s cubic-bezier(.2,.8,.2,1) backwards; }
  .modal-overlay.show .modal-nav-row > .modal-nav-btn { animation: neuHoch .55s cubic-bezier(.2,.7,.2,1) backwards; }
  .modal-overlay.show .modal-nav-row > .modal-nav-btn:nth-child(2) { animation-delay: .06s; }
  .modal-overlay.show .modal-nav-row > .modal-nav-btn:nth-child(3) { animation-delay: .12s; }
  .modal-overlay.show .modal-nav-row > .modal-nav-btn:nth-child(4) { animation-delay: .18s; }
  .modal-overlay.show .modal-nav-row > .modal-nav-btn:nth-child(n+5) { animation-delay: .24s; }
  #content[data-ein] .roll-balken .rb-fuell { transform-origin: left center; animation: neuBreit 1s cubic-bezier(.2,.8,.2,1) .3s backwards; }
  /* Saeulen und Linien in den Diagrammen: SVG-Pfade ohne Klassen, deshalb ueber die Fuellfarbe gefasst */
  #content[data-ein] .chart-card svg path[fill^="var(--series"], #content[data-ein] .chart-card svg path[fill^="var(--brand"], #content[data-ein] .chart-card svg path[fill^="var(--gold"] {
    transform-box: fill-box; transform-origin: bottom; animation: neuWachsen .9s cubic-bezier(.2,.8,.2,1) .35s backwards;
  }
  #content[data-ein] .chart-card svg path[fill^="var(--series"]:nth-of-type(2n) { animation-delay: .45s; }
  #content[data-ein] .chart-card svg path[fill^="var(--series"]:nth-of-type(3n) { animation-delay: .55s; }
}
@media (prefers-reduced-motion: no-preference) {
  #content [data-spaet] { animation: none !important; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  #content [data-spaet]:not(.sichtbar) { opacity: 0; transform: translateY(16px); }
}
/* Verlaufslinien in den Kacheln: Farbe vom Ton der Kachel, die Linie zeichnet sich */
:root:root .kpi .kpi-spark-svg path[fill="none"] { stroke: var(--tone, var(--brand)); }
:root:root .kpi .kpi-spark-svg stop { stop-color: var(--tone, var(--brand)); }
@keyframes neuStrichPx { from { stroke-dashoffset: 700; } }
@keyframes neuEin { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  #content[data-ein] .kpi-spark-svg path[fill="none"] { stroke-dasharray: 700; animation: neuStrichPx 1.8s cubic-bezier(.35,.1,.2,1) .5s backwards; }
  #content[data-ein] .kpi-spark-svg path[fill^="url"] { animation: neuEin 1s ease 1.1s backwards; }
  /* Begruessungsband: Datum, Gruss und die drei Hinweise kommen nacheinander */
  #content[data-ein] .hero-datum, #content[data-ein] .hero-gruss, #content[data-ein] .hero-marke, #content[data-ein] .he { animation: neuHoch .7s cubic-bezier(.2,.7,.2,1) backwards; }
  #content[data-ein] .hero-datum { animation-delay: .2s; }
  #content[data-ein] .hero-gruss { animation-delay: .28s; }
  #content[data-ein] .hero-marke { animation-delay: .4s; }
  #content[data-ein] .he:nth-child(1) { animation-delay: .5s; }
  #content[data-ein] .he:nth-child(2) { animation-delay: .6s; }
  #content[data-ein] .he:nth-child(3) { animation-delay: .7s; }
  /* Symbolkreise der Kacheln drehen sich beim Darueberfahren ein Stueck */
  .kpi .kpi-ico { transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
  .kpi:hover .kpi-ico { transform: rotate(-12deg) scale(1.1); }
}
/* Ranglisten-Balken (Top 10 Spieler ...): Clay statt grauem Gruen, der Erste kraeftig - und sie wachsen von links */
:root:root .chart-card svg rect[fill="var(--brand)"] { fill: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  #content[data-ein] .chart-card svg rect[fill="var(--brand)"] { transform-box: fill-box; transform-origin: left center; animation: neuBreit .9s cubic-bezier(.2,.8,.2,1) .35s backwards; }
  #content[data-ein] .chart-card svg rect[fill="var(--brand)"]:nth-of-type(4n) { animation-delay: .45s; }
  #content[data-ein] .chart-card svg rect[fill="var(--brand)"]:nth-of-type(6n) { animation-delay: .55s; }
}
@media print { #content [data-spaet] { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  #content [data-i] { animation: none !important; }
}

/* ---------- 8 · Schlaegerkarte (Mein Profil): dasselbe mittlere Gruen wie die anderen Baender ---------- */
:root:root .pkx { --pkx-auf: var(--ton-schein); --pkx-auf-2: var(--ton-schein-2); --pkx-licht: var(--ton-licht); }
:root:root .pkx-band {
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(80% 140% at 0% 100%, color-mix(in srgb, var(--gold) 46%, transparent), transparent 66%),
    var(--band-grund);
}
:root:root .pkx-ring-spur { stroke: rgba(255,255,255,.22); }
:root:root .pkx-reiter { border-top-color: rgba(255,255,255,.2); }

/* Zwischenzeilen der Kartenlisten (Heute, Gestern, Oktober 2026): Clay-Punkt und auslaufende Linie */
:root:root .karten-gruppe {
  display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 80%, var(--ink));
}
:root:root .karten-gruppe::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
:root:root .karten-gruppe::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 40%, var(--border)), transparent); }

/* Mein Profil: auch dort keine ganzflaechig getoenten Kacheln mehr - weisse Flaeche, Farbe in Symbol, Zahl und Randlinie */
:root:root .pkx-li, :root:root .pkx-zt, :root:root .ph-stat {
  background: var(--surface); border-color: color-mix(in srgb, var(--tone) 14%, var(--border));
}
:root:root .pkx-li { box-shadow: var(--shadow), var(--glanz); }
:root:root .pkx-li > i, :root:root .pkx-zt dt i { background: color-mix(in srgb, var(--tone) 16%, var(--surface)); color: var(--tone); }

/* Bespannungs-Tabellen (Tennis/Badminton am Computer): mehr Farbe an den Akzenten - Punkt vor dem Namen, Haerte und Datum
   als getoente Pillen, die Zeile bekommt beim Darueberfahren einen Hauch ihres Tons. Der Ton folgt dem Stand. */
:root:root body.bereich-tennis #content tbody tr:not(.gruppen-zeile) { --tone: var(--series-tennis); }
:root:root body.bereich-badminton #content tbody tr:not(.gruppen-zeile) { --tone: var(--series-badminton); }
:root:root body #content tbody tr.zeile-arbeit { --tone: var(--status-warning); }
:root:root body #content tbody tr.zeile-fertig { --tone: var(--status-good); }
:root:root body #content tbody tr.zeile-offen { --tone: var(--status-critical); }
:root:root :is(body.bereich-tennis, body.bereich-badminton) #content tbody tr:not(.gruppen-zeile):hover td { background: color-mix(in srgb, var(--tone) 7%, var(--surface)); }
:root:root :is(body.bereich-tennis, body.bereich-badminton) #content .name-knopf { font-weight: 600; }
:root:root :is(body.bereich-tennis, body.bereich-badminton) #content .name-knopf::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--tone); vertical-align: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent);
}
:root:root :is(body.bereich-tennis, body.bereich-badminton) #content tbody tr:not(.gruppen-zeile) td.num:nth-child(2) {
  text-align: center;
}
:root:root :is(body.bereich-tennis, body.bereich-badminton) #content tbody tr:not(.gruppen-zeile) td.num:nth-child(2):not(:empty) {
  color: color-mix(in srgb, var(--series-tennis) 85%, var(--ink)); font-weight: 600;
}
:root:root body.bereich-badminton #content tbody tr:not(.gruppen-zeile) td.num:nth-child(2):not(:empty) { color: color-mix(in srgb, var(--series-badminton) 85%, var(--ink)); }
:root:root :is(body.bereich-tennis, body.bereich-badminton) #content td.datum-zelle b {
  display: inline-block; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 80%, var(--ink));
}

/* =========================================================================
   9 · HELLE BAENDER (ersetzt die gruenen Baender von oben)
   Die Baender (Begruessung, Statistik, Schlaegerkarte, Fenster) sind jetzt leichte Papier-Flaechen: weiss mit einem
   Hauch Gruen oben rechts und einem Hauch Clay unten links, Schrift in Tinte, Farbe nur in kleinen Akzenten.
   Alles ist aus Gestaltungs-Variablen gerechnet - im Dunkelmodus werden aus den hellen Flaechen dunkle, ohne
   dass hier etwas geaendert werden muss.
   ========================================================================= */
:root {
  --ton-schein: var(--ink);
  --ton-schein-2: var(--ink-secondary);
  --ton-licht: color-mix(in srgb, var(--gold) 84%, var(--ink));
  --band-linie: color-mix(in srgb, var(--ink) 11%, transparent);
  --band-hell:
    radial-gradient(70% 160% at 100% 0%, color-mix(in srgb, var(--status-good) 11%, transparent), transparent 70%),
    radial-gradient(80% 150% at 0% 100%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 68%),
    var(--surface);
}
.band-dunkel, :root:root:root #content .hero, :root:root:root #content .card.st-kopf {
  color: var(--ink); border: 1px solid var(--border); background: var(--band-hell); box-shadow: var(--shadow), var(--glanz);
}
.band-dunkel::before, :root:root:root #content .hero::before, :root:root:root #content .card.st-kopf::before {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 15px);
}
/* Begruessung */
:root:root .hero-datum { color: var(--ton-licht); }
:root:root .hero-gruss { color: var(--ink); }
:root:root .hero-marke { background: var(--gold); color: var(--auf-gold); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--gold) 70%, transparent), 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent); }
:root:root .he { color: var(--ink-secondary); }
:root:root .he.dringend { color: var(--ink); }
:root:root .he-punkt { background: var(--ink-muted); }
:root:root .he.gut .he-punkt { background: var(--status-good); }
:root:root .he.achtung .he-punkt { background: var(--status-warning); }
:root:root .he.dringend .he-punkt { background: var(--status-critical); }
@media (min-width: 901px) { :root:root .hero-einsichten { border-left: 1px solid var(--border); } }
@media (max-width: 900px) { :root:root .hero-einsichten { border-top: 1px solid var(--border); } }
/* Statistik-Kopf */
:root:root .st-kopf .label, :root:root .st-kopf .js-monat, :root:root .st-kopf .js-wert, :root:root .st-kopf .st-split { color: var(--ink-secondary); }
:root:root .st-kopf .st-gross, :root:root .st-kopf .st-mittel, :root:root .st-kopf .st-split b { color: var(--ink); }
:root:root .st-kopf .st-mittel.gold { color: var(--status-good); }
:root:root .st-kopf .st-mittel[style] { color: var(--status-critical) !important; }
:root:root .st-kopf .kpi-delta.auf { color: var(--status-good); }
:root:root .st-kopf .kpi-delta.ab { color: var(--status-critical); }
:root:root .st-kopf .st-jahr-marke { color: var(--ink); opacity: .05; }
:root:root .st-kopf .kpi-ico { background: color-mix(in srgb, var(--gold) 15%, var(--surface)); color: var(--gold); }
:root:root .st-kopf .jahr-saeulen { border-top-color: var(--border); }
:root:root .st-kopf .js-spur { background: var(--surface-2); }
:root:root .st-kopf .js-spur i { background: color-mix(in srgb, var(--status-good) 62%, var(--surface)); }
:root:root .st-kopf .js-spalte.jetzt .js-spur i { background: var(--gold); }
:root:root .st-kopf .js-spalte.jetzt .js-monat, :root:root .st-kopf .js-spalte.jetzt .js-wert { color: var(--gold); }
:root:root .st-kopf .js-geld { color: var(--ton-licht); }
:root:root .st-kopf .js-spalte.kuenftig .js-spur { background: repeating-linear-gradient(135deg, var(--band-linie) 0 4px, transparent 4px 8px); }
/* Fenster-Kopf */
:root:root .modal-head { background: radial-gradient(75% 160% at 0% 100%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 66%), var(--surface); color: var(--ink); border-bottom: 1px solid var(--border); }
:root:root .modal-head::before { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 15px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 15px); }
:root:root .modal-head h2 { color: var(--ink); }
:root:root .modal-head .modal-pfad { color: var(--ton-licht); }
:root:root .modal-head .modal-zurueck { background: var(--surface-2); border-color: var(--border); color: var(--ink); }
:root:root .modal-head .modal-close { color: var(--ink-secondary); }
:root:root .modal-head .modal-close:hover { background: var(--surface-2); color: var(--ink); }
:root:root .modal-overlay.als-seite .modal-head { background: radial-gradient(75% 160% at 0% 100%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 66%), var(--surface); color: var(--ink); }
:root:root .modal-overlay.als-seite .modal-head h2 { color: var(--ink); }
:root:root .modal-overlay.als-seite .modal-close { color: var(--ink-secondary); }
:root:root .modal-overlay.als-seite .modal-zurueck { background: var(--surface-2); border-color: var(--border); color: var(--ink); }
/* Schlaegerkarte (Mein Profil) */
:root:root .pkx-band {
  background:
    radial-gradient(70% 160% at 100% 0%, color-mix(in srgb, var(--status-good) 11%, transparent), transparent 70%),
    radial-gradient(80% 150% at 0% 100%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 68%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
:root:root .pkx { --pkx-auf: var(--ink); --pkx-auf-2: var(--ink-secondary); --pkx-licht: var(--ton-licht); }
:root:root .pkx-band::before {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 15px);
}
:root:root .pkx-ring-spur { stroke: var(--band-linie); }
:root:root .pkx-ring-bogen { stroke: color-mix(in oklab, var(--pkx-status) 78%, #1a2320); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pkx-status) 30%, transparent)); }
:root:root .pkx-reiter { border-top-color: var(--border); }
:root:root .pkx .pkx-fav:hover, :root:root .pkx .pkx-fav.aktiv { color: var(--gold); }
:root:root .pkx-farbe { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
:root:root .pkx-gross .profil-schnitt { color: var(--gold); }
:root:root .profil-karussell .pk-pfeil { background: var(--surface); border-color: var(--border); color: var(--ink-secondary); }
:root:root .profil-karussell .pk-pfeil:hover { background: var(--surface-2); border-color: var(--gold); color: var(--gold); }
:root:root .pkx-ak:hover .pkx-ak-ic { background: var(--ink); color: var(--surface); }

/* =========================================================================
   10 · Mein Profil: Schlaegerkarte mittig, Knopfleiste ruhiger
   Die vier Knoepfe (Gespielt, Preset, Haerte, Griffband) waren komplett Clay. Jetzt eine ruhige Leiste: weisse
   Kacheln mit duenner Linie, das Symbol in einem zarten Gruen; erst beim Darueberfahren fuellt sich der Kreis.
   ========================================================================= */
:root:root .profil-karussell, :root:root .pk-punkte { margin-left: auto; margin-right: auto; }
:root:root .pkx-aktionen { background: var(--surface-2); border-color: var(--border); }
:root:root .pkx-ak { background: var(--surface); border: 1px solid var(--border); color: var(--ink); }
:root:root .pkx-ak-ic { background: color-mix(in srgb, var(--status-good) 14%, var(--surface)); color: var(--status-good); }
:root:root .pkx-ak:hover { background: var(--surface); color: var(--ink); border-color: color-mix(in srgb, var(--status-good) 45%, var(--border)); box-shadow: var(--shadow); }
:root:root .pkx-ak:hover .pkx-ak-ic { background: var(--status-good); color: var(--surface); }
@container (min-width: 720px) {
  :root:root .pkx-ak { background: transparent; border: 0; }
  :root:root .pkx-ak + .pkx-ak::before { background: var(--border); }
  :root:root .pkx-ak:hover { background: var(--surface); border: 0; box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--ink) 30%, transparent); }
}

/* Auf sehr breiten Bildschirmen steht die ganze Profil-Seite in einer mittigen Spalte (1400 px) statt links hinzuhaengen */
:root:root .pkx-seite > .section, :root:root .pkx-seite > .note { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* =========================================================================
   11 · Erkennungsfarbe der Schlaeger
   Jeder Schlaeger hat eine Farbe (selbst gewaehlt oder die der zuletzt aufgezogenen Saite, in --pkx-akzent). Sie sitzt
   an vier Stellen der Karte - kleine Marke oben, Schimmer im Kopf, Strich unter den Reitern, Punkt am Namen -
   und als Punkt in der Vergleichs-Tabelle. Ohne Farbe (z.B. weisse Saite) bleibt es bei Clay.
   ========================================================================= */
:root:root .pkx-band {
  background:
    radial-gradient(70% 160% at 100% 0%, color-mix(in srgb, var(--status-good) 10%, transparent), transparent 70%),
    radial-gradient(80% 150% at 0% 100%, color-mix(in srgb, var(--pkx-akzent, var(--gold)) 17%, transparent), transparent 68%),
    var(--surface);
}
:root:root .pkx-band::after { content: ""; position: absolute; left: var(--pkx-p); top: 0; width: 48px; height: 4px; border-radius: 0 0 4px 4px; background: var(--pkx-akzent, var(--gold)); }
:root:root .pkx-reiter button[aria-selected="true"] { border-bottom-color: var(--pkx-akzent, var(--gold)); }
:root:root .pkx-strich { background: var(--pkx-akzent, var(--gold)); box-shadow: 0 0 12px color-mix(in srgb, var(--pkx-akzent, var(--gold)) 55%, transparent); }
:root:root .pkx-farbe { width: 13px; height: 13px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.pkx-vgl-punkt { display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 9%, transparent); }

/* Fenster "Darstellung anpassen": Gruppen und Farbwahl */
.pf-gruppe { margin: 18px 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
.pf-schlaeger { display: grid; gap: 10px; }
.pf-zeile { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.pf-name { font-weight: 600; font-size: 14px; }
.pf-farben { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-farbe {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--f, var(--surface-3)); cursor: pointer;
  box-shadow: 0 0 0 1px var(--border-strong); transition: transform .2s cubic-bezier(.3,1.5,.5,1), box-shadow .2s;
}
.pf-farbe:hover { transform: scale(1.14); }
.pf-farbe.an { box-shadow: 0 0 0 2px var(--ink); }
.pf-farbe:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pf-auto { width: auto; height: 28px; padding: 0 12px 0 4px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-color: var(--surface-2); }
.pf-auto i { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pf-auto b { font-size: 12px; font-weight: 600; color: var(--ink); }

/* Fenster "Darstellung anpassen": Farbwahl als Auswahlliste mit Farbpunkt */
.pf-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.pf-auswahl { position: relative; display: inline-flex; align-items: center; }
.pf-punkt { position: absolute; left: 11px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 1px var(--border-strong); pointer-events: none; }
.pf-auswahl select {
  appearance: none; -webkit-appearance: none; min-width: 210px; padding: 8px 34px 8px 34px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e7a75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer;
}
@media (max-width: 520px) { .pf-zeile { grid-template-columns: minmax(0, 1fr); } .pf-auswahl, .pf-auswahl select { width: 100%; } }

/* =========================================================================
   12 · Mein Profil: die vier Knoepfe als zusammenhaengende Knopfgruppe
   Keine Kreise, keine Farbflaechen: eine ruhige Gruppe mit hauchduennen Trennlinien, Symbol und Beschriftung in Tinte.
   Beim Darueberfahren hellt sich die Zelle zart auf und das Symbol wird gruen. Alle vier sind gleich gross.
   ========================================================================= */
:root:root:root .pkx-aktionen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: none;
}
:root:root:root .pkx-ak {
  flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 64px; padding: 10px 6px; text-align: center;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.2;
  transition: background .2s, color .2s;
}
:root:root:root .pkx-ak + .pkx-ak { border-left: 1px solid var(--border); }
:root:root:root .pkx-ak::before { display: none; }
:root:root:root .pkx-ak-ic { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--ink-secondary); transform: none; transition: color .2s, transform .3s cubic-bezier(.3,1.5,.5,1); }
:root:root:root .pkx-ak-ic svg { width: 19px; height: 19px; }
:root:root:root .pkx-ak:hover { transform: none; background: color-mix(in srgb, var(--status-good) 7%, var(--surface)); color: var(--ink); border-color: var(--border); box-shadow: none; }
:root:root:root .pkx-ak:hover + .pkx-ak { border-left-color: var(--border); }
:root:root:root .pkx-ak:hover .pkx-ak-ic { background: none; color: var(--status-good); transform: translateY(-2px); }
:root:root:root .pkx-ak:active { background: color-mix(in srgb, var(--status-good) 13%, var(--surface)); transform: none; }
@container (min-width: 620px) {
  :root:root:root .pkx-ak { flex-direction: row; gap: 11px; min-height: 56px; font-size: 14.5px; }
  :root:root:root .pkx-ak-ic svg { width: 20px; height: 20px; }
}

/* =========================================================================
   13 · Mein Profil: vier Knoepfe mit eigenem Charakter (ersetzt die Knopfgruppe von oben)
   Vier gleich grosse Kacheln, jede mit ihrer eigenen gedaempften Farbe, damit man sie auf einen Blick unterscheidet:
   Gespielt gruen, Preset bernstein, Haerte blau, Griffband Clay. Symbol in einem getoenten Quadrat; beim Darueberfahren
   hebt sich die Kachel, ihr Rand nimmt die Farbe an und das Symbol fuellt sich und dreht sich ein Stueck.
   ========================================================================= */
:root:root:root .pkx-aktionen { gap: 7px; border: 0; border-radius: 0; background: none; overflow: visible; }
:root:root:root .pkx-ak {
  --tone: var(--status-good);
  gap: 7px; min-height: 0; padding: 10px 4px 9px; font-size: 11.5px;
  border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--border)); border-radius: 15px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 8%, var(--surface)), var(--surface) 78%);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .25s, background .25s;
}
:root:root:root .pkx-ak:nth-child(2) { --tone: var(--status-warning); }
:root:root:root .pkx-ak:nth-child(3) { --tone: var(--wissen, var(--brand)); }
:root:root:root .pkx-ak:nth-child(4) { --tone: var(--gold); }
:root:root:root .pkx-ak + .pkx-ak { border-left: 1px solid color-mix(in srgb, var(--tone) 24%, var(--border)); }
:root:root:root .pkx-ak-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--tone) 16%, var(--surface)); color: var(--tone);
}
:root:root:root .pkx-ak-ic svg { width: 17px; height: 17px; }
:root:root:root .pkx-ak:hover, :root:root:root .pkx-ak:hover + .pkx-ak {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 14%, var(--surface)), var(--surface) 82%);
}
:root:root:root .pkx-ak:hover { transform: translateY(-3px); border-color: var(--tone); box-shadow: 0 14px 22px -16px color-mix(in srgb, var(--tone) 80%, transparent); }
:root:root:root .pkx-ak:hover + .pkx-ak { border-left-color: color-mix(in srgb, var(--tone) 24%, var(--border)); }
:root:root:root .pkx-ak:hover .pkx-ak-ic { background: var(--tone); color: var(--surface); transform: rotate(-8deg) scale(1.08); }
:root:root:root .pkx-ak:active { transform: translateY(-1px) scale(.985); }
@container (min-width: 620px) {
  :root:root:root .pkx-aktionen { gap: 10px; }
  :root:root:root .pkx-ak { justify-content: flex-start; gap: 12px; min-height: 64px; padding: 10px 14px 10px 10px; font-size: 14.5px; text-align: left; }
  :root:root:root .pkx-ak-ic { width: 40px; height: 40px; border-radius: 12px; }
  :root:root:root .pkx-ak-ic svg { width: 20px; height: 20px; }
}

/* ============ 14. Schnell-Eintrag "Ich hab gespielt" (Verwaltung) ============ */
:root:root .hero-knoepfe .btn.ghost { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: var(--gold); color: var(--gold); }
:root:root .hero-knoepfe .btn.ghost:hover { background: var(--surface); color: var(--gold); }
:root:root .schnell-fab-leiste .btn.ghost { background: var(--surface); border-color: var(--gold); color: var(--gold); }
/* Die zwei Bespann-Knoepfe bleiben nebeneinander, "Ich hab gespielt" steht als eigene Zeile darunter */
:root:root .schnell-fab-leiste { flex-wrap: wrap; width: max-content; max-width: calc(100vw - 32px); }
:root:root .schnell-fab-leiste .btn.ghost { flex: 1 1 100%; order: 2; padding-block: 9px; }

.ss { display: flex; flex-direction: column; gap: 14px; }
.ss .field { margin: 0; }
.ss-schlaeger { margin: 0; font-family: var(--font-titel); font-size: 18px; font-weight: 600; color: var(--ink); }
.ss-kopf { margin: 4px 0 -6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
.ss-hinweis { margin: 0; }
.ss-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ss-preset {
  --tone: var(--gold);
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 14px; font: inherit; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 12%, var(--surface)), var(--surface) 70%);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ss-preset:nth-child(3n+2) { --tone: var(--status-good); }
.ss-preset:nth-child(3n+3) { --tone: var(--wissen, var(--brand)); }
.ss-preset b { font-size: 15px; font-weight: 700; }
.ss-preset span { font-size: 13px; color: var(--ink-secondary); }
.ss-preset:hover { transform: translateY(-2px); border-color: var(--tone); box-shadow: var(--schatten-2, var(--shadow)); }
.ss-preset:active { transform: scale(.98); }
.ss-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-aktionen .modal-btn { flex: 1 1 auto; }
.ss-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ss-links .sk-mehr { width: auto; padding: 4px 0; }

/* ============ 15. Kalender-Export Schiedsrichter ============ */
.oi-leiste { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; margin-bottom: 8px; }
.oi-leiste .sk-mehr { width: auto; padding: 4px 0; }
.oi-zahl { margin-left: auto; font-size: 12.5px; color: var(--ink-muted); font-weight: 600; }
.oi-liste { display: flex; flex-direction: column; gap: 8px; max-height: min(52vh, 460px); overflow-y: auto; padding: 2px 2px 4px; }
.oi-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); box-shadow: var(--shadow); transition: opacity .15s, border-color .15s;
}
.oi-zeile.aus { opacity: .5; border-left-color: var(--border); }
.oi-kopf { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; cursor: pointer; }
.oi-kopf input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.oi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oi-text b { font-size: 14.5px; overflow-wrap: anywhere; }
.oi-text span { font-size: 12.5px; color: var(--ink-secondary); overflow-wrap: anywhere; }
.oi-zeit { display: flex; gap: 10px; flex: none; }
.oi-feld { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.oi-feld[hidden] { display: none; }
.oi-feld span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
.oi-feld input, .oi-feld select { padding: 6px 8px; font-size: 14px; min-width: 0; }
.oi-feld input[type="time"] { width: 100px; }
.oi-feld select { width: 108px; }
.oi-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.oi-filter .oi-feld select { width: auto; min-width: 150px; }

/* ---- Kalender: einzelne Tage eines mehrtaegigen Einsatzes ---- */
.oi-tage-knopf {
  flex: 1 1 100%; display: flex; align-items: center; gap: 6px; padding: 6px 0 0; margin: 0; border: 0; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold); cursor: pointer; text-align: left;
  border-top: 1px dashed var(--border);
}
.oi-tage-knopf:hover { color: var(--ink); }
.oi-tage { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; }
.oi-tage[hidden] { display: none; }
.oi-tag {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 6%, var(--surface-2, var(--surface)));
  border: 1px solid var(--border); transition: opacity .15s;
}
.oi-tag.aus { opacity: .5; }
.oi-tag-kopf { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; flex: 1 1 130px; }
.oi-tag-kopf input { width: 17px; height: 17px; accent-color: var(--gold); }
.oi-tag .oi-feld { flex-direction: row; align-items: center; gap: 6px; }
.oi-tag .oi-feld span { font-size: 10px; }
.oi-tag .oi-feld input[type="time"] { width: 96px; }
.oi-tag .oi-feld select { width: 100px; }

/* ---- Schiedsrichter: Filter-/Aktionsleiste ---- */
.os-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; margin-bottom: 14px;
}
.os-suche { position: relative; flex: 1 1 240px; min-width: 0; display: flex; align-items: center; }
.os-suche > svg { position: absolute; left: 12px; color: var(--ink-muted); pointer-events: none; }
.os-suche input {
  width: 100%; height: 40px; padding: 0 36px 0 36px; border-radius: 999px; font-size: 14px;
  border: 1px solid var(--border-strong, var(--border)); background: var(--surface-2, var(--surface)); color: var(--ink);
}
.os-suche input::-webkit-search-cancel-button { display: none; }
.os-suche input:focus { outline: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 1px; border-color: var(--gold); }
.os-suche-weg {
  position: absolute; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-secondary); font-size: 12px; line-height: 1;
}
.os-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); }
.os-seg button {
  border: 0; background: transparent; color: var(--ink-secondary); font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s;
}
.os-seg button:hover { color: var(--ink); }
.os-seg button.an { background: var(--gold); color: var(--auf-gold); box-shadow: 0 5px 12px -6px color-mix(in srgb, var(--gold) 85%, transparent); }
.os-aktionen { display: flex; gap: 8px; margin-left: auto; }
.os-aktionen .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .os-leiste { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .os-suche { flex: none; }
  .os-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .os-seg button { padding: 8px 6px; text-align: center; }
  .os-aktionen { margin-left: 0; display: grid; grid-template-columns: 1fr 1.25fr; }
  .os-aktionen .btn { padding-inline: 10px; font-size: 13px; text-align: center; }
}
@media (max-width: 720px) {
  .os-leiste { grid-template-columns: minmax(0, 1fr); }
  .os-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .os-aktionen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .os-aktionen .btn { white-space: normal; line-height: 1.2; padding-block: 9px; min-width: 0; }
}
@media (max-width: 560px) {
  .oi-liste { max-height: none; overflow: visible; }
  .oi-zeit { flex: 1 1 100%; }
  .oi-zeit .oi-feld, .oi-tag .oi-feld { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 2px; }
  .oi-zeit .oi-feld input, .oi-zeit .oi-feld select, .oi-tag .oi-feld input[type="time"], .oi-tag .oi-feld select { width: 100%; }
  .oi-tag-kopf { flex: 1 1 100%; }
  .oi-tag .oi-feld span { font-size: 10px; }
}

/* Kachel "Weitere offene Betraege" (Verwaltung): ersetzt "Bespannungen <Jahr>", solange Trainer/Schiedsrichter Offenes haben */
:root:root .kpi-weitere { cursor: pointer; --tone: var(--status-critical); transition: transform .18s ease, box-shadow .18s ease; }
:root:root .kpi-weitere:hover { transform: translateY(-2px); box-shadow: var(--schatten-2, var(--shadow)); }

/* Dritte Kachel der Verwaltung: Termine-Uebersicht mit Umschalter zu den Bespannungen */
:root:root .kpi-bilanz .kpi-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root:root .kpi-wechsel {
  margin-left: auto; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--ink-secondary);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  transition: border-color .15s, color .15s, background .15s;
}
:root:root .kpi-wechsel:hover { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.kt-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.kt-zeile {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  padding: 6px 10px; border-radius: 10px; border: 0; border-left: 3px solid var(--kt, var(--gold));
  background: color-mix(in srgb, var(--kt, var(--gold)) 7%, var(--surface));
  transition: background .15s, transform .15s;
}
.kt-zeile:hover { background: color-mix(in srgb, var(--kt, var(--gold)) 13%, var(--surface)); transform: translateX(2px); }
.kt-datum { flex: none; min-width: 62px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.kt-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kt-text b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-text span { font-size: 11.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-mehr { font-size: 12px; color: var(--ink-muted); padding: 2px 10px; }
.kt-offen {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin-top: 10px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--status-critical) 30%, var(--border)); cursor: pointer; text-align: left; font: inherit;
  background: color-mix(in srgb, var(--status-critical) 6%, var(--surface)); color: var(--ink);
}
.kt-offen b { font-size: 14px; }
.kt-offen span { font-size: 11.5px; color: var(--ink-secondary); }
.kt-offen:hover { border-color: var(--status-critical); }

/* Verwaltung: Auftragswert unter "Im Haus", Hinweis unter den Offenen Posten */
.kpi-wert { margin-top: 6px; font-size: 12.5px; color: var(--ink-secondary); line-height: 1.35; }
.kpi-wert b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-weight: 600; }
.kpi-wert-hinweis { display: block; font-size: 11.5px; color: var(--status-warning); }
.op-inarbeit { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: var(--ink-secondary); background: color-mix(in srgb, var(--status-warning) 8%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--status-warning) 35%, var(--border)); }

/* Offene Posten: Schlaeger, die noch im Haus sind (zaehlen nicht zur Summe oben) */
.op-arbeit-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: color-mix(in srgb, var(--status-warning) 14%, var(--surface)); color: color-mix(in srgb, var(--status-warning) 80%, var(--ink));
}
tr.op-arbeit td { background: color-mix(in srgb, var(--status-warning) 4%, var(--surface)); }
tr.op-arbeit td.num, .op-arbeit .ek-betrag { color: var(--ink-secondary); }
.op-summe-arbeit, tr.summenzeile.op-summe-arbeit td { color: var(--ink-secondary); font-weight: 500; }
tr.summenzeile.op-summe-arbeit td.num { color: var(--ink-secondary) !important; }

/* ---- Einnahmen-Kachel (Verwaltung): alle Bereiche, Monat/Jahr ---- */
:root:root .ke-umschalter { margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); }
:root:root .ke-umschalter button {
  border: 0; background: transparent; color: var(--ink-secondary); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 3px 10px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s;
}
:root:root .ke-umschalter button.an { background: var(--gold); color: var(--auf-gold); }
.ke-balken { display: flex; height: 6px; gap: 2px; border-radius: 99px; overflow: hidden; margin-top: 10px; background: var(--border); }
.ke-balken i { display: block; min-width: 4px; }
.ke-zeilen { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.ke-zeile { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-secondary); }
.ke-zeile i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ke-zeile span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ke-zeile b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ke-zeile.leer { opacity: .55; }
.ke-zeile.leer b { font-weight: 400; color: var(--ink-muted); }

/* ---- Hero: Knoepfe in zwei ruhigen Gruppen (Bespannen / weitere Eintraege) ---- */
@media (min-width: 821px) { :root:root .hero-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } }
:root:root .hero-knoepfe .btn[data-neu] + .btn.ghost { margin-left: 8px; }
:root:root .hero-knoepfe .btn.ghost { border-style: solid; }

/* ---- Handy-Menue: Trainer/Einsatz teilen sich eine Zeile ---- */
:root:root .schnell-fab-leiste .btn.ghost.duo { flex: 1 1 calc(50% - 4px); }

/* ---- Termine-Kachel: die Adresse bleibt am Handy weg (zu lang, nicht lesbar) - sie steht beim Einsatz selbst ---- */
@media (max-width: 820px) { .kt-ort { display: none; } }
/* Handy-Menue: feste Breite, damit die Zeilen sauber umbrechen (zwei Bespann-Knoepfe, zwei weitere, "Ich hab gespielt") */
:root:root .schnell-fab-leiste { width: min(calc(100vw - 32px), 420px); max-width: none; }
:root:root .schnell-fab-leiste .btn { flex: 1 1 calc(50% - 4px); }
:root:root .schnell-fab-leiste .btn.ghost:not(.duo) { flex: 1 1 100%; }
:root:root .schnell-fab-leiste .btn.ghost.duo { padding-block: 9px; }
/* Einnahmen-Kachel am Handy (Spaltenlayout): Balken und Zeilen fuellen die Breite */
:root:root .kpi-einnahmen .ke-balken, :root:root .kpi-einnahmen .ke-zeilen, :root:root .kpi-einnahmen .kpi-kopf { align-self: stretch; width: 100%; box-sizing: border-box; }

/* =========================================================================
   16 · Verwaltung: Auftraege (Schlaeger im Haus + Zahlungen) und rechte Seite
   ========================================================================= */
.verw-auftraege { gap: 4px; }
.auf-gruppe { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.auf-gruppe-kopf { display: flex; align-items: baseline; gap: 8px; }
.auf-gruppe-name { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-secondary); }
.auf-gruppe-zahl { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); color: var(--ink-secondary); }
.auf-gruppe-summe { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.auf-gruppe-summe.schuld { color: var(--status-critical); }
.auf-liste { display: flex; flex-direction: column; gap: 8px; }
.auf-zeile {
  --akzent: var(--status-warning);
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--akzent); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.auf-zeile.st-fertig { --akzent: var(--status-good); }
.auf-zeile.st-abgeholt { --akzent: var(--ink-muted); }
.auf-zeile.schuld { --akzent: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 4%, var(--surface)); }
.auf-zeile:hover { box-shadow: var(--schatten-2, var(--shadow)); }
.auf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.auf-haupt { min-width: 0; }
.auf-name { font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.auf-neben { font-size: 12.5px; color: var(--ink-secondary); overflow-wrap: anywhere; }
.auf-geld { display: flex; align-items: center; gap: 10px; flex: none; }
.auf-betrag { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.auf-betrag.schuld { color: var(--status-critical); }
.auf-betrag.bezahlt { color: var(--ink-muted); font-weight: 500; }
.auf-haken { font-size: 12px; font-weight: 600; color: var(--status-good); white-space: nowrap; }
.auf-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auf-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auf-seit { font-size: 12px; font-weight: 600; color: var(--ink-secondary); background: var(--surface-2, var(--surface)); border-radius: 999px; padding: 2px 9px; }
.auf-seit.alt { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 10%, var(--surface)); }
.auf-mehr { align-self: flex-start; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold); cursor: pointer; }
.auf-mehr:hover { color: var(--ink); }
.verw-auftraege .status-stepper { margin: 0; }

/* rechte Seite: Termine & Zahlungen */
.verw-rechts { gap: 14px; }
.verw-rechts > .section { margin: 0; }
.tz-block { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); margin-top: 10px; }
.tz-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tz-titel { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-secondary); }
.tz-zahl { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.tz-zahl.schuld { color: var(--status-critical); }
.tz-block .kt-liste { margin-top: 0; }
.tz-offen { display: flex; flex-direction: column; gap: 6px; }
.tz-offenzeile { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border-left: 3px solid var(--kt, var(--gold)); background: color-mix(in srgb, var(--status-critical) 4%, var(--surface)); }
.tz-offenzeile .kt-datum { min-width: 44px; }
.tz-name { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.tz-name b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-name span { font-size: 11.5px; color: var(--ink-muted); }
.tz-balken { height: 8px; border-radius: 99px; overflow: hidden; background: var(--border); }
.tz-balken i { display: block; height: 100%; border-radius: 99px; }
.tz-hinweis { font-size: 12px; color: var(--status-warning); font-weight: 600; }
.ms-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ms-zeile { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.ms-zeile:hover { transform: translateY(-1px); box-shadow: var(--schatten-2, var(--shadow)); }
.ms-text { display: flex; flex-direction: column; line-height: 1.3; }
.ms-text b { font-size: 14px; }
.ms-text span { font-size: 12px; color: var(--ink-secondary); }
.ms-balken { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.ms-balken i { display: block; height: 100%; border-radius: 99px; }
.ms-link { border: 0; background: none; cursor: pointer; font: inherit; color: var(--gold); }

/* Spielersuche in der Begruessung */
.hero-suche { margin-top: 14px; max-width: 520px; }
.hero-suche .os-suche { flex: none; width: 100%; }
.hero-suche .sp-treffer { margin-top: 8px; }

/* =========================================================================
   17 · Eintrage-Formular (Bespannung): Gruppen, Schalter-Pillen, Frist
   ========================================================================= */
/* Die Haken: nur die Pille ist klickbar, nicht die ganze Zeile */
.field.fb-voll { align-items: flex-start; }
.field > label[style*="display:flex"] { width: fit-content; max-width: 100%; }
:root:root .field label.fb-haken, :root:root label.fb-haken {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; cursor: pointer; user-select: none;
  padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--border-strong, var(--border)); background: var(--surface);
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-secondary); white-space: normal;
  transition: background .15s, border-color .15s, color .15s;
}
:root:root label.fb-haken input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--gold); flex: none; }
:root:root label.fb-haken:hover { border-color: var(--gold); color: var(--ink); }
:root:root label.fb-haken:has(input:checked) { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); border-color: var(--gold); color: var(--ink); }
:root:root label.fb-haken:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--gold) 50%, transparent); outline-offset: 2px; }
.fb-haken-feld { flex: 1 1 100%; display: flex; align-items: center; }
.fb-haken-feld[hidden] { display: none; }

/* Gruppen statt gestrichelter Trennlinien */
.add-row-form.fg-form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border-top: 0; background: transparent; }
.fg { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-radius: 14px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); }
.fg-titel { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-secondary); }
.fg-titel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.fg-felder { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fg-linie { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.fg-linie-titel { font-size: 12px; font-weight: 700; color: var(--ink); }
.fg-aktionen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.fg-aktionen .btn[type="submit"] { min-width: 150px; }
@media (max-width: 560px) {
  .fg-aktionen { flex-direction: column-reverse; align-items: stretch; }
  .fg-aktionen .btn { width: 100%; }
  .fg-felder > .field.small { flex: 1 1 calc(50% - 6px); }
}

/* Frist */
.fb-frist { flex: 1 1 100%; }
.frist-opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-muted); }
.frist-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.frist-reihe input[type="date"] { width: auto; min-width: 150px; }
.frist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.frist-chip {
  border: 1px solid var(--border-strong, var(--border)); background: var(--surface); color: var(--ink-secondary); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.frist-chip:hover { border-color: var(--gold); color: var(--ink); }
.frist-chip.an { background: var(--gold); border-color: var(--gold); color: var(--auf-gold); }
.frist-chip.frist-weg { padding-inline: 10px; color: var(--ink-muted); }

/* Frist in den Auftraegen */
.auf-frist {
  border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--surface-2, var(--surface)); color: var(--ink-secondary); transition: transform .15s, box-shadow .15s;
}
.auf-frist:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.auf-frist.leer { border: 1px dashed var(--border-strong, var(--border)); background: transparent; color: var(--ink-muted); font-weight: 600; }
.auf-frist.leer:hover { color: var(--gold); border-color: var(--gold); }
.auf-frist.ok { background: color-mix(in srgb, var(--status-good) 12%, var(--surface)); color: color-mix(in srgb, var(--status-good) 80%, var(--ink)); }
.auf-frist.bald { background: color-mix(in srgb, var(--status-warning) 16%, var(--surface)); color: color-mix(in srgb, var(--status-warning) 85%, var(--ink)); }
.auf-frist.heute { background: var(--status-warning); color: #fff; }
.auf-frist.ueber { background: var(--status-critical); color: #fff; }
.auf-frist.erledigt { background: transparent; border-color: var(--border); color: var(--ink-muted); font-weight: 600; }
.auf-zeile:has(.auf-frist.ueber) { --akzent: var(--status-critical); }

/* =========================================================================
   17b · Eintrage-Formular: Kacheln im Stil der App, zwei Spalten am Computer, eine saubere Spalte am Handy
   ========================================================================= */
/* Kein Karte-in-Karte: die Gruppen SIND die Kacheln, die aeussere Karte verschwindet */
:root:root .card.fg-card { background: transparent; border: 0; box-shadow: none; padding: 0 !important; container-type: inline-size; }
:root:root .fg-card > .note { padding-inline: 4px; }
.fg-form { min-width: 0; }
.fg { --tone: var(--gold); position: relative; min-width: 0; max-width: 100%; box-sizing: border-box; gap: 12px;
  padding: 16px 16px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.fg::before { content: ""; position: absolute; left: 16px; top: -1px; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone); }
.fg-titel { color: var(--ink-secondary); }
.fg-titel::before { background: var(--tone); }
.fg.g-kunde { --tone: var(--gold); }
.fg.g-termin { --tone: var(--status-warning); }
.fg.g-masse { --tone: var(--brand); }
.fg.g-saite { --tone: var(--wissen, var(--brand)); }
.fg.g-verbrauch { --tone: var(--status-good); }
.fg.g-preis { --tone: var(--gold); }
.fg-felder { min-width: 0; gap: 12px; }
.fg-felder > * { min-width: 0; max-width: 100%; }
/* Felder auf der hellen Kachel leicht abgesetzt, Fokus in Clay */
.fg .field input, .fg .field select { background: var(--surface-2, var(--surface)); width: 100%; box-sizing: border-box; min-width: 0; }
.fg .field input:focus, .fg .field select:focus { outline: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 1px; border-color: var(--gold); background: var(--surface); }
.fg .field.small { flex: 0 1 150px; }
.fg .field.grow { flex: 1 1 200px; }
.fg .field:not(.small):not(.grow):not(.fb-frist) { flex: 0 1 180px; }
.fg-linie { background: var(--surface-2, var(--surface)); min-width: 0; }
.fb-frist { flex: 1 1 100%; }
.frist-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.frist-reihe input[type="date"] { width: 160px; flex: none; }
.fg .frist-chip { background: var(--surface-2, var(--surface)); }

/* Computer: zwei Spalten, Gruppen fuellen die Breite (dicht, ohne leere Flaechen) */
@container (min-width: 720px) {
  .add-row-form.fg-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: dense; gap: 14px; align-items: stretch; }
  .fg.breit, .fg-aktionen { grid-column: 1 / -1; }
  .fg-linie { flex: 1 1 280px; }
  .fg.g-saite.breit .fg-felder { align-items: stretch; }
  .fg-aktionen { justify-content: flex-end; }
}
/* Breit: drei Spalten, zwei Reihen. Wer/Was/Wann oben, Saite/Verbrauch/Preis darunter - keine einzelne Gruppe bleibt allein. */
@container (min-width: 1000px) {
  .add-row-form.fg-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fg.g-kunde { order: 1; }
  .fg.g-masse { order: 2; }
  .fg.g-termin { order: 3; }
  .fg.g-saite { order: 4; }
  .fg.g-verbrauch { order: 5; }
  .fg.g-preis { order: 6; }
  .fg-aktionen { order: 7; }
  /* Unterschiedliche Saite: Saite und Preis laufen ueber die ganze Breite statt eine Luecke zu lassen */
  .add-row-form.fg-form.hyb .fg.g-preis { grid-column: 1 / -1; }
}

/* Handy: eine Spalte, kompakte Kacheln, nichts ragt aus dem Bild */
@container (max-width: 719px) {
  .fg { padding: 14px 12px 14px; border-radius: 14px; }
  .fg-felder { gap: 10px; }
  .fg .field.small { flex: 1 1 calc(50% - 5px); }
  .fg .field:not(.small):not(.grow):not(.fb-frist) { flex: 1 1 calc(50% - 5px); }
  .fg .field.grow { flex: 1 1 100%; }
  .frist-reihe { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .frist-reihe input[type="date"] { width: 100%; }
  .frist-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 6px; }
  .frist-chip { padding: 8px 4px; font-size: 12.5px; text-align: center; white-space: nowrap; }
  .frist-chip.frist-weg { padding-inline: 12px; }
  .fg-aktionen { flex-direction: column-reverse; align-items: stretch; }
  .fg-aktionen .btn { width: 100%; }
  label.fb-haken { width: 100%; box-sizing: border-box; }
}
/* Schlaeger + Nr. teilen sich eine Zeile */
.fg .feld-schlaeger { flex: 1 1 260px; display: flex; gap: 10px; align-items: flex-end; min-width: 0; }
.fg .feld-schlaeger .field.grow { flex: 1 1 0; min-width: 0; }
.fg .feld-schlaeger .field.small { flex: 0 0 84px; }

/* Kompakter: Schlaeger | Nr. | Datum in einer Zeile, Haerte/Laenge je drei in einer Zeile */
.fg .feld-schlaeger { flex-wrap: wrap; }
.fg .feld-schlaeger .field.grow { flex: 1 1 140px; }
.fg .feld-schlaeger .field.feld-datum { flex: 0 1 150px; }
.fg.g-masse .field.small { flex: 1 1 105px; }
@container (max-width: 719px) {
  .fg .feld-schlaeger .field.feld-datum { flex: 1 1 100%; }
  .fg.g-masse .field.small { flex: 1 1 calc(50% - 5px); }
}
.fg .feld-schlaeger .field.grow { flex: 1 1 100px; }
.fg .feld-schlaeger .field.feld-datum { flex: 0 1 138px; }
.fg .feld-schlaeger .field.small { flex: 0 0 76px; }

/* Verwaltung: Abstand unter dem Auftraege-/rechte-Seite-Bereich (er hatte keinen, der naechste Block klebte direkt dran) */
:root:root .verw-doppel { margin-bottom: 28px; }
@media (min-width: 821px) { :root:root .verw-doppel { margin-bottom: 24px; } }
:root:root .verw-freibetrag { margin-top: -4px; }