/* Trainerabrechnung SC Schwandorf — Gestaltung aus dem WK3 Tracker
   (frontends/scs/css/styles.css) übernommen: Farben, Gewebe, Kopfzeile,
   Hero mit Welle, Sektionskopf, Kennzahlen. Darunter die Formularteile. */

:root {
  --bg:#eef3f7;
  --bg-2:#e4edf2;
  --bg-elev:#fff;
  --bg-surface:#f8fbfc;
  --bg-surface-2:#f1f6f9;
  --petrol-900:#052131;--petrol-800:#0a3250;--petrol-700:#10466a;--petrol-600:#175d85;
  --aqua-600:#0090ac;--aqua-500:#1ba8c4;--aqua-300:#7cd2e2;--aqua-100:#d7eff4;--aqua-50:#eff8fb;
  --ink-900:#0c1f2e;--ink-700:#2b4356;--ink-500:#4c6577;--ink-400:#7a8f9e;--ink-300:#a2b3bf;
  --line:#d8e2e9;--line-soft:#eaf0f4;
  --akzent:#e85d4b;--akzent-soft:#fde8e4;
  --rot-dis:#c24530;--rot-dis-bg:#fdecea;
  /* Verbesserung / Verschlechterung — bewusst nicht rein rot/grün, sondern
     abgedunkelt, damit die Badges auch bei Rot-Grün-Schwäche über Pfeil und
     Vorzeichen lesbar bleiben. */
  --besser:#1c7a4d;--besser-bg:#e4f5ec;--besser-line:#a9dcc3;
  --schlechter:#b8452f;--schlechter-bg:#fceceb;--schlechter-line:#f0bcb3;
  --gold:#d8a83a;--gold-2:#f4c560;
  /* Schriftfähiges Gold. Das helle --gold käme auf dem Seitengrund nur auf
     Kontrast 2,0 — als Text unlesbar. --gold-tief liegt bei 5,5 und ist damit
     auch für kleine Versalien sicher. */
  --gold-tief:#7a5e14;
  --silber:#a0adb5;--silber-2:#c8d2d9;
  --bronze:#bc7a4b;--bronze-2:#dba074;

  --schatten-xs:0 1px 2px rgba(5,33,49,.06);
  --schatten-s:0 2px 4px rgba(5,33,49,.06),0 1px 2px rgba(5,33,49,.04);
  --schatten-m:0 10px 25px -8px rgba(5,33,49,.15),0 4px 10px -2px rgba(5,33,49,.08),0 1px 2px rgba(5,33,49,.04);
  --schatten-l:0 20px 40px -12px rgba(5,33,49,.22),0 8px 16px -4px rgba(5,33,49,.1);
  --schatten-eingepraegt:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(5,33,49,.04);
  --schatten-innen:inset 0 2px 4px rgba(5,33,49,.08);

  --radius-s:8px;--radius-m:14px;--radius-l:22px;

  /* Ein Kartenrezept für alle Flächen — Kennzahlen, Ranking-Zeilen,
     Auszeichnungen, Meilensteine, Diagramme, Wettkampfkarten. Vorher hatte
     jede Sorte ihre eigene Mischung aus Rand, Radius und Schatten; die
     Unterschiede waren zu klein, um Absicht zu sein, und zu groß, um ruhig
     zu wirken. Wer eine Karte anders will, überschreibt hier eine Zeile. */
  --karte-bg:linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-surface) 100%);
  --karte-line:var(--line);
  --karte-radius:var(--radius-m);
  --karte-schatten:var(--schatten-s),var(--schatten-eingepraegt);
  --karte-schatten-hover:var(--schatten-m),var(--schatten-eingepraegt);
  --font-display:'Bricolage Grotesque',system-ui,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* ===== LEINENSTRUKTUR =====
     Ein Gewebe aus feinen Linien statt einer glatten Fläche: dichtes
     Grundgitter (7 px), darüber kräftigere Fäden (23/31 px) und Fäden in der
     Gegenrichtung der Helligkeit (43/53 px). Alle Perioden sind teilerfremd —
     dadurch addieren sich Linien nur stellenweise und das Muster wiederholt
     sich praktisch nie sichtbar. Genau das lässt es gewebt statt gedruckt
     wirken.

     Die Fäden sind nicht neutralgrau, sondern petrol bzw. aqua: die Struktur
     soll die Blautöne der App aufnehmen, nicht danebenliegen.

     Zwei Fassungen, weil ein Gewebe auf hellem und auf dunklem Grund
     spiegelbildlich funktioniert — hell braucht dunkle Fäden mit hellen
     Aufhellern, dunkel braucht helle Fäden mit dunklen Vertiefungen. */
  --gewebe-hell:
    /* helle Fäden — sie dünnen das Gitter stellenweise wieder aus. Kein reines
       Weiß: gegen den kühlen Grund der App säße das zu hell und die Fäden
       würden als helle Gitterlinien lesbar statt als Gewebe. */
    repeating-linear-gradient(0deg,  rgba(250,253,255,.34) 0 1px, transparent 1px 43px),
    repeating-linear-gradient(90deg, rgba(250,253,255,.34) 0 1px, transparent 1px 53px),
    repeating-linear-gradient(0deg,  rgba(16,70,106,.012) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(90deg, rgba(16,70,106,.012) 0 1px, transparent 1px 31px),
    repeating-linear-gradient(0deg,  rgba(5,33,49,.013) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(5,33,49,.013) 0 1px, transparent 1px 7px);

  /* Auf Dunkelblau trägt das Gewebe helle Fäden. Die Alphas sind rund halb so
     hoch wie in der hellen Fassung, und das ist kein Gefühl, sondern Rechnung:
     ausschlaggebend ist der Kontrast im Verhältnis zum Grund. Dieselbe
     absolute Helligkeitsspanne ist auf dem dunklen Grund (Mittel ~42) rund
     fünfmal so auffällig wie auf dem hellen (Mittel ~236). Mit gleichen
     Alphas wirkte die Kopfzeile wie ein Gitter, während der Seitengrund
     ruhig blieb. */
  --gewebe-dunkel:
    /* Vertiefungen statt Aufheller — das Gegenstück zu den hellen Fäden oben */
    repeating-linear-gradient(0deg,  rgba(0,0,0,.022) 0 1px, transparent 1px 43px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.022) 0 1px, transparent 1px 53px),
    /* kräftigere Fäden in Aqua, damit die Struktur zum Wasser gehört */
    repeating-linear-gradient(0deg,  rgba(124,210,226,.013) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(90deg, rgba(124,210,226,.013) 0 1px, transparent 1px 31px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.010) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.010) 0 1px, transparent 1px 7px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}

