/* Standardwerte – die echten Werte kommen aus /theme.css (Einstellungen → Erscheinungsbild) */
:root {
  --accent: #2f8cff; --accent2: #5ec8ff; --accent-deep: #1d579e; --acc-rgb: 47,140,255; --acc2-rgb: 94,200,255;
  --bg: #030812; --bg-rgb: 3,8,18; --text: #eef5ff; --fg-rgb: 238,245,255; --muted: #94a8c8; --dim: #64789a; --text2: #c9d4e6;
  --edge-rgb: 140,195,255; --panel: rgba(16,32,64,.32); --panel-solid: rgba(16,32,64,.62); --panel-strong: rgba(16,32,64,.85);
  --blur: 18px; --r: 18px; --r-md: 13px; --r-sm: 10px; --cut: 0px; --cut-s: 0px; --cut-xs: 0px; --spd: 1; --orb: .3; --on-accent: #02060d;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --edge: rgba(var(--edge-rgb), .16); --edge-hi: rgba(var(--edge-rgb), .32);
  --green: #57d6a0; --red: #ff6b7d; --gold: #f5c542; --silver: #c9d1dc; --bronze: #d99058;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: calc(.34s * var(--spd)); --t: calc(.45s * var(--spd)); --t-slow: calc(.6s * var(--spd));
  color-scheme: dark;
}
:root[data-scheme="light"] { color-scheme: light; --green: #12925f; --red: #d6324a; --gold: #b7860b }
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased }
a { color: inherit }
::selection { background: rgba(var(--acc-rgb), .45) }
button, input, select, textarea { font: inherit; color: inherit }
img { max-width: 100% }

/* Hintergrund */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(rgba(var(--fg-rgb),.025) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, rgba(var(--fg-rgb),.025) 1px, transparent 1px) 0 0/48px 48px }
[data-grid="off"] .bg { background: none }
.bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, transparent 0, rgba(var(--bg-rgb),.55) 55%, var(--bg) 90%) }
.bg i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: var(--orb); will-change: transform; contain: strict }
[data-orbs="off"] .bg i { display: none }
.bg i:nth-child(1) { background: radial-gradient(circle, var(--accent) 0, rgba(var(--acc-rgb),.35) 25%, transparent 65%); top: -30vmax; left: -15vmax; animation: d1 28s var(--ease) infinite alternate }
.bg i:nth-child(2) { background: radial-gradient(circle, var(--accent2) 0, rgba(var(--acc2-rgb),.3) 25%, transparent 65%); top: -20vmax; right: -25vmax; opacity: calc(var(--orb) * .85); animation: d2 34s var(--ease) infinite alternate }
.bg i:nth-child(3) { background: radial-gradient(circle, var(--accent-deep) 0, transparent 65%); bottom: -35vmax; left: 20vmax; opacity: calc(var(--orb) * .5); animation: d1 40s var(--ease) infinite alternate-reverse }
@keyframes d1 { to { transform: translate(12vmax, 10vmax) scale(1.1) } }
@keyframes d2 { to { transform: translate(-12vmax, 14vmax) scale(.9) } }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(min(var(--blur), 14px)); -webkit-backdrop-filter: blur(min(var(--blur), 14px)); border-bottom: 1px solid var(--edge) }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto }
.brand strong { display: block; letter-spacing: .18em; font-size: 14px; line-height: 1 }
.brand small { display: block; letter-spacing: .42em; font-size: 10px; color: var(--accent); line-height: 1.4 }
.brand .logo { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(var(--acc-rgb), .55)); transition: transform var(--t-slow) var(--spring) }
.brand:hover .logo { transform: rotate(-6deg) scale(1.08) }
#menu { display: flex; gap: 4px }
#menu a { text-decoration: none; padding: 8px 12px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; font-size: 14px; transition: color var(--t-fast), background var(--t-fast) }
#menu a:hover { color: var(--text); background: rgba(var(--fg-rgb),.06) }
#menu a.active { color: var(--text); background: rgba(var(--acc-rgb), .16) }
#account { display: flex; gap: 8px; align-items: center }

main { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 80px; outline: none }
main > * { animation: up calc(.54s * var(--spd)) var(--ease) both }
main > *:nth-child(2) { animation-delay: calc(.05s * var(--spd)) } main > *:nth-child(3) { animation-delay: calc(.1s * var(--spd)) } main > *:nth-child(n+4) { animation-delay: calc(.14s * var(--spd)) }
@keyframes up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes pop { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }

