/* style.css - gemeinsames Design fuer alle Seiten (dunkles, modernes Theme) */

:root {
  --bg:        #f3f4f6;   /* Seitenhintergrund: grau-weiss */
  --bg-2:      #e5e7eb;   /* Eingaben, Badges, Balken-Spur */
  --card:      #ffffff;   /* Kartenhintergrund: weiss */
  --card-2:    #f5f6f8;
  --rand:      #e3e6eb;   /* Rahmenfarbe */
  --text:      #111827;   /* Haupttext: fast schwarz */
  --muted:     #6b7280;   /* gedaempfter Text (lesbar auf hell) */
  --accent:    #2563eb;   /* Blau (primaer) */
  --gruen:     #059669;   /* Value / positiv */
  --gold:      #d97706;   /* Highlight / Warnung */
  --rot:       #e11d48;   /* live / Außenseiter */
  --radius:    16px;
  --schatten:  0 4px 20px rgba(17,24,39,.07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, var(--bg) 60%);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Header / Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 16px;        /* bricht um statt zu ueberlappen */
  padding: 14px 22px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.nav-links { min-width: 0; }
.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.brand .dot { color: var(--gruen); }

/* "odds" als fliessend leuchtender Regenbogen-Schriftzug */
@keyframes leuchten-text {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(168,85,247,.5)); }
  50%      { filter: drop-shadow(0 0 9px rgba(59,130,246,.9)); }
}
.brand-odds, .rainbow-text {
  background: linear-gradient(90deg,
    #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7, #f43f5e);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: regenbogen 1.6s linear infinite, leuchten-text 1.8s ease-in-out infinite;
}
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .95rem;
  justify-content: flex-end; }
.nav-links a { color: var(--muted); font-weight: 600; }
.nav-links a.aktiv, .nav-links a:hover { color: var(--text); text-decoration: none; }

/* ---------- Container ---------- */
.wrap { max-width: 940px; margin: 0 auto; padding: 28px 18px 60px; }

.hero h1 { font-size: 2rem; margin: 8px 0 6px; }
.hero p { color: var(--muted); margin: 0 0 6px; }

.badge-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; color: var(--rot);
  background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.3);
  padding: 4px 10px; border-radius: 999px;
}
.badge-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rot); box-shadow: 0 0 0 0 rgba(244,63,94,.6);
  animation: puls 1.6s infinite; }
@keyframes puls { 0%{box-shadow:0 0 0 0 rgba(244,63,94,.6);} 70%{box-shadow:0 0 0 8px rgba(244,63,94,0);} 100%{box-shadow:0 0 0 0 rgba(244,63,94,0);} }

.quelle { color: var(--muted); font-size: .82rem; margin-top: 10px; text-align: center; }

/* ---------- Match-Karten ---------- */
.matches { display: grid; gap: 14px; margin-top: 22px; }

.match {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--schatten);
}
.match.grau { opacity: .55; }

.match-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--muted); margin-bottom: 12px;
}
.tour { font-weight: 800; font-size: .72rem; letter-spacing: .04em;
  color: var(--accent); background: rgba(59,130,246,.14);
  padding: 1px 6px; border-radius: 5px; margin-right: 4px; }
.surface { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--bg-2); font-weight: 600; }
.surface.unsicher { color: var(--gold); border-color: rgba(251,191,36,.4); }

.spieler {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px; padding: 7px 0;
}
.spieler .name { font-weight: 700; }
.spieler.fav .name::after { content: " ◆"; color: var(--gruen); font-size: .8rem; }
.spieler .markt { font-size: .76rem; color: var(--muted); }
.odds {
  font-variant-numeric: tabular-nums; font-weight: 700;
  background: var(--bg-2); border: 1px solid var(--rand);
  border-radius: 8px; padding: 4px 10px; min-width: 52px; text-align: center;
}