body{
  position:relative;
  font-family:var(--font-body);color:var(--ink-900);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(27,168,196,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(10,50,80,.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment:fixed;line-height:1.55;-webkit-font-smoothing:antialiased;
}
/* Der Seitengrund. Absolut statt fixiert, damit das Gewebe mit der Seite
   wandert — fixiert stünde es beim Scrollen still und wirkte wie ein Gitter
   vor dem Bild statt wie der Untergrund darunter. */
body::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--gewebe-hell);
}
.app-header,.app-main,.app-footer{position:relative;z-index:1}

/* HEADER */
.app-header{
  background:
    radial-gradient(ellipse at top left,rgba(27,168,196,.25),transparent 60%),
    radial-gradient(ellipse at bottom right,rgba(232,93,75,.08),transparent 55%),
    linear-gradient(180deg,var(--petrol-900),var(--petrol-800));
  color:#fff;padding:.9rem 1.25rem;position:sticky;top:0;z-index:100;
  box-shadow:var(--schatten-m),inset 0 -1px 0 rgba(255,255,255,.08);
}
/* Dieselbe Leinenstruktur wie auf dem Seitengrund, nur in der dunklen
   Fassung — sonst bricht die Kopfzeile die Haptik der Seite. */
.app-header::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--gewebe-dunkel);
}
/* muss über das Gewebe, sonst legt es sich über Logo und Knopf */
.app-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.01em;color:#fff;text-decoration:none}
.logo-bild{height:36px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}


/* HERO */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at top right,rgba(27,168,196,.4),transparent 55%),
    radial-gradient(ellipse at bottom left,rgba(232,93,75,.15),transparent 60%),
    linear-gradient(160deg,var(--petrol-900) 0%,var(--petrol-800) 35%,var(--petrol-700) 70%,var(--aqua-600) 120%);
  color:#fff;padding:2.25rem 1.5rem 3rem;margin:0 0 -1.25rem;overflow:hidden;
  box-shadow:inset 0 -40px 60px -40px rgba(0,0,0,.3);
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    var(--gewebe-dunkel),
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.08) 100%);
}
/* Bahnenmarkierung: liegende Haarlinien wie die Leinen im Becken, nach links
   ausgeblendet. Sie geben dem Banner Struktur, ohne dass etwas ablenkt. */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.075) 0 1px, transparent 1px 44px);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
}
.hero-welle{position:absolute;left:0;right:0;bottom:-1px;height:70px;color:var(--bg);pointer-events:none}
.hero-welle svg{width:100%;height:100%;display:block}
.hero-inhalt{max-width:1100px;margin:0 auto;position:relative;z-index:1}
/* Die Welle schwappt animiert bis rund 70 px über die Unterkante des Heros.
   Ohne diesen Abstand liegt sie hinter der Untertitelzeile — heller Wellenton
   hinter weißer Schrift, dann verschwindet das ♀/♂ zeitweise fast ganz. */
