:root { color-scheme:dark; font-family:Arial,Helvetica,sans-serif; color:#eee; background:#060806; }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.designer-header { min-height:88px; max-width:1480px; margin:auto; padding:16px 24px; display:flex; gap:20px; align-items:center; justify-content:space-between; }
.designer-brand { display:flex; align-items:center; gap:12px; }
.designer-brand img { width:46px; height:46px; object-fit:contain; }
.designer-brand h1 { font-size:clamp(20px,2.5vw,28px); margin:0 0 5px; }
.designer-brand small { color:#a7b8ac; }
.designer-actions { display:flex; flex-wrap:wrap; gap:10px; }
.design-button { border:1px solid #00ff51; border-radius:9px; background:#00ff51; color:#041008; padding:12px 16px; font-weight:700; text-decoration:none; display:inline-block; }
.design-button.secondary { background:#101812; color:#a9ffbf; border-color:#386447; }
.design-button:disabled { opacity:.5; cursor:wait; }
.designer-main { max-width:1480px; margin:auto; padding:0 24px 20px; height:calc(100dvh - 88px); display:grid; grid-template-columns:350px minmax(0,1fr); gap:20px; }
.designer-controls,.designer-preview-panel { background:#0e140f; border:1px solid #284530; border-radius:16px; min-width:0; min-height:0; }
.designer-controls { padding:22px; overflow:auto; }
.designer-controls h2 { margin:0 0 8px; font-size:22px; }
.designer-hint { color:#aebcb1; font-size:14px; line-height:1.5; margin:0 0 18px; }
.topic-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.topic-button { display:flex; flex-direction:column; justify-content:center; gap:9px; min-height:108px; padding:16px; border:1px solid #34583e; border-radius:12px; background:#152019; color:#f2fff5; text-decoration:none; }
.topic-button:hover { border-color:#00ff51; background:#1a3020; }
.topic-button strong { color:#86ffa6; font-size:17px; }
.topic-button small { color:#aebcb1; line-height:1.35; }
.designer-field { display:block; margin:17px 0; font-weight:700; font-size:14px; }
.designer-field input:not([type=range]),.designer-field select { display:block; width:100%; margin-top:8px; min-height:43px; padding:10px; border:1px solid #3e6248; border-radius:8px; background:#080d09; color:#fff; }
.designer-field input[type=range] { display:block; width:100%; margin-top:12px; accent-color:#00ff51; }
.designer-field output { float:right; color:#a9ffbf; font-size:13px; font-weight:400; }
.designer-preview-panel { display:flex; flex-direction:column; overflow:hidden; }
.preview-panel-header { display:flex; align-items:center; justify-content:space-between; padding:17px 22px; border-bottom:1px solid #284530; font-size:14px; color:#b2c2b7; }
#draftStatus { color:#8fffad; }
.preview-stage { position:relative; flex:1; min-height:220px; background:radial-gradient(ellipse at center,#14251a 0%,#080d09 80%); }
.ranking-preview { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--fit,1)); transform-origin:center; border:var(--outer-border-width,2px) solid var(--accent,#00ff51); border-radius:var(--outer-radius,14px); background:var(--surface,#111); padding:8px; box-shadow:0 12px 40px #0006; overflow:hidden; }
.preview-inner { border-radius:inherit; background:var(--surface); overflow:hidden; }
.preview-title-area { text-align:center; padding:20px 12px; background:var(--surface); border-bottom:1px solid var(--row-border-color); }
.preview-title { color:var(--title-color); font-size:var(--title-size); font-weight:800; display:inline-block; overflow-wrap:anywhere; }
.preview-row { border:0 solid var(--row-border-color); border-bottom-width:var(--row-border-width); border-radius:var(--row-radius); background:var(--row-border-color); }
.preview-row:last-child { border-bottom:0; }
.preview-row-content { display:grid; grid-template-columns:max-content var(--photo-size,54px) minmax(0,1fr) max-content; gap:14px; align-items:center; padding:17px 18px; border-radius:inherit; background:var(--surface); }
.preview-rank { color:var(--rank-color); font-size:var(--rank-size); font-weight:800; white-space:nowrap; }
.preview-photo { display:grid; place-items:center; width:var(--photo-size,54px); height:var(--photo-size,54px); border:var(--photo-border-width) solid var(--photo-color); border-radius:var(--photo-radius); color:var(--photo-color); font-size:clamp(14px,calc(var(--photo-size,54px) * .33),48px); font-weight:800; }
.preview-photo { overflow:hidden; }
.preview-photo img { width:100%; height:100%; object-fit:cover; }
.preview-row-content.no-photo { grid-template-columns:max-content minmax(0,1fr) max-content; }
.player-identification { min-width:0; }
.player-text-line + .player-text-line { margin-top:4px; }
body[data-section=groessen] .designer-field { margin:11px 0; }
body[data-section=groessen] .designer-field input[type=range] { margin-top:8px; }
.player-display-menu { border:1px solid #3e6248; border-radius:9px; margin:16px 0; padding:12px; }
.player-display-menu summary { cursor:pointer; color:#a9ffbf; font-weight:700; }
.player-display-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.player-display-options label { display:flex; align-items:center; gap:8px; font-size:14px; }
.player-display-options input { width:20px; height:20px; accent-color:#00ff51; }
.preview-name { color:var(--name-color); font-size:var(--name-size); font-weight:700; display:inline-block; }
.preview-caption { display:block; color:var(--text-color); font-size:12px; margin-top:5px; opacity:.8; }
.preview-points { color:var(--points-color); font-size:var(--points-size); white-space:nowrap; font-weight:700; }
.layout-compact .preview-row-content { padding:9px 16px; }
.layout-cards .preview-row { margin:12px; border-width:var(--row-border-width); border-radius:var(--row-radius); padding:3px; }
.layout-cards .preview-row:last-child { border-bottom-width:var(--row-border-width); }
.preset-grid { display:grid; gap:10px; }
.preset-choice { display:flex; flex-direction:column; gap:9px; align-items:flex-start; width:100%; border:2px solid; border-radius:10px; padding:13px; }
.preset-choice[aria-pressed=true] { outline:2px solid #fff; outline-offset:2px; }
.preset-sample { font-size:13px; }
.color-targets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.color-choice { display:flex; align-items:center; gap:8px; padding:10px 8px; text-align:left; min-height:50px; border:1px solid #35553e; border-radius:8px; background:#101b13; color:#eee; font-size:13px; }
.color-choice::before { content:''; flex-shrink:0; width:19px; height:19px; background:var(--swatch); border:1px solid #ffffff66; border-radius:5px; }
.color-choice[aria-pressed=true] { border-color:#00ff51; background:#193b23; }
.color-editor { margin:18px 0; padding:14px; border:1px solid #51745b; border-radius:10px; }
.color-editor label { display:block; margin-bottom:10px; color:#9affb6; font-weight:700; font-size:14px; }
.color-inputs { display:grid; grid-template-columns:75px 1fr; gap:10px; }
.color-inputs input { width:100%; min-width:0; height:48px; border:1px solid #466e50; border-radius:8px; background:#080d09; color:#fff; padding:5px; }
.color-inputs input[type=text] { padding:10px; font-family:Consolas,monospace; }
body[data-section=farben] .ranking-preview [data-color],body[data-section=farben] .ranking-preview { cursor:crosshair; }
body[data-section=farben] .color-selected { outline:2px dashed #fff; outline-offset:3px; }
.color-tooltip { position:fixed; z-index:1000; padding:8px 11px; border:1px solid #9effb8; border-radius:7px; background:#050b07f5; box-shadow:0 4px 18px #0009; color:#fff; font:13px Arial,sans-serif; pointer-events:none; max-width:260px; }
.font-example { font-size:24px; line-height:1.7; padding:15px; border:1px solid #34583e; border-radius:9px; overflow-wrap:anywhere; }
.design-message { font-size:13px; color:#b5ffc9; line-height:1.4; margin-top:16px; min-height:20px; }
dialog { width:min(460px,calc(100vw - 32px)); border:1px solid #72e692; border-radius:15px; background:#101b13; color:#fff; padding:26px; box-shadow:0 20px 80px #000; }
dialog::backdrop { background:#000b; }
dialog h2 { margin-top:0; font-size:23px; }
dialog p { color:#c0cec3; line-height:1.5; }
.dialog-buttons { display:grid; gap:10px; margin-top:20px; }
.dialog-buttons button { width:100%; }
@media(max-width:1000px) { .designer-main { grid-template-columns:300px minmax(0,1fr); gap:14px; padding:0 14px 14px; }.designer-controls { padding:16px; }.topic-button { padding:12px; }.designer-header { padding:14px; } }
@media(max-width:720px) { .designer-header { min-height:100px; align-items:flex-start; }.designer-brand img { display:none; }.designer-brand h1 { font-size:19px; }.designer-actions { justify-content:flex-end; max-width:52%; }.design-button { padding:10px;font-size:12px; }.designer-main { height:auto; min-height:calc(100dvh - 100px); grid-template-columns:1fr; grid-template-rows:auto minmax(300px,42dvh); }.designer-controls { overflow:visible; }.topic-grid { grid-template-columns:repeat(3,1fr); gap:8px; }.topic-button { min-height:83px; padding:9px;gap:6px; }.topic-button strong { font-size:14px; }.topic-button small { font-size:11px; }.color-targets { grid-template-columns:repeat(3,1fr); }.preset-grid { grid-template-columns:1fr 1fr; }.designer-field { margin:12px 0; }.preview-panel-header { padding:12px; } }