/* ===== Calm-Premium Pilot — überschreibt styles.css =====
   Prinzip (FotMob/Linear/Stripe): ruhiger neutraler Grund ohne Textur,
   Tiefe über Elevation statt Rahmen/Glas/Schatten, Akzentfarbe NUR für
   Bedeutung (Live/aktiv/positiv/Daten), Labels leise statt Mono-Uppercase. */

:root{
  --void:#0C1017; --ground:#0C1017;
  --panel:#131A26; --panel-2:#1A2333; --panel-3:#212C40;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05);
  --ink:#E7E9EE; --muted:#98A2B3; --faint:#5C6677;
  --r:12px;
}

/* Ruhiger Grund — kein Plexus, kein Raster, kein Glow */
body{background:var(--void)}
.hud-bg{background:radial-gradient(1100px 640px at 50% -28%,#161F2E 0%,#0C1017 56%)}
.hud-bg::before{display:none}
.fx-canvas{display:none}

/* Elevation statt Glas/Rahmen/Schatten */
.panel,.matchapp,.er-layout{
  background:var(--panel);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--line-2);box-shadow:none;border-radius:var(--r)
}
.matchapp>.term{border-left:1px solid var(--line-2)}
.term-sub{background:transparent;border-bottom:1px solid var(--line-2)}
.mon{background:var(--panel-2)}           /* eine Ebene höher = „näher" */
.mon-grid{background:var(--line-2)}
.dtabs{background:transparent;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}

/* Labels beruhigen: sentence-case, Sans, muted — statt Mono-Uppercase-Lärm.
   Mono bleibt NUR für Zahlen. */
.eyebrow,.cat-h,.vc-h,.g-center .lab,.h2h-rec .hr-top,.ltable th,
.sq-cat,.sq-head,.mon-val .lbl,.mon-duo .md.tot,.ftc .k,.mrow .lg{
  text-transform:none;letter-spacing:.005em;font-family:var(--sans);
  color:var(--muted);font-weight:600
}
.cat-h{font-size:12px;padding-top:16px} .vc-h{font-size:11.5px}
.eyebrow{font-size:12px;color:var(--muted)}          /* nicht mehr Teal */
.mrow .lg{font-size:10.5px}

/* Akzent-Disziplin: Struktur neutral, Teal nur für Bedeutung */
.dtabs button.on{color:var(--ink);border-bottom-color:var(--cyan)}  /* aktiv = Teal-Marker, Schrift ruhig */
.stat-basis{font-family:var(--sans);text-transform:none;letter-spacing:0}

/* Ticker etwas ruhiger einbinden */
.ticker{background:transparent;border-bottom:1px solid var(--line-2)}
.ticker-in{position:relative}
/* Linkes Label: opakes „Feld", liegt ÜBER der Laufschrift (Tipps verschwinden darunter) */
.tk-label{background:var(--panel-2);color:var(--muted);border-right:1px solid var(--line);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;
  position:relative;z-index:2}
.tk-label .livedot{background:var(--cyan)}
.tk-label::after{content:"";position:absolute;right:-24px;top:0;bottom:0;width:24px;z-index:2;
  background:linear-gradient(90deg,var(--panel-2),transparent);pointer-events:none}
/* Rechtes Label „Historie": gleiches Feld rechts, Tipps laufen darunter raus (verlinkt) */
.tk-label-r{position:absolute;right:0;top:0;height:100%;display:flex;align-items:center;gap:7px;z-index:3;
  padding:0 15px;background:var(--panel-2);border-left:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;
  transition:color .15s,background .15s}
.tk-label-r:hover{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,var(--panel-2))}
.tk-label-r::before{content:"";position:absolute;left:-24px;top:0;bottom:0;width:24px;
  background:linear-gradient(90deg,transparent,var(--panel-2));pointer-events:none}
.tk-label-r .ar{font-size:13px;line-height:1;opacity:.6}
/* Tipps fließen nach rechts: erscheinen hinter „Opening → Closing", laufen in „Historie" raus */
.tk-track{animation-direction:reverse}
/* Ticker-Items etwas deckender/lesbarer */
.tk-item{color:var(--ink)}
.tk-item .mk{color:var(--ink);background:var(--panel-2);border:1px solid var(--line);
  padding:2px 7px;border-radius:6px;font-weight:600}
.tk-item .q,.tk-item .odds{color:var(--ink)}

/* Nav: solide statt Blur-Glas, aber weiterhin dezent */
nav{background:color-mix(in srgb,var(--void) 92%,transparent)}


/* =========================================================
   FINISHING — Tiefe & Politur · Leben · Wärme/Charakter
   ========================================================= */

/* Wärmerer Grundton (weniger kühl-blau, gegen das Sterile) */
:root{ --void:#0D1016; --ground:#0D1016; --panel:#161B25; --panel-2:#1C2331; }

/* — Tiefe & Politur — */
.matchapp{position:relative;box-shadow:0 26px 60px -36px rgba(0,0,0,.75)}
.mon{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.mrow{transition:background .15s}
.mrow:hover{background:color-mix(in srgb,var(--panel-2) 55%,transparent)}
.mrow.sel{background:color-mix(in srgb,var(--panel-2) 85%,transparent);box-shadow:inset 3px 0 0 var(--cyan)}

/* — Charakter: eine Marken-Signatur (Teal→Violett), sparsam gesetzt — */
.matchapp::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));opacity:.75;z-index:3}
.g-center .pct{background:linear-gradient(120deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* — Leben: Balken wachsen rein, Gauge zeichnet sich, Live pulsiert — */
@keyframes calmgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.probrow .bar i,.egrow .bar i,.cmp-bar i{transform-origin:left;animation:calmgrow .55s cubic-bezier(.22,.7,.2,1)}
.cmp-bar u{transform-origin:right;animation:calmgrow .55s cubic-bezier(.22,.7,.2,1)}
@keyframes calmdraw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
.gauge .val{stroke-dasharray:300;animation:calmdraw 1.05s ease forwards}
@keyframes livepulse{0%,100%{text-shadow:none}50%{text-shadow:0 0 9px color-mix(in srgb,var(--liveclr) 70%,transparent)}}
.term-sub .msl.live{animation:livepulse 1.9s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .probrow .bar i,.egrow .bar i,.cmp-bar i,.cmp-bar u,.gauge .val,.term-sub .msl.live,.ipill.live{animation:none}
}


/* =========================================================
   KACHELN — jedes Modul als eigene Karte (Transfermarkt/Amazon-Stil):
   getrennte Boxen mit Abstand, dezenter Rand, leichte Transparenz.
   ========================================================= */
:root{ --cardbg:color-mix(in srgb, var(--panel) 90%, transparent); }

/* matchapp = nur Layout-Container, kein Rahmen mehr */
.matchapp{background:transparent;border:0;box-shadow:none;border-radius:0;gap:16px;overflow:visible;align-items:start}
.matchapp::before{display:none}

/* Linke Spalte: Spiele-Liste als eigene Karte */
.matchapp>.mlist{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 42px -30px rgba(0,0,0,.72);overflow:hidden}

/* Rechte Spalte: Stapel aus getrennten Modul-Karten */
.matchapp>.term{background:transparent;border:0;overflow:visible;display:block}
.term-sub,.mon-grid,.ftcmp,.dtab-body{margin-bottom:16px}
.dtabs{margin-bottom:0}

/* Match-Kopf-Karte (trägt die Marken-Signatur) */
.term-sub{position:relative;background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.term-sub::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));opacity:.75}