.hero .hero-inhalt{padding-bottom:2.25rem}
.verein-tag{
  display:inline-block;margin:0 0 .5rem;padding:.3rem .8rem;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;font-size:.78rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.hero h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,7vw,3.2rem);letter-spacing:-.025em;line-height:1;
  margin:.25rem 0 .5rem;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.1);
}
/* ===== META-ZEILE IM BANNER =====
   Ein paar Eckdaten, durch Haarlinien getrennt und über einer Linie, die den
   Titelbereich vom Rest absetzt. */
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.35rem 1.4rem;margin:1.1rem 0 0;padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-meta-feld{display:inline-flex;align-items:baseline;gap:.45rem;position:relative}
.hero-meta-feld + .hero-meta-feld::before{
  content:'';position:absolute;left:-.7rem;top:.05em;bottom:.05em;
  width:1px;background:rgba(255,255,255,.22);
}
.hero-meta-label{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:600;
}
.hero-meta-wert{
  font-size:.95rem;font-weight:600;color:#fff;
  display:inline-flex;align-items:center;gap:.25rem;
}
/* Sobald die Felder umbrechen, hinge der senkrechte Trenner am Anfang der
   neuen Zeile in der Luft. Auf schmalen Schirmen stehen sie deshalb
   untereinander — das liest sich ohnehin klarer als eine gebrochene Zeile. */
@media(max-width:620px){
  .hero-meta{flex-direction:column;align-items:flex-start;gap:.45rem;padding-top:.75rem;margin-top:.9rem}
  .hero-meta-feld + .hero-meta-feld::before{display:none}
  .hero-meta-feld{width:100%;gap:.5rem}
  .hero-meta-label{min-width:6.5rem}
}

.sektion-kopf{
  /* Der Abstand nach oben trennt die Abschnitte — er ist die eigentliche
     Ruhe im Layout. Nach unten reicht wenig, der Kopf gehört zum Inhalt. */
  margin:3.4rem 0 1.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
/* Der erste Abschnitt folgt direkt auf die Kennzahlen-Kacheln — die sind
   selbst schon eine Zäsur, dort reicht weniger Luft. */

.eyebrow{
  margin:0;font-size:.7rem;font-weight:700;line-height:1.4;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-tief);
  /* Das letzte Zeichen bekommt die Sperrung ebenfalls und schiebt das Wort
     sonst sichtbar aus der Flucht der Überschrift darunter. */
  text-indent:.02em;
}
.eyebrow::after{
  content:'';display:block;width:34px;height:2px;margin:.5rem 0 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:2px;
}
.sektion-kopf h2{margin:.85rem 0 0}
.sektion-kopf .sektion-hinweis{margin:.7rem 0 0}

/* H2 */
h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,1.15rem + 1.7vw,2.15rem);
  letter-spacing:-.02em;line-height:1.12;color:var(--petrol-900);
  margin:2rem 0 1rem;
}
h3{font-family:var(--font-display);font-weight:700;font-size:1rem;margin:0 0 .9rem;color:var(--ink-900)}
h3 small{font-weight:400;color:var(--ink-500);font-size:.8rem;margin-left:.3rem}


/* =================== KENNZAHLEN =================== */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;max-width:1100px;margin:1.5rem auto 2rem;padding:0 1rem}
.kennzahl{
  background:var(--karte-bg);
  border:1px solid var(--karte-line);border-radius:var(--karte-radius);
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.1rem;
  box-shadow:var(--karte-schatten);
  position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.kennzahl:hover{transform:translateY(-2px);box-shadow:var(--karte-schatten-hover)}
.kennzahl::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle at top right,var(--aqua-100),transparent 70%);opacity:.6;pointer-events:none}
.kennzahl::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--aqua-300),transparent);opacity:.4}

/* Highlight-Kachel = dunkel mit Glow (Ø WA Gruppe in Gruppen-View, Ø WA in Schwimmer-View) */
.kennzahl-highlight{
  background:var(--gewebe-dunkel),radial-gradient(ellipse at top right, rgba(27,168,196,.4), transparent 60%),linear-gradient(160deg,var(--petrol-900),var(--petrol-700));
  border-color:var(--petrol-700);color:#fff;
  box-shadow:var(--schatten-m),inset 0 1px 0 rgba(255,255,255,.1);
}
.kennzahl-highlight::before{background:radial-gradient(circle at top right,rgba(27,168,196,.6),transparent 70%);opacity:1;width:100px;height:100px}
.kennzahl-highlight::after{background:linear-gradient(90deg,transparent,rgba(124,210,226,.6),transparent);opacity:.8}
.kennzahl-highlight:hover{box-shadow:var(--schatten-l),inset 0 1px 0 rgba(255,255,255,.1)}