.bar { height: 7px; background: var(--bg-2); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.bar > span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #60a5fa); }

/* fliessender, leuchtender Regenbogen fuer den Balken mit der hoeheren Wahrscheinlichkeit */
@keyframes regenbogen { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes leuchten {
  0%, 100% { filter: brightness(1) saturate(1.1); box-shadow: 0 0 5px rgba(168,85,247,.45); }
  50%      { filter: brightness(1.45) saturate(1.4); box-shadow: 0 0 16px rgba(59,130,246,.85); }
}
.bar:has(> span.rainbow) { overflow: visible; }   /* Glow nicht abschneiden */
.bar > span.rainbow {
  background: linear-gradient(90deg,
    #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7, #f43f5e) !important;
  background-size: 200% 100% !important;
  animation: regenbogen 1.6s linear infinite, leuchten-text 1.8s ease-in-out infinite;
}
.spieler.fav .bar > span { background: linear-gradient(90deg, var(--gruen), #6ee7b7); }
.pct { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; }

.match-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand);
  font-size: .88rem;
}
.tipp { color: var(--muted); }
.tipp b { color: var(--text); }
.chip { padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .8rem; }
.chip.value  { color: var(--gruen); background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); }
.chip.upset  { color: var(--gold);  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); }
.chip.none   { color: var(--muted); background: var(--bg-2); border: 1px solid var(--rand); }

.leer { color: var(--muted); text-align: center; padding: 40px; }

/* ---------- Community-Tipp ---------- */
.tippbox { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
.tipp-frage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .85rem; color: var(--muted); }
.tippbtn { margin: 0; width: auto; padding: 6px 12px; font-size: .82rem; font-weight: 700;
  color: var(--text); background: var(--bg-2); border: 1px solid var(--rand);
  border-radius: 8px; cursor: pointer; }
.tippbtn:hover { border-color: var(--gold); color: var(--gold); background: rgba(251,191,36,.08); }
.tipp-ergebnis { display: none; }
.urow { display: flex; justify-content: space-between; font-size: .85rem; margin-top: 6px; }
.urow .mein { color: var(--gold); font-weight: 700; }
.bar.user > span { background: linear-gradient(90deg, var(--gold), #fcd34d); }
.utotal { font-size: .76rem; color: var(--muted); margin-top: 8px; }

/* ---------- Match-Dashboard ---------- */
.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; align-items: start; }
.dash-spalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-titel { font-weight: 800; font-size: .95rem; margin-bottom: 10px; display: flex;
  align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Untertitel (z. B. "Marktwert & Rating", "erwartet ~X", "(N Buchmacher)") sitzt sauber
   NEBEN dem Titel statt eine Zeile tiefer: das globale .quelle-margin-top hier aufheben. */
.dash-titel .quelle { margin: 0 0 0 auto; text-align: right; }
/* Tennis-Scoreboard im Broadcast-Stil (dunkles Panel) */
.tb-board { background: #0d1526; border-radius: 12px; padding: 8px 12px;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.tb-reihe { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.tb-reihe + .tb-reihe { border-top: 1px solid rgba(255,255,255,.07); }
.tb-kopf { padding: 2px 0 3px; }
.tb-kopf .tb-zell, .tb-pt-h { color: #57678a; font-size: .64rem; font-weight: 700; letter-spacing: .03em; }
.tb-name { flex: 1 1 auto; display: flex; align-items: center; gap: 7px; min-width: 0;
  color: #e8edf6; font-weight: 700; font-size: .95rem; }
.tb-nm-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ball { width: 1.15em; flex: none; display: inline-flex; justify-content: center; font-size: .74rem; }
.tb-sets { display: flex; gap: 4px; flex: none; }
.tb-zell { width: 25px; text-align: center; color: #8496b3; font-weight: 700; font-size: 1rem; }
.tb-zell sup { font-size: .58em; color: #57678a; margin-left: 1px; vertical-align: super; }
.tb-win { color: #ffffff; }
.tb-los { color: #6d80a3; }
.tb-akt-h, .tb-akt { color: #c3f53c !important; }
.tb-akt { background: rgba(195,245,60,.12); border-radius: 5px; }
.tb-pt-h { width: 36px; text-align: center; flex: none; }
.tb-pt { width: 36px; flex: none; text-align: center; font-weight: 800; font-size: 1rem;
  color: #0d1526; background: #c3f53c; border-radius: 6px; padding: 3px 0; }
.live-status { margin-top: 10px; font-weight: 700; font-size: .92rem; color: var(--gruen); min-height: 1.2em; }
.serve-tab, .bm-tab { width: 100%; border-collapse: collapse; font-size: .88rem; }
.serve-tab td, .serve-tab th { padding: 6px 4px; text-align: center; }
.serve-tab td:nth-child(2) { color: var(--muted); font-size: .82rem; }
.serve-tab th { color: var(--muted); font-size: .78rem; }
.bm-tab th { color: var(--muted); font-size: .76rem; text-align: left; padding: 5px 6px; }
.bm-tab td { padding: 5px 6px; border-top: 1px solid var(--rand); font-variant-numeric: tabular-nums; }
.bm-tab td:first-child { color: var(--muted); }
.bm-tab td:not(:first-child) { text-align: right; }
.verlauf-chart { width: 100%; height: 70px; display: block; }
.form-zeile { font-size: .85rem; color: var(--muted); margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wl { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center;
  border-radius: 5px; font-size: .7rem; font-weight: 800; }
.wl.w { background: rgba(52,211,153,.18); color: var(--gruen); }
.wl.l { background: rgba(244,63,94,.18); color: var(--rot); }
.detail-link { font-size: .82rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
@media (max-width: 680px) { .dash { grid-template-columns: 1fr; } }

/* ---------- Login/Registrieren-Popup ---------- */
.nav-mitte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-konto { font-weight: 700; font-size: .95rem; color: var(--text); cursor: pointer; }
.nav-konto a { color: var(--accent); }

.modal-overlay {
  position: fixed; inset: 0; z-index: 100; padding: 20px;
  background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center;
}
.modal-overlay.offen { display: flex; }
.modal-karte {
  position: relative; width: 100%; max-width: 380px; padding: 24px;
  background: var(--card); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.modal-close { position: absolute; top: 8px; right: 12px; width: auto; margin: 0;
  padding: 0 6px; font-size: 1.5rem; line-height: 1; background: transparent;
  border: none; color: var(--muted); cursor: pointer; }
.tabreihe { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { flex: 1; width: auto; margin: 0; padding: 9px 0; font-weight: 700; font-size: .9rem;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--rand);
  border-radius: 9px; cursor: pointer; }
.tab.aktiv { color: #fff; background: linear-gradient(90deg, var(--accent), #60a5fa); border-color: transparent; }
.authform input { margin-bottom: 10px; }
.ab18-zeile { display: flex; align-items: center; gap: 8px; font-weight: 400;
  color: var(--text); margin: 2px 0 12px; font-size: .9rem; }
.ab18-zeile input { width: auto; margin: 0; }
.auth-fehler { display: none; background: rgba(244,63,94,.12); color: var(--rot);
  padding: 9px 12px; border-radius: 9px; margin-bottom: 10px; font-size: .88rem; font-weight: 600; }
@media (max-width: 640px) { .nav-mitte { position: static; transform: none; } }

/* ---------- Formular (manuelle Seite) ---------- */
.karte {
  background: var(--card);
  border: 1px solid var(--card-2); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--schatten);
}
label { display: block; font-weight: 600; margin: 14px 0 5px; font-size: .9rem; color: var(--muted); }
input, select {
  width: 100%; padding: 11px 12px; font-size: 1rem;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--rand); border-radius: 10px;
}
/* Checkboxen/Radios nie auf volle Breite ziehen (sonst sprengt es das Layout) */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; border-radius: 0; accent-color: var(--accent);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.reihe { display: flex; gap: 12px; }
.reihe > div { flex: 1; }
button {
  margin-top: 20px; width: 100%; padding: 13px; font-size: 1rem; font-weight: 700;
  color: #04121f; background: linear-gradient(90deg, var(--gruen), #6ee7b7);
  border: none; border-radius: 10px; cursor: pointer;
}
button:hover { filter: brightness(1.05); }

table.mini { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.mini th, table.mini td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rand); }
table.mini th { color: var(--muted); font-size: .8rem; font-weight: 600; }

.signal { padding: 12px 14px; border-radius: 10px; font-weight: 700; margin-top: 14px; }
.signal.value { background: rgba(52,211,153,.12); color: var(--gruen); }
.signal.neutral { background: var(--bg-2); color: var(--muted); }
.signal.fehler { background: rgba(244,63,94,.12); color: var(--rot); }
.warnung { background: rgba(251,191,36,.1); color: var(--gold);
  padding: 10px 12px; border-radius: 10px; margin-top: 12px; font-size: .88rem; }

/* ---------- Hinweis-Banner ---------- */
.hinweis {
  margin-top: 26px; font-size: .85rem; color: #fcd34d;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.28);
  padding: 14px 16px; border-radius: 12px;
}

/* ---------- Layout mit Seitenleiste ---------- */
.layout { display: flex; gap: 20px; align-items: flex-start; }
.main { flex: 1; min-width: 0; }

/* Hamburger-Button (drei Balken) */
.menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 40px; padding: 0 11px; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--rand); border-radius: 10px; cursor: pointer;
}
.menu-btn span { display: block; height: 3px; border-radius: 2px; background: var(--text); }

/* Seitenleiste als einfahrende Schublade */
.side {
  position: fixed; top: 0; left: 0; z-index: 50;
  width: 280px; max-width: 85vw; height: 100vh; padding: 18px; overflow-y: auto;
  background: var(--card); border-right: 1px solid var(--rand); box-shadow: var(--schatten);
  transform: translateX(-105%); transition: transform .25s ease;
}
.side.offen { transform: translateX(0); }
.side-kopf { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; font-weight: 800; }
.menu-close { width: auto; margin: 0; padding: 0 6px; font-size: 1.5rem; line-height: 1;
  background: transparent; border: none; color: var(--muted); cursor: pointer; }

/* abgedunkelter Hintergrund, wenn das Menue offen ist */
.backdrop {
  position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.backdrop.offen { opacity: 1; visibility: visible; }

.filtergruppe { display: flex; gap: 6px; margin-bottom: 18px; }
.fbtn {
  flex: 1; width: auto; margin: 0; padding: 8px 0;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  background: var(--card); border: 1px solid var(--rand); border-radius: 9px; cursor: pointer;
}
.fbtn.aktiv { color: #04121f; background: linear-gradient(90deg, var(--accent), #60a5fa); border-color: transparent; }

.side-titel {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-weight: 700; font-size: .78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 4px; border-top: 1px solid var(--rand);
}
.turnierliste { display: flex; flex-direction: column; gap: 2px; max-height: 62vh; overflow: auto; }
.turnierliste.zu { max-height: 0; overflow: hidden; }
.tlink {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 8px; color: var(--muted);
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.tlink:hover { background: var(--card); text-decoration: none; }
.tlink.aktiv { background: var(--card-2); color: var(--text); }
.tlink span { color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .turnierliste { max-height: none; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 1.6rem; }
  .reihe { flex-direction: column; }
}

/* ---------- Startseite ---------- */
.start {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 18px; padding: 24px; position: relative; z-index: 1;
}

/* Tennisball unter dem Schriftzug (klickbar, dreht sich) */
@keyframes drehen { to { transform: rotate(360deg); } }
.ball-link { display: inline-block; line-height: 0; cursor: pointer; }
.tennisball { width: 130px; height: 130px; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.tennisball.spin { animation: drehen 2.6s linear infinite; }
.ball-link:hover .tennisball { filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)) brightness(1.05); }

/* kleine Tennisbaelle, die durch den Hintergrund fliegen */
.flugfeld { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

/* ---------- Landing-Page ---------- */
.hero-landing {
  position: relative; overflow: hidden; min-height: 58vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 34px 20px 20px;
}
.hero-inhalt { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 20px; max-width: 720px; }
.lead { font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--muted); margin: 0; line-height: 1.6; }
.slogan-box {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7, #f43f5e) border-box;
  background-size: 100% 100%, 200% 100%;
  border: 2px solid transparent; border-radius: var(--radius);
  padding: 22px 34px; text-align: center;
  animation: regenbogen 1.6s linear infinite, kasten-glow 1.8s ease-in-out infinite;
}
.slogan-box strong { display: block; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; line-height: 1.25; }

.cta-reihe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.btn-primary, .btn-secondary {
  display: inline-block; padding: 13px 22px; border-radius: 12px;
  font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .1s ease, filter .1s ease;
}
.btn-primary { color: #fff; background: linear-gradient(90deg, var(--accent), #60a5fa); border: 1px solid transparent; }
.btn-secondary { color: var(--text); background: var(--card); border: 1px solid var(--rand); }
.btn-primary:hover, .btn-secondary:hover { text-decoration: none; filter: brightness(1.05); transform: translateY(-1px); }

.sektion { max-width: 980px; margin: 0 auto; padding: 60px 20px; }
.sektion h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); text-align: center; margin: 0 0 8px; }
.untertitel { text-align: center; color: var(--muted); margin: 0 auto 28px; max-width: 620px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.feature {
  background: var(--card);
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px;
  transition: border-color .18s ease, transform .18s ease;
}
.feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.feature .fi { font-size: 1.7rem; }
.feature h3 { margin: 0 0 6px; font-size: 1.1rem; }
.feature p { margin: 0; color: var(--muted); font-size: .92rem; }

.cta-band { text-align: center; padding: 54px 20px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.cta-band h2 { font-size: clamp(1.3rem, 3.5vw, 1.9rem); margin: 0 0 18px; }
.footer { text-align: center; color: var(--muted); font-size: .82rem;
  padding: 30px 20px 50px; max-width: 760px; margin: 0 auto; }
.flugball { position: absolute; left: 0; top: 0; animation: fliegen linear infinite; }
.flugball.rueckwaerts { animation-name: fliegen-rueck; }
.flugball svg { width: 100%; height: auto; display: block; animation: drehen 3s linear infinite; }
@keyframes fliegen      { from { transform: translate(-12vw, 0); }  to { transform: translate(112vw, -5vh); } }
@keyframes fliegen-rueck { from { transform: translate(112vw, 0); } to { transform: translate(-12vw, 5vh); } }
.start-frage { font-size: clamp(1.9rem, 6vw, 3.4rem); font-weight: 800; margin: 0; line-height: 1.2; }
.start-klick { font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.start-klick:hover { text-decoration: none; }

/* ---------- Auswahl-Seiten (Tour / Turnier) ---------- */
/* Zurück-Link: nur ein buntes „‹" (Label ausgeblendet, kein Unterstrich) */
.zurueck { display: inline-block; font-size: 0; text-decoration: none; line-height: 1;
  margin-bottom: 6px; transition: transform .12s ease; }
.zurueck::before {
  content: "‹"; font-size: 2.1rem; font-weight: 900; line-height: 1;
  background: linear-gradient(90deg, #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: regenbogen 1.6s linear infinite;
}
.zurueck:hover { transform: scale(1.18); text-decoration: none; }
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 18px; }
.wahlkarte {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px; text-decoration: none; color: var(--text); font-weight: 700;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 2px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten);
  transition: transform .12s ease;
}
.wahlkarte:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7, #f43f5e) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: regenbogen 1.6s linear infinite, kasten-glow 1.8s ease-in-out infinite;
}
.wahlkarte.hervor { border-color: var(--accent); }
.wk-icon { font-size: 1.9rem; }
.wk-titel { font-size: 1.35rem; font-weight: 800; }
.wk-sub { font-size: .85rem; color: var(--muted); font-weight: 600; }
.wk-status { font-size: .8rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.wk-status .dot { color: var(--gruen); }
.wk-status.leer { color: var(--muted); }
.wk-status.leer .dot { color: #6b7280; }

/* Tour-Auswahl (fokussierter, zentrierter Screen) */
.tour-screen {
  min-height: calc(100vh - 66px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30px 18px 60px;
}
.tour-screen .untertitel { margin: 0 auto 30px; }
.wahl.gross { width: 100%; max-width: 640px; gap: 18px; }
.wahl.gross .wahlkarte { padding: 34px 22px; gap: 8px; }
.tk-symbol {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; border-radius: 50%; margin-bottom: 4px;
  background: rgba(59,130,246,.14); color: var(--accent); border: 1px solid var(--rand);
}
.wahlkarte.wta .tk-symbol { background: rgba(244,63,94,.14); color: var(--rot); }
.wk-belag { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(59,130,246,.14); padding: 2px 9px; border-radius: 999px; }
.wk-belag.unsicher { color: var(--gold); background: rgba(251,191,36,.14); }

/* ---------- Weltkarte mit Grand Slams ---------- */
.wk-titel-klein { text-align: center; color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.weltkarte { position: relative; max-width: 760px; margin: 0 auto 34px; }
.wk-map { width: 100%; height: auto; display: block; }
.wk-map path { fill: #dfe3ea; stroke: #c7cdd6; stroke-width: .5; }
.gs-marker { position: absolute; width: 0; height: 0; }
.gs-dot { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--rot); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(244,63,94,.3); animation: punktpuls 1.8s ease-in-out infinite; }
@keyframes punktpuls { 0%, 100% { box-shadow: 0 0 0 3px rgba(244,63,94,.3); } 50% { box-shadow: 0 0 0 9px rgba(244,63,94,0); } }
.gs-box {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap; font-size: .72rem; font-weight: 800; color: var(--text);
  padding: 5px 10px; border-radius: 10px; border: 2px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7, #f43f5e) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: regenbogen 1.6s linear infinite, kasten-glow 1.8s ease-in-out infinite;
}
.gs-marker.unten .gs-box { transform: translate(-50%, 16px); }
a.gs-marker { cursor: pointer; }
a.gs-marker .gs-box { text-decoration: none; }
.gs-box.inaktiv { opacity: .45; }

/* ===== WM 2026 ===== */
.wm-teams { display: flex; align-items: center; justify-content: center;
  gap: 14px; font-size: 1.12rem; font-weight: 700; margin: 6px 0 12px; text-align: center; }
.wm-teams .team.fav { color: var(--gruen); }
.wm-teams .wm-score { font-variant-numeric: tabular-nums; color: var(--text); }
.wm-teams .vs { color: var(--muted); font-weight: 400; font-size: .9rem; }
.wm-prog { display: flex; flex-direction: column; gap: 8px; }
.wm-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto;
  align-items: center; gap: 12px; font-size: .88rem; color: var(--text); }
.wm-row .bar { margin-top: 0; }
.wm-row .pct { font-weight: 700; min-width: 40px; text-align: right; }
.leer { color: var(--muted); text-align: center; margin: 40px 0; }

/* WM Quellen-Vergleich (Markt + bzzoiro unter dem Modell) */
.wm-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--card-2); }
.wm-quellen .qz { font-size: .82rem; color: var(--muted);
  background: var(--card-2); border-radius: 99px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.wm-quellen .qz b { color: var(--text); font-weight: 700; margin-right: 4px; }
.wm-quellen .qz-legende { font-size: .72rem; color: var(--muted); margin-left: auto; letter-spacing: .04em; }

/* WM Detail-Dashboard */
.wm-detail { display:inline-block; margin-top:11px; font-size:.86rem; font-weight:700;
  color: var(--gruen); text-decoration:none; }
.wm-detail:hover { text-decoration:none; transform: scale(1.07); }
/* WM-Detail-Dashboard: stabile, zentrierte Einzelspalte (kein column-count-
   Masonry mehr -> keine springenden Karten, kein Safari-Repaint-Bug beim
   Scrollen, der das Scoreboard verschwinden liess). */
.wm-dash { display: flex; flex-direction: column; gap: 14px;
  max-width: 860px; margin: 18px auto 0; }
.wm-dash > .karte { margin: 0; }
.wm-dash .dash-titel { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--muted); font-weight:700; margin-bottom:12px; }
.lu-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.lu-kopf { font-weight:700; margin-bottom:7px; }
.lu-form { color: var(--muted); font-weight:400; font-size:.82rem; margin-left:5px; }
.lu-liste { list-style:none; margin:0; padding:0; }
.lu-liste li { font-size:.88rem; padding:3px 0; border-bottom:1px solid var(--card-2); }
.lu-nr { display:inline-block; min-width:22px; color: var(--muted); font-variant-numeric:tabular-nums; }
.lu-pos { color: var(--muted); font-size:.74rem; float:right; }
.lu-fehlt { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.lu-fehlt .qz { background: var(--card-2); border-radius:99px; padding:3px 9px; font-size:.8rem; }
.lu-fehlt em { color:#f87171; font-style:normal; }
.h2h-bilanz { display:flex; justify-content:space-around; text-align:center; margin-bottom:12px; }
.h2h-bilanz b { font-size:1.5rem; color: var(--text); }
.h2h-bilanz span { font-size:.8rem; color: var(--muted); }
.h2h-liste { list-style:none; margin:0; padding:0; }
.h2h-liste li { font-size:.86rem; padding:4px 0; border-top:1px solid var(--card-2); color: var(--muted); }
.h2h-liste b { color: var(--text); }
.fakten div { padding:6px 0; border-bottom:1px solid var(--card-2); font-size:.9rem; }
.fakten div:last-child { border-bottom:0; }
.fk-l { display:inline-block; min-width:130px; color: var(--muted); font-size:.82rem; }
.hl-liste { list-style:none; margin:0; padding:0; }
.hl-liste li { padding:4px 0; }
.hl-liste a { color: var(--gruen); }
@media (max-width:560px){ .lu-grid { grid-template-columns:1fr; } }

/* Modell-Bilanz (Rückschau) */
.bilanz-kopf { display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 22px; }
.bk-kachel { flex:1; min-width:150px; background:var(--card); border:1px solid var(--card-2);
  border-radius:14px; padding:16px 18px; text-align:center; }
.bk-zahl { font-size:2.1rem; font-weight:800; line-height:1; }
.bk-label { margin-top:8px; font-size:.82rem; color:var(--text); font-weight:700; }
.bk-label span { color:var(--muted); font-weight:400; }
.bilanz-liste { display:flex; flex-direction:column; gap:8px; }
.bz-zeile { display:grid; grid-template-columns:130px 1fr 170px 96px; gap:12px; align-items:center;
  background:var(--card); border:1px solid var(--card-2); border-left:3px solid var(--card-2);
  border-radius:11px; padding:10px 14px; }
.bz-zeile.ok { border-left-color:var(--gruen); }
.bz-zeile.no { border-left-color:#f87171; }
.bz-meta { font-size:.78rem; color:var(--muted); }
.bz-spiel { font-size:.95rem; }
.bz-spiel b { margin:0 9px; font-variant-numeric:tabular-nums; }
.bz-spiel .sieger { color:var(--gruen); font-weight:700; }
.bz-tipp { font-size:.85rem; color:var(--muted); }
.bz-tipp b { color:var(--text); }
.bz-p { color:var(--muted); }
.bz-chip { text-align:right; font-weight:700; font-size:.85rem; }
.bz-zeile.ok .bz-chip { color:var(--gruen); }
.bz-zeile.no .bz-chip { color:#f87171; }
@media (max-width:620px){ .bz-zeile { grid-template-columns:1fr auto; row-gap:4px; }
  .bz-meta { grid-column:1/3; } .bz-chip { grid-row:2; } }

/* Bilanz: Tour-Schalter + Buchmacher-Hinweis */
.tour-schalter { display:inline-flex; gap:4px; margin-top:10px; background:var(--card-2);
  border-radius:99px; padding:4px; }
.tour-schalter a { padding:5px 16px; border-radius:99px; font-weight:700; font-size:.85rem;
  color:var(--muted); text-decoration:none; }
.tour-schalter a.aktiv { background:var(--card); color:var(--text); }
.bz-mk { display:block; font-size:.72rem; color:var(--muted); margin-top:2px; }

/* Live- vs Backtest-Abzeichen in der Bilanz */
.badge-art { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px;
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; }
.badge-art.live { background:rgba(52,211,153,.16); color:var(--gruen); }
.badge-art.back { background:var(--card-2); color:var(--muted); }

/* WM wahrscheinlichste Ergebnisse */
.wm-ergebnisse { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px; }
.wm-ergebnisse .we-label { font-size:.78rem; color:var(--muted); margin-right:2px; }
.we-chip { font-size:.84rem; background:var(--card-2); border-radius:99px; padding:3px 10px; font-variant-numeric:tabular-nums; }
.we-chip b { color:var(--text); }
.we-liste { display:flex; flex-direction:column; gap:8px; }
.we-zeile { display:grid; grid-template-columns:minmax(120px,1.4fr) 2fr auto; align-items:center; gap:12px; font-size:.9rem; }
.we-zeile .we-score b { margin:0 6px; font-variant-numeric:tabular-nums; }
.we-zeile .bar { margin-top:0; }

/* Bilanz: nicht gewertete Aufgaben/Walkover */
.bz-zeile.neutral { border-left-color: var(--muted); opacity: .72; }
.bz-zeile.neutral .bz-chip { color: var(--muted); font-weight: 600; }

/* Live-Siegchance (Dashboard) */
.liveprog { display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:10px;
  padding:9px 14px; background:var(--card); border:1px solid var(--gruen); border-radius:12px; }
.liveprog .lp-titel { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gruen); font-weight:700; }
.liveprog .lp-werte { font-size:.95rem; }
.liveprog .lp-werte b { color:var(--text); font-variant-numeric:tabular-nums; }

/* --- Live-Wahrscheinlichkeits-EKG --- */
.ekg-wrap { background:#0d1526; border-radius:12px; padding:8px 6px 4px; margin-top:4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.ekg-svg { display:block; width:100%; height:auto; }
.ekg-svg #ekg-line { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent)); }
.ekg-fuss { display:flex; justify-content:space-between; align-items:center; margin-top:8px;
  font-size:.85rem; color:var(--muted); }
.ekg-fuss b { color:var(--text); font-variant-numeric:tabular-nums; font-size:1rem; }
.ekg-hebel b { color:var(--accent); }

/* --- Match-DNA (Satz-Verlauf) --- */
.dna-strang { display:flex; gap:6px; }
.dna-seg { flex:1; min-width:0; border-radius:10px; padding:9px 4px; text-align:center;
  border:1px solid var(--rand); background:var(--bg-2); }
.dna-seg .dna-nr { display:block; font-size:.64rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; }
.dna-seg .dna-sc { display:block; font-size:1.02rem; font-weight:800; font-variant-numeric:tabular-nums;
  margin-top:2px; color:var(--text); }
.dna-p1 { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.dna-p2 { border-color:rgba(56,189,248,.55); background:rgba(56,189,248,.12); }
.dna-live { border-style:dashed; }

/* --- Spieler-Fingerabdruck (Radar) --- */
.radar-svg { display:block; width:100%; max-width:300px; height:auto; margin:0 auto; }
.radar-lbl { fill:var(--muted); font-size:11px; font-weight:700; }
.radar-leg { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px;
  font-size:.82rem; color:var(--muted); font-weight:600; }
.radar-key { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; vertical-align:-1px; }

/* --- Value-Glühfaden --- */
.val-zeile { display:flex; align-items:center; gap:10px; margin:8px 0; }
.val-name { flex:0 0 84px; font-size:.85rem; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.val-bar { position:relative; flex:1; height:14px; border-radius:7px; background:var(--bg-2); }
.val-fill { position:absolute; left:0; top:0; height:100%; border-radius:7px;
  background:color-mix(in srgb, var(--muted) 45%, transparent); }
.val-fill.val-glow { background:var(--gruen);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gruen) 80%, transparent); }
.val-markt { position:absolute; top:-2px; width:2px; height:18px; background:var(--text);
  transform:translateX(-1px); border-radius:1px; }
.val-edge { flex:0 0 52px; text-align:right; font-size:.85rem; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--muted); }
.val-edge.val-pos { color:var(--gruen); }

/* Klickbare Bilanz-Zeilen (zur Detailseite) */
a.bz-zeile.klickbar { text-decoration: none; color: inherit; transition: background .12s, transform .12s; }
a.bz-zeile.klickbar:hover { background: var(--card-2); transform: translateX(2px); }
.bz-pfeil { color: var(--muted); margin-left: 6px; font-weight: 700; }

/* Obere Leiste: nur "odds" (brand-odds) leuchtet — alle anderen Nav-Wörter einfach blau */
.nav .rainbow-text {
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  background: none;
  animation: none;
}
.nav .rainbow-text { display: inline-block; transition: transform .12s ease, color .12s ease; }
.nav .rainbow-text:hover { text-decoration: none; transform: scale(1.06); color: var(--accent);
  -webkit-text-fill-color: var(--accent); }

/* WM "Modell tippt: ..."-Zeile */
.wm-tipp { margin: 2px 0 10px; font-size: .92rem; color: var(--muted); }
.wm-tipp b { color: var(--text); }

/* ===== Bet Builder ===== */
.hinweis-ehrlich { font-size: .82rem; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--rand); border-radius: 10px; padding: 8px 11px; margin-top: 10px; }
.hinweis-ehrlich a { color: var(--gruen); font-weight: 700; }
.chip.einzel { color: var(--gruen); background: rgba(5,150,105,.10); border: 1px solid rgba(5,150,105,.3); }
.chip.kombi  { color: var(--gold);  background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.3); }
.bb-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.bb-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .bb-top, .bb-liste { grid-template-columns: 1fr; } }
.bb-sektion { font-size: 1rem; color: var(--text); margin: 22px 0 4px; }
.bb-karte { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); min-width: 0; }
.bb-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; }
.bb-titel { font-weight: 800; }
.bb-bein { border: 1px solid var(--rand); border-radius: 10px; padding: 9px 11px; margin: 7px 0;
  background: var(--card-2); }
.bb-bein-kopf { display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; }
.bb-sport { font-weight: 700; }
.bb-tennis  { color: #0e7490; }
.bb-fussball{ color: #15803d; }
.bb-zeit { color: var(--muted); }
.bb-spiel { font-weight: 700; margin: 2px 0; }
.bb-pick { font-size: .95rem; margin-bottom: 5px; }
.bb-markt { color: var(--muted); font-size: .82rem; }
.bb-werte { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.bb-werte b { color: var(--text); }
.bb-quote { margin-left: auto; color: var(--gruen) !important; font-weight: 800; }
.bb-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand);
  font-size: .85rem; flex-wrap: wrap; }
.bb-gesamt b { color: var(--gruen); font-size: 1.05rem; }
.bb-edge { color: var(--muted); }

/* ===== Bet Builder: Filter ===== */
.bb-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px; margin: 4px 0 18px; }
.bb-filter-feld { display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 150px; min-width: 130px; }
.bb-filter-feld label { font-size: .75rem; color: var(--muted); font-weight: 600; }
.bb-filter-feld select, .bb-filter-feld input {
  background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px;
  padding: 8px 10px; color: var(--text); font-size: .9rem; width: 100%;
  height: 38px; box-sizing: border-box; }
.bb-filter-knoepfe { flex: 1 1 100%; flex-direction: row; gap: 10px;
  align-items: stretch; justify-content: flex-start; }
.bb-filter-knoepfe .btn-primary, .bb-filter-knoepfe .btn-secondary {
  flex: 0 0 auto; min-width: 150px; height: 40px; padding: 0 18px; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  white-space: nowrap; }

/* ===== Bet Builder: Mix-Chip + Details ===== */
.chip.mix { color: #7c3aed; background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.3); }
.bb-details { margin-top: 10px; }
.bb-details summary { cursor: pointer; font-size: .85rem; color: var(--gruen); font-weight: 700;
  list-style: none; }
.bb-details summary::-webkit-details-marker { display: none; }
.bb-details summary::before { content: "▸ "; }
.bb-details[open] summary::before { content: "▾ "; }
.bb-details-inhalt { margin-top: 8px; border-top: 1px solid var(--rand); padding-top: 8px; }
.bb-detail-bein { padding: 6px 0; border-bottom: 1px dashed var(--rand); }
.bb-detail-zeile { font-size: .82rem; color: var(--muted); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.bb-detail-zeile b { color: var(--text); }
.bb-detail-link { font-size: .82rem; color: var(--gruen); font-weight: 700; }
.bb-detail-summe { margin-top: 8px; font-size: .85rem; }
.bb-detail-summe b { color: var(--gruen); }

/* ===== Fußball-Rechner ===== */
.rk-form { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 16px; margin: 4px 0 18px; }
.rk-teams { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.rk-teams .bb-filter-feld { flex: 1 1 200px; }
.rk-vs { color: var(--muted); font-weight: 700; padding-bottom: 9px; }
.rk-neutral { padding-bottom: 8px; }
.rk-maerkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;
  align-items: start; }
.rk-gruppe { background: var(--card-2); border: 1px solid var(--rand); border-radius: 12px;
  transition: box-shadow .12s ease, border-color .12s ease; }
.rk-gruppe:hover { border-color: #c9ced6; }
.rk-gruppe[open] { background: var(--card); border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(37,99,235,.10); }
.rk-gruppe > summary { cursor: pointer; list-style: none; padding: 11px 13px;
  font-weight: 700; font-size: .88rem; color: var(--text); display: flex; align-items: center;
  gap: 6px; border-radius: 12px; }
.rk-gruppe > summary::-webkit-details-marker { display: none; }
.rk-gruppe > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: .8rem;
  transition: transform .15s ease; }
.rk-gruppe[open] > summary { color: var(--accent); }
.rk-gruppe[open] > summary::after { transform: rotate(180deg); color: var(--accent); }
.rk-gruppe > summary:hover { color: var(--accent); }
.rk-gruppe-inhalt { padding: 2px 13px 11px; border-top: 1px solid var(--rand); margin-top: -1px; }
.rk-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; padding: 3px 0; cursor: pointer; }
.rk-check input { width: 16px; height: 16px; accent-color: var(--gruen); }
.rk-knoepfe { display: flex; gap: 10px; margin-top: 16px; }
.rk-knoepfe .btn-primary, .rk-knoepfe .btn-secondary { padding: 9px 20px; }
.rk-ergebnis { background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 16px; }
.rk-kopf { border-bottom: 1px solid var(--rand); padding-bottom: 10px; margin-bottom: 12px; }
.rk-kopf h2 { margin: 0 0 4px; }
.rk-neutral-tag { font-size: .7rem; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--rand); border-radius: 99px; padding: 2px 8px; vertical-align: middle; }
.rk-erw { color: var(--muted); font-size: .88rem; }
.rk-beine { display: flex; flex-direction: column; gap: 8px; }
.rk-bein { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; background: var(--card-2); border: 1px solid var(--rand); border-radius: 10px;
  font-variant-numeric: tabular-nums; }
.rk-kat { color: var(--muted); font-size: .78rem; }
.rk-label { font-weight: 600; }
.rk-p { font-weight: 800; color: var(--gruen); text-align: right; }
.rk-q { color: var(--muted); font-size: .82rem; text-align: right; min-width: 78px; }
.rk-fehlt { color: var(--muted); font-weight: 600; }
.rk-kombi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--rand); }
.rk-kombi-p { font-size: 1.4rem; color: var(--gruen); }
.rk-kombi-q { color: var(--muted); }
@media (max-width: 560px) {
  .rk-bein { grid-template-columns: 1fr auto; }
  .rk-kat { grid-column: 1 / -1; }
}

.rk-q small { color: var(--muted); font-weight: 400; }
.rk-hinweis { font-size: .8rem; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--rand); border-radius: 10px; padding: 9px 11px; margin-top: 12px; }
.rk-hinweis b { color: var(--text); }

/* ===== Responsives Navigationsmenü (Hamburger) ===== */
.nav-burger { display: none; width: auto; background: none; border: none; padding: 2px 4px;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text); }
.nav-menu { display: flex; gap: 9px 17px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; font-size: .92rem; }
.nav-menu a { font-weight: 600; white-space: nowrap; }
.nav-menu .nav-konto { white-space: nowrap; margin-left: 6px; padding-left: 14px;
  border-left: 1px solid var(--rand); }
/* Hover in der Navigation: kein Unterstrich, nur leicht groesser */
.nav-menu a, .nav-links a { display: inline-block; transition: transform .12s ease; }
.nav-menu a:hover, .nav-links a:hover { text-decoration: none; transform: scale(1.09); }
@media (max-width: 760px) {
  .nav { flex-wrap: nowrap; position: relative; }
  .nav-burger { display: block; margin-left: auto; }   /* rechts ausrichten */
  /* kompaktes Dropdown rechts unter dem ☰-Button, nicht ueber die ganze Breite */
  .nav-menu { display: none; position: absolute; top: calc(100% + 6px); right: 14px;
    flex-direction: column; align-items: flex-start; gap: 14px; width: auto; min-width: 170px;
    background: var(--card); border: 1px solid var(--rand); border-radius: 12px;
    padding: 14px 18px; box-shadow: var(--schatten); z-index: 30; }
  .nav-menu.offen { display: flex; }
}

/* ===== Fußball-Hub (Übersichtskacheln) ===== */
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.hub-karte { display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--schatten); color: var(--text);
  transition: transform .1s ease, box-shadow .1s ease; }
.hub-karte:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(17,24,39,.12); }
.hub-icon { font-size: 2rem; }
.hub-karte h2 { margin: 2px 0; font-size: 1.25rem; }
.hub-karte p { margin: 0; color: var(--muted); font-size: .9rem; }
.hub-pfeil { margin-top: 8px; color: var(--gruen); font-weight: 800; font-size: .9rem; }

/* ===== CTA-Emojis ("Neugierig auf die heutigen Odds?") ===== */
.cta-emojis { display: flex; gap: 26px; justify-content: center; margin-top: 6px; }
.cta-emoji { font-size: 3rem; line-height: 1; text-decoration: none;
  filter: drop-shadow(0 2px 6px rgba(17,24,39,.18));
  transition: transform .12s ease, filter .12s ease; cursor: pointer; }
.cta-emoji:hover { text-decoration: none; transform: translateY(-3px) scale(1.12);
  filter: drop-shadow(0 6px 14px rgba(17,24,39,.28)); }

/* ===== Info-Seite ===== */
.info-block { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 16px 20px; margin-top: 14px; box-shadow: var(--schatten); }
.info-block h2 { margin: 0 0 8px; font-size: 1.2rem; }
.info-block p { margin: 0; color: var(--text); }
.info-liste { margin: 0; padding-left: 20px; }
.info-liste li { margin: 6px 0; color: var(--text); }
.info-liste b { color: var(--text); }

/* ===== Fußball-Rechner: Letzte 5 Spiele ===== */
.rk-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .rk-formgrid { grid-template-columns: 1fr; } }
.rk-formspalte { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--schatten); }
.rk-formspalte h3 { margin: 0 0 10px; font-size: 1.05rem; }
.rk-formtab { width: 100%; border-collapse: collapse; font-size: .85rem;
  font-variant-numeric: tabular-nums; }
.rk-formtab th { text-align: left; color: var(--muted); font-weight: 600; font-size: .72rem;
  padding: 4px 6px; border-bottom: 1px solid var(--rand); }
.rk-formtab td { padding: 6px 6px; border-bottom: 1px solid var(--rand); }
.rk-formtab th:nth-child(n+4), .rk-formtab td:nth-child(n+4) { text-align: center; }
.rk-ha { display: inline-block; width: 16px; font-size: .7rem; font-weight: 800; color: var(--muted); }
.rk-erg { font-weight: 800; padding: 1px 7px; border-radius: 6px; }
.rk-S { color: var(--gruen); background: rgba(5,150,105,.12); }
.rk-U { color: var(--gold);  background: rgba(217,119,6,.12); }
.rk-N { color: var(--rot);   background: rgba(225,29,72,.12); }
.rk-formleer { color: var(--muted); font-size: .85rem; }

/* ===== Fußball-Rechner: Kombi-Vorschläge ===== */
.rk-vorschlaege { margin-bottom: 20px; }
.rk-vor-intro { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.rk-vor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rk-vor-karte { display: block; text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--rand);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--schatten);
  transition: transform .1s ease, box-shadow .1s ease; }
.rk-vor-karte:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17,24,39,.12); }
.rk-vor-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rk-vor-spiel { font-weight: 800; font-size: .95rem; }
.rk-vor-zeit { color: var(--muted); font-size: .76rem; margin-bottom: 6px; }
.rk-vor-beine { list-style: none; margin: 0 0 8px; padding: 0; font-size: .85rem; }
.rk-vor-beine li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0;
  border-bottom: 1px dashed var(--rand); }