/* Live-Monitore: zwei eigene Widget-Karten nebeneinander (Broker-Terminal-Stil) */
.mon-grid{background:transparent;gap:16px;border:0;border-radius:0;box-shadow:none;overflow:visible}
.mon{border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}

/* Tabs + Inhalt = eine zusammenhängende Karte */
.dtabs{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.dtab-body{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);overflow:hidden;
  box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}


/* =========================================================
   ROLLOUT — dieselbe Calm-Sprache auf allen Seiten
   ========================================================= */

/* Verbliebene Mono-Uppercase-Labels der anderen Seiten beruhigen */
.lb-h .lb-s,.er-side-h,.er-head,.er-band,.pc-h,.plan .pt,.kcard .kk,.vtiles .k{
  text-transform:none;letter-spacing:.005em;font-family:var(--sans);color:var(--muted);font-weight:600
}

/* Karten (Trends/Preise/Wissen) = gleiche Kachel-Optik wie Spieltag */
.lbcard,.plan,.kcard{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}
.wnav a{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line)}

/* ELO: Länderleiste + Tabelle als ZWEI getrennte Kacheln (statt gemergtem Rahmen) */
.er-layout{background:transparent;border:0;box-shadow:none;border-radius:0;gap:16px;align-items:start;overflow:visible}
.er-side{position:sticky;top:14px;background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}
.erank{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 42px -30px rgba(0,0,0,.72);overflow:hidden}
@media (max-width:860px){.er-side{position:static;border-radius:var(--r)}}


/* =========================================================
   APP-DOWNLOAD-Band (Eigenwerbung, Google Play)
   ========================================================= */
.appband{border-top:1px solid var(--line-2);background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  position:relative;overflow:hidden}
.appband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 88% 50%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 60%),
             radial-gradient(90% 120% at 4% 20%,color-mix(in srgb,var(--cyan) 9%,transparent),transparent 55%)}
.appband-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px 34px;flex-wrap:wrap;padding-block:26px}
.app-msg{flex:1;min-width:280px}
.app-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--cyan)}
.app-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.app-msg h3{font-family:var(--disp);font-weight:800;font-size:21px;margin-top:9px}
.app-msg p{color:var(--muted);font-size:14px;line-height:1.55;margin-top:8px;max-width:60ch}
.playbadge{display:inline-flex;align-items:center;gap:12px;background:#0B0E13;border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:10px 18px;flex:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.playbadge:hover{border-color:rgba(255,255,255,.36);transform:translateY(-1px);box-shadow:0 12px 30px -16px rgba(0,0,0,.8)}
.playbadge .pg-t{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.playbadge .pg-t small{font-family:var(--sans);font-size:9.5px;letter-spacing:.05em;color:#B9C0CC;text-transform:uppercase}
.playbadge .pg-t b{font-family:var(--disp);font-weight:700;font-size:17px;color:#fff}
@media (max-width:560px){.playbadge{width:100%;justify-content:center}}

/* =========================================================
   NEWSLETTER-Band (marketing, KEINE Tipps → Premium bleibt wertvoll)
   ========================================================= */
.nlband{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px;padding-block:26px}
.nl-txt h3{font-family:var(--disp);font-weight:800;font-size:20px}
.nl-txt p{color:var(--muted);font-size:14px;margin-top:6px;max-width:48ch}
.nl-form{display:flex;gap:8px;flex-wrap:wrap}
.nl-form input{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;min-width:230px}
.nl-form input::placeholder{color:var(--faint)}
.nl-form input:focus{outline:none;border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}
.nl-ok{font-family:var(--mono);font-size:12px;color:var(--win)}
.nl-ok.bad{color:var(--loss)}
@media (max-width:560px){.nl-form,.nl-form input{width:100%}}

/* Wissensdatenbank — Docs-Layout (sticky Inhalt + Konzept-Karten) */
.kbwrap{display:grid;grid-template-columns:196px minmax(0,1fr);gap:32px;align-items:start;margin-top:10px}
@media (max-width:860px){.kbwrap{grid-template-columns:1fr}.kb-toc{display:none}}
.kb-toc{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.kb-toc .h{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding:2px 10px 7px}
.kb-toc a{font-size:13.5px;font-weight:500;color:var(--muted);padding:7px 11px;border-radius:8px;border-left:2px solid transparent}
.kb-toc a:hover{color:var(--ink);background:color-mix(in srgb,var(--cyan) 7%,transparent);border-left-color:var(--cyan)}
.kb-toc a.on{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--cyan) 11%,transparent);border-left-color:var(--cyan)}
.kb-sec{padding-block:0;margin-bottom:40px}
.kb-sec>h2{font-size:clamp(20px,2.6vw,26px);scroll-margin-top:84px}
.kb-sec>.lead{color:var(--muted);margin:9px 0 16px;font-size:15px;max-width:60ch}
.kb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.kb-grid{grid-template-columns:1fr}}
.kb-card{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}
.kb-card h4{font-family:var(--disp);font-weight:800;font-size:15.5px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.kb-card h4 .tag{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 12%,transparent);padding:2px 7px;border-radius:6px;letter-spacing:.02em}
.kb-card p{color:var(--muted);font-size:13.5px;line-height:1.62;margin-top:9px}
.kb-card .note{margin-top:11px;padding:9px 12px;border-left:2px solid var(--cyan);
  background:color-mix(in srgb,var(--cyan) 6%,transparent);border-radius:0 8px 8px 0;font-size:12.5px;color:var(--muted)}
.kb-card .note.warn{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent)}
.kb-card .note b{color:var(--ink)}

/* Über: Pipeline-Diagramm (So funktioniert's) */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
@media (max-width:860px){.pipe{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pipe{grid-template-columns:1fr}}
.pipe-step{position:relative;background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}
.pipe-step .num{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:900;font-size:16px;color:var(--void);background:linear-gradient(135deg,var(--cyan),var(--violet))}
.pipe-step h4{font-family:var(--disp);font-weight:800;font-size:15.5px;margin-top:13px}
.pipe-step p{color:var(--muted);font-size:12.5px;line-height:1.55;margin-top:8px}
.pipe-step:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:31px;z-index:2;
  font-family:var(--disp);font-weight:900;font-size:18px;color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow)}