/* Knöpfe & Felder */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 11px 18px; border: 1px solid var(--edge-hi); background: rgba(var(--fg-rgb),.05); border-radius: var(--r-sm);
  transition: transform var(--t) var(--spring), background var(--t), border-color var(--t), box-shadow var(--t-slow) var(--ease) }
.btn:hover { transform: translateY(-2px); background: rgba(var(--fg-rgb),.09) }
.btn:active { transform: scale(.97) }
.btn.primary { border: 0; color: var(--on-accent); background: linear-gradient(135deg, var(--accent2), var(--accent) 45%, var(--accent-deep)); box-shadow: 0 10px 30px -10px rgba(var(--acc-rgb),.9);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)) }
.btn.primary:hover { box-shadow: 0 14px 40px -8px rgba(var(--acc-rgb),1) }
.btn.small { padding: 7px 11px; font-size: 13px }
.btn.danger { color: var(--red); border-color: rgba(255,107,125,.35) }
.btn.ok { color: var(--green); border-color: rgba(87,214,160,.35) }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px }
label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px }
input, select, textarea { width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(var(--bg-rgb),.55); transition: border-color var(--t-fast), box-shadow var(--t) }
/* Aufgeklappte Auswahllisten: der Browser zeichnet sie deckend – sonst helle Schrift auf weißem Grund */
select option, select optgroup { background-color: var(--bg); color: var(--text) }
select option:checked { background-color: var(--accent); color: var(--on-accent) }
select option:disabled { color: var(--dim) }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(var(--acc-rgb),.7); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.15) }
.check { display: flex; gap: 10px; align-items: center; font-weight: 500 } .check input { width: auto; accent-color: var(--accent) }

/* Hero */
.hero { position: relative; padding: clamp(56px, 10vw, 110px) 0 40px; text-align: left }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .32em; color: var(--accent); text-transform: uppercase }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent) }
.hero h1 { margin: 16px 0 10px; font-size: clamp(40px, 8vw, 86px); line-height: .95; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--text) 30%, var(--accent2) 75%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent }
.hero p.sub { max-width: 640px; color: var(--text2); font-size: clamp(15px, 2vw, 18px); margin: 0 0 26px }
.ctas { display: flex; flex-wrap: wrap; gap: 12px }
.countdown { display: flex; gap: 10px; margin: 30px 0 0; flex-wrap: wrap }
.countdown div { min-width: 82px; padding: 12px 14px; text-align: center; background: var(--panel-solid); border: 1px solid var(--edge); border-radius: var(--r-md);
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)) }
.countdown b { display: block; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1 }
.countdown span { font-size: 11px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase }
.hero .date { margin-top: 14px; color: var(--muted); font-weight: 600 }

/* Karten & Abschnitte */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 46px }
.stat, .card, .team, .match, .panel { background: linear-gradient(160deg, rgba(var(--fg-rgb),.05), rgba(var(--fg-rgb),.01) 55%), var(--panel); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),.05), 0 18px 40px -26px rgba(0,0,0,.7) }
.card, .panel { backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)) }
.stat, .team, .match { background: linear-gradient(160deg, rgba(var(--fg-rgb),.05), rgba(var(--fg-rgb),.01) 55%), var(--panel-solid) }
.stat { padding: 16px 18px; border-radius: var(--r-md); transition: transform var(--t-slow) var(--ease), border-color var(--t) }
.stat:hover { transform: translateY(-3px); border-color: var(--edge-hi) }
.stat small { display: block; font-size: 11px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; font-weight: 700 }
.stat b { display: block; font-size: 22px; font-weight: 800; margin-top: 4px }
.section { margin: 54px 0 0 }
.section > h2, .page-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 900; text-transform: uppercase; letter-spacing: .02em }
.section > h2::before, .page-title::before { content: ""; width: 6px; height: 26px; border-radius: 3px; background: linear-gradient(var(--accent2), var(--accent)); transform: skewX(-14deg) }
.page-title { margin-top: 44px }
.lead { color: var(--muted); margin: -8px 0 22px }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px }
.card { padding: 20px; border-radius: var(--r) }
.card h3 { margin: 0 0 8px; font-size: 17px }
.muted { color: var(--muted) } .small { font-size: 13px; color: var(--muted) }