.rk-vor-beine li span { color: var(--gruen); font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-vor-fuss { display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--rand); font-size: .9rem; }
.rk-vor-quote { color: var(--gruen); font-weight: 800; font-size: 1.05rem; }

/* ===== Fußball-Rechner: Beleg ===== */
.rk-beleg { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 16px; margin-top: 16px; box-shadow: var(--schatten); }
.rk-beleg-eingabe { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rk-beleg-eingabe label { display: flex; flex-direction: column; gap: 4px;
  font-size: .8rem; color: var(--muted); font-weight: 600; }
.rk-beleg-eingabe input, .rk-beleg-eingabe select {
  background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px;
  padding: 8px 10px; color: var(--text); font-size: .95rem; height: 38px; box-sizing: border-box; }
.rk-beleg-eingabe input { width: 120px; }
.rk-beleg-summe { margin: 12px 0; padding: 10px 12px; background: var(--card-2);
  border: 1px solid var(--rand); border-radius: 10px; font-size: .92rem;
  font-variant-numeric: tabular-nums; }
.rk-beleg-summe b { color: var(--gruen); }
.rk-beleg-text { width: 100%; box-sizing: border-box; background: var(--bg-2);
  border: 1px solid var(--rand); border-radius: 10px; padding: 12px; color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem; resize: vertical;
  margin-bottom: 10px; }
.rk-beleg .btn-primary { padding: 9px 18px; }

/* ===== Vorschläge: bunt umleuchteter Kasten (Regenbogen-Rand + Glow) ===== */
.glow-kasten {
  border: 2px solid transparent !important;
  background:
    linear-gradient(180deg, var(--card-2), var(--card)) padding-box,
    linear-gradient(90deg, #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7, #f43f5e) border-box !important;
  background-size: 100% 100%, 200% 100% !important;
  animation: regenbogen 1.6s linear infinite, kasten-glow 1.8s ease-in-out infinite;
}
.glow-kasten:hover { transform: translateY(-2px); }
.rk-spielvorschlag { margin-top: 16px; }
.rk-spielvorschlag .rk-vor-karte { display: block; }

/* ===== Rechner: aufklappbare Kästen ===== */
.rk-aufklapp { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  margin-top: 16px; box-shadow: var(--schatten); }
.rk-aufklapp > summary { cursor: pointer; list-style: none; padding: 13px 16px;
  font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; gap: 8px;
  border-radius: 14px; }
.rk-aufklapp > summary::-webkit-details-marker { display: none; }
.rk-aufklapp > summary::after { content: "▾"; margin-left: auto; color: var(--muted);
  font-size: .9rem; transition: transform .15s ease; }
.rk-aufklapp[open] > summary::after { transform: rotate(180deg); }
.rk-aufklapp > summary:hover { color: var(--accent); }
.rk-aufklapp-inhalt { padding: 2px 16px 16px; }
.rk-aufklapp .rk-formspalte { box-shadow: none; }
/* kompaktere Vorschlagskarten */
.rk-vor-karte { padding: 11px 13px; }
.rk-vor-beine { font-size: .82rem; }
.rk-vor-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ===== Beleg: Value-Check + Knöpfe ===== */
.rk-value { margin: 10px 0; padding: 9px 12px; border-radius: 10px; background: var(--card-2);
  border: 1px solid var(--rand); font-size: .92rem; }
.rk-value b { color: var(--text); }
.rk-v-ja { color: var(--gruen); font-weight: 800; }
.rk-v-nein { color: var(--rot); font-weight: 800; }
.rk-beleg-knoepfe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rk-login-hinweis { color: var(--muted); font-size: .85rem; }

/* ===== Wett-Tagebuch ===== */
.tb-bilanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;
  margin: 6px 0 20px; }
.tb-kennzahl { background: var(--card); border: 1px solid var(--rand); border-radius: 12px;
  padding: 14px; text-align: center; box-shadow: var(--schatten); }
.tb-zahl { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-label { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.tb-gut { color: var(--gruen); }
.tb-schlecht { color: var(--rot); }
.tb-liste { display: flex; flex-direction: column; gap: 12px; }
.tb-karte { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--schatten); }
.tb-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tb-spiel { font-weight: 800; }
.tb-status { font-size: .82rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tb-gewonnen { color: var(--gruen); background: rgba(5,150,105,.12); }
.tb-verloren { color: var(--rot); background: rgba(225,29,72,.12); }
.tb-offen { color: var(--muted); background: var(--bg-2); }
.tb-unbekannt { color: var(--gold); background: rgba(217,119,6,.12); }
.tb-zeit { color: var(--muted); font-size: .78rem; margin: 2px 0 8px; }
.tb-beine { list-style: none; margin: 0 0 8px; padding: 0; font-size: .88rem; }
.tb-beine li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0;
  border-bottom: 1px dashed var(--rand); }
.tb-beine li span { color: var(--muted); font-variant-numeric: tabular-nums; }
.tb-fuss { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 10px;
  border-top: 1px solid var(--rand); font-size: .9rem; font-variant-numeric: tabular-nums; }
.tb-loeschen { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
.tb-loeschen:hover { opacity: 1; }

.rk-value-hinweis { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
.rk-value-hinweis b { color: var(--text); }

/* ===== Bet Builder: Beleg / Tagebuch ===== */
.bb-beleg { padding-top: 6px; }
.bb-beleg-eingabe { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.bb-beleg-eingabe label { display: flex; flex-direction: column; gap: 3px; font-size: .75rem;
  color: var(--muted); font-weight: 600; }
.bb-beleg-eingabe input, .bb-beleg-eingabe select { background: var(--bg-2);
  border: 1px solid var(--rand); border-radius: 8px; padding: 6px 8px; color: var(--text);
  font-size: .9rem; height: 34px; box-sizing: border-box; }
.bb-beleg-eingabe input { width: 90px; }
.bb-belegtext { width: 100%; box-sizing: border-box; margin-top: 8px; background: var(--bg-2);
  border: 1px solid var(--rand); border-radius: 8px; padding: 8px; color: var(--text);
  font-family: ui-monospace, Menlo, monospace; font-size: .78rem; resize: vertical; }
.bb-beleg-knoepfe { display: flex; gap: 8px; margin-top: 8px; }
.bb-beleg-knoepfe .btn-primary, .bb-beleg-knoepfe .btn-secondary { padding: 7px 14px; font-size: .85rem; }

/* ===== Tagebuch: Guthaben + Datum-Filter ===== */
.tb-guthaben { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; background: var(--card); border: 1px solid var(--rand);
  border-radius: 14px; padding: 16px 18px; margin: 6px 0 14px; box-shadow: var(--schatten); }
.tb-gh-zahl { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-gh-label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.tb-gh-label span { color: var(--muted); font-weight: 400; }
.tb-kapital-form { display: flex; gap: 10px; align-items: flex-end; }
.tb-kapital-form label { display: flex; flex-direction: column; gap: 3px; font-size: .75rem;
  color: var(--muted); font-weight: 600; }
.tb-kapital-form input { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px;
  padding: 8px 10px; color: var(--text); font-size: .95rem; width: 130px; height: 38px; box-sizing: border-box; }
.tb-kapital-form .btn-secondary { padding: 8px 14px; height: 38px; }
.tb-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 12px 16px;
  margin-bottom: 16px; }
.tb-filter label { display: flex; flex-direction: column; gap: 3px; font-size: .75rem;
  color: var(--muted); font-weight: 600; }
.tb-filter input, .tb-filter select { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px;
  padding: 8px 10px; color: var(--text); font-size: .9rem; height: 38px; box-sizing: border-box; }
.tb-filter .btn-primary, .tb-filter .btn-secondary { padding: 8px 16px; height: 38px;
  display: inline-flex; align-items: center; }

/* ===== Kombi-Rechner ===== */
.ko-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 800px) { .ko-layout { grid-template-columns: 1fr; } }
.ko-spiele { display: flex; flex-direction: column; gap: 8px; }
.ko-spiel { background: var(--card); border: 1px solid var(--rand); border-radius: 12px; }
.ko-spiel > summary { cursor: pointer; list-style: none; padding: 11px 14px; display: flex;
  align-items: center; font-weight: 700; font-size: .92rem; }
.ko-spiel > summary::-webkit-details-marker { display: none; }
.ko-spiel > summary::after { content: "▾"; margin-left: 8px; color: var(--muted); font-size: .8rem; }
.ko-spiel[open] > summary::after { content: "▴"; }
.ko-spiel-name { flex: 1; min-width: 0; }
.ko-spiel > summary .badge-live, .ko-spiel > summary .ko-zeit { margin-left: 10px; }
.ko-zeit { color: var(--muted); font-size: .78rem; font-weight: 400; }
.ko-opts { padding: 4px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
@media (max-width: 520px) { .ko-opts { grid-template-columns: 1fr; } }
.ko-opt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .85rem;
  cursor: pointer; border-bottom: 1px dashed var(--rand); }
.ko-opt input { width: 16px; height: 16px; accent-color: var(--gruen); flex-shrink: 0; }
.ko-opt-name { flex: 1; }
.ko-markt { color: var(--muted); font-size: .74rem; }
.ko-q { font-weight: 800; color: var(--gruen); font-variant-numeric: tabular-nums; }
.ko-slip { position: sticky; top: 78px; background: var(--card); border: 1px solid var(--rand);
  border-radius: 14px; padding: 16px; box-shadow: var(--schatten); }
.ko-slip h3 { margin: 0 0 10px; }
.ko-legs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ko-leg { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem;
  padding: 5px 8px; background: var(--card-2); border: 1px solid var(--rand); border-radius: 8px;
  font-variant-numeric: tabular-nums; }
.ko-leer { color: var(--muted); font-size: .85rem; }
.ko-summe { font-size: .88rem; margin-bottom: 10px; }
.ko-summe b { color: var(--gruen); }
.ko-eingabe { display: flex; flex-wrap: wrap; gap: 8px; }
.ko-eingabe label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem;
  color: var(--muted); font-weight: 600; }
.ko-eingabe input, .ko-eingabe select { background: var(--bg-2); border: 1px solid var(--rand);
  border-radius: 8px; padding: 6px 8px; color: var(--text); font-size: .9rem; height: 34px;
  box-sizing: border-box; width: 88px; }
.ko-knoepfe { display: flex; gap: 8px; margin-top: 8px; }
.ko-knoepfe .btn-primary, .ko-knoepfe .btn-secondary { padding: 8px 14px; font-size: .85rem; }

/* ===== Kombi: Turnier-Ebene ===== */
.ko-turnier { border: 1px solid var(--rand); border-radius: 12px; background: var(--card-2);
  overflow: hidden; }
.ko-turnier > summary.ko-turnier-kopf { cursor: pointer; list-style: none; padding: 12px 14px;
  font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.ko-turnier > summary::-webkit-details-marker { display: none; }
.ko-turnier > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.ko-turnier[open] > summary::after { content: "▴"; }
.ko-anz { font-size: .75rem; color: var(--muted); font-weight: 600; }
.ko-turnier-inhalt { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.ko-turnier .ko-spiel { background: var(--card); }

/* ===== Tennis-Rechner (Match-Browser) ===== */
.tr-turniere { display: flex; flex-direction: column; gap: 10px; }
.tr-match { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px;
  transition: border-color .1s ease, transform .1s ease; }
.tr-match:hover { text-decoration: none; border-color: var(--accent); transform: translateX(2px); }
.tr-tour { font-weight: 800; font-size: .7rem; color: var(--accent); background: rgba(37,99,235,.12);
  padding: 2px 6px; border-radius: 5px; }
.tr-namen { flex: 1; font-weight: 700; font-size: .92rem; }
.tr-vs { color: var(--muted); font-weight: 400; }
.tr-zeit { color: var(--muted); font-size: .8rem; }
.tr-pfeil { color: var(--gruen); font-weight: 800; }

/* ===== Coins-Wetten ===== */
.cn-header { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: linear-gradient(120deg, #1f2937, #374151); color: #fff; border-radius: 16px;
  padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--schatten); }
.cn-guthaben { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cn-guthaben span { font-size: 1rem; font-weight: 600; opacity: .8; }
.cn-user { font-size: .8rem; opacity: .75; margin-top: 2px; }
.cn-bl-link { color: #fcd34d; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cn-bonus { background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.35); color: var(--gold);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: .92rem; }
.cn-bonus-warten { background: var(--bg-2); border-color: var(--rand); color: var(--muted); }
.cn-bonus-warten b { color: var(--text); font-variant-numeric: tabular-nums; }
.cn-stat { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; color: var(--muted);
  font-size: .88rem; }
.cn-stat b { color: var(--text); }
.cn-slip { border-top: 3px solid var(--gold); }
.cn-quote { font-size: .95rem; margin: 6px 0 10px; }
.cn-quote b { color: var(--gruen); }
.cn-einsatz-lbl { display: flex; flex-direction: column; gap: 4px; font-size: .78rem;
  color: var(--muted); font-weight: 600; }
.cn-einsatz-lbl input { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px;
  padding: 9px 11px; color: var(--text); font-size: 1.05rem; font-weight: 700; height: 40px;
  box-sizing: border-box; }
.cn-gewinn { margin: 10px 0; font-size: .95rem; }
.cn-gewinn b { color: var(--gruen); font-size: 1.1rem; }
.cn-platzieren { width: 100%; padding: 12px; font-size: 1rem; }
.cn-max { font-size: .78rem; color: var(--muted); margin-top: 8px; text-align: center; }
.cn-bl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cn-bl th { text-align: left; color: var(--muted); font-size: .74rem; font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--rand); }
.cn-bl td { padding: 8px; border-bottom: 1px solid var(--rand); font-variant-numeric: tabular-nums; }
.cn-bl tr.cn-ich { background: rgba(5,150,105,.08); }

/* ===== Dark Mode ===== */
html[data-theme="dark"] {
  --bg:     #0f172a;
  --bg-2:   #273449;
  --card:   #1e293b;
  --card-2: #253244;
  --rand:   #334155;
  --text:   #e5e7eb;
  --muted:  #94a3b8;
  --accent: #3b82f6;
  --gruen:  #34d399;
  --gold:   #fbbf24;
  --rot:    #fb7185;
  --schatten: 0 4px 20px rgba(0,0,0,.35);
}
html[data-theme="dark"] body {
  background: radial-gradient(1200px 600px at 50% -10%, #16233b 0%, var(--bg) 60%);
}
html[data-theme="dark"] .nav {
  background: rgba(15,23,42,.85);
}
html[data-theme="dark"] .match { background: linear-gradient(180deg, var(--card-2), var(--card)); }
html[data-theme="dark"] .odds, html[data-theme="dark"] .surface { background: var(--bg-2); }
html[data-theme="dark"] .rk-gruppe[open] { background: var(--card); }
html[data-theme="dark"] .cn-bl tr.cn-ich { background: rgba(52,211,153,.12); }
/* Umschalt-Button (schwebt unten rechts) */
.theme-toggle {
  position: fixed; bottom: 18px; right: 18px; z-index: 200;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rand); background: var(--card); color: var(--text);
  font-size: 1.25rem; box-shadow: var(--schatten);
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease; }
.theme-toggle:hover { transform: scale(1.08); }

/* ===== Startseite: Spaßwette-Box (bunt eingekastet) ===== */
.start-spass { display: flex; align-items: center; gap: 14px; text-decoration: none;
  color: var(--text); border-radius: 16px; padding: 16px 20px; max-width: 520px; width: 100%;
  box-sizing: border-box; margin: 4px auto 0; }
.start-spass:hover { text-decoration: none; transform: translateY(-2px); }
.start-spass-icon { font-size: 2.1rem;
  filter: sepia(1) saturate(6) hue-rotate(2deg) brightness(1.12) drop-shadow(0 1px 2px rgba(180,120,0,.4)); }
.start-spass-text { display: flex; flex-direction: column; text-align: left; line-height: 1.35; }
.start-spass-text b { font-size: 1.15rem; }
.start-spass-text span { font-size: .85rem; color: var(--muted); }
.start-spass-pfeil { margin-left: auto; font-size: 1.4rem; color: var(--gruen); font-weight: 800; }

/* ===== Auswahl-Labels: überall gleich groß + einzeilig ===== */
.ko-opt { font-size: .85rem; }
.ko-opt-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .85rem; }
.ko-markt { font-size: .85rem; }
.bb-pick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Hover überall: Schrift leicht größer, kein Unterstrich ===== */
.detail-link, .wm-detail, .bb-detail-link, .wahlkarte, .tlink, .cn-bl-link {
  display: inline-block; transition: transform .12s ease; }
.detail-link:hover, .bb-detail-link:hover, .cn-bl-link:hover { text-decoration: none; transform: scale(1.07); }

/* ===== Goldene Münze (Startseite + Spaßwette-Seite) ===== */
.gold-muenze { display: inline-block; }
/* Filter nur fuer das alte Emoji-Fallback (JS), nicht fuer das Pixel-Icon */
.gold-muenze:not(:has(.px)) {
  filter: sepia(1) saturate(6) hue-rotate(2deg) brightness(1.12) drop-shadow(0 1px 2px rgba(180,120,0,.4)); }
.clb-emoji { line-height: 0; }

/* ===== Bunte Match-Kästen in allen Rechnern (statt blau) ===== */
.tr-match, .ko-spiel, .ko-turnier .ko-spiel {
  border: 1.6px solid transparent !important;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, #f43f5e, #fb923c, #fbbf24, #34d399, #22d3ee, #3b82f6, #a855f7) border-box !important;
}
.tr-match, .ko-spiel { transition: transform .12s ease, box-shadow .12s ease; }
.tr-match:hover, .ko-spiel:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(17,24,39,.14); }
.tr-tour { color: #fff !important;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899) !important; }

/* Coins: "aktuell im Spiel"-Zeile unter der Bilanz */
.cn-imspiel { margin: 8px 0 2px; font-size: .85rem; color: var(--muted); }

/* ===== Wettschein erst auf Klick anzeigen (FAB + Bottom-Sheet) ===== */
.ko-layout { grid-template-columns: 1fr !important; }   /* Slip nicht mehr als feste Spalte */
.ko-slip { display: none; }
.ko-slip.auf {
  display: block; position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(460px, 96vw); max-height: 82vh; overflow-y: auto;
  z-index: 60; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 34px rgba(0,0,0,.28);
}
.ko-slip-zu { float: right; background: none; border: none; font-size: 1.1rem; width: auto;
  cursor: pointer; color: var(--muted); line-height: 1; padding: 0 2px; }
.wettschein-fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px;
  z-index: 55; background: linear-gradient(90deg, #2563eb, #6366f1); color: #fff; border: none;
  border-radius: 999px; padding: 13px 24px; font-weight: 800; font-size: .95rem; width: auto;
  box-shadow: 0 8px 24px rgba(37,99,235,.42); cursor: pointer; }
.wettschein-fab .anz { background: #fff; color: #2563eb; border-radius: 999px;
  padding: 1px 9px; margin-left: 7px; font-size: .85rem; }
body.slip-auf .wettschein-fab { display: none; }

/* ===== Bet Builder: mit Coins wetten (Spaßwette) ===== */
.bb-coins { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--rand); }
.bb-coins label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem;
  color: var(--muted); font-weight: 600; }
.bb-coins input { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px;
  padding: 7px 9px; color: var(--text); font-size: .9rem; width: 100px; }
.bb-coins-btn { padding: 9px 16px; font-size: .9rem;
  background: linear-gradient(90deg, #f59e0b, #f43f5e); }

/* ===== Flash-Meldungen (z. B. Coins-Wette) ===== */
.cn-flash { border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-weight: 700;
  font-size: .92rem; }
.cn-flash-ok { background: rgba(34,197,94,.15); color: #16a34a; border: 1px solid rgba(34,197,94,.4); }
.cn-flash-fehler { background: rgba(244,63,94,.14); color: #e11d48; border: 1px solid rgba(244,63,94,.4); }

/* Spaßwette-Schein im Bet Builder: Entfernen-Link */
.bb-slip-x { color: var(--muted); cursor: pointer; margin-left: 6px; font-weight: 700; }
.bb-slip-x:hover { color: #e11d48; text-decoration: none; }
.bb-coins { border-top: 1px dashed var(--rand); }

/* ============================================================
   DESIGN-POLITUR (global) — minimalistischer Feinschliff
   ============================================================ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Überschriften: etwas engeres Tracking = ruhiger, moderner */
h1, .hero h1, .sektion h2, .hero-landing h1, .wm-titel, h2.bb-sektion { letter-spacing: -.02em; }

/* weichere, zweistufige Schatten (mehr Tiefe, weniger „Kasten") */
:root { --schatten: 0 1px 2px rgba(17,24,39,.04), 0 10px 30px rgba(17,24,39,.06); }
html[data-theme="dark"] { --schatten: 0 1px 2px rgba(0,0,0,.30), 0 12px 34px rgba(0,0,0,.45); }

/* Textauswahl + Tastatur-Fokus in Markenfarbe */
::selection { background: rgba(37,99,235,.16); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* dezente, schlanke Scrollleiste */
* { scrollbar-width: thin; scrollbar-color: var(--rand) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* Buttons: sauberes Druck-Feedback */
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }

/* nichts soll horizontal aus dem Bild ragen (jedes Format sauber) */
img, svg, table, pre { max-width: 100%; }

/* ===== Closing Line Value (Tagebuch) ===== */
.tb-clv-info { background: var(--card); border: 1px solid var(--rand); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 12px 16px; margin: 14px 0 4px; font-size: .88rem; color: var(--muted);
  line-height: 1.5; }
.tb-clv-info b { color: var(--text); }
.tb-clv-badge { font-weight: 800; font-size: .78rem; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-2); white-space: nowrap; }
.tb-clv-badge.tb-gut { background: rgba(5,150,105,.12); }
.tb-clv-badge.tb-schlecht { background: rgba(225,29,72,.10); }

/* ===== Tagebuch-Analyse ===== */
.tb-analyse { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 4px 16px 16px; margin: 14px 0; }
.tb-analyse > summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 800;
  font-size: .98rem; }
.tb-analyse > summary::-webkit-details-marker { display: none; }
.tb-analyse > summary::before { content: "▸ "; color: var(--muted); }
.tb-analyse[open] > summary::before { content: "▾ "; }
.ta-hinweis { font-size: .78rem; color: var(--muted); margin-bottom: 12px; }
.ta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .ta-grid { grid-template-columns: 1fr; } }
.ta-titel { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 14px 0 6px; }
.ta-tab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ta-tab th { text-align: right; font-weight: 600; color: var(--muted); font-size: .72rem;
  padding: 2px 6px; border-bottom: 1px solid var(--rand); }
.ta-tab th:first-child { text-align: left; }
.ta-tab td { text-align: right; padding: 4px 6px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--card-2); }
.ta-tab td:first-child { text-align: left; font-weight: 600; }
.ta-tab tr.ta-duenn { color: var(--muted); opacity: .6; }
.ta-disziplin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 620px) { .ta-disziplin { grid-template-columns: 1fr 1fr; } }
.ta-disziplin > div { background: var(--card-2); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; }
.ta-disziplin b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ta-disziplin span { font-size: .72rem; color: var(--muted); }
.ta-warn { margin-top: 10px; background: rgba(225,29,72,.08); border: 1px solid rgba(225,29,72,.25);
  border-radius: 10px; padding: 10px 14px; font-size: .84rem; color: var(--rot); }

/* ===== Ehrlichkeits-Dashboard ===== */
.eh-fazit { background: var(--card); border: 1px solid var(--rand); border-left: 3px solid var(--gruen);
  border-radius: 12px; padding: 14px 18px; margin: 8px 0 6px; font-size: .92rem; line-height: 1.55; }
.eh-fazit b { color: var(--text); }
.eh-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 720px) { .eh-grid { grid-template-columns: 1fr; } }
.eh-kennzahlen { display: flex; flex-direction: column; gap: 12px; }
.eh-kz { background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 14px 16px; }
.eh-paar { display: flex; justify-content: space-between; font-size: .95rem; padding: 2px 0;
  font-variant-numeric: tabular-nums; }
.eh-paar span { color: var(--muted); }
.eh-gross { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.eh-label { font-size: .74rem; color: var(--muted); margin-top: 6px; }
.eh-label span { opacity: .8; }
.eh-chart { background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 14px; }
.eh-chart-titel { font-size: .74rem; color: var(--muted); margin-bottom: 6px; text-align: center; }
.eh-kompass-svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 4px auto 0; }
.eh-kompass-svg .kompass-glow { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gruen) 80%, transparent)); }
.eh-svg { width: 100%; height: auto; display: block; }
.eh-fuss { font-size: .78rem; color: var(--muted); margin-top: 22px; line-height: 1.5; }