@media (max-width:860px){.pipe-step::after{display:none}}
.pipe-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.pipe-chips span{font-family:var(--mono);font-size:10px;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 24%,transparent);padding:3px 7px;border-radius:6px}

/* Über: kompakte Prinzipien (statt großer Karten) */
.princ{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media (max-width:820px){.princ{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.princ{grid-template-columns:1fr}}
.princ .p{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 17px}
.princ .p h4{font-family:var(--disp);font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:9px}
.princ .p h4::before{content:"";width:7px;height:7px;border-radius:2px;flex:none;background:linear-gradient(135deg,var(--cyan),var(--violet))}
.princ .p p{color:var(--muted);font-size:12.5px;line-height:1.55;margin-top:9px}

/* Über: Gründer + Entwicklung nebeneinander (oben) */
.abtop{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;margin-top:8px}
@media (max-width:900px){.abtop{grid-template-columns:1fr;gap:26px}}

/* Entwicklungs-Timeline (Über) */
.tl{margin-top:22px;padding-left:6px}
.tl-item{position:relative;padding:0 0 22px 30px;border-left:2px solid var(--line-2);margin-left:7px}
.tl-item:last-child{border-left-color:transparent;padding-bottom:2px}
.tl-item::before{content:"";position:absolute;left:-8px;top:3px;width:13px;height:13px;border-radius:50%;
  background:var(--panel-2);border:2px solid var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 12%,transparent)}
.tl-item h4{font-family:var(--disp);font-weight:800;font-size:15.5px}
.tl-item p{color:var(--muted);font-size:14px;line-height:1.6;margin-top:5px;max-width:64ch}

/* Roadmap (Über) */
.rmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;align-items:start}
@media (max-width:820px){.rmgrid{grid-template-columns:1fr}}
.rmcol{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px 6px;box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}
.rmcol>.h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding-bottom:4px}
.rmcol>.h .dot{width:8px;height:8px;border-radius:50%;flex:none}
.rmcol.live>.h .dot{background:var(--cyan)}.rmcol.soon>.h .dot{background:var(--amber)}.rmcol.plan>.h .dot{background:var(--violet)}
.rmitem{padding:12px 0;border-top:1px solid var(--line-2)}
.rmitem b{font-weight:700;font-size:14px}
.rmitem p{color:var(--muted);font-size:12.5px;line-height:1.55;margin-top:4px}

/* Spieltag-Detail: Analyse-Reiter (Premium-locked Märkte) */
.anl-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:14px 16px 4px;padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--cyan) 24%,var(--line));border-radius:var(--r-s);background:color-mix(in srgb,var(--cyan) 7%,transparent)}
.anl-cta .ico{font-size:14px}
.anl-cta b{font-family:var(--disp);font-weight:800;font-size:14px}
.anl-cta .sub{display:block;color:var(--muted);font-size:12px;margin-top:3px;max-width:52ch}
.anl-cat{font-family:var(--sans);font-weight:700;font-size:12px;color:var(--muted);padding:15px 16px 4px}
.anl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line-2);font-size:13.5px}
.anl-row .mk{color:var(--ink)}
.anl-qs{display:flex;gap:6px;flex:none}
.anl-row .q{font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:7px;padding:5px 9px;min-width:46px;text-align:center;
  filter:blur(3px);-webkit-user-select:none;user-select:none}

/* mehr Reiter -> horizontal scrollbar bei Bedarf */
.dtabs{overflow-x:auto}
/* 2026-09-19: mit dem Live-Tipp sind es neun Reiter. Ohne nowrap bricht "Live-Tipp"
   mitten im Wort um und die ganze Leiste wird zweizeilig. Lieber seitlich scrollen. */
.dtabs button{white-space:nowrap;flex:0 0 auto}

/* =========================================================
   BROKER-TERMINAL-FLAIR — Instrument-Kopf (Spieltag-Detail)
   Score als "Last", ELO/xG als Quote-Board, Δ als grün/rot Delta
   ========================================================= */
.term-sub.inst{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;padding:11px 16px}
.inst-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.inst-name{font-family:var(--disp);font-weight:800;font-size:16px;line-height:1.1;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.inst-name i{width:5px;height:5px;border-radius:50%;background:var(--faint);flex:none}
.inst-tick{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--faint);text-transform:uppercase}
.term-sub.inst .ipill{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:5px 9px;border-radius:7px;white-space:nowrap;border:1px solid var(--line-2)}
.ipill.live{color:var(--liveclr);background:color-mix(in srgb,var(--liveclr) 10%,transparent);
  border-color:color-mix(in srgb,var(--liveclr) 30%,var(--line));animation:livepulse 1.9s ease-in-out infinite}
.ipill.up{color:var(--amber);background:color-mix(in srgb,var(--amber) 9%,transparent);border-color:color-mix(in srgb,var(--amber) 28%,var(--line))}
.ipill.ft{color:var(--muted);background:var(--panel-2)}
.inst-board{display:flex;align-items:stretch;margin-left:auto;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:color-mix(in srgb,var(--void) 26%,transparent)}
.inst-board .ic{display:flex;flex-direction:column;gap:3px;padding:7px 14px;border-left:1px solid var(--line-2);min-width:60px}
.inst-board .ic:first-child{border-left:0}
.inst-board .ic .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.inst-board .ic .v{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.inst-board .ic.last .v{font-size:16px;letter-spacing:.03em}
.inst-board .ic.d .v{font-weight:800}
.inst-board .ic.d.up .v{color:var(--win)}
.inst-board .ic.d.down .v{color:var(--loss)}
@media (max-width:720px){.inst-board{margin-left:0;width:100%}.inst-board .ic{flex:1 0 auto}}
/* Terminal-Zahlen: gleichbreite Ziffern im ganzen Detail-Körper */
.dtab-body{font-variant-numeric:tabular-nums}

/* Analyse + Team: auto-füllende Spalten (nutzen die Panel-Breite dynamisch) */
.anl-cols{columns:300px;column-gap:30px;padding:6px 16px 14px}
.anl-grp{-webkit-column-break-inside:avoid;break-inside:avoid;margin-bottom:12px}
.anl-cols .anl-cat{padding:12px 0 4px}
.anl-cols .anl-row{padding:9px 0}
.sq-cols{columns:260px;column-gap:30px;padding:2px 16px 12px}
.sq-grp{-webkit-column-break-inside:avoid;break-inside:avoid;margin-bottom:12px}
.sq-cols .sq-cat{padding:12px 0 4px}
.sq-cols .sq-head,.sq-cols .sq-row{padding-left:0;padding-right:0}

/* KI-Analyse (locked, redigierter Text) — auto-füllende Report-Spalten */
.ki-body{padding:6px 16px 18px;columns:330px;column-gap:34px}
.ki-sec{margin:0 0 18px;-webkit-column-break-inside:avoid;break-inside:avoid}
.ki-sec h4{font-family:var(--disp);font-weight:800;font-size:14.5px}
.ki-lines{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.ki-line{height:10px;border-radius:5px;filter:blur(2px);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 20%,transparent),color-mix(in srgb,var(--ink) 6%,transparent))}

