/* LIGANAME Design Studio v5 · Änderungen aus lokalen CSS-Variablen */
:root{--design-accent:#f4ad7e;--design-bg:#0b0d12;--design-panel:#1b2029;--design-text:#f6f7fa;--design-radius:16px;--design-scale:1;--design-spacing:20px}
html{font-size:calc(16px * var(--design-scale))}
body{background:radial-gradient(ellipse at 72% 0%,color-mix(in srgb,var(--design-accent) 12%,transparent),transparent 46%),var(--design-bg);color:var(--design-text)}
.demo-banner a.selected,.primary,.hero-actions .primary{background:var(--design-accent);color:var(--design-bg);border-color:var(--design-accent)}
.nav button.active,nav button.active{border-color:color-mix(in srgb,var(--design-accent) 52%,transparent);color:var(--design-accent);box-shadow:inset 3px 0 0 var(--design-accent);background:color-mix(in srgb,var(--design-accent) 12%,transparent)}
nav button:hover{color:var(--design-accent)}
.panel,.metric,.discipline-case,.mini-stat,.match-fixture{border-radius:var(--design-radius);background:linear-gradient(145deg,color-mix(in srgb,var(--design-panel) 96%,white),var(--design-panel))}
.panel h3,.metric b,.discipline-case h3,.mini-stat b{color:var(--design-text)}
.panel:hover,.match-fixture:hover{border-color:color-mix(in srgb,var(--design-accent) 47%,#45434d)}
.metrics,.grid,.dashboard-lower,.discipline-summary,.discipline-cards{gap:var(--design-spacing)}
.kicker,.content .kicker,.content .hero-copy h1 em,.hero-eyebrow,.metric b:hover{color:var(--design-accent)}
.league-hero{background:radial-gradient(ellipse at 90% 24%,color-mix(in srgb,var(--design-accent) 26%,transparent),transparent 47%),linear-gradient(125deg,var(--design-panel),var(--design-bg))}
.sidebar{background:color-mix(in srgb,var(--design-panel) 44%,var(--design-bg));}
.main header{background:color-mix(in srgb,var(--design-panel) 32%,var(--design-bg));}
.content .panel{transition:background .18s,border-color .18s,transform .15s}
.studio-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:23px}
.studio-header h3{font-size:28px;margin:8px 0}
.studio-header p{max-width:650px;margin:3px 0}
.studio-header .actions{display:flex;gap:9px;flex-wrap:wrap}
.studio-header button{min-height:44px}
.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);gap:20px;align-items:start}
.studio-controls,.studio-side{display:grid;gap:17px;min-width:0}
.studio-layout .panel{padding:25px}
.studio-layout .panel h3{font-size:18px;margin-top:10px}
.studio-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px}
.studio-preset{display:flex;align-items:center;gap:10px;text-align:left;min-height:57px;border-radius:13px;border:1px solid #4b5260;color:#e6e9f0;background:#202733;padding:12px 14px}
.studio-preset b{font-size:12px}
.studio-preset:hover,.studio-preset.selected{border-color:var(--design-accent);background:color-mix(in srgb,var(--design-accent) 13%,#202733)}
.studio-preset-dot{display:block;width:24px;height:24px;border-radius:9px;flex-shrink:0;box-shadow:0 0 0 3px #fff1}
.studio-color-grid,.studio-range-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.studio-color-field,.studio-range-field{display:flex;gap:10px;flex-direction:column;align-items:stretch;padding:14px;border:1px solid #424956;border-radius:13px;background:#ffffff05;font-size:12px;color:#cfd7df;min-width:0}
.studio-input-inline{display:flex;align-items:center;gap:10px;min-width:0}
.studio-color-field input[type="color"]{min-height:39px;width:58px;min-width:58px;border:0;padding:0;background:transparent;cursor:pointer}
.studio-input-inline code{font-size:11px;color:#b8c9d5}
.studio-range-field output{font-size:11px;color:var(--design-accent);font-weight:800}
.studio-range-field input[type="range"]{min-height:25px;padding:0;accent-color:var(--design-accent);width:100%;cursor:pointer}
.studio-text-label{display:flex;flex-direction:column;gap:9px;margin-top:17px}
.studio-preview{border:1px solid #ffffff2a;padding:30px;margin:19px 0;min-height:340px;background:linear-gradient(135deg,var(--design-panel),var(--design-bg));display:flex;flex-direction:column;justify-content:center;gap:13px;position:relative;overflow:hidden}
.studio-preview:after{content:"";position:absolute;top:-85px;right:-100px;width:255px;height:255px;border:1px solid #ffffff20;border-radius:50%;pointer-events:none;box-shadow:0 0 0 26px #fff1,0 0 0 63px #fff1}
.studio-preview-kicker{font-size:10px;font-weight:800;letter-spacing:2px;opacity:.8}
.studio-preview h2{font-size:clamp(25px,3.3vw,36px);font-weight:870;line-height:1.1;letter-spacing:-1px;overflow-wrap:anywhere;margin:0}
.studio-preview p{margin:0;color:inherit;opacity:.8}
.studio-preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:7px 0}
.studio-preview-metrics div{display:flex;flex-direction:column;gap:7px;border:1px solid #ffffff25;background:#ffffff12;padding:13px;border-radius:12px}
.studio-preview-metrics small{font-size:10px}
.studio-preview-metrics b{font-size:22px}
.studio-preview-button{border:0;border-radius:10px;align-self:flex-start;min-height:43px;padding:11px 17px;font-weight:800}
.studio-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:13px}
body[data-density="compact"] .panel,body[data-density="compact"] .metric{padding:calc(var(--design-spacing) * .68)}
body[data-density="airy"] .panel,body[data-density="airy"] .metric{padding:calc(var(--design-spacing) * 1.55)}
body[data-custom-style="neon"]{background-image:radial-gradient(ellipse at 95% 10%,#16f3bb20,transparent 47%)}
body[data-custom-style="magma"]{background-image:radial-gradient(ellipse at 85% 12%,#ee4a5120,transparent 48%)}
@media(max-width:960px){.studio-layout{grid-template-columns:1fr}.studio-side{grid-row:1}}
@media(max-width:650px){
 .studio-header{gap:12px}
 .studio-header h3{font-size:25px}
 .studio-layout .panel{padding:18px}
 .studio-layout{gap:14px}
 .studio-color-grid,.studio-range-grid{gap:9px}
 .studio-color-field,.studio-range-field{padding:11px}
 .studio-presets{gap:8px}
 .studio-preset{padding:11px 9px}
 .studio-preview{padding:22px;margin:15px 0;min-height:295px}
 .studio-preview-metrics div{padding:10px}
 .studio-header .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .studio-header .actions button:last-of-type{grid-column:1/-1}
}