/* Ablauf */
.timeline { display: grid; gap: 10px }
.timeline div { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-md); background: rgba(var(--fg-rgb),.035); border: 1px solid var(--edge) }
.timeline b { font-variant-numeric: tabular-nums; color: var(--accent2); font-size: 16px }

/* Preise */
.prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px }
.prize { position: relative; padding: 22px 20px; border-radius: var(--r); overflow: hidden; background: var(--panel); border: 1px solid var(--edge); transition: transform var(--t-slow) var(--ease) }
.prize:hover { transform: translateY(-4px) }
.prize::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c, var(--accent)) }
.prize:nth-child(1) { --c: var(--gold); background: linear-gradient(160deg, rgba(245,197,66,.14), transparent 60%), var(--panel) }
.prize:nth-child(2) { --c: var(--silver) } .prize:nth-child(3) { --c: var(--bronze) }
.prize .place { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; color: var(--c, var(--accent)) }
.prize .what { font-size: 18px; font-weight: 800; margin-top: 6px }
.prize .medal { position: absolute; right: 16px; top: 14px; font-size: 30px; opacity: .9 }

/* Regeln & FAQ */
.rules { white-space: pre-wrap; line-height: 1.8; padding: 22px 24px; border-radius: var(--r) }
details.faq { border-radius: var(--r-md); border: 1px solid var(--edge); background: rgba(var(--fg-rgb),.035); margin-bottom: 10px; overflow: hidden; transition: border-color var(--t) }
details.faq[open] { border-color: rgba(var(--acc-rgb),.35) }
details.faq summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px }
details.faq summary::-webkit-details-marker { display: none }
details.faq summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; transition: transform var(--t-slow) var(--ease) }
details.faq[open] summary::after { transform: rotate(45deg) }
details.faq p { margin: 0; padding: 0 18px 16px; color: var(--text2); white-space: pre-wrap; animation: up var(--t-fast) var(--ease) both }

/* Teams */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px }
.team { padding: 16px; border-radius: var(--r); transition: transform var(--t-slow) var(--ease), border-color var(--t) }
.team:hover { transform: translateY(-3px); border-color: rgba(var(--acc-rgb),.35) }
.team-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
.tag { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 8px; font-weight: 900; letter-spacing: .04em; font-size: 15px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(var(--acc-rgb),.25), rgba(var(--acc2-rgb),.18)); border: 1px solid rgba(var(--acc-rgb),.35);
  clip-path: polygon(var(--cut-xs) 0, 100% 0, 100% calc(100% - var(--cut-xs)), calc(100% - var(--cut-xs)) 100%, 0 100%, 0 var(--cut-xs)) }
.team-head h3 { margin: 0; font-size: 16px; line-height: 1.25 }
.team-head .small { display: flex; align-items: center; gap: 6px }
.rank-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)) }
.rank-icon.lg { width: 34px; height: 34px }
.players { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none }
.players li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: calc(var(--r-sm) * .8); background: rgba(var(--fg-rgb),.035); font-size: 14px }
.players li.sub { opacity: .7 } .players li .role { margin-left: auto; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: rgba(var(--fg-rgb),.08); color: var(--muted) }
.badge.ok { background: rgba(87,214,160,.14); color: var(--green) } .badge.warn { background: rgba(245,197,66,.14); color: var(--gold) } .badge.bad { background: rgba(255,107,125,.14); color: var(--red) }
.empty { padding: 36px; text-align: center; color: var(--muted); border: 1px dashed var(--edge-hi); border-radius: var(--r); background: rgba(var(--fg-rgb),.02) }

