/* Sicherheits-Studio 4.0: eigene Studio-Gestaltung im Industrie-4.0-Look (Nachtblau, Cyan, Amber, Mint) */
.gm-testmode{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:10px;background:#fff4d1;border:1.5px solid #e7c46a;color:#6b4e00;font-size:14px;font-weight:700}
.gm-studio .gm-head{margin-bottom:14px}

.qs{--cy:#5fe4ff;--am:#ffd16a;--ok:#3cf0a8;--bad:#ff5468;--ink:#eaf6ff;--dim:#8fb3c9;position:relative;isolation:isolate;overflow:hidden;border-radius:26px;min-height:620px;color:var(--ink);background:radial-gradient(120% 80% at 50% -10%,#173a5c 0%,#0b1d33 42%,#050c18 100%);box-shadow:0 30px 80px #04101e55,inset 0 0 0 1px #5fe4ff22;font-family:Manrope,system-ui,sans-serif}
.qs{overflow:clip}
.qs-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.qs-floor{position:absolute;left:-30%;right:-30%;bottom:-8%;height:58%;transform:perspective(600px) rotateX(62deg);transform-origin:bottom;background-image:linear-gradient(#5fe4ff38 1px,transparent 1px),linear-gradient(90deg,#5fe4ff38 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to top,#000 10%,transparent 85%);animation:qs-grid 6s linear infinite}
@keyframes qs-grid{to{background-position:0 56px}}
.qs-beam{position:absolute;top:-20%;width:34%;height:120%;background:linear-gradient(180deg,#bff4ff55,transparent 70%);filter:blur(18px);transform-origin:top center;mix-blend-mode:screen;opacity:.55}
.qs-beam.b1{left:-4%;transform:rotate(18deg);animation:qs-sweep 9s ease-in-out infinite}
.qs-beam.b2{left:33%;transform:rotate(0deg);background:linear-gradient(180deg,#ffe3a055,transparent 70%);animation:qs-sweep2 11s ease-in-out infinite}
.qs-beam.b3{right:-4%;transform:rotate(-18deg);animation:qs-sweep 10s ease-in-out infinite reverse}
@keyframes qs-sweep{0%,100%{transform:rotate(18deg)}50%{transform:rotate(6deg)}}
@keyframes qs-sweep2{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.qs-haze{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 100%,#5fe4ff22,transparent 70%),radial-gradient(40% 30% at 15% 20%,#ffd16a14,transparent 70%)}
.qs-fx{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}

.qs-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px 6px}
.qs-brand{display:flex;align-items:center;gap:12px}
.qs-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#ffd16a,#ff9f43);color:#0b1d33;font-size:20px;box-shadow:0 0 24px #ffd16a66}
.qs-brand b{display:block;font-size:17px;letter-spacing:2.5px}.qs-brand b em{font-style:normal;color:var(--cy)}
.qs-brand small{display:block;font-size:12px;letter-spacing:1.5px;color:var(--dim);font-weight:700;text-transform:uppercase}
.qs-sound{border:1px solid #5fe4ff55;background:#0b1d33aa;color:var(--ink);border-radius:30px;padding:9px 16px;font:700 14px Manrope,system-ui;cursor:pointer;backdrop-filter:blur(6px)}

.qs-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;padding:10px 26px 28px;align-items:start}
.qs-side{display:flex;flex-direction:column;align-items:center;gap:10px;position:sticky;top:10px}
.qs-host{position:relative;width:170px;height:170px;display:grid;place-items:center}
.qs-host img{width:132px;height:132px;border-radius:50%;object-fit:cover;border:3px solid #0b1d33;box-shadow:0 0 0 3px var(--cy),0 0 40px #5fe4ff88;position:relative;z-index:1}
.qs-ring{position:absolute;inset:0}
.qs-ring i{position:absolute;inset:0;border-radius:50%;border:2px dashed #5fe4ff88;animation:qs-spin 14s linear infinite}
.qs-ring i+i{inset:12px;border:2px solid transparent;border-top-color:var(--am);border-right-color:var(--am);animation:qs-spin 3.5s linear infinite reverse}
@keyframes qs-spin{to{transform:rotate(360deg)}}
.qs-wave{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:4px;align-items:flex-end;height:22px;padding:4px 10px;border-radius:20px;background:#050c18dd}
.qs-wave i{width:4px;height:5px;border-radius:3px;background:var(--am);opacity:.5}
.qs.is-speaking .qs-wave i{opacity:1;animation:qs-talk .8s ease-in-out infinite alternate}
.qs.is-speaking .qs-wave i:nth-child(2){animation-delay:.12s}.qs.is-speaking .qs-wave i:nth-child(3){animation-delay:.3s}.qs.is-speaking .qs-wave i:nth-child(4){animation-delay:.18s}.qs.is-speaking .qs-wave i:nth-child(5){animation-delay:.42s}
@keyframes qs-talk{to{height:16px}}
.qs-hostname{margin:0;text-align:center}.qs-hostname b{display:block;font-size:20px}.qs-hostname small{color:var(--dim);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.qs-level{width:100%;margin-top:8px;padding:14px;border-radius:16px;background:#071526cc;border:1px solid #5fe4ff33}
.qs-level p{margin:0 0 10px;font-size:11px;letter-spacing:2px;font-weight:800;color:var(--dim);text-align:center}
.qs-level ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:5px}
.qs-level li{height:22px;border-radius:6px;background:#0f2640;border:1px solid #5fe4ff22;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:800;color:#5f7f96;transition:all .4s}
.qs-level li.on{background:linear-gradient(90deg,#1c8f6b,#3cf0a8);color:#03261b;border-color:#3cf0a8;box-shadow:0 0 14px #3cf0a855}
.qs-level li.next{border-color:var(--am);color:var(--am);box-shadow:0 0 0 1px #ffd16a55 inset}

.qs-main{min-width:0;position:relative;z-index:2}
.qs-scene{animation:qs-in .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes qs-in{from{opacity:0;transform:translateY(24px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Auftritt, Runde 2, Abschluss */
.qs-intro,.qs-final{text-align:center;padding:30px 10px 10px}
.qs-eyebrow{margin:0 0 10px;font-size:13px;letter-spacing:3px;font-weight:800;color:var(--cy)}
.qs-title{margin:0 0 14px;font-size:clamp(30px,4.2vw,54px);line-height:1.08;font-weight:800;letter-spacing:-.5px}
.qs-title span{display:inline-block;background:linear-gradient(90deg,#ffffff,#bff4ff 40%,#ffd16a);-webkit-background-clip:text;background-clip:text;color:transparent;animation:qs-scan 1.1s ease-out both}
@keyframes qs-scan{from{clip-path:inset(0 100% 0 0);filter:drop-shadow(0 0 0 #5fe4ff)}60%{filter:drop-shadow(0 0 18px #5fe4ff)}to{clip-path:inset(0 0 0 0);filter:none}}
.qs-lead{max-width:620px;margin:0 auto 20px;font-size:20px;line-height:1.55;color:#cfe6f5}
.qs-rules{list-style:none;padding:0;margin:0 auto 26px;max-width:520px;display:grid;gap:8px;text-align:left}
.qs-rules li{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:14px;background:#0b1d33aa;border:1px solid #5fe4ff26;font-size:17px}
.qs-rules b{color:var(--am)}
.qs-go{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:18px;padding:20px 34px;font:800 24px Manrope,system-ui;color:#132430;background:linear-gradient(180deg,#ffe08f,#ffc44d);box-shadow:0 0 0 2px #ffd16a,0 10px 40px #ffd16a55,0 6px 0 #c48d22;cursor:pointer;animation:qs-breathe 2.4s ease-in-out infinite}
.qs-go span{font-size:18px}.qs-go.small{font-size:19px;padding:14px 22px;animation:none}
.qs-go:active{transform:translateY(3px);box-shadow:0 0 0 2px #ffd16a,0 3px 0 #c48d22}
@keyframes qs-breathe{50%{box-shadow:0 0 0 2px #ffd16a,0 10px 60px #ffd16a88,0 6px 0 #c48d22}}
.qs-ghost{border:1.5px solid #5fe4ff88;background:#0b1d33aa;color:var(--ink);border-radius:14px;padding:13px 20px;font:700 18px Manrope,system-ui;cursor:pointer}

/* Frage als Holo-Tafel */
.qs-qhead{display:flex;gap:8px;margin:4px 0 12px}
.qs-chip{font-size:13px;font-weight:800;letter-spacing:2px;padding:6px 12px;border-radius:30px;background:#5fe4ff1f;color:var(--cy);border:1px solid #5fe4ff55}
.qs-chip.warn{background:#ffd16a1f;color:var(--am);border-color:#ffd16a66}
.qs-card{position:relative;padding:28px 30px;border-radius:20px;background:linear-gradient(160deg,#173a5ccc,#0b1d33e6);border:1px solid #5fe4ff55;box-shadow:0 0 0 1px #5fe4ff18 inset,0 20px 60px #0008,0 0 50px #5fe4ff22;backdrop-filter:blur(8px);animation:qs-fly .8s cubic-bezier(.16,1,.3,1) both}
@keyframes qs-fly{from{opacity:0;transform:perspective(900px) translateZ(-420px) rotateX(18deg);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.qs-card::after{content:'';position:absolute;inset:0;border-radius:20px;background:linear-gradient(110deg,transparent 35%,#ffffff1c 50%,transparent 65%);background-size:250% 100%;animation:qs-shine 3.5s ease-in-out .8s infinite;pointer-events:none}
@keyframes qs-shine{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.qs-corner{position:absolute;width:22px;height:22px;border:3px solid var(--cy);filter:drop-shadow(0 0 6px #5fe4ff)}
.qs-corner.tl{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.qs-corner.tr{top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.qs-corner.bl{bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 10px}.qs-corner.br{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.qs-q{margin:0;font-size:clamp(24px,2.7vw,34px);line-height:1.35;font-weight:800;color:#fff}

/* Antworten als Leuchtpaneele mit abgeschrägten Ecken */
.qs-answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0}
.qs-answers.n2{grid-template-columns:1fr 1fr}.qs-answers.n3{grid-template-columns:1fr}
.qs-answers.with-pics{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.qs-a{position:relative;display:flex;align-items:center;gap:16px;text-align:left;min-height:86px;padding:16px 20px;border:0;color:var(--ink);font:700 20px/1.4 Manrope,system-ui;cursor:pointer;background:linear-gradient(135deg,#0f2a46,#0b1d33);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);box-shadow:inset 0 0 0 1.5px #5fe4ff66;opacity:0;transform:translateX(-30px);transition:transform .25s,box-shadow .25s,background .25s}
.qs-a.in{opacity:1;transform:none;animation:qs-slide .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes qs-slide{from{opacity:0;transform:translateX(-40px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.qs-a b{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:12px;background:#5fe4ff1f;border:1.5px solid var(--cy);color:var(--cy);font-size:20px}
.qs-a span{flex:1}
.qs-a .gm-icon{max-width:120px}
.qs-answers.with-pics .qs-a{flex-direction:column;align-items:flex-start}
.qs-a:hover:not(:disabled){background:linear-gradient(135deg,#16416a,#0f2a46);box-shadow:inset 0 0 0 2px var(--cy),0 0 26px #5fe4ff44;transform:translateY(-2px)}
.qs-a:disabled{cursor:default}
.qs-a.locked{background:linear-gradient(135deg,#6b4a0e,#3a2a08);box-shadow:inset 0 0 0 2px var(--am),0 0 34px #ffd16a77;animation:qs-lock .45s ease-in-out infinite alternate}
.qs-a.locked b{background:var(--am);color:#132430;border-color:var(--am)}
@keyframes qs-lock{to{box-shadow:inset 0 0 0 2px var(--am),0 0 50px #ffd16aaa}}
.qs-a.right{background:linear-gradient(135deg,#0f6a4e,#0b3f31);box-shadow:inset 0 0 0 2.5px var(--ok),0 0 50px #3cf0a888;animation:qs-pop .5s ease-out}
.qs-a.right b{background:var(--ok);color:#03261b;border-color:var(--ok)}
.qs-a.wrong{background:linear-gradient(135deg,#6a1424,#3a0a14);box-shadow:inset 0 0 0 2.5px var(--bad),0 0 40px #ff546877;animation:qs-shake .45s ease-out}
.qs-a.wrong b{background:var(--bad);color:#fff;border-color:var(--bad)}
.qs-answers:has(.right,.wrong) .qs-a:not(.right):not(.wrong){opacity:.4}
@keyframes qs-pop{40%{transform:scale(1.04)}}
@keyframes qs-shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}

.qs-fb{margin:18px 0 0;padding:20px 22px;border-radius:18px;animation:qs-in .45s ease-out both;backdrop-filter:blur(6px)}
.qs-fb b{display:block;font-size:24px;margin:0 0 6px}.qs-fb p{margin:0 0 14px;font-size:20px;line-height:1.55}
.qs-fb.ok{background:#0b3f31cc;border:1.5px solid var(--ok);color:#dfffee}
.qs-fb.bad{background:#3a0a14cc;border:1.5px solid var(--bad);color:#ffe3e7}
.qs-fb-actions{display:flex;gap:12px;flex-wrap:wrap}
.qs-tools{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.qs-tool{border:1px solid #5fe4ff44;background:#0b1d33aa;color:var(--ink);border-radius:30px;padding:10px 18px;font:700 16px Manrope,system-ui;cursor:pointer}
.qs-tool.help{border-color:#ffd16a88;color:var(--am)}

/* Ben-Hilfe: Holo-Bildschirm */
.qs-holo{text-align:center}
/* Ben-Hilfe nutzt die ganze Bühnenbreite */
.qs-body:has(.is-help){grid-template-columns:minmax(0,1fr)}
.qs-body:has(.is-help) .qs-side{display:none}
/* Folie frei sichtbar, Bens Untertitel stehen darunter statt darauf */
.qs-screen{position:relative;margin:0 auto 16px;max-width:980px;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1.5px var(--cy),0 0 60px #5fe4ff44}
.qs-screen img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}
.qs-sub{margin:0;padding:14px 20px;min-height:3.6em;background:#050c18;border-top:1px solid #5fe4ff44;color:#fff;font-size:21px;font-weight:600;line-height:1.45}
.qs-sub:empty::before{content:'…';color:#5f7f96}

/* Abschlussshow */
.qs-medal{position:relative;width:200px;height:200px;margin:4px auto 16px}
.qs-medal svg{width:100%;height:100%;transform:rotate(-90deg)}
.qs-medal circle{fill:none;stroke-width:10}.qs-medal .track{stroke:#5fe4ff22}
.qs-medal .meter{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;animation:qs-meter 1.6s cubic-bezier(.2,.8,.2,1) .3s forwards}
@keyframes qs-meter{to{stroke-dashoffset:calc(327 - 327 * var(--p) / 100)}}
.qs-medal div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.qs-medal b{font-size:44px;line-height:1}.qs-medal small{font-size:13px;color:var(--dim);font-weight:700}

/* Bühnenreaktionen */
.qs.flash-ok::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(60% 60% at 50% 60%,#3cf0a855,transparent 70%);animation:qs-flash .7s ease-out both}
@keyframes qs-flash{from{opacity:1}to{opacity:0}}
.qs.glitch .qs-main{animation:qs-glitch .6s steps(2) both}
.qs.glitch::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-linear-gradient(0deg,#ff546818 0 3px,transparent 3px 7px);animation:qs-flash .65s ease-out both}
@keyframes qs-glitch{0%{transform:translate(0)}20%{transform:translate(-4px,1px);filter:hue-rotate(-20deg)}40%{transform:translate(4px,-1px)}60%{transform:translate(-2px,0)}100%{transform:none;filter:none}}

/* Ruhig: bei „Bewegung reduzieren“ keine großen Animationen */
.qs-calm *,.qs-calm *::before,.qs-calm *::after,.qs-calm::after{animation:none!important;transition:none!important}
.qs-calm .qs-a{opacity:1;transform:none}
.qs-calm .qs-medal .meter{stroke-dashoffset:calc(327 - 327 * var(--p) / 100)}

/* Tablet und Handy */
@media(max-width:1000px){.qs-body{grid-template-columns:1fr;gap:14px;padding:6px 16px 22px}.qs-side{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}
 .qs-host{width:96px;height:96px}.qs-host img{width:74px;height:74px}.qs-hostname{text-align:left}
 .qs-level{flex:1 1 100%;padding:10px}.qs-level p{margin-bottom:6px}.qs-level ol{flex-direction:row;gap:4px}.qs-level li{flex:1;height:14px;padding:0;font-size:0}}
@media(max-width:760px){.qs{border-radius:18px;min-height:0}.qs-top{padding:14px 14px 4px}.qs-brand b{font-size:14px;letter-spacing:1.5px}.qs-logo{width:34px;height:34px;font-size:16px}.qs-sound{padding:8px 12px;font-size:13px}
 .qs-card{padding:20px 18px}.qs-q{font-size:22px}.qs-answers,.qs-answers.n2{grid-template-columns:1fr;gap:10px}.qs-a{min-height:70px;font-size:18px;padding:12px 14px}.qs-a b{width:40px;height:40px;font-size:18px}
 .qs-lead{font-size:18px}.qs-go{font-size:21px;padding:17px 24px;width:100%}.qs-go.small{width:auto}.qs-fb p{font-size:18px}.qs-sub{font-size:17px;padding:12px 14px}
 .qs-medal{width:160px;height:160px}.qs-medal b{font-size:36px}}
.qs-switches{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.qs-fast[aria-pressed=true]{border-color:#f5c242;color:#f5c242;background:#f5c24218}
@media(max-width:760px){.qs-switches .qs-sound{padding:7px 10px;font-size:12px}}