/* Aufstellung: Taktik-Board oben (mittig) + Team-Sheets darunter */
.lineup{padding:14px 16px 18px}
.lu-board{max-width:700px;margin:2px auto 0}
.lu-frm{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.lu-frm .f{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em;padding:4px 9px;border-radius:7px;border:1px solid var(--line-2)}
.lu-frm .f.hm{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 9%,transparent);border-color:color-mix(in srgb,var(--cyan) 26%,var(--line))}
.lu-frm .f.aw{color:var(--violet-2);background:color-mix(in srgb,var(--violet) 9%,transparent);border-color:color-mix(in srgb,var(--violet) 26%,var(--line))}
.lu-frm .cap{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.pitch{position:relative;aspect-ratio:16/10;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 7%,var(--panel-2)),var(--panel-2) 50%,color-mix(in srgb,var(--violet) 7%,var(--panel-2)))}
.pitch .pmid-v{position:absolute;top:5%;bottom:5%;left:50%;width:1px;background:var(--line)}
.pitch .pcirc{position:absolute;left:50%;top:50%;width:78px;height:78px;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%}
.pitch .pbox{position:absolute;top:24%;bottom:24%;width:12%;border:1px solid var(--line)}
.pitch .pbox.l{left:0;border-left:0;border-radius:0 8px 8px 0}
.pitch .pbox.r{right:0;border-right:0;border-radius:8px 0 0 8px}
.pl{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:50px;z-index:2}
.pl .no{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:11px;color:var(--void);box-shadow:0 2px 7px rgba(0,0,0,.45)}
.pl.hm .no{background:linear-gradient(135deg,var(--cyan),var(--cyan-deep))}
.pl.aw .no{background:linear-gradient(135deg,var(--violet),var(--violet-2))}
.pl .nm{font-size:9.5px;font-weight:600;color:var(--ink);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* Team-Sheets unter dem Feld (beide Teams nebeneinander) */
.lu-sheets{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media (max-width:620px){.lu-sheets{grid-template-columns:1fr}}
.ts{background:color-mix(in srgb,var(--void) 20%,transparent);border:1px solid var(--line-2);border-radius:var(--r-s);padding:13px 16px 15px}
.ts-h{display:flex;align-items:center;gap:9px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.ts-h .dot{width:9px;height:9px;border-radius:3px;flex:none}
.ts.hm .ts-h .dot{background:var(--cyan)}.ts.aw .ts-h .dot{background:var(--violet)}
.ts-h b{font-family:var(--disp);font-weight:800;font-size:14.5px}
.ts-h .frm{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.03em}
.ts-lbl{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding:12px 0 4px}
.ts-xi{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:420px){.ts-xi{grid-template-columns:1fr}}
.ts-p{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line-2);font-size:12.5px;min-width:0}
.ts-p .no{font-family:var(--mono);font-weight:600;font-size:11px;color:var(--faint);width:20px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.ts-p .nm{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-bench{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ts-sub{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;padding:4px 9px}
.ts-sub b{font-family:var(--mono);font-weight:600;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}

/* Gründer-Karte (Über) */
.founder{display:flex;gap:22px;align-items:flex-start;padding:24px 26px;margin-top:18px}
.founder-mark{flex:none;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--cyan) 10%,transparent);border:1px solid var(--line)}
.founder-txt p{color:var(--muted);font-size:15px;line-height:1.66}
.founder-txt p+p{margin-top:12px}
.founder-txt .ph-note{color:var(--faint);font-size:13px;border-left:2px solid var(--amber);
  background:color-mix(in srgb,var(--amber) 6%,transparent);border-radius:0 8px 8px 0;padding:10px 13px;margin-top:14px}
@media (max-width:560px){.founder{flex-direction:column;gap:14px}}

/* Glossar (Wissensdatenbank) */
.gloss{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin-top:18px}
@media (max-width:640px){.gloss{grid-template-columns:1fr}}
.gloss>div{padding:12px 0;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:3px}
.gloss b{font-weight:700;font-size:14.5px}
.gloss span{color:var(--muted);font-size:13.5px;line-height:1.5}

/* =========================================================
   HISTORIE / Track-Record (Tipster-Stil)
   ========================================================= */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}
@media (max-width:920px){.kpi-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;box-shadow:0 18px 42px -30px rgba(0,0,0,.72)}
.kpi .k{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.kpi .v{font-family:var(--disp);font-weight:800;font-size:26px;margin-top:7px;font-variant-numeric:tabular-nums;line-height:1}
.kpi .v.pos{color:var(--win)}
.kpi .v.neg{color:var(--loss)}
.kpi .v.grad{background:linear-gradient(120deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .s{font-size:11px;color:var(--muted);margin-top:5px}
.hist-note{font-size:12.5px;color:var(--faint);margin-top:12px;max-width:78ch;line-height:1.5}
.hist-note b{color:var(--muted)}

.hist-sec{margin-top:26px}
/* 2026-09-24 (Enrico: "waere es hier nicht sinnvoll die abstaende zu verkleinern"):
   Die Abschnitte sind <section>-Elemente und bekamen darueber die globale Regel
   section{padding-block:clamp(30px,4vw,52px)} mit. Zusammen mit dem eigenen
   margin-top standen zwischen zwei Bloecken bis zu 126px Leere, auf einer Seite,
   die nur aus Tabellen besteht. Der Abstand steckt jetzt allein im margin. */
main .wrap > section.hist-sec{padding-block:0}
/* Der Live-Wetten-Block wird erst vom Skript gefuellt. Bleibt er leer, soll er auch
   keinen Abstand hinterlassen. */
.hist-sec:empty{display:none}
.hist-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hist-h h2{font-size:clamp(18px,2.3vw,23px)}
.hist-h .sub{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}

.hcard{background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 20px;box-shadow:0 18px 42px -30px rgba(0,0,0,.72);overflow-x:auto}
.htable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:520px}
.htable th{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);
  font-weight:600;text-align:right;padding:13px 0 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.htable th:first-child{text-align:left}
.htable td{padding:11px 0;border-top:1px solid var(--line-2);font-size:13.5px;text-align:right;color:var(--ink);white-space:nowrap}
.htable td:first-child{text-align:left}
.htable tr:first-child td{border-top:0}
.htable .mkt{font-weight:600}
.htable td.lname{text-align:left;font-weight:600}
.htable th.lh{text-align:left}
.htable .flag{margin-right:9px}
.htable .muted{color:var(--muted)}
.htable .pos{color:var(--win);font-family:var(--mono);font-weight:600}
.htable .neg{color:var(--loss);font-family:var(--mono);font-weight:600}
.htable .odds{font-family:var(--mono);color:var(--muted)}
.hbar-cell{display:inline-flex;align-items:center;justify-content:flex-end;gap:11px}
.hbar{width:110px;max-width:30vw;height:7px;border-radius:4px;background:var(--panel-2);overflow:hidden;flex:none}
.hbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.hbar-cell b{font-family:var(--mono);font-weight:700;min-width:50px;text-align:right;color:var(--ink)}
.htable .res{display:inline-block}

/* Gewinnkurve (kumuliert) — Fläche + Linie, wie ein Tipster-Profit-Graph */
.hcurve{display:block;width:100%;height:auto;overflow:visible}
.hc-base{stroke:var(--line);stroke-width:1}
.hc-area{fill:url(#tg)}
.hc-line{fill:none;stroke:url(#psg);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hc-dot{fill:var(--cyan);stroke:var(--panel);stroke-width:2}
.hc-end{fill:var(--ink);font-family:var(--mono);font-size:12px;font-weight:700}
.hc-x text{fill:var(--faint);font-family:var(--mono);font-size:11px;text-anchor:middle;letter-spacing:.03em}

/* Zwei farbige Kurven: Flat = Teal, ¼-Kelly = Violett; aktive gefüllt + dicker */
.hc-set .a{opacity:0;transition:opacity .2s}
.hc-set[data-m="flat"] .a{fill:url(#tg)}
.hc-set[data-m="kelly"] .a{fill:url(#tgv)}
.hc-set .l{fill:none;stroke-width:1.75;opacity:.85;transition:stroke-width .2s,opacity .2s}
.hc-set[data-m="flat"] .l{stroke:var(--cyan)}
.hc-set[data-m="kelly"] .l{stroke:var(--violet)}
.hc-set .d{stroke:var(--panel);stroke-width:2}
.hc-set[data-m="flat"] .d{fill:var(--cyan)}
.hc-set[data-m="kelly"] .d{fill:var(--violet)}
.hc-set .e{display:none;font-family:var(--mono);font-size:12px;font-weight:700}
.hc-set[data-m="flat"] .e{fill:var(--cyan)}
.hc-set[data-m="kelly"] .e{fill:var(--violet-2)}
.hc2.mode-flat .hc-set[data-m="flat"] .a,
.hc2.mode-kelly .hc-set[data-m="kelly"] .a{opacity:1}
.hc2.mode-flat .hc-set[data-m="flat"] .l,
.hc2.mode-kelly .hc-set[data-m="kelly"] .l{stroke-width:3;opacity:1}
.hc2.mode-flat .hc-set[data-m="flat"] .e,
.hc2.mode-kelly .hc-set[data-m="kelly"] .e{display:block}
/* Y-Achse + Gitterlinien */
.hc-y line{stroke:var(--line-2);stroke-width:1}
.hc-y text{fill:var(--faint);font-family:var(--mono);font-size:10px;text-anchor:end}
/* Legende */
.hc-leg text{fill:var(--muted);font-family:var(--mono);font-size:11px}
.hc-leg .lg-flat{fill:var(--cyan)}
.hc-leg .lg-kelly{fill:var(--violet)}

/* Strategie-Auswahl (A: Sicherheit / B: Wachstum) */
.hist-h:has(.hc-seg){align-items:center}
.hc-seg{flex:none}
.stakepick{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media (max-width:620px){.stakepick{grid-template-columns:1fr}}
.sp{text-align:left;font:inherit;color:inherit;background:var(--cardbg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;cursor:pointer;transition:border-color .15s,background .15s}
.sp:hover{border-color:color-mix(in srgb,var(--cyan) 30%,var(--line))}
.sp.on{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 6%,var(--panel))}
.sp-h{display:flex;align-items:center;gap:10px}
.sp-h b{font-family:var(--disp);font-weight:800;font-size:15px}
.sp-tag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px;white-space:nowrap}
.sp-tag.safe{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.sp-tag.grow{color:var(--violet-2);background:color-mix(in srgb,var(--violet) 15%,transparent)}
.sp p{color:var(--muted);font-size:13px;line-height:1.55;margin-top:9px}
.sp-end{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:10px}
.sp-end b{color:var(--ink)}

/* Zeitraum-Filter (rein optisch) */
.hist-seg{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.hist-seg button{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);background:transparent;border:0;
  padding:6px 13px;border-radius:8px;cursor:pointer;letter-spacing:.03em}
.hist-seg button.on{background:color-mix(in srgb,var(--cyan) 16%,transparent);color:var(--ink)}

/* Historie: "seit"-Zeitraum-Label (live) */
.hist-since{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:6px 12px}
.hist-since .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);flex:none}


/* Sprachumschalter in der Navigation (2026-09-18) */
.langsw{display:flex;gap:1px;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:9px;padding:2px;margin-left:auto;margin-right:12px;flex:none}
.langsw button{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;color:var(--muted);padding:5px 8px;border-radius:7px;line-height:1}
.langsw button:hover{color:var(--ink)}
.langsw button.on{background:var(--cyan);color:var(--void);font-weight:700}
@media (max-width:860px){.langsw{margin-right:8px}.langsw button{padding:5px 6px;font-size:10px}}


/* Rechts-Links im Footer (2026-09-18) */
.foot-links{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 10px}
.foot-links a{color:var(--muted);text-decoration:none;font-size:12.5px}
.foot-links a:hover{color:var(--cyan)}

/* ---- Live-Tipp-Reiter (2026-09-19) ----
   Der Reiter erscheint nur, wenn zu diesem Spiel gerade ein Signal existiert. Er sticht
   bewusst hervor (Puls am Punkt), weil Live-Wetten Aufmerksamkeit brauchen - aber er
   zeigt nie Team oder Quote, das ist das Produkt. */
.dtabs button.sig{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,var(--line))}
.dtabs button.sig.on{background:color-mix(in srgb,var(--cyan) 16%,transparent)}
.sigdot{margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cyan)}
.ltip{padding:2px 0}
.ltip-head{display:flex;align-items:center;gap:9px;padding:14px 16px 12px}
.ltip-head b{font-size:15px;letter-spacing:-.01em}
.ltip-head .min{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.ltip-head .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 70%,transparent);animation:sigpulse 2s infinite}
@keyframes sigpulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.ltip-head .dot{animation:none}}
.ltip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.lt-c{background:var(--panel);padding:11px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.lt-c .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.lt-c .v{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.ltip-why{padding:14px 16px 4px}
.ltip-why .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.ltip-why ul{margin:8px 0 0;padding-left:18px;line-height:1.65;font-size:13px}
.ltip-why li{margin-bottom:5px}
@media (max-width:560px){.ltip-grid{grid-template-columns:1fr}}

/* ---- Live-Wetten-Sektion (Top-Picks) ---- */
.lwcard{display:block;text-decoration:none;color:inherit;padding:0;overflow:hidden}
.lwcard:hover{border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))}
.lw-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.lw-h .lgn{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-h .min{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint);flex:0 0 auto}
.lw-h .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 70%,transparent);animation:sigpulse 2s infinite}
.lw-m{display:flex;gap:10px;padding:9px 14px;align-items:baseline}
.lw-m .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);flex:0 0 78px}
.lw-m .v{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.lw-empty{display:flex;gap:12px;align-items:flex-start;padding:22px 18px;border:1px dashed var(--line);
  border-radius:var(--r);background:var(--cardbg)}
.lw-empty .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);margin-top:6px;flex:0 0 auto}
.lw-empty b{display:block;font-size:14px;margin-bottom:4px}
.lw-empty span{display:block;color:var(--faint);font-size:13px;line-height:1.6;max-width:62ch}
@media (prefers-reduced-motion:reduce){.lw-h .dot{animation:none}}

/* Ladezustand der Pick-Karten: eine ruhige Karte statt springender Platzhalter */
.pc-skel{min-height:120px;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-family:var(--mono);font-size:12px}
.pc-skel .pc-h{border:0;background:none}

/* ---- Handy: Spieltag als Durchklick (2026-09-19) ----
   Untereinander gestapelt war das Detail hinter bis zu 188 Listenzeilen versteckt.
   Auf dem Handy wird deshalb entweder die Liste ODER das Spiel gezeigt. */
.det-back{display:none}
.mlist-more{display:none}
@media (max-width:940px){
  .det-back{display:block;width:100%;padding:13px 16px;border:0;border-bottom:1px solid var(--line);
    background:var(--cardbg);color:var(--cyan);font-family:var(--mono);font-size:12px;
    letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer}
  .matchapp>#detail{display:none}
  .matchapp.zeigt-detail>#mlist{display:none}
  .matchapp.zeigt-detail>#detail{display:block}
  .mlist-more{display:block;width:100%;padding:14px;border:0;border-top:1px solid var(--line);
    background:transparent;color:var(--cyan);font-family:var(--mono);font-size:12px;
    letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
  .mlist-more:hover{background:color-mix(in srgb,var(--cyan) 7%,transparent)}
}

.tp-rest{margin:4px 0 0;color:var(--faint);font-family:var(--mono);font-size:12px}

/* ---- Premium-Zugang der Website (2026-09-19) ---- */
.prembtn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:8px 12px;
  border-radius:10px;border:1px solid var(--line);background:var(--glass);color:var(--muted);
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.prembtn:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));color:var(--ink)}
.prembtn.on{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 50%,var(--line));
  background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.pm-panel{position:absolute;right:16px;top:100%;width:min(340px,calc(100vw - 32px));z-index:40;
  background:color-mix(in srgb,var(--void) 97%,transparent);-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 14px;box-shadow:0 26px 50px -28px rgba(0,0,0,.9)}