/* ===== Bankroll- & Kelly-Rechner ===== */
.br-rechner { background: var(--card); border: 1px solid var(--rand); border-radius: 16px; padding: 18px; }
.br-eingabe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .br-eingabe { grid-template-columns: 1fr; } }
.br-eingabe label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem;
  color: var(--muted); font-weight: 600; }
.br-eingabe input, .br-eingabe select { background: var(--bg-2); border: 1px solid var(--rand);
  border-radius: 10px; padding: 10px 12px; color: var(--text); font-size: 1rem; }
.br-ausgabe { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.br-haupt { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--rand);
  border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; }
.br-haupt span { font-size: .78rem; color: var(--muted); }
.br-haupt b { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.br-haupt small { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.br-zeile { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px;
  border-bottom: 1px solid var(--card-2); font-size: .92rem; font-variant-numeric: tabular-nums; }
.br-zeile span { color: var(--muted); }
.br-null { font-size: 1.4rem; font-weight: 800; color: var(--muted); }
.br-hinweis { margin-top: 12px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.br-hinweis.br-warn { background: rgba(225,29,72,.08); border: 1px solid rgba(225,29,72,.25);
  color: var(--rot); border-radius: 10px; padding: 10px 14px; }
.br-info { margin-top: 18px; font-size: .86rem; color: var(--muted); line-height: 1.6; }
.br-info b { color: var(--text); }

/* ===== Wett-Schule ===== */
.ls-block { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; }
.ls-block h2 { font-size: 1rem; margin: 0 0 8px; }
.ls-block p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text); }
.ls-block code { background: var(--bg-2); border-radius: 5px; padding: 1px 6px; font-size: .86em; }
.ls-rechner { display: flex; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.ls-rechner label { display: flex; flex-direction: column; gap: 4px; font-size: .76rem;
  color: var(--muted); font-weight: 600; }
.ls-rechner input { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 10px;
  padding: 9px 11px; color: var(--text); font-size: 1rem; width: 120px; }
.ls-out { display: flex; flex-direction: column; gap: 4px; }
.ls-row { display: flex; justify-content: space-between; padding: 6px 4px; font-size: .92rem;
  border-bottom: 1px solid var(--card-2); font-variant-numeric: tabular-nums; }
.ls-row span { color: var(--muted); }
.ls-row.ls-marge b { color: var(--rot); }
.ls-fazit { background: rgba(5,150,105,.08); border: 1px solid rgba(5,150,105,.25); border-radius: 12px;
  padding: 14px 18px; font-size: .92rem; line-height: 1.6; }

/* ===== Verantwortungs-Modus ===== */
.vw-grundsaetze { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 6px; }
@media (max-width: 560px) { .vw-grundsaetze { grid-template-columns: 1fr; } }
.vw-grundsaetze > div { background: var(--card); border: 1px solid var(--rand); border-radius: 12px;
  padding: 12px 14px; font-size: .9rem; line-height: 1.5; }
.vw-grundsaetze b { color: var(--text); }
.vw-text { font-size: .9rem; color: var(--muted); margin: 4px 0 10px; }
.vw-limit { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 14px 16px; }
.vw-limit label { display: flex; flex-direction: column; gap: 4px; font-size: .76rem;
  color: var(--muted); font-weight: 600; }
.vw-limit input { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 10px;
  padding: 9px 11px; color: var(--text); font-size: 1rem; }
.vw-aktiv { margin-top: 8px; font-size: .88rem; color: var(--gruen); }
.vw-check { display: flex; flex-direction: column; gap: 8px; }
.vw-check label { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem;
  background: var(--card); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 14px;
  cursor: pointer; }
.vw-check input { margin-top: 3px; accent-color: var(--accent); }
.vw-ergebnis { margin-top: 12px; padding: 12px 16px; border-radius: 10px; font-size: .9rem;
  background: var(--card); border: 1px solid var(--rand); line-height: 1.5; }
.vw-ergebnis.vw-gelb { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.3); }
.vw-ergebnis.vw-rot { background: rgba(225,29,72,.08); border-color: rgba(225,29,72,.3); color: var(--rot); }
.vw-hilfe { margin-top: 18px; background: var(--card); border: 1px solid var(--rand); border-radius: 12px;
  padding: 14px 18px; font-size: .9rem; line-height: 1.6; }
.vw-hilfe ul { margin: 8px 0 0; padding-left: 18px; }

/* ===== Spaßwette-Abzeichen ===== */
.cn-abzeichen { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 4px 16px 14px; margin-bottom: 16px; }
.cn-abzeichen > summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 800;
  font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.cn-abzeichen > summary::-webkit-details-marker { display: none; }
.cn-abzeichen > summary::before { content: "▸"; color: var(--muted); }
.cn-abzeichen[open] > summary::before { content: "▾"; }
.cn-ab-zaehler { font-size: .82rem; font-weight: 700; color: var(--accent);
  background: rgba(37,99,235,.12); border-radius: 999px; padding: 2px 10px; }
.cn-ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.cn-ab { position: relative; text-align: center; border-radius: 12px; padding: 12px 6px; border: 1px solid var(--rand);
  background: var(--card-2); }
.cn-ab-anzahl { position: absolute; top: 5px; right: 6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--gold, #d97706); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums; }
.cn-ab-auf { border-color: rgba(217,119,6,.4);
  background: linear-gradient(180deg, rgba(251,191,36,.14), var(--card)); }
.cn-ab-zu { opacity: .55; filter: grayscale(1); }
.cn-ab-icon { font-size: 1.7rem; line-height: 1; }
.cn-ab-name { font-weight: 700; font-size: .78rem; margin-top: 5px; }
.cn-ab-info { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.cn-ab-auf .cn-ab-info { color: var(--gruen); font-weight: 700; }

/* ===== Bestenliste: Allzeit/Saison-Umschalter ===== */
.cn-bl-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cn-bl-tab { font-weight: 700; font-size: .86rem; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--card); color: var(--muted); }
.cn-bl-tab.aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
.cn-bl-tab:hover { text-decoration: none; }
.cn-bl-monat select { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 999px;
  padding: 6px 12px; color: var(--text); font-size: .84rem; font-weight: 600; }
.cn-bl-leer { text-align: center; color: var(--muted); padding: 14px; }
.cn-bl-hinweis { font-size: .78rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* ===== Private Ligen ===== */
.lg-liste { display: flex; flex-direction: column; gap: 10px; }
.lg-karte { position: relative; display: block; background: var(--card); border: 1px solid var(--rand);
  border-radius: 14px; padding: 14px 44px 14px 16px; color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease; }
.lg-karte:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,24,39,.12); }
.lg-name { font-weight: 800; font-size: 1.02rem; }
.lg-meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.lg-pfeil { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--gruen); font-weight: 800; font-size: 1.2rem; }
.lg-formen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
@media (max-width: 560px) { .lg-formen { grid-template-columns: 1fr; } }
.lg-form { background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; }
.lg-form h3 { margin: 0; font-size: .95rem; }
.lg-form input { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font-size: 1rem; }
.lg-code-box { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--rand);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.lg-code-box span { font-size: .84rem; color: var(--muted); }
.lg-code { font-size: 1.3rem; font-weight: 800; letter-spacing: .12em; color: var(--accent);
  cursor: pointer; font-variant-numeric: tabular-nums; }
