/* Verwaltung der Trainerabrechnung SC Schwandorf — Grundlagen (Farben,
   Gewebe, Kopfzeile) aus der Trainer-App bzw. dem WK3 Tracker übernommen,
   damit beide wie eine Familie aussehen. Darunter die Verwaltungsteile. */

: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;
  /* Geändert, aber noch nicht abgesendet (Korrektur einer Einreichung) */
  --orange:#d9730d;--orange-bg:#fff1e0;--orange-line:#f4c48c;
  /* 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))}



/* =====================================================================
   VERWALTUNG
   Desktop zuerst (Vereinsrechner mit macOS/Windows), dann iPad, dann Handy.
   ===================================================================== */
:root{
  --seitenleiste:15.5rem;
  --kopf-hoehe:4.4rem;
  /* Status: nie nur Farbe — immer mit Text und Punkt */
  --st-offen:#b7791f;--st-offen-bg:#fff5df;--st-offen-line:#f1d193;
  --st-frei:#10668e;--st-frei-bg:#e3f3fa;--st-frei-line:#9fd3e8;
  --st-bezahlt:var(--besser);--st-bezahlt-bg:var(--besser-bg);--st-bezahlt-line:var(--besser-line);
  --st-leer:var(--ink-500);--st-leer-bg:#eef2f5;--st-leer-line:var(--line);
}
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:.9em}
.klein{font-size:.85em}
.nowrap{white-space:nowrap}
.gedimmt{color:var(--ink-400)}
.rechts{text-align:right}
.icon{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}
a{color:var(--petrol-600)}
a:hover{color:var(--petrol-800)}
kbd{font-family:var(--font-mono);font-size:.72rem;padding:.05rem .35rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--bg-elev);color:var(--ink-700)}
.laden{padding:3rem 1rem;text-align:center;color:var(--ink-500)}
:focus-visible{outline:3px solid var(--aqua-500);outline-offset:2px}

/* ----------------------------------------------------------- Anmeldung */
.login-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:10;
  background:
    radial-gradient(ellipse at 20% 0%,rgba(27,168,196,.35),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(232,93,75,.12),transparent 50%),
    linear-gradient(170deg,var(--petrol-900),var(--petrol-700));
}
.login-screen::before{content:'';position:absolute;inset:0;background-image:var(--gewebe-dunkel);pointer-events:none}
.login-screen[hidden]{display:none}
.login-karte{
  position:relative;width:100%;max-width:23rem;text-align:center;
  background:var(--karte-bg);border-radius:var(--radius-l);padding:2.2rem 2rem 1.6rem;
  box-shadow:var(--schatten-l),var(--schatten-eingepraegt);
}
.login-logo{height:84px;width:auto;margin:0 auto .5rem;display:block}
.login-marke{font-family:var(--font-display);font-weight:800;font-size:1.55rem;color:var(--petrol-900);letter-spacing:-.01em;line-height:1.15}
.login-zusatz{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--aqua-600);font-weight:600;margin:.2rem 0 1.5rem}
.login-karte form{text-align:left}
.login-karte label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-700);margin-bottom:.3rem}
.login-karte input{
  width:100%;font-family:var(--font-mono);font-size:1rem;padding:.7rem .8rem;
  border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-elev);color:var(--ink-900);
}
.login-karte input:focus{outline:2px solid var(--aqua-500);border-color:var(--aqua-500)}
.login-fehler{color:var(--rot-dis);font-size:.85rem;margin:.5rem 0 0;font-weight:500}
.login-fehler[hidden]{display:none}
.login-karte .knopf{margin-top:1rem}
.login-hinweis{font-size:.75rem;color:var(--ink-400);margin:1.3rem 0 0;padding-top:1rem;border-top:1px solid var(--line-soft)}