.kennzahl-wert{font-family:var(--font-display);font-weight:900;font-size:2rem;letter-spacing:-.03em;line-height:1;color:var(--petrol-900)}
.kennzahl-highlight .kennzahl-wert{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.kennzahl-label{font-size:.72rem;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:.3rem;line-height:1.3;display:inline-flex;align-items:center;flex-wrap:wrap;gap:.25rem;overflow-wrap:anywhere}
.kennzahl-highlight .kennzahl-label{color:rgba(255,255,255,.85)}
.kennzahl-detail{display:block;font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-400);margin-top:.1rem;width:100%;min-width:0;hyphens:auto}
/* min-width:0, weil Flex-Kinder sonst nicht unter ihr laengstes Wort schrumpfen:
   „Referenzzeiten" ist breiter als die Kachel auf einem 412-px-Handy. hyphens
   trennt dann sauber statt mitten im Wort zu brechen (Dokument ist lang="de"). */
.kennzahl-highlight .kennzahl-detail{color:rgba(255,255,255,.7)}

.app-footer{text-align:center;padding:1.5rem 1rem;color:var(--ink-700);font-size:.9rem;border-top:1px solid var(--line);margin-top:2rem;background:var(--bg-elev)}
/* Die feste Navigationsleiste darf den Fuß nicht verdecken */
body:has(.navi-leiste) .app-footer{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
.app-footer p{margin:0}

.hero-welle svg path{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion: no-preference){
  .hero-welle svg path:first-child{animation:welle-hinten 9s ease-in-out infinite}
  .hero-welle svg path:last-child{animation:welle-vorn 6s ease-in-out infinite}
}
@keyframes welle-hinten{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
}

/* ======================================================================
   TRAINERABRECHNUNG
   ====================================================================== */

.hero{padding:1.9rem 1.25rem 3.2rem}
.hero h1{font-size:clamp(1.8rem,6vw,2.7rem)}
.hero-klein{padding-bottom:2.8rem}
.hero .hero-inhalt{max-width:760px;padding-bottom:1.4rem}
.rest{display:inline-block;margin-left:.35rem;padding:.05rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.14);font-size:.78rem;font-weight:500}
.rest-knapp{background:var(--akzent);color:#fff}
.speicher-fehler{color:#ffd2ca}

.inhalt{max-width:760px;margin:0 auto;padding:0 16px 1rem;position:relative;z-index:2}
.laden{text-align:center;padding:4rem 1rem;color:var(--ink-500)}

/* ---- Karten, Texte ---- */
.karte{
  background:var(--karte-bg);border:1px solid var(--karte-line);border-radius:var(--karte-radius);
  box-shadow:var(--karte-schatten);padding:1.15rem 1.2rem;margin:0 0 1rem;
}
.karte h2{margin:0 0 .6rem;font-size:1.35rem}
.karte h3{margin:0 0 .8rem;font-size:1.05rem;color:var(--petrol-900)}
.karte p{margin:.4rem 0}
.sektion-kopf{margin:1.6rem 0 1.1rem}
.sektion-kopf h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem)}
.sektion-kopf h2:focus{outline:none}
.sektion-hinweis{color:var(--ink-500);font-size:.95rem}
.leer-text{color:var(--ink-400);font-style:italic;margin:.2rem 0 1rem}
.mono{font-family:var(--font-mono);font-size:.92em}
.nowrap{white-space:nowrap}
small{color:var(--ink-500)}