.lg-verlassen { margin-top: 16px; }

/* ===== Gäste-Sperre: Feature-Seite unscharf + Anmelde-Overlay ===== */
.gast-sperre { position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(17,24,39,.30);
  backdrop-filter: blur(7px) saturate(1.05); -webkit-backdrop-filter: blur(7px) saturate(1.05); }
.gast-karte { background: var(--card); border: 1px solid var(--rand); border-radius: 20px;
  padding: 30px 26px; max-width: 360px; width: 90%; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.gast-emoji { font-size: 2.6rem; line-height: 1; }
.gast-karte h2 { margin: 12px 0 6px; font-size: 1.35rem; }
.gast-karte p { margin: 0 0 20px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.gast-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gast-knoepfe .btn-primary, .gast-knoepfe .btn-secondary { min-width: 130px; }
/* Hintergrund nicht scrollen/anklickbar, solange die Sperre aktiv ist */
body:has(.gast-sperre) { overflow: hidden; }

/* ===== Startseite: anklickbare Feature-Kacheln ===== */
.fk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px; max-width: 900px; margin: 0 auto; }
.fk { position: relative; display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--card); border: 1px solid var(--rand); border-radius: 18px; padding: 18px 16px;
  color: var(--text); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.fk-icon { font-size: 1.8rem; width: 52px; height: 52px; display: flex; align-items: center;
  justify-content: center; border-radius: 14px; margin-bottom: 8px;
  background: var(--bg-2);
  background: color-mix(in srgb, var(--fk, #2563eb) 16%, transparent); }
.fk-name { font-weight: 800; font-size: 1.02rem; }
.fk-sub { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.fk-pfeil { position: absolute; top: 16px; right: 16px; font-weight: 800; font-size: 1.1rem;
  color: var(--fk, var(--accent)); opacity: 0; transform: translateX(-5px);
  transition: opacity .16s ease, transform .16s ease; }
.fk:hover { transform: translateY(-4px); text-decoration: none;
  border-color: var(--fk, var(--accent));
  box-shadow: 0 14px 34px rgba(17,24,39,.14);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--fk, #2563eb) 32%, transparent); }
.fk:hover .fk-pfeil { opacity: 1; transform: translateX(0); }
.fk:hover .fk-icon { transform: scale(1.06); transition: transform .16s ease; }

/* ===== Interaktiver Kategorien-Showcase (Orbit) ===== */
#features { --sc: #22c55e; }
.sc-grid { display: grid; grid-template-columns: minmax(0, 330px) 1fr; gap: 36px; align-items: center;
  max-width: 900px; margin: 12px auto 0; }
@media (max-width: 760px) { .sc-grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; } }

.sc-orbit { position: relative; width: 100%; max-width: 330px; aspect-ratio: 1 / 1; margin: 0 auto;
  isolation: isolate; flex: none; font-size: 0; line-height: 0; }
/* Buttons erben sonst margin-top:20px -> verschiebt absolut positionierte Elemente */
.sc-center, .sc-item { margin: 0; }
/* weicher farbiger Glow im Hintergrund */
.sc-orbit::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc) 28%, transparent), transparent 68%);
  filter: blur(16px); opacity: .75; transition: background .3s ease; }
.sc-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; z-index: 1; }
.sc-ring1 { width: 84%; height: 84%; border: 1.5px solid var(--rand); }
.sc-ring2 { width: 58%; height: 58%; border: 1.5px solid color-mix(in srgb, var(--sc) 42%, transparent);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--sc) 55%, transparent);
  transition: border-color .3s ease, box-shadow .3s ease; }
.sc-center { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%,-50%);
  width: 46%; height: 46%; border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 50% 32%, var(--card-2), var(--card));
  box-shadow: 0 14px 38px rgba(0,0,0,.24),
              inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 50%, transparent),
              0 0 0 7px color-mix(in srgb, var(--sc) 9%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px;
  transition: transform .18s ease, box-shadow .3s ease; }
.sc-center:hover { transform: translate(-50%,-50%) scale(1.05); }
.sc-center-icon { font-size: 2.25rem; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.28)); }
.sc-center-name { font-weight: 800; font-size: .95rem; text-align: center; }
.sc-center-sub { font-size: .66rem; color: var(--muted); text-align: center; line-height: 1.2; }
.sc-item { position: absolute; z-index: 3; width: 15.5%; height: 15.5%; min-width: 48px; min-height: 48px;
  border-radius: 50%; transform: translate(-50%,-50%); border: 1.5px solid var(--rand); background: var(--card);
  cursor: pointer; font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 16px rgba(0,0,0,.16);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; }
.sc-item:hover { transform: translate(-50%,-50%) scale(1.13);
  border-color: color-mix(in srgb, var(--sc) 60%, var(--rand)); }
.sc-item.aktiv { border-color: var(--sc); transform: translate(-50%,-50%) scale(1.16);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 26%, transparent),
              0 8px 22px color-mix(in srgb, var(--sc) 40%, transparent); }

.sc-detail { position: relative; background: var(--card); border: 1px solid var(--rand);
  border-radius: 22px; padding: 24px 26px; min-height: 220px; text-align: left; overflow: hidden;
  box-shadow: var(--schatten); }
.sc-detail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sc); }
.sc-detail::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sc) 16%, transparent), transparent 70%); }
.sc-detail::before, .sc-detail::after { z-index: 0; }
.sc-detail > * { position: relative; z-index: 1; }
.sc-detail-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sc-detail-icon { font-size: 1.7rem; width: 48px; height: 48px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; background: color-mix(in srgb, var(--sc) 15%, var(--bg-2)); }
.sc-detail-label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .09em; color: var(--sc); }
.sc-detail-name { display: block; font-weight: 800; font-size: 1.35rem; }
.sc-chip { display: inline-block; font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--sc) 14%, var(--bg-2)); color: var(--sc); margin-bottom: 12px; }
.sc-detail-text { margin: 0 0 18px; color: var(--muted); line-height: 1.6; font-size: .95rem; }
.sc-cta { background: var(--sc); border: none; }
.sc-cta:hover { filter: brightness(1.05); }
.sc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.sc-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--rand); cursor: pointer;
  transition: width .2s ease, background .2s ease; }
.sc-dot.aktiv { width: 22px; background: var(--sc); }

/* ===== Spaßwette: Aufschlüsselung Wett-Gewinn vs. Bonus-Coins ===== */
.cn-aufschluesselung { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 4px;
  padding: 12px 16px; background: var(--card); border: 1px solid var(--rand); border-radius: 12px; }
.cn-auf-teil { display: flex; align-items: baseline; gap: 6px; font-size: .95rem;
  font-variant-numeric: tabular-nums; }
.cn-auf-label { color: var(--muted); font-size: .8rem; }
.cn-auf-teil b { font-weight: 800; }

