/* ═══════════════════════════════════════════════════════════
   MATCHDAY — Gestaltung

   Das Vorbild ist nicht eine Sport-App, sondern der Tisch neben
   dem Spielfeld: das Matchblatt aus Papier, das der Trainer
   ausfüllt, und der Rasen, auf den er dabei schaut.

   Daraus folgen drei Materialien:
   · Kreide   — die Arbeitsfläche. Hell, weil am Samstagnachmittag
                die Sonne aufs Display scheint.
   · Rasen    — nur dort, wo wirklich Spielfeld gemeint ist:
                Spielkopf, Live-Anzeige, Aufstellung.
   · Trikot   — die Vereinsfarbe. Sie trägt Aktionen und eigene
                Zahlen, sonst nichts.

   Listen sind liniert wie ein Matchblatt, nicht in Kacheln
   zerlegt. Zahlen sind gross, weil Zahlen der Inhalt sind.
   Dreidimensional wird genau eine Stelle: das Spielfeld in der
   Aufstellung. Alles andere bleibt ruhig.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Material ─────────────────────────────────────────── */
  --paper:#FBFCFA;
  --paper-2:#F1F4EF;
  --paper-3:#E8EDE6;
  --rule:#D9E0D7;
  --rule-2:#C2CCBF;

  --ink:#10211A;
  --ink-2:rgba(16,33,26,.66);
  --ink-3:rgba(16,33,26,.44);

  --pitch:#1E6F42;
  --pitch-rgb:30,111,66;
  --pitch-deep:#165532;
  --pitch-lite:#2A8A54;

  /* ── Trikot: wird beim Start aus den Vereinsangaben gesetzt ── */
  --jersey:#C8102E;
  --jersey-rgb:200,16,46;
  --jersey-ink:#A50D26;        /* lesbar auf Papier */
  --jersey-lite:#E0566B;       /* lesbar unter Flutlicht */
  --jersey-soft:rgba(200,16,46,.10);
  --jersey-line:rgba(200,16,46,.30);

  /* Rückwärtskompatible Namen — die Ansichten sprechen sie an */
  --red:var(--jersey);
  --red-rgb:var(--jersey-rgb);
  --red-hi:var(--jersey-ink);
  --red-soft:var(--jersey-soft);
  --red-line:var(--jersey-line);
  --gold:#A8761A;
  --gold-hi:#8A5F12;
  --gold-soft:rgba(168,118,26,.12);
  --surface:var(--paper);
  --surface-2:var(--paper-2);
  --stroke:var(--rule);
  --stroke-2:var(--rule-2);
  --txt:var(--ink);
  --txt-2:var(--ink-2);
  --txt-3:var(--ink-3);

  --ok:#1C8B4B;
  --warn:#B9700C;
  --neg:#C62B3C;
  --neg-rgb:198,43,60;
  --neg-soft:rgba(198,43,60,.10);
  --neg-line:rgba(198,43,60,.32);

  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  --font-display:'Barlow Condensed',Impact,sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;

  --tap:54px;
  --ease:cubic-bezier(.2,.8,.2,1);

  --shadow:0 1px 2px rgba(16,33,26,.06),0 8px 22px -14px rgba(16,33,26,.30);
  --shadow-lift:0 2px 4px rgba(16,33,26,.08),0 16px 34px -18px rgba(16,33,26,.40);
}

/* ── Flutlicht ────────────────────────────────────────────
   Abendspiele unter Flutlicht, und der Blick aufs Handy soll
   dann nicht blenden. Folgt dem Gerät, lässt sich überschreiben. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1613;
    --paper-2:#13201B;
    --paper-3:#1A2A23;
    --rule:#243A31;
    --rule-2:#31503F;
    --ink:#EDF3EE;
    --ink-2:rgba(237,243,238,.66);
    --ink-3:rgba(237,243,238,.42);
    --pitch:#1B5E3A;
    --pitch-deep:#113F27;
    --pitch-lite:#237A49;
    --red-hi:var(--jersey-lite);
    --gold:#D6A33B;
    --gold-hi:#E8BC5C;
    --gold-soft:rgba(214,163,59,.14);
    --ok:#3BC276;
    --neg:#F4697A;
    --neg-soft:rgba(244,105,122,.14);
    --neg-line:rgba(244,105,122,.34);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px -16px rgba(0,0,0,.9);
    --shadow-lift:0 2px 6px rgba(0,0,0,.6),0 18px 38px -20px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1613; --paper-2:#13201B; --paper-3:#1A2A23;
  --rule:#243A31; --rule-2:#31503F;
  --ink:#EDF3EE; --ink-2:rgba(237,243,238,.66); --ink-3:rgba(237,243,238,.42);
  --pitch:#1B5E3A; --pitch-deep:#113F27; --pitch-lite:#237A49;
  --red-hi:var(--jersey-lite);
  --gold:#D6A33B; --gold-hi:#E8BC5C; --gold-soft:rgba(214,163,59,.14);
  --ok:#3BC276; --neg:#F4697A;
  --neg-soft:rgba(244,105,122,.14); --neg-line:rgba(244,105,122,.34);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px -16px rgba(0,0,0,.9);
  --shadow-lift:0 2px 6px rgba(0,0,0,.6),0 18px 38px -20px rgba(0,0,0,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior-y:none}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
svg.solid{fill:currentColor;stroke:none}
a{color:inherit;text-decoration:none}

/* ── Rasen ────────────────────────────────────────────────
   Ein gemähtes Feld, kein Farbverlauf. Der Streifen ist das
   Erkennungszeichen und kommt nur dort vor, wo Spielfeld
   gemeint ist. */
