/* HanselCraft AI-Ads – KI-Showdown (03.10.2026) */
.sd-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 22px}
.sd-tab{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:700;font-size:14.5px;cursor:pointer;transition:.18s}
.sd-tab .n{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(124,92,255,.16);color:#c9bcff;font-size:12.5px}
.sd-tab:hover{color:#fff;border-color:rgba(124,92,255,.6)}
.sd-tab[aria-selected=true]{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.12));border-color:var(--accent);color:#fff}
.sd-panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px}
.sd-panel.on{display:block;animation:sdIn .25s ease}
@keyframes sdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sd-sub{color:var(--muted);font-size:14.5px;margin:-4px 0 18px;max-width:760px}
.sd-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;border:1px solid var(--line);background:#121725;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;transition:.18s}
.sd-btn:hover{border-color:var(--accent);color:#fff}
.sd-btn.prim{background:var(--grad);color:#0b0d13;border:none}
.sd-btn:disabled{opacity:.45;cursor:default}
.sd-vid{position:relative;border-radius:16px;overflow:hidden;background:#05070c;border:1px solid var(--line)}
.sd-vid video{display:block;width:100%;height:100%;object-fit:cover}
.sd-tag{position:absolute;top:10px;left:10px;z-index:3;font-size:10.5px;font-weight:800;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);padding:3px 8px;border-radius:7px;color:#eafff5}
/* Duell */
.du-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.du-head h3{font-size:21px}
.du-head .txt{color:var(--muted);font-size:14px;max-width:620px;margin-top:4px;font-style:italic}
.du-dots{display:flex;gap:6px}
.du-dots button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#121725;color:var(--muted);font-weight:800;cursor:pointer}
.du-dots button.on{border-color:var(--accent);color:#fff;background:rgba(124,92,255,.2)}
.du-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.du-vs{width:58px;height:58px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#0b0d13;font-weight:900;font-size:19px;box-shadow:0 10px 30px -8px rgba(124,92,255,.7)}
.du-side{display:flex;flex-direction:column;gap:10px}
.du-side .sd-vid{aspect-ratio:9/16;max-height:520px}
.du-side.win .sd-vid{border-color:var(--good);box-shadow:0 0 0 2px rgba(52,211,153,.45)}
.du-name{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800}
.du-name img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.du-name .l{display:flex;align-items:center;gap:9px}
.du-bar{height:9px;border-radius:9px;background:#0f1320;overflow:hidden;border:1px solid var(--line);display:none}
.du-bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .8s ease}
.du-side.voted .du-bar{display:block}
.du-pct{font-size:13px;color:var(--muted);display:none}
.du-side.voted .du-pct{display:block}
.du-note{color:var(--muted);font-size:12.5px;margin-top:14px}
.du-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));cursor:pointer;border:none;color:#fff}
.du-play span{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);display:grid;place-items:center;font-size:20px;border:1px solid rgba(255,255,255,.35)}
@media(max-width:760px){.du-grid{grid-template-columns:1fr 1fr;gap:10px}.du-vs{display:none}.sd-panel{padding:16px}.du-side .sd-vid{max-height:none}}
/* Konfigurator */
.kf-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
@media(max-width:900px){.kf-grid{grid-template-columns:1fr}}
.kf-l label{display:block;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2);margin:14px 0 8px}
.kf-l label:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#121725;color:var(--muted);font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
.chip:hover{color:#fff;border-color:rgba(124,92,255,.6)}
.chip.on{background:rgba(124,92,255,.22);border-color:var(--accent);color:#fff}
.faces{display:flex;flex-wrap:wrap;gap:8px}
.face{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--muted);width:58px}
.face img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid transparent;transition:.15s}
.face.on{color:#fff}.face.on img{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.kf-in{width:100%;background:#0f1320;border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--ink);font:inherit;font-size:14.5px}
.kf-in:focus{outline:none;border-color:var(--accent)}
.kf-r{display:flex;flex-direction:column;gap:14px}
.kf-r .sd-vid{aspect-ratio:9/16;max-height:430px;width:100%;margin:0 auto;max-width:260px}
.kf-r .sd-vid.wide{aspect-ratio:16/9;max-width:none;max-height:none}
.kf-r .sd-vid video{object-fit:contain}
.kf-me{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);padding:4px 10px 4px 4px;border-radius:999px;font-size:12px;font-weight:700}
.kf-me img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.skript{background:#0f1320;border:1px solid var(--line);border-radius:14px;padding:16px}
.skript .row{display:flex;gap:10px;margin-bottom:9px;font-size:14.5px;line-height:1.5}
.skript .row b{flex:none;width:62px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent2);padding-top:3px}
.skript .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.kf-acts{display:flex;gap:9px;flex-wrap:wrap}
.kf-hint{font-size:12px;color:var(--muted)}
/* Foto -> Video */
.fv-wrap{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
@media(max-width:820px){.fv-wrap{grid-template-columns:1fr}}
.fv{position:relative;width:min(340px,86vw);aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:1px solid var(--line);margin:0 auto;touch-action:none;user-select:none}
.fv video,.fv .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fv .foto{z-index:2;clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.fv .grip{position:absolute;top:0;bottom:0;left:var(--p,50%);z-index:4;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.6)}
.fv .grip::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:#0b0d13;display:grid;place-items:center;font-weight:900;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.fv .lab{position:absolute;bottom:12px;z-index:5;font-size:11px;font-weight:800;padding:4px 9px;border-radius:7px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2)}
.fv .lab.l{left:12px}.fv .lab.r{right:12px}
.fv input[type=range]{position:absolute;inset:0;z-index:6;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.fv-steps{display:flex;flex-direction:column;gap:12px}
.fv-steps .s{display:flex;gap:12px;align-items:flex-start}
.fv-steps .s i{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(124,92,255,.16);color:#c9bcff;display:grid;place-items:center;font-style:normal;font-weight:800}
.fv-steps .s p{color:var(--muted);font-size:14.5px}.fv-steps .s b{color:#fff}
/* Formate */
.fm-bar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.fm-stage{display:grid;place-items:center;min-height:440px;background:radial-gradient(closest-side,rgba(124,92,255,.12),transparent);border-radius:16px}
.fm-dev{position:relative;transition:width .35s ease,aspect-ratio .35s ease;width:250px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:8px solid #05070c;box-shadow:0 30px 60px -25px rgba(0,0,0,.9),0 0 0 1px var(--line);background:#000}
.fm-dev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-dev.f11{width:340px;aspect-ratio:1/1;border-radius:14px}
.fm-dev.f169{width:min(640px,88vw);aspect-ratio:16/9;border-radius:12px}
.fm-ui{position:absolute;inset:0;z-index:3;pointer-events:none;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.fm-ui .top{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;opacity:.95}
.fm-ui .side{position:absolute;right:10px;bottom:70px;display:flex;flex-direction:column;gap:14px;align-items:center}
.fm-ui .side span{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:13px}
.fm-ui .bot{position:absolute;left:12px;bottom:14px;right:60px;font-weight:600}
.fm-ui .bot b{display:block;font-weight:800}
.fm-ui .yt{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.25)}
.fm-ui .yt i{display:block;height:100%;width:38%;background:#ff3b3b}
.fm-ui .web{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px}
.fm-info{text-align:center;color:var(--muted);font-size:13.5px;margin-top:14px}
.fm-snd{position:absolute;right:10px;top:40px;z-index:5;pointer-events:auto;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:800;cursor:pointer}
/* Hero */
.hero-mix-btn{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;white-space:nowrap}
.hero-faces{position:absolute;right:12px;top:12px;z-index:3;font-size:11px;font-weight:800;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);padding:4px 9px;border-radius:7px;color:#fff}
@media(max-width:860px){.spot-grid{grid-template-columns:1fr!important}.spot-grid .videoslot{max-width:340px;margin:0 auto;width:100%}}
#showdown{padding-top:40px}
.fm-dev.f11{width:min(340px,78vw)}
.fm-dev{width:min(250px,62vw)}
@media(max-width:620px){.sd-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sd-tab{padding:9px 10px;font-size:13px}.fm-stage{min-height:0;padding:10px 0}}
.du-grid{align-items:start}.du-vs{align-self:center}
.du-name{flex-wrap:wrap}
@media(max-width:760px){.du-name{flex-direction:column;align-items:stretch;gap:8px}.du-name .du-vote{justify-content:center;font-size:13px;padding:9px 8px;white-space:normal}}