/* Info-Bereich */
.facts { margin-bottom: 26px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) } .facts .stat .small { display: block; margin-top: 2px }
.info-layout { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start }
.toc { position: sticky; top: 92px; padding: 18px; margin: 0 }
.toc ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 2px }
.toc .n { display: inline-block; min-width: 26px; color: var(--accent); font-weight: 800; font-size: 12px }
.toc button { all: unset; cursor: pointer; display: flex; align-items: baseline; padding: 4px 6px; border-radius: calc(var(--r-sm) * .8); color: var(--text2); font-size: 14px; transition: background var(--t-fast), color var(--t-fast) }
.toc button:hover, .toc button:focus-visible { background: rgba(var(--acc-rgb),.12); color: var(--text) }
.info-sections { display: grid; gap: 14px }
.info-card { scroll-margin-top: 92px; transition: border-color var(--t-slow), box-shadow var(--t-slow) }
.info-card.flash { border-color: rgba(var(--acc-rgb),.6); box-shadow: 0 0 0 1px rgba(var(--acc-rgb),.35), 0 20px 50px -20px rgba(var(--acc-rgb),.45) }
.info-card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 19px }
.info-card h2 .num, .info-card h2 span { display: grid; place-items: center; min-width: 38px; height: 38px; font-size: 14px; font-weight: 900; color: var(--on-accent); border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent2), var(--accent)); clip-path: polygon(var(--cut-xs) 0, 100% 0, 100% calc(100% - var(--cut-xs)), calc(100% - var(--cut-xs)) 100%, 0 100%, 0 var(--cut-xs)) }
.info-card p { margin: 0 0 10px; color: var(--text2) } .info-card p:last-child { margin-bottom: 0 }
.info-card ul, .info-card ol { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 6px; color: var(--text2) }
.info-card li::marker { color: var(--accent2); font-weight: 800 }
.info-card strong { color: var(--text) }
@media (max-width: 860px) { .info-layout { grid-template-columns: 1fr } .toc { position: static } }

/* Turnierbaum */
.bracket-wrap { overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x proximity }
.bracket { display: flex; gap: 28px; min-width: max-content }
.round { display: flex; flex-direction: column; gap: 10px; min-width: 230px; scroll-snap-align: start }
.round .games { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px }
.round h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); text-align: center }
.match { border-radius: var(--r-md); overflow: hidden; position: relative; animation: pop var(--t) var(--ease) both }
.match .side { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 14px; border-bottom: 1px solid var(--edge) }
.match .side:last-of-type { border-bottom: 0 }
.match .side .tg { font-weight: 900; font-size: 11px; color: var(--muted); min-width: 34px }
.match .side .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.match .side .sc { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 22px; text-align: right }
.match .side.win { background: linear-gradient(90deg, rgba(var(--acc-rgb),.18), transparent); } .match .side.win .nm { font-weight: 800 }
.match .side.lose { opacity: .55 } .match .side.tbd .nm { color: var(--dim); font-style: italic }
.match.final { border-color: rgba(245,197,66,.5); box-shadow: 0 0 0 1px rgba(245,197,66,.2), 0 20px 50px -20px rgba(245,197,66,.4) }
.champion { margin: 18px 0 0; padding: 22px; border-radius: var(--r); text-align: center; background: linear-gradient(160deg, rgba(245,197,66,.18), rgba(var(--acc-rgb),.08) 60%), var(--panel); border: 1px solid rgba(245,197,66,.4); animation: pop var(--t-slow) var(--spring) both }
.champion b { display: block; font-size: clamp(24px, 5vw, 40px); font-weight: 900; text-transform: uppercase }

/* Formulare / Panels */
.panel { padding: 22px; border-radius: var(--r); margin-top: 16px }
.auth { max-width: 440px; margin: 60px auto 0 }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px 16px }
.form .full { grid-column: 1 / -1 }
.row-player { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 8px; align-items: end; padding: 10px; border-radius: var(--r-md); background: rgba(var(--fg-rgb),.03); border: 1px solid var(--edge) }
.row-player .num { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent); text-transform: uppercase }
.rows { display: grid; gap: 10px }
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px }
.msg { min-height: 22px; margin-top: 12px; font-weight: 600 } .msg.err { color: var(--red) } .msg.ok { color: var(--green) }
.notice { padding: 12px 16px; border-radius: var(--r-md); border: 1px solid rgba(245,197,66,.35); background: rgba(245,197,66,.08); color: var(--gold); margin: 14px 0 }
.secret { font: 700 20px ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: 14px; border-radius: var(--r-md); background: rgba(var(--bg-rgb),.55); border: 1px dashed var(--accent2); text-align: center; user-select: all }