/* ---- Hinweise ---- */
.hinweis{padding:.75rem .95rem;border-radius:var(--radius-s);font-size:.9rem;margin:.8rem 0;border:1px solid}
.hinweis-info{background:var(--aqua-50);border-color:var(--aqua-100);color:var(--petrol-700)}
.hinweis-warn{background:#fff7e3;border-color:#ecd89a;color:#6a4f0e}
.hinweis-fehler{background:var(--rot-dis-bg);border-color:#f3bfb6;color:#8f3222}
.hinweis-fehler ul{margin:.4rem 0 0;padding-left:1.1rem}
.hinweis-fehler li{margin:.3rem 0}
.hinweis-fehler .knopf-klein{margin-left:.4rem}

/* ---- Flippy ---- */
.flippy{display:flex;align-items:flex-end;gap:.6rem;margin:1.2rem 0 .2rem}
.flippy-bild{
  width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;
  background:linear-gradient(160deg,#4aa8ee,#1d73cf);border:3px solid #fff;
  box-shadow:0 4px 10px rgba(5,33,49,.2);
}
.flippy-gross .flippy-bild{
  width:132px;height:auto;border-radius:0;border:0;background:none;box-shadow:none;
  filter:drop-shadow(0 6px 8px rgba(5,33,49,.2));
}
.flippy-blase{
  position:relative;margin:0 0 .9rem;padding:.75rem 1rem;
  background:#fff;border:1px solid var(--aqua-100);border-radius:var(--radius-m) var(--radius-m) var(--radius-m) 4px;
  box-shadow:var(--schatten-s);font-size:.93rem;color:var(--ink-700);line-height:1.5;
}
.flippy-ton{
  float:right;margin:-.25rem -.4rem .2rem .5rem;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--aqua-300);background:var(--aqua-50);font-size:1.05rem;line-height:1;cursor:pointer;
  opacity:.75;transition:opacity .15s,background .15s;
}
.flippy-ton:hover,.flippy-ton.an{opacity:1}
.flippy-ton.spielt{background:var(--aqua-100);box-shadow:0 0 0 3px rgba(27,168,196,.25)}
@media (prefers-reduced-motion: no-preference){.flippy-ton.spielt span{display:inline-block;animation:ton-puls 1s ease-in-out infinite}}
@keyframes ton-puls{50%{transform:scale(1.18)}}
.flippy-ton:focus-visible{outline:3px solid var(--aqua-500);outline-offset:2px}
.flippy-blase::before{
  content:'';position:absolute;left:-7px;bottom:10px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--aqua-100);border-bottom:1px solid var(--aqua-100);transform:rotate(45deg);
}
@media (prefers-reduced-motion: no-preference){
  .flippy-bild{animation:flippy-schwimmt 4s ease-in-out infinite}
}
@keyframes flippy-schwimmt{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}

/* ---- Stepper ---- */
.stepper{margin:0 0 .4rem}
.stepper ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.stepper li{position:relative}
.stepper button{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.55rem .2rem;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-s);
  font:inherit;font-size:.78rem;color:var(--ink-500);cursor:pointer;box-shadow:var(--schatten-xs);
  transition:border-color .15s,transform .15s;
}
.stepper button:hover{border-color:var(--aqua-300);transform:translateY(-1px)}
.stepper-nr{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.9rem;
  background:var(--bg-surface-2);color:var(--ink-500);border:1px solid var(--line);
}
.stepper .erledigt .stepper-nr{background:var(--aqua-100);color:var(--petrol-700);border-color:var(--aqua-300)}
.stepper .aktiv button{border-color:var(--petrol-700);color:var(--petrol-900);font-weight:600}
.stepper .aktiv .stepper-nr{background:linear-gradient(160deg,var(--petrol-800),var(--petrol-600));color:#fff;border-color:var(--petrol-700)}
.stepper .mit-fehler .stepper-nr{background:var(--akzent);color:#fff;border-color:var(--akzent)}
@media(max-width:420px){.stepper-text{font-size:.68rem}}

/* ---- Formularfelder ---- */
.feld{display:flex;flex-direction:column;gap:.3rem;margin:0 0 .85rem;min-width:0}
.feld label,.kacheln legend{font-size:.84rem;font-weight:600;color:var(--ink-700)}
.optional{font-weight:400;color:var(--ink-400);font-size:.78rem;margin-left:.2rem}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:46px;padding:.6rem .75rem;font:inherit;font-size:1rem;color:var(--ink-900);
  background:#fff;border:1px solid #c5d3dc;border-radius:var(--radius-s);box-shadow:var(--schatten-innen);
  transition:border-color .15s,box-shadow .15s;
}
.feld textarea{min-height:0;resize:vertical}
/* iOS zeichnet Datumsfelder sonst höher/breiter als die anderen Felder */
.feld input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;line-height:1.25;height:46px}
.feld input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--aqua-500);box-shadow:0 0 0 3px rgba(27,168,196,.22);
}
.feld [aria-invalid="true"]{border-color:var(--rot-dis);background:#fffafa}
.feld-mono input{font-family:var(--font-mono);letter-spacing:.02em}
.feld-hinweis{font-size:.82rem;color:var(--ink-500);margin:.2rem 0}
.feld-fehler{margin:0;font-size:.84rem;color:var(--rot-dis);font-weight:500}
.feld-fehler::before{content:'⚠ '}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 .85rem}
.feld-reihe-zeit{grid-template-columns:1fr 1fr;gap:0 .6rem}
@media(max-width:560px){
  .feld-reihe:not(.feld-reihe-zeit){grid-template-columns:1fr}
}