.bg-field{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(103deg,
      rgba(30,111,66,.028) 0 30px, transparent 30px 60px);
  mask-image:linear-gradient(180deg,#000 0%,transparent 46%);
}
.bg-glow{display:none}

#app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}

/* ── Kopfzeile ──────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;
  padding:calc(var(--safe-t) + 12px) 16px 11px;
  display:flex;align-items:center;gap:12px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.tb-back{
  width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;
  border-radius:50%;background:var(--paper-2);border:1px solid var(--rule);
}
.tb-back svg{width:19px;height:19px}
.tb-title{flex:1;min-width:0}
.tb-eyebrow{
  display:block;font-size:11px;font-weight:600;color:var(--ink-3);margin-bottom:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-title h1{
  font-family:var(--font-display);font-size:28px;font-weight:600;
  line-height:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-right{display:flex;gap:8px;align-items:center}

/* ── Ansichtsfläche ─────────────────────────────────────── */
.view{
  flex:1;
  padding:18px 16px calc(var(--safe-b) + 94px);
  max-width:620px;width:100%;margin:0 auto;
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ── Tableiste ──────────────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:7px 6px calc(var(--safe-b) + 7px);
  background:var(--paper);
  border-top:1px solid var(--rule);
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px;border-radius:var(--r-m);
  color:var(--ink-3);font-size:10.5px;font-weight:600;
  transition:color .18s var(--ease);
}
.tab svg{width:22px;height:22px}
.tab.is-active{color:var(--ink)}
.tab.is-active svg{color:var(--jersey-ink)}
.tab-live-dot{display:none}
.tab.is-running{color:var(--jersey-ink)}
.tab.is-running svg{display:none}
.tab.is-running .tab-live-dot{
  display:grid;place-items:center;position:relative;
  width:22px;height:22px;border-radius:50%;border:2px solid currentColor;
}
.tab.is-running .tab-live-dot::after{
  content:'';width:8px;height:8px;border-radius:50%;background:currentColor;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ── Abschnitte: eine Linie mit Beschriftung, keine Kachel ── */
.eyebrow{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-display);font-size:17px;font-weight:600;
  color:var(--ink);margin:22px 0 10px;
}
.eyebrow:first-child{margin-top:0}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--rule);transform:translateY(-4px)}
.num{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.tiny{font-size:12.5px;line-height:1.5}

/* ── Flächen ────────────────────────────────────────────── */
.card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-m);
  padding:15px 16px;margin-bottom:12px;
}
.card-tap{transition:background .14s var(--ease)}
.card-tap:active{background:var(--paper-2)}
.card-head{display:flex;align-items:center;justify-content:space-between;
           gap:12px;margin-bottom:12px}
.card-head h3{font-family:var(--font-display);font-size:20px;font-weight:600}
.glass{background:var(--paper)}

/* ── Spielkopf ────────────────────────────────────────────
   Der Anker jedes Bildschirms: das Spiel selbst, auf Rasen. */
