/* KickScope V2.1 – Designsystem.
   Zusammengefuehrt aus dem V2.1-Next-Projekt (app/globals.css + styles/*.css).
   Reihenfolge wie dort geladen; Klassennamen sind identisch, damit das
   PHP-Markup unveraendert uebernommen werden kann.
   NICHT von Hand aendern - Quelle ist V2.1/app/globals.css und V2.1/styles/.
*/

/* ================= app/globals.css ================= */
@font-face{font-family:"KS Display";src:url("/fonts/barlow-sc-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"KS Display";src:url("/fonts/barlow-sc-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:dark;
  --background:#050b14;
  --surface:#0a1421;
  --surface-elevated:#111e2e;
  --panel:#0b1523;
  --panel-hover:#142339;
  --gold:#e2bd65;
  --gold-muted:#9a7c3f;
  --text-primary:#f3f5f8;
  --text-secondary:#a6b2c1;
  --text-muted:#6f7d90;
  --border:rgba(172,190,212,.13);
  --live:#f0445e;
  --success:#43ca85;
  --luna-purple:#9a7cf5;
  --blue:#6eaeff;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;
  --shadow-card:0 10px 28px rgba(0,0,0,.2);--shadow-float:0 18px 44px rgba(0,0,0,.38);
  --transition-fast:150ms ease;--transition-base:220ms ease;
  --sidebar-width:clamp(184px,15vw,244px);
  /* Alias-Namen für vorhandene V2-Seiten und Komponenten. */
  --obsidian:var(--background);--deep-navy:#091321;--card-navy:var(--panel);--secondary-navy:#142238;
  --champagne:#f1d38a;--white:var(--text-primary);--secondary-text:var(--text-secondary);--electric-blue:#287dff;
  --free:var(--success);--bg:var(--background);--panel-2:#09121f;--panel-hi:var(--panel-hover);
  --line:rgba(226,189,101,.2);--line-soft:var(--border);--ink:var(--text-primary);--ink-2:var(--text-secondary);--ink-3:var(--text-muted);
  --gold-a:#f1d58e;--gold-b:#c39a48;--gold-ink:#1a1408;--live-bg:rgba(240,68,94,.13);--radius:var(--radius-md);--shadow:var(--shadow-float);
}
*{box-sizing:border-box}
html{margin:0;min-height:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 45% -190px,#14253a 0,transparent 55%),var(--background);color:var(--text-primary);font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:14px;line-height:1.48;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}img{display:block;max-width:100%}h1,h2,h3,h4,p{margin-top:0}.disp{font-family:"KS Display","Arial Narrow",sans-serif;text-transform:uppercase}.gold{color:var(--gold)}.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}::selection{color:#120e06;background:#e2bd65}
.skip-link{position:fixed;z-index:150;top:8px;left:-999px;padding:10px 14px;border-radius:8px;background:var(--gold);color:#16120a;font-weight:800}.skip-link:focus{left:10px}

/* Gemeinsamer Header: Markenblock über der linken Navigation. */
.topbar{position:sticky;top:0;z-index:60;background:rgba(5,11,20,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.topbar-in{width:min(100%,1900px);min-height:60px;margin:0 auto;padding:8px 16px;display:grid;grid-template-columns:var(--sidebar-width) minmax(200px,1fr) auto;gap:14px;align-items:center}
.brand{min-width:0;display:flex;align-items:center;gap:8px}.brand-crest{width:35px;height:40px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:var(--gold)}.brand-crest svg{margin-bottom:-2px;filter:drop-shadow(0 2px 4px rgba(226,189,101,.2))}.brand-crest b{font-family:"KS Display",sans-serif;font-size:18px;line-height:.95;letter-spacing:-.05em}.brand-word{display:flex;flex-direction:column;gap:1px}.brand-word strong{color:#f2f4f8;font-size:17px;font-weight:850;line-height:1.05;letter-spacing:-.055em}.brand-word>span{font-size:7px;letter-spacing:.2em;color:var(--text-muted);font-weight:750;white-space:nowrap}.version-pill,.new-badge{padding:2px 7px;border-radius:6px;background:linear-gradient(120deg,#ffe39c,#c49637);color:#191307;font-size:9px;font-weight:900;line-height:1.5;white-space:nowrap}
.search{position:relative;min-width:0;max-width:none}.search>input{width:100%;height:38px;border:1px solid rgba(156,178,202,.2);border-radius:11px;background:linear-gradient(120deg,#0c1726,#111c2a);color:var(--text-primary);padding:0 76px 0 42px;font-size:12px;transition:border-color var(--transition-fast),background var(--transition-fast)}.search>input::placeholder{color:#8593a6}.search>input:focus{outline:none;border-color:rgba(226,189,101,.7);background:#0f1a2a}.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a2b6;pointer-events:none;display:flex}.search:after{content:"Ctrl  K";position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:3px 7px;border:1px solid var(--border);border-radius:5px;color:var(--text-muted);font-size:9px;pointer-events:none}.search-drop{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:75;max-height:320px;overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--border);border-radius:12px;background:#0b1522;box-shadow:var(--shadow-float)}.search-drop li{display:flex;flex-direction:column;padding:9px 11px;border-radius:7px;cursor:pointer}.search-drop li.on,.search-drop li:hover{background:rgba(226,189,101,.12)}.search-drop .sd-label{font-weight:700}.search-drop .sd-sub{font-size:11px;color:var(--text-muted)}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}.luna-header,.account-button,.icon-button{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025);transition:background var(--transition-fast),border-color var(--transition-fast)}.luna-header{padding:0 12px;color:#d6caff;font-size:12px;font-weight:750}.luna-header svg{color:var(--luna-purple)}.luna-header span{padding:2px 5px;border-radius:4px;background:#493c19;color:#f3d889;font-size:8px}.luna-header:hover,.account-button:hover,.icon-button:hover{border-color:rgba(226,189,101,.42);background:rgba(255,255,255,.06)}.icon-button{position:relative;width:38px;color:var(--text-secondary)}.notification-button i{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:100%;background:var(--live);box-shadow:0 0 8px rgba(240,68,94,.65)}.account-button{padding:3px 8px 3px 4px;gap:7px}.account-avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:100%;background:linear-gradient(145deg,#364762,#141d2b);color:var(--gold);font-size:10px;font-weight:800}.account-button>span:nth-child(2){display:grid;gap:0;text-align:left}.account-button b{font-size:10px;line-height:1.25}.account-button small{display:flex;align-items:center;gap:3px;color:#edcf86;font-size:9px}.account-button>svg{color:var(--text-muted)}
.mainnav{display:block;position:relative;z-index:30;border-bottom:1px solid var(--border);background:rgba(7,14,24,.7)}.mainnav-in{width:min(100%,1900px);margin:0 auto;padding:0 16px;display:flex;gap:3px;overflow:auto;scrollbar-width:none}.mainnav-in::-webkit-scrollbar{display:none}.mainnav a{display:flex;align-items:center;gap:7px;padding:10px 11px;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:11px;font-weight:700;white-space:nowrap}.mainnav a:hover{color:var(--text-primary)}.mainnav a.active{border-color:var(--gold);color:var(--gold)}.mainnav .ic{display:inline-flex}

/* Referenzraster: Navigation links, Match-Center und Utility-Spalte. */
.layout{width:min(100%,1900px);margin:0 auto;padding:12px 16px 36px;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr) clamp(258px,22vw,310px);gap:14px;align-items:start}
.col-left{position:sticky;top:74px;min-width:0;max-height:calc(100vh - 84px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(146,164,188,.22) transparent;display:flex;flex-direction:column;gap:15px;padding:2px 0 10px}.sidenav{display:grid;gap:2px}.sidenav a{position:relative;min-height:32px;display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;color:var(--text-secondary);font-size:11px;font-weight:650;transition:background var(--transition-fast),color var(--transition-fast)}.sidenav a>svg{flex:none;color:#91a0b5}.sidenav a:hover{background:rgba(255,255,255,.04);color:var(--text-primary)}.sidenav a.active{background:linear-gradient(90deg,rgba(226,189,101,.2),rgba(226,189,101,.065));color:#f2d98e}.sidenav a.active:before{position:absolute;content:"";left:0;top:6px;bottom:6px;width:2px;border-radius:0 2px 2px 0;background:var(--gold)}.sidenav a.active>svg{color:var(--gold)}.sidenav a>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-badge{margin-left:auto;padding:1px 5px;border-radius:5px;background:#3451b2;color:white;font-size:8px;font-weight:900}.nav-badge.live{background:#e72d4e}
.team-nav{padding-top:10px;border-top:1px solid var(--border)}.sidebar-section-head{display:flex;justify-content:space-between;align-items:center;margin:0 2px 6px}.sidebar-section-head h2{margin:0;color:var(--text-muted);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.sidebar-section-head a{font-size:9px;color:#9cb4d1}.sidebar-section-head a:hover{color:var(--gold)}.team-nav-item{display:flex;align-items:center;gap:8px;min-height:27px;padding:3px 5px;border-radius:7px;color:var(--text-secondary);font-size:10px;font-weight:600}.team-nav-item:hover{background:rgba(255,255,255,.045);color:var(--text-primary)}.team-nav-item img{width:20px;height:20px;object-fit:contain;flex:none}.utility-nav{display:grid;gap:1px;padding-top:9px;border-top:1px solid var(--border)}.utility-nav a{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:7px;color:var(--text-secondary);font-size:10px}.utility-nav a svg{color:#93a2b6}.utility-nav a:hover{background:rgba(255,255,255,.04);color:var(--text-primary)}.theme-toggle{width:max-content;display:flex;align-items:center;gap:7px;margin:0 3px;padding:5px 9px;border:1px solid var(--border);border-radius:var(--radius-pill);background:rgba(255,255,255,.025);color:#e9ce81;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}.theme-toggle:hover{border-color:rgba(226,189,101,.5);background:rgba(255,255,255,.06)}.toggle-knob{width:28px;height:15px;padding:2px;border-radius:var(--radius-pill);background:#192538}.toggle-knob i{display:block;width:11px;height:11px;border-radius:50%;background:#9aacc3;transition:transform var(--transition-fast)}:root[data-theme="light"] .toggle-knob i{transform:translateX(13px);background:#f2ce73}
.col-center{min-width:0;display:flex;flex-direction:column;gap:10px}.col-right{min-width:0;display:flex;flex-direction:column;gap:10px}
.panel{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(155deg,rgba(13,24,39,.97),rgba(8,16,27,.97));box-shadow:var(--shadow-card)}

/* Local preview labels, hero image and editorial teasers. */
.preview-notice{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 3px;color:var(--text-muted);font-size:9px}.preview-notice>span:first-child{display:flex;align-items:center;gap:5px;color:#ddc47f;font-weight:750;letter-spacing:.025em}.hero-row{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(205px,.9fr);gap:9px;min-height:186px}.hero-feature{position:relative;isolation:isolate;min-width:0;min-height:186px;overflow:hidden;border:1px solid rgba(226,189,101,.18);border-radius:14px;background:#0c1420;box-shadow:var(--shadow-card)}.hero-photo{z-index:-2;object-fit:cover;object-position:68% 42%}.hero-scrim{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(3,9,16,.98) 0%,rgba(4,10,18,.86) 37%,rgba(4,10,18,.16) 72%,rgba(4,10,18,.12) 100%),linear-gradient(0deg,rgba(4,9,16,.44),transparent 55%)}.hero-copy{position:relative;width:min(69%,440px);height:100%;min-height:186px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px 16px}.eyebrow{display:inline-flex;align-items:center;gap:5px;margin-bottom:8px;padding:3px 7px;border:1px solid rgba(246,219,146,.3);border-radius:5px;background:rgba(224,188,98,.14);color:#f5d783;font-size:8px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.hero-copy h1{max-width:390px;margin:0 0 7px;font-family:"KS Display",sans-serif;font-size:clamp(23px,2.2vw,32px);font-weight:700;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}.hero-copy p{max-width:365px;margin:0 0 11px;color:#c3cbd5;font-size:10px;line-height:1.5}.hero-cta{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(226,189,101,.58);border-radius:7px;background:linear-gradient(110deg,rgba(226,189,101,.27),rgba(226,189,101,.08));color:#f1d58e;font-size:9px;font-weight:800}.hero-cta:hover{background:rgba(226,189,101,.2)}.hero-demo{position:absolute;right:8px;bottom:7px;color:rgba(255,255,255,.64);font-size:7px;font-weight:800;letter-spacing:.08em}.top-stories{min-width:0;padding:10px 10px 7px}.small-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 5px}.small-section-heading h2,.small-section-heading h3{margin:0;font-size:11px;font-weight:800}.small-section-heading>span{color:var(--text-muted);font-size:7px;font-weight:800;letter-spacing:.1em}.top-story{min-width:0;min-height:34px;display:grid;grid-template-columns:43px minmax(0,1fr) 12px;gap:7px;align-items:center;padding:5px 1px;border-top:1px solid rgba(255,255,255,.05)}.story-thumb{height:30px;display:grid;place-items:center;border-radius:6px;background:radial-gradient(circle at 30% 30%,#62778d,#18273b 65%);color:#f2d68c}.story-thumb-2{background:radial-gradient(circle at 60% 20%,#8f515b,#30212c 70%)}.story-thumb-3{background:radial-gradient(circle at 55% 30%,#977c48,#2b2418 70%)}.story-thumb-4{background:radial-gradient(circle at 50% 30%,#526782,#182335 70%)}.story-text{min-width:0;display:grid;gap:2px}.story-text strong{overflow:hidden;color:#e6e9ef;font-size:9px;line-height:1.26;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.story-text small{overflow:hidden;color:var(--text-muted);font-size:7px;white-space:nowrap;text-overflow:ellipsis}.story-text small i,.news-meta i{display:inline-block;width:3px;height:3px;margin:0 4px 2px;border-radius:50%;background:var(--gold-muted)}.top-story>svg{color:var(--text-muted)}.top-story:hover strong{color:#f1d58e}

/* Heute, Filter und kompakte Spielkarten. */
.section{min-width:0}.matches-section{padding:2px 1px 0}.section-head{display:flex;align-items:end;gap:10px;margin:0 0 8px}.section-head>div{min-width:0}.section-kicker{display:block;margin-bottom:1px;color:#75849a;font-size:7px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.section-head h2{display:flex;align-items:center;gap:7px;margin:0;font-family:"KS Display",sans-serif;font-size:20px;line-height:1.05;font-weight:700;letter-spacing:.005em}.count-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:5px;background:rgba(240,68,94,.13);color:#ff7487;font-family:Inter,system-ui,sans-serif;font-size:8px;font-weight:900;letter-spacing:.035em}.count-badge i,.live-dot{width:5px;height:5px;border-radius:50%;background:var(--live);box-shadow:0 0 8px rgba(240,68,94,.65)}.text-link{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:#d6be7c;font-size:9px;font-weight:700;white-space:nowrap}.text-link:hover{color:#f3dfaa}.chip-row{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:2px 0 7px}.chip-row::-webkit-scrollbar{display:none}.filter-chip{flex:none;min-height:23px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid rgba(169,185,207,.1);border-radius:var(--radius-pill);background:#101b2a;color:#acb6c4;font-size:8px;font-weight:700;white-space:nowrap;cursor:pointer;transition:all var(--transition-fast)}.filter-chip:hover{border-color:rgba(226,189,101,.35);color:#f2e5c1}.filter-chip.selected{border-color:rgba(226,189,101,.44);background:rgba(226,189,101,.16);color:#f1d68d}.fixture-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.fixture-card{min-width:0;padding:8px 8px 7px;border:1px solid rgba(147,165,190,.13);border-radius:11px;background:linear-gradient(150deg,#101d2c,#0a1421);transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}.fixture-card:hover{transform:translateY(-1px);border-color:rgba(226,189,101,.35);background:linear-gradient(150deg,#14243a,#0c1726)}.fixture-card.is-live{border-color:rgba(240,68,94,.31)}.fixture-top{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:3px;margin-bottom:8px}.fixture-league{min-width:0;display:inline-flex;align-items:center;gap:4px;overflow:hidden;color:#aab4c2;font-size:7px;font-weight:750;white-space:nowrap;text-overflow:ellipsis}.fixture-league svg{flex:none;color:#9baec8}.live-pill{flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 4px;border-radius:5px;background:#721e2e;color:#ff9baa;font-size:7px;font-weight:900;white-space:nowrap}.live-pill i{width:4px;height:4px;border-radius:50%;background:#ff5571}.fixture-time{color:#c4cedb;font-size:8px;font-weight:750;white-space:nowrap}.fixture-teams{display:flex;align-items:center;justify-content:space-between;gap:3px}.fixture-team{width:39%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.fixture-team>span{width:100%;overflow:hidden;color:#e5eaf1;font-size:8px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}.fixture-team .crest{width:29px;height:29px;font-size:8px}.fixture-team .crest img{padding:2px}.fixture-score{flex:1;color:#f2d788;font-family:"KS Display",sans-serif;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}.fixture-score small{color:#75849a;font-family:Inter,system-ui,sans-serif;font-size:8px}.fixture-events{min-height:20px;display:flex;justify-content:space-between;gap:3px;margin:7px 0 6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.055);color:#8795a7;font-size:7px}.fixture-events span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fixture-events span:last-child{text-align:right}.fixture-actions{display:flex;gap:4px}.fixture-actions a{flex:1;min-width:0;min-height:23px;display:flex;justify-content:center;align-items:center;gap:3px;padding:2px;border:1px solid rgba(151,170,194,.14);border-radius:6px;background:rgba(255,255,255,.025);color:#c0c9d5;font-size:7px;font-weight:650;white-space:nowrap}.fixture-actions a:hover{border-color:rgba(226,189,101,.42);color:#eed58f}.fixture-actions svg{flex:none}.empty-filter{grid-column:1/-1;padding:20px;border:1px dashed var(--border);border-radius:10px;color:var(--text-secondary);text-align:center;font-size:11px}

/* Development ad: no network, publisher identifier or external script. */
.ad-slot{position:relative;min-width:0;min-height:45px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:7px 12px;overflow:hidden;border:1px dashed rgba(198,164,88,.32);border-radius:10px;background:linear-gradient(100deg,rgba(226,189,101,.07),rgba(12,21,33,.55) 45%,rgba(226,189,101,.035));color:#e5d29b}.ad-slot>span{display:flex;align-items:center;gap:4px;font-size:7px;font-weight:850;letter-spacing:.12em}.ad-slot strong{font-family:"KS Display",sans-serif;font-size:12px}.ad-slot small{color:var(--text-muted);font-size:8px}.ad-sidebar{min-height:76px}

/* Editorial cards with Luna analysis. */
.headlines-section{padding-top:3px}.headlines-head{margin-bottom:6px}.headlines-head h2{font-size:20px}.news-chips{padding-bottom:8px}.news-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(205px,.9fr);gap:8px}.news-feed{display:grid;gap:7px}.news-card{min-width:0;display:grid;grid-template-columns:112px minmax(0,1fr);gap:9px;padding:7px;border:1px solid rgba(147,165,190,.12);border-radius:10px;background:linear-gradient(140deg,#101b2a,#0a1320)}.news-art{position:relative;min-height:86px;display:grid;place-items:center;overflow:hidden;border-radius:7px;background:radial-gradient(ellipse at 68% 30%,rgba(217,185,101,.42),transparent 28%),linear-gradient(130deg,#344356,#101a28 66%);color:rgba(245,218,144,.82)}.news-art:before,.news-art:after{position:absolute;content:"";width:112px;height:39px;left:-12px;bottom:4px;border-radius:100% 100% 0 0;background:linear-gradient(0deg,#101820,#172535);transform:rotate(-12deg)}.news-art:after{width:82px;height:26px;left:auto;right:-9px;bottom:2px;opacity:.68}.news-art svg{z-index:1;filter:drop-shadow(0 5px 10px rgba(0,0,0,.35))}.news-art-2{background:radial-gradient(ellipse at 22% 40%,rgba(79,139,183,.4),transparent 31%),linear-gradient(125deg,#263b4b,#101925 70%)}.news-art-3{background:radial-gradient(ellipse at 75% 28%,rgba(220,102,76,.4),transparent 29%),linear-gradient(125deg,#3b2931,#151823 70%)}.news-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.news-meta{display:flex;align-items:center;gap:4px;margin-bottom:4px;color:#8593a6;font-size:7px;white-space:nowrap}.news-meta>span:first-child{overflow:hidden;color:#e1c77e;font-weight:800;text-overflow:ellipsis}.news-meta svg{flex:none}.demo-label{padding:1px 4px;border-radius:3px;background:rgba(226,189,101,.12);color:#d9bf78;font-size:6px;font-weight:900;letter-spacing:.06em}.news-copy h3{display:-webkit-box;overflow:hidden;margin:0 0 3px;color:#eef1f5;font-size:10px;font-weight:800;line-height:1.28;-webkit-line-clamp:2;-webkit-box-orient:vertical}.news-copy p{display:-webkit-box;overflow:hidden;margin:0;color:#a7b2c0;font-size:8px;line-height:1.38;-webkit-line-clamp:2;-webkit-box-orient:vertical}.news-copy>a{display:inline-flex;align-items:center;gap:4px;margin-top:5px;color:#dbbf76;font-size:8px;font-weight:750}.news-card:hover{border-color:rgba(226,189,101,.3)}.insight-column{display:grid;align-content:start;gap:7px}.luna-insight{position:relative;overflow:hidden;padding:10px;border-color:rgba(154,124,245,.29);background:radial-gradient(150px 110px at 100% 0,rgba(154,124,245,.14),transparent 72%),linear-gradient(150deg,#15192b,#0b1421)}.insight-heading{display:flex;align-items:center;gap:7px}.luna-orb{width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(178,158,255,.35);border-radius:50%;background:rgba(154,124,245,.14);color:#c5b4ff;box-shadow:0 0 17px rgba(154,124,245,.12)}.insight-heading>div{display:flex;align-items:center;gap:5px}.section-kicker.purple{margin:0;color:#c4b4ff}.insight-demo{padding:1px 4px;border-radius:4px;background:rgba(154,124,245,.16);color:#c5b4ff;font-size:6px;font-weight:800}.luna-insight h3{margin:8px 0 4px;font-size:10px;font-weight:800;line-height:1.35}.luna-insight>p{margin:0;color:#aeb4c1;font-size:8px;line-height:1.45}.luna-link{display:inline-flex;align-items:center;gap:4px;margin-top:7px;padding:5px 8px;border:1px solid rgba(183,164,255,.26);border-radius:6px;background:rgba(154,124,245,.13);color:#d3c9ff;font-size:7px;font-weight:750}.insight-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}.insight-stats span{display:grid;gap:1px;text-align:center}.insight-stats b{font-family:"KS Display",sans-serif;font-size:12px}.insight-stats small{color:#8793a5;font-size:6px}.trend-card{padding:8px 10px}.trend-card .small-section-heading{margin-bottom:3px}.trend-card .small-section-heading>svg{color:#91a3bc}.trend-row{min-height:23px;display:flex;align-items:center;gap:6px;border-top:1px solid rgba(255,255,255,.045)}.trend-row>span{width:15px;color:#d9bf7d;font-size:8px;font-weight:800}.trend-row strong{flex:1;overflow:hidden;color:#c5cdd7;font-size:8px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.trend-row svg{color:var(--text-muted)}.trend-row:hover strong{color:#f0d58f}

/* Utility panels in the right rail. */
.right-panel{min-width:0;padding:10px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(155deg,#0d1928,#091320);box-shadow:var(--shadow-card)}.right-heading{display:flex;align-items:center;gap:6px;margin-bottom:8px}.right-heading h2{margin:0;font-size:12px;font-weight:800}.right-heading>a{display:inline-flex;align-items:center;margin-left:auto;color:#9cb8df;font-size:8px;font-weight:700}.right-heading>a:hover{color:#f1d58d}.right-heading .live-dot{margin-left:auto}.right-search{height:30px;display:flex;align-items:center;gap:6px;padding:3px 4px 3px 8px;border:1px solid rgba(146,165,191,.17);border-radius:8px;background:#0a1421;color:#8596ac}.right-search>input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text-primary);font-size:9px}.right-search>input::placeholder{color:#77869a}.right-search button{width:24px;height:23px;display:grid;place-items:center;border:0;border-radius:6px;background:#15243a;color:#c5d1e0}.minor-heading{margin:8px 0 5px;color:#97a4b4;font-size:9px;font-weight:700}.popular-searches{display:flex;flex-wrap:wrap;gap:4px}.popular-searches a,.question-chips a{padding:4px 7px;border:1px solid rgba(151,170,194,.1);border-radius:var(--radius-pill);background:#111e2e;color:#c0cad7;font-size:8px;font-weight:650;white-space:nowrap}.popular-searches a:hover,.question-chips a:hover{border-color:rgba(226,189,101,.38);color:#f1d58e}
.favorites-panel{padding-bottom:9px}.favorite-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.favorite-team,.add-favorite{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 1px;border:0;border-radius:8px;background:transparent;color:#96a4b7;font-size:7px;font-weight:750;cursor:pointer}.favorite-team:hover,.favorite-team.active{background:rgba(255,255,255,.04);color:#e9d48e}.favorite-crest,.add-favorite>span{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(167,184,207,.14);border-radius:50%;background:linear-gradient(145deg,#142237,#0c1521)}.favorite-team.active .favorite-crest{border-color:rgba(226,189,101,.3)}.favorite-crest img{width:25px;height:25px;object-fit:contain}.add-favorite>span{border-style:dashed;color:#a9b7ca}.add-favorite:hover{color:#eed58e}
.premium-panel{position:relative;overflow:hidden;padding:11px;border:1px solid rgba(226,189,101,.43);border-radius:13px;background:radial-gradient(170px 115px at 85% 0,rgba(226,189,101,.18),transparent 72%),linear-gradient(140deg,#282317,#131a21 70%);box-shadow:0 9px 26px rgba(0,0,0,.24)}.premium-panel-top{display:flex;align-items:center;gap:7px}.crown-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(226,189,101,.15);color:#f2d68b}.premium-panel-top>div{min-width:0;flex:1}.premium-panel h2{margin:0;color:#f3dfab;font-family:"KS Display",sans-serif;font-size:15px;line-height:1.15}.premium-panel p{margin:2px 0 0;color:#c9b990;font-size:8px}.premium-panel-top .new-badge{font-size:7px}.premium-panel ul{display:grid;gap:4px;margin:9px 0;padding:0;list-style:none}.premium-panel li{display:flex;align-items:center;gap:6px;color:#d9d5cb;font-size:8px}.premium-panel li svg{flex:none;color:#e5c970}.premium-panel>a{min-height:28px;display:flex;justify-content:center;align-items:center;gap:6px;padding:4px 8px;border:1px solid rgba(255,227,156,.46);border-radius:7px;background:linear-gradient(115deg,#f4d993,#c69e4d);color:#201707;font-size:8px;font-weight:900;box-shadow:0 4px 12px rgba(211,171,76,.18)}.premium-panel>a:hover{filter:brightness(1.06)}
.luna-title .luna-orb{width:22px;height:22px}.luna-title h2{color:#e2d8ff}.luna-title .new-badge{background:rgba(154,124,245,.22);color:#d2c3ff;font-size:7px}.luna-title>a{margin-left:auto;color:#c5b4ff}.luna-prompt{min-height:31px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;border:1px solid rgba(154,124,245,.24);border-radius:8px;background:#10162a;color:#9ea7b7;font-size:8px}.luna-prompt svg{color:#bcaaff}.question-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.question-chips a{font-size:7px}.quick-links{padding:9px}.quick-links .right-heading{margin-bottom:3px}.quick-links .right-heading>svg{margin-left:auto;color:var(--gold)}.quick-links>a{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-top:1px solid rgba(255,255,255,.045);color:var(--text-secondary);font-size:8px}.quick-links>a svg{color:var(--text-muted)}.right-portrait{display:none;position:relative;min-height:130px;overflow:hidden;border:1px solid rgba(154,124,245,.2);border-radius:12px;opacity:.7}.right-portrait img{object-fit:cover;object-position:50% 18%}

/* Footer and bottom mobile navigation. */
.footer{border-top:1px solid var(--border);background:rgba(5,11,20,.85)}.footer-in{width:min(100%,1900px);margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.footer .brand{gap:5px}.footer .brand-crest{width:26px;height:28px}.footer .brand-crest svg{width:10px;height:10px}.footer .brand-crest b{font-size:13px}.footer .brand-word strong{font-size:13px}.footer .brand-word>span{font-size:6px}.footer .center{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;color:#bda458;font-family:"KS Display",sans-serif;font-size:11px;letter-spacing:.17em}.footer-in>a{color:var(--text-muted);font-size:9px}.footer-in>a:hover{color:var(--gold)}.footer .socials{display:flex;gap:7px}.footer .socials a{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--text-secondary)}.footer .socials a:hover{border-color:var(--gold);color:var(--gold)}.mobnav{display:none}.luna-fab{display:none}

/* Shared styling for existing route components retained from V2. */
.box{padding:16px}.rt-head{display:flex;align-items:center;margin:2px 2px 14px}.rt-head h3{margin:0;font-size:16px}.rt-head .more{margin-left:auto;color:var(--gold);font-weight:700;font-size:12px}.games{display:flex;flex-direction:column;gap:8px}.game{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:border-color var(--transition-fast),background var(--transition-fast)}.game:hover{border-color:var(--line);background:var(--panel-hover)}.game.live{border-color:rgba(240,68,94,.3)}.game .when{text-align:center}.game .when .live-badge{display:inline-block;padding:2px 8px;border-radius:5px;background:var(--live);color:white;font-size:10px;font-weight:800}.game .when .min{display:block;margin-top:4px;color:#ff7487;font-size:12px;font-weight:800}.game .when .t{font-family:"KS Display",sans-serif;font-size:20px;font-weight:700}.game .when .day{display:block;color:var(--text-muted);font-size:11px}.game .mid{min-width:0}.game .comp{display:flex;align-items:center;gap:7px;margin-bottom:6px;color:var(--text-muted);font-size:11px}.game .comp .cbadge{width:16px;height:16px}.game .teams{display:flex;align-items:center;gap:10px}.game .side{flex:1;min-width:0;display:flex;align-items:center;gap:9px}.game .side.away{flex-direction:row-reverse;text-align:right}.game .side .nm{overflow:hidden;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.game .score{min-width:58px;color:var(--gold);font-family:"KS Display",sans-serif;font-size:21px;font-weight:700;text-align:center}.game .vs{min-width:44px;color:var(--text-muted);font-size:13px;font-weight:700;text-align:center}.game .end{display:flex;align-items:center;gap:12px}.game .tv{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.05);color:var(--text-secondary)}.game .go{color:var(--text-muted)}.crest{width:34px;height:34px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:white;font-size:11px;font-weight:800}.crest.logo{background:#fff}.crest img{width:100%;height:100%;padding:3px;object-fit:contain}.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:0;border-radius:9px;background:linear-gradient(180deg,var(--gold-a),var(--gold-b));color:var(--gold-ink);font-size:14px;font-weight:800}.btn-gold:hover{filter:brightness(1.06)}.list-more{width:100%;margin-top:4px;padding:12px;border:1px dashed var(--line);border-radius:12px;background:transparent;color:var(--text-secondary);text-align:center;font-weight:700}.px-wrap{width:min(100% - 32px,1100px);margin:22px auto}.px-hero{display:flex;align-items:center;gap:18px;margin-bottom:20px;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}

/* Breakpoints correspond to desktop, tablet, portrait tablet and phone layouts. */
@media(max-width:1380px){.layout,.topbar-in{padding-left:12px;padding-right:12px;gap:10px}.layout{grid-template-columns:clamp(176px,17vw,218px) minmax(0,1fr) clamp(238px,22vw,278px)}.hero-row{grid-template-columns:minmax(0,1.45fr) minmax(190px,.9fr)}.fixture-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.fixture-card{padding:9px 10px}.fixture-top{margin-bottom:6px}.fixture-team{flex-direction:column;justify-content:center;text-align:center}.fixture-team:last-child{flex-direction:column;text-align:center}.fixture-team>span{display:-webkit-box;min-height:18px;overflow:hidden;font-size:8px;line-height:1.1;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}.fixture-team .crest{width:25px;height:25px}.fixture-events{min-height:14px;margin:5px 0}.fixture-actions a{min-height:21px}.news-layout{grid-template-columns:minmax(0,1.3fr) minmax(190px,.9fr)}}
@media(max-width:1120px){.topbar-in{grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-areas:"brand actions" "search search";row-gap:8px}.brand{grid-area:brand}.search{grid-area:search}.header-actions{grid-area:actions}.layout{grid-template-columns:190px minmax(0,1fr)}.col-right{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.fixture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fixture-team{flex-direction:row;justify-content:flex-start;text-align:left}.fixture-team:last-child{flex-direction:row-reverse;text-align:right}.fixture-team>span{display:block;min-height:0;font-size:9px;white-space:nowrap}.ad-sidebar{display:none}.right-portrait{display:none}.col-left{top:112px;max-height:calc(100vh - 122px)}.hero-row{grid-template-columns:minmax(0,1.5fr) minmax(190px,.9fr)}.news-layout{grid-template-columns:minmax(0,1.35fr) minmax(190px,.9fr)}}
@media(max-width:820px){.layout{grid-template-columns:minmax(0,1fr);padding:10px 14px 82px}.col-left{display:none}.col-right{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.col-right>.ad-slot,.quick-links{display:none}.hero-row{grid-template-columns:minmax(0,1.5fr) minmax(185px,.9fr)}.hero-copy{width:75%;padding:16px 13px}.topbar-in{grid-template-columns:minmax(0,1fr) auto;padding:8px 14px}.brand .emblem{width:36px;height:36px}.luna-header{padding:0 9px}.mainnav{display:none}.mobnav{position:fixed;z-index:80;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:5px 5px max(5px,env(safe-area-inset-bottom));border-top:1px solid rgba(226,189,101,.2);background:rgba(7,14,24,.97);backdrop-filter:blur(18px)}.mobnav a{min-height:45px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#96a5b8;font-size:8px;font-weight:700}.mobnav a.active{color:var(--gold)}.mobnav a svg{width:18px;height:18px}.moreband{margin:16px 14px;padding:16px}.footer-in{padding-bottom:76px}}
@media(max-width:600px){.topbar-in{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:7px 11px}.brand{gap:6px}.brand .emblem{width:31px;height:31px}.brand-word img{height:19px}.brand-word>span{font-size:6px}.version-pill{font-size:7px;padding:1px 5px}.header-actions{gap:5px}.luna-header{width:34px;height:34px;padding:0;font-size:0}.luna-header svg{width:16px;height:16px}.luna-header span{display:none}.notification-button{width:33px;height:33px}.account-button{height:34px;padding-right:5px;gap:4px}.account-avatar{width:25px;height:25px}.account-button>span:nth-child(2){display:none}.account-button>svg{width:11px}.search>input{height:36px;font-size:10px;padding-left:38px}.search:after{font-size:8px}.layout{padding:8px 10px 82px;gap:10px}.preview-notice{font-size:8px}.hero-row{grid-template-columns:1fr;gap:7px}.hero-feature{min-height:190px}.hero-copy{min-height:190px;width:77%;padding:16px 13px}.hero-copy h1{font-size:25px}.hero-copy p{font-size:9px}.top-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 7px;padding:8px}.top-stories .small-section-heading{grid-column:1/-1}.top-story{grid-template-columns:34px minmax(0,1fr) 10px;gap:5px}.story-thumb{height:27px}.story-text strong{font-size:8px}.section-head h2,.headlines-head h2{font-size:19px}.section-head{align-items:center}.text-link{font-size:8px}.fixture-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.fixture-card{padding:8px 7px}.fixture-team{gap:4px}.fixture-team>span{font-size:8px}.fixture-team .crest{width:22px;height:22px}.fixture-score{font-size:16px}.fixture-events{font-size:6px}.fixture-actions{gap:3px}.fixture-actions a{font-size:6px}.news-layout{grid-template-columns:1fr}.news-card{grid-template-columns:92px minmax(0,1fr)}.news-art{min-height:80px}.news-copy h3{font-size:10px}.news-copy p{font-size:8px}.insight-column{grid-template-columns:1fr 1fr;align-items:start}.luna-insight,.trend-card{height:100%}.col-right{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.right-panel{padding:8px}.premium-panel{padding:9px}.premium-panel h2{font-size:13px}.right-heading h2{font-size:10px}.popular-searches a{font-size:7px;padding:4px 6px}.question-chips a{white-space:normal;font-size:6px}.right-search>input{font-size:8px}.favorite-crest,.add-favorite>span{width:28px;height:28px}.favorite-crest img{width:22px;height:22px}.ad-hero-bottom{min-height:42px}.footer-in{gap:9px}.footer .center{display:none}.footer-in>a{font-size:8px}}
@media(max-width:380px){.layout{padding-right:8px;padding-left:8px}.hero-copy h1{font-size:22px}.hero-copy{width:82%}.section-head h2,.headlines-head h2{font-size:17px}.fixture-team>span{font-size:7px}.fixture-actions a{gap:2px;font-size:5.7px}.fixture-actions svg{width:10px}.news-card{grid-template-columns:78px minmax(0,1fr);gap:7px;padding:6px}.insight-column{grid-template-columns:1fr}.luna-insight>p{font-size:9px}.col-right{grid-template-columns:1fr 1fr}}
:root[data-theme="light"]{color-scheme:light;--background:#eef2f6;--surface:#fff;--surface-elevated:#fff;--panel:#fff;--panel-hover:#f2f5f8;--text-primary:#172435;--text-secondary:#4d5c70;--text-muted:#738196;--border:rgba(47,64,85,.15);--gold:#a77a20;--gold-muted:#99751f;--shadow-card:0 8px 24px rgba(28,43,60,.08);--shadow-float:0 16px 40px rgba(28,43,60,.14);--line:rgba(167,122,32,.23);--line-soft:var(--border);--ink:var(--text-primary);--ink-2:var(--text-secondary);--ink-3:var(--text-muted);--bg:var(--background);--panel-2:#f7f9fb;--panel-hi:#f2f5f8}
:root[data-theme="light"] body{background:#eef2f6;color:#172435}
:root[data-theme="light"] .topbar{background:rgba(255,255,255,.95)}
:root[data-theme="light"] .brand-word strong{color:#172435}
:root[data-theme="light"] .search>input{border-color:var(--border);background:#f7f9fb;color:#172435}
:root[data-theme="light"] .search>input::placeholder{color:#68778a}
:root[data-theme="light"] .mainnav{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .panel,:root[data-theme="light"] .right-panel,:root[data-theme="light"] .fixture-card,:root[data-theme="light"] .news-card,:root[data-theme="light"] .trend-card{border-color:var(--border);background:#fff;color:#172435}
:root[data-theme="light"] .filter-chip{border-color:var(--border);background:#fff;color:#536176}
:root[data-theme="light"] .filter-chip.selected{background:rgba(167,122,32,.12);color:#76540f}
:root[data-theme="light"] .story-text strong,:root[data-theme="light"] .fixture-team>span,:root[data-theme="light"] .news-copy h3,:root[data-theme="light"] .trend-row strong{color:#19283a}
:root[data-theme="light"] .story-text small,:root[data-theme="light"] .fixture-events,:root[data-theme="light"] .news-copy p{color:#68778a}
:root[data-theme="light"] .right-search{border-color:var(--border);background:#f7f9fb}
:root[data-theme="light"] .right-search>input{color:#172435}
:root[data-theme="light"] .favorite-crest,:root[data-theme="light"] .add-favorite>span{border-color:var(--border);background:#f5f7fa}
:root[data-theme="light"] .theme-toggle{background:#fff}
:root[data-theme="light"] .section-head h2,:root[data-theme="light"] .small-section-heading h2,:root[data-theme="light"] .small-section-heading h3,:root[data-theme="light"] .right-heading h2{color:#172435}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* KickScope V2.1 visual polish: restore the 100% desktop reading scale. */
body{font-size:15px;line-height:1.52}
@media(min-width:821px){
  :root{--sidebar-width:clamp(205px,14vw,276px)}
  .topbar-in{min-height:72px;gap:18px;padding-top:10px;padding-bottom:10px}
  .brand{gap:11px}.brand-crest{width:42px;height:46px}.brand-crest b{font-size:21px}.brand-word strong{font-size:21px}.brand-word>span{font-size:9px}.version-pill{font-size:11px;padding:3px 9px}
  .search>input{height:46px;font-size:15px}.search:after{font-size:11px;padding:4px 8px}.search .ic{left:16px}
  .header-actions{gap:11px}.luna-header,.account-button,.icon-button{height:46px}.luna-header{font-size:14px;padding:0 15px}.luna-header span{font-size:10px}.icon-button{width:46px}.account-button{padding:4px 11px 4px 5px}.account-avatar{width:34px;height:34px;font-size:12px}.account-button b{font-size:13px}.account-button small{font-size:11px}
  .layout{gap:16px;padding-top:16px}.col-center,.col-right{gap:14px}.col-left{top:88px;max-height:calc(100vh - 98px);gap:18px}
  .sidenav{gap:4px}.sidenav a{min-height:41px;padding:8px 12px;gap:12px;font-size:15px}.sidenav a>svg{width:20px;height:20px}.nav-badge{font-size:10px;padding:2px 7px}
  .team-nav{padding-top:14px}.sidebar-section-head{margin-bottom:9px}.sidebar-section-head h2{font-size:12px}.sidebar-section-head a{font-size:12px}.team-nav-item{min-height:35px;gap:10px;padding:5px 7px;font-size:13px}.team-nav-item img{width:25px;height:25px}.utility-nav{padding-top:12px;gap:3px}.utility-nav a{padding:8px 9px;font-size:13px}.utility-nav a svg{width:19px;height:19px}
  .preview-notice{font-size:12px;padding:3px 4px}.preview-notice>span:first-child{gap:7px}.hero-row{gap:14px;min-height:270px}.hero-feature{min-height:270px;border-radius:17px}.hero-copy{min-height:270px;width:min(72%,600px);padding:28px 28px}.hero-copy h1{max-width:570px;font-size:clamp(36px,2.55vw,48px);margin-bottom:12px}.hero-copy p{max-width:520px;margin-bottom:18px;font-size:15px;line-height:1.55}.eyebrow{font-size:12px;gap:7px;margin-bottom:12px;padding:6px 10px}.hero-cta{gap:9px;padding:11px 16px;font-size:14px}.hero-demo{right:12px;bottom:10px;font-size:10px}
  .top-stories{padding:16px 17px 12px}.small-section-heading{margin-bottom:9px}.small-section-heading h2,.small-section-heading h3{font-size:17px}.small-section-heading>span{font-size:10px}.top-story{grid-template-columns:58px minmax(0,1fr) 16px;gap:11px;min-height:53px;padding:7px 2px}.story-thumb{height:43px;border-radius:8px}.story-thumb svg{width:21px;height:21px}.story-text{gap:3px}.story-text strong{font-size:14px;line-height:1.3}.story-text small{font-size:11px}
  .section{scroll-margin-top:90px}.section-head{margin-bottom:13px;gap:14px}.section-kicker{font-size:10px;margin-bottom:4px}.section-head h2{gap:10px;font-size:27px}.count-badge{font-size:11px;padding:5px 9px;gap:6px}.text-link{font-size:13px}.chip-row{gap:8px;margin-bottom:12px}.filter-chip{min-height:34px;padding:6px 13px;gap:6px;font-size:12px}.matches-section{padding-top:4px}
  .fixture-grid{gap:12px}.fixture-card{min-height:214px;padding:16px 15px 13px;border-radius:14px}.fixture-top{gap:8px;margin-bottom:14px}.fixture-league{gap:7px;font-size:12px}.fixture-league svg{width:16px;height:16px}.live-pill{gap:5px;padding:5px 8px;font-size:11px}.fixture-teams{gap:8px}.fixture-team{gap:7px}.fixture-team .crest{width:46px;height:46px;font-size:14px}.fixture-team .crest img{padding:4px}.fixture-team>span{font-size:15px;line-height:1.2;font-weight:700}.fixture-score{font-size:32px}.fixture-score small{font-size:16px}.fixture-events{min-height:27px;gap:8px;margin:12px 0 10px;padding-top:9px;font-size:11px}.fixture-actions{gap:7px}.fixture-actions a{min-height:34px;gap:5px;padding:5px 8px;border-radius:8px;font-size:11px}.fixture-actions svg{width:15px;height:15px}
  .ad-hero-bottom{min-height:68px}.ad-slot{border-radius:14px}
  .headlines-head h2{font-size:27px}.news-layout{gap:14px}.news-feed{gap:12px}.news-card{grid-template-columns:minmax(150px,34%) minmax(0,1fr);gap:14px;padding:12px;border-radius:13px}.news-art{min-height:128px;border-radius:9px}.news-art svg{width:40px;height:40px}.news-copy{padding:4px 0}.news-meta{gap:6px;margin-bottom:7px;font-size:11px}.news-copy h3{font-size:18px;line-height:1.28;margin-bottom:7px}.news-copy p{font-size:14px;line-height:1.48;-webkit-line-clamp:3}.news-copy>a{gap:6px;margin-top:9px;font-size:13px}.demo-label{padding:2px 6px;font-size:9px}.insight-column{gap:12px}.luna-insight{padding:17px}.insight-heading{gap:9px}.section-kicker.purple{font-size:11px}.insight-demo{font-size:10px}.luna-insight h3{font-size:18px;margin:12px 0 7px}.luna-insight>p{font-size:13px;line-height:1.48}.luna-link{min-height:34px;padding:7px 11px;font-size:12px}.insight-stats{margin-top:14px;padding-top:11px}.insight-stats b{font-size:17px}.insight-stats small{font-size:11px}.trend-card{padding:14px}.trend-row{min-height:37px;gap:9px;font-size:13px}
  .col-right{gap:13px}.right-panel{padding:17px;border-radius:15px}.right-heading{gap:9px;margin-bottom:11px}.right-heading h2{font-size:18px}.right-heading>a{font-size:12px}.right-search{min-height:43px;padding:4px 6px 4px 10px}.right-search>input{font-size:13px}.right-search button{width:32px;height:32px}.minor-heading{margin:12px 0 8px;font-size:13px}.popular-searches{gap:7px}.popular-searches a{padding:7px 10px;font-size:11px}.favorite-grid{gap:7px}.favorite-team,.add-favorite{gap:6px;font-size:11px}.favorite-crest,.add-favorite>span{width:45px;height:45px}.favorite-crest img{width:37px;height:37px}.add-favorite>span svg{width:23px;height:23px}
  .premium-panel{padding:19px;border-radius:17px}.premium-panel-top{gap:11px}.crown-mark{width:39px;height:39px}.crown-mark svg{width:23px;height:23px}.premium-panel h2{font-size:20px}.premium-panel p{font-size:13px}.premium-panel .new-badge{font-size:10px}.premium-panel ul{gap:8px;margin:14px 0}.premium-panel li{gap:8px;font-size:13px}.premium-panel li svg{width:17px;height:17px}.premium-panel>a{min-height:41px;padding:8px 12px;font-size:14px}
  .luna-quick-panel{padding:17px}.luna-title{gap:8px}.luna-title .luna-orb{width:30px;height:30px}.luna-prompt{min-height:43px;padding:8px 10px;font-size:12px}.question-chips{gap:7px;margin-top:10px}.question-chips a{padding:6px 9px;font-size:11px;white-space:normal}.ad-sidebar{min-height:150px}.quick-links{padding:16px}.quick-links>a{min-height:37px;font-size:13px}
}
@media(min-width:1600px){
  .layout{grid-template-columns:var(--sidebar-width) minmax(0,1fr) clamp(340px,19vw,370px)}
  .fixture-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fixture-team,.fixture-team:last-child{flex-direction:column;justify-content:center;text-align:center;gap:7px}
  .fixture-team>span{display:block;max-width:100%;overflow:visible;font-size:14px;line-height:1.15;white-space:normal;text-overflow:clip}
}
@media(min-width:821px) and (max-width:1599px){
  .fixture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fixture-card{min-height:205px}
  .fixture-team,.fixture-team:last-child{flex-direction:column;justify-content:center;text-align:center;gap:7px}
  .fixture-team>span{display:block;min-height:0;max-width:100%;overflow:visible;font-size:15px;line-height:1.15;text-align:center;white-space:normal;text-overflow:clip}
}
@media(max-width:820px){
  body{font-size:14px}
  .mobnav{grid-template-columns:repeat(7,minmax(0,1fr))}
  .mobnav a{font-size:9px}
}
@media(max-width:600px){
  .brand-word strong{font-size:16px}.topbar-in{min-height:60px}.search>input{font-size:12px}
  .preview-notice{font-size:10px}.hero-feature,.hero-copy{min-height:220px}.hero-copy{width:82%;padding:18px 16px}.hero-copy h1{font-size:28px}.hero-copy p{font-size:12px}.eyebrow{font-size:10px}.hero-cta{padding:9px 12px;font-size:12px}
  .top-stories{padding:11px}.small-section-heading h2,.small-section-heading h3{font-size:14px}.top-story{grid-template-columns:42px minmax(0,1fr) 12px;min-height:42px;gap:7px}.story-thumb{height:34px}.story-text strong{font-size:11px}.story-text small{font-size:9px}
  .section-head h2,.headlines-head h2{font-size:21px}.section-kicker{font-size:9px}.text-link{font-size:10px}.filter-chip{min-height:30px;padding:5px 10px;font-size:10px}
  .fixture-grid{grid-template-columns:1fr;gap:9px}.fixture-card{min-height:172px;padding:13px 12px}.fixture-top{margin-bottom:10px}.fixture-league{font-size:10px}.live-pill{font-size:9px}.fixture-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:7px}.fixture-team,.fixture-team:last-child{width:100%;min-width:0;flex-direction:column;justify-content:center;gap:6px;text-align:center}.fixture-team .crest{width:36px;height:36px}.fixture-team>span{display:block;min-height:30px;max-width:100%;overflow:visible;font-size:12px!important;line-height:1.2;text-align:center;white-space:normal;text-overflow:clip}.fixture-score{font-size:24px}.fixture-events{font-size:10px;min-height:22px;margin:9px 0 8px;padding-top:7px}.fixture-actions a{min-height:31px;font-size:10px}.fixture-actions svg{width:13px;height:13px}
  .news-card{grid-template-columns:100px minmax(0,1fr);gap:9px;padding:8px}.news-art{min-height:98px}.news-copy h3{font-size:14px}.news-copy p{font-size:11px}.news-meta{font-size:9px}.news-copy>a{font-size:10px}.insight-column{grid-template-columns:1fr}.luna-insight{padding:12px}.luna-insight h3{font-size:15px}.luna-insight>p{font-size:11px}
  .col-right{gap:8px}.right-panel{padding:10px}.right-heading h2{font-size:12px}.popular-searches a{font-size:9px}.premium-panel{padding:11px}.premium-panel h2{font-size:14px}.premium-panel li{font-size:9px}.premium-panel>a{min-height:31px;font-size:10px}.favorite-crest,.add-favorite>span{width:32px;height:32px}.favorite-crest img{width:26px;height:26px}.question-chips a{font-size:8px}.luna-prompt{font-size:9px}
}
@media(max-width:380px){
  .fixture-team>span{font-size:9px}.fixture-actions a{font-size:7px}.fixture-score{font-size:19px}.news-card{grid-template-columns:86px minmax(0,1fr)}.news-copy h3{font-size:13px}.news-copy p{font-size:10px}.col-right{grid-template-columns:1fr 1fr}
}
.home-tipp-card{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;overflow:hidden;padding:19px 22px;border:1px solid rgba(226,189,101,.34);border-radius:16px;background:radial-gradient(380px 160px at 6% 110%,rgba(226,189,101,.13),transparent 70%),linear-gradient(110deg,#121d2b,#0a1421 70%);box-shadow:0 12px 34px rgba(0,0,0,.2)}
.home-tipp-card:after{position:absolute;z-index:-1;right:-18px;top:-55px;width:190px;height:190px;border:1px solid rgba(226,189,101,.1);border-radius:50%;content:"";box-shadow:0 0 0 20px rgba(226,189,101,.025),0 0 0 40px rgba(226,189,101,.02)}
.home-tipp-emblem{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(226,189,101,.32);border-radius:14px;background:linear-gradient(145deg,rgba(226,189,101,.19),rgba(226,189,101,.05));color:var(--gold);box-shadow:0 0 25px rgba(226,189,101,.1)}
.home-tipp-copy{min-width:0}.home-tipp-kicker{display:block;margin-bottom:4px;color:#d8bb71;font-size:10px;font-weight:850;letter-spacing:.12em}.home-tipp-copy h2{margin:0 0 3px;color:#f2e3ba;font-family:"KS Display",sans-serif;font-size:22px;line-height:1.1}.home-tipp-copy p{margin:0;color:var(--text-secondary);font-size:14px}.home-tipp-actions{display:flex;align-items:center;gap:9px}.home-tipp-primary,.home-tipp-secondary{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:9px;font-size:13px;font-weight:800;white-space:nowrap;transition:transform var(--transition-fast),filter var(--transition-fast)}.home-tipp-primary{background:linear-gradient(180deg,var(--gold-a),var(--gold-b));color:var(--gold-ink);box-shadow:0 5px 18px rgba(226,189,101,.18)}.home-tipp-secondary{border:1px solid rgba(226,189,101,.3);background:rgba(226,189,101,.06);color:#eed89f}.home-tipp-primary:hover,.home-tipp-secondary:hover{transform:translateY(-1px);filter:brightness(1.08)}
@media(max-width:1120px) and (min-width:821px){.home-tipp-card{grid-template-columns:auto minmax(0,1fr);gap:12px}.home-tipp-actions{grid-column:2;flex-wrap:wrap}}
@media(max-width:600px){.home-tipp-card{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:13px}.home-tipp-emblem{width:40px;height:40px;border-radius:11px}.home-tipp-emblem svg{width:20px;height:20px}.home-tipp-kicker{font-size:8px}.home-tipp-copy h2{font-size:16px}.home-tipp-copy p{font-size:11px}.home-tipp-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.home-tipp-primary,.home-tipp-secondary{min-height:36px;padding:7px 8px;font-size:11px}}
:root[data-theme="light"] .home-tipp-card{border-color:rgba(167,122,32,.38);background:radial-gradient(380px 160px at 6% 110%,rgba(167,122,32,.1),transparent 70%),linear-gradient(110deg,#fff,#f5f4ef)}
:root[data-theme="light"] .home-tipp-copy h2{color:#4e3a15}:root[data-theme="light"] .home-tipp-secondary{color:#6a501c}
.tp-demo-notice{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(226,189,101,.2);border-radius:10px;background:rgba(226,189,101,.045);color:var(--text-secondary);font-size:12px}.tp-demo-notice span{flex:none;color:#d8bb71;font-size:10px;font-weight:850;letter-spacing:.09em}
@media(max-width:600px){.tp-demo-notice{align-items:flex-start;font-size:10px;line-height:1.4}.tp-demo-notice span{font-size:9px}}
/* Production schedule events without a two-team fixture. */
.game .event-title{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.35}

/* ================= styles/catalog.css ================= */
/* Wettbewerbe- & Vereine-Verzeichnisse + Detailseiten. Ergänzt globals.css. */

.cat-wrap { max-width: 1180px; margin: 22px auto 0; padding: 0 22px; display: flex; flex-direction: column; gap: 18px; }

.cat-hero {
  border-radius: 16px; border: 1px solid var(--line); padding: 24px 28px;
  background: radial-gradient(500px 220px at 82% -40%, rgba(216,173,79,.14), transparent 60%),
    linear-gradient(135deg, #12203a, #0a1220);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cat-hero .ch-badge { flex: 0 0 auto; }
.cat-hero .cbadge { width: 68px; height: 68px; }
.cat-hero .crest { width: 68px; height: 68px; font-size: 20px; }
.cat-hero h1 { font-size: 32px; margin: 0 0 4px; }
.cat-hero p { margin: 0; color: var(--ink-2); font-size: 14px; }
.cat-hero .ch-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.chip-static { padding: 4px 11px; border-radius: 14px; background: rgba(255,255,255,.05);
  border: 1px solid var(--line-soft); color: var(--ink-2); font-size: 12px; font-weight: 600; }

/* Wettbewerbs-Gitter */
.comp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.comp-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel), var(--panel-2)); transition: border-color .15s, transform .15s; }
.comp-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.comp-card .cbadge { width: 46px; height: 46px; flex: 0 0 auto; }
.comp-card b { font-size: 15px; display: block; }
.comp-card span { font-size: 12px; color: var(--ink-3); }

/* A–Z Vereinsverzeichnis */
.az-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.az-nav a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--line-soft); color: var(--ink-2); font-weight: 700; font-size: 13px; }
.az-nav a:hover { color: var(--gold); border-color: var(--gold); }
.az-group h2 { font-family: "KS Display", sans-serif; font-size: 22px; margin: 18px 0 10px;
  color: var(--gold); border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.team-cell { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line-soft); background: var(--panel-2); }
.team-cell:hover { border-color: var(--gold); }
.team-cell .nm { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-cell .sp { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }

.cat-note { color: var(--ink-3); font-size: 12.5px; }

/* ================= styles/sports.css ================= */
/* Gestaltung für Live-Center (/live) und Spielplan (/spiele). Ergänzt globals.css. */

.live-wrap, .sp-wrap { max-width: 1180px; margin: 22px auto 0; padding: 0 22px; display: flex; flex-direction: column; gap: 16px; }

/* Live-Hero */
.live-hero {
  border-radius: 16px; border: 1px solid var(--line); padding: 22px 26px;
  background: radial-gradient(500px 200px at 0 0, rgba(255,49,90,.14), transparent 60%),
    linear-gradient(135deg, #1a1020, #0a1220);
  display: flex; align-items: center; gap: 18px;
}
.lh-left { display: flex; align-items: center; gap: 16px; }
.lh-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--live); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(255,49,90,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,49,90,.55); } 70% { box-shadow: 0 0 0 12px rgba(255,49,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,49,90,0); } }
.live-hero h1 { font-size: 30px; margin: 0; }
.live-hero p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.lh-refresh { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
  border-radius: 20px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.03); color: var(--ink-2); font-weight: 700; font-size: 13px; }
.lh-refresh:hover { color: var(--gold); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .lh-dot { animation: none; } }

.live-demo-note { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 12px;
  border: 1px dashed var(--line); color: var(--ink-2); font-size: 13px; background: rgba(216,173,79,.06); }

.empty-live { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 20px; }
.empty-live b { font-size: 16px; }

/* Spielplan-Hero */
.sp-hero {
  border-radius: 16px; border: 1px solid var(--line); padding: 24px 28px;
  background: radial-gradient(500px 220px at 82% -40%, rgba(216,173,79,.14), transparent 60%),
    linear-gradient(135deg, #12203a, #0a1220);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.sp-hero h1 { font-size: 32px; margin: 0 0 4px; }
.sp-hero p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 640px; }

/* Baukasten */
.sp-builder { padding: 16px; display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.sp-field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.sp-field.grow { flex: 1; min-width: 220px; }
.sp-field label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.sp-field select, .sp-search input { height: 42px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.05); color: var(--ink); padding: 0 12px; font-size: 14px; }
.sp-field select { min-width: 150px; }
.sp-field select:focus, .sp-search input:focus { outline: none; border-color: var(--gold); }
.sp-search { display: flex; align-items: center; gap: 8px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.05); padding: 0 12px; color: var(--ink-3); }
.sp-search input { border: 0; background: transparent; height: auto; padding: 0; flex: 1; min-width: 0; }
.sp-toggle { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.03); color: var(--ink-2); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.sp-toggle input { accent-color: var(--gold); width: 16px; height: 16px; }
.sp-toggle span { display: inline-flex; align-items: center; gap: 6px; }

.sp-summary { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; padding: 2px 4px; }
.sp-summary b { color: var(--gold); font-family: "KS Display", sans-serif; font-size: 18px; }
.sp-day { display: flex; flex-direction: column; gap: 8px; }

/* ================= styles/shop.css ================= */
/* Shop. Ergänzt globals.css. */
.shop-wrap { max-width: 1180px; margin: 22px auto 0; padding: 0 22px; display: flex; flex-direction: column; gap: 18px; }

.shop-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-radius: 16px; border: 1px solid var(--line); padding: 22px 26px;
  background: radial-gradient(500px 220px at 85% -40%, rgba(216,173,79,.14), transparent 60%), linear-gradient(135deg, #12203a, #0a1220); }
.shop-hero h1 { font-size: 32px; margin: 0 0 3px; }
.shop-hero p { margin: 0; color: var(--ink-2); font-size: 14px; }
.shop-toolbar { margin-left: auto; display: flex; gap: 10px; }
.stb { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 20px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.03); color: var(--ink-2); font-weight: 700; font-size: 13px; position: relative; }
.stb:hover { color: var(--gold); border-color: var(--gold); }
.stb.primary { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); color: var(--gold-ink); border-color: transparent; }
.stb-badge { background: var(--live); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 6px; min-width: 18px; text-align: center; }
.stb.primary .stb-badge { background: rgba(0,0,0,.35); }

.shop-cats { display: flex; gap: 8px; flex-wrap: wrap; }

/* Produkt-Gitter & -Karte */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.prod-card { position: relative; border-radius: 14px; border: 1px solid var(--line-soft); overflow: hidden;
  background: var(--panel-2); transition: border-color .15s, transform .15s; }
.prod-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.prod-badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 6px; }
.prod-badge.limited { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); color: var(--gold-ink); }
.prod-badge.new { background: var(--electric-blue); color: #fff; }
.prod-wish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-soft); background: rgba(6,12,21,.55); color: var(--ink-2); display: grid; place-items: center; }
.prod-wish:hover, .prod-wish.on { color: var(--live); border-color: var(--live); }
.prod-imglink { display: block; }
.prod-body { padding: 12px 14px; }
.prod-name { font-size: 14px; display: block; margin-bottom: 8px; }
.prod-card a:hover .prod-name { color: var(--gold); }
.prod-row { display: flex; align-items: center; justify-content: space-between; }
.prod-price { font-family: "KS Display", sans-serif; font-size: 18px; color: var(--gold); }
.prod-add { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: rgba(216,173,79,.12); color: var(--gold); display: grid; place-items: center; }
.prod-add:hover { background: var(--gold); color: var(--gold-ink); }

/* Platzhalter-Bild */
.prod-img { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; }
.prod-img.detail { aspect-ratio: 4/5; border-radius: 16px; border: 1px solid var(--line-soft); }
.prod-img .pi-emblem { width: 46%; max-width: 200px; opacity: .9; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.prod-img .pi-name { position: absolute; bottom: 34px; left: 0; right: 0; text-align: center; font-family: "KS Display", sans-serif;
  text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: rgba(255,255,255,.9); padding: 0 12px; }
.prod-img .pi-tag { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* Produktdetail */
.pd-grid { display: grid; grid-template-columns: minmax(0,460px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; } }
.pd-info { display: flex; flex-direction: column; gap: 12px; }
.pd-cat { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.pd-info h1 { font-size: 32px; margin: 0; }
.pd-price { font-family: "KS Display", sans-serif; font-size: 30px; color: var(--gold); }
.pd-desc { color: var(--ink-2); font-size: 14px; margin: 0; }
.pd-opt label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 6px; }
.pd-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-choice { min-width: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: var(--panel-2); color: var(--ink-2); font-weight: 700; font-size: 13px; }
.pd-choice.on { border-color: var(--gold); color: var(--gold); background: rgba(216,173,79,.1); }
.pd-buy { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.pd-qty { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 4px; }
.pd-qty button { width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(255,255,255,.05); color: var(--ink); display: grid; place-items: center; }
.pd-qty span { min-width: 30px; text-align: center; font-weight: 700; }
.pd-add { width: auto; flex: 1; min-width: 200px; }
.pd-wish { width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--ink-2); display: grid; place-items: center; }
.pd-wish:hover, .pd-wish.on { color: var(--live); border-color: var(--live); }
.pd-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; font-size: 13px; }
.pd-meta dt { color: var(--ink-3); }
.pd-meta dd { margin: 0; color: var(--ink); }
.pd-meta dd.avail { color: var(--free); font-weight: 700; }

/* Warenkorb / Kasse */
.cart-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 860px) { .cart-grid { grid-template-columns: 1fr; } }
.cart-lines { display: flex; flex-direction: column; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 70px 1fr auto auto auto; gap: 14px; align-items: center;
  padding: 10px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--panel-2); }
.cl-img { width: 70px; height: 70px; border-radius: 10px; overflow: hidden; }
.cl-img .prod-img { aspect-ratio: 1/1; height: 70px; }
.cl-img .pi-name, .cl-img .pi-tag { display: none; }
.cl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-info a:hover b { color: var(--gold); }
.cl-price { font-size: 12px; color: var(--ink-3); }
.cl-qty { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 3px; }
.cl-qty button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--ink); display: grid; place-items: center; }
.cl-qty span { min-width: 26px; text-align: center; font-weight: 700; }
.cl-sum { font-family: "KS Display", sans-serif; color: var(--gold); font-size: 16px; min-width: 70px; text-align: right; }
.cl-del { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-soft); background: transparent; color: var(--ink-3); display: grid; place-items: center; }
.cl-del:hover { color: var(--live); border-color: var(--live); }
@media (max-width: 560px) { .cart-line { grid-template-columns: 60px 1fr auto; } .cl-qty, .cl-del { grid-column: 2 / 4; justify-self: start; } }

.cart-sum { padding: 18px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 84px; }
.cart-sum h3 { margin: 0 0 4px; font-size: 18px; }
.cs-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.cs-row.total { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 4px; color: var(--ink); font-weight: 800; font-size: 17px; }
.cs-hint { font-size: 12px; color: var(--gold); }
.cart-sum .btn-gold { margin-top: 6px; }
.cart-continue { text-align: center; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.cart-continue:hover { color: var(--gold); }

/* Checkout-Form */
.co-form { padding: 18px; }
.co-form h3 { margin: 0 0 12px; font-size: 18px; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-fields label { display: flex; flex-direction: column; gap: 5px; }
.co-fields label.wide { grid-column: 1 / -1; }
.co-fields span { font-size: 12px; color: var(--ink-3); }
.co-fields input { height: 42px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.05); color: var(--ink); padding: 0 12px; font-size: 14px; }
.co-fields input:focus { outline: none; border-color: var(--gold); }
.co-pay { display: flex; gap: 12px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line); background: rgba(255,255,255,.02); }
.co-pay div { display: flex; flex-direction: column; gap: 3px; }
.co-pay b { font-size: 14px; }
.co-pay span { font-size: 12.5px; color: var(--ink-3); }

/* ================= styles/table-calculator.css ================= */
.tc-shell { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.tc-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tc-toolbar label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .75rem; }
.tc-toolbar select, .tc-matchday button, .tc-reset { min-height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 0 12px; font: inherit; }
.tc-matchday { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tc-matchday button { width: 40px; padding: 0; font-size: 1.5rem; }
.tc-matchday button:disabled, .tc-reset:disabled { opacity: .45; cursor: not-allowed; }
.tc-reset { color: var(--muted); }
.tc-explainer, .tc-source, .tc-legend { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.tc-state, .tc-empty { padding: 24px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.tc-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.tc-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tc-panel > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.tc-panel > header h2 { margin: 0; font-size: 1.1rem; }
.tc-panel > header span { color: var(--muted); font-size: .75rem; }
.tc-match { display: flex; flex-direction: column; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.tc-match:last-child { border-bottom: 0; }
.tc-match-info { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: .82rem; }
.tc-match-info span:last-child { text-align: right; }
.tc-match-info small { color: var(--muted); white-space: nowrap; font-size: .68rem; }
.tc-prediction { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tc-outcomes, .tc-score-inputs, .tc-score-inputs span { display: flex; align-items: center; gap: 5px; }
.tc-outcomes button, .tc-score-inputs button { min-width: 32px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.tc-outcomes button.selected { border-color: var(--gold); color: var(--gold); }
.tc-score-inputs b { min-width: 20px; text-align: center; }
.tc-score-inputs button { min-width: 26px; height: 26px; font-size: .9rem; }
.tc-final { align-self: flex-end; font-variant-numeric: tabular-nums; }
.tc-table-scroll { max-width: 100%; overflow-x: auto; }
.tc-table-panel table { width: 100%; border-collapse: collapse; font-size: .76rem; white-space: nowrap; }
.tc-table-panel th, .tc-table-panel td { padding: 8px 7px; border-bottom: 1px solid var(--line); text-align: right; }
.tc-table-panel th:first-child, .tc-table-panel td:first-child, .tc-table-panel th:nth-child(2), .tc-table-panel td:nth-child(2) { text-align: left; }
.tc-table-panel tbody th { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tc-position { display: inline-grid; min-width: 23px; height: 23px; place-items: center; border-radius: 6px; background: var(--panel-2); }
.tc-position.tc-cl, .tc-position.tc-up { background: rgba(59,130,246,.23); }
.tc-position.tc-el, .tc-position.tc-conf { background: rgba(249,115,22,.2); }
.tc-position.tc-rel { background: rgba(234,179,8,.23); }
.tc-position.tc-out { background: rgba(239,68,68,.2); }
.tc-table-panel .tc-legend { padding: 0 12px 12px; }
@media (max-width: 900px) { .tc-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .tc-toolbar { align-items: stretch; }
  .tc-matchday { margin-left: 0; }
  .tc-match { padding: 12px 10px; }
  .tc-match-info { grid-template-columns: 1fr auto 1fr; gap: 4px; font-size: .73rem; }
  .tc-match-info small { font-size: .61rem; }
  .tc-outcomes { gap: 3px; }
  .tc-outcomes button { min-width: 29px; height: 28px; }
  .tc-score-inputs { gap: 2px; }
  .tc-score-inputs span { gap: 2px; }
  .tc-score-inputs button { min-width: 23px; height: 25px; }
}

/* ================= styles/pages-extra.css ================= */
/* News, Tabellen, Statistiken. Ergänzt globals.css. */
.px-wrap { max-width: 1100px; margin: 22px auto 0; padding: 0 22px; display: flex; flex-direction: column; gap: 18px; }
.px-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-radius: 16px; border: 1px solid var(--line); padding: 22px 26px;
  background: radial-gradient(500px 220px at 85% -40%, rgba(216,173,79,.14), transparent 60%), linear-gradient(135deg, #12203a, #0a1220); }
.px-hero h1 { font-size: 32px; margin: 0 0 3px; }
.px-hero p { margin: 0; color: var(--ink-2); font-size: 14px; }
.px-note { color: var(--ink-3); font-size: 12px; }

/* Production week view at /woche */
.week-wrap { max-width: 1440px; }
.week-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 13px 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel-2); }
.week-controls > label:first-child { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.week-controls select { min-height: 38px; max-width: 100%; padding: 0 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); color: var(--ink); }
.week-free-filter { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13px; }
.week-free-filter input { accent-color: var(--gold); }
.week-total { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.week-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: start; gap: 9px; }
.week-day { min-width: 0; padding: 9px; border: 1px solid var(--line-soft); border-radius: 12px; background: linear-gradient(180deg,var(--panel),var(--panel-2)); }
.week-day > header { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); }
.week-day h2 { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.week-day > header > span { flex: 0 0 auto; color: var(--ink-3); font-size: 11px; }
.week-games { display: grid; gap: 7px; }
.week-event { min-width: 0; display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }
.week-event-comp { overflow: hidden; color: var(--gold); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.week-event time { color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.week-event-title { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.week-event-teams { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 6px; align-items: center; }
.week-event-teams b { min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; }
.week-event-teams span { grid-column: 2; grid-row: 1 / 3; color: var(--ink-3); font-size: 9px; font-weight: 700; }
.week-event-channel { color: var(--ink-3); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.week-no-games { color: var(--ink-3); font-size: 11px; }
.week-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 14px; text-align: center; }
@media (max-width: 1180px) { .week-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 760px) { .week-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 520px) { .week-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .week-day { padding: 7px; } .week-event { padding: 7px; } .week-controls { align-items: flex-start; } .week-total { width: 100%; margin-left: 0; } }

/* Ergebnisse */
.results-browser { display: flex; flex-direction: column; gap: 16px; }
.results-days { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.results-days button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--ink-2); background: var(--panel-2); font-size: 12px; font-weight: 700; }
.results-days button.on { color: var(--gold-ink); border-color: transparent; background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); }
.results-days button span { opacity: .7; }
.results-days .results-refresh { display: inline-grid; place-items: center; width: 38px; padding: 0; margin-left: auto; }
.results-day { display: flex; flex-direction: column; gap: 10px; }
.results-day-heading { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line-soft); padding: 0 2px 8px; }
.results-day-heading h2 { font-size: 20px; margin: 0; }
.results-day-heading span, .result-row time { color: var(--ink-3); font-size: 12px; }
.results-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.result-row { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel-2); }
.result-competition { grid-column: 1 / -1; color: var(--gold); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.result-team { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; font-size: 13px; }
.result-team > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-team b { font-family: "KS Display", sans-serif; font-size: 15px; }
.result-row time { grid-column: 2; grid-row: 2 / 4; align-self: center; }
@media (max-width: 420px) { .results-days { gap: 6px; } .results-days button { padding: 0 9px; } .result-row { padding: 10px; } }

/* News */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.article { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--line-soft); overflow: hidden; background: var(--panel-2); transition: border-color .15s, transform .15s; }
.article:hover { border-color: var(--gold); transform: translateY(-2px); }
.article .thumb { height: 120px; display: grid; place-items: center; position: relative; }
.article .thumb .cbadge { width: 56px; height: 56px; }
.article .thumb .ph { font-family: "KS Display", sans-serif; font-size: 20px; color: rgba(255,255,255,.55); text-transform: uppercase; }
.article .abody { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.article .acat { font-size: 11px; color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.article h3 { font-size: 16px; margin: 0; }
.article p { font-size: 13px; color: var(--ink-2); margin: 0; }
.article .ameta { font-size: 12px; color: var(--ink-3); margin-top: auto; padding-top: 6px; }

/* Tabellen */
.tbl-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.league-table { width: 100%; border-collapse: collapse; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.league-table th, .league-table td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; text-align: center; }
.league-table th { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.league-table th.team, .league-table td.team { text-align: left; }
.league-table tr:last-child td { border-bottom: 0; }
.league-table .pos { width: 34px; color: var(--ink-3); font-weight: 800; font-family: "KS Display", sans-serif; }
.league-table .team-cellrow { display: inline-flex; align-items: center; gap: 10px; }
.league-table .pkt { font-family: "KS Display", sans-serif; color: var(--gold); font-weight: 700; font-size: 15px; }
.league-table tr.cl td .pos { color: var(--free); }
.tbl-legend { font-size: 12px; color: var(--ink-3); display: flex; gap: 16px; }
.tbl-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--free); margin-right: 6px; }
@media (max-width: 620px) { .league-table .hide-s { display: none; } }

/* Hub (/mehr) */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hub-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel), var(--panel-2)); transition: border-color .15s, transform .15s; }
.hub-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.hub-card .hic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(216,173,79,.14); color: var(--gold); }
.hub-card b { display: block; font-size: 15px; }
.hub-card span { font-size: 12px; color: var(--ink-3); }

/* Suche (/suche) */
.sr-list { display: flex; flex-direction: column; gap: 8px; }
.sr-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line-soft); background: var(--panel-2); }
.sr-item:hover { border-color: var(--gold); }
.sr-item b { font-size: 15px; }
.sr-item .sr-type { font-size: 12px; color: var(--ink-3); }

/* TV-Guide (/tv-guide) */
.tv-channel { margin-bottom: 8px; }
.tv-channel h3 { font-family: "KS Display", sans-serif; font-size: 16px; margin: 14px 0 8px; color: var(--gold); }

/* Standings-Browser */
.stb-wrap { display: flex; flex-direction: column; gap: 16px; }
.stb-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; padding: 16px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
.stb-field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.stb-field.grow { flex: 1; min-width: 200px; }
.stb-field label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.stb-field select { height: 42px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.05); color: var(--ink); padding: 0 12px; font-size: 14px; }
.stb-field select:focus { outline: none; border-color: var(--gold); }
.stb-gender { display: flex; gap: 6px; }
.stb-gender button { height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--ink-2); font-weight: 700; font-size: 13.5px; }
.stb-gender button.on { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); color: var(--gold-ink); border-color: transparent; }
.stb-gender button:disabled { opacity: .4; cursor: not-allowed; }
.stb-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.stb-head h2 { font-size: 22px; margin: 0; }
.stb-gtag { font-size: 12px; color: var(--gold); border: 1px solid var(--line); border-radius: 10px; padding: 2px 9px; vertical-align: 3px; }
.stb-updated { font-size: 12px; color: var(--ink-3); }
.stb-group { display: flex; flex-direction: column; gap: 8px; }
.stb-groupname { font-family: "KS Display", sans-serif; font-size: 15px; color: var(--ink-2); margin: 10px 0 0; }
.stb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 20px; }
.stb-empty b { font-size: 16px; }

/* Statistiken */
.stat-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .stat-kpis { grid-template-columns: repeat(2, 1fr); } }
.stat-kpi { padding: 16px; border-radius: 12px; border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
.stat-kpi b { font-family: "KS Display", sans-serif; font-size: 30px; color: var(--gold); display: block; }
.stat-kpi .l { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.stat-kpi .s { font-size: 11px; color: var(--ink-3); }
.stat-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .stat-cols { grid-template-columns: 1fr; } }
.scorer { display: grid; grid-template-columns: 26px 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); }
.scorer:last-child { border-bottom: 0; }
.scorer .rk { color: var(--ink-3); font-weight: 800; font-family: "KS Display", sans-serif; text-align: center; }
.scorer .nm { min-width: 0; }
.scorer .nm b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scorer .nm span { font-size: 11px; color: var(--ink-3); }
.scorer .goals { font-family: "KS Display", sans-serif; font-size: 18px; color: var(--gold); }
.scorer .bar { grid-column: 3 / 5; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 2px; }
.scorer .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-a), var(--gold-b)); }

/* --- Rechtstexte (/impressum, /datenschutz, /agb) ---------------------------
   Der Textkoerper kommt aus Production und bringt kein eigenes CSS mit
   (Klassen werden beim Einlesen entfernt). Die Typografie wird daher hier
   ueber die Elemente selbst gesetzt, in den V2.1-Tokens. */
.legal-doc { padding-bottom: 40px; }
.legal-doc .legal-body { max-width: 820px; margin: 0 auto; }
.legal-doc .legal-foot { max-width: 820px; margin: 16px auto 0; font-size: .9rem; }
.legal-doc .legal-foot a { color: var(--gold); }
.legal-body h1 { font-family: "KS Display", sans-serif; font-size: 1.5rem; margin: 0 0 10px; color: var(--text-primary); }
.legal-body h2 { font-family: "KS Display", sans-serif; font-size: 1.3rem; margin: 26px 0 8px; color: var(--text-primary); }
.legal-body h3 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--text-primary); }
.legal-body h4 { font-size: .98rem; margin: 18px 0 6px; color: var(--text-primary); }
.legal-body p,
.legal-body li { color: var(--text-secondary); font-size: .93rem; line-height: 1.65; margin: 0 0 10px; }
.legal-body ul,
.legal-body ol { margin: 0 0 12px; padding-left: 22px; }
.legal-body a { color: var(--gold); overflow-wrap: anywhere; }
.legal-body strong { color: var(--text-primary); }
.legal-body hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: .9rem; display: block; overflow-x: auto; }
.legal-body th,
.legal-body td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; color: var(--text-secondary); }
.legal-body th { color: var(--text-primary); }
.legal-body :first-child { margin-top: 0; }

/* Breite Tabellen scrollen in sich selbst, nicht die ganze Seite. */
.table-scroll { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .league-table { min-width: 460px; }

/* Lange Ueberschriften der Rechtstexte ("Datenschutzerklaerung",
   "Allgemeine Geschaeftsbedingungen") sprengten bei 390 px den Viewport. */
.legal-doc .px-hero h1 { font-size: clamp(1.35rem, 7vw, 2rem); overflow-wrap: anywhere; hyphens: auto; }
.legal-doc .px-hero,
.legal-doc .px-hero > div { min-width: 0; max-width: 100%; }

/* /favoriten: Knopf im Leerzustand */
.fav-cta { width:auto; padding:0 18px; height:40px; display:inline-flex; align-items:center; gap:8px; margin-top:6px; }

/* TV-Guide: Spielanzahl neben dem Sendernamen */
.tv-channel h3 .tv-count { font-size:12px; font-weight:400; }

/* /highlights: Abstand je Sportart-Block */
.hl-sport { margin-bottom: 24px; }
.hl-sport > h2 { margin: 0 0 12px; }

/* /download */
.dl-box { max-width: 680px; }
.dl-text { margin: 12px 0; font-size: 14px; color: var(--ink-2); }
.dl-btn { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 46px; }

/* /faq */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-list summary { cursor: pointer; font-weight: 700; }
.faq-list p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.faq-foot { max-width: 820px; margin: 16px auto 0; }
.faq-foot a { color: var(--gold); }

/* Formulare (/kontakt, /feedback) */
.form-box { max-width: 680px; }
.form-box label { display: block; margin: 14px 0 6px; font-weight: 700; font-size: 13px; }
.form-box label:first-of-type { margin-top: 0; }
.form-box .req { color: var(--gold); }
.form-box input[type=text], .form-box input[type=email], .form-box select, .form-box textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--ink);
  font: inherit; font-size: 14px;
}
.form-box textarea { resize: vertical; min-height: 120px; }
.form-box input:focus, .form-box select:focus, .form-box textarea:focus {
  outline: none; border-color: var(--gold);
}
.form-box .field-note { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.form-send { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 44px; margin-top: 18px; }
.form-send[disabled] { opacity: .6; cursor: progress; }
.form-status { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); min-height: 1.2em; }
.form-status.is-ok { color: var(--free); }
.form-status.is-error { color: var(--live); }
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ausfuellbar. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-direct { margin-top: 16px; }
.contact-direct p { margin: 8px 0 0; font-size: 14px; }
.contact-direct a { color: var(--gold); }

/* Landingpages (/<slug>-heute-im-tv, /<slug>-uebertragung) */
.lp-intro { max-width: 70ch; line-height: 1.65; }
.lp-intro a { color: var(--gold); }
.lp-intro strong { color: var(--ink); }
.lp-day { margin-bottom: 18px; }
.lp-day > h2 { margin: 0 0 10px; font-size: 20px; }
.lp-count { font-size: 12px; font-weight: 400; }
.lp-links { margin-top: 8px; }
.lp-links > h2 { margin: 0 0 12px; font-size: 18px; }
.lp-link-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-link-list a:hover { border-color: var(--gold); color: var(--gold); }

/* Uebertragungs-Landingpages */
.ue-block { margin-bottom: 18px; }
.ue-block > h2 { margin: 0 0 12px; font-size: 20px; }
.lp-sub { color: var(--ink-2); max-width: 70ch; }
.ue-rights td, .ue-rights th { text-align: left; font-size: 13.5px; }
.ue-rights .chip { margin: 2px 4px 2px 0; }
/* Sender-Chips: gruen = Free-TV, gold = Pay, blau = Stream (wie bisher). */
.chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px;
  font-weight: 700; border: 1px solid var(--line-soft); }
.chip.free { background: rgba(67,202,133,.13); color: var(--free); border-color: rgba(67,202,133,.35); }
.chip.pay { background: rgba(226,189,101,.13); color: var(--gold); border-color: rgba(226,189,101,.35); }
.chip.stream { background: rgba(110,174,255,.13); color: var(--blue); border-color: rgba(110,174,255,.35); }

/* ---------------------------------------------------------------------------
   Bruecke zu den bisherigen Seiten-Styles.

   Mehrere Seiten (Ergebnisse, Tabellen, Rechner, Live, Konto, Spieler) bringen
   ihr eigenes, bewaehrtes CSS mit, das auf den alten Variablennamen aufbaut.
   Statt diese Seiten neu zu gestalten, werden die alten Namen hier auf die
   V2.1-Tokens abgebildet: dieselbe Logik, neue Farben.

   Neue Seiten bitte direkt die V2.1-Tokens nutzen (--ink, --gold, --panel …).
   --------------------------------------------------------------------------- */
:root {
  --muted: var(--ink-2);
  --muted-2: var(--ink-3);
  --text: var(--ink);
  --accent: var(--gold);
  --accent-ink: var(--gold-ink);
  --card: var(--panel);
  --pay: var(--gold);
  --stream: var(--blue);
}

/* Heldenbild der Startseite.
   In V2.1 lieferte Next's <Image fill> Position und Groesse mit; als normales
   <img> muss das hier stehen, sonst rendert das Bild in Originalgroesse. */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }

/* /luna */
.luna-start { max-width: 680px; }
.luna-card { cursor: default; }

/* Echtes KickScope-Logo in Kopf- und Fusszeile.
   Ersetzt das fruehere Platzhalter-Wappen samt Schriftzug und dem
   Versionsabzeichen. Die Hoehe steuert die Groesse, die Breite folgt. */
.brand-logo { height: 46px; width: auto; max-width: 100%; display: block; }
.footer .brand-logo { height: 34px; }
@media (max-width: 760px) { .brand-logo { height: 30px; } }

/* ---------------------------------------------------------------------------
   Tippspiel.
   Regeln aus der bisherigen V2-Tippspielseite uebernommen (assets/style.css).
   Die Farben kommen ueber die Variablen-Bruecke weiter oben aus den
   V2.1-Tokens. Ohne diese Regeln rendert u. a. das Zielscheiben-Symbol
   bildschirmfuellend, weil das SVG nur ein viewBox und keine Groesse hat.
   --------------------------------------------------------------------------- */
.ks-ti { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.tp-hero { border-radius: 16px; border: 1px solid var(--line); padding: 28px 30px; margin-bottom: 20px;
  background: radial-gradient(600px 240px at 80% -40%, rgba(231,200,106,.14), transparent 60%),
    linear-gradient(135deg, #12203a, #0a1220);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tp-hero .tp-ic { font-size: 42px; }
.tp-hero h1 { font-family: "KS Display", sans-serif; font-size: 34px; margin: 0 0 4px; }
.tp-hero p { margin: 0; color: var(--ink-2); max-width: 560px; }
.tp-hero .tp-you { margin-left: auto; text-align: center; padding: 14px 22px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.tp-hero .tp-you .lbl { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.tp-hero .tp-you .rank { font-family: "KS Display", sans-serif; font-size: 40px; color: var(--gold); line-height: 1; }
.tp-hero .tp-you .pts { font-size: 13px; color: var(--ink-2); }
.tp-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px; align-items: start; }
.tp-name-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.tp-name-row input { height: 40px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.05); color: var(--ink); padding: 0 14px; font-size: 14px; min-width: 220px; }
.tp-name-row input:focus { outline: none; border-color: var(--gold); }
.tp-name-row .who { color: var(--ink-2); font-size: 13px; }
.tp-rules { padding: 16px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.tp-rules b { color: var(--gold); }
.tp-rules .pill { display: inline-block; padding: 2px 9px; border-radius: 6px; background: rgba(231,200,106,.12);
  color: var(--gold); font-weight: 800; margin-right: 6px; }
.lb { padding: 16px; }
.lb h3 { margin: 0 0 12px; font-family: "KS Display", sans-serif; font-size: 20px; display: flex; align-items: center; gap: 9px; }
.lb table { width: 100%; border-collapse: collapse; }
.lb th { text-align: left; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.lb th:last-child, .lb td:last-child { text-align: right; }
.lb td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.lb tr:last-child td { border-bottom: 0; }
.lb .rk { width: 34px; color: var(--ink-3); font-weight: 800; font-family: "KS Display", sans-serif; }
.lb tr.me { background: linear-gradient(90deg, rgba(231,200,106,.14), transparent); }
.lb tr.me td { color: var(--gold); font-weight: 700; }
.lb tr.top1 .rk { color: var(--gold); }
.lb .pts { font-family: "KS Display", sans-serif; font-weight: 700; color: var(--gold); font-size: 16px; }
.lb .medal { font-size: 15px; }
.lb .empty { color: var(--ink-3); text-align: center; padding: 20px; }
.ks-ti { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.14em; color: var(--gold); margin-right: .18em; }

/* Rechtslinks in der Fusszeile: ohne eigene Regel kleben sie aneinander. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.footer-legal a { color: var(--ink-3); font-size: 12.5px; }
.footer-legal a:hover { color: var(--gold); }
@media (max-width: 760px) { .footer-legal { justify-content: center; } }

/* ---------------------------------------------------------------------------
   Auswahlmenues und Eingabefelder.
   Ohne explizite Farben nimmt der Browser seine Vorgaben: weisser Hintergrund,
   dazu die geerbte helle Schrift - das Menue war dadurch unlesbar.
   <option> braucht eigene Regeln, weil es die Farben des <select> nicht
   zuverlaessig erbt.
   --------------------------------------------------------------------------- */
select, input[type=text], input[type=search], input[type=email], input[type=number], textarea {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
}
select option, select optgroup {
  background: #0d1725;
  color: #f3f5f8;
}
:root[data-theme="light"] select option,
:root[data-theme="light"] select optgroup {
  background: #ffffff;
  color: #172435;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--gold); }
.sp-field select, .week-controls select { background: var(--panel-2); color: var(--ink); }

/* Anmeldeseite (/anmelden) */
.auth-card { max-width: 460px; margin: 0 auto; }
.auth-card > h1 { font-size: 26px; margin: 0 0 6px; }
.auth-card > .muted { font-size: 13.5px; margin: 0 0 18px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--ink-2); font: inherit; font-weight: 700; cursor: pointer; }
.auth-tab.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.auth-pane label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: 700; }
.auth-pane input { width: 100%; box-sizing: border-box; }
.auth-pane .form-send { width: 100%; justify-content: center; margin-top: 16px; }
.auth-foot { margin: 12px 0 0; text-align: center; }
.auth-link { background: none; border: 0; color: var(--gold); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.auth-note { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.auth-note a { color: var(--gold); }

/* ---------------------------------------------------------------------------
   Spielplan-Baukasten (/spiele): Spiele anhaken und als Liste ausdrucken.
   --------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-hinweis { color: var(--ink-2); font-size: 13.5px; margin: 0 0 4px; }
.game.waehlbar { position: relative; padding-left: 42px; }
.game-pick { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; cursor: pointer; }
.game-pick input { width: 19px; height: 19px; accent-color: var(--gold); cursor: pointer; }

/* Schwebende Leiste mit der Auswahl */
.sp-leiste {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(10,20,33,.96);
  box-shadow: var(--shadow-float); font-size: 14px;
}
:root[data-theme="light"] .sp-leiste { background: rgba(255,255,255,.97); }
.sp-leiste b { color: var(--gold); }
.sp-leiste .btn-gold { width: auto; height: 36px; padding: 0 16px; }
@media (max-width: 760px) { .sp-leiste { bottom: 74px; } }

/* Der fertige Plan */
.sp-plan { margin-top: 18px; }
.sp-plan-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sp-plan-kopf h2 { margin: 0; font-size: 20px; }
.sp-plan-aktionen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-plan-aktionen select { max-width: 100%; }
.sp-konflikt td { box-shadow: inset 3px 0 0 var(--gold, #e7c86a); }
.sp-konflikt td:first-child { font-weight: 600; }
.sp-plan-aktionen .form-send { margin-top: 0; height: 38px; }
.sp-plan-datum { color: var(--ink-3); font-size: 12.5px; margin: 6px 0 14px; }
.sp-plan-tabelle td { font-size: 13.5px; }

/* Gedruckt wird nur der Plan. */
@media print {
  body * { visibility: hidden; }
  .sp-plan, .sp-plan * { visibility: visible; }
  .sp-plan { position: absolute; left: 0; top: 0; width: 100%; border: 0; background: #fff; color: #000; }
  .sp-plan-aktionen, .sp-leiste, .no-print { display: none !important; }
  .sp-plan-tabelle td, .sp-plan-tabelle th { color: #000; border-color: #999; }
  .table-scroll { overflow: visible; }
}

/* KickScope consent interface. The first prompt stays in a compact bottom
   sheet; only detailed settings use a focus-contained modal. */
.ks-consent-shell {
  position: fixed; z-index: 9999; left: 12px; right: 12px; bottom: 12px;
  display: flex; justify-content: center; pointer-events: none;
}
.ks-consent-panel {
  pointer-events: auto; width: min(880px, 100%); max-height: min(76vh, 660px);
  overflow: auto; padding: 22px; color: #f5f7fb;
  border: 1px solid rgba(224,190,104,.5); border-radius: 18px;
  background: linear-gradient(145deg, #071321 0%, #101f31 100%);
  box-shadow: 0 20px 70px rgba(0,0,0,.52);
}
.ks-consent-heading { max-width: 760px; }
.ks-consent-kicker { color: #e3c475; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.ks-consent-panel h2 { margin: 6px 0 8px; color: #fff; font-size: clamp(20px, 3vw, 25px); line-height: 1.2; }
.ks-consent-panel p { margin: 7px 0; color: #c3ceda; font-size: 14px; line-height: 1.55; }
.ks-consent-panel a { color: #f1d68e; text-decoration: underline; text-underline-offset: 3px; }
.ks-consent-note { font-size: 12px !important; }
.ks-consent-actions, .ks-consent-detail-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.ks-consent-action {
  min-height: 44px; padding: 9px 12px; border: 1px solid rgba(224,190,104,.68);
  border-radius: 10px; background: rgba(255,255,255,.035); color: #f5f7fb;
  font: inherit; font-size: 13px; font-weight: 750; text-align: center; cursor: pointer;
}
.ks-consent-action:hover { background: rgba(224,190,104,.13); border-color: #f0d58a; }
.ks-consent-action:focus-visible, .ks-consent-panel a:focus-visible,
.ks-consent-panel input:focus-visible { outline: 3px solid #f0d58a; outline-offset: 3px; }
.ks-consent-details { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.13); }
.ks-consent-details[hidden], .ks-consent-backdrop[hidden] { display: none !important; }
.ks-consent-row { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ks-consent-row h3 { margin: 0 0 3px; color: #f7f8fa; font-size: 14px; }
.ks-consent-row p { margin: 0; max-width: 660px; font-size: 12px; }
.ks-consent-required { flex: 0 0 auto; color: #e7ce8b; font-size: 11px; font-weight: 750; }
.ks-consent-row-toggle input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0 5px;
  accent-color: #e2c16d; cursor: pointer; }
.ks-consent-row-disabled { opacity: .76; }
.ks-consent-detail-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-consent-backdrop { position: fixed; z-index: 0; inset: 0; pointer-events: auto;
  background: rgba(1,6,13,.76); backdrop-filter: blur(4px); }
.ks-consent-shell.is-editing { inset: 0; bottom: 0; align-items: center; padding: 16px; pointer-events: auto; }
.ks-consent-shell.is-editing .ks-consent-panel { position: relative; z-index: 1; max-height: min(88vh, 760px); }
@media (max-width: 680px) {
  .ks-consent-shell { left: 0; right: 0; bottom: 0; }
  .ks-consent-panel { width: 100%; max-height: 82vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .ks-consent-actions, .ks-consent-detail-actions { grid-template-columns: 1fr; gap: 8px; }
  .ks-consent-row { align-items: flex-start; gap: 12px; }
  .ks-consent-row-toggle input { margin-top: 2px; }
  .ks-consent-shell.is-editing { padding: 0; }
  .ks-consent-shell.is-editing .ks-consent-panel { width: 100%; max-height: 100dvh; height: 100%; border-radius: 0; padding-top: max(20px, env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: no-preference) {
  .ks-consent-panel { animation: ks-consent-enter .18s ease-out both; }
  @keyframes ks-consent-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

/* Knopf in der Fusszeile, um die Entscheidung zu aendern */
.footer-consent { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--ink-3); cursor: pointer; text-decoration: underline; }
.footer-consent:hover { color: var(--gold); }

/* Abmelden im Konto - zurueckhaltend, damit es nicht wie eine Hauptaktion wirkt */
.ko-abmelden { margin: 10px 0 0; }
.ko-btn-still { background: transparent; color: var(--ink-2); border: 1px solid var(--line-soft); }
.ko-btn-still:hover { color: var(--live); border-color: var(--live); }

/* Hell/Dunkel-Umschalter in der Fusszeile */
.footer-in { flex-wrap: wrap; }

.account-menu{position:relative}.account-button{font:inherit;color:var(--text-primary);cursor:pointer}.account-button:focus-visible,.account-panel button:focus-visible,.account-panel input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.account-avatar{overflow:hidden}.account-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.account-panel{position:absolute;z-index:120;top:calc(100% + 10px);right:0;width:min(340px,calc(100vw - 24px));padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-float);color:var(--text-primary)}.account-panel[hidden]{display:none}.account-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.account-panel-head strong{font-size:14px}.account-close{border:0;background:none;color:var(--text-secondary);font-size:22px;cursor:pointer}.account-panel .auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}.account-panel .auth-tab{padding:8px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer}.account-panel .auth-tab.on{color:var(--gold);border-bottom-color:var(--gold)}.account-form label{display:block;margin:9px 0 4px;color:var(--text-secondary);font-size:12px}.account-form input{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-primary)}.account-form .btn-gold{width:100%;margin-top:8px}.account-panel .form-status{min-height:1em;margin:7px 0;color:#f0776f;font-size:12px}.account-profile-link,.account-logout{display:block;width:100%;padding:10px;text-align:left;border:0;border-radius:8px;background:transparent;color:var(--text-primary);font:inherit;cursor:pointer}.account-profile-link:hover,.account-logout:hover{background:var(--panel-hover)}.account-logout{color:#f0776f}

/* ---------------------------------------------------------------------------
   Heller Modus: Flaechen, die IMMER dunkel sind, brauchen helle Schrift.
   Der Startseiten-Held liegt auf einem Foto mit fast schwarzem Schleier -
   die Textfarbe des hellen Themas (#172435) waere dort unlesbar.
   --------------------------------------------------------------------------- */
:root[data-theme="light"] .hero-copy h1,
:root[data-theme="light"] .hero-copy p,
:root[data-theme="light"] .hero-feature .hero-copy { color: #f3f5f8; }
:root[data-theme="light"] .hero-copy p { color: #c3cbd5; }
/* Der Knopf behaelt seine Dunkelmodus-Gestaltung: sein Hintergrund ist nur
   ein durchscheinendes Gold ueber dem dunklen Helden, bleibt also dunkel. */
:root[data-theme="light"] .hero-cta { color: #f3f5f8; }

/* ---------------------------------------------------------------------------
   Korrekturen am Kopf und an den Spielkarten.
   --------------------------------------------------------------------------- */

/* Kopfsuche: Die allgemeine Eingabefeld-Regel weiter oben hat dieselbe
   Spezifitaet wie `.search>input` und steht spaeter - sie hatte dessen
   linken Abstand ueberschrieben, wodurch der Text unter der Lupe lag.
   Hier wird er mit hoeherer Spezifitaet wiederhergestellt. */
.topbar .search > input {
  padding: 0 76px 0 42px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(120deg, #0c1726, #111c2a);
  font-size: 12px;
}
:root[data-theme="light"] .topbar .search > input {
  background: #fff;
  border-color: rgba(23,36,53,.16);
}

/* Spielkarten: Der Knopf stand auf 7 px, der Sendername daneben hatte keine
   eigene Groesse und erbte die normale Schrift. Beides wird jetzt gleich
   gross gesetzt, der Sendername wird bei Platzmangel gekuerzt. */
.fixture-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.fixture-actions a {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 10px;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 7px;
}
.fixture-actions > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .fixture-actions a { font-size: 10.5px; padding: 0 8px; }
  .fixture-actions > span { font-size: 11px; }
}

/* Senderauswahl je Spiel im Spielplan-Baukasten */
.game-sender {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.gs-label { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: var(--panel-2); font-size: 12px; color: var(--ink-2); }
.gs-chip input { width: 14px; height: 14px; accent-color: var(--gold); cursor: pointer; margin: 0; }
/* Vorausgewaehlt ist kein Sender - der angeklickte muss sich deshalb deutlich
   abheben, nicht nur ueber die Rahmenfarbe. */
.gs-chip:has(input:checked) {
  border-color: var(--gold); color: var(--ink); font-weight: 600;
  background: color-mix(in srgb, var(--gold) 16%, var(--panel-2));
}
.gs-hinweis { font-size: 12px; color: var(--gold); }

/* Senderzeile auf der Spielkarte. Stand vorher nur im title-Attribut des
   TV-Symbols - per Hover, den es auf dem Handy nicht gibt. */
.sender-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 7px; min-width: 0;
}
.sl-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--panel-2);
  color: var(--ink-2); font-size: 11px; font-weight: 600;
}
.sl-rest { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.sl-leer { color: var(--text-muted); font-size: 11px; }

/* Favoriten */
.fav-add label { display: block; font-weight: 600; margin-bottom: 8px; }
.fav-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fav-add-row input { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line, rgba(255,255,255,.14)); background: transparent; color: inherit; font: inherit; }
.fav-add-row .form-send { margin-top: 0; height: 40px; }
.fav-karte { margin-top: 14px; }
.fav-spiele { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.fav-spiele li { display: grid; gap: 2px; padding-left: 10px; border-left: 3px solid var(--gold, #e7c86a); }
.fav-zeit { font-size: 12.5px; color: var(--ink-3, #9aa3b2); font-variant-numeric: tabular-nums; }

.home-fav { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.home-fav li { padding-left: 8px; border-left: 2px solid var(--gold, #e7c86a); }

/* Lesbarkeit (15.10.2026): .fixture-time stand mit 8px und hellgrauer Farbe
   auf den Startseiten-Karten - die Anstosszeit, die wichtigste Angabe der Karte.
   Im hellen Thema war #c4cedb auf Weiss praktisch unsichtbar. */
.fixture-time { font-size: 12px; font-variant-numeric: tabular-nums; }
:root[data-theme="light"] .fixture-time { color: var(--text-secondary); }
.section-kicker { font-size: 11px; }
:root[data-theme="light"] .section-kicker { color: var(--text-muted); }

/* Helles Thema: Textfarben, die nur fuer dunklen Grund gedacht waren
   (Kontrastmessung 15.10.2026: Werte < 3:1 auf Startseite). */
:root[data-theme="light"] .fixture-league,
:root[data-theme="light"] .fixture-actions a,
:root[data-theme="light"] .fixture-actions span,
:root[data-theme="light"] .fixture-top span,
:root[data-theme="light"] .news-meta,
:root[data-theme="light"] .news-meta span,
:root[data-theme="light"] .story-text small,
:root[data-theme="light"] .small-section-heading > span,
:root[data-theme="light"] .right-heading > a { color: var(--text-secondary); }
:root[data-theme="light"] .text-link,
:root[data-theme="light"] .luna-link,
:root[data-theme="light"] .section-head a,
:root[data-theme="light"] .news-copy > a { color: #76540f; }
:root[data-theme="light"] .chip-row .filter-chip.selected { color: #76540f; }
:root[data-theme="light"] .count-badge { color: #b3283f; }

/* Helles Thema, Teil 2: Hauptnavigation, Fusszeile, Platzhalter-Texte. Die
   Seitennavigation stand mit #a6b2c1 auf hellem Grund (Kontrast 1,9:1). */
:root[data-theme="light"] .sidenav a,
:root[data-theme="light"] .sidenav a span { color: var(--text-secondary); }
:root[data-theme="light"] .sidenav a.active,
:root[data-theme="light"] .sidenav a.active span { color: #76540f; }
:root[data-theme="light"] .fixture-score small { color: var(--text-secondary); }
:root[data-theme="light"] .account-button small { color: #76540f; }
:root[data-theme="light"] .luna-insight > p { color: var(--text-secondary); }
:root[data-theme="light"] .section-kicker { color: #5f6e82; }
:root[data-theme="light"] .chip-row .filter-chip.selected { color: #76540f !important; }

/* Tippspiel: die Seitenspalte war fest 360px breit und sprengte schmale Geraete
   (gemessen bei 360px: Seitenbreite 382px). */
@media (max-width: 900px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr); }
  .tp-hero { flex-wrap: wrap; }
  .tp-hero .tp-you { margin-left: 0; }
  .tp-name-row input { min-width: 0; flex: 1 1 180px; }
}

/* Mein KickScope (Dashboard) */
.dash-kopf { align-items: center; }
.dash-avatar { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-a, #f1d58e), var(--gold-b, #c39a48)); color: var(--gold-ink, #1a1408);
  font-family: "KS Display", sans-serif; font-size: 30px; font-weight: 700; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-breit { grid-column: 1 / -1; }
.dash-karte h2 { margin: 0 0 10px; font-size: 18px; }
.dash-team { margin-top: 14px; }
.dash-team h3 { margin: 0 0 6px; font-size: 15px; }
.dash-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.dash-status { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.dash-status.an { background: rgba(46, 200, 120, .16); color: #1f9d5c; }
.dash-status.aus { background: rgba(240, 68, 94, .14); color: #c0344a; }
@media (max-width: 700px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mitteilungen */
.notif-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
.notif a { display: grid; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.notif-ic { color: var(--gold, #e7c86a); display: grid; place-items: center; }
.notif.ungelesen { border-color: var(--gold, #e7c86a); }
.notif-neu { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--gold, #e7c86a); color: var(--gold-ink, #1a1408); }

/* Performance (15.10.2026): /spiele hat ~17.000 DOM-Knoten. Mit content-visibility
   rendert der Browser nur die sichtbaren Tage - gemessen: Layout 1,0-1,5 s -> 12-85 ms.
   Die intrinsische Hoehe haelt die Scrollleiste stabil. */
.sp-day { content-visibility: auto; contain-intrinsic-size: auto 700px; }
@media print { .sp-day { content-visibility: visible; } }