.kacheln{border:none;margin:0 0 .9rem;padding:0;min-width:0}
.kacheln legend{padding:0;margin-bottom:.45rem;line-height:1.45}
.kacheln-reihe{display:flex;flex-wrap:wrap;gap:.5rem}
.kachel{position:relative;flex:1 1 150px}
.kachel input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kachel span{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;padding:.55rem .8rem;
  border:1.5px solid #c5d3dc;border-radius:var(--radius-m);background:#fff;font-weight:600;color:var(--ink-700);
  box-shadow:var(--schatten-xs);transition:all .15s;
}
.kachel input:checked + span{border-color:var(--petrol-700);background:var(--aqua-50);color:var(--petrol-900);box-shadow:0 0 0 3px rgba(23,93,133,.15)}
.kachel input:checked + span::before{content:'✓';margin-right:.4rem;color:var(--aqua-600)}
.kachel input:focus-visible + span{outline:3px solid var(--aqua-500);outline-offset:2px}
.kacheln:has([aria-invalid="true"]) .kachel span{border-color:var(--rot-dis)}

.lizenz-bisher{margin:0 0 .8rem!important;color:var(--ink-700)}

.bestaetigung{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;font-weight:500}
.bestaetigung input{width:22px;height:22px;flex:none;margin-top:.1rem;accent-color:var(--petrol-700)}

/* ---- Knöpfe ---- */
.knopf,.knopf-klein{font:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.knopf{
  min-height:50px;padding:.7rem 1.4rem;border:none;border-radius:999px;
  background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));color:#fff;
  font-weight:600;font-size:1rem;box-shadow:var(--schatten-s),inset 0 1px 0 rgba(255,255,255,.12);
}
.knopf:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--schatten-m)}
.knopf:disabled{opacity:.6;cursor:progress}
.knopf-zweit{background:#fff;color:var(--petrol-800);border:1px solid var(--line);box-shadow:var(--schatten-xs)}
.knopf-akzent{background:linear-gradient(180deg,#ef6c5a,var(--akzent))}
.knopf-klein{
  min-height:38px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--aqua-300);
  background:var(--aqua-50);color:var(--petrol-700);font-weight:600;font-size:.86rem;
}
.knopf-klein:hover{background:var(--aqua-100)}
.knopf-leise{border-color:transparent;background:transparent;color:var(--ink-500);font-weight:500}
.knopf-leise:hover{background:var(--bg-surface-2);color:var(--rot-dis)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
:is(.knopf,.knopf-klein,.kal-tag,.stepper button):focus-visible{outline:3px solid var(--aqua-500);outline-offset:2px}

/* ---- Navigationsleiste ---- */
.navi-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px -10px rgba(5,33,49,.2);
  padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));
}
.navi-inner{max-width:760px;margin:0 auto;display:flex;justify-content:space-between;gap:.75rem}
.navi-inner .knopf{flex:0 1 auto}
@media(max-width:480px){.navi-inner .knopf{flex:1 1 0;padding-inline:.8rem}}