.hero{
  position:relative;overflow:hidden;display:block;width:100%;text-align:left;
  border-radius:var(--r-l);padding:18px 18px 16px;margin-bottom:16px;
  background-color:var(--pitch);
  background-image:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.055) 0 26px, transparent 26px 52px),
    radial-gradient(130% 100% at 50% -30%, rgba(255,255,255,.16), transparent 60%);
  color:#F4FAF5;
  box-shadow:var(--shadow-lift);
}
/* Strafraumbogen als Prägung statt Dekor-Verlauf */
.hero::before{
  content:'';position:absolute;right:-56px;bottom:-96px;
  width:220px;height:220px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.13);pointer-events:none;
}
.hero::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--jersey);
}
.hero-rel{position:relative}
.hero-comp{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.84);
  padding:5px 11px;border-radius:100px;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.15);
}
.hero-vs{display:flex;align-items:flex-start;gap:12px;margin:15px 0 2px}
.hero-team{flex:1;min-width:0}
.hero-team .lbl{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.62);margin-bottom:3px}
.hero-team .nm{
  font-family:var(--font-display);font-size:27px;font-weight:600;line-height:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.hero-x{
  font-family:var(--font-display);font-size:17px;font-weight:600;
  color:rgba(255,255,255,.55);padding-top:16px;white-space:nowrap;
}
.hero-meta{
  display:flex;gap:16px;margin-top:15px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.17);
}
.hero-meta div{flex:1;min-width:0}
.hero-meta .k{font-size:10.5px;color:rgba(255,255,255,.58);margin-bottom:1px}
.hero-meta .v{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1}

/* ── Knöpfe ─────────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:var(--tap);padding:0 20px;
  border-radius:var(--r-m);font-size:15.5px;font-weight:600;
  background:var(--paper);border:1.5px solid var(--rule-2);color:var(--ink);
  transition:transform .14s var(--ease),background .14s var(--ease);
}
.btn:active{transform:scale(.978)}
.btn svg{width:19px;height:19px;flex:0 0 19px}
.btn-primary{
  background:var(--jersey);border-color:transparent;color:#fff;
  box-shadow:0 2px 3px rgba(var(--jersey-rgb),.22),
             0 12px 26px -12px rgba(var(--jersey-rgb),.75);
}
.btn-primary:active{filter:brightness(.94)}
.btn-gold{
  background:var(--pitch);border-color:transparent;color:#F4FAF5;
  box-shadow:0 2px 3px rgba(var(--pitch-rgb),.2),
             0 12px 26px -12px rgba(var(--pitch-rgb),.7);
}
.btn-ghost{background:transparent;border-color:var(--rule)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-row>.btn{font-size:14px;padding:0 12px;gap:7px}
.btn-row>.btn svg{width:17px;height:17px;flex:0 0 17px}
.btn-sm{min-height:44px;font-size:13.5px;padding:0 14px;border-radius:var(--r-s)}
.icon-btn{
  width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  border-radius:50%;background:var(--paper-2);border:1px solid var(--rule);
}
.icon-btn svg{width:18px;height:18px}

/* ── Kachelraster ───────────────────────────────────────── */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.q{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:14px;border-radius:var(--r-m);text-align:left;
  background:var(--paper);border:1px solid var(--rule);
  transition:background .14s var(--ease);
}
.q:active{background:var(--paper-2)}
.q-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--jersey-soft);color:var(--jersey-ink);
}
.q-ico.gold{background:rgba(30,111,66,.10);color:var(--pitch)}
.q-ico svg{width:17px;height:17px}
.q-lbl{font-size:14.5px;font-weight:600;line-height:1.2}
.q-sub{font-size:11.5px;color:var(--ink-3);line-height:1.3;margin-top:2px}

/* ── Kennzahlen ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:14px;
       background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-m);
       overflow:hidden}
.stat{padding:13px 8px;text-align:center;background:var(--paper)}
.stat .v{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:.95}
.stat .k{font-size:11px;color:var(--ink-3);margin-top:4px;font-weight:500}
.stat.is-red .v{color:var(--jersey-ink)}
.stat.is-gold .v{color:var(--pitch)}

/* ═══ LIVE ═══════════════════════════════════════════════ */
.live-head{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border-radius:var(--r-l);margin-bottom:12px;
  background-color:var(--pitch);
  background-image:repeating-linear-gradient(103deg,
    rgba(255,255,255,.05) 0 26px, transparent 26px 52px);
  color:#F4FAF5;box-shadow:var(--shadow);
}
.clock{font-family:var(--font-display);font-size:44px;font-weight:600;line-height:.9;
       font-variant-numeric:tabular-nums}
.clock-sec{font-size:22px;opacity:.6;margin-left:1px}
.clock-sub{font-size:11.5px;color:rgba(255,255,255,.66);margin-top:4px}
.score{margin-left:auto;display:flex;align-items:baseline;gap:5px}
.score-n{font-family:var(--font-display);font-size:40px;font-weight:600;line-height:.9;
         font-variant-numeric:tabular-nums}
.score-x{font-size:22px;color:rgba(255,255,255,.4)}

