/* Same Page – bunte Seite, flache einfarbige Schaltflaechen (huepfen beim Klick). Bewegung respektiert Systemeinstellung und Option "Animationen". */
:root{--fg:#241a3d;--mut:#665d82;--sheet:#fffffff2;--tint:#f4f0ff;--bd:#ddd5f5;--acc:#6d28d9;--err:#c62839;--ok:#047857;--warn:#a85a05;--info:#1d4ed8;
 --l0:#059669;--l1:#2563eb;--l2:#d97706;--l3:#dc2626;
 --purple:#7c3aed;--green:#059669;--orange:#ffb020;--pink:#ec4899;--blue:#2563eb;--base:#6d3df0;--shadow:#1b0b4a40}
@media(prefers-color-scheme:dark){:root{--fg:#f1ecff;--mut:#b9afdc;--sheet:#1e1540f2;--tint:#2a1e57;--bd:#44378a;--acc:#b79cff;--err:#ff8a9a;--ok:#4ade9d;--warn:#ffc069;--info:#8dbaff;--purple:#8b5cf6;--green:#10b981;--pink:#f472b6;--blue:#3b82f6;--base:#2b1163;--shadow:#00000070}}
*{box-sizing:border-box}
html{background:var(--base)}
body{margin:0;min-height:100vh;color:var(--fg);font:17px/1.55 "Trebuchet MS","Segoe UI Rounded","Nunito",system-ui,sans-serif;background:transparent;overflow-x:hidden}
/* Bunter Hintergrund: grosse, langsam treibende Farbflaechen */
body::before,body::after,.bg-a,.bg-b{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);animation:drift 22s ease-in-out infinite alternate;pointer-events:none}
body::before{width:62vmax;height:62vmax;left:-20vmax;top:-18vmax;background:#ff3d9a;opacity:.9}
body::after{width:56vmax;height:56vmax;right:-18vmax;top:4vmax;background:#ffb300;opacity:.85;animation-delay:-7s}
.bg-a{width:60vmax;height:60vmax;right:-20vmax;bottom:-22vmax;background:#00c9b0;opacity:.85;animation-delay:-12s}
.bg-b{width:54vmax;height:54vmax;left:-16vmax;bottom:-18vmax;background:#4f7bff;opacity:.9;animation-delay:-3s}
@media(prefers-color-scheme:dark){body::before,body::after,.bg-a,.bg-b{opacity:.55}}
@keyframes drift{to{transform:translate(7vmax,5vmax) scale(1.15)}}

main{max-width:680px;margin:0 auto;padding:20px 16px 24px}
main.page,main.legal{background:var(--sheet);backdrop-filter:blur(10px);border-radius:30px;margin:16px auto;padding:24px 20px 26px;box-shadow:0 16px 44px var(--shadow)}
main.wide{max-width:800px}
@media(max-width:700px){main.page,main.legal{margin:12px;border-radius:26px;padding:20px 16px 22px}}
h1{font-size:2rem;line-height:1.15;margin:.2em 0 .5em;letter-spacing:-.02em}
h2{font-size:1.2rem;margin:1.4em 0 .4em}h3{margin:1.2em 0 .3em}
a{color:var(--acc);font-weight:600}
.lead{font-size:1.08rem;color:var(--mut)}.small{font-size:.85rem;color:var(--mut)}.block{display:block}.center{text-align:center}
.big{font-size:3rem;line-height:1.1}
.back{text-decoration:none}
.card{background:var(--tint);border:2px solid var(--bd);border-radius:22px;padding:18px;margin:18px 0}
.field{display:block;font-weight:700;margin:16px 0}
input[type=text],textarea,select{width:100%;margin-top:6px;padding:12px 14px;font:inherit;border:2px solid var(--bd);border-radius:14px;background:#fff;color:#241a3d}
@media(prefers-color-scheme:dark){input[type=text],textarea,select{background:#150e33;color:#f1ecff}}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible,.check:focus-within,.check[role=button]:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
input[type=range]{width:100%;margin-top:8px;accent-color:var(--acc)}

/* --- Schaltflaechen: flach, einfarbig, huepfen beim Klick --- */
.btn,.tile,.pill,.premium-banner,.mode{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn{--c:var(--purple);display:inline-block;padding:12px 22px;font-weight:800;color:#fff;background:var(--c);border:2px solid var(--c);border-radius:16px;text-decoration:none;text-align:center;transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.green{--c:var(--green)}.btn.orange{--c:var(--orange);color:#2b1a00}.btn.pink{--c:var(--pink)}.btn.blue{--c:var(--blue)}
.btn.secondary{color:var(--acc);background:transparent;border-color:var(--acc)}
.btn.danger{color:var(--err);background:transparent;border-color:var(--err)}
.big-btn{width:100%;font-size:1.15rem;padding:15px}
.small-btn{padding:7px 14px;font-size:.9rem}
form .btn[type=submit]{width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.row.center{justify-content:center}
.nav{display:flex;justify-content:space-between;gap:10px;margin:24px 0}.nav .btn{min-width:110px}

.tiles{display:grid;gap:14px;margin:22px 0}
.tile{--c:var(--green);display:flex;align-items:center;gap:16px;width:100%;padding:18px 20px;color:#fff;text-align:left;text-decoration:none;background:var(--c);border:0;border-radius:26px;box-shadow:0 12px 28px var(--shadow);transition:transform .12s}
.tile:hover{transform:translateY(-3px)}.tile:active{transform:scale(.97)}
.tile.green{--c:var(--green)}.tile.orange{--c:var(--orange);color:#2b1a00}.tile.purple{--c:var(--purple)}.tile.blue{--c:var(--blue)}.tile.pink{--c:var(--pink)}
.tile .emoji{font-size:2.4rem;line-height:1}
.tile .tt{display:flex;flex-direction:column}.tile strong{font-size:1.35rem}.tile small{opacity:.95;font-size:.88rem}
.pill{padding:9px 18px;font-weight:700;border:2px solid var(--bd);border-radius:999px;background:#fff;color:#241a3d}
@media(prefers-color-scheme:dark){.pill{background:#150e33;color:#f1ecff}}
.pill.on{background:var(--acc);border-color:var(--acc);color:#fff}
@media(prefers-color-scheme:dark){.pill.on{color:#1a0d44}}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.premium-banner{display:block;width:100%;margin:16px 0;padding:13px 16px;font-weight:800;color:#fff;background:var(--pink);border:0;border-radius:18px;box-shadow:0 10px 24px var(--shadow)}
.premium-banner:active{transform:scale(.97)}
.chip-premium{text-align:center;font-weight:800;color:#fff}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.mode{display:flex;flex-direction:column;gap:2px;padding:12px 14px;text-align:left;color:var(--fg);background:#fff;border:2px solid var(--bd);border-radius:18px}
@media(prefers-color-scheme:dark){.mode{background:#150e33}}
.mode strong{font-size:1rem}.mode small{color:var(--mut);font-size:.78rem}
.mode.on{border-color:var(--acc);background:var(--acc);color:#fff}.mode.on small{color:#fffd}
@media(prefers-color-scheme:dark){.mode.on{color:#1a0d44}.mode.on small{color:#1a0d44cc}}
@media(max-width:420px){.mode-switch{grid-template-columns:1fr}}

@keyframes bounce{0%{transform:scale(1)}28%{transform:scale(.9,1.08)}55%{transform:scale(1.07,.95)}78%{transform:scale(.98,1.02)}100%{transform:scale(1)}}
.bounce{animation:bounce .38s ease-out}
@keyframes popin{0%{opacity:0;transform:scale(.7) translateY(20px)}70%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.wiggle{display:inline-block;animation:wiggle 1.4s ease-in-out infinite}

/* --- Logo --- */
.menu{text-align:center;padding-top:30px}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.mark{width:132px;height:auto;animation:bob 3.4s ease-in-out infinite;filter:drop-shadow(0 8px 14px #1b0b4a55)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.wordmark{display:flex;align-items:center;justify-content:center;gap:.18em;font-size:clamp(2.4rem,13vw,3.5rem);font-weight:900;line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:0 4px 0 #1b0b4a55}
.wordmark .w2{display:inline-block;padding:.08em .26em .12em;background:#ffc21a;color:#2b1a00;border-radius:.28em;transform:rotate(-4deg);text-shadow:none;box-shadow:0 6px 14px #1b0b4a55}
.tagline{font-size:1.2rem;font-weight:700;color:#fff;margin:.5em 0 .6em;text-shadow:0 2px 8px #0004}
.menu .card{text-align:left;background:var(--sheet)}.roomlist{margin:.4em 0 0;padding-left:1.2em}
.linkbtn{font:inherit;font-size:.85rem;color:var(--err);background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}
.headrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.headrow .small-btn{white-space:nowrap}

/* --- Dialoge --- */
dialog.modal{border:0;border-radius:28px;padding:0;width:min(560px,92vw);max-height:88vh;color:var(--fg);background:var(--sheet);box-shadow:0 24px 70px #0007;overflow:hidden}
dialog.modal[open]{display:flex;flex-direction:column;animation:popin .35s cubic-bezier(.2,1.4,.4,1)}
dialog.modal::backdrop{background:#1e143c99;backdrop-filter:blur(4px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;background:var(--purple);color:#fff}
.modal-head h2{margin:0;font-size:1.3rem}
.modal-head .x{width:38px;height:38px;border:0;border-radius:50%;background:#ffffff33;color:#fff;font-size:1.1rem;cursor:pointer}
.modal-body{padding:18px 20px;overflow:auto}
.modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:12px 20px 16px;border-top:2px solid var(--bd)}
.perks{padding-left:0;list-style:none}.perks li{margin:.55em 0}
.steps{padding-left:1.3em}.steps li{margin:.45em 0}
hr{border:0;border-top:2px dashed var(--bd);margin:18px 0}
.stars{display:flex;justify-content:center;gap:6px;margin:14px 0}
.star{font-size:2.4rem;line-height:1;background:none;border:0;cursor:pointer;color:var(--bd);padding:2px 6px}
.star.on{color:#ffb020}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.45rem;font-weight:800;letter-spacing:.04em;background:var(--tint);border:2px dashed var(--acc);border-radius:16px;padding:14px;margin:12px 0;user-select:all;word-break:break-all}

/* --- Formulare --- */
.check{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border:2px solid var(--bd);border-radius:16px;margin:9px 0;cursor:pointer;background:var(--tint)}
.check:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,var(--tint))}
.check input{margin-top:5px;width:19px;height:19px;accent-color:var(--acc)}
.check.locked{opacity:.8;border-style:dashed}.check.locked:hover{border-color:var(--acc)}
.lockicon{font-size:1.2rem;margin-top:1px}
.tag{margin-left:8px;font-size:.72rem;padding:2px 9px;border-radius:999px;background:var(--acc);color:#fff;font-weight:800}
@media(prefers-color-scheme:dark){.tag{color:#1a0d44}}
.tag.prem{background:var(--pink);color:#fff}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin:18px 0;padding:12px 14px;border-radius:16px;background:var(--tint);border:2px solid var(--bd)}
.consent input{margin-top:4px;width:19px;height:19px;flex:none;accent-color:var(--acc)}
.summary{font-weight:700;color:var(--acc)}
.switch{display:flex;align-items:center;gap:10px;font-weight:700;margin:10px 0}.switch input{width:22px;height:22px;accent-color:var(--acc)}
output{font-weight:800;color:var(--acc)}
.msg{padding:10px 14px;border-radius:14px;border:2px solid var(--bd);background:var(--tint)}
.msg.err{color:var(--err);border-color:var(--err)}.msg.info{color:var(--info);border-color:var(--info)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:420px){.two{grid-template-columns:1fr}}

/* --- Fragebogen --- */
.bar{height:10px;border-radius:99px;background:var(--bd);overflow:hidden;margin-top:6px}.bar span{display:block;height:100%;background:var(--acc);transition:width .3s}
.quizhead{position:sticky;top:0;padding:10px 0;z-index:2;background:var(--sheet)}
.band{margin:10px -20px 8px;padding:16px 20px;color:#fff;background:var(--purple)}
.band h1{margin:0;color:#fff;font-size:1.6rem}.band .small{color:#ffffffe0}
.band.b0{background:#7c3aed}.band.b1{background:#ec4899}.band.b2{background:#059669}.band.b3{background:#2563eb}.band.b4{background:#d97706}.band.b5{background:#0891b2}
.whoami{display:inline-block;margin:4px 0 0;padding:3px 12px;border-radius:99px;background:#ffffff33;font-weight:800}
.ask{font-weight:800;margin:1.2em 0 .2em}
.q{background:var(--tint);border:2px solid var(--bd);border-radius:20px;padding:15px;margin:14px 0}
.qt{margin:0 0 10px;font-weight:700}
.lvls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){.lvls{grid-template-columns:repeat(4,1fr)}}
.lvl{padding:11px 6px;font:inherit;font-size:.9rem;font-weight:700;border:2px solid var(--bd);border-radius:14px;background:#fff;color:#241a3d;cursor:pointer}
@media(prefers-color-scheme:dark){.lvl{background:#150e33;color:#f1ecff}}
.lvl:active{transform:scale(.95)}
.lvl.on{color:#fff}
.lvl.l0.on{background:var(--l0);border-color:var(--l0)}.lvl.l1.on{background:var(--l1);border-color:var(--l1)}.lvl.l2.on{background:var(--l2);border-color:var(--l2)}.lvl.l3.on{background:var(--l3);border-color:var(--l3)}

/* --- Ergebnis --- */
.grp{margin:28px 0}.grp h2{margin-bottom:.2em}.count{font-size:.8rem;background:var(--acc);color:#fff;border-radius:99px;padding:1px 10px;vertical-align:middle}
@media(prefers-color-scheme:dark){.count{color:#1a0d44}}
.grp.bad h2{color:var(--err)}.grp.warn h2{color:var(--warn)}.grp.ok h2{color:var(--ok)}.grp.info h2{color:var(--info)}
.tips{font-size:.92rem;color:var(--mut);padding-left:1.1em}
.res{background:var(--tint);border:2px solid var(--bd);border-radius:16px;padding:12px 14px;margin:9px 0;break-inside:avoid}
.who{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem}
.chip{display:inline-block;padding:1px 11px;border-radius:99px;color:#fff;font-size:.82rem;font-weight:800}
.c0{background:var(--l0)}.c1{background:var(--l1)}.c2{background:var(--l2)}.c3{background:var(--l3)}.c-n{background:var(--mut)}
details summary{cursor:pointer;font-weight:800}
.legal-links{list-style:none;padding:0;margin:.4em 0 0}.legal-links li{margin:.5em 0}
footer{max-width:760px;margin:0 auto;padding:14px 16px 34px;text-align:center;font-size:.85rem;color:#fffffff0;text-shadow:0 1px 6px #0006}
footer a{color:#fff;font-weight:600}
.legal-pill{font:inherit;font-size:.88rem;font-weight:700;color:#fff;background:#1b0b4a73;border:2px solid #ffffff80;border-radius:999px;padding:9px 18px;cursor:pointer;backdrop-filter:blur(6px)}
.legal-pill:hover{background:#1b0b4a99}.legal-pill:active{transform:scale(.96)}
.legal-list li a{display:block;padding:12px 16px;border:2px solid var(--bd);border-radius:14px;background:var(--tint);text-decoration:none}
.legal-list li a:hover{border-color:var(--acc)}
.legal h2{font-size:1.1rem}.legal p,.legal li{font-size:.97rem}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}

/* --- Bewegung reduzieren --- */
@media(prefers-reduced-motion:reduce){html:not([data-motion="on"]) *,html:not([data-motion="on"]) *::before,html:not([data-motion="on"]) *::after{animation:none!important;transition:none!important}}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
@media print{body{background:#fff;color:#000}body::before,body::after,.bg-a,.bg-b{display:none}main.page,main.legal{box-shadow:none;background:#fff}.noprint,footer,.quizhead{display:none!important}.res{border-color:#999}.chip{color:#000;border:1px solid #000;background:#fff!important}}
.pill2{display:inline-flex;flex-direction:column;align-items:center;gap:0;line-height:1.2;padding:8px 16px}.pill2 strong{font-size:1.1rem}.pill2 small{font-size:.72rem;font-weight:600;opacity:.85}.pill.locked{opacity:.8;border-style:dashed}