/* ---- Kalender mit aufklappbarem Tag (Schritt 2) ---- */
.kal-monate{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 1rem;align-items:start}
.kal-kopf{display:flex;justify-content:space-between;align-items:baseline}
.kal-anzahl{font-size:.8rem;color:var(--aqua-600);font-weight:600}
.kal-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.kal-wt{text-align:center;font-size:.7rem;font-weight:700;color:var(--ink-400);letter-spacing:.05em;padding-bottom:.2rem}
.kal-tag{
  position:relative;aspect-ratio:1;min-height:38px;min-width:0;border-radius:10px;border:1px solid var(--line-soft);
  background:#fff;font:inherit;font-size:.9rem;font-weight:500;color:var(--ink-700);cursor:pointer;
  touch-action:manipulation;transition:background .12s,transform .12s;
}
.kal-tag.we{background:var(--bg-surface-2);color:var(--ink-500)}
.kal-tag:hover{border-color:var(--aqua-300);transform:scale(1.05)}
.kal-tag.an{background:linear-gradient(160deg,var(--aqua-500),var(--petrol-600));color:#fff;border-color:var(--petrol-600);font-weight:700;box-shadow:var(--schatten-s)}
.kal-tag.unfertig{background:#fff2d6;color:#6a4f0e;border:1.5px dashed #d4a63a;box-shadow:none}
.kal-tag.offen{outline:3px solid var(--gold-tief);outline-offset:1px;z-index:1}
@media (hover: hover){
  .kal-tag[data-tipp]:hover::after{
    content:attr(data-tipp);position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;
    width:max-content;max-width:260px;padding:.45rem .6rem;border-radius:8px;
    background:var(--petrol-900);color:#fff;box-shadow:var(--schatten-m);
    font-size:.78rem;font-weight:500;line-height:1.45;text-align:left;white-space:pre-line;pointer-events:none;
  }
  .kal-tag.tipp-rechts[data-tipp]:hover::after{left:auto;right:0}
  .kal-tag.offen[data-tipp]:hover::after{display:none}
}
.kal-zahl{position:absolute;top:2px;right:4px;font-size:.6rem;font-weight:700;opacity:.9}

.tag-editor{
  grid-column:1 / -1;margin:.4rem 0 .6rem;padding:.9rem;min-width:0;
  border-radius:var(--radius-m);background:var(--aqua-50);border:1px solid var(--aqua-300);
  box-shadow:var(--schatten-s);
}
.tag-editor.neu{animation:aufklappen .18s ease-out}
@keyframes aufklappen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tag-editor-kopf{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem}
.tag-editor-kopf h3{margin:0;font-size:1.02rem}
.tag-editor .feld input,.tag-editor .feld select{min-width:0;min-height:42px;padding:.45rem .6rem}
.tag-editor .feld{margin-bottom:.55rem}
.feld-zeit select{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.legende{padding-top:.8rem;padding-bottom:.8rem}
.legende h3{margin:0 0 .4rem;font-size:.95rem}
.legende ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.legende li{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;line-height:1.35}
.farbpunkt{flex:none;width:14px;height:14px;border-radius:4px;margin-top:.15rem;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.einheit{border-top:1px solid var(--aqua-100);padding-top:.7rem;margin-top:.5rem}
.einheit:first-of-type{border-top:none;padding-top:0;margin-top:0}
.einheit-kopf{display:flex;justify-content:space-between;align-items:center;min-height:30px;margin-bottom:.2rem}
.einheit-nr{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-tief)}
.einheit-dauer{margin-left:.4rem;font-family:var(--font-mono);letter-spacing:0;text-transform:none;color:var(--petrol-800);font-size:.85rem}
.mehr{margin:0 0 .5rem}
.mehr summary{cursor:pointer;font-size:.86rem;color:var(--aqua-600);font-weight:600;padding:.3rem 0}
.mehr[open] summary{margin-bottom:.5rem}
.knopf-plus{display:block;margin:.2rem 0 .6rem;padding-left:0;text-align:left;color:var(--petrol-700);font-weight:600}
.knopf-plus:hover{color:var(--petrol-900)}
.uebertragen{display:block;width:100%;min-height:46px;white-space:normal}
.tag-editor .hinweis{margin:.6rem 0 0}
.tag-weg{display:block;margin:.5rem auto 0}
.summen-leiste{
  position:sticky;bottom:84px;z-index:5;display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  margin:1rem 0;padding:.5rem .9rem;border-radius:var(--radius-m);font-size:.9rem;white-space:nowrap;
  background:linear-gradient(160deg,var(--petrol-900),var(--petrol-700));color:#fff;box-shadow:var(--schatten-m);
}

/* ---- Karten mit Kopfzeile und Aktion ---- */
.tag-kopf{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem}
.tag-kopf h3{margin:0}

/* ---- Einsätze (Schritt 3) ---- */
.art-marke{
  display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;margin-right:.3rem;
  background:var(--aqua-100);color:var(--petrol-700);
}
.einsatz-kampfrichter .art-marke,.art-marke.art-kampfrichter{background:#f1e6fb;color:#5b2d86}
.einsatz-wettkampf{border-left:4px solid var(--aqua-500)}
.einsatz-kampfrichter{border-left:4px solid #8e5cc0}
.einsatz-schwimmkurs{border-left:4px solid var(--gold-tief)}
.einsatz-fertig{display:block;width:100%;margin-top:.8rem}
.einsatz-zu{padding-top:.7rem;padding-bottom:.7rem}
.einsatz-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.einsatz-text{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.einsatz-knoepfe{display:flex;gap:.3rem;margin-left:auto}

/* ---- Zusammenfassung (Schritt 4) ---- */
.kennzahlen{padding:0;margin:0 0 1rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.kennzahl-wert{font-size:1.8rem}
.daten-liste{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1rem;margin:0}
.daten-liste dt{color:var(--ink-500);font-size:.88rem}
.daten-liste dd{margin:0;font-weight:500}
@media(max-width:420px){.daten-liste{grid-template-columns:1fr;gap:.1rem}.daten-liste dd{margin-bottom:.5rem}}
.marke{display:inline-block;padding:.08rem .5rem;border-radius:999px;font-size:.74rem;font-weight:600;margin-left:.3rem}
.marke-offen{background:#fff2d6;color:#6a4f0e}
.tabelle{width:100%;border-collapse:collapse;font-size:.86rem;margin:.3rem 0 .6rem}
.tabelle th,.tabelle td{padding:.45rem .5rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.tabelle thead th{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);border-bottom:1px solid var(--line)}
.tabelle tfoot td{font-weight:700;border-bottom:none;border-top:2px solid var(--line)}
.tabelle .r{text-align:right}
.tabelle-kompakt{max-width:460px;margin-bottom:1rem}
.monat-block{border:1px solid var(--line-soft);border-radius:var(--radius-m);margin:.5rem 0;background:#fff}
.monat-block summary{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  padding:.6rem .8rem;cursor:pointer;background:var(--aqua-50);border-radius:var(--radius-m);list-style:none}
.monat-block summary::-webkit-details-marker{display:none}
.monat-block summary::before{content:'▸';color:var(--aqua-600);margin-right:.2rem;transition:transform .15s}
.monat-block[open] summary::before{transform:rotate(90deg)}
.monat-block[open] summary{border-radius:var(--radius-m) var(--radius-m) 0 0}
.monat-name{font-weight:700;color:var(--petrol-900);flex:1}
.monat-summe{font-size:.85rem;color:var(--ink-700)}
.woche{padding:0 .8rem}
.woche + .woche{border-top:1px dashed var(--line)}
.woche-kopf{display:flex;justify-content:space-between;padding:.45rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.training-summe{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 0;padding:.5rem .8rem;border-top:2px solid var(--line);font-weight:700}
.tabelle-verguetung{width:100%;max-width:none;table-layout:fixed}
.tabelle-verguetung td:last-child{width:7.2em}
.tabelle-verguetung td small{white-space:normal}
.training-liste{list-style:none;margin:0;padding:0;font-size:.88rem}
.training-liste li{display:grid;grid-template-columns:1fr auto auto;gap:.1rem .8rem;padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
.training-liste li:last-child{border-bottom:none}
.tl-datum{font-weight:600;color:var(--ink-900)}
.tl-dauer{text-align:right;min-width:3.6em;white-space:nowrap}
.tl-zeit{white-space:nowrap;color:var(--ink-700)}
.tl-wo{grid-column:1 / -1;color:var(--ink-500);font-size:.82rem}
.lizenz-marke{display:inline-block;margin-left:.3rem;padding:0 .45rem;border-radius:999px;font-size:.7rem;font-weight:700;
  background:var(--aqua-100);color:var(--petrol-700);white-space:nowrap}
.lizenz-B,.lizenz-A{background:#e6f4ea;color:#1e6b34}
.lizenz-helfer,.lizenz-keine{background:var(--bg-surface-2);color:var(--ink-500)}
.einsatz-liste{list-style:none;margin:0 0 .6rem;padding:0}
.einsatz-liste li{display:flex;gap:.4rem;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
.einsatz-liste li > span:last-child{min-width:0;overflow-wrap:anywhere}
.saisonkarte-zeile{font-size:.92rem}
.absenden-karte{border-color:var(--aqua-300)}
.eingang{border-top:4px solid var(--besser)}
.eingang h2{margin-top:.8rem}
.eingang .eyebrow{color:var(--besser)}
.eingang .eyebrow::after{background:var(--besser)}

/* Kopfzeile oben und Navigationsleiste unten sind fest — Sprungziele,
   Fokus und scrollIntoView sollen nicht darunter landen. */
html{scroll-padding-top:5rem;scroll-padding-bottom:6.5rem}
/* main trägt die feste Navigationsleiste — es muss über der Fußzeile liegen,
   sonst fängt die Fußzeile auf manchen Geräten die Tipps auf „Weiter“ ab. */
.app-main{z-index:2}
/* main trägt die feste Navigationsleiste — es muss über der Fußzeile liegen,
   sonst fängt die Fußzeile auf manchen Geräten die Tipps auf „Weiter“ ab. */
.app-main{z-index:2}

/* ---- Impressum / Datenschutz ---- */
.footer-links{margin-top:.5rem!important;display:flex;justify-content:center;gap:.5rem}
.link-knopf{font:inherit;font-weight:600;color:var(--petrol-700);background:none;border:none;padding:.5rem .6rem;min-height:44px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:8px}
.link-knopf:hover{background:var(--aqua-50)}
.link-knopf:focus-visible{outline:3px solid var(--aqua-500);outline-offset:2px}
.rechtliches{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:none;border-radius:var(--radius-m);box-shadow:var(--schatten-m)}
.rechtliches::backdrop{background:rgba(5,33,49,.55)}
.rechtliches-inhalt{padding:1rem 1.2rem 1.4rem;font-size:.92rem;line-height:1.55;color:var(--ink-700)}
.rechtliches-kopf{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  margin:-1rem -1.2rem .6rem;padding:.8rem 1.2rem;background:#fff;border-bottom:1px solid var(--line-soft)}
.rechtliches-kopf h2{margin:0;font-size:1.2rem}
.rechtliches h3{font-size:1rem;margin:1rem 0 .3rem}
.rechtliches a{color:var(--petrol-700);overflow-wrap:anywhere}