.insight{
  display:flex;gap:12px;padding:13px 15px;border-radius:var(--r-m);margin-bottom:10px;
  background:var(--paper-2);border:1px solid var(--rule);
  border-left:3px solid var(--pitch);
}
.insight-ico{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;
  place-items:center;background:rgba(30,111,66,.12);color:var(--pitch)}
.insight-ico svg{width:16px;height:16px}
.insight-t{font-size:14px;font-weight:600;line-height:1.25}
.insight-s{font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.insight.is-alert{border-left-color:var(--neg);background:var(--neg-soft)}
.insight.is-alert .insight-ico{background:var(--neg-soft);color:var(--neg)}

.pitch-wrap{margin-bottom:16px}
.pitch{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
  gap:3px;padding:3px;border-radius:var(--r-m);
  /* Höhe gedeckelt: die Ereignistasten müssen während des Spiels
     ohne Scrollen erreichbar bleiben. */
  aspect-ratio:1/1.1;max-height:40vh;margin:0 auto;
  background-color:var(--pitch-deep);
  background-image:repeating-linear-gradient(0deg,
    rgba(255,255,255,.05) 0 24px, transparent 24px 48px);
  border:1px solid var(--pitch-deep);
}
.zone{
  position:relative;border-radius:7px;
  border:1px dashed rgba(255,255,255,.22);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.zone-tag{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.5)}
.zone-count{
  position:absolute;top:5px;right:6px;font-family:var(--font-display);
  font-size:13px;font-weight:600;color:rgba(255,255,255,.75);
}
.zone.is-armed{
  background:var(--jersey);border-color:transparent;border-style:solid;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
}
.zone.is-armed .zone-tag,.zone.is-armed .zone-count{color:#fff}
.pitch-legend{display:flex;justify-content:space-between;margin-top:7px;
  font-size:10.5px;color:var(--ink-3)}

.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.ev{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:72px;border-radius:var(--r-m);font-size:11.5px;font-weight:600;
  background:var(--paper);border:1.5px solid var(--rule);
  transition:transform .12s var(--ease),background .12s var(--ease);
}
.ev:active{transform:scale(.95);background:var(--paper-2)}
.ev svg{width:21px;height:21px}
.ev.pos{color:var(--pitch);border-color:rgba(30,111,66,.3)}
.ev.neg{color:var(--neg);border-color:var(--neg-line)}
.ev.neu{color:var(--gold-hi);border-color:rgba(168,118,26,.3)}
.ev.is-disabled{opacity:.35;pointer-events:none}

/* ── Linierte Zeilen: das Matchblatt ────────────────────── */
.prow{
  display:flex;align-items:center;gap:12px;
  padding:11px 2px;min-height:var(--tap);
  border-bottom:1px solid var(--rule);background:none;
  transition:background .12s var(--ease);
}
.prow:last-child{border-bottom:0}
.prow:active{background:var(--paper-2)}
.pnum{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:17px;font-weight:600;
  background:var(--paper-2);border:1px solid var(--rule);color:var(--ink);
}
.pnum.gk{background:rgba(30,111,66,.12);border-color:rgba(30,111,66,.3);color:var(--pitch)}
.pinfo{flex:1;min-width:0}
.pname{font-size:15px;font-weight:600;line-height:1.25;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta{font-size:12px;color:var(--ink-3);line-height:1.3;margin-top:1px;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pright{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.prow.is-sel{background:rgba(30,111,66,.08)}

.chip{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:7px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-2);
}
.chip.red{background:var(--neg-soft);border-color:var(--neg-line);color:var(--neg)}
.chip.gold{background:var(--gold-soft);border-color:rgba(168,118,26,.34);color:var(--gold-hi)}
.chip.ok{background:rgba(30,111,66,.12);border-color:rgba(30,111,66,.34);color:var(--pitch)}

.seg{display:grid;gap:3px;padding:3px;border-radius:var(--r-m);
     background:var(--paper-2);border:1px solid var(--rule);margin-bottom:12px}
.seg-2{grid-template-columns:1fr 1fr}
.seg-btn{padding:11px 8px;border-radius:10px;font-size:13.5px;font-weight:600;
         color:var(--ink-3);transition:all .14s var(--ease)}
.seg-btn.is-active{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}

.formation-pick{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px;
                padding-bottom:3px;scrollbar-width:none;flex-wrap:wrap}
.formation-pick::-webkit-scrollbar{display:none}
.fchip{
  padding:9px 14px;border-radius:100px;font-size:13px;font-weight:600;
  white-space:nowrap;background:var(--paper);border:1.5px solid var(--rule);
  color:var(--ink-2);transition:all .14s var(--ease);
}
.fchip.is-active{background:var(--pitch);border-color:transparent;color:#F4FAF5}

/* ═══ AUFSTELLUNG — das eine dreidimensionale Moment ══════
   Das Feld kippt in die Tiefe wie eine Taktiktafel auf dem
   Tisch, die Spieler stehen aufrecht darauf. Die Scheiben
   werden gegenläufig gedreht, damit sie nicht mitkippen. */
.lineup-pitch{
  position:relative;width:100%;aspect-ratio:1/1.02;margin-bottom:18px;
  perspective:1150px;perspective-origin:50% 18%;
  padding-bottom:24px;   /* Platz für den Namen des Torhüters */
}
.lp-ground{
  position:absolute;inset:0 0 24px 0;border-radius:var(--r-m);
  transform:rotateX(32deg) scale(.95);
  transform-origin:50% 74%;
  transform-style:preserve-3d;
  background-color:var(--pitch-deep);
  background-image:repeating-linear-gradient(0deg,
    rgba(255,255,255,.06) 0 30px, transparent 30px 60px);
  border:2px solid rgba(255,255,255,.24);
  box-shadow:0 36px 54px -32px rgba(16,33,26,.8);
}
.lp-line{position:absolute;background:rgba(255,255,255,.22);pointer-events:none}
.lp-circle{
  position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);pointer-events:none;
}
.slot{
  position:absolute;transform-style:preserve-3d;
  /* translateZ hebt die Figur von der Rasenebene ab. Ohne das
     kippt der Namenszug nach dem Gegendrehen in die Fläche
     hinein und verschwindet hinter ihr. */
  transform:translate(-50%,-50%) rotateX(-32deg) translateZ(20px);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:grab;
}
.slot-disc{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:18px;font-weight:600;
  background:rgba(255,255,255,.13);border:1.5px dashed rgba(255,255,255,.4);
  color:rgba(255,255,255,.72);
  box-shadow:0 8px 12px -6px rgba(0,0,0,.6);
  transition:transform .14s var(--ease);
}
.slot.is-filled .slot-disc{
  background:var(--jersey);border:1.5px solid rgba(255,255,255,.5);
  color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.28),0 11px 16px -7px rgba(0,0,0,.75);
}
.slot.is-gk.is-filled .slot-disc{background:var(--gold);color:#241B04}
.slot.is-drop .slot-disc{
  background:#fff;border-color:#fff;color:var(--pitch);transform:scale(1.16);
}
.slot-nm{
  font-size:11px;font-weight:600;color:#fff;text-align:center;line-height:1.15;
  padding:1.5px 6px;border-radius:100px;background:rgba(10,30,20,.62);
  max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.drag-ghost{
  position:fixed;z-index:200;pointer-events:none;
  transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:4px;
}

.bench-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.bench-strip::-webkit-scrollbar{display:none}
.bchip{
  display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:100px;
  white-space:nowrap;font-size:13px;font-weight:600;
  background:var(--paper);border:1.5px solid var(--rule);cursor:grab;
}
.bchip .n{font-family:var(--font-display);font-size:15px;color:var(--jersey-ink)}
.bchip.is-dragging{opacity:.3}

/* ── Verlauf ────────────────────────────────────────────── */
.tl{display:block}
.tl-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;
         border-bottom:1px solid var(--rule)}
.tl-item:last-child{border-bottom:0}
.tl-min{font-family:var(--font-display);font-size:16px;font-weight:600;
        color:var(--pitch);flex:0 0 38px;padding-top:1px}
.tl-body{flex:1;min-width:0}
.tl-t{font-size:14px;font-weight:600;line-height:1.3}
.tl-s{font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:1px}
.tl-x{width:30px;height:30px;flex:0 0 30px;background:none;border:0;color:var(--ink-3)}
.tl-x svg{width:15px;height:15px}
.tl-edit{
  background:none;border:none;font:inherit;color:var(--pitch);
  text-align:left;padding:1px 4px 1px 0;border-radius:5px;
  font-family:var(--font-display);font-size:16px;font-weight:600;flex:0 0 38px;
}
.tl-edit:active{background:var(--paper-2)}

.rate{display:flex;gap:7px}
.rdot{
  flex:1;aspect-ratio:1;border-radius:11px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:18px;font-weight:600;
  background:var(--paper-2);border:1.5px solid var(--rule);color:var(--ink-3);
  transition:all .14s var(--ease);
}
.rdot.is-on{background:var(--pitch);border-color:transparent;color:#F4FAF5}

/* ── Leere Zustände ─────────────────────────────────────── */
.empty{text-align:center;padding:48px 22px}
.empty-ico{width:56px;height:56px;margin:0 auto 16px;border-radius:17px;
  display:grid;place-items:center;background:rgba(30,111,66,.1);color:var(--pitch)}
.empty-ico svg{width:26px;height:26px}
.empty h3{font-family:var(--font-display);font-size:24px;font-weight:600;margin-bottom:7px}
.empty p{font-size:13.5px;color:var(--ink-2);max-width:290px;margin:0 auto 20px;line-height:1.5}

/* ── Formulare ──────────────────────────────────────────── */
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:600;
  color:var(--ink-2);margin-bottom:6px}
.input{
  width:100%;min-height:var(--tap);padding:0 14px;border-radius:var(--r-m);
  background:var(--paper);border:1.5px solid var(--rule-2);font-size:15.5px;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--pitch);
             box-shadow:0 0 0 3px rgba(30,111,66,.14)}
textarea.input{padding:13px 14px;min-height:112px;resize:vertical;line-height:1.55}
.stepper{display:flex;align-items:center;gap:10px}
.stepper .val{flex:1;text-align:center;font-family:var(--font-display);
  font-size:28px;font-weight:600}
.stepper button{width:50px;height:50px;border-radius:var(--r-m);
  background:var(--paper-2);border:1.5px solid var(--rule);font-size:21px;
  display:grid;place-items:center}

:focus-visible{outline:2.5px solid var(--pitch);outline-offset:2px;border-radius:7px}

/* ── Hilfsklassen ───────────────────────────────────────── */
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.mb0{margin-bottom:0}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scroll-x{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}

/* ── Blatt von unten ────────────────────────────────────── */
.sheet-scrim{position:fixed;inset:0;z-index:100;background:rgba(16,33,26,.42)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  max-height:88vh;overflow-y:auto;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 18px calc(var(--safe-b) + 22px);
  background:var(--paper);border-top:1px solid var(--rule);
  box-shadow:0 -14px 40px -16px rgba(16,33,26,.5);
  max-width:620px;margin:0 auto;
}
.sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--rule-2);
            margin:6px auto 12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
            gap:12px;margin-bottom:14px}
.sheet-head h2{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.1}
.sheet-body{padding-bottom:4px}
[hidden]{display:none !important}

/* ── Meldungen ──────────────────────────────────────────── */
.toast-wrap{position:fixed;left:14px;right:14px;bottom:calc(var(--safe-b) + 84px);
            z-index:150;display:flex;flex-direction:column;gap:8px;
            pointer-events:none;max-width:592px;margin:0 auto}
.toast{
  display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-m);
  background:var(--ink);color:var(--paper);box-shadow:var(--shadow-lift);
}
.toast-ico{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;
  place-items:center;background:rgba(255,255,255,.14)}