/* Admin */
.tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 5px; border-radius: var(--r-md); background: rgba(var(--fg-rgb),.035); border: 1px solid var(--edge); width: fit-content; max-width: 100%; margin: 6px 0 18px; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tabs button { flex: none; white-space: nowrap; cursor: pointer; border: 0; background: transparent; padding: 9px 14px; border-radius: var(--r-sm); font-weight: 700; color: var(--muted); transition: background var(--t-fast), color var(--t-fast) }
.tabs button.active { color: var(--on-accent); background: linear-gradient(135deg, var(--accent2), var(--accent)) }
.list { display: grid; gap: 8px }
.item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: rgba(var(--fg-rgb),.035); border: 1px solid var(--edge) }
.item .grow { flex: 1; min-width: 200px }
.item .actions { display: flex; gap: 6px; flex-wrap: wrap }
input.seed { width: 96px; padding: 7px 9px }
.panel h3 { margin-top: 0 }
.adm-match { display: grid; grid-template-columns: 1fr 64px 18px 64px 1fr auto; gap: 8px; align-items: center }
.adm-match input { text-align: center; padding: 8px }
.adm-match .r { text-align: right } .log div { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--edge) }
.kv { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin-bottom: 8px }
.kv.info-kv { grid-template-columns: 1fr; padding: 12px; border-radius: var(--r-md); background: rgba(var(--fg-rgb),.03); border: 1px solid var(--edge) }
.kv.info-kv .btn { justify-self: start }
.avatar { width: 28px; height: 28px; border-radius: 50% }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600 }

/* Erscheinungsbild-Editor */
.theme-form .gap-top, .theme-form .theme-grid { margin-top: 18px }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px 16px }
.presets { display: flex; flex-wrap: wrap; gap: 8px }
.preset { display: inline-flex; align-items: center; gap: 8px }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(var(--fg-rgb),.3); flex: none }
.sw-0 { background: #2f8cff } .sw-1 { background: #8b5cf6 } .sw-2 { background: #ff7a18 } .sw-3 { background: #ef3b4f } .sw-4 { background: #22c58b } .sw-5 { background: #a3b3c9 } .sw-6 { background: #eef2f8 }
.color-field { display: flex; gap: 8px; align-items: center }
.color-field input[type="color"] { width: 46px; height: 40px; padding: 3px; flex: none; cursor: pointer }
.color-field input[type="text"] { font-family: ui-monospace, Consolas, monospace; text-transform: lowercase }
input[type="range"] { padding: 0; height: 40px; accent-color: var(--accent); background: transparent; border: 0 }
.range-head { display: flex; justify-content: space-between } .range-head output { font-variant-numeric: tabular-nums; color: var(--accent2); font-weight: 700; font-size: 13px }
.style-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px }
.style-pick label { margin: 0; cursor: pointer; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--edge); background: rgba(var(--fg-rgb),.03); transition: border-color var(--t-fast), background var(--t-fast) }
.style-pick label:has(input:checked) { border-color: rgba(var(--acc-rgb),.7); background: rgba(var(--acc-rgb),.12) }
.style-pick input { width: auto; margin-right: 6px; accent-color: var(--accent) }
.style-pick small { display: block; margin-top: 4px; color: var(--muted); font-weight: 500 }

.fab { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; font-size: 19px; cursor: pointer;
  border: 1px solid var(--edge-hi); background: var(--panel-strong); color: var(--text); border-radius: var(--r-md);
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
  transition: transform var(--t) var(--spring), background var(--t); animation: pop var(--t-slow) var(--spring) calc(.5s * var(--spd)) both }
.fab:hover { transform: translateY(-2px) scale(1.06); background: rgba(var(--acc-rgb),.2) }
#sfxToggle[aria-pressed="false"] { opacity: .6 }
#designToggle { bottom: 74px; animation-delay: calc(.6s * var(--spd)) }

/* Impressum, Datenschutz, Login-Hinweise */
.foot-links { display: flex; flex-wrap: wrap; gap: 16px } .foot a { color: var(--muted) } .foot a:hover { color: var(--text) }
.legal { display: grid; gap: 14px; margin-bottom: 18px }
.legal h2 { margin: 0 0 10px; font-size: 17px } .legal p { margin: 0 0 10px; color: var(--text2) } .legal p:last-child { margin-bottom: 0 }
.legal ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; color: var(--text2) } .legal a { color: var(--accent2) }
.notice a { color: inherit }
.trust { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(87,214,160,.3); background: rgba(87,214,160,.07); font-size: 13px }
.trust ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text2) }

