@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Lexend";src:url(../fonts/lexend.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
[hidden]{display:none!important}
/* Layout: ein weißes Schulblatt. Die Startseite ist ein ruhiger Bildschirm: Die Tintenkugel schwebt über der Fragezeile wie eine
   Glaskugel über ihrem Sockel, nur dort liegt das Karomuster. Antworten und Quiz stehen linksbündig wie eine ordentliche Heftseite. */
:root{
  --papier:#ffffff; --hell:#f3f6fb; --hell2:#e8edf6; --linie:#e1e6ef; --karo:#e2e8f2;
  --schrift:#141a33; --grau:#5b637a; --grau2:#8a91a6;
  --tinte:#2342d6; --tinte-hell:#e8ecfd; --tinte-dunkel:#1a2f9e;
  --rotstift:#d8281f; --marker:#ffe45e; --marker-tief:#f5cf1c;
  --richtig:#147a4a; --richtig-hell:#e3f4eb; --falsch:#c9302a; --falsch-hell:#fdecea; --fast:#9a5c00; --fast-hell:#fff2d9;
  --c-mathe:#2456c8; --c-deutsch:#d0312d; --c-nut:#1f8a55; --c-englisch:#e3a008; --c-geo:#b8642e;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-text:"Lexend","Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-hand:"Caveat","Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  --gutter-l:max(20px,env(safe-area-inset-left,0px)); --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.2,.8,.2,1); --schatten:0 1px 2px rgba(20,26,51,.06),0 14px 36px -18px rgba(20,26,51,.28);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--papier)}
body{background:var(--papier);color:var(--schrift);font-family:var(--f-text);font-size:18px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--papier)}
main{flex:1 0 auto}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;color:var(--schrift)}
p{margin:0}
.f-mathe{--fc:var(--c-mathe)}.f-deutsch{--fc:var(--c-deutsch)}.f-nut{--fc:var(--c-nut)}.f-englisch{--fc:var(--c-englisch)}.f-geo{--fc:var(--c-geo)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 24px;
  font:600 1rem/1.1 var(--f-text);text-decoration:none;transition:transform .18s var(--ease),background-color .2s,box-shadow .2s,color .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn-ink{background:var(--schrift);color:#fff}
.btn-ink:hover{background:#2a3360}
.btn-tinte{background:var(--tinte);color:#fff}
.btn-tinte:hover{background:var(--tinte-dunkel)}
.btn-marker{background:var(--marker);color:#2a2100}
.btn-marker:hover{background:var(--marker-tief)}
.btn-hell{background:var(--hell);color:var(--schrift)}
.btn-hell:hover{background:var(--hell2)}
.btn-rand{background:transparent;color:var(--schrift);box-shadow:inset 0 0 0 1.5px var(--linie)}
.btn-rand:hover{box-shadow:inset 0 0 0 1.5px var(--grau2)}
.btn-klein{padding:9px 16px;font-size:.92rem}
.btn-gross{padding:17px 28px;font-size:1.08rem;width:100%}
.textknopf{border:0;background:none;padding:6px 2px;color:var(--tinte);font-weight:600;font-size:.95rem;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.textknopf:hover{color:var(--tinte-dunkel)}
.chip{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--hell);color:var(--schrift);font:400 .93rem/1.25 var(--f-text);padding:9px 15px;border-radius:999px;
  text-align:left;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.chip i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fc,var(--tinte))}
.chip:hover{background:var(--hell2)}
.chip:active{transform:scale(.97)}

/* Navigation */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);transition:box-shadow .3s}
.nav.gescrollt{box-shadow:0 1px 0 var(--linie)}
.nav-in{max-width:1180px;margin:0 auto;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.logo{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:6px 4px;margin:0;font-family:var(--f-display);font-weight:760;
  font-size:1.42rem;line-height:1;letter-spacing:-.035em;color:var(--schrift);font-variation-settings:"wdth" 92}
.logo-orb{position:relative;flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 10%),
    radial-gradient(circle at 66% 72%,#7f95ff 0,var(--tinte) 48%,#0f1c66 100%);
  box-shadow:inset -2px -3px 6px rgba(5,10,40,.35),0 3px 10px -2px rgba(35,66,214,.45);transition:transform .5s var(--ease)}
.logo-orb::after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 90deg,transparent 0 62%,rgba(255,228,94,.75) 70%,transparent 78%,rgba(31,138,85,.6) 86%,transparent 94%);
  mix-blend-mode:screen;transition:transform 1.2s var(--ease)}
.logo:hover .logo-orb{transform:scale(1.08)}
.logo:hover .logo-orb::after{transform:rotate(200deg)}
.nav-quiz{display:flex;align-items:center;gap:4px}
.nav-label{font-size:.85rem;color:var(--grau);margin-right:6px}
.nav-quiz ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav-f{position:relative;display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:9px 13px;border-radius:999px;
  font:500 .95rem/1 var(--f-text);color:var(--schrift);transition:background-color .2s}
.nav-f i{width:9px;height:9px;border-radius:50%;background:var(--fc);transition:transform .3s var(--ease)}
.nav-f:hover{background:var(--hell)}
.nav-f:hover i,.nav-f[aria-expanded="true"] i{transform:scale(1.4)}
.nav-f[aria-expanded="true"]{background:var(--hell);font-weight:600}
.nav-mobil{display:none;align-items:center;gap:10px;border:0;background:var(--hell);border-radius:999px;padding:11px 16px;font:600 .95rem/1 var(--f-text)}
.punkte5{display:inline-flex;gap:3px}
.punkte5 i{width:7px;height:7px;border-radius:50%;background:var(--fc)}

/* Startseite */
.home{overflow:hidden;overflow:clip}
main{overflow-x:clip}
.hero{position:relative;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(18px,4vh,48px) var(--gutter-r) clamp(56px,10vh,96px) var(--gutter-l)}
.hero>*{position:relative}
.hero-karo{position:absolute!important;left:50%;top:0;width:min(1400px,100vw);height:100%;transform:translateX(-50%);pointer-events:none;
  background-image:linear-gradient(var(--karo) 1px,transparent 1px),linear-gradient(90deg,var(--karo) 1px,transparent 1px);background-size:24px 24px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 46% 50% at 50% 46%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse 46% 50% at 50% 46%,#000 25%,transparent 72%)}
.orb-stage{position:relative;z-index:3;width:var(--orb,260px);height:var(--orb,260px);margin-bottom:6px;--glow:var(--tinte)}
.orb-stage::before,.orb-mini::before{content:"";position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 20%,transparent),transparent);transition:background .9s}
.orb-stage::after{content:"";position:absolute;left:24%;right:24%;bottom:-6%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,26,51,.22),transparent);
  animation:schatten 6s ease-in-out infinite;pointer-events:none}