/* Live-Quote kurz aufleuchten, wenn sie sich ändert */
.ko-q-blink { animation: ko-q-puls .9s ease; border-radius: 6px; }
@keyframes ko-q-puls {
  0% { background: color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { background: transparent; }
}

/* Live-Wette gesperrt: ein Punkt läuft, Spielstand + Quote ändern sich */
.ko-opt.ko-gesperrt { opacity: .6; pointer-events: none; }
.ko-opt.ko-gesperrt .ko-q { visibility: hidden; position: relative; }
.ko-opt.ko-gesperrt .ko-q::after { content: "🔒"; visibility: visible;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: .9rem; }
.ko-opt.ko-gesperrt .ko-opt-name::after { content: " · gesperrt"; color: var(--muted);
  font-size: .72rem; font-weight: 600; font-style: italic; }

/* ===== Startseite: Algorithmus-Schaufenster ===== */
.algo-sek { text-align: center; padding-top: 12px; }
.algo-siegel { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 14px 0 18px; }
.siegel-kachel { min-width: 150px; background: #0d1526; border-radius: 14px; padding: 14px 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.siegel-kachel b { display: block; font-size: 1.7rem; font-weight: 800; color: #e8edf6;
  font-variant-numeric: tabular-nums; line-height: 1; }
.siegel-kachel b.siegel-gut { color: #c3f53c; }
.siegel-kachel span { display: block; font-size: .78rem; color: #8aa0c6; margin-top: 6px; }

.algo-puls { display: flex; align-items: center; gap: 12px; background: #0d1526; border-radius: 14px;
  padding: 10px 14px; margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); text-align: left; }
.puls-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; color: #c3f53c;
  font-weight: 800; font-size: .8rem; letter-spacing: .04em; }
.puls-dot { width: 8px; height: 8px; border-radius: 50%; background: #c3f53c; animation: puls-blink 1.4s infinite; }
@keyframes puls-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.puls-track { position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
          mask: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
.puls-strom { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform;
  animation: puls-run var(--puls-dur, 40s) linear infinite; }
@keyframes puls-run { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* laeuft bewusst auch beim Drueberfahren weiter (kein Pause-on-hover) */
.puls-item { display: inline-flex; align-items: center; gap: 20px; white-space: nowrap; color: #e8edf6;
  text-decoration: none; font-size: .86rem; margin-right: 30px; }
.puls-namen { font-weight: 600; }
.puls-vs { color: #57678a; margin: 0 3px; }
/* Balken + % als eine saubere Einheit, klar rechts neben dem Namen (nicht im Namen).
   Zweifarbiger Balken (immer voll): gruen = Chance des ersten Spielers, blau = Gegner. */
.puls-stat { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.puls-bar { width: 40px; height: 6px; border-radius: 999px; flex: none;
  background: #38618c; overflow: hidden; }
.puls-bar > span { display: block; height: 100%; background: #c3f53c; }
.puls-pct { color: #c3f53c; font-weight: 800; font-size: .82rem;
  font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

.algo-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.algo-kachel { display: block; background: #0d1526; border-radius: 14px; padding: 12px 10px 14px;
  text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .15s; }
.algo-kachel:hover { transform: translateY(-3px); }
.algo-mini { display: block; width: 100%; height: 56px; }
.algo-kachel b { display: block; color: #e8edf6; font-size: .92rem; font-weight: 800; margin-top: 6px; }
.algo-kachel span { display: block; color: #8aa0c6; font-size: .74rem; margin-top: 2px; }

.algo-contra { display: flex; align-items: center; gap: 14px; text-align: left; margin: 20px auto 6px;
  max-width: 620px; background: color-mix(in srgb, var(--gruen) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gruen) 45%, transparent); border-radius: 14px;
  padding: 14px 18px; text-decoration: none; color: var(--text); }
.contra-icon { font-size: 1.6rem; flex: none; }
.contra-text { font-size: .9rem; line-height: 1.45; }
.contra-name { color: var(--gruen); }
.contra-meta { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.algo-contra-note { max-width: 620px; margin: 0 auto 6px; font-size: .76rem; color: var(--muted); }

@media (max-width: 640px) {
  .algo-kacheln { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Fußball: Ergebnis-Matrix (Wärmekarte) ===== */
.emx { display: grid; grid-template-columns: 30px repeat(var(--n), 1fr); gap: 3px; margin: 6px 0 10px; }
.emx-corner { font-size: .56rem; color: var(--muted); line-height: 1.15; display: flex;
  flex-direction: column; justify-content: center; font-weight: 700; }
.emx-head, .emx-side { font-size: .74rem; font-weight: 800; color: var(--muted);
  display: flex; align-items: center; justify-content: center; }
.emx-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #eaf2ff; text-shadow: 0 1px 1px rgba(0,0,0,.5);
  background: color-mix(in srgb, #35c46a calc(var(--op) * 90%), #16213a); }
.emx-max { box-shadow: 0 0 0 2px #c3f53c; font-weight: 800; }
.emx-rand { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 2px; text-align: center; }
.emx-rand span { flex: 1; font-size: .76rem; color: var(--muted); }
.emx-rand b { display: block; font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* ===== Fußball: Kaderwert-Waage ===== */
.waage-namen { display: flex; justify-content: space-between; font-size: .84rem; font-weight: 700;
  color: var(--text); margin-bottom: 6px; }
.waage-zeile { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.waage-num { flex: 0 0 66px; font-size: .8rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.waage-num.waage-r { text-align: right; }
.waage-bar { position: relative; flex: 1; height: 12px; border-radius: 6px;
  background: rgba(56,189,248,.30); overflow: hidden; }
.waage-h { display: block; height: 100%; background: var(--accent); border-radius: 6px; }

/* ===== Startseite: futuristisches Hero (folgt Hell/Dunkel-Modus) ===== */
.hero-futur { position: relative; overflow: hidden;
  --h-fg: var(--text);
  --h-muted: var(--muted);
  --h-glass: rgba(17,24,39,.05);
  --h-accent: #0e9f6e;
  --h-cta: rgba(17,24,39,.05);
  --h-cta-bd: rgba(17,24,39,.10);
  --h-part: .55;
  background: radial-gradient(130% 92% at 50% 8%, #e7effc 0%, var(--bg) 58%);
  /* nicht volle Bildschirmhoehe -> Hero sitzt direkt unter der Trefferquote */
  min-height: auto; padding: 22px 22px 56px; }
html[data-theme="dark"] .hero-futur {
  --h-fg: #eaf2ff;
  --h-muted: #8aa0c6;
  --h-glass: rgba(255,255,255,.05);
  --h-accent: #c3f53c;
  --h-cta: rgba(255,255,255,.07);
  --h-cta-bd: rgba(255,255,255,.10);
  --h-part: .9;
  background:
    radial-gradient(120% 68% at 50% 14%, rgba(20,33,63,.85) 0%, transparent 62%),
    linear-gradient(180deg, #0b1327 0%, #0b1327 74%, var(--bg) 100%); }
.hero-futur .hero-inhalt { position: relative; z-index: 1; }
.hero-futur .start-frage { color: var(--h-fg); }
.hero-futur .lead { color: var(--h-muted); }
.odds-grad { background: linear-gradient(100deg, var(--h-accent), #2563eb 52%, #7c3aed);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: transparent; font-weight: 900; }
html[data-theme="dark"] .odds-grad { background: linear-gradient(100deg, #c3f53c, #38bdf8 52%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* kreisende Datenpartikel */
.hero-orbit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0; }
.hero-orbit span { position: absolute; width: var(--s,6px); height: var(--s,6px);
  margin: calc(var(--s,6px) / -2); border-radius: 50%; background: var(--c,#38bdf8); opacity: var(--h-part,.7);
  box-shadow: 0 0 9px var(--c,#38bdf8);
  animation: heroOrbit var(--d,44s) linear infinite; animation-delay: var(--dl,0s); }
@keyframes heroOrbit {
  from { transform: rotate(0deg)   translateX(var(--r,160px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r,160px)) rotate(-360deg); }
}
.hero-futur .cta-reihe .btn-primary { background: var(--h-cta); color: var(--h-fg);
  border: 1px solid var(--h-cta-bd); box-shadow: none; transition: box-shadow .15s, background .15s; }
.hero-futur .cta-reihe .btn-primary:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--h-accent) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .hero-orbit span { animation: none; } }
/* ruhige, einheitliche Boxen (kein Regenbogen) */
.hero-futur .slogan-box { background: var(--h-glass) !important; border: none !important;
  animation: none !important; box-shadow: none !important; }
.hero-futur .slogan-box strong { color: var(--h-fg); }
.hero-futur .slogan-box strong:nth-child(2) { color: var(--h-accent); }
/* Spaßwette leuchtet wie die CTA-Buttons darueber (gleicher Glass-Look + Akzent-Glow) */
.hero-futur .start-spass.glow-kasten { background: var(--h-cta) !important;
  border: 1px solid var(--h-cta-bd) !important; animation: none !important; box-shadow: none !important;
  transition: box-shadow .15s, background .15s, transform .1s; }
.hero-futur .start-spass.glow-kasten:hover {
  box-shadow: 0 0 16px color-mix(in srgb, var(--h-accent) 30%, transparent) !important; }
.hero-futur .start-spass-text b { color: var(--h-fg); }
.hero-futur .start-spass-text span { color: var(--h-muted); }

/* ===== Orbit: dunkles, sauberes Design (wie Mockup) + zentrierte Icons ===== */
#features .sc-orbit { background: transparent; box-shadow: none; }
#features .sc-orbit::before { display: none; }
.sc-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#features .sc-center { background: radial-gradient(circle at 50% 34%, #17243f, #0b1327) !important;
  box-shadow: inset 0 0 0 1.5px rgba(195,245,60,.5), 0 0 0 7px rgba(195,245,60,.08),
              0 14px 38px rgba(0,0,0,.4) !important; }
#features .sc-center-name { color: #eaf2ff; }
#features .sc-center-sub { color: #7183a8; }
#features .sc-center-icon { line-height: 1; }
#features .sc-item { background: #111a30 !important; border: 1.5px solid rgba(56,189,248,.5) !important;
  color: #eaf2ff; line-height: 1; box-shadow: 0 5px 16px rgba(0,0,0,.3) !important;
  transition: left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1),
              transform .18s ease, box-shadow .25s ease, border-color .25s ease !important; }
#features .sc-item.aktiv { border-color: #c3f53c !important;
  box-shadow: 0 0 0 4px rgba(195,245,60,.22), 0 8px 22px rgba(195,245,60,.35) !important; }
/* Detail-Panel passend dunkel */
#features .sc-detail { background: #0d1526 !important; border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important; }
#features .sc-detail-name { color: #eaf2ff; }
#features .sc-detail-text { color: #8aa0c6; }

/* ===== Spaßwette: Spieler-Profil-Dashboard ===== */
.cn-profil { background: #0d1526; border-radius: 16px; padding: 18px 18px 16px; margin: 6px 0 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: #eaf2ff; }
.cnp-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cnp-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; font-weight: 800; color: #c3f53c;
  background: #17243f; box-shadow: inset 0 0 0 1.5px rgba(195,245,60,.55); }
.cnp-ident { flex: 1; min-width: 0; }
.cnp-name { font-size: 1.2rem; font-weight: 800; }
.cnp-sub { font-size: .8rem; color: #7f8db0; margin-top: 2px; }
.cnp-tier { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(195,245,60,.3); border-radius: 12px; padding: 8px 14px; }
.cnp-tier-icon { font-size: 1.4rem; }
.cnp-tier-txt { display: flex; flex-direction: column; line-height: 1.2; }
.cnp-tier-txt b { font-size: .92rem; }
.cnp-tier-txt span { font-size: .68rem; color: #7f8db0; }
.cnp-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.cnp-karte { background: rgba(255,255,255,.04); border-radius: 14px; padding: 14px 16px; }
.cnp-klabel { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #7f8db0; }
.cnp-gross { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin: 6px 0 4px;
  font-variant-numeric: tabular-nums; }
.cnp-gut { color: #c3f53c; }
.cnp-schlecht { color: #f87171; }
.cnp-glueck { color: #f59e0b; }
.cnp-leer { color: #7f8db0; }
.cnp-ktext { font-size: .78rem; color: #a7b4d0; line-height: 1.4; }
.cnp-split { height: 20px; border-radius: 10px; background: #f59e0b; overflow: hidden; margin: 12px 0 8px; }
.cnp-split-k { display: block; height: 100%; background: #c3f53c; border-radius: 10px 0 0 10px; }
.cnp-split-legende { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.cnp-bank { background: rgba(255,255,255,.04); border-radius: 14px; padding: 12px 14px 4px; margin-bottom: 12px; }
.cnp-bank-svg { display: block; width: 100%; height: auto; margin-top: 4px;
  filter: drop-shadow(0 0 4px rgba(195,245,60,.3)); }
.cnp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cnp-chip { flex: 1 1 92px; background: rgba(255,255,255,.04); border-radius: 11px; padding: 9px 12px; }
.cnp-chip b { display: block; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cnp-chip span { display: block; font-size: .7rem; color: #7f8db0; margin-top: 1px; }
.cnp-tipps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: .8rem; color: #a7b4d0; }
.cnp-tipp-l { color: #7f8db0; font-weight: 700; margin-right: 6px; }
@media (max-width: 620px) { .cnp-karten { grid-template-columns: 1fr; } }

/* Spaßwette: Bonus-Claim-Button */
.cn-claim-form { margin-bottom: 12px; }
.cn-claim { width: 100%; cursor: pointer; border: none; border-radius: 12px; padding: 13px 18px;
  font-size: 1rem; font-weight: 800; color: #0d1526;
  background: linear-gradient(100deg, #c3f53c, #86efac);
  box-shadow: 0 0 20px rgba(195,245,60,.35); transition: transform .12s, box-shadow .2s;
  animation: claim-puls 1.8s ease-in-out infinite; }
.cn-claim:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(195,245,60,.5); }
.cn-claim b { font-weight: 900; }
@keyframes claim-puls { 0%,100% { box-shadow: 0 0 18px rgba(195,245,60,.30); }
  50% { box-shadow: 0 0 26px rgba(195,245,60,.5); } }

/* Profil: Erklär-Texte sauberer */
.cnp-ktext { font-size: .82rem; color: #b8c4de; line-height: 1.45; margin: 4px 0 0; }
.cnp-hint { font-size: .74rem; color: #7f8db0; line-height: 1.4; margin: 5px 0 0; }
.cnp-def { display: block; margin-top: 3px; }

/* =====================================================================
   KATEGORIE-SEITEN (Tour / Turniere / Fußball / WM) — futuristisch
   Palette wie Startseite: #0d1526 Panels, #c3f53c grün, #38bdf8 cyan,
   #f59e0b gold. Belag steuert die Glow-Farbe der Turnierkarten.
   ===================================================================== */
.kat { max-width: 980px; margin: 0 auto; padding: 26px 18px 70px; }
.kat-kopf { margin-bottom: 20px; }
.kat-zurueck { display: inline-block; color: #7f8db0; font-size: .82rem;
  font-weight: 700; margin-bottom: 10px; }
.kat-zurueck:hover { color: #c3f53c; text-decoration: none; }
.kat-kopf h1 { margin: 0; font-size: 1.9rem; font-weight: 800; color: #eaf2ff;
  letter-spacing: -.5px; }
.kat-kopf .kat-sub { margin: 6px 0 0; color: #7f8db0; font-size: .92rem; max-width: 560px; }
.kat-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-top: 14px;
  background: rgba(255,255,255,.05); border-radius: 999px; }
.kat-toggle a { padding: 7px 20px; border-radius: 999px; font-weight: 800; font-size: .9rem;
  color: #7f8db0; }
.kat-toggle a.an { background: rgba(195,245,60,.16); color: #c3f53c; }
.kat-toggle a:hover { text-decoration: none; color: #eaf2ff; }

/* Stat-Leiste */
.kat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 0 0 22px; }
.kat-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 13px 16px; }
.kat-stat b { display: block; font-size: 1.5rem; font-weight: 800; color: #eaf2ff; line-height: 1; }
.kat-stat b.gruen { color: #c3f53c; } .kat-stat b.cyan { color: #38bdf8; } .kat-stat b.gold { color: #f59e0b; }
.kat-stat span { display: block; font-size: .74rem; color: #7f8db0; margin-top: 6px; }
.kat-stat .live-dot { color: #c3f53c; animation: katblink 1.4s infinite; }
@keyframes katblink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Große Auswahl-Panels (Tour ATP/WTA, Fußball-Hub) */
.kat-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kat-panel { position: relative; overflow: hidden; display: block; text-decoration: none;
  background: #0d1526; border: 1px solid rgba(255,255,255,.07); border-radius: 20px;
  padding: 24px; transition: transform .18s, border-color .18s; --glow: #c3f53c; }
.kat-panel::before { content: ""; position: absolute; top: -60px; right: -60px; width: 150px; height: 150px;
  border-radius: 50%; background: var(--glow); opacity: .13; filter: blur(30px); }
.kat-panel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--glow) 45%, transparent);
  text-decoration: none; }
.kat-panel .kp-sym { font-size: 2rem; display: block; }
.kat-panel .kp-titel { display: block; font-size: 1.6rem; font-weight: 800; color: #eaf2ff; margin-top: 8px; }
.kat-panel .kp-sub { display: block; color: #7f8db0; font-size: .9rem; }
.kat-panel .kp-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: .82rem; font-weight: 700; color: #eaf2ff; }
.kat-panel .kp-status.leer { color: #7f8db0; }
.kat-panel .kp-status .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); }
.kat-panel .kp-status.an .pt { animation: katblink 1.4s infinite; }
.kat-panel .kp-treffer { display: block; margin-top: 12px; font-size: .82rem; font-weight: 800; color: var(--glow); }
.kat-panel .kp-pfeil { position: absolute; bottom: 20px; right: 22px; color: var(--glow);
  font-weight: 800; opacity: .8; }

/* Turnierkarten (Belag-Glow) */
.kat-tkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kat-tkarte { position: relative; overflow: hidden; display: block; text-decoration: none;
  background: #0d1526; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 18px;
  transition: transform .16s, border-color .16s; --glow: #38bdf8; }
.kat-tkarte::before { content: ""; position: absolute; top: -50px; right: -50px; width: 120px; height: 120px;
  border-radius: 50%; background: var(--glow); opacity: .12; filter: blur(26px); }
.kat-tkarte:hover { transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--glow) 45%, transparent); text-decoration: none; }
.kat-tkarte.hervor { background: linear-gradient(180deg, rgba(195,245,60,.07), #0d1526); }
.belag-gras { --glow: #c3f53c; } .belag-sand { --glow: #f59e0b; } .belag-hart { --glow: #38bdf8; }
.tk-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tk-belag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 999px; color: var(--glow);
  background: color-mix(in srgb, var(--glow) 16%, transparent); }
.tk-belag.unsicher { color: #7f8db0; background: rgba(255,255,255,.06); }
.tk-live { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; color: #eaf2ff; }
.tk-live .pt { width: 7px; height: 7px; border-radius: 50%; background: #c3f53c; animation: katblink 1.4s infinite; }
.tk-titel { font-size: 1.2rem; font-weight: 800; color: #eaf2ff; margin: 0; }
.tk-sub { font-size: .82rem; color: #7f8db0; margin-top: 4px; }
.tk-pfeil { color: var(--glow); }

/* Wert des Tages */
.kat-wert { position: relative; overflow: hidden; display: block; text-decoration: none;
  background: #0d1526; border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  padding: 20px 22px; margin: 22px 0; }
.kat-wert::before { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(195,245,60,.14); }
.kw-label { font-size: .72rem; font-weight: 800; letter-spacing: 1px; color: #7f8db0; text-transform: uppercase; }
.kw-titel { font-size: 1.3rem; font-weight: 800; color: #eaf2ff; margin: 8px 0 2px; }
.kw-titel .vs { color: #7f8db0; font-weight: 600; font-size: 1rem; }
.kw-meta { font-size: .8rem; color: #7f8db0; margin-bottom: 14px; }
.kw-edge { float: right; color: #c3f53c; font-weight: 800; font-size: .9rem; }
.kw-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 10px; margin-top: 8px; }
.kw-row .nm { font-size: .86rem; font-weight: 700; color: #eaf2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-track { position: relative; height: 15px; background: #1b2740; border-radius: 999px; overflow: visible; }
.kw-fill { height: 100%; border-radius: 999px; background: #c3f53c; }
.kw-fill.cyan { background: #38bdf8; }
.kw-markt { position: absolute; top: -3px; width: 2px; height: 21px; background: #eaf2ff; border-radius: 2px; }
.kw-num { font-size: .82rem; font-weight: 800; color: #eaf2ff; min-width: 74px; text-align: right; }
.kw-num .mk { color: #7f8db0; font-weight: 600; font-size: .72rem; }
.kw-tipp { margin-top: 14px; font-size: .82rem; color: #7f8db0; }
.kw-tipp b { color: #c3f53c; }

/* WM: Gruppen-Tabellen */
.kat-abschnitt-titel { font-size: 1.15rem; font-weight: 800; color: #eaf2ff; margin: 30px 0 4px; }
.kat-abschnitt-sub { font-size: .8rem; color: #7f8db0; margin: 0 0 16px; }
.kat-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grp { background: #0d1526; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px 16px; }
.grp-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.grp-kopf b { font-size: .95rem; color: #eaf2ff; }
.grp-kopf span { font-size: .68rem; color: #7f8db0; }
.grp table { width: 100%; border-collapse: collapse; }
.grp th { font-size: .64rem; color: #7f8db0; font-weight: 700; text-align: right; padding: 2px 3px; }
.grp th.l { text-align: left; }
.grp td { font-size: .82rem; color: #cdd8ef; text-align: right; padding: 5px 3px; border-top: 1px solid rgba(255,255,255,.05); }
.grp td.l { text-align: left; font-weight: 700; color: #eaf2ff; }
.grp tr.q1 td, .grp tr.q2 td { color: #eaf2ff; }
.grp tr.q1 .rk { color: #c3f53c; font-weight: 800; }
.grp tr.q2 .rk { color: #38bdf8; font-weight: 800; }
.grp td.pkt { font-weight: 800; color: #eaf2ff; }
.grp .rk { color: #7f8db0; font-weight: 700; }

/* WM: K.-o.-Baum */
.kat-bracket { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 14px; }
.br-reihe { flex: 0 0 auto; min-width: 190px; display: flex; flex-direction: column;
  justify-content: space-around; gap: 10px; }
.br-reihe > h4 { font-size: .72rem; font-weight: 800; color: #7f8db0; text-transform: uppercase;
  letter-spacing: .5px; margin: 0 0 4px; text-align: center; }
.br-spiel { background: #0d1526; border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
  padding: 8px 10px; font-size: .82rem; }
.br-spiel.live { border-color: rgba(195,245,60,.4); }
.br-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 0; }
.br-row .t { color: #cdd8ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-row.sieger .t { color: #eaf2ff; font-weight: 800; }
.br-row.sieger .t::after { content: " ✓"; color: #c3f53c; }
.br-row .sc { font-weight: 800; color: #eaf2ff; }
.br-tbd .t { color: #56617f; font-style: italic; }
.br-prog { margin-top: 5px; font-size: .7rem; color: #7f8db0; border-top: 1px solid rgba(255,255,255,.05); padding-top: 5px; }
.br-prog b { color: #c3f53c; }
.br-datum { font-size: .66rem; color: #56617f; margin-top: 4px; }

/* Trefferquoten-Siegel (nur ab 70%) */
.kat-treffer-siegel { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 8px 16px; border-radius: 999px; background: rgba(195,245,60,.12);
  border: 1px solid rgba(195,245,60,.28); font-size: .82rem; font-weight: 700; color: #c3f53c; }

@media (max-width: 560px) {
  .kat-kopf h1 { font-size: 1.5rem; }
  .kw-row { grid-template-columns: 88px 1fr auto; }
  .kw-num { min-width: 62px; }
}

/* =====================================================================
   LEITER-CHALLENGE (/leiter) — Kette mit steigender Quote, Ziel oben
   ===================================================================== */
.leiter-steuer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 4px 0 18px; }
.leiter-steuer label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: #7f8db0; font-weight: 700; }
.leiter-steuer input, .leiter-steuer select { background: #0d1526; border: 1px solid rgba(255,255,255,.1);
  color: #eaf2ff; border-radius: 10px; padding: 9px 12px; font-size: .95rem; font-weight: 700; }
.leiter-steuer input { width: 110px; }

.leiter-ehrlich { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.28);
  border-radius: 14px; padding: 14px 16px; font-size: .84rem; color: #d8b072; line-height: 1.5; margin: 4px 0 20px; }
.leiter-ehrlich b { color: #f59e0b; }

.leiter { display: flex; flex-direction: column; gap: 8px; }
.leiter-ziel { text-align: center; background: linear-gradient(180deg, rgba(195,245,60,.16), #0d1526);
  border: 1px solid rgba(195,245,60,.4); border-radius: 16px 16px 8px 8px; padding: 16px;
  color: #eaf2ff; font-size: 1.05rem; }
.leiter-ziel b { color: #c3f53c; font-size: 1.35rem; }
.leiter-ziel .lz-sub { display: block; font-size: .74rem; color: #7f8db0; margin-top: 4px; font-weight: 600; }

.leiter-sprosse { display: flex; align-items: center; gap: 12px; background: #0d1526;
  border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 14px;
  position: relative; transition: transform .14s, border-color .14s; }
.leiter-sprosse:hover { transform: translateX(3px); border-color: rgba(56,189,248,.35); }
.ls-nr { flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(56,189,248,.14); color: #38bdf8; font-weight: 800; border-radius: 9px; font-size: 1.05rem; }
.ls-mitte { flex: 1 1 auto; min-width: 0; }
.ls-spiel { font-size: .76rem; color: #7f8db0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tipp { font-size: .95rem; color: #eaf2ff; margin-top: 2px; }
.ls-tipp b { color: #eaf2ff; }
.ls-modell { font-size: .72rem; color: #7f8db0; margin-left: 6px; }
.ls-rechts { flex: 0 0 auto; text-align: right; }
.ls-quote { font-size: 1.05rem; font-weight: 800; color: #f59e0b; }
.ls-betrag { font-size: .82rem; color: #7f8db0; }
.ls-betrag .ls-nach { color: #c3f53c; font-weight: 800; }
.ls-chance { font-size: .68rem; color: #56617f; margin-top: 2px; }
.leiter-start { text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px 8px 16px 16px; padding: 13px; color: #7f8db0; font-size: .9rem; }
.leiter-start b { color: #eaf2ff; }

.leiter-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 22px; }
.la-form { background: #0d1526; border: 1px solid rgba(255,255,255,.07); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.la-form .btn-primary, .la-form .btn-secondary { width: 100%; text-align: center; }
.la-waehrung { font-size: .74rem; color: #7f8db0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.la-waehrung select { background: #0b1120; border: 1px solid rgba(255,255,255,.1); color: #eaf2ff;
  border-radius: 8px; padding: 6px 10px; }
.la-hinweis { font-size: .72rem; color: #7f8db0; line-height: 1.4; }

/* Leiter-Banner auf der Spaßwette-Seite */
.cn-leiter-banner { display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: linear-gradient(100deg, rgba(195,245,60,.10), rgba(56,189,248,.08)); 
  border: 1px solid rgba(195,245,60,.28); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px;
  transition: transform .15s, border-color .15s; }
.cn-leiter-banner:hover { transform: translateY(-2px); border-color: rgba(195,245,60,.5); text-decoration: none; }
.clb-emoji { font-size: 1.9rem; flex: 0 0 auto; }
.clb-text { flex: 1 1 auto; font-size: .86rem; color: #cdd8ef; line-height: 1.45; }
.clb-text b { color: #eaf2ff; }
.clb-pfeil { flex: 0 0 auto; color: #c3f53c; font-weight: 800; font-size: .84rem; white-space: nowrap; }
@media (max-width: 560px) { .cn-leiter-banner { flex-wrap: wrap; } .clb-pfeil { width: 100%; } }

/* =====================================================================
   MEINE AUSWAHL (/auswahl) — eigene Spiel-/Marktwahl, Slip, ohne Coins
   ===================================================================== */
.aw-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.aw-spiele { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.aw-spiel { background: #0d1526; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px 16px; }
.aw-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aw-sport { font-size: .72rem; font-weight: 800; color: #38bdf8; }
.aw-zeit { font-size: .72rem; color: #7f8db0; margin-left: 6px; }
.aw-detail { font-size: .72rem; color: #7f8db0; }
.aw-detail:hover { color: #c3f53c; text-decoration: none; }
.aw-spielname { font-size: 1.1rem; font-weight: 800; color: #eaf2ff; margin: 4px 0 2px; }
.aw-empf { font-size: .8rem; color: #c3f53c; margin-bottom: 8px; }
.aw-empf b { color: #eaf2ff; }
.aw-empf-p { color: #7f8db0; font-weight: 700; margin-left: 4px; }

.aw-kat { border-top: 1px solid rgba(255,255,255,.06); padding: 6px 0 2px; }
.aw-kat > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: #cdd8ef;
  list-style: none; padding: 5px 0; display: flex; align-items: center; gap: 8px; }
.aw-kat > summary::-webkit-details-marker { display: none; }
.aw-kat > summary::before { content: "▸"; color: #7f8db0; font-size: .8rem; }
.aw-kat[open] > summary::before { content: "▾"; }
.aw-kat-n { font-size: .64rem; color: #7f8db0; background: rgba(255,255,255,.06); border-radius: 99px; padding: 1px 7px; }
.aw-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 10px; }
.aw-chip { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: #131f36; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 11px;
  color: #eaf2ff; transition: border-color .12s, transform .12s; min-width: 120px; }
.aw-chip:hover { transform: translateY(-1px); border-color: rgba(56,189,248,.4); }
.aw-chip.value { border-color: rgba(195,245,60,.3); }
.aw-chip.an { border-color: #c3f53c; background: rgba(195,245,60,.12); box-shadow: 0 0 0 1px rgba(195,245,60,.4) inset; }
.awc-tipp { font-size: .82rem; font-weight: 700; }
.awc-meta { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: #7f8db0; }
.awc-meta b { color: #c3f53c; font-size: .8rem; }
.awc-markt { color: #7f8db0; }
.awc-quote { color: #f59e0b; font-weight: 800; margin-left: auto; }

/* Slip */
.aw-slip { position: sticky; top: 14px; background: #0d1526; border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 14px 16px; }
.aws-kopf { font-size: 1rem; font-weight: 800; color: #eaf2ff; margin-bottom: 10px; }
.aws-kopf span { color: #c3f53c; }
.aws-leer { font-size: .8rem; color: #7f8db0; line-height: 1.5; }
.aws-leg { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.awl-spiel { font-size: .72rem; color: #7f8db0; }
.awl-tipp { font-size: .84rem; font-weight: 700; color: #eaf2ff; margin-top: 2px; }
.awl-q { color: #f59e0b; font-weight: 800; margin-left: 4px; }
.awl-x { background: none; border: none; color: #7f8db0; font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0 2px; }
.awl-x:hover { color: #fb7185; }
.aws-summe { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.aws-zeile { display: flex; justify-content: space-between; font-size: .84rem; color: #7f8db0; margin-bottom: 6px; }
.aws-zeile b { color: #eaf2ff; font-weight: 800; }
.aws-zeile b.cyan { color: #38bdf8; }
.aws-eingabe { display: flex; gap: 8px; margin: 8px 0; }
.aws-eingabe label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: .68rem; color: #7f8db0; font-weight: 700; }
.aws-eingabe input, .aws-eingabe select { background: #0b1120; border: 1px solid rgba(255,255,255,.1);
  color: #eaf2ff; border-radius: 8px; padding: 7px 9px; font-size: .9rem; font-weight: 700; width: 100%; }
.aws-moegl { font-size: .8rem; color: #7f8db0; margin: 6px 0 10px; }
.aws-moegl b { color: #c3f53c; font-weight: 800; }

@media (max-width: 820px) {
  .aw-layout { grid-template-columns: 1fr; }
  .aw-slip { position: static; order: -1; }
}

/* Meine-Auswahl Filterleiste (Sport-Toggle + Turnier-Dropdown) */
.aw-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.aw-turnier-select { background: #0d1526; border: 1px solid rgba(255,255,255,.1); color: #eaf2ff;
  border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 700; cursor: pointer; }

/* Selbst-Bau-Leiter: Sprossen im Slip */
.lb-rung { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.lb-rnr { flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: rgba(56,189,248,.14); color: #38bdf8; font-weight: 800; border-radius: 7px; font-size: .82rem; }
.lb-rmid { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: #eaf2ff; }
.lb-rmid b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-rspiel { display: block; font-size: .68rem; color: #7f8db0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-rq { flex: 0 0 auto; text-align: right; font-size: .82rem; font-weight: 800; color: #f59e0b; }
.lb-rbet { display: block; font-size: .7rem; color: #c3f53c; }

/* Meine Auswahl / Selbstbau: linke Spalte + Turnier-Gruppen im Rechner-Stil */
.aw-liste { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.aw-liste .ko-turnier-inhalt.aw-spiele { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.ko-live { color: #c3f53c; font-weight: 800; }

/* =====================================================================
   SMARTE KOPFLEISTE (_nav.html) — Kategorien + Unterkategorien
   ===================================================================== */
.snav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 14px;
  background: #0b1120; border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 18px; }
.snav-brand { font-weight: 800; font-size: 1.08rem; color: #eaf2ff; text-decoration: none; white-space: nowrap; }
.snav-brand:hover { text-decoration: none; }
.snav-burger { display: none; margin-left: auto; background: none; border: none; color: #eaf2ff;
  font-size: 1.5rem; cursor: pointer; line-height: 1; }
.snav-menu { display: flex; align-items: center; gap: 2px; }
.snav-cat { position: relative; display: flex; align-items: center; }
.snav-btn { background: none; border: none; color: #cdd8ef; font-weight: 700; font-size: .88rem;
  margin: 0; width: auto; padding: 0 11px; height: 38px; line-height: 1; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.snav-btn i { font-style: normal; font-size: .66rem; color: #7f8db0; }
/* Emojis in der Nav sauber auf Textmitte, ohne die Zeilenbox aufzublaehen */
.snav .emo { vertical-align: middle; line-height: 1; }
.snav-auth a { height: 38px; }
.snav-btn:hover { background: rgba(255,255,255,.06); color: #eaf2ff; }
.snav-sub { position: absolute; top: 100%; left: 0; min-width: 230px; background: #0d1526;
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 6px; margin-top: 4px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5); display: none; flex-direction: column; z-index: 110; }
.snav-cat.offen .snav-sub { display: flex; }
.snav-cat.offen > .snav-btn { background: rgba(56,189,248,.14); color: #eaf2ff; }
.snav-cat.offen > .snav-btn i { transform: rotate(180deg); }
.snav-sub a { color: #cdd8ef; font-size: .86rem; font-weight: 600; padding: 9px 12px; border-radius: 8px;
  text-decoration: none; white-space: nowrap; }
.snav-sub a:hover { background: rgba(56,189,248,.14); color: #eaf2ff; text-decoration: none; }
.snav-auth { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.snav-auth a { color: #7f8db0; font-weight: 700; font-size: .85rem; text-decoration: none;
  padding: 8px 10px; display: inline-flex; align-items: center; white-space: nowrap; }
.snav-auth a:hover { color: #c3f53c; text-decoration: none; }
.snav-mini { color: #6f7d9c !important; font-size: .76rem !important; font-weight: 600 !important; opacity: .7; }
.snav-mini:hover { opacity: 1; }
.snav-sub-titel { display: block; color: #6b7a99; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px 2px; }

@media (max-width: 860px) {
  .snav { flex-wrap: wrap; gap: 10px; }
  .snav-burger { display: block; }
  .snav-menu { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 2px; margin-top: 6px; }
  .snav-menu.offen { display: flex; }
  .snav-cat { position: static; display: block; }
  .snav-btn { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1rem; border-radius: 10px;
    background: rgba(255,255,255,.03); }
  .snav-sub { position: static; box-shadow: none; margin: 0 0 4px; border: none;
    background: transparent; border-radius: 0; padding: 2px 2px 6px 16px; }
  .snav-sub a { padding: 11px 12px; font-size: .95rem; }
  .snav-auth { margin: 4px 0 0; width: 100%; }
}

/* Leiter-Nachtrag (manuelle Sprosse) */
.lb-nachtrag { margin-bottom: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 4px 10px; }
.lb-nachtrag > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: #38bdf8; padding: 7px 2px; list-style: none; }
.lb-nachtrag > summary::-webkit-details-marker { display: none; }
.lb-nachtrag[open] > summary { color: #eaf2ff; }
.lb-nt-hint { font-size: .72rem; color: #7f8db0; line-height: 1.45; margin: 4px 0 8px; }
.lb-nt-in { width: 100%; background: #0b1120; border: 1px solid rgba(255,255,255,.1); color: #eaf2ff;
  border-radius: 8px; padding: 8px 10px; font-size: .86rem; margin-bottom: 6px; }
.lb-nt-zeile { display: flex; gap: 6px; }
.lb-nt-zeile .lb-nt-in { width: 50%; }
.lb-nt-fehler { color: #fb7185; font-size: .74rem; margin-top: 6px; }
.lb-nt-tag { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: #38bdf8; background: rgba(56,189,248,.16); border-radius: 5px; padding: 1px 5px; vertical-align: middle; }

.lb-nt-tag.lb-nt-ok { color: #0d1526; background: #c3f53c; }

/* Tagebuch: Notiz je Eintrag */
.tb-notiz { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 6px; }
.tb-notiz > summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: #7f8db0; list-style: none; padding: 3px 0; }
.tb-notiz > summary::-webkit-details-marker { display: none; }
.tb-notiz[open] > summary { color: #eaf2ff; }
.tb-notiz-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tb-notiz-form textarea { width: 100%; background: #0b1120; border: 1px solid rgba(255,255,255,.1);
  color: #eaf2ff; border-radius: 8px; padding: 8px 10px; font-size: .85rem; font-family: inherit; resize: vertical; }
.tb-notiz-form button { align-self: flex-start; font-size: .8rem; padding: 6px 14px; }

/* Tagebuch: Auto-Update-Hinweis */
.tb-autoupdate { font-size: .8rem; color: #38bdf8; margin-top: 8px; background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.22); border-radius: 10px; padding: 8px 12px; display: inline-block; }

/* Leiter: Aktive Leitern (laufende committete Leitern mit Sprossen-Status) */
.al-box { background: #0d1526; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px 16px; margin: 0 0 18px; }
.al-kopf { font-size: 1rem; font-weight: 800; color: #eaf2ff; margin-bottom: 10px; }
.al-kopf span { color: #c3f53c; }
.al-leiter { border-top: 1px solid rgba(255,255,255,.06); padding: 10px 0; }
.al-leiter:first-of-type { border-top: none; }
.al-top { display: flex; align-items: center; gap: 10px; font-size: .8rem; }
.al-badge { font-weight: 700; color: #7f8db0; }
.al-fort { color: #38bdf8; font-weight: 800; }
.al-stat { margin-left: auto; font-weight: 800; }
.al-offen .al-stat { color: #f59e0b; } .al-gewonnen .al-stat { color: #c3f53c; } .al-verloren .al-stat { color: #fb7185; }
.al-meta { font-size: .74rem; color: #7f8db0; margin: 3px 0 8px; }
.al-meta b { color: #c3f53c; }
.al-sprossen { display: flex; flex-direction: column; gap: 4px; }
.al-sprosse { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.03); border-radius: 8px; padding: 6px 9px; }
.al-r-gewonnen { background: rgba(195,245,60,.08); }
.al-r-verloren { background: rgba(251,113,133,.08); }
.al-ico { flex: 0 0 auto; font-size: .82rem; }
.al-tipp { min-width: 0; font-size: .82rem; color: #eaf2ff; }
.al-tipp b { font-weight: 700; }
.al-spiel { display: block; font-size: .68rem; color: #7f8db0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fortsetzbare Leiter (Sprosse für Sprosse) */
.fl-box { background: #0d1526; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px 16px; margin: 0 0 18px; }
.fl-kopf { font-size: 1rem; font-weight: 800; color: #eaf2ff; margin-bottom: 10px; }
.fl-kopf .fl-hint { font-size: .72rem; color: #7f8db0; font-weight: 600; margin-left: 8px; }
.fl-leiter { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; }
.fl-leiter.fl-aktiv { border-color: rgba(195,245,60,.5); box-shadow: 0 0 0 1px rgba(195,245,60,.25) inset; }
.fl-geplatzt { opacity: .7; }
.fl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8rem; }
.fl-badge { font-weight: 700; color: #7f8db0; }
.fl-fort { color: #38bdf8; font-weight: 800; }
.fl-betrag { color: #7f8db0; } .fl-betrag b { color: #c3f53c; } .fl-betrag b.gold { color: #f59e0b; }
.fl-stat { margin-left: auto; font-weight: 800; }
.fl-offen .fl-stat { color: #f59e0b; } .fl-gewonnen .fl-stat { color: #c3f53c; } .fl-geplatzt .fl-stat { color: #fb7185; }
.fl-sprossen { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.fl-sprosse { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.03); border-radius: 8px; padding: 6px 9px; }
.fl-r-gewonnen { background: rgba(195,245,60,.08); } .fl-r-verloren { background: rgba(251,113,133,.08); }
.fl-ico { flex: 0 0 auto; font-size: .8rem; }
.fl-mid { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: #eaf2ff; }
.fl-mid b { font-weight: 700; }
.fl-spiel { display: block; font-size: .68rem; color: #7f8db0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-q { flex: 0 0 auto; color: #f59e0b; font-weight: 800; font-size: .82rem; }
.fl-leer { font-size: .78rem; color: #7f8db0; padding: 6px 0; }
.fl-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.fl-anhaeng-hint { font-size: .78rem; color: #c3f53c; font-weight: 700; }
.fl-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: #cdd8ef; }
.fl-neu select, .fl-neu input { background: #0b1120; border: 1px solid rgba(255,255,255,.1); color: #eaf2ff; border-radius: 8px; padding: 7px 10px; font-size: .85rem; }
.fl-neu input { width: 80px; }

/* ============================================================
   Pixel-Icons (Retro-Sprite-Set, static/pixel.svg)
   ============================================================ */
.px{display:inline-block;vertical-align:-0.18em;image-rendering:pixelated;
    image-rendering:crisp-edges;flex:0 0 auto}
.snav-brand .px{vertical-align:-0.22em}
.snav-btn .px{vertical-align:-0.22em;margin-right:3px}
.snav-sub a .px{vertical-align:-0.2em;margin-right:4px}

/* ===== Contrarian-Siege-Slider (Startseite) ===== */
.algo-contra-slider { position: relative; }
.algo-contra-slider .algo-contra { display: none; }
.algo-contra-slider .algo-contra.aktiv { display: flex; }
.contra-dots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.contra-dot { width: 8px; height: 8px; border-radius: 50%; cursor: pointer;
  background: var(--rand, #2a3550); transition: background .2s, transform .2s; }
.contra-dot.aktiv { background: var(--gruen, #c3f53c); transform: scale(1.25); }

/* ===== Contrarian-Siege: bunter Kasten ganz oben ===== */
.contra-top {
  max-width: 760px; margin: 16px auto 0; padding: 0; border-radius: 14px;
  background: var(--card, #0f1729);
  border: 1px solid var(--rand); border-top: 2px solid rgba(56,189,248,.55);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.contra-top .algo-contra-slider {
  background: transparent; border-radius: 13px; padding: 8px 18px;
}
/* Viewport mit FESTER Hoehe -> Kasten bleibt immer gleich gross, egal wie lang
   die Namen sind (Slides absolut, uebereinander gestapelt). Kompakt gehalten. */
.contra-top .contra-viewport { position: relative; height: 52px; }
.contra-top .contra-text { font-size: .84rem; line-height: 1.34; }
.contra-top .contra-meta { font-size: .74rem; }
/* innen kein zweiter Kasten – Inhalt sitzt direkt auf der dunklen Karte */
.contra-top .algo-contra {
  position: absolute; inset: 0; margin: 0; max-width: none;
  background: transparent; border: 0; box-shadow: none; padding: 0;
  align-items: center; overflow: hidden;
}
/* nur schmales Handy: hoeher, weil der Text dort mehr umbricht */
@media (max-width: 480px) {
  .contra-top .contra-viewport { height: 84px; }
  .contra-top .contra-text { font-size: .8rem; line-height: 1.3; }
}

/* Kompakte Navigationsleiste auf Mobil: Brand links, Burger rechts, EINE Zeile */
@media (max-width: 760px) {
  .snav { padding: 6px 14px; gap: 6px 0; justify-content: space-between; flex-wrap: wrap; }
  .snav-brand { font-size: .98rem; flex: 0 1 auto; }
  .snav-burger { margin-left: 0; font-size: 1.4rem; padding: 0 2px;
    flex: 0 0 auto; width: auto; }
}

/* ===== Value-Kasten neben dem Contrarian-Kasten ===== */
.top-boxen { display: flex; gap: 14px; max-width: 1120px; margin: 16px auto 0; align-items: stretch; }
.top-boxen .contra-top { margin: 0; max-width: none; flex: 1 1 0; min-width: 0; }
.value-top { border-top-color: rgba(195,245,60,.6); }
.value-edge { color: #c3f53c; }
@media (max-width: 860px) { .top-boxen { flex-direction: column; max-width: 760px; margin: 16px auto 0; } }
@media (max-width: 760px) { .top-boxen { margin: 12px 12px 0; } }


/* ===== Kombinierte Tages-Trefferquote (Startseite: Zahl mittig, Text klein darunter) ===== */
.tagesq { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; max-width: 1120px; box-sizing: border-box; margin: 14px auto 0;
  padding: 16px 32px; border-radius: 18px; text-decoration: none; text-align: center;
  background: color-mix(in srgb, #c3f53c 9%, var(--card));
  border: 2px solid color-mix(in srgb, #c3f53c 45%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .1s, box-shadow .12s; }
@media (max-width: 860px) { .tagesq { max-width: 760px; } }
@media (max-width: 760px) { .tagesq { margin: 12px 12px 0; width: auto; } }
.tagesq:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.4);
  text-decoration: none; }
.tagesq-quote { font-weight: 800; font-size: 3.6rem; color: #c3f53c;
  font-variant-numeric: tabular-nums; line-height: 1.02;
  text-shadow: 0 0 22px rgba(195,245,60,.35); }
.tagesq-txt { text-align: center; }
.tagesq-txt b { display: block; color: var(--text); font-size: .9rem; font-weight: 700; }
.tagesq-txt span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 480px) { .tagesq { padding: 14px 18px; }
  .tagesq-quote { font-size: 2.7rem; } }

/* ===== Kopf-Schnelllinks (Tennis/Fußball) + kompaktere Top-Kästen ===== */
.snav-quick { display: none; align-items: center; gap: 8px; }
.snav-quick a { display: inline-flex; align-items: center; gap: 4px; color: #cdd8ef;
  font-weight: 700; font-size: .92rem; text-decoration: none; padding: 5px 10px;
  border-radius: 9px; background: rgba(255,255,255,.05); white-space: nowrap; }
.snav-quick a:hover { background: rgba(56,189,248,.16); color: #eaf2ff; text-decoration: none; }
/* nur im Kompakt-/Burger-Modus: Brand links | Tennis/Fußball zentral | Burger rechts */
@media (max-width: 760px) { .snav-quick { display: flex; } }

/* Contrarian/Value-Kästen ab Tablet/Halb-Modus schlanker (Mobil-Höhe bleibt) */
@media (min-width: 761px) {
  .contra-top .contra-viewport { height: 52px; }
  .contra-top .algo-contra-slider { padding: 7px 18px; }
  .contra-top .contra-text { font-size: .84rem; line-height: 1.32; }
  .contra-top .contra-meta { font-size: .74rem; }
}

/* ===== Match-Statistik (Statrows): Tennis Aufschlag/Return + Fußball xG ===== */
.stat-teams { display: flex; justify-content: space-between; font-weight: 700;
  font-size: .85rem; color: var(--muted); margin: 2px 0 8px; }
.stat-sub { font-weight: 700; font-size: .78rem; color: #c3f53c;
  text-transform: uppercase; letter-spacing: .05em; margin: 13px 0 6px; }
.statrow { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center;
  gap: 9px; margin: 6px 0; }
.statrow .sr-v { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .96rem; color: var(--text); }
.statrow .sr-v:last-child { text-align: right; }
.statrow .sr-v.sr-top { color: #c3f53c; }
.sr-mid { display: flex; flex-direction: column; gap: 3px; }
.sr-label { font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.2; }
.sr-bar { position: relative; height: 6px; border-radius: 4px; background: #38bdf8; overflow: hidden; }
.sr-bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block;
  background: #c3f53c; border-radius: 4px; }

/* ===== Match-Seite: stabile, zentrierte Einzelspalte (kein column-count) ===== */
.match-cards { display: flex; flex-direction: column; gap: 16px;
  max-width: 860px; margin: 4px auto 0; }
.match-cards > .karte { margin: 0; }

/* Spielstand-Kasten oben auf der Fußball-Match-Seite */
.wm-dash > .match-score { margin: 0; text-align: center; }
.wm-dash > .match-score .dash-titel { text-align: left; }
.wm-dash > .match-score .wm-teams { justify-content: center; }

/* ===== Bundesliga-Kategorie ===== */
.bl-siegel { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 14px 0 6px; }
.bl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 16px; }
.bl-spiel { display: block; background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; text-decoration: none; color: var(--text); transition: transform .12s, border-color .12s; }
.bl-spiel:hover { transform: translateY(-2px); text-decoration: none;
  border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand)); }
.bl-spiel.is-live { border-color: color-mix(in srgb, #ef4444 50%, var(--rand)); }
.bl-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bl-meta { color: var(--muted); font-size: .78rem; }
.bl-teams { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 10px; font-weight: 700; }
.bl-team { flex: 1; text-align: right; }
.bl-team-r { text-align: left; }
.bl-score { font-size: 1.2rem; color: var(--gruen); font-variant-numeric: tabular-nums; flex: none; }
.bl-vs { color: var(--muted); flex: none; }
.bl-3weg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bl-zelle { background: rgba(255,255,255,.03); border: 1px solid var(--rand); border-radius: 10px;
  padding: 8px 6px; text-align: center; }
.bl-zelle.top { border-color: color-mix(in srgb, var(--gruen) 55%, transparent);
  background: color-mix(in srgb, var(--gruen) 8%, transparent); }
.bl-z-lbl { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; }
.bl-z-mod { display: block; font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.bl-zelle.top .bl-z-mod { color: var(--gruen); }
.bl-z-mkt { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
.bl-z-q { display: block; color: #8aa0c6; font-size: .72rem; font-weight: 700; }
.bl-value { margin-top: 8px; font-size: .8rem; color: #34d399; }
.badge-liga { background: rgba(56,189,248,.16); color: #38bdf8; font-weight: 800; font-size: .72rem;
  padding: 2px 8px; border-radius: 6px; }
.erg-liste { display: flex; flex-direction: column; gap: 8px; }
.erg-zeile { display: flex; align-items: center; gap: 10px; }
.erg-score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 46px; }
.erg-bar { flex: 1; height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.erg-bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #c3f53c); }
.erg-p { color: var(--gruen); font-weight: 800; min-width: 36px; text-align: right; }
@media (max-width: 520px) { .bl-liste { grid-template-columns: 1fr; } }

/* ===== Bundesliga: Spieltag-Navigation ===== */
.st-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.st-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--rand); color: var(--text); font-weight: 700;
  text-decoration: none; white-space: nowrap; transition: border-color .12s, transform .12s; }
.st-btn:hover { border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand)); transform: translateY(-1px); text-decoration: none; }
.st-btn.leer { opacity: .25; pointer-events: none; }
.st-mitte { text-align: center; line-height: 1.3; }
.st-mitte b { display: block; font-size: 1.15rem; }
.st-mitte span { color: var(--muted); font-size: .82rem; }
.pt-live { color: #f87171; font-weight: 800; }
@media (max-width: 480px) { .st-btn { padding: 8px 11px; font-size: .85rem; } .st-mitte b { font-size: 1rem; } }

/* ===== Abo / Pro (Stripe) ===== */
.abo-wrap { max-width: 620px; margin: 0 auto; }
.abo-testbanner { background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.4);
  color: #7fd6ff; border-radius: 10px; padding: 8px 12px; font-size: .82rem; margin: 8px 0 14px; text-align: center; }
.abo-kopf { text-align: center; margin-bottom: 14px; }
.abo-kopf h1 { display: inline-flex; align-items: center; gap: 8px; }
.abo-pro { background: linear-gradient(90deg, #c3f53c, #38bdf8); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; }
.abo-sub { color: var(--muted); line-height: 1.5; }
.abo-preis-karte { background: var(--card); border: 2px solid color-mix(in srgb, #c3f53c 45%, transparent);
  border-radius: 18px; padding: 22px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.28); margin: 6px 0 14px; }
.abo-preis-top { display: flex; align-items: baseline; gap: 10px; }
.abo-preis-gross { font-size: 3rem; font-weight: 800; color: #c3f53c; line-height: 1; }
.abo-preis-klein { color: var(--muted); font-weight: 600; }
.abo-preis-danach { color: var(--text); margin-top: 4px; }
.abo-liste { list-style: none; padding: 0; margin: 16px 0 18px; display: flex; flex-direction: column; gap: 9px; }
.abo-liste li { display: flex; align-items: center; gap: 9px; font-size: .92rem; }
.abo-cta { width: 100%; display: block; text-align: center; font-size: 1.05rem; padding: 14px; }
.abo-mini { color: var(--muted); font-size: .76rem; margin-top: 10px; line-height: 1.4; }
.abo-hinweis { color: #f8b95a; font-weight: 700; text-align: center; }
.abo-ehrlich { background: color-mix(in srgb, #f5a70b 12%, var(--card)); border: 1px solid rgba(245,167,11,.35);
  border-radius: 12px; padding: 12px 14px; font-size: .85rem; line-height: 1.5; margin-top: 8px; }
.abo-legal { color: var(--muted); font-size: .74rem; margin-top: 10px; text-align: center; }
.abo-karte { background: var(--card); border: 1px solid var(--rand); border-radius: 18px;
  padding: 28px 24px; text-align: center; margin-top: 12px; }
.abo-karte.abo-aktiv { border-color: color-mix(in srgb, #c3f53c 50%, transparent); }
.abo-karte h1 { margin: 10px 0 6px; }
.abo-karte .btn-primary, .abo-karte .btn-secondary { margin: 6px 6px 0; display: inline-block; }
.abo-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(195,245,60,.15);
  color: #c3f53c; font-weight: 800; padding: 5px 12px; border-radius: 999px; font-size: .82rem; }
.abo-emoji { margin-bottom: 6px; }
.snav-pro { color: #0d1526 !important; background: linear-gradient(90deg, #c3f53c, #38bdf8);
  font-weight: 800; padding: 5px 12px; border-radius: 9px; }

/* ===== Abo kündigen (eigener Flow) ===== */
.abo-kuend-link { display: inline-block; margin-top: 14px; color: var(--muted);
  font-size: .86rem; text-decoration: underline; }
.abo-kuend-link:hover { color: #f87171; }
.abo-kuend-form { text-align: left; margin-top: 18px; }
.abo-kuend-frage { font-weight: 700; margin: 0 0 10px; }
.abo-kuend-frage span { color: var(--muted); font-weight: 400; font-size: .85rem; }
.abo-gruende { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.abo-grund { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--rand); border-radius: 10px; cursor: pointer; transition: border-color .12s; }
.abo-grund:hover { border-color: var(--accent); }
.abo-grund input { accent-color: var(--accent); }
.abo-komm { width: 100%; box-sizing: border-box; background: var(--card); color: var(--text);
  border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; font: inherit;
  resize: vertical; margin-bottom: 16px; }
.btn-gefahr { color: #fff; background: linear-gradient(90deg, #ef4444, #f87171);
  border: 1px solid transparent; padding: 11px 20px; border-radius: 10px; font-weight: 700;
  cursor: pointer; display: block; width: 100%; text-align: center; }
.btn-gefahr:hover { filter: brightness(1.05); }
.abo-behalten { display: block; text-align: center; margin-top: 10px; }

/* Modell-Tipp: nach dem Spiel nur wenn er RICHTIG war (grün markiert) */
.mtipp-treffer { border-color: color-mix(in srgb, #22c55e 55%, transparent) !important;
  background: color-mix(in srgb, #22c55e 10%, var(--card)) !important; }
.mtipp-treffer .mtipp-lbl { color: #22c55e; }

/* ===== Pro-Sperre (Modell-Inhalte hinter Abo) ===== */
.pro-sperre { display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: color-mix(in srgb, #c3f53c 7%, var(--card));
  border: 1.5px dashed color-mix(in srgb, #c3f53c 50%, var(--rand));
  border-radius: 12px; padding: 12px 14px; margin: 6px 0; color: var(--text);
  transition: transform .12s, border-color .12s; }
.pro-sperre:hover { transform: translateY(-1px); text-decoration: none;
  border-color: #c3f53c; }
.pro-schloss { font-size: 1.3rem; flex: none; }
.pro-txt { display: flex; flex-direction: column; line-height: 1.3; }
.pro-txt b { font-size: .95rem; }
.pro-txt span { color: var(--muted); font-size: .78rem; }
.pro-pfeil { margin-left: auto; flex: none; font-weight: 800; font-size: .8rem;
  color: #0d1526; background: linear-gradient(90deg, #c3f53c, #38bdf8);
  padding: 5px 11px; border-radius: 999px; }
.pro-chip { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  background: rgba(195,245,60,.14); color: #c3f53c; font-weight: 800; font-size: .78rem;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pro-chip:hover { text-decoration: none; background: rgba(195,245,60,.24); }
.awc-pro { color: #c3f53c; }

/* ===== Rechtstexte ===== */
.recht { max-width: 760px; margin: 0 auto; }
.recht-hinweis { background: color-mix(in srgb, #f5a70b 12%, var(--card)); border: 1px solid rgba(245,167,11,.35);
  border-radius: 10px; padding: 10px 14px; font-size: .85rem; margin: 8px 0 16px; }
.recht-text { line-height: 1.6; }
.recht-text h2 { font-size: 1.1rem; margin: 18px 0 6px; }
.recht-text p, .recht-text ul { color: var(--text); margin: 6px 0; }
.recht-text ul { padding-left: 20px; }
.recht-text code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.recht-text a { color: #38bdf8; }

/* Native Emojis (System-Font, auf Apple = Apple-Emojis) */
.emo { display: inline-block; line-height: 1; vertical-align: -0.12em;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-style: normal; }

/* ===== Bento-Grid (Kategorien-Schaufenster, minimalistisch) ===== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 22px; }
.bento-kachel { grid-column: span 2; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--rand); border-radius: 16px;
  padding: 18px; text-decoration: none; color: var(--text); position: relative;
  transition: transform .14s, border-color .14s; }
.bento-kachel:hover { transform: translateY(-3px); text-decoration: none;
  border-color: color-mix(in srgb, var(--gruen) 42%, var(--rand)); }
.bento-kachel.gross { grid-column: span 3; padding: 24px; min-height: 156px; }
.bento-emoji { font-size: 2rem; line-height: 1; margin-bottom: 6px; }
.bento-kachel b { font-size: 1.02rem; }
.bento-kachel.gross b { font-size: 1.5rem; }
.bento-sub { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.bento-pfeil { margin-top: auto; padding-top: 12px; color: var(--gruen); font-weight: 700; font-size: .85rem; }
@media (max-width: 720px) { .bento { grid-template-columns: 1fr 1fr; }
  .bento-kachel, .bento-kachel.gross { grid-column: auto; min-height: 0; } }
@media (max-width: 440px) { .bento { grid-template-columns: 1fr; } }

/* ---------- Spielerfingerabdruck ---------- */
.fp-suche { display: flex; gap: 8px; margin-bottom: 20px; }
.fp-suche input[type=text] {
  flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--card); color: var(--text); font-size: 1rem; margin: 0;
}
.fp-suche button { margin: 0; width: auto; white-space: nowrap; }

.fp-treffer { display: grid; gap: 6px; margin-bottom: 20px; }
.fp-treffer-titel { color: var(--muted); margin: 0 0 4px; font-size: .9rem; }
.fp-treffer-zeile {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border: 1px solid var(--rand); border-radius: 12px;
  background: var(--card); color: var(--text); transition: border-color .15s, transform .15s;
}
.fp-treffer-zeile:hover { border-color: var(--accent); transform: translateX(3px); }
.fp-treffer-zeile span { color: var(--accent); }
.fp-leer { color: var(--muted); margin-bottom: 20px; }

.fp-karte {
  background: var(--card); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--schatten); margin-bottom: 28px;
}
.fp-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fp-name { font-size: 1.5rem; font-weight: 800; }
.fp-label { color: var(--accent); font-weight: 600; margin-top: 2px; }
.fp-rang { text-align: right; }
.fp-rang-n { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.fp-rang span { color: var(--muted); font-size: .78rem; }

.fp-body { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: center;
  margin-top: 16px; }
.fp-radar-wrap { display: flex; justify-content: center; }
.fp-radar { width: 100%; max-width: 340px; height: auto; overflow: visible; }

.fp-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.fp-zahl { background: var(--bg-2); border-radius: 12px; padding: 12px; text-align: center; }
.fp-zahl b { display: block; font-size: 1.15rem; }
.fp-zahl span { color: var(--muted); font-size: .72rem; }

.fp-belag { display: grid; gap: 10px; }
.fp-belag-zeile { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; }
.fp-belag-name { font-weight: 700; font-size: .9rem; }
.fp-bar { height: 10px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.fp-bar.sm { height: 7px; }
.fp-bar-fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #22d3ee); }
.fp-belag-val { font-weight: 700; font-size: .88rem; text-align: right; white-space: nowrap; }
.fp-belag-val small { display: block; color: var(--muted); font-weight: 500; font-size: .68rem; }

.fp-rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.fp-rolle { background: var(--bg-2); border-radius: 12px; padding: 14px; }
.fp-rolle-t { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.fp-rolle b { display: block; font-size: 1.4rem; margin: 2px 0; }
.fp-rolle small { color: var(--muted); font-size: .74rem; }

.fp-form { margin-top: 20px; }
.fp-form-t { color: var(--muted); font-size: .82rem; }
.fp-form-punkte { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.fp-fp { width: 16px; height: 16px; border-radius: 4px; }
.fp-fp.sieg { background: var(--gruen); }
.fp-fp.nl { background: var(--rot); opacity: .55; }

.fp-ehrlich { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rand);
  color: var(--muted); font-size: .84rem; }

.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fp-kachel { display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 16px;
  color: var(--text); transition: border-color .15s, transform .15s; }
.fp-kachel:hover { border-color: var(--accent); transform: translateY(-2px); }
.fp-kachel-kopf { display: flex; justify-content: space-between; align-items: center; }
.fp-kachel-kopf b { font-size: 1.05rem; }
.fp-kachel-rang { color: var(--muted); font-weight: 700; font-size: .82rem; }
.fp-kachel-label { color: var(--accent); font-size: .82rem; font-weight: 600; }
.fp-mini { display: grid; gap: 5px; margin: 4px 0; }
.fp-mini-zeile { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; }
.fp-mini-zeile span { color: var(--muted); font-size: .74rem; }
.fp-kachel-pfeil { color: var(--accent); font-size: .82rem; font-weight: 600; margin-top: auto; }

@media (max-width: 640px) {
  .fp-body { grid-template-columns: 1fr; }
  .fp-rollen { grid-template-columns: 1fr; }
  .fp-zahlen { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- obere Algo-Kachelreihe + Info-Seiten ---------- */
.algo-kacheln.oben { margin-bottom: 18px; }
.info-flow { display: grid; gap: 16px; max-width: 760px; }
.info-block { background: var(--card); border: 1px solid var(--rand); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--schatten); }
.info-block h2 { margin: 0 0 8px; font-size: 1.15rem; }
.info-block p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.info-block p:last-child { margin-bottom: 0; }
.info-block b { color: var(--text); }

/* ---------- Oval-Länderflagge ---------- */
.flagge { display: inline-block; height: var(--fh, 22px); width: calc(var(--fh, 22px) * 1.5);
  border-radius: 50%; overflow: hidden; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset; flex: 0 0 auto; }
.flagge img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- "Modell tippt" – Neon-Kasten pro Match (eigene Zeile) ---------- */
.mtipp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(195,245,60,.10), rgba(195,245,60,.03));
  border: 1.5px solid #c3f53c; border-radius: 14px; padding: 13px 18px;
  box-shadow: 0 0 18px rgba(195,245,60,.28); }
.mtipp-lbl { color: #c3f53c; text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem; font-weight: 800; white-space: nowrap; }
.mtipp b { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.mtipp .mtipp-meta { margin-left: auto; color: var(--muted); font-weight: 700; font-size: .9rem;
  white-space: nowrap; }
.mtipp .mtipp-meta .q { color: #c3f53c; }
.mtipp-pro { color: #c3f53c; font-size: 1rem; }

/* Leer-Zustand des Tagebuch-Profils (noch keine entschiedenen Wetten) */
.cnp-leer-profil { border: 1px dashed var(--rand); border-radius: 14px; padding: 30px 20px;
  background: var(--card); text-align: center; }
.cnp-leer-graph { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cnp-leer-icon { font-size: 1.7rem; opacity: .8; }
.cnp-leer-graph b { color: var(--text); font-size: 1rem; }
.cnp-leer-sub { color: var(--muted); font-size: .85rem; max-width: 460px; line-height: 1.5; }