/* Wartung / gesperrt */
.site-closed #menu, .site-closed #account, .site-closed .foot .foot-login { display: none }
.closed { max-width: 620px; margin: clamp(48px, 12vh, 120px) auto 0; padding: clamp(28px, 5vw, 44px); text-align: center }
.closed .eyebrow::before { display: none }
.closed h1 { margin: 10px 0 12px; font-size: clamp(28px, 5vw, 44px); line-height: 1.05; font-weight: 900; text-transform: uppercase }
.closed-icon { font-size: 54px; line-height: 1; margin-bottom: 14px; animation: bob calc(3s * var(--spd)) ease-in-out infinite }
.closed-msg { color: var(--text2); font-size: 17px; white-space: pre-wrap; margin: 0 0 22px }
.closed .ctas { justify-content: center }
.closed-admin { margin: 26px 0 0 } .closed-admin a { color: var(--muted) }
@keyframes bob { 50% { transform: translateY(-6px) } }
.site-banner { max-width: 1160px; margin: 14px auto 0; padding: 10px 16px; border-radius: var(--r-md); border: 1px solid rgba(245,197,66,.4); background: rgba(245,197,66,.1); color: var(--gold); font-size: 14px; font-weight: 600; width: calc(100% - 2 * clamp(16px, 4vw, 32px)) }
.site-banner a { color: inherit; margin-left: 6px }

/* Persönliches Design: Seitenmenü */
.drawer-wrap { position: fixed; inset: 0; z-index: 50 }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); animation: fade var(--t) var(--ease) both }
.drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 48px;
  background: var(--panel-strong); border-left: 1px solid var(--edge-hi); box-shadow: -30px 0 60px -30px rgba(0,0,0,.7);
  backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); animation: slidein var(--t-slow) var(--ease) both }
.drawer-x { position: sticky; top: 0; float: right; z-index: 2; margin-left: 10px }
.drawer h3 { margin-top: 4px }
.drawer .style-pick { grid-template-columns: 1fr }
.drawer .theme-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) }
@keyframes slidein { from { transform: translateX(48px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
[data-style="liquid"] .drawer { background: var(--lg-fill), var(--panel-strong); border-left: 1px solid var(--lg-edge); box-shadow: var(--lg-shadow) }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 26px 84px 26px clamp(16px, 4vw, 40px); border-top: 1px solid var(--edge); color: var(--dim); font-size: 12px }

/* ================================================================ Liquid Glass (Apple-Stil)
   Durchsichtige, stark weichgezeichnete Flächen mit Lichtkante, Spiegelung und Kapsel-Formen. */
[data-style="liquid"] {
  --lg-fill: linear-gradient(135deg, rgba(var(--fg-rgb),.12), rgba(var(--fg-rgb),.035) 42%, rgba(var(--fg-rgb),.07));
  --lg-edge: rgba(var(--fg-rgb),.18);
  --lg-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.18),
    inset 0 0 22px rgba(var(--fg-rgb),.05), 0 18px 44px -22px rgba(0,0,0,.6);
  --lg-filter: blur(var(--blur)) saturate(185%) brightness(1.06);
}
[data-style="liquid"][data-scheme="light"] { --lg-edge: rgba(255,255,255,.7); --lg-fill: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.28) 45%, rgba(255,255,255,.45));
  --lg-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.05), 0 16px 40px -20px rgba(15,30,60,.35) }
[data-style="liquid"] .nav { top: 12px; width: min(1180px, calc(100% - 24px)); margin: 12px auto 0; border-radius: 999px; border: 1px solid var(--lg-edge); padding: 10px 14px 10px 18px;
  background: var(--lg-fill), rgba(var(--bg-rgb), .35); backdrop-filter: var(--lg-filter); -webkit-backdrop-filter: var(--lg-filter); box-shadow: var(--lg-shadow) }
[data-style="liquid"] #menu a { border-radius: 999px }
[data-style="liquid"] #menu a.active { background: rgba(var(--fg-rgb),.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(var(--fg-rgb),.1) }
[data-style="liquid"] :is(.card, .panel, .stat, .team, .match, .prize, .tabs, .item, details.faq, .timeline div, .countdown div, .empty, .row-player, .kv.info-kv, .style-pick label) {
  background: var(--lg-fill), var(--panel); border: 1px solid var(--lg-edge); box-shadow: var(--lg-shadow) }
