/* Vorschau für Gäste (wird vom Worker nur dort eingebunden, wo gekürzt wurde) – siehe _cloudflare-worker/konto/vorschau.mjs */
.sperre-box{display:flex;align-items:center;gap:18px;margin:28px 0;padding:20px 24px;border-radius:18px;background:#1c5a44;color:#fff;font-family:'Fredoka',Inter,system-ui,sans-serif;box-shadow:0 8px 22px rgba(28,90,68,.22)}
.sperre-icon{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);color:#fff}
.sperre-icon svg{width:22px;height:22px}
.sperre-inhalt{flex:1 1 auto;min-width:0}
.sperre-box .sperre-titel{margin:0;font-size:1.55rem;font-weight:600;line-height:1.2;color:#fff}
.sperre-box .sperre-unter{margin:4px 0 0;font-size:1.05rem;line-height:1.4;color:rgba(255,255,255,.85)}
.sperre-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:12px 26px;border-radius:999px;background:#fff;color:#1c5a44!important;font-size:1.1rem;font-weight:600;text-decoration:none;transition:background .15s}
.sperre-btn:hover,.sperre-btn:focus-visible{background:#e3f3ea}
.sperre-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:640px){.sperre-box{flex-wrap:wrap;padding:18px}.sperre-icon{width:40px;height:40px}.sperre-inhalt{flex-basis:calc(100% - 58px)}.sperre-box .sperre-titel{font-size:1.3rem}.sperre-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.sperre-btn{transition:none}}
/* Vorschau-Kopf: Fortschrittsanzeige ergibt hier keinen Sinn */
.progress-sticky{display:none!important}
/* gekürzte Aufgabe: Karte wie .aufgabe (die Klasse fehlt absichtlich, siehe vorschau.mjs) */
.aufgabe-gesperrt{background:#fff;border:1px solid var(--rule,#d9cdb8);border-radius:14px;padding:32px 36px;margin-bottom:18px;min-width:0}
.aufgabe-gesperrt .aufgabe-head{flex-wrap:wrap;row-gap:6px}
.aufgabe-gesperrt .aufgabe-head .aufgabe-title{min-width:0;overflow-wrap:anywhere}
@media (max-width:600px){.aufgabe-gesperrt{padding:20px 18px}}
.aufgabe-gesperrt .op[data-tip]{position:relative;cursor:help;font-weight:600;border-bottom:2px solid currentColor;padding-bottom:1px;outline:none;border-radius:2px}
.aufgabe-gesperrt .op[data-tip]:hover,.aufgabe-gesperrt .op[data-tip]:focus-visible{background:rgba(124,95,181,.12)}
.aufgabe-gesperrt .op[data-tip]::after{content:none;position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(300px,calc(100vw - 48px));padding:10px 12px;border-radius:10px;background:#3d2a6b;color:#fff;font:400 13.5px/1.45 Inter,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;white-space:normal}
.aufgabe-gesperrt .op[data-tip]:hover::after,.aufgabe-gesperrt .op[data-tip]:focus-visible::after{content:attr(data-tip);opacity:1;visibility:visible;transform:none}
.aufgabe-gesperrt .gesperrt-hinweis{margin:10px 0 0;font-size:.92rem;color:#6b6257;font-style:italic}
/* Test-/Live-Quiz-Seiten für Gäste: sichtbar, aber nicht bedienbar (vorschau.mjs sichtSperre) */
.sperre-inert{opacity:.62;pointer-events:none;user-select:none;-webkit-user-select:none}
.sperre-inert *{cursor:not-allowed!important}
.sperre-wrap{padding-top:36px}.sperre-wrap .sperre-box{margin:0 0 28px}.lqv-meta strong{color:#3d2a6b;font-weight:600}

/* Live-Quiz-Demo (live-quiz-demo.js): echter Beamer + Handy-Rahmen */
.lqd{margin:0 0 40px;font-family:'Fredoka',Inter,system-ui,sans-serif;color:#2f2f2f}
.lqd-kopf h2{margin:0 0 4px;font-size:1.7rem;font-weight:600;color:#3d2a6b;line-height:1.2}
.lqd-kopf p{margin:0 0 18px;color:#6b6257;font-size:1.02rem}
.lqd-schritte{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lqd-schritte button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:999px;border:1.5px solid #d9cdb8;background:#fff;color:#3d2a6b;font:600 .98rem 'Fredoka',Inter,sans-serif;cursor:pointer;transition:background .15s,border-color .15s}
.lqd-schritte button b{width:26px;height:26px;border-radius:50%;background:#ece6f6;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.lqd-schritte button:hover{border-color:#7c5fb5}
.lqd-schritte button.fertig b{background:#67b05f;color:#fff}
.lqd-schritte button.aktiv{background:#3d2a6b;border-color:#3d2a6b;color:#fff}
.lqd-schritte button.aktiv b{background:#fff;color:#3d2a6b}
.lqd-schritte button:focus-visible,.lqd-knoepfe button:focus-visible{outline:3px solid #7c5fb5;outline-offset:2px}
.lqd-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 18px;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid #e4dac6}
.lqd-text{margin:0;flex:1 1 380px;font-size:1.08rem;line-height:1.45;min-height:3em;display:flex;align-items:center}
.lqd-knoepfe{display:flex;gap:10px;flex:0 0 auto}
.lqd-knoepfe button{padding:10px 22px;border-radius:999px;font:600 1rem 'Fredoka',Inter,sans-serif;cursor:pointer;border:2px solid #3d2a6b}
.lqd-weiter{background:#3d2a6b;color:#fff}.lqd-weiter:hover{background:#2f2055}
.lqd-neu{background:#fff;color:#3d2a6b}.lqd-neu:hover{background:#f2edf9}
.lqd-buehne{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.lqd-label{margin:0 0 8px;font-size:.92rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b6257}
.lqd-handy-box{display:flex;flex-direction:column;align-items:center}
.lqd-handy{width:280px;height:580px;border-radius:38px;border:10px solid #221540;background:#221540;overflow:hidden;box-shadow:0 18px 40px rgba(34,21,64,.28)}
.lqd-handy iframe{display:block;width:100%;height:100%;border:0;background:#f4ede0}
.lqd-fuss{margin:20px 0 0;color:#6b6257;font-size:1rem}
.lqd .lq-lab{margin:0}
/* schmalere Spalte als der echte Beamer: Schrift proportional mitskalieren statt bei 11 px zu bleiben */
.lqd .lq-inhalt{font-size:clamp(7px,1.12cqw,44px)}
@media (max-width:700px){.lqd .lq-inhalt{font-size:12px}}
@media (max-width:1060px){.lqd-buehne{grid-template-columns:minmax(0,1fr)}.lqd-handy-box{order:2;margin-top:6px}}
@media (max-width:600px){.lqd-kopf h2{font-size:1.4rem}.lqd-schritte button{padding:6px 12px 6px 6px;font-size:.9rem}.lqd-handy{width:280px;height:580px}.lqd-knoepfe{width:100%}.lqd-knoepfe button{flex:1}}
@media (prefers-reduced-motion:reduce){.lqd-schritte button{transition:none}}

.lqd-beamer{min-width:0}
@media (max-width:600px){.lqd .applet-toolbar{flex-wrap:wrap;gap:8px}.lqd .applet-tools{flex-wrap:wrap}.lqd .lq-tool span{display:none}}

/* Demo-Leiste: nur noch die Schritte 1–6, über die volle Breite */
.lqd{width:100%}
.lqd-kopf h2{margin-bottom:14px}
.lqd-schritte{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 20px}
.lqd-schritte li{min-width:0}
.lqd-schritte button{width:100%;justify-content:center;padding:12px 10px;font-size:1.05rem}
.lqd-schritte button b{width:28px;height:28px}
@media (max-width:900px){.lqd-schritte{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.lqd-schritte button{padding:9px 6px;font-size:.9rem;gap:6px}.lqd-schritte button b{width:24px;height:24px}}
.lqd-buehne{grid-template-columns:minmax(0,1fr) 320px}
.lqd-handy{width:320px;height:560px}
@media (max-width:1060px){.lqd-buehne{grid-template-columns:minmax(0,1fr)}}

/* symmetrisch: Beschriftungen mittig, kleineres Handy mittig neben dem Beamer */
.lqd-label{text-align:center}
.lqd-buehne{grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:stretch}
.lqd-handy-box{display:flex;flex-direction:column;align-items:center}
.lqd-handy{position:relative;width:244px;height:480px;margin:auto 0;border-width:8px;border-radius:34px}
.lqd-handy::before{content:"";position:absolute;z-index:2;top:-6px;left:50%;transform:translateX(-50%);width:56px;height:4px;border-radius:3px;background:#4a3a78}
@media (max-width:1060px){.lqd-buehne{grid-template-columns:minmax(0,1fr)}.lqd-handy{margin:6px 0 0}}
@media (max-width:600px){.lqd-handy{width:244px;height:480px}}

/* Runde 3: Handy so hoch wie der Beamer, deutlichere Überschriften, größere Beamer-Schrift, Hinweis unter der Überschrift */
.lqd{padding-top:40px}
.lqd-kopf .sperre-box{margin:0 0 26px}
.lqd-kopf h2{margin-bottom:18px}
.lqd-buehne{grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:stretch}
.lqd-beamer,.lqd-handy-box{display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:16px}
.lqd-label{margin:0;padding:0 0 10px;text-align:center;font-size:1.15rem;font-weight:600;letter-spacing:.06em;color:#3d2a6b;border-bottom:3px solid #d9cfee}
.lqd-handy-box{justify-items:center}
.lqd-handy{height:100%;width:auto;aspect-ratio:9/18.2;margin:0;min-height:0}
.lqd-handy iframe{width:100%;height:100%}
.lqd .lq-inhalt{font-size:clamp(8px,1.3cqw,44px)}
@media (max-width:1060px){.lqd-buehne{grid-template-columns:minmax(0,1fr)}.lqd-handy{height:520px;width:auto;margin:0}.lqd-handy-box{grid-template-rows:auto auto}}
@media (max-width:700px){.lqd .lq-inhalt{font-size:12px}.lqd-handy{height:500px}}

/* Runde 3b: Höhe bestimmt der Beamer (16:10), das Handy streckt sich auf dieselbe Höhe */
.lqd .lq-canvas{aspect-ratio:16/10}
.lqd .lq-inhalt{font-size:clamp(8px,1.3cqw,44px)}
.lqd-buehne{grid-template-columns:minmax(0,1fr) 320px}
.lqd-handy{position:relative;align-self:stretch;height:auto;width:320px;aspect-ratio:auto;justify-self:center}
.lqd-handy iframe{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:1060px){.lqd-buehne{grid-template-columns:minmax(0,1fr)}.lqd-handy{height:540px;align-self:auto}}
@media (max-width:700px){.lqd .lq-canvas{aspect-ratio:auto}.lqd .lq-inhalt{font-size:12px}.lqd-handy{height:500px}}

/* Runde 4: Start-Knopf links, Beschriftungen einzeilig auf gleicher Höhe, Beamer nur Anzeige */
.lqd-schritte{grid-template-columns:minmax(0,.95fr) repeat(6,minmax(0,1fr))}
.lqd-play{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 10px;border-radius:999px;border:2px solid #d9a91f;background:#f4d03f;color:#2f2f2f;font:700 1.05rem 'Fredoka',Inter,sans-serif;cursor:pointer;box-shadow:0 3px 0 #c9a21a}
.lqd-play svg{width:12px;height:14px}
.lqd-play:hover{background:#f7d94f}.lqd-play:active{transform:translateY(2px);box-shadow:0 1px 0 #c9a21a}
.lqd-play:focus-visible{outline:3px solid #7c5fb5;outline-offset:2px}
.lqd-label{white-space:nowrap;line-height:1.3;padding-bottom:10px}
.lqd-beamer .lq-lab{pointer-events:none;user-select:none;-webkit-user-select:none}
.lqd-beamer .lq-lab *{cursor:default!important}
@media (max-width:900px){.lqd-schritte{grid-template-columns:repeat(3,minmax(0,1fr))}.lqd-play-li{grid-column:1/-1}}
@media (max-width:420px){.lqd-label{font-size:1rem;letter-spacing:.03em}}