.orb-schwebe{position:absolute;inset:0;animation:schweben 6s ease-in-out infinite}
.orb-mini .orb-schwebe{animation:none}
.orb-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.orb-knopf{position:absolute;inset:8%;border-radius:50%;border:0;background:transparent;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.orb-knopf:focus-visible{outline-offset:6px;border-radius:50%}
@keyframes schweben{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
@keyframes schatten{0%,100%{transform:scaleX(.9);opacity:.75}50%{transform:scaleX(1.05);opacity:1}}
.orb-css .orb-schwebe::before{content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 8%),radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 100%),
    conic-gradient(from 0deg,var(--c-mathe),var(--tinte),var(--c-nut),#9db0ff,var(--c-deutsch),var(--tinte),var(--c-englisch),#9db0ff,var(--c-geo),var(--c-mathe));
  box-shadow:inset -12px -18px 34px rgba(5,10,40,.3);animation:drehen 14s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
.hero-h{font-weight:800;font-size:clamp(2.7rem,7.4vw,4.75rem);line-height:.98;letter-spacing:-.035em;font-variation-settings:"wdth" 95;margin-top:14px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.w>span{display:inline-block}
.hero-sub{color:var(--grau);font-size:clamp(1rem,2vw,1.15rem);margin-top:14px;max-width:36em;text-wrap:balance}
.nw{white-space:nowrap}
.ask-slot{width:100%;display:flex;justify-content:center}
.home .ask-slot{margin-top:30px}
.ask-box{width:min(700px,100%);display:flex;flex-direction:column;gap:12px}
.a-top .ask-box{width:100%;max-width:760px}
.ask{width:100%;display:flex;align-items:center;gap:8px;background:var(--papier);border:1.5px solid var(--linie);border-radius:999px;
  padding:7px 7px 7px 24px;box-shadow:var(--schatten);transition:border-color .25s,box-shadow .25s}
.ask:focus-within{border-color:var(--tinte);box-shadow:0 0 0 5px var(--tinte-hell),var(--schatten)}
.ask input{flex:1;min-width:0;border:0;background:transparent;font:400 1.14rem/1.3 var(--f-text);color:var(--schrift);padding:13px 0;outline:none}
.ask input::placeholder{color:var(--grau2)}
.ask input{text-overflow:ellipsis}
.ask-btn{padding:13px 22px}
.ask-btn svg{width:20px;height:20px;display:none}
.probier{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:720px;margin-top:18px}
.probier .label,.weiter .label{color:var(--grau);font-size:.92rem;align-self:center;margin-right:2px}
.weiter{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:30px;padding-top:22px;border-top:1px dashed var(--linie);max-width:720px;width:100%}
.weiter .chip small{color:var(--falsch);font-weight:600;font-variant-numeric:tabular-nums}

/* Antwort */
.a-wrap{max-width:1180px;margin:0 auto;padding:18px var(--gutter-r) 72px var(--gutter-l)}
.a-top{display:flex;align-items:center;gap:14px;margin-bottom:clamp(28px,5vh,48px)}
.a-top .ask-slot{justify-content:flex-start;flex:1;min-width:0}
.a-top .ask{box-shadow:0 1px 2px rgba(20,26,51,.05)}
.orb-mini{position:relative;z-index:5;flex:none;width:52px;height:52px;--glow:var(--tinte)}
.orb-mini::before{inset:-28%}
.a-head{max-width:880px}
.a-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;min-height:34px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:var(--hell);font-size:.86rem;font-weight:500;color:var(--schrift)}
.tag i{width:9px;height:9px;border-radius:50%;background:var(--fc)}
.tag svg{width:15px;height:15px;color:var(--grau)}
.a-h1{font-weight:780;font-size:clamp(1.9rem,4.2vw,2.85rem);line-height:1.06;letter-spacing:-.03em;font-variation-settings:"wdth" 96;max-width:22ch;overflow-wrap:anywhere}
.a-text{margin-top:22px;font-size:clamp(1.25rem,2.4vw,1.62rem);line-height:1.5;max-width:34em;overflow-wrap:anywhere}
.a-text b{font-weight:600;background-image:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);background-repeat:no-repeat;
  background-size:0% 100%;transition:background-size 1s var(--ease);padding:0 2px;margin:0 -2px}
.a-text.markiert b{background-size:100% 100%}
.a-text small{font-size:.7em;color:var(--grau)}
.a-text sup,.q-big sup,.steps sup,.ds sup,.erg sup{font-size:.6em;line-height:0}
.a-ctl{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.a-ctl:empty{display:none}
.a-schnell{display:none}
.hinweis{color:var(--grau);font-size:.95rem}
.denken{display:flex;flex-direction:column;gap:14px;max-width:560px}
.denken-t{display:flex;align-items:center;gap:10px;color:var(--grau);font-size:1.05rem}
.punkte3{display:inline-flex;gap:4px}
.punkte3 i{width:7px;height:7px;border-radius:50%;background:var(--tinte);animation:hupf 1.1s infinite ease-in-out}
.punkte3 i:nth-child(2){animation-delay:.15s}.punkte3 i:nth-child(3){animation-delay:.3s}
@keyframes hupf{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-5px);opacity:1}}
.skel{height:16px;border-radius:8px;background:linear-gradient(90deg,var(--hell) 0,var(--hell2) 50%,var(--hell) 100%);background-size:200% 100%;animation:schimmer 1.4s linear infinite}
.skel:nth-child(3){width:86%}.skel:nth-child(4){width:64%}
@keyframes schimmer{to{background-position:-200% 0}}
.karte{border-radius:20px;padding:20px 22px;background:var(--hell);max-width:640px;font-size:1.05rem}
.karte b{display:block;font-family:var(--f-display);font-size:1.25rem;margin-bottom:6px;letter-spacing:-.01em}
.karte .nummer{display:inline;font-family:var(--f-text);font-size:inherit;margin:0;letter-spacing:0}
.karte.sorge{background:var(--richtig-hell)}
.a-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(36px,6vw,80px);margin-top:clamp(40px,7vh,64px);align-items:start}
.a-main{min-width:0;display:flex;flex-direction:column;gap:56px}
.a-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px}
.blk{min-width:0}
.blk h2{font-weight:720;font-size:1.65rem;line-height:1.15;letter-spacing:-.025em;font-variation-settings:"wdth" 95}
.blk-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:22px}
.steps-wrap{position:relative}
.st-linie{position:absolute;left:17px;top:18px;bottom:30px;width:2px;background:var(--linie);transform-origin:top}
.steps{list-style:none;margin:0;padding:0;position:relative;counter-reset:s}
.steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;padding-bottom:26px;counter-increment:s}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--papier);
  box-shadow:inset 0 0 0 2px var(--tinte);color:var(--tinte);font:700 1rem/1 var(--f-display);position:relative;z-index:1}