.pm-panel h4{margin:0 0 6px;font-size:15px}
.pm-panel p{margin:0 0 12px;font-size:13px;color:var(--muted);line-height:1.55}
.pm-row{display:flex;gap:8px}
.pm-row input{flex:1;min-width:0;font-family:var(--mono);font-size:13px;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  text-transform:uppercase}
.pm-row input:focus{outline:none;border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}
.pm-test{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:flex;
  flex-direction:column;gap:8px;align-items:flex-start}
.pm-test span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber)}
.pm-note{margin:12px 0 0!important;font-size:11px!important;color:var(--faint)!important}
/* freigeschaltete Pick-Karte */
.pc-open{margin:12px 16px 14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--cyan) 30%,var(--line));
  border-radius:11px;display:flex;flex-direction:column;gap:5px;flex:1}
.pc-open .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.pc-open .v{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.pc-open .q{font-family:var(--mono);font-size:12px;color:var(--cyan)}
@media (max-width:560px){.pm-panel{right:8px;left:8px;width:auto}}

/* ---- Top-Picks: Tagesgruppen + freigeschaltete Karte (2026-09-19) ---- */
/* 2026-09-19: Der Tagestitel war zu blass, und "order:3" schob die Anzahl hinter die
   Trennlinie an den rechten Bildschirmrand - dort ging sie voellig unter. Jetzt steht
   die Zahl direkt neben dem Tag, und der Tag selbst ist als Ueberschrift lesbar. */
.tp-tag{grid-column:1/-1;margin:28px 0 4px;display:flex;align-items:center;gap:10px;
  font-family:var(--disp);font-size:17px;font-weight:800;letter-spacing:-.01em;
  text-transform:none;color:var(--ink)}
.tp-tag:first-child{margin-top:0}
.tp-tag::after{content:"";flex:1;height:1px;background:var(--line-2);margin-left:2px}
.tp-tag span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 28%,transparent);
  border-radius:20px;padding:3px 9px;line-height:1}