.toast-ico svg{width:16px;height:16px}
.toast-t{font-size:13.5px;font-weight:600;line-height:1.25}
.toast-s{font-size:12px;opacity:.72;line-height:1.35;margin-top:1px}
.toast.red .toast-ico{background:rgba(244,105,122,.3);color:#FFC3CB}
.toast.gold .toast-ico{background:rgba(214,163,59,.26);color:#F2D18B}

/* ═══ MATCHBERICHT ═══════════════════════════════════════ */
.wiz-steps{display:flex;gap:4px;margin-bottom:16px}
.wiz-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.38}
.wiz-step.is-now{opacity:1}
.wiz-step.is-done{opacity:.7}
.wiz-dot{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);border:1.5px solid var(--rule);
  font-family:var(--font-display);font-size:13px;font-weight:600;
}
.wiz-step.is-now .wiz-dot{background:var(--pitch);border-color:transparent;color:#F4FAF5}
.wiz-step.is-done .wiz-dot{background:rgba(30,111,66,.14);
  border-color:rgba(30,111,66,.3);color:var(--pitch)}
.wiz-lbl{font-size:9.5px;color:var(--ink-3);text-align:center}
.wiz-step.is-now .wiz-lbl{color:var(--ink);font-weight:600}
.wiz-h{font-family:var(--font-display);font-size:27px;font-weight:600;
  line-height:1.08;margin-bottom:6px}
.wiz-sub{font-size:13.5px;color:var(--ink-2);margin-bottom:16px}
.wiz-nav{display:flex;gap:10px;margin-top:20px}
.wiz-nav .btn{flex:1}
.fact-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
.pick{
  padding:11px 15px;border-radius:100px;font-size:13.5px;font-weight:600;
  background:var(--paper);border:1.5px solid var(--rule);
  transition:all .14s var(--ease);min-height:44px;
}
.pick:active{transform:scale(.96)}
.pick.is-on{background:var(--pitch);border-color:transparent;color:#F4FAF5}
.kv{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.kv:last-child{border-bottom:0}
.kv-k{flex:0 0 104px;font-size:12px;color:var(--ink-3);font-weight:600;padding-top:1px}
.kv-v{flex:1;font-size:13.5px;line-height:1.4}
.check-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:15px;border-radius:var(--r-m);margin-top:14px;
  background:var(--paper-2);border:1.5px solid var(--rule);
  font-size:14px;font-weight:500;min-height:var(--tap);
}
.check-row.is-on{background:rgba(30,111,66,.1);border-color:var(--pitch)}
.check-box{width:25px;height:25px;flex:0 0 25px;border-radius:7px;
  border:1.5px solid var(--rule-2);display:grid;place-items:center}
.check-row.is-on .check-box{background:var(--pitch);border-color:transparent;color:#fff}
.check-box svg{width:14px;height:14px;stroke-width:3}
.text-out{min-height:auto;line-height:1.6;font-size:14px;padding:14px}

/* ═══ EINRICHTUNG & EINSTELLUNGEN ════════════════════════ */
.setup-lead{margin:4px 0 18px}
.setup-lead h2{
  font-family:var(--font-display);font-size:31px;font-weight:600;
  line-height:1.04;margin-bottom:9px;
}
.setup-lead p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.video-link{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:10px 12px;
  border:1px solid var(--jersey-line);border-radius:14px;background:var(--jersey-soft);
  color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.video-link-play{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--jersey);color:#fff}
.video-link-play svg{width:16px;height:16px;margin-left:2px}
.video-link b{display:block;font-size:14px;font-weight:600}
.video-link small{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.sheet-video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
.req{color:var(--neg);font-weight:600}
.hint{color:var(--ink-3);font-weight:500}

.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.swatch{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 4px;border-radius:var(--r-m);
  background:var(--paper);border:1.5px solid var(--rule);
  transition:transform .14s var(--ease),border-color .14s var(--ease);
}
.swatch:active{transform:scale(.95)}
.swatch-disc{width:30px;height:30px;border-radius:50%;background:var(--sw)}
.swatch-lbl{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.swatch.is-active{border-color:var(--ink)}
.swatch.is-active .swatch-disc{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--sw)}
.swatch.is-active .swatch-lbl{color:var(--ink)}

.prev-chip{
  flex:1;min-height:52px;display:grid;place-items:center;border-radius:var(--r-m);
  font-family:var(--font-display);font-size:18px;font-weight:600;color:#fff;
}
.prev-chip.ghost{background:var(--paper-2);border:1.5px solid var(--rule);color:var(--ink-2)}

.set-group{margin-bottom:16px}
.set-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 14px;min-height:var(--tap);
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-m);margin-bottom:8px;
}
.set-row:last-child{margin-bottom:0}
.set-row:active{background:var(--paper-2)}
.set-ico{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;
  place-items:center;background:var(--paper-2);color:var(--ink-2)}
.set-ico svg{width:17px;height:17px}
.set-ico.accent{background:var(--jersey-soft);color:var(--jersey-ink)}
.set-ico.gold{background:rgba(30,111,66,.1);color:var(--pitch)}
.set-txt{flex:1;min-width:0;display:block}
.set-t{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.set-s{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.set-arrow{width:17px;height:17px;flex:0 0 17px;color:var(--ink-3)}

.banner{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:var(--r-m);margin-bottom:14px;
  background:var(--paper-2);border:1px solid var(--rule);
  border-left:3px solid var(--pitch);
}
.banner.is-accent{border-left-color:var(--jersey);background:var(--jersey-soft)}
.banner.is-alert{border-left-color:var(--neg);background:rgba(200,16,46,.06)}
.banner.is-alert .banner-ico{background:rgba(200,16,46,.12);color:var(--neg)}
.banner.is-gold{border-left-color:var(--gold);background:var(--gold-soft)}
button.banner{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.banner-ico{width:32px;height:32px;flex:0 0 32px;border-radius:10px;
  display:grid;place-items:center;background:rgba(30,111,66,.12);color:var(--pitch)}
.banner.is-accent .banner-ico{background:rgba(var(--jersey-rgb),.14);color:var(--jersey-ink)}
.banner-ico svg{width:16px;height:16px}
.banner-txt{flex:1;min-width:0}
.banner-t{font-size:13.5px;font-weight:700;line-height:1.2}
.banner-s{font-size:11.5px;color:var(--ink-2);line-height:1.35;margin-top:2px}
.banner-x{width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  display:grid;place-items:center;color:var(--ink-3)}
.banner-x svg{width:15px;height:15px}

.footnote{text-align:center;font-size:11.5px;color:var(--ink-3);
  margin-top:24px;line-height:1.6}

/* ── Staff ──────────────────────────────────────────────── */
.who{
  width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;
  border-radius:50%;background:var(--jersey);color:#fff;
  font-family:var(--font-display);font-size:14px;font-weight:600;
}
.who:active{transform:scale(.94)}
.who.is-open{background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-3)}

.staff-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 14px;min-height:var(--tap);margin-bottom:8px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);
}
.staff-row:last-child{margin-bottom:0}
.staff-row.is-me{border-color:var(--jersey);background:var(--jersey-soft)}
.staff-ini{
  width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:11px;
  background:var(--paper-2);font-family:var(--font-display);font-size:14px;font-weight:600;
}
.staff-row.is-me .staff-ini{background:var(--jersey);color:#fff}
.staff-txt{flex:1;min-width:0}
.staff-n{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.staff-d{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.staff-tag{font-size:10.5px;font-weight:600;color:var(--pitch);white-space:nowrap}

/* ── Spielplan ──────────────────────────────────────────── */
.fx{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:12px 2px;border-bottom:1px solid var(--rule);min-height:var(--tap);
}
.fx:last-child{border-bottom:0}
.fx-date{flex:0 0 42px;text-align:center;line-height:1}
.fx-day{display:block;font-size:10.5px;font-weight:600;color:var(--ink-3)}
.fx-num{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;
        margin-top:1px}
.fx-body{flex:1;min-width:0;display:block}
.fx-opp{display:block;font-size:15px;font-weight:600;line-height:1.25;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-meta{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-res{font-family:var(--font-display);font-size:21px;font-weight:600;
        flex:0 0 auto;font-variant-numeric:tabular-nums}
.fx-res.win{color:var(--pitch)}
.fx-res.loss{color:var(--neg)}
.fx.is-next{background:var(--jersey-soft);border-radius:var(--r-s);
            padding-left:10px;padding-right:10px;border-bottom-color:transparent}
.fx-home{display:inline-block;font-size:10.5px;font-weight:600;
         color:var(--pitch);margin-left:7px;vertical-align:1px}


/* ── Abo ─────────────────────────────────────────────── */
.abo-status{background:var(--paper);border:1px solid var(--paper-3);border-radius:18px;padding:16px 16px 14px;
  box-shadow:0 1px 0 rgba(16,33,26,.04)}
.abo-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.abo-v{font-family:var(--font-display);font-size:26px;line-height:1.1;margin-top:2px}
.abo-t{font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:16px 14px 14px;border-radius:16px;border:1.5px solid var(--paper-3);background:var(--paper);
  font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.plan.is-on{border-color:var(--jersey);box-shadow:0 0 0 3px var(--jersey-soft)}
.plan-badge{position:absolute;top:-9px;right:10px;background:var(--jersey);color:#fff;font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:99px}
.plan-name{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.plan-price{font-family:var(--font-display);font-size:28px;line-height:1.05;margin-top:4px}
.plan-per{font-size:13px;color:var(--ink-2)}
.plan-note{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.35}
.abo-list{padding:6px 14px}
.abo-li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:14px;line-height:1.4}
.abo-li + .abo-li{border-top:1px solid var(--paper-3)}
.abo-li svg{flex:0 0 18px;width:18px;height:18px;color:var(--pitch);margin-top:1px}
.abo-key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;font-weight:700;letter-spacing:.08em;
  background:var(--paper-2);border:1px dashed var(--paper-3);border-radius:12px;padding:10px 12px;text-align:center}
.abo-more summary{font-size:13px;color:var(--ink-2);cursor:pointer;padding:6px 0}

/* Hinweis im Browser von Instagram & Co. */
.inapp{position:fixed;inset:0;z-index:9999;background:rgba(10,14,20,.72);display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 14px}
.inapp-box{background:var(--paper,#fff);color:var(--ink,#111);border-radius:20px;padding:20px 18px;max-width:440px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.inapp-t{font:700 20px/1.2 var(--display,inherit);margin-bottom:8px}
.inapp-s{font-size:14px;line-height:1.45;opacity:.8}
.inapp-how{margin-top:12px;padding:12px;border-radius:12px;background:var(--paper-2,#f2f3f5);font-size:15px;line-height:1.4}
.inapp-row{display:grid;gap:8px;margin-top:14px}
.inapp-tip{margin-top:10px;font-size:12px;opacity:.65;text-align:center}