.steps li.letzt::before{background:var(--tinte);color:#fff}
.st-x{min-width:0;overflow-wrap:anywhere;padding-top:4px}
.st-t{display:block;font-weight:600;font-size:1.08rem;margin-bottom:2px}
.st-x .det{display:block;font-size:.92rem;color:var(--grau);margin-top:6px}
.steps mark{background:var(--marker);color:inherit;border-radius:3px;padding:0 3px}
.st-weiter{margin-top:22px;padding-left:54px}
.tab-wrap{overflow-x:auto;border-radius:18px;border:1.5px solid var(--linie);
  background-color:var(--papier);background-image:linear-gradient(var(--hell) 1px,transparent 1px),linear-gradient(90deg,var(--hell) 1px,transparent 1px);background-size:20px 20px}
.blk-tab h2{margin-bottom:18px}
table{border-collapse:collapse;width:100%;font-size:.98rem;font-variant-numeric:tabular-nums}
th{text-align:left;font-weight:600;color:var(--grau);font-size:.84rem;padding:12px 16px 8px;background:rgba(255,255,255,.85)}
td{padding:9px 16px;border-top:1px solid var(--linie);background:rgba(255,255,255,.72);vertical-align:top}
td small{color:var(--grau)}
td:first-child{font-weight:600}
.q-cta{position:relative;background:var(--schrift);color:#fff;border-radius:28px;padding:26px 24px 24px;overflow:hidden;isolation:isolate}
.q-cta h2{color:#fff;font-size:1.6rem}
.q-cta p{color:#c6cce0;margin-top:8px;font-size:.98rem}
.q-cta .btn{margin-top:20px;width:100%}
.kaestchen{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.kaestchen i{width:18px;height:18px;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.kaestchen i:nth-child(-n+2){background:var(--marker);box-shadow:none}
.q-cta-msg{margin-top:12px;font-size:.92rem;color:#e7eaf5}
.q-cta-msg:empty{display:none}
.q-cta .denken-t{color:#e7eaf5;font-size:.95rem}
.q-cta .punkte3 i{background:var(--marker)}
.merks{display:flex;flex-direction:column;gap:16px}
.merk{background:var(--marker);color:#3b2f00;padding:16px 18px 18px;border-radius:6px 6px 22px 6px;box-shadow:0 14px 26px -18px rgba(120,90,0,.75);
  transform:rotate(-1.2deg);font:600 1.04rem/1.45 var(--f-text);transition:transform .35s var(--ease)}
.merk:nth-child(even){transform:rotate(1deg)}
.merk:hover{transform:rotate(0) translateY(-2px)}
.merk small{display:block;font:600 .8rem/1 var(--f-text);opacity:.65;margin-bottom:8px}
.tips{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:14px}
.tips li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:1rem;line-height:1.5}
.tips li::before{content:"";width:24px;height:24px;margin-top:1px;background:var(--tinte);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1.5H9V21zm3-19a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1.5H9V21zm3-19a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Hausaufgaben-Check: Kamera im Fragefeld, Foto-Anhang, korrigiertes Heft */
.ask-kamera{flex:none;width:46px;height:46px;border-radius:50%;border:0;padding:0;background:transparent;color:var(--grau);display:grid;place-items:center;
  transition:background-color .2s,color .2s,transform .2s var(--ease),opacity .2s}
.ask-kamera svg{width:24px;height:24px}
.ask-kamera:hover{background:var(--hell);color:var(--tinte)}
.ask-kamera:active{transform:scale(.92)}
.ask-kamera.voll{opacity:.35}
.ask.mit-foto{padding-left:8px}
.ask-anhang{display:flex;gap:8px;flex:none}
.anh{position:relative;width:44px;height:44px;flex:none}
.anh img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;box-shadow:0 0 0 1.5px var(--linie)}
.anh button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:2px solid var(--papier);background:var(--schrift);color:#fff;display:grid;place-items:center;padding:0}
.anh button svg{width:11px;height:11px}
.anh em{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);font:600 .62rem/1 var(--f-text);font-style:normal;background:var(--schrift);color:#fff;border-radius:6px;padding:2px 5px}
.ask-hinweis{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;font-size:.92rem;color:var(--grau)}
.a-top .ask-hinweis{justify-content:flex-start;padding-left:6px}
.ask-buch{display:inline-flex;align-items:center;gap:7px;border:1.5px dashed var(--grau2);background:var(--papier);border-radius:999px;padding:6px 14px 6px 10px;
  font:500 .9rem/1.2 var(--f-text);color:var(--schrift);transition:border-color .2s,color .2s}
.ask-buch svg{width:19px;height:19px;color:var(--tinte);flex:none}
.ask-buch:hover{border-color:var(--tinte);color:var(--tinte)}
.c-foto figcaption{position:absolute;left:6px;bottom:6px;background:rgba(20,26,51,.85);color:#fff;font:600 .72rem/1 var(--f-text);padding:3px 7px;border-radius:6px}
.c-banner{margin-top:clamp(24px,4vh,36px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 18px;border-radius:16px;background:var(--fast-hell);color:#5a3a00}
.c-banner p{flex:1 1 260px}
.c-banner .btn svg{width:18px;height:18px}
.c-banner:not([hidden])+.c-liste{margin-top:14px}
.c-wrap{max-width:900px}
.c-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,44px);align-items:start}
.c-fotos{display:flex;padding:6px 6px 0 4px}
.c-foto{position:relative;margin:0;width:120px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--hell);border:5px solid var(--papier);
  box-shadow:0 1px 2px rgba(20,26,51,.14),0 16px 30px -14px rgba(20,26,51,.5);transform:rotate(var(--r,-3deg))}
.c-foto+.c-foto{margin:20px 0 0 -48px}
.c-foto img{width:100%;height:100%;object-fit:cover;display:block}
.c-buchseite img{object-position:50% 6%}
.c-foto+.c-foto+.c-foto{margin-left:-72px}
.c-scan{position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(35,66,214,0),rgba(35,66,214,.18) 72%,rgba(35,66,214,.8) 97%,rgba(255,255,255,.95))}
.liest .c-scan{opacity:1;animation:scan 1.9s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(340%)}}
.c-sum{margin-top:14px;min-height:34px}
.c-score{font:800 clamp(1.9rem,4.6vw,2.6rem)/1.05 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.c-score.klein{font-size:clamp(1.4rem,3.4vw,1.8rem)}
.c-neben{color:var(--grau);margin-top:6px}
.c-wort{display:inline-block;margin-top:8px;font:700 2rem/1.1 var(--f-hand);color:var(--rotstift);transform:rotate(-1.5deg);transform-origin:left}
.c-wunsch{color:var(--grau);margin-top:10px;font-size:.95rem}
.c-liste{list-style:none;margin:clamp(28px,5vh,44px) 0 0;padding:4px 0;border-radius:20px;border:1.5px solid var(--linie);background-color:var(--papier);
  background-image:linear-gradient(var(--hell) 1px,transparent 1px),linear-gradient(90deg,var(--hell) 1px,transparent 1px);background-size:20px 20px}
.c-a{display:grid;grid-template-columns:auto minmax(0,1fr) 44px;gap:6px 16px;align-items:start;padding:16px 18px}
.c-a+.c-a{border-top:1px dashed var(--linie)}
.c-nr{min-width:38px;height:30px;padding:0 9px;margin-top:1px;border-radius:9px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--linie);
  display:grid;place-items:center;font:700 .92rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.c-nr.mit-seite{height:auto;min-height:30px;padding:4px 8px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.c-nr small{font:600 .66rem/1 var(--f-text);color:var(--grau);white-space:nowrap}
.c-ende>.c-knopfreihe:only-child{grid-column:1/-1}
.c-inhalt{min-width:0}
.c-aufg{font-size:1.08rem;line-height:1.45;overflow-wrap:anywhere}
.c-aufg.c-ohne{color:var(--grau);font-style:italic}
.c-aufg sup,.c-hand sup,.c-loesung sup,.c-tipp sup{font-size:.62em;line-height:0}
.c-antw{margin-top:2px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.c-label{color:var(--grau);font-size:.86rem}
.c-hand{font:600 1.55rem/1.2 var(--f-hand);color:var(--tinte);overflow-wrap:anywhere}
.c-a.bad .c-hand,.c-a.part .c-hand{text-decoration:underline wavy var(--rotstift);text-decoration-thickness:1.5px;text-underline-offset:6px}
.c-st{width:44px;height:44px;margin-top:-4px}
.c-mark{width:44px;height:44px;overflow:visible;display:block}
.c-mark path{fill:none;stroke:var(--rotstift);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.c-a.zeichnen .c-mark path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.6,.05,.3,1)}
.c-a.zeichnen .c-mark path+path{transition-delay:.2s}
.c-a.leer .c-mark path,.c-a.unl .c-mark path{stroke:var(--grau2)}
.c-tipp{margin-top:8px;font-size:.98rem;color:#2f3650}
.c-tipp b{color:var(--fast);font-weight:600}
.c-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;margin-top:4px}
.c-lk{font-size:.92rem}
.c-korr{border:0;background:none;padding:6px 0;color:var(--grau2);font-size:.86rem;text-decoration:underline dotted;text-underline-offset:3px}
.c-korr:hover{color:var(--grau)}
.c-loesung{margin-top:8px;padding:12px 14px;border-radius:14px;background:var(--richtig-hell);font-size:.98rem}
.c-l1 b{color:var(--richtig)}
.c-schritte{margin:6px 0 0;padding-left:20px;font-variant-numeric:tabular-nums}
.c-schritte li+li{margin-top:2px}
.c-schritte span{color:var(--grau);font-size:.88rem}
.c-erkl{margin-top:6px;color:#2f3650}
.c-warum-k{color:var(--richtig)}
.c-warum-k:hover{color:#0e5c37}
.c-warum{margin-top:4px;font-size:.95rem;color:#2f3650;max-width:40em}
.c-edit{margin-top:10px;display:grid;gap:10px;max-width:460px}
.c-edit label{display:flex;flex-direction:column;gap:5px;font-size:.86rem;font-weight:600;color:var(--grau)}
.c-edit small{font-weight:400;font-size:.82rem}
.c-edit-k{display:flex;gap:8px;flex-wrap:wrap}
.c-edit-msg{font-size:.9rem;color:var(--falsch)}
.c-edit-msg:empty{display:none}
.c-edit-msg .denken-t{font-size:.92rem}
.c-fazit{margin-top:26px;max-width:560px}
.c-fazit p{background:var(--marker);color:#3b2f00;padding:16px 18px 18px;border-radius:6px 6px 22px 6px;box-shadow:0 14px 26px -18px rgba(120,90,0,.75);
  transform:rotate(-.8deg);font:500 1.04rem/1.5 var(--f-text)}
.c-fazit p::before{content:"Das Orakel meint";display:block;font:600 .8rem/1 var(--f-text);opacity:.65;margin-bottom:8px}
.c-fazit .karte{transform:none}
.c-ende{margin-top:clamp(32px,5vh,48px);display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:16px 28px;align-items:end}
.c-seite{display:flex;flex-direction:column;gap:14px;padding-bottom:4px}
.c-knopfreihe{display:flex;flex-wrap:wrap;gap:10px}
.c-knopfreihe .btn svg{width:20px;height:20px}
.c-lern{color:var(--grau);font-size:.92rem}
.c-lern:empty{display:none}
.c-lern .textknopf{font-size:.9rem;padding:2px}
.sh-foto{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;text-align:left;margin-top:2px;border:1.5px dashed var(--grau2);background:var(--papier);border-radius:999px;
  padding:8px 15px 8px 11px;font:500 .9rem/1.2 var(--f-text);color:var(--schrift);transition:border-color .2s,color .2s}
.sh-foto svg{width:20px;height:20px;color:var(--tinte);flex:none}
.sh-foto:hover{border-color:var(--tinte);color:var(--tinte)}
.sh-foto:disabled{opacity:.55}
.sh-foto-msg{font-size:.88rem;color:var(--grau)}
.sh-foto-msg:empty{display:none}
.sh-foto-msg b{color:var(--schrift);font-weight:600}

/* Quiz */
.q-leiste{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.q-leiste-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"zu titel rechts" "zu prog rechts";
  align-items:center;column-gap:18px;row-gap:8px;padding:12px var(--gutter-r) 12px var(--gutter-l)}
.q-leiste-in>.rund{grid-area:zu}
.rund{width:42px;height:42px;border-radius:50%;border:0;background:var(--hell);display:grid;place-items:center;transition:background-color .2s}
.rund:hover{background:var(--hell2)}
.rund svg{width:18px;height:18px}
.q-titel{grid-area:titel;display:flex;align-items:baseline;gap:10px;min-width:0}
.q-titel b{font:720 1.05rem/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.q-titel>span{color:var(--grau);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-titel .t-kurz{display:none}
.q-prog{grid-area:prog;display:flex;gap:4px;align-items:center}
.q-prog button{flex:1;height:8px;min-width:5px;border-radius:5px;border:0;padding:0;background:var(--hell2);transition:background-color .35s,transform .25s var(--ease)}
.q-prog button:hover{transform:scaleY(1.6)}
.q-prog .jetzt{background:var(--tinte);transform:scaleY(1.4)}
.q-prog .jetzt-r{transform:scaleY(1.4)}
.q-prog .ok{background:var(--richtig)}.q-prog .part{background:#e0a020}.q-prog .bad{background:var(--falsch)}
.q-prog .weg{background:repeating-linear-gradient(-45deg,var(--hell2) 0 3px,#cfd6e4 3px 6px)}
.q-prog .leer{background:#f2c4c0}
.q-rechts{grid-area:rechts;display:flex;align-items:center;gap:14px;justify-content:flex-end}
.q-pkt{position:relative;display:flex;align-items:baseline;gap:5px;font:800 1.4rem/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.q-pkt small{font:500 .82rem/1 var(--f-text);color:var(--grau)}
.plus{position:absolute;right:calc(100% + 10px);top:0;font:800 1.1rem/1 var(--f-display);color:var(--richtig);pointer-events:none;white-space:nowrap}
.serie{display:inline-flex;align-items:center;gap:5px;font:600 .8rem/1 var(--f-text);color:#b4470a;background:#fff0e3;border-radius:999px;padding:6px 10px;white-space:nowrap}
.serie svg{width:13px;height:13px}
.q-buehne{max-width:780px;margin:0 auto;padding:clamp(28px,6vh,64px) var(--gutter-r) 240px var(--gutter-l)}
.q-karte{display:flex;flex-direction:column}
.q-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--grau);font-size:.92rem}
.q-bereich{display:inline-flex;align-items:center;gap:8px;color:var(--schrift);font-weight:500}
.q-bereich i{width:9px;height:9px;border-radius:50%;background:var(--fc,var(--tinte))}
.q-punkte{background:var(--hell);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:600;color:var(--schrift)}
.q-frage{margin-top:16px;font:600 clamp(1.3rem,3.2vw,1.75rem)/1.35 var(--f-text);letter-spacing:-.01em;overflow-wrap:anywhere}
.q-frage b{color:var(--tinte)}
.q-big{margin-top:20px;font:700 clamp(2rem,6.5vw,3.4rem)/1.15 var(--f-display);letter-spacing:-.025em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.q-big .wort{font:600 clamp(1.15rem,3vw,1.5rem)/1.4 var(--f-text);letter-spacing:0}
.q-big mark{background:var(--marker);color:inherit;border-radius:4px;padding:0 4px}
.q-big .gap,.ds .gap{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--grau2);margin:0 4px;color:var(--grau2);font-size:.7em}
.kaertchen{border:2.5px solid currentColor;border-radius:10px;padding:0 12px;margin-right:10px;display:inline-block}
.q-ctl{margin-top:30px}
.opts{display:grid;gap:10px}
.opt{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 24px;align-items:center;gap:14px;text-align:left;border:0;border-radius:16px;padding:15px 16px;
  background:var(--hell);font:500 1.08rem/1.35 var(--f-text);color:var(--schrift);box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .18s,background-color .18s,transform .18s var(--ease),color .18s,opacity .3s}
.opt kbd{width:30px;height:30px;border-radius:9px;background:var(--papier);display:grid;place-items:center;font:600 .85rem/1 var(--f-text);color:var(--grau);box-shadow:0 1px 0 var(--linie)}
.opt .ic{width:24px;height:24px;opacity:0}
.opt:hover{box-shadow:inset 0 0 0 2px var(--tinte)}
.opt:active{transform:scale(.985)}
.opts.kurz{display:flex;flex-wrap:wrap}
.opts.kurz .opt{grid-template-columns:auto;justify-content:center;min-width:132px;padding:17px 24px;font-weight:600}
.opts.kurz .opt kbd{display:none}
.opts.kurz .opt .ic{position:absolute;right:8px;top:8px;width:18px;height:18px}
.opts.multi{display:flex;flex-wrap:wrap;gap:8px}
.opts.multi .opt{grid-template-columns:auto;min-width:58px;justify-content:center;padding:13px 16px;font:600 1.15rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.opts.multi .opt kbd,.opts.multi .opt .ic{display:none}
.opt[aria-pressed="true"]{background:var(--tinte);color:#fff;box-shadow:none}
.zu .opt{cursor:default}
.zu .opt:hover{box-shadow:inset 0 0 0 2px transparent}
.zu .opt.richtig{background:var(--richtig-hell);box-shadow:inset 0 0 0 2px var(--richtig);color:var(--schrift)}
.zu .opt.richtig .ic{opacity:1;color:var(--richtig)}
.zu .opt.falsch{background:var(--falsch-hell);box-shadow:inset 0 0 0 2px var(--falsch);color:var(--schrift)}
.zu .opt.falsch .ic{opacity:1;color:var(--falsch)}
.zu .opt.fehlt{box-shadow:inset 0 0 0 2px var(--richtig);background:var(--papier)}
.zu .opt.blass{opacity:.5}
.felder{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:.88rem;font-weight:600;color:var(--grau)}
.eingabe{font:700 1.7rem/1.2 var(--f-display);font-variant-numeric:tabular-nums;width:min(340px,100%);padding:14px 18px;border-radius:16px;border:2px solid var(--linie);background:var(--papier);color:var(--schrift);
  transition:border-color .2s,box-shadow .2s,background-color .2s;outline:none}
.eingabe.text{font:500 1.3rem/1.3 var(--f-text)}
.eingabe.kurz{width:170px}
.eingabe.exp{width:84px;font-size:1.2rem;padding:10px 12px}
.eingabe:focus{border-color:var(--tinte);box-shadow:0 0 0 5px var(--tinte-hell)}
.zu .eingabe{border-style:dashed;background:var(--hell)}
.zu .eingabe.ok{border:2px solid var(--richtig);background:var(--richtig-hell)}
.zu .eingabe.bad{border:2px solid var(--falsch);background:var(--falsch-hell)}
.einheit{font:700 1.5rem/1 var(--f-display);padding-bottom:20px}
.zehn{display:flex;align-items:flex-start;gap:8px;font:700 1.7rem/1 var(--f-display)}
.zehn>span{padding-top:20px}
.q-act{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--linie);transition:background-color .35s}
.q-act-in{max-width:780px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px var(--gutter-r) calc(16px + env(safe-area-inset-bottom,0px)) var(--gutter-l)}
.q-act.ok{background:var(--richtig-hell);border-top-color:transparent}
.q-act.bad{background:var(--falsch-hell);border-top-color:transparent}
.q-act.part{background:var(--fast-hell);border-top-color:transparent}
.tasten{color:var(--grau);font-size:.88rem}
.rm{flex:1;min-width:0;display:flex;gap:14px;align-items:flex-start}
.rm-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ok .rm-ic{background:var(--richtig)}.bad .rm-ic{background:var(--falsch)}.part .rm-ic{background:#d38e10}
.rm-ic svg{width:24px;height:24px}
.rm-t{min-width:0;max-height:38vh;overflow:auto}
.rm-v{font:760 1.3rem/1.2 var(--f-display);letter-spacing:-.01em}
.ok .rm-v{color:var(--richtig)}.bad .rm-v{color:var(--falsch)}.part .rm-v{color:var(--fast)}
.rm-sol{margin-top:4px;font-size:1rem}
.rm-why{margin-top:6px;font-size:.96rem;line-height:1.5;color:#2f3650}
.rm-why b{color:var(--schrift)}
.rm details{margin-top:4px}
.rm summary{cursor:pointer;color:var(--richtig);font-weight:600;font-size:.95rem}
.q-act .btn{flex:none}

/* Ergebnis */
.erg{display:flex;flex-direction:column;gap:44px}
.erg-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,5vw,44px);align-items:center}
.stempel{position:relative;width:150px;height:150px;flex:none}
.stempel svg{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible}
.stempel path{fill:none;stroke:var(--rotstift);stroke-width:5;stroke-linecap:round}
.stempel .n{position:absolute;inset:0;display:grid;place-items:center;font:700 7rem/1 var(--f-hand);color:var(--rotstift);transform:rotate(-7deg);padding-bottom:6px}
.erg-wort{font:700 2rem/1 var(--f-hand);color:var(--rotstift);transform:rotate(-2deg);transform-origin:left;display:inline-block}
.erg-score{margin-top:10px;font:800 clamp(2rem,5.5vw,3rem)/1 var(--f-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.erg-sub{margin-top:8px;color:var(--grau)}
.balken{height:12px;border-radius:6px;background:var(--hell);overflow:hidden;margin-top:16px}
.balken i{display:block;height:100%;width:0;border-radius:6px;background:var(--tinte);transition:width 1.1s var(--ease)}
.erg h2{font-weight:720;font-size:1.6rem;letter-spacing:-.025em}
.erg-satz{margin-top:10px;max-width:40em}
.bereiche{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ber{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:16px 18px;border-radius:18px;background:var(--hell)}
.ber-n{font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.ber-p{font:700 1rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--grau)}
.ber-b{grid-column:1/-1;height:8px;border-radius:4px;background:var(--papier);overflow:hidden}
.ber-b i{display:block;height:100%;width:0;border-radius:4px;transition:width 1.1s var(--ease)}
.ber.ok .ber-b i{background:var(--richtig)}.ber.mid .ber-b i{background:#e0a020}.ber.weak .ber-b i{background:var(--falsch)}
.st{font-size:.76rem;font-weight:600;border-radius:999px;padding:3px 10px}
.ok .st{background:var(--richtig-hell);color:var(--richtig)}.mid .st{background:var(--fast-hell);color:var(--fast)}.weak .st{background:var(--falsch-hell);color:var(--falsch)}
.ber-tip{grid-column:1/-1;font-size:.95rem;color:#2f3650}
.ber-tip b{color:var(--schrift)}
.ber .btn{grid-column:1/-1;justify-self:start;background:var(--papier)}
.erg-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
/* „Ergebnisse auf diesem Gerät merken“ (nur wenn keine Datenbank speichert) */
.merken{margin-top:16px;padding:14px 16px;border:1px solid var(--linie);border-radius:14px;background:var(--hell);max-width:640px}
.merken-l{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;line-height:1.3}
.merken-l input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--schrift);cursor:pointer}
.merken-t{margin-top:6px;padding-left:32px;font-size:.88rem;line-height:1.5;color:var(--grau)}
.merken-t a{color:var(--schrift);text-underline-offset:3px}
.aufklapp{border-top:1px solid var(--linie)}
.aufklapp+.aufklapp{margin-top:-30px}
.aufklapp summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font:700 1.15rem/1.2 var(--f-display)}
.aufklapp summary::-webkit-details-marker{display:none}
.aufklapp summary::after{content:"";width:11px;height:11px;border-right:2.5px solid var(--grau);border-bottom:2.5px solid var(--grau);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:6px}
.aufklapp[open] summary::after{transform:rotate(225deg)}
.durchsicht{list-style:none;margin:4px 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}
.ds{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:16px;background:var(--hell)}
.ds-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ds-ic svg{width:17px;height:17px}
.ds.ok .ds-ic{background:var(--richtig)}.ds.bad .ds-ic{background:var(--falsch)}.ds.part .ds-ic{background:#d38e10}
.ds-q{font-weight:600;min-width:0;overflow-wrap:anywhere}
.ds-q .gross{font-family:var(--f-display);font-weight:700}
.ds-a{font-size:.94rem;margin-top:4px;color:#2f3650}
.ds-w{font-size:.92rem;margin-top:6px;color:var(--grau)}
.ds-x{min-width:0}
.schluessel{margin-bottom:18px}
.schluessel td,.schluessel th{background:transparent}
.schluessel tr.ich td{background:var(--marker);font-weight:700}

/* Quiz-Auswahl (Seitenleiste) */
.sheet{position:fixed;inset:0;z-index:60}
.sheet-bg{position:absolute;inset:0;background:rgba(20,26,51,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet-panel{position:absolute;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--papier);overflow-y:auto;overscroll-behavior:contain;outline:none;
  box-shadow:-30px 0 80px -30px rgba(20,26,51,.45);
  padding:calc(18px + env(safe-area-inset-top,0px)) max(26px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) 26px;display:flex;flex-direction:column;gap:22px}
.sh-oben{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sh-faecher{display:flex;flex-wrap:wrap;gap:6px}
.sf{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;padding:8px 13px;background:var(--hell);font:500 .88rem/1 var(--f-text);color:var(--schrift);transition:background-color .2s,color .2s}
.sf i{width:8px;height:8px;border-radius:50%;background:var(--fc)}
.sf:hover{background:var(--hell2)}
.sf[aria-selected="true"]{background:var(--fc);color:#fff;font-weight:600}
.sf[aria-selected="true"] i{background:#fff}
.f-englisch.sf[aria-selected="true"]{color:#2a1f00}
.f-englisch.sf[aria-selected="true"] i{background:#2a1f00}
.sh-h{font-weight:780;font-size:2.3rem;line-height:1;letter-spacing:-.04em;font-variation-settings:"wdth" 92}
.sh-sub{color:var(--grau);margin-top:8px}
.modi{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.modi legend,.laenge legend{font-weight:600;margin-bottom:10px;padding:0}
.modus{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px;border-radius:18px;background:var(--hell);cursor:pointer;
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,background-color .2s}
.modus:hover{box-shadow:inset 0 0 0 2px var(--hell2)}
.modus.an{background:var(--papier);box-shadow:inset 0 0 0 2px var(--schrift)}
.modus input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--schrift)}
.mo-k b{font-weight:600;font-size:1.04rem;display:block}
.mo-k .sub{display:block;font-size:.88rem;color:var(--grau);margin-top:2px}
.mo-detail{grid-column:2;display:flex;flex-direction:column;gap:10px;margin-top:8px;min-width:0}
.stand{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--richtig)}
.stand::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)}
.stand.erf{color:var(--fast)}
.tchips{display:flex;flex-wrap:wrap;gap:6px}
.tchip{border:0;border-radius:999px;padding:6px 11px;background:var(--hell);font:400 .84rem/1.2 var(--f-text);color:var(--schrift);transition:background-color .2s,color .2s}
.tchip.fokus{box-shadow:inset 0 0 0 1.5px var(--fc,var(--tinte));font-weight:600}
.tchip.erf{color:var(--grau);font-style:italic}
.tchip:hover{background:var(--fc,var(--tinte));color:#fff}
.f-englisch .tchip:hover{color:#2a1f00}
.mehr{border:0;background:none;color:var(--tinte);font-weight:600;font-size:.86rem;padding:6px 4px}
.feld-text{font:400 1rem/1.3 var(--f-text);width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--linie);background:var(--papier);color:var(--schrift);outline:none}
.feld-text:focus{border-color:var(--tinte);box-shadow:0 0 0 4px var(--tinte-hell)}
.laenge{border:0;margin:0;padding:0;min-width:0}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg label{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:16px;background:var(--hell);cursor:pointer;text-align:center;
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,background-color .2s}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg b{font:800 1.5rem/1 var(--f-display)}
.seg span{font-size:.8rem;color:var(--grau);line-height:1.2}
.seg label:has(input:checked){background:var(--papier);box-shadow:inset 0 0 0 2px var(--schrift)}
.seg label:has(input:focus-visible){outline:3px solid var(--tinte);outline-offset:2px}
.sh-start{position:sticky;bottom:calc(-28px - env(safe-area-inset-bottom,0px));z-index:2;margin:-8px -26px 0;padding:18px 26px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(255,255,255,0),var(--papier) 18px)}
.sh-msg{color:var(--falsch);font-size:.95rem;margin-top:10px}
.sh-msg:empty{display:none}
.sh-msg .denken-t{color:var(--grau)}
.verlauf{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--linie);padding-top:18px}
.verlauf:empty{display:none}
.verlauf h3{font-size:1.05rem;font-weight:700}
.v-zeile{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.92rem}
.v-note{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--rotstift);color:var(--rotstift);font:700 1.4rem/1 var(--f-hand)}
.v-zeile span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-zeile small{color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Footer */
.fuss{border-top:1px solid var(--linie);background:var(--papier);flex:none}
.fuss-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:28px 40px;font-size:.9rem;line-height:1.55;color:var(--grau);
  padding:44px var(--gutter-r) calc(44px + env(safe-area-inset-bottom,0px)) var(--gutter-l)}
.fuss h2{font:700 1rem/1.25 var(--f-display);color:var(--schrift);margin-bottom:8px;letter-spacing:-.01em}
.fuss p+p{margin-top:8px}
.fuss b{color:var(--schrift);font-weight:600;white-space:nowrap}
.logo-klein{font-size:1.25rem;padding:0;margin-bottom:8px}
.logo-klein .logo-orb{width:22px;height:22px}
.fuss-quiz{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
/* Rechtliches im Footer (nur auf der Website orakel.schule) */
.fuss:has(.fuss-recht) .fuss-in{padding-bottom:30px}
.fuss-recht{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;border-top:1px solid var(--linie);
  padding:16px var(--gutter-r) calc(20px + env(safe-area-inset-bottom,0px)) var(--gutter-l);font-size:.86rem;color:var(--grau)}
.fuss-recht nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.fuss-recht a{color:var(--schrift);text-decoration:none;padding:4px 0}
.fuss-recht a:hover{text-decoration:underline;text-underline-offset:3px}
.fq{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--hell);border-radius:999px;padding:6px 11px;font-size:.82rem;color:var(--schrift)}
.fq i{width:7px;height:7px;border-radius:50%;background:var(--fc)}
.fq:hover{background:var(--hell2)}

.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;max-width:min(560px,calc(100% - 32px));
  background:var(--schrift);color:#fff;padding:12px 18px;border-radius:14px;box-shadow:var(--schatten);font-size:.95rem}
body[data-view="quiz"] .toast{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}

/* Ansichten */
body[data-view="quiz"] .nav,body[data-view="quiz"] .fuss{display:none}
body.sheet-offen{overflow:hidden}

@media (max-width:980px){
  .a-grid{display:flex;flex-direction:column;gap:48px}
  .a-main,.a-side{display:contents}
  .a-schnell:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
  .a-schnell .q-cta-msg{margin-top:0;color:var(--grau);font-size:.95rem}
  .blk-steps{order:1}.blk-merk{order:2}.blk-tips{order:3}.blk-tab{order:4}.blk-quiz{order:5}
}
@media (max-width:860px){
  .orb-stage{--orb:230px}
  .nav-quiz{display:none}
  .nav-mobil{display:inline-flex}
  .fuss-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  .nav-in{height:60px}
  .ask{padding-left:18px}
  .ask-btn{padding:0;width:46px;height:46px}
  .ask-btn-t{display:none}
  .ask-btn svg{display:block}
  .ask.mit-foto{padding-left:7px}
  .ask-kamera{width:42px;height:42px}
  .ask-kamera svg{width:23px;height:23px}
  .anh{width:40px;height:40px}
  .c-head{grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .c-fotos{order:2;padding:4px 2px 0 0}
  .c-kopf{order:1}
  .c-foto{width:70px;border-width:3px;border-radius:9px}
  .c-foto+.c-foto{margin:10px 0 0 -30px}
  .c-foto+.c-foto+.c-foto{margin-left:-46px}
  .c-foto figcaption{left:3px;bottom:3px;font-size:.62rem;padding:2px 5px}
  .c-a{grid-template-columns:auto minmax(0,1fr) 36px;gap:6px 12px;padding:14px 12px}
  .c-st,.c-mark{width:36px;height:36px}
  .c-ende{grid-template-columns:1fr}
  .c-seite{padding-bottom:0}
  .probier .label{width:100%}
  .a-top{gap:10px}
  .orb-mini{width:40px;height:40px}
  .orb-stage{--orb:200px}
  .probier .chip:nth-of-type(n+4){display:none}
  .q-titel{align-items:stretch}
  .q-pkt .lang{display:none}
  .q-titel .t-lang{display:none}
  .q-titel .t-kurz{display:inline}
  .q-rechts{gap:10px}
  .sh-start{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .q-leiste-in{grid-template-areas:"zu titel rechts" "prog prog prog";column-gap:12px}
  .q-titel{flex-direction:column;gap:2px}
  .serie span{display:none}
  .q-act-in{flex-wrap:wrap}
  .rm{flex-basis:100%}
  .q-act.ok .btn,.q-act.bad .btn,.q-act.part .btn{width:100%}
  .erg-top{grid-template-columns:1fr}
  .stempel{width:120px;height:120px}
  .stempel .n{font-size:5.6rem}
  .sheet-panel{top:auto;left:0;width:100%;max-height:92vh;border-radius:28px 28px 0 0;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-top:14px}
  .sheet-panel::before{content:"";align-self:center;width:44px;height:5px;border-radius:3px;background:var(--hell2);flex:none;margin-bottom:-8px}
  .sh-h{font-size:1.9rem}
  .fuss-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .a-text b{background-size:100% 100%}
  .c-mark path{stroke-dashoffset:0}
  .liest .c-scan{opacity:.6;transform:translateY(120%)}
}