.tp-more{grid-column:1/-1;margin-top:8px;padding:13px;border:1px solid var(--line);
  border-radius:var(--r);background:transparent;color:var(--cyan);font-family:var(--mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tp-more:hover{background:color-mix(in srgb,var(--cyan) 7%,transparent)}
.pcard-on{border-color:color-mix(in srgb,var(--cyan) 22%,var(--line))}
.pc-open{margin:12px 16px 14px;padding:13px 14px 12px;
  border:1px solid color-mix(in srgb,var(--cyan) 28%,var(--line));border-radius:11px;
  display:flex;flex-direction:column;gap:0;flex:1;
  background:color-mix(in srgb,var(--cyan) 5%,transparent)}
.po-top{display:flex;align-items:baseline;gap:10px}
.po-top .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.po-pct{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:23px;line-height:1;
  color:var(--cyan);font-variant-numeric:tabular-nums}
.po-pct i{font-style:normal;font-size:12px;margin-left:1px;opacity:.7}
.po-tip{margin-top:7px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.po-bar{margin-top:10px;height:4px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.po-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet))}
/* 2026-09-19: 9px in Versalien und --faint waren nicht lesbar (2,33:1 Kontrast).
   Kleine Schrift braucht MEHR Kontrast, nicht weniger. */
.po-q{margin-top:11px;display:flex;gap:18px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.po-q em{display:block;font-style:normal;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}

/* ---- Pick-Karten kompakt (2026-09-19) ----
   Vorher standen die Teams untereinander, jedes mit Kuerzel-Kaestchen. Das war die
   halbe Kartenhoehe fuer zwei Namen. Jetzt eine Zeile, und die ganze Karte fuehrt
   zur Analyse im Spieltag. */
a.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.pcard:hover{border-color:color-mix(in srgb,var(--cyan) 42%,var(--line))}
a.pcard:hover .po-go{color:var(--cyan)}
.pcard .pc-h{display:flex;align-items:baseline;gap:8px}
.pcard .pc-h .t{margin-left:auto;font-variant-numeric:tabular-nums}
.pc-vs{padding:11px 16px 0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pc-vs b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.pc-vs i{font-style:normal;color:var(--faint);font-size:13px}
.pc-lock2{margin:11px 16px 12px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--cyan) 28%,var(--line));
  border-radius:11px;display:flex;align-items:center;gap:9px;flex:1}
.pc-lock2 .tx{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pc-lock2 .cf{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:17px;color:var(--faint)}
.po-tip{display:flex;align-items:baseline;gap:10px}
.po-tip .po-pct{margin-left:auto}
.pcard .po-q{margin:0 16px 13px;padding-top:0}
.pcard-on .po-q{margin-top:11px}
.po-go{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);align-self:flex-end;transition:color .14s}

/* 7-Tage-Angebot im Premium-Panel: das ist der Hauptweg, deshalb optisch vor dem
   Codefeld und deutlich hervorgehoben. */
.pm-trial{margin:14px 0 0;padding:13px 14px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--cyan) 32%,var(--line));
  background:color-mix(in srgb,var(--cyan) 8%,transparent);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-trial b{font-size:13px;color:var(--ink)}