/* ------------------------------------------------------------- Rahmen */
.app-rahmen{display:grid;grid-template-columns:var(--seitenleiste) minmax(0,1fr);min-height:100vh;position:relative;z-index:1}
.app-rahmen[hidden]{display:none}
.seitenleiste{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:.3rem;padding:1.1rem .8rem;
  background:
    radial-gradient(ellipse at top left,rgba(27,168,196,.22),transparent 60%),
    linear-gradient(185deg,var(--petrol-900),var(--petrol-800) 70%,#0c3a5b);
  color:#fff;box-shadow:var(--schatten-m);z-index:30;
}
.seitenleiste::before{content:'';position:absolute;inset:0;background-image:var(--gewebe-dunkel);pointer-events:none}
.seitenleiste > *{position:relative}
.marke{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;padding:.2rem .5rem 1.1rem;margin-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.1)}
.marke img{height:34px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.marke b{display:block;font-family:var(--font-display);font-weight:800;font-size:.9rem;line-height:1.15;letter-spacing:-.01em}
.marke small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua-300);font-weight:600}
.marke:hover{color:#fff}
.navi{display:flex;flex-direction:column;gap:.15rem}
.navi-link{
  display:flex;align-items:center;gap:.7rem;padding:.62rem .75rem;border-radius:10px;
  color:rgba(255,255,255,.78);text-decoration:none;font-weight:500;font-size:.93rem;
  background:none;border:0;font-family:inherit;cursor:pointer;width:100%;text-align:left;
  transition:background .15s,color .15s;
}
.navi-link .icon{width:1.25rem;height:1.25rem;opacity:.85}
.navi-link:hover{background:rgba(255,255,255,.07);color:#fff}
.navi-link.aktiv{background:linear-gradient(90deg,rgba(27,168,196,.28),rgba(27,168,196,.1));color:#fff;box-shadow:inset 3px 0 0 var(--aqua-300)}
.navi-link.aktiv .icon{opacity:1;color:var(--aqua-300)}
.navi-klein{font-size:.85rem;padding:.5rem .75rem}
.seitenleiste-fuss{margin-top:auto;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.1)}
.angemeldet{padding:.2rem .75rem .5rem;font-size:.85rem;line-height:1.3}
.angemeldet-als{display:block;font-size:.68rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em}
.seitenleiste-schleier{display:none}

.inhalt-bereich{min-width:0;display:flex;flex-direction:column}
.kopfleiste{
  position:sticky;top:0;z-index:20;min-height:var(--kopf-hoehe);
  display:flex;align-items:center;gap:1rem;padding:.7rem 2rem;
  background:rgba(238,243,247,.88);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.menue-knopf{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:.45rem;cursor:pointer;color:var(--petrol-800)}
.menue-knopf .icon{width:1.4rem;height:1.4rem}
.kopf-titel{min-width:0;flex:1}
.kopf-titel h1{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.015em;color:var(--petrol-900);margin:0;line-height:1.15;outline:none}
.kopf-pfad{margin:0 0 .1rem;font-size:.78rem;color:var(--ink-500);display:flex;align-items:center;gap:.35rem}
.kopf-pfad:empty{display:none}
.kopf-pfad a{text-decoration:none;display:inline-flex;align-items:center;gap:.2rem;font-weight:500}
.kopf-aktionen{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ansicht{padding:1.4rem 2rem 6rem;max-width:1560px;width:100%}

/* ------------------------------------------------------------- Knöpfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--font-body);font-size:.88rem;font-weight:600;line-height:1.2;
  padding:.58rem 1rem;border-radius:10px;cursor:pointer;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;
}
.knopf:active:not(:disabled){transform:translateY(1px)}
.knopf:disabled,.knopf.aus{opacity:.45;cursor:not-allowed}
.knopf-primaer{background:linear-gradient(180deg,var(--petrol-600),var(--petrol-700));color:#fff;box-shadow:var(--schatten-s)}
.knopf-primaer:hover:not(:disabled){background:linear-gradient(180deg,var(--petrol-700),var(--petrol-800));color:#fff}
.knopf-zweit{background:var(--bg-elev);border-color:var(--line);color:var(--ink-700);box-shadow:var(--schatten-xs)}
.knopf-zweit:hover:not(:disabled):not(.aus){border-color:var(--aqua-300);color:var(--petrol-800)}
.knopf-gefahr{background:var(--rot-dis);color:#fff}
.knopf-gefahr:hover{background:#a63a28}
.knopf-freigegeben{background:linear-gradient(180deg,#1476a3,var(--st-frei));color:#fff}
.knopf-bezahlt{background:linear-gradient(180deg,#23905b,var(--besser));color:#fff}
.knopf-breit{width:100%}
.knopf-icon-text .icon{width:1rem;height:1rem}
.knopf-klein-text{font-size:.8rem;padding:.4rem .7rem}
.knopf-klein{
  display:inline-flex;align-items:center;gap:.3rem;font-family:inherit;font-size:.78rem;font-weight:600;
  padding:.32rem .62rem;border-radius:8px;border:1px solid var(--line);background:var(--bg-elev);color:var(--ink-700);cursor:pointer;white-space:nowrap;
}
.knopf-klein:hover{border-color:var(--aqua-300);color:var(--petrol-800)}
.knopf-klein.knopf-freigegeben{background:linear-gradient(180deg,#1476a3,var(--st-frei));border-color:transparent;color:#fff}
.knopf-klein.knopf-bezahlt{background:linear-gradient(180deg,#23905b,var(--besser));border-color:transparent;color:#fff}
.knopf-klein.knopf-freigegeben:hover,.knopf-klein.knopf-bezahlt:hover{filter:brightness(1.08);color:#fff}
.knopf-leise{background:none;border-color:transparent;color:var(--ink-500)}
.knopf-icon{
  display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--ink-500);cursor:pointer;font-size:1.3rem;line-height:1;
}
.knopf-icon:hover:not(:disabled){background:var(--bg-surface-2);border-color:var(--line);color:var(--petrol-800)}
.knopf-icon.gefahr:hover:not(:disabled){color:var(--rot-dis)}
.knopf-icon:disabled{opacity:.3;cursor:not-allowed}
.chip{font-family:var(--font-mono);font-size:.75rem;padding:.2rem .5rem;border-radius:999px;border:1px solid var(--aqua-100);background:var(--aqua-50);color:var(--petrol-700);cursor:pointer}
.chip:hover{border-color:var(--aqua-300)}
.chip.still{cursor:default;font-family:var(--font-body)}

/* ------------------------------------------------------------- Karten */
.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.3rem;margin-bottom:1rem;
}
.karte-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.8rem;flex-wrap:wrap}
.karte h2,.karte h3{font-family:var(--font-display);font-weight:700;font-size:1.08rem;margin:0;color:var(--petrol-900)}
.fehler-karte{max-width:40rem;border-color:#f3bfb6}
.leer{text-align:center;padding:3rem 1rem;color:var(--ink-500)}
.leer-titel{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink-700);margin:0 0 .3rem}
.hinweis{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem 1rem;border-radius:var(--radius-s);border:1px solid;margin:0 0 1rem;font-size:.9rem;line-height:1.5}
.hinweis .icon{margin-top:.15rem;width:1.2rem;height:1.2rem}
.hinweis-info{background:var(--aqua-50);border-color:var(--aqua-100);color:var(--petrol-700)}
.hinweis-warn{background:var(--st-offen-bg);border-color:var(--st-offen-line);color:#6a4a0a}
.hinweis-fehler{background:var(--rot-dis-bg);border-color:#f3bfb6;color:#8f3222}

/* ------------------------------------------------------------- Status */
.status{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;white-space:nowrap;
  padding:.18rem .6rem .18rem .5rem;border-radius:999px;border:1px solid;
}
.status-punkt{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.status-offen{color:var(--st-offen);background:var(--st-offen-bg);border-color:var(--st-offen-line)}
.status-frei{color:var(--st-frei);background:var(--st-frei-bg);border-color:var(--st-frei-line)}
.status-bezahlt{color:var(--st-bezahlt);background:var(--st-bezahlt-bg);border-color:var(--st-bezahlt-line)}
.status-leer{color:var(--st-leer);background:var(--st-leer-bg);border-color:var(--st-leer-line)}
.status-leer .status-punkt{background:none;border:1.5px solid currentColor}
.status-gross{font-size:.95rem;padding:.35rem .9rem .35rem .75rem}
.status-gross .status-punkt{width:.6rem;height:.6rem}
.marke-korrektur{display:inline-block;padding:0 .4rem;border-radius:999px;background:#fff1e0;border:1px solid #f4c48c;color:#8a4608;font-size:.72rem;font-weight:600}
.marke-gesperrt{display:inline-block;padding:0 .45rem;border-radius:999px;background:var(--rot-dis-bg);color:var(--rot-dis);font-size:.72rem;font-weight:600;border:1px solid #f3bfb6}
.marke-fest{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--st-frei);font-weight:600}
.marke-bald{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;background:var(--gold-2);color:var(--petrol-900);border-radius:999px;padding:0 .4rem}

/* ------------------------------------------- Übersicht: Kopf und Kacheln */
.leiste-oben{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.zeitraum-wahl{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink-700);font-size:.85rem}
.zeitraum-wahl select,.feld select,.feld input,.feld textarea,.edit-tabelle input,.listen-edit input,.inline-feld input,.suche input,.notiz-form textarea{
  font-family:inherit;font-size:.92rem;color:var(--ink-900);background:var(--bg-elev);
  border:1px solid var(--line);border-radius:9px;padding:.5rem .7rem;
}
.zeitraum-wahl select{font-weight:600;font-size:.95rem;padding:.55rem 2rem .55rem .8rem;min-width:18rem}
/* Auswahlfelder dürfen schrumpfen — WebKit misst sonst die längste Option */
select{min-width:0;max-width:100%;text-overflow:ellipsis}
.zeitraum-wahl{max-width:100%;min-width:0}
select:focus,input:focus,textarea:focus{outline:2px solid var(--aqua-500);outline-offset:0;border-color:var(--aqua-500)}
.fenster-hinweis{margin:0;font-size:.85rem;color:var(--ink-500);padding:.35rem .8rem;border-radius:999px;background:var(--bg-surface-2);border:1px solid var(--line)}
.fenster-hinweis.offen{color:var(--besser);background:var(--besser-bg);border-color:var(--besser-line)}

.status-kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}
.status-kachel{
  position:relative;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink-700);
  background:var(--karte-bg);border:1px solid var(--line);border-radius:var(--radius-m);padding:.8rem .95rem .75rem;
  box-shadow:var(--karte-schatten);transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:.1rem;
}
.status-kachel::before{content:'';position:absolute;left:0;top:.8rem;bottom:.8rem;width:3px;border-radius:0 3px 3px 0;background:var(--line)}
.status-kachel.ton-offen::before{background:var(--st-offen)}
.status-kachel.ton-frei::before{background:var(--st-frei)}
.status-kachel.ton-bezahlt::before{background:var(--st-bezahlt)}
.status-kachel.ton-alle::before{background:var(--petrol-700)}
.status-kachel:hover{transform:translateY(-1px);box-shadow:var(--karte-schatten-hover)}
.status-kachel.aktiv{border-color:var(--petrol-600);box-shadow:0 0 0 2px var(--petrol-600),var(--karte-schatten)}
.status-kachel.betont .kachel-zahl{color:var(--st-offen)}
.kachel-label{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500)}
.kachel-zahl{font-family:var(--font-display);font-weight:800;font-size:1.75rem;line-height:1.1;color:var(--petrol-900)}
.kachel-summe{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-500)}

.werkzeugleiste{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.suche{position:relative;display:flex;align-items:center;flex:0 1 24rem}
.suche .icon{position:absolute;left:.7rem;color:var(--ink-400)}
.suche input{width:100%;padding-left:2.2rem}
.schalter{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--ink-700);cursor:pointer}
.schalter input{width:1rem;height:1rem;accent-color:var(--petrol-600)}
.zaehler{font-size:.72rem;font-weight:700;background:#fff1e0;color:#8a4608;border-radius:999px;padding:0 .4rem}
.treffer{font-size:.82rem;color:var(--ink-500)}
.sammel{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.sammel.an{margin-left:auto;padding:.3rem .4rem .3rem .8rem;background:var(--petrol-900);color:#fff;border-radius:10px;box-shadow:var(--schatten-m)}
.sammel.an .knopf-leise{color:rgba(255,255,255,.75)}
.segment{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-elev)}
.segment button{font-family:inherit;font-size:.82rem;font-weight:600;padding:.45rem .85rem;border:0;background:none;color:var(--ink-500);cursor:pointer}
.segment button + button{border-left:1px solid var(--line)}
.segment button.an{background:var(--petrol-700);color:#fff}

/* ---------------------------------------------------------- Datentabelle */
.tabelle-rahmen{position:relative;overflow-x:auto;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--karte-schatten)}
.tabelle-rahmen.flach{box-shadow:none}
.daten-tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
/* tnum nur für Zahlen — Inter setzt damit sonst auch Bindestriche breit */
.spalte-zahl,.spalte-betrag,.spalte-eingereicht,.kachel-zahl,.kachel-summe{font-variant-numeric:tabular-nums}
.daten-tabelle th,.daten-tabelle td{padding:.62rem .8rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-soft)}
.daten-tabelle thead th{
  background:#f4f8fb;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.tabelle-rahmen > .daten-tabelle thead th:first-child{border-top-left-radius:var(--radius-m)}
.tabelle-rahmen > .daten-tabelle thead th:last-child{border-top-right-radius:var(--radius-m)}
.daten-tabelle tbody tr{transition:background .1s}
.daten-tabelle tbody tr:nth-child(even) td{background:rgba(241,246,249,.45)}
.daten-tabelle tbody tr[data-zeile]{cursor:pointer}
.daten-tabelle tbody tr[data-zeile]:hover td{background:var(--aqua-50)}
.daten-tabelle tbody tr:focus-visible{outline:none}
.daten-tabelle tbody tr:focus-visible td{background:var(--aqua-50);box-shadow:inset 0 2px 0 var(--aqua-500),inset 0 -2px 0 var(--aqua-500)}
.daten-tabelle tbody tr.gewaehlt td{background:#e6f1f7}
.daten-tabelle tbody tr.gesperrt td{opacity:.6}
.daten-tabelle tbody tr:last-child td{border-bottom:0}
.daten-tabelle tfoot td{background:#f4f8fb;border-top:1px solid var(--line);border-bottom:0;font-size:.85rem;color:var(--ink-700)}
.tabelle-rahmen > .daten-tabelle tfoot tr:last-child td:first-child{border-bottom-left-radius:var(--radius-m)}
.tabelle-rahmen > .daten-tabelle tfoot tr:last-child td:last-child{border-bottom-right-radius:var(--radius-m)}
.daten-tabelle .unterzeile{display:block;font-size:.76rem;color:var(--ink-500);margin-top:.1rem}
/* E-Mail einzeilig, notfalls gekürzt — sonst werden die Zeilen dreimal so hoch */
/* ===== Datenraster der Übersicht =====
   Die Tabelle scrollt in ihrem eigenen Kasten, der die Fensterhöhe füllt:
   Kopf oben und Summenzeile unten bleiben immer sichtbar, die ersten drei
   Spalten (Auswahl, Trainer:in, Status) links fixiert. Schatten zeigen,
   dass es seitlich weitergeht (Klassen setzt abrechnungen.js beim Scrollen). */
.raster-huelle{position:relative;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-elev);box-shadow:var(--karte-schatten);overflow:hidden}
.raster{
  overflow:auto;max-height:max(22rem,calc(100vh - var(--kopf-hoehe) - 2.2rem));
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink-300) transparent;
}
.raster::-webkit-scrollbar{width:10px;height:10px}
.raster::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:10px;border:2px solid var(--bg-elev)}
.raster .daten-tabelle{min-width:62rem}
.raster .daten-tabelle thead th{position:sticky;top:0;z-index:3}
.raster .daten-tabelle tfoot td{position:sticky;bottom:0;z-index:3;background:#eef4f8;font-weight:500}
.raster .fix{position:sticky;z-index:2;background:var(--bg-elev)}
.raster thead .fix,.raster tfoot .fix{z-index:4}
.raster thead .fix{background:#f4f8fb}
.raster tfoot .fix{background:#eef4f8}
.raster .fix-1{left:0;width:2.75rem;min-width:2.75rem}
.raster .fix-2{left:2.75rem;width:17rem;min-width:17rem;max-width:17rem}
.raster .fix-3{left:19.75rem;width:10.5rem;min-width:10.5rem}
/* Zebra, Hover und Auswahl auch in den fixierten Zellen — deckend */
.raster tbody tr:nth-child(even) td{background:#f7fafc}
.raster tbody tr[data-zeile]:hover td{background:#eaf6f9}
.raster tbody tr.gewaehlt td{background:#e3eff6}
.raster tbody tr:focus-visible td{background:#eaf6f9}
/* Fixierte Spalten werfen Schatten, sobald seitlich gescrollt ist */
.raster .fix-3{box-shadow:inset -1px 0 0 var(--line-soft)}
.raster-huelle.links .fix-3{box-shadow:6px 0 10px -6px rgba(5,33,49,.28),inset -1px 0 0 var(--line)}
.raster-huelle::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:2.2rem;pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(90deg,transparent,rgba(5,33,49,.12));border-radius:0 var(--radius-m) var(--radius-m) 0;
}
.raster-huelle.rechts::after{opacity:1}
.raster .spalte-name .name,.raster .spalte-name .unterzeile{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raster .spalte-eingereicht,.raster .spalte-training,.raster .spalte-betrag,.raster .spalte-lizenz{white-space:nowrap}
.raster-huelle::after{background:linear-gradient(90deg,transparent,rgba(5,33,49,.16))}
/* Zeilendichte */
.raster-huelle.kompakt .daten-tabelle th,.raster-huelle.kompakt .daten-tabelle td{padding-top:.36rem;padding-bottom:.36rem}
.raster-huelle.kompakt .unterzeile{display:none!important}
.raster-huelle.kompakt .spalte-name .unterzeile.immer{display:block!important}
.dichte{margin-left:auto}
.spalte-zahl .unterzeile{white-space:nowrap}
.daten-tabelle .name{font-weight:600;color:var(--ink-900)}
.spalte-wahl{width:2.4rem;padding-right:0!important}
.spalte-wahl input{width:1.05rem;height:1.05rem;accent-color:var(--petrol-600);cursor:pointer}
.spalte-zahl,.spalte-betrag{text-align:right!important}
.spalte-betrag b{font-family:var(--font-mono);font-weight:600;font-size:.95em}
.spalte-aktion{text-align:right!important;white-space:nowrap}
.zeile-pfeil{display:inline-block;color:var(--ink-300);margin-left:.3rem;vertical-align:middle}
tr[data-zeile]:hover .zeile-pfeil{color:var(--petrol-600)}
.sortier{display:inline-flex;align-items:center;gap:.25rem;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sortier:hover{color:var(--petrol-800)}
.sortier-pfeil{width:.9rem;height:.9rem;opacity:0}
.sortier:hover .sortier-pfeil{opacity:.4}
.sortier-pfeil.an{opacity:1;color:var(--petrol-700)}
.spalte-zahl .sortier{flex-direction:row-reverse}
.zeile-bezahlt .name{color:var(--ink-700)}
.tasten-hinweis{font-size:.75rem;color:var(--ink-400);margin:.8rem 0 0;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.daten-tabelle.kompakt th,.daten-tabelle.kompakt td{padding:.45rem .6rem}
.daten-tabelle.kompakt thead th{position:static}
.gruppen-zeile th,.gruppen-zeile td{background:var(--bg-surface-2)!important;font-weight:700;color:var(--petrol-800);font-size:.82rem}
.bemerkung{color:var(--ink-500);font-size:.85em;max-width:22rem}
.art-marke{display:inline-block;padding:.05rem .5rem;border-radius:999px;font-size:.74rem;font-weight:600;background:var(--aqua-50);color:var(--petrol-700);border:1px solid var(--aqua-100)}
.art-marke.art-pro-abschnitt{background:#f1e6fb;color:#5b2d86;border-color:#dcc6f0}
.art-marke.art-pro-kurs{background:#fbf3dc;color:var(--gold-tief);border-color:#ecd89a}

/* ---------------------------------------------------------- Einzelansicht */
.kopf-karte{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto;gap:1.5rem;align-items:center}
.person-meta{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin:0 0 .7rem;font-size:.88rem;color:var(--ink-500)}
.fassungen{display:flex;gap:.4rem;flex-wrap:wrap}
.fassung-chip{
  font-family:inherit;font-size:.82rem;font-weight:600;padding:.35rem .75rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-elev);color:var(--ink-700);display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;
}
.fassung-chip small{font-weight:500;color:var(--ink-400);font-size:.72rem}
.fassung-chip.aktiv{border-color:var(--petrol-600);box-shadow:0 0 0 1px var(--petrol-600);color:var(--petrol-900)}
.kopf-betrag{text-align:right;padding:0 1.5rem;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.kopf-betrag-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);font-weight:600}
.kopf-betrag-wert{display:block;font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--petrol-900);line-height:1.15}
.kopf-betrag-detail{font-size:.8rem;color:var(--ink-500)}
.kopf-status{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;min-width:13rem}
.kopf-status-detail{font-size:.8rem;color:var(--ink-500);margin:0}
.kopf-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.blaettern-pos{font-size:.8rem;color:var(--ink-500);margin-right:.2rem}
.detail-raster{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1rem;align-items:start}
.detail-seite{position:sticky;top:calc(var(--kopf-hoehe) + 1rem)}
.diff-liste{list-style:none;margin:0;padding:0;font-size:.88rem}
.diff-liste li{display:flex;gap:.55rem;padding:.35rem 0;border-bottom:1px dashed var(--line-soft)}
.diff-liste li:last-child{border-bottom:0}
.diff-zeichen{font-family:var(--font-mono);font-weight:700;width:1rem;text-align:center;flex:none}
.diff-dazu .diff-zeichen{color:var(--besser)}
.diff-weg .diff-zeichen{color:var(--rot-dis)}
.diff-anders .diff-zeichen{color:var(--st-offen)}
.aenderungen{border-left:3px solid var(--st-offen)}
.saisonkarte-zeile{margin:.8rem 0 0;font-size:.88rem;color:var(--ink-700)}
.verlauf{list-style:none;margin:0;padding:0}
.verlauf li{display:grid;grid-template-columns:1rem 1fr;gap:.6rem;padding-bottom:.85rem;position:relative}
.verlauf li:not(:last-child)::before{content:'';position:absolute;left:.44rem;top:1.1rem;bottom:0;width:2px;background:var(--line)}
.verlauf-punkt{width:.9rem;height:.9rem;border-radius:50%;margin-top:.2rem;border:2px solid var(--bg-elev);box-shadow:0 0 0 1px var(--line);background:var(--ink-300)}
.ton-offen .verlauf-punkt{background:var(--st-offen)}
.ton-frei .verlauf-punkt{background:var(--st-frei)}
.ton-bezahlt .verlauf-punkt{background:var(--st-bezahlt)}
.verlauf .andere-fassung{opacity:.55}
.verlauf p{margin:0;font-size:.86rem}
.verlauf-text{font-weight:600;color:var(--ink-900)}
.verlauf-extra{color:var(--ink-500)}
.verlauf-notiz{color:var(--ink-700);font-style:italic}
.verlauf time{font-size:.75rem;color:var(--ink-400)}
.notizen{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.notizen li{background:#fffbea;border:1px solid #f1e3a6;border-radius:9px;padding:.5rem .7rem}
.notizen p{margin:0 0 .2rem;font-size:.88rem;white-space:pre-wrap}
.notizen small{color:var(--ink-500);font-size:.75rem}
.notiz-form{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.notiz-form textarea{width:100%;resize:vertical}
.daten-liste{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1rem;margin:0;font-size:.88rem}
.daten-liste dt{color:var(--ink-500)}
.daten-liste dd{margin:0;display:flex;align-items:center;gap:.3rem;word-break:break-word}
.feld-hinweis{font-size:.8rem;color:var(--ink-500);margin:.5rem 0 0}

/* ----------------------------------------------------------- Dialoge */
.dialog{
  border:none;border-radius:var(--radius-m);box-shadow:var(--schatten-l);padding:0;
  width:calc(100vw - 2rem);max-width:30rem;background:var(--bg-elev);color:var(--ink-900);
}
.dialog-breit{max-width:44rem}
.dialog::backdrop{background:rgba(5,33,49,.55);backdrop-filter:blur(2px)}
.dialog-kopf{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.3rem .2rem}
.dialog-kopf h2{font-family:var(--font-display);font-size:1.2rem;margin:0;color:var(--petrol-900)}
.dialog-inhalt{padding:.5rem 1.3rem;font-size:.92rem}
.dialog-inhalt p{margin:0 0 .7rem}
.dialog-fehler{margin:0 1.3rem;padding:.5rem .7rem;border-radius:8px;background:var(--rot-dis-bg);color:#8f3222;font-size:.85rem}
.dialog-fehler[hidden]{display:none}
.dialog-fuss{display:flex;gap:.6rem;justify-content:flex-end;padding:1rem 1.3rem 1.2rem}
.feld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem;min-width:0}
.feld label{font-size:.8rem;font-weight:600;color:var(--ink-700)}
.feld input,.feld select,.feld textarea{width:100%}
.feld textarea{resize:vertical;line-height:1.5}
.feld .feld-hinweis{margin:0}
.feld-wert{margin:.45rem 0 0}
.optional{font-weight:400;color:var(--ink-400);font-size:.9em}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.feld-reihe.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.link-feld,.passwort-anzeige{padding:.6rem .8rem;border-radius:8px;background:var(--bg-surface-2);border:1px solid var(--line);word-break:break-all;user-select:all}
.passwort-anzeige{font-size:1.2rem;text-align:center;letter-spacing:.04em}

/* ---------------------------------------------------------- Meldungen */
.meldungen{position:fixed;right:1.2rem;top:calc(var(--kopf-hoehe) + .8rem);display:flex;flex-direction:column;gap:.5rem;z-index:1000;max-width:24rem}
.meldung{padding:.7rem 1rem;border-radius:10px;background:var(--petrol-900);color:#fff;box-shadow:var(--schatten-l);font-size:.9rem;
  transition:opacity .5s,transform .5s;animation:rein .25s ease-out}
.meldung-fehler{background:var(--rot-dis)}
.meldung.weg{opacity:0;transform:translateY(-8px)}
@keyframes rein{from{opacity:0;transform:translateY(-8px)}}

/* ------------------------------------------------------- Einstellungen */
.einstellungen{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:1.5rem;align-items:start}
.unternavi{position:sticky;top:calc(var(--kopf-hoehe) + 1rem);display:flex;flex-direction:column;gap:.1rem}
.unternavi a{padding:.5rem .75rem;border-radius:9px;text-decoration:none;color:var(--ink-700);font-size:.9rem;font-weight:500}
.unternavi a:hover{background:var(--bg-surface-2);color:var(--petrol-800)}
.unternavi a.aktiv{background:var(--bg-elev);color:var(--petrol-900);font-weight:700;box-shadow:var(--schatten-xs),inset 3px 0 0 var(--petrol-600)}
.unternavi hr{border:0;border-top:1px solid var(--line);margin:.5rem .5rem;width:auto}
.einstellungen-inhalt{max-width:60rem}
.bereich-kopf{margin-bottom:1rem}
.bereich-kopf h2{font-family:var(--font-display);font-size:1.3rem;margin:0 0 .3rem;color:var(--petrol-900)}
.bereich-kopf p{margin:0;color:var(--ink-500);font-size:.9rem;max-width:48rem}
.edit-tabelle{width:100%;border-collapse:collapse;font-size:.88rem;margin-bottom:.8rem}
.edit-tabelle th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);padding:.3rem .4rem;font-weight:700}
.edit-tabelle td{padding:.25rem .4rem;vertical-align:middle}
.edit-tabelle input[type=text]{width:100%}
input.schmal{width:6.5rem}
.zeilen-knoepfe{display:inline-flex;gap:.1rem;white-space:nowrap}
.listen-edit{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.35rem;max-width:36rem}
.listen-edit li{display:flex;align-items:center;gap:.5rem}
.listen-edit input{flex:1}
.listen-nr{width:1.6rem;text-align:right;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-400)}
.einsatzart{border-left:4px solid var(--petrol-600)}
.art-rand-pro-tag{border-left-color:var(--aqua-500)}
.art-rand-pro-abschnitt{border-left-color:#8e5cc0}
.art-rand-pro-kurs{border-left-color:var(--gold-tief)}
.schalter.gross{align-items:flex-start;gap:.8rem}
.schalter.gross input{margin-top:.25rem;width:1.2rem;height:1.2rem}
.schalter.gross b{display:block;font-size:1rem;color:var(--petrol-900)}
.schalter.gross small{display:block;color:var(--ink-500);font-size:.85rem;margin-top:.15rem}
.testphase-an{border-color:var(--st-offen-line);background:var(--st-offen-bg)}
.speicher-leiste{position:fixed;left:var(--seitenleiste);right:0;bottom:0;z-index:40;padding:.8rem 2rem;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(5,33,49,.25)}
.speicher-leiste[hidden]{display:none}
.speicher-inner{max-width:1560px;display:flex;align-items:center;gap:1rem;justify-content:space-between}
.speicher-text{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-700);font-weight:500}
.speicher-knoepfe{display:flex;gap:.5rem;flex:none}
.speicher-fehler{color:#8f3222;font-size:.85rem}
.speicher-fehler ul{margin:.2rem 0 0;padding-left:1.1rem;max-height:7rem;overflow:auto}

/* ------------------------------------------------------------- E-Mails */
.versandplan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.versandplan li{display:flex;flex-direction:column;padding:.7rem .9rem;border-radius:10px;background:var(--bg-surface-2);border:1px solid var(--line)}
.plan-datum{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--petrol-900)}
.plan-art{font-weight:600;color:var(--ink-700)}
.plan-an{font-size:.8rem;color:var(--ink-500)}
.inline-feld{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--ink-700)}
.inline-feld input{width:4.5rem}
.mail-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem}
.platzhalter{display:flex;gap:.35rem;flex-wrap:wrap}
.mail-vorschau{background:var(--bg-surface-2);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;font-size:.88rem}
.vorschau-label{margin:0 0 .5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-400);font-weight:700}
.vorschau-betreff{margin:0 0 .7rem;font-weight:700;color:var(--ink-900);padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.vorschau-text{line-height:1.6;color:var(--ink-700);word-break:break-word}
.versand{font-size:.78rem;font-weight:600}
.versand-ok{color:var(--besser)}
.versand-fehler{color:var(--rot-dis)}

/* -------------------------------------------------------------- Export */
.export-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.export-wahl .feld{margin:0}
.export-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.export-karte{display:flex;flex-direction:column;gap:.4rem;margin:0}
.export-karte p{margin:0;font-size:.88rem;color:var(--ink-500)}
.export-karte .knopf{margin-top:auto;align-self:flex-start}
.export-umfang{display:flex;gap:.3rem;margin:.3rem 0 .7rem!important}
.export-format{align-self:flex-start;font-family:var(--font-mono);font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:6px}
.format-pdf{background:var(--rot-dis-bg);color:var(--rot-dis)}
.format-xlsx{background:var(--besser-bg);color:var(--besser)}

/* ======================================================= Breakpoints */
/* Kleine Laptops: niedrig priorisierte Spalten weg */
@media (max-width:1280px){
  .status-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail-raster{grid-template-columns:minmax(0,1fr) 19rem}
}
/* iPad quer / schmale Fenster: Seitenleiste als Schublade */
@media (max-width:1200px){
  .app-rahmen{grid-template-columns:minmax(0,1fr)}
  .seitenleiste{position:fixed;left:0;top:0;bottom:0;width:17rem;transform:translateX(-105%);transition:transform .25s ease}
  .menue-offen .seitenleiste{transform:none}
  .menue-offen .seitenleiste-schleier{display:block;position:fixed;inset:0;background:rgba(5,33,49,.45);z-index:25}
  .menue-knopf{display:inline-grid;place-items:center}
  .kopfleiste{padding:.6rem 1.2rem}
  .ansicht{padding:1.1rem 1.2rem 6rem}
  .speicher-leiste{left:0;padding:.7rem 1.2rem}
  .detail-raster{grid-template-columns:minmax(0,1fr)}
  .detail-seite{position:static}
  .kopf-karte{grid-template-columns:minmax(0,1fr) auto}
  .kopf-status{grid-column:1 / -1;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:space-between}
  .kopf-betrag{border:0;padding:0}
  .einstellungen{grid-template-columns:minmax(0,1fr)}
  .unternavi{position:static;flex-direction:row;flex-wrap:wrap;gap:.3rem}
  .unternavi hr{display:none}
  .unternavi a{background:var(--bg-elev);border:1px solid var(--line)}
  .edit-tabelle{display:block;overflow-x:auto}
}
/* Handy: nur Auswahl und Name fixiert, schmaler */
@media (max-width:640px){
  .raster .fix-2{width:10.5rem;min-width:10.5rem;max-width:10.5rem}
  .raster .fix-3{position:static;box-shadow:none!important}
  .raster-huelle.links .fix-2{box-shadow:6px 0 10px -6px rgba(5,33,49,.28)}
  .raster{max-height:none}
}
/* iPad hoch */
@media (max-width:900px){
  .tasten-hinweis{display:none}
  .mail-editor,.versandplan,.export-wahl{grid-template-columns:1fr}
  .zeitraum-wahl{width:100%}
  .zeitraum-wahl select{min-width:0;flex:1}
}
/* Handy */
@media (max-width:640px){
  .kopf-titel h1{font-size:1.2rem}
  .kopf-aktionen .knopf{padding:.5rem .7rem;font-size:.8rem}
  .blaettern-pos{display:none}
  .status-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kachel-zahl{font-size:1.4rem}
  .feld-reihe,.feld-reihe.drei{grid-template-columns:1fr}
  .kopf-karte{grid-template-columns:minmax(0,1fr)}
  .kopf-betrag{text-align:left}
  .sammel.an{position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:30;justify-content:space-between;flex-wrap:wrap}
  .speicher-inner{flex-direction:column;align-items:stretch}
  .speicher-knoepfe{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Tabellen in Karten: bei Platzmangel seitlich scrollen statt die Seite zu verbreitern */
.tabelle-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin}
.tabelle-scroll .daten-tabelle{min-width:32rem}
/* Export: Auswahl in den PDF-Karten */
.export-karte .feld{margin:.4rem 0 .2rem}
.optionen{display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0 .9rem;font-size:.9rem;color:var(--ink-700)}
.optionen label{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.optionen input{accent-color:var(--petrol-600);width:1rem;height:1rem}
.export-abschnitt{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.1rem;color:var(--petrol-900);margin:1.6rem 0 .8rem}
.export-abschnitt .export-format{font-size:.75rem}