[data-style="liquid"] :is(.card, .panel, .tabs, .countdown div) { backdrop-filter: var(--lg-filter); -webkit-backdrop-filter: var(--lg-filter) }
/* Spiegelung oben links */
[data-style="liquid"] :is(.card, .panel, .stat, .team, .prize) { position: relative; isolation: isolate }
[data-style="liquid"] .toc { position: sticky }
@media (max-width: 860px) { [data-style="liquid"] .toc { position: relative } }
[data-style="liquid"] :is(.card, .panel, .stat, .team, .prize)::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 12% -12%, rgba(255,255,255,.16), transparent 48%), radial-gradient(80% 50% at 100% 115%, rgba(var(--acc2-rgb),.10), transparent 60%) }
[data-style="liquid"] .prize:nth-child(1) { background: linear-gradient(160deg, rgba(245,197,66,.16), transparent 60%), var(--lg-fill), var(--panel) }
[data-style="liquid"] :is(.stat, .team, .prize):hover { transform: translateY(-3px) scale(1.01); border-color: rgba(var(--fg-rgb),.3) }
[data-style="liquid"] .btn { border-radius: 999px; clip-path: none; border: 1px solid var(--lg-edge); background: var(--lg-fill); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px -10px rgba(0,0,0,.5);
  backdrop-filter: blur(8px) saturate(170%); -webkit-backdrop-filter: blur(8px) saturate(170%) }
[data-style="liquid"] .btn:hover { background: linear-gradient(135deg, rgba(var(--fg-rgb),.2), rgba(var(--fg-rgb),.07)); transform: translateY(-2px) scale(1.02) }
[data-style="liquid"] .btn.primary { border: 1px solid rgba(255,255,255,.35); color: var(--on-accent);
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 52%), linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.18), 0 12px 32px -12px rgba(var(--acc-rgb),.9) }
[data-style="liquid"] .btn.danger { color: var(--red) } [data-style="liquid"] .btn.ok { color: var(--green) }
[data-style="liquid"] .tabs { border-radius: 999px } [data-style="liquid"] .tabs button { border-radius: 999px }
[data-style="liquid"] .tabs button.active { color: var(--text); background: rgba(var(--fg-rgb),.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(var(--fg-rgb),.12), 0 4px 14px -6px rgba(0,0,0,.5) }
[data-style="liquid"] :is(input, select, textarea) { background: rgba(var(--fg-rgb),.06); border-color: rgba(var(--fg-rgb),.14); box-shadow: inset 0 1px 2px rgba(0,0,0,.2) }
[data-style="liquid"] .tag, [data-style="liquid"] .info-card h2 .num, [data-style="liquid"] .info-card h2 span { box-shadow: inset 0 1px 0 rgba(255,255,255,.35) }
[data-style="liquid"] .badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.12) }
[data-style="liquid"] .fab { border-radius: 50%; border: 1px solid var(--lg-edge); background: var(--lg-fill), rgba(var(--bg-rgb),.35); box-shadow: var(--lg-shadow);
  backdrop-filter: var(--lg-filter); -webkit-backdrop-filter: var(--lg-filter) }
[data-style="liquid"] .foot { border-top: 0 }

/* ================================================================ Matt: keine Unschärfe (am schnellsten) */
[data-style="solid"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important }
[data-style="solid"] :is(.card, .panel) { background: var(--panel-solid) }

/* Animationen aus */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important }
html[data-motion="off"] { scroll-behavior: auto }

@media (max-width: 980px) { #account .chip { display: none } }
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; gap: 10px } #menu { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none } #menu::-webkit-scrollbar { display: none } #menu a { white-space: nowrap }
  [data-style="liquid"] .nav { border-radius: var(--r) }
  .row-player { grid-template-columns: 1fr 1fr } .adm-match { grid-template-columns: 1fr 56px 12px 56px 1fr; } .adm-match .btn { grid-column: 1 / -1 }
  .kv { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important } }

.section, .info-card, .team { content-visibility: auto; contain-intrinsic-size: auto 320px }