.pm-trial .btn{margin-left:auto;padding:8px 14px;font-size:13px}

.pm-sep{margin:16px 0 12px;display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pm-sep::before,.pm-sep::after{content:"";flex:1;height:1px;background:var(--line-2)}
.pm-klein{font-size:12px!important;margin-bottom:9px!important}

.lwcard-on{border-color:color-mix(in srgb,var(--cyan) 30%,var(--line))}
.lwcard-on .pc-open{margin:11px 14px 13px}

/* Kachelraster der Startseite (2026-09-20). Es gab bisher kein allgemeines Raster fuer
   verlinkte Karten - die uebrigen Seiten nutzen statband, das ist aber auf vier
   Zahlenkacheln ausgelegt. Drei Spalten, ab Tablet zwei, auf dem Handy eine. */
.homegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.homegrid a.panel{display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.homegrid a.panel:hover{border-color:var(--cy,#22D3BE);transform:translateY(-2px)}
.homegrid h3{margin:0 0 6px;font-size:1.02rem}
.homegrid p{margin:0;font-size:.9rem;line-height:1.5;color:var(--mut,#98A2B3)}
@media(max-width:900px){.homegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.homegrid{grid-template-columns:minmax(0,1fr)}}

/* Seitentitel fuer die Werkzeug-Seiten (2026-09-20). Ruhig gesetzt: die Seite lebt von
   der Tabelle darunter, die Ueberschrift soll sie einordnen, nicht verdraengen. */
.pagetitle{font-size:14px;font-weight:600;line-height:1.3;margin:26px 0 0;font-weight:600;
  letter-spacing:-.01em;color:var(--fg,#E6EAF2)}
@media(max-width:560px){.pagetitle{font-size:13.5px;margin-top:14px}}

/* Historie auf dem Handy noch etwas enger (2026-09-20). */
@media(max-width:560px){.hist-sec{margin-top:18px}}

/* Anmeldung mit Google im Premium-Panel (2026-09-20). Die Schaltflaeche rendert Google
   selbst, wir geben ihr nur Platz und Ausrichtung. Das Alters-Kaestchen steht bewusst
   DARUEBER: es soll gelesen werden, bevor geklickt wird, nicht danach bestaetigt. */
.pm-goog{display:flex;justify-content:center;margin:10px 0 4px;min-height:44px}
.pm-alter{display:flex;align-items:flex-start;gap:8px;margin:12px 0 2px;
  font-size:.86rem;line-height:1.4;color:var(--mut,#98A2B3);cursor:pointer}
.pm-alter input{margin-top:2px;accent-color:#22D3BE;flex:0 0 auto}
#pmgmsg:empty{display:none}
#pmgmsg{color:#F59E0B;margin:2px 0 0}

/* Analyse laeuft mit (2026-09-20, Enrico) ------------------------------------
   Auf breiten Bildschirmen stehen Liste und Analyse nebeneinander, aber die
   Analyse sass oben in einer sehr hohen Spalte. Wer in der langen Spielliste
   nach unten scrollte und dort ein Spiel waehlte, sah die Analyse nicht mehr
   und musste erst wieder hochscrollen.
   Jetzt klebt sie unter der Kopfzeile und bleibt im Blick. Moeglich ist das nur,
   weil .matchapp weiter oben overflow:visible bekommt - in einem Container mit
   overflow:hidden funktioniert position:sticky nicht. */
@media (min-width:941px){
  .matchapp{align-items:start}
  .matchapp>.term{
    position:sticky;
    top:76px;                        /* unter der klebenden Kopfzeile */
    max-height:calc(100vh - 92px);
    overflow-y:auto;
    overscroll-behavior:contain;     /* Rad scrollt nicht die Seite mit */
  }
  /* schmale Bildlaufleiste, damit sie das Panel nicht dominiert */
  .matchapp>.term::-webkit-scrollbar{width:8px}
  .matchapp>.term::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
}

/* Klebendes Positionieren reparieren (2026-09-20) ----------------------------
   In styles.css steht overflow-x:hidden auf html und body. Das sollte waagrechtes
   Scrollen verhindern, macht den Browser dabei aber zum Scroll-Container - und
   position:sticky bezieht sich dann auf ihn statt auf das Fenster. Wirkung: die
   Analyse-Spalte klebte nicht, obwohl die Regel korrekt war.

   clip statt hidden schneidet genauso ab, erzeugt aber KEINEN Scroll-Container.
   Damit bleibt der waagrechte Schutz erhalten und sticky funktioniert wieder. */
html, body{ overflow-x:clip }

/* Freigeschaltete Analyse (2026-09-20) ---------------------------------------
   Vorher zeigten die Reiter Analyse und KI-Analyse auch zahlenden Kunden ein
   Schloss. Jetzt stehen dort Wahrscheinlichkeit und faire Mindestquote.
   Bewusst dieselbe Zeilenhoehe wie die verschlossene Ansicht, damit der Wechsel
   nicht springt. */
.anl-m.open{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.anl-m.open .pc{font-variant-numeric:tabular-nums;font-weight:600;color:var(--cy,#22D3BE);min-width:48px;text-align:right}
.anl-m.open .fq{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--mut,#98A2B3);min-width:86px;text-align:right}
.anl-cta.open{background:transparent;border:0;padding:10px 16px 14px}
.anl-cta.open b{display:block;margin-bottom:4px}
.anl-cta.open .sub{display:block;font-size:.86rem;line-height:1.5;color:var(--mut,#98A2B3);max-width:62ch}
@media(max-width:560px){
  .anl-m.open{grid-template-columns:1fr auto;row-gap:2px}
  .anl-m.open .fq{grid-column:2;text-align:right;min-width:0}
}

/* Markt-Uebersicht (2026-09-27) -----------------------------------------------
   Enrico: "das sieht nicht schoen aus, es nimmt viel Platz weg" und danach
   "orientier dich mal an bet365 auch mit solchen ausklappbaren Reitern, dann kann
   der User entscheiden was er sehen will".

   Aufbau je Gruppe: ein <details>-Aufklapper mit Kopfzeile, darin entweder
     - eine flache Reihe (wenige Ausgaenge, Name und Wert nebeneinander), oder
     - ein Spaltenkopf plus eine Zeile je Linie.
   Offen sind nur Endergebnis und Gesamtzahl Tore, alles andere zugeklappt. Damit
   ist die Seite kurz und der Nutzer oeffnet, was ihn interessiert.

   In jeder Zelle steht die Wahrscheinlichkeit gross und die faire Quote klein
   darunter. Das haelt die Spalten schmal genug fuer drei Ausgaenge nebeneinander,
   ohne dass die faire Quote verschwindet - sie ist der eigentliche Wert. */
.mgrp{border-top:1px solid var(--line-2,#1E2A3A)}
.mgrp > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;cursor:pointer;list-style:none;user-select:none}
.mgrp > summary::-webkit-details-marker{display:none}
.mgrp > summary .t{font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--ink,#E6EDF7)}
.mgrp > summary .z{font-size:.74rem;color:var(--mut,#98A2B3);margin-left:auto;padding-right:6px}
/* Pfeil rechts, dreht sich beim Oeffnen. Reines CSS, kein Bild. */
.mgrp > summary::after{content:"";width:8px;height:8px;flex:0 0 8px;
  border-right:1.6px solid var(--mut,#98A2B3);border-bottom:1.6px solid var(--mut,#98A2B3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
.mgrp[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mgrp > summary:hover .t{color:var(--cy,#22D3BE)}
.mgrp[open] > summary{background:rgba(255,255,255,.02)}

/* Spaltenkopf und Zeilen teilen dieselbe Rasterdefinition, sonst stehen sie versetzt.
   --sp ist die Zahl der Ausgaenge und wird im Markup gesetzt. */
.anl-kopf2,.anl-t{display:grid;grid-template-columns:minmax(72px,1.4fr) repeat(var(--sp,2),minmax(62px,1fr));
  gap:8px;align-items:center;padding:7px 16px}
.anl-kopf2{padding-top:4px;padding-bottom:4px;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut,#98A2B3);background:rgba(255,255,255,.025)}
.anl-kopf2 span:not(:first-child){text-align:right}
.anl-t{border-top:1px solid var(--line-2,#1E2A3A)}
.anl-t .nm{font-size:.80rem;color:var(--ink,#E6EDF7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Eine Wertzelle: Prozent gross, faire Quote klein darunter. */
.zl{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.zl b{font-variant-numeric:tabular-nums;font-weight:600;font-size:.84rem;color:var(--cy,#22D3BE)}
.zl i{font-variant-numeric:tabular-nums;font-style:normal;font-size:.70rem;color:var(--mut,#98A2B3)}
/* Verschlossen: derselbe Platz, nur verwischt - damit beim Freischalten nichts springt. */
.zl.lk2{align-items:flex-end}
.zl.lk2 i{display:block;width:44px;height:8px;border-radius:3px;
  background:linear-gradient(90deg,var(--cy,#22D3BE),var(--vi,#A78BFA));opacity:.30;filter:blur(2.5px)}

/* Flache Reihe fuer Maerkte mit wenigen Ausgaengen.
   2026-09-27, zweiter Anlauf (Enrico: "das sieht nicht schoen aus"): vorher standen
   Name und Wert mit space-between an den Aussenkanten, dazwischen klaffte je nach
   Namenslaenge ein unterschiedlich breites Loch. Die Zeile zerfiel dadurch optisch,
   und man musste suchen, welcher Wert zu welchem Namen gehoert.
   Jetzt ist jeder Ausgang eine eigene Kachel: Name oben, darunter Wahrscheinlichkeit
   und faire Quote nebeneinander. Gleich breite Kacheln, nichts wandert. */
.anl-flach{display:grid;grid-template-columns:repeat(var(--sp,3),1fr);gap:8px;padding:10px 16px 12px;
  border-top:1px solid var(--line-2,#1E2A3A)}
.anl-flach .fl{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;
  padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.035);
  border:1px solid var(--line-2,#1E2A3A)}
.anl-flach .fn{font-size:.74rem;color:var(--mut,#98A2B3);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Halbzeit/Endstand traegt zwei Teamnamen in einer Kachel. Dort darf umgebrochen
   werden, sonst waere bei "Real Sociedad II - Real Sociedad II" die Haelfte weg. */
.anl-flach.wrap .fn{white-space:normal;overflow:visible;line-height:1.3}
.anl-flach.wrap .fl{min-height:62px;justify-content:space-between}
/* In der Kachel stehen die beiden Zahlen NEBENeinander, nicht uebereinander -
   sonst wird die Kachel unnoetig hoch. */
.anl-flach .zl{flex-direction:row;align-items:baseline;gap:7px;align-self:stretch}
.anl-flach .zl b{font-size:.94rem}
.anl-flach .zl i{font-size:.72rem}
.anl-flach .zl.lk2 i{margin-top:3px}

@media(max-width:560px){
  /* Auf dem Handy ist Breite knapp, nicht Hoehe: flache Reihen untereinander. */
  .anl-flach{grid-template-columns:1fr;gap:6px}
  .anl-kopf2,.anl-t{grid-template-columns:minmax(56px,1fr) repeat(var(--sp,2),minmax(52px,1fr));
    gap:6px;padding-left:12px;padding-right:12px}
  .mgrp > summary{padding-left:12px;padding-right:12px}
}
/* 2026-09-24 (Enrico: "der ticker geht in der beschreibung des tickers unter"):
   Der Ticker hatte keine einzige Handy-Regel. Links das Feld "Opening → Closing"
   mit rund 170px, rechts "Historie" mit rund 108px, dazu zwei 24px-Verlaeufe, die
   den Inhalt zusaetzlich verdecken. Bei 440px Fenster blieben dem Laufband gut
   110 Pixel, genug fuer anderthalb Werte.

   Die Beschriftung ist eine Erklaerung, das Laufband sind die Daten. Auf schmalen
   Schirmen weicht die Erklaerung. Der pulsende Punkt bleibt, er sagt "laeuft live",
   und das ist der Teil der Beschriftung, der ohne Worte auskommt. */
@media (max-width:820px){
  .tk-label,.tk-label-r{padding:0 11px;letter-spacing:.06em;font-size:9.5px}
}
@media (max-width:600px){
  .tk-label>span:not(.livedot){display:none}
  .tk-label{padding:0 12px}
  .tk-label::after{right:-14px;width:14px}
  .tk-label-r::before{left:-14px;width:14px}
  .tk-track{padding-left:14px;gap:22px}
  .tk-item{font-size:12px;gap:6px}
  .tk-item .mk{padding:1px 6px}
}