/* Grundgerüst für alle Seiten */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: ruhige Papierfläche statt Karoheft. Waldgrün trägt Schrift und dunkle Flächen, Terrakotta ist der einzige Akzent (Korrekturstift), Salbei für den roten Faden – Farben aus den Illustrationen. Viel Weißraum, wenige Rahmen. */
:root{
  --paper:#F3ECDF; --paper-2:#E9DFCC; --card:#FBF7EF; --ink:#213A2C; --ink-soft:#4F5B4B; --line:#DCCFB8; --grid:rgba(33,58,44,.05); --red:#A3471F; --red-soft:#F1DCCD; --mark:#EBC66E; --ok:#3D6B47; --ok-soft:#DCE6D2; --code-bg:#233A2D; --code-fg:#F3ECDF; --wood:#E2C08A; --sage:#93A178; --forest:#2E4A39; --terra:#B5532C; --thread:#93A178; --s1:#A3471F; --s2:#3E6B78; --s3:#3F6B4A; --s4:#94690F; --s5:#7B4B6A; --shadow:rgba(33,58,44,.28);
  --f-display:"Gloock", "Iowan Old Style", Georgia, serif;
  --f-accent:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-body:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r:14px; --wrap:1140px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#151E19; --paper-2:#1C2721; --card:#202D26; --ink:#EFE7D7; --ink-soft:#B6B09F; --line:#33443A; --grid:rgba(239,231,215,.04); --red:#E58C62; --red-soft:#3B2A20; --mark:#8A7128; --ok:#93C596; --ok-soft:#22382A; --code-bg:#0F1712; --code-fg:#EFE7D7; --wood:#C9A774; --sage:#A3B18A; --forest:#2E4A39; --terra:#D9744A; --thread:#5F6F55; --s1:#E58C62; --s2:#86B6C4; --s3:#93C596; --s4:#E0B456; --s5:#C99BBB; --shadow:rgba(0,0,0,.5); color-scheme:dark }}
:root[data-theme="dark"]{ --paper:#151E19; --paper-2:#1C2721; --card:#202D26; --ink:#EFE7D7; --ink-soft:#B6B09F; --line:#33443A; --grid:rgba(239,231,215,.04); --red:#E58C62; --red-soft:#3B2A20; --mark:#8A7128; --ok:#93C596; --ok-soft:#22382A; --code-bg:#0F1712; --code-fg:#EFE7D7; --wood:#C9A774; --sage:#A3B18A; --forest:#2E4A39; --terra:#D9744A; --thread:#5F6F55; --s1:#E58C62; --s2:#86B6C4; --s3:#93C596; --s4:#E0B456; --s5:#C99BBB; --shadow:rgba(0,0,0,.5); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display); line-height:1.08; text-wrap:balance; margin:0; letter-spacing:-.015em}
h2,.sec-head h1,.prose > h1{font-size:clamp(2rem,4.2vw,3rem); font-weight:800}
h3{font-size:1.3rem; font-weight:700}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--red); outline-offset:2px; border-radius:4px}
.mark{background:linear-gradient(transparent 55%, var(--mark) 55%, var(--mark) 92%, transparent 92%); padding:0 .1em}
.eyebrow{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); font-weight:600}
.lead{font-size:1.15rem; color:var(--ink-soft); max-width:62ch}

/* Header */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:20px; padding-block:12px; flex-wrap:wrap}
.logo{display:flex; align-items:baseline; gap:6px; text-decoration:none; font-family:var(--f-display); font-weight:800; font-size:1.25rem}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--red);display:inline-block;transform:translateY(-2px)}
nav.main{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
nav.main a{text-decoration:none; padding:7px 12px; border-radius:999px; font-weight:700; font-size:.95rem; color:var(--ink-soft)}
nav.main a:hover{background:var(--paper-2); color:var(--ink)}
nav.main a.cta{background:var(--ink); color:var(--paper)}
nav.main a.cta:hover{background:var(--red); color:#fff}
@media (max-width:760px){ nav.main{margin-left:0; width:100%; flex-wrap:wrap; gap:4px 2px} nav.main a{white-space:nowrap; padding:6px 10px; font-size:.92rem} }

section{padding-block:72px; border-bottom:1px solid var(--line)}
.sec-head{display:grid; gap:14px; margin-bottom:36px; max-width:760px}

/* Hero */
.hero{padding-block:56px 72px}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem); font-weight:800}
.hero h1 em{font-style:normal; color:var(--red)}
.hero-copy{display:grid; gap:22px; min-width:0}
.btns{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; border:2px solid var(--ink); background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:999px; font:700 1rem var(--f-body); text-decoration:none; cursor:pointer}
.btn:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.facts{display:flex; gap:28px; flex-wrap:wrap; font-size:.92rem; color:var(--ink-soft)}
.facts b{display:block; font-family:var(--f-display); font-size:1.6rem; color:var(--ink); font-variant-numeric:tabular-nums}

/* Korrigiertes Blatt */
.sheet{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:26px 26px 22px 46px; position:relative; box-shadow:0 18px 40px -24px rgba(28,43,75,.35); min-width:0}
.sheet::before{content:""; position:absolute; left:30px; top:0; bottom:0; width:2px; background:var(--red); opacity:.55}
.sheet .label{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.weak{font-family:var(--f-mono); font-size:1rem; margin:6px 0 14px; text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2px}
.notes{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:7px}
.notes li{display:grid; grid-template-columns:22px 1fr; gap:8px; font-size:.95rem; color:var(--red); font-style:italic}
.notes li span:first-child{font-family:var(--f-display); font-style:normal; font-weight:800}
.strong{font-family:var(--f-mono); font-size:.86rem; background:var(--ok-soft); border-radius:6px; padding:12px 14px; line-height:1.55; white-space:pre-wrap}
.grade{position:absolute; right:18px; top:14px; font-family:var(--f-display); font-weight:800; color:var(--red); font-size:2rem; transform:rotate(-8deg)}

/* Baukasten */
.builder{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px}
@media (max-width:900px){.builder{grid-template-columns:1fr}}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:grid; gap:16px; min-width:0}
.field{display:grid; gap:6px}
.field label,.legend{font-weight:700; font-size:.92rem}
select,input[type=text],input[type=email],textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:8px; padding:10px 12px; width:100%}
select:focus,input:focus,textarea:focus{border-color:var(--ink); outline:none}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}
.checks{display:grid; gap:8px}
.checks label{display:flex; gap:10px; align-items:flex-start; font-size:.95rem; cursor:pointer}
.checks input{margin-top:5px; accent-color:var(--red)}
.output{background:var(--code-bg); color:var(--code-fg); border-radius:var(--r); padding:22px; display:grid; gap:14px; min-width:0; align-content:start}
.output pre{margin:0; font-family:var(--f-mono); font-size:.88rem; line-height:1.6; white-space:pre-wrap; word-break:break-word; max-height:440px; overflow:auto}
.out-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.out-head .eyebrow{color:var(--mark)}
.copy{font:700 .9rem var(--f-body); border:1.5px solid currentColor; background:transparent; color:inherit; border-radius:999px; padding:6px 14px; cursor:pointer}
.copy:hover{background:var(--red); border-color:var(--red); color:#fff}
.copy.done{background:var(--ok); border-color:var(--ok); color:#fff}
.hint{font-size:.85rem; opacity:.8}

/* Bibliothek */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:22px}
.toolbar input{max-width:280px}
.toolbar select{width:auto}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px}
.chip{font:700 .88rem var(--f-body); border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft); padding:6px 13px; border-radius:999px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.lib{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
@media (max-width:400px){.lib{grid-template-columns:1fr}}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:grid; gap:10px; grid-template-rows:auto auto 1fr auto; min-width:0}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:4px; background:var(--paper-2); color:var(--ink-soft)}
.tag.cat{background:var(--red-soft); color:var(--red)}
.pcard pre{margin:0; font-family:var(--f-mono); font-size:.8rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; background:var(--paper); border-radius:6px; padding:12px; max-height:200px; overflow:auto; border:1px dashed var(--line)}
.pcard .copy{justify-self:start; color:var(--ink)}
.empty{padding:30px; text-align:center; color:var(--ink-soft); border:1.5px dashed var(--line); border-radius:var(--r)}
.count{font-size:.9rem; color:var(--ink-soft); margin-left:auto; font-variant-numeric:tabular-nums}

/* Lernen */
.split{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.rule{border-top:3px solid var(--ink); padding-top:14px; display:grid; gap:8px}
.rule .n{font-family:var(--f-display); font-weight:800; font-size:2.4rem; color:var(--red); line-height:1}
.warn{margin-top:28px; background:var(--red-soft); border-left:4px solid var(--red); padding:18px 20px; border-radius:0 var(--r) var(--r) 0; display:grid; gap:6px; max-width:820px}
.warn strong{color:var(--red)}

.videos{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:44px}
.vcard{display:grid; grid-template-rows:auto 1fr; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .15s}
.vcard:hover{transform:translateY(-3px)}
.thumb{aspect-ratio:16/8; max-width:100%; position:relative; display:grid; place-items:center; color:#fff}
.thumb .play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center}
.thumb .play::after{content:"";border-left:14px solid var(--red);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.thumb .lvl{position:absolute; left:10px; top:10px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.35); padding:3px 8px; border-radius:4px}
.vbody{padding:14px 16px 16px; display:grid; gap:6px; align-content:start}
.vbody p{font-size:.92rem; color:var(--ink-soft)}
.vbody .ext{font-size:.82rem; font-weight:700; color:var(--red)}

/* Quiz */
.quiz{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; margin-top:44px; display:grid; gap:18px; max-width:780px}
.qprog{height:6px; background:var(--paper-2); border-radius:3px; overflow:hidden}
.qprog i{display:block; height:100%; background:var(--red); transition:width .25s}
.opts{display:grid; gap:8px}
.opt{text-align:left; font:inherit; font-size:1rem; padding:12px 14px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); border-radius:8px; cursor:pointer}
.opt:hover{border-color:var(--ink)}
.opt.right{border-color:var(--ok); background:var(--ok-soft)}
.opt.wrong{border-color:var(--red); background:var(--red-soft)}
.opt:disabled{cursor:default}
.explain{font-size:.95rem; color:var(--ink-soft)}
.qfoot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.9rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}

/* Praxis */
.flows{display:grid; gap:18px}
.flow{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px}
@media (max-width:760px){.flow{grid-template-columns:1fr}}
.chain{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--f-display); font-weight:700; font-size:1.15rem}
.chain .arr{color:var(--red)}
.steps{margin:0; padding-left:1.3em; display:grid; gap:6px}
.steps li::marker{font-family:var(--f-display); font-weight:800; color:var(--red)}
details.prompt{margin-top:10px}
details.prompt summary{cursor:pointer; font-weight:700; color:var(--red)}
details.prompt pre{font-family:var(--f-mono); font-size:.82rem; white-space:pre-wrap; background:var(--paper); padding:12px; border-radius:6px; margin:10px 0 0}
.examples{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:44px}
@media (max-width:900px){.examples{grid-template-columns:1fr}}
.ex{border:1px solid var(--line); background:var(--card); border-radius:var(--r); padding:20px; display:grid; gap:10px; align-content:start}
.ex .subj{font-family:var(--f-display); font-weight:800; font-size:1.6rem}
.tools{margin-top:44px; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.tool{border-top:2px solid var(--ink); padding-top:10px; display:grid; gap:4px}
.tool a{font-weight:700}
.tool p{font-size:.92rem; color:var(--ink-soft)}

/* Haltung */
.stance{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px}
@media (max-width:900px){.stance{grid-template-columns:1fr}}
.prose{display:grid; gap:16px; max-width:64ch}
.prose h3{margin-top:10px}
.shift{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; font-size:.95rem}
.shift .from{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--red)}
.shift .to{font-weight:700}
.shift .arr{color:var(--red); font-weight:800}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checklist li{display:grid; grid-template-columns:26px 1fr; gap:8px; align-items:start}
.checklist li::before{content:""; width:18px; height:18px; border:2px solid var(--ink); border-radius:3px; margin-top:4px}
.checklist li.no::before{border-color:var(--red); background:linear-gradient(45deg,transparent 44%,var(--red) 44%,var(--red) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--red) 44%,var(--red) 56%,transparent 56%)}
.aside-box{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:grid; gap:14px; align-content:start}

/* Mitmachen */
.join{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px}
@media (max-width:900px){.join{grid-template-columns:1fr}}
.potw{background:var(--ink); color:var(--paper); border-radius:var(--r); padding:24px; display:grid; gap:12px}
.potw .eyebrow{color:var(--mark)}
.potw pre{margin:0; font-family:var(--f-mono); font-size:.86rem; white-space:pre-wrap; background:rgba(255,255,255,.08); padding:14px; border-radius:6px}
.potw .copy{justify-self:start}
.post{border:1px solid var(--line); background:var(--card); border-radius:var(--r); padding:20px; display:grid; gap:8px; text-decoration:none}
.post time{font-family:var(--f-mono); font-size:.78rem; color:var(--ink-soft)}
.ok-msg{background:var(--ok-soft); border-radius:8px; padding:14px; display:grid; gap:10px}
.ok-msg pre{margin:0; font-family:var(--f-mono); font-size:.8rem; white-space:pre-wrap; word-break:break-word}

/* Footer */
footer{padding-block:48px 40px}
.fgrid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}}
footer h4{font-family:var(--f-display); margin:0 0 10px; font-size:1.05rem}
footer p,footer li{font-size:.92rem; color:var(--ink-soft)}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:4px}
details.legal{border-top:1px solid var(--line); padding-block:14px}
details.legal summary{cursor:pointer; font-weight:700; font-family:var(--f-display); font-size:1.05rem}
details.legal .prose{margin-top:14px; font-size:.94rem}
.small{font-size:.82rem; color:var(--ink-soft)}
.mail{font-family:var(--f-mono); font-size:.9rem; user-select:all}

/* Grafiken */
.ic{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; width:24px; height:24px; flex:none}
.sheet{margin-bottom:30px}
.pencil{position:absolute; width:170px; max-width:60%; right:14px; bottom:-30px; transform:rotate(-12deg); filter:drop-shadow(0 6px 6px rgba(0,0,0,.18))}
.pencil .eraser{fill:var(--red-soft)} .pencil .ferrule{fill:var(--ink-soft)} .pencil .body{fill:var(--red)}
.pencil .stripe{fill:#fff; opacity:.22} .pencil .wood{fill:var(--wood)} .pencil .lead{fill:var(--ink)}
.rule-top{display:flex; justify-content:space-between; align-items:flex-end}
.rule-top .ic{width:46px; height:46px; color:var(--ink-soft); stroke-width:1.4}

.anatomy{margin:40px 0 0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; display:grid; gap:18px; max-width:880px}
.anat-text{font-family:var(--f-mono); font-size:1rem; line-height:2.3}
.seg{border-bottom:4px solid; padding-bottom:2px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.seg.s1{border-color:var(--s1)} .seg.s2{border-color:var(--s2)} .seg.s3{border-color:var(--s3)} .seg.s4{border-color:var(--s4)} .seg.s5{border-color:var(--s5)}
.anat-legend{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.92rem}
.anat-legend li{display:flex; align-items:center; gap:8px}
.anat-legend i{width:18px; height:6px; border-radius:3px; display:inline-block}
.anat-legend i.s1{background:var(--s1)} .anat-legend i.s2{background:var(--s2)} .anat-legend i.s3{background:var(--s3)} .anat-legend i.s4{background:var(--s4)} .anat-legend i.s5{background:var(--s5)}
.anat-legend b{font-weight:700} .anat-legend span{color:var(--ink-soft)}

.chain{gap:6px; align-items:flex-start}
.chain .arr{align-self:center; margin-top:-22px; font-size:1.3rem}
.node{display:inline-flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--f-body); font-size:.82rem; font-weight:700; color:var(--ink-soft); width:66px; text-align:center}
.node .ic{width:52px; height:52px; padding:12px; border:2px solid var(--ink); border-radius:14px; background:var(--paper); color:var(--ink); stroke-width:1.6}
.node.ai .ic{border-color:var(--red); color:var(--red); background:var(--red-soft)}

.ex .subj{display:flex; align-items:center; gap:12px}
.sub-ic{width:44px; height:44px; padding:9px; border-radius:50%; background:var(--red-soft); color:var(--red); stroke-width:1.7}
.aside-box h3{display:flex; align-items:center; gap:10px}
.aside-box h3 .ic{width:30px; height:30px; color:var(--ok)}

/* Galerie */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
@media (max-width:400px){.gallery{grid-template-columns:1fr}}
.excard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:grid; grid-template-rows:auto 1fr; text-decoration:none; transition:transform .15s, box-shadow .15s; min-width:0}
.excard:hover{transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(28,43,75,.45)}
.ex-top{position:relative; height:118px; display:flex; align-items:flex-end; justify-content:space-between; padding:14px 16px; color:#fff; overflow:hidden}
.ex-top::before{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(to bottom, transparent 0 13px, rgba(255,255,255,.16) 13px 14px); background-size:100% 70px; background-repeat:no-repeat; background-position:0 22px}
.ex-top .ic{position:relative; width:46px; height:46px; stroke-width:1.5; opacity:.95}
.ex-top .cls{position:relative; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.25); padding:4px 9px; border-radius:4px}
.ex-body{padding:16px; display:grid; gap:8px; align-content:start}
.ex-body h3{font-size:1.25rem}
.ex-body p{font-size:.93rem; color:var(--ink-soft)}
.ex-feat{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.ex-go{margin-top:6px; font-weight:700; color:var(--red); font-size:.95rem}
.ex-note{margin-top:28px; display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px dashed var(--line); border-radius:var(--r); padding:16px 18px; max-width:820px}
.ex-note .ic{width:28px; height:28px; color:var(--red)}
.ex-note p{font-size:.95rem}
.ex-note a{color:var(--red); font-weight:700}

/* Mehrseitig */
nav.main a[aria-current="page"]{background:var(--paper-2); color:var(--ink)}
nav.main a.cta[aria-current="page"]{background:var(--red); color:#fff}
section:last-of-type{border-bottom:0}
.page-band{border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--card) 70%,transparent)}
.page-band .wrap{padding-block:14px; display:flex; gap:8px; align-items:center; font-size:.9rem; color:var(--ink-soft); flex-wrap:wrap}
.page-band a{color:var(--ink-soft)}
.areas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.areas{grid-template-columns:1fr}}
.area{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:10px; align-content:start; text-decoration:none; transition:transform .15s, border-color .15s; min-width:0}
.area:hover{transform:translateY(-3px); border-color:var(--ink)}
.area .ic{width:42px; height:42px; padding:9px; border-radius:12px; background:var(--red-soft); color:var(--red); stroke-width:1.7}
.area h3{font-size:1.35rem}
.area p{font-size:.95rem; color:var(--ink-soft)}
.area .go{font-weight:700; color:var(--red); font-size:.92rem}
.legal-page .prose{max-width:68ch}
.legal-page .prose h2{margin-bottom:6px}

/* Audit-Nachbesserungen Oktober 2026 */
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}
footer ul a{display:inline-block; padding:4px 0; min-height:24px}
footer .mail{display:inline-block; padding:4px 0; text-decoration:none}
footer .mail:hover{text-decoration:underline}
.opt .mk{font-weight:700}
.legal-page .prose h2{font-size:1.35rem; margin:26px 0 6px}
.legal-page .prose p + p{margin-top:12px}
.legal-page .prose ul{margin:8px 0 0; padding-left:1.2em}
.todo{background:var(--mark); color:#1C2B4B; padding:0 .2em; border-radius:3px}


/* ===== Version 3: Premium-Überarbeitung ===== */
html{font-synthesis:none}
body{font-size:17.5px; line-height:1.65; position:relative; overflow-x:clip}
h1,h2,h3,h4,.logo,.facts b,.rule .n,.ex .subj,.chain,.grade,.notes li span:first-child,footer h4,.steps li::marker{font-weight:400!important}
h1,h2,h3{letter-spacing:-.01em; line-height:1.08}
h2,.sec-head h1,.prose > h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}
h3{font-size:1.4rem}
em.acc,.hero h1 em{font-family:var(--f-accent); font-style:italic; color:var(--red); letter-spacing:0; font-size:1.08em}
.eyebrow{font-size:.74rem; letter-spacing:.16em}
.lead{font-size:1.18rem}

/* Weißraum statt Linien */
section{padding-block:clamp(64px,9vw,112px); border-bottom:0}
.sec-head{margin-bottom:44px; gap:16px}
header.top{border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--paper)}
.logo{font-size:1.4rem; align-items:center}
.logo .dot{transform:none}
nav.main a{font-weight:600}
main,footer{position:relative; z-index:1}

/* Karten: Fläche statt Rahmen */
.area,.pcard,.panel,.flow,.ex,.post,.quiz,.anatomy,.aside-box,.vcard,.excard,.shift{border-color:transparent; box-shadow:0 1px 0 var(--line), 0 18px 40px -32px var(--shadow)}
.area,.excard,.vcard,.post{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.area:hover,.excard:hover,.vcard:hover,.post:hover{transform:translateY(-4px); box-shadow:0 1px 0 var(--line), 0 28px 50px -30px var(--shadow); border-color:transparent}
.area .ic{border-radius:50%}
.btn{padding:12px 22px; font-weight:600; transition:background .2s, color .2s, border-color .2s, transform .2s}
.btn:hover{transform:translateY(-1px)}
.copy:hover{background:var(--red); border-color:var(--red); color:var(--paper)}
.btn:hover{background:var(--red); border-color:var(--red); color:var(--paper)}
nav.main a.cta:hover{background:var(--red); color:var(--paper)}
nav.main a.cta[aria-current="page"]{background:var(--red); color:var(--paper)}

/* Hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,104px)}
.hero h1{font-size:clamp(2.8rem,6.6vw,5rem); line-height:1.02}
.facts b{font-size:2.1rem}
.sheet{border:0; border-radius:6px; box-shadow:0 1px 0 var(--line), 0 30px 60px -36px var(--shadow); transform:rotate(1.2deg)}
.sheet::before{background:var(--red); opacity:.45}
.grade{font-family:var(--f-accent)!important; font-style:italic; font-size:3rem; right:22px; top:6px}
.notes li{font-family:var(--f-accent); font-size:1.15rem; line-height:1.3}
.notes li span:first-child{font-family:var(--f-accent)}
.weak{text-decoration:none}
.weak span{background:linear-gradient(var(--red),var(--red)) 0 58%/100% 2px no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.strong{background:var(--ok-soft)}
.pencil .eraser{fill:var(--red-soft)} .pencil .body{fill:var(--terra)} .pencil .ferrule{fill:var(--forest)}

/* Hero-Animation: Korrektur als kleine Szene (nur einmal, ca. 4 s) */
@media (prefers-reduced-motion:no-preference){
  .sheet.play .weak span{animation:strike .7s .5s cubic-bezier(.6,0,.3,1) both}
  .sheet.play .notes li{animation:note .5s both}
  .sheet.play .notes li:nth-child(1){animation-delay:1.25s}
  .sheet.play .notes li:nth-child(2){animation-delay:1.55s}
  .sheet.play .notes li:nth-child(3){animation-delay:1.85s}
  .sheet.play .notes li:nth-child(4){animation-delay:2.15s}
  .sheet.play .grade{animation:stamp .45s 2.6s cubic-bezier(.3,1.6,.5,1) both}
  .sheet.play .pencil{animation:pencil 2.4s .3s ease-in-out both}
  .sheet.play .label.after,.sheet.play .strong{animation:note .5s 2.9s both}
}
@keyframes strike{from{background-size:0 2px} to{background-size:100% 2px}}
@keyframes note{from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none}}
@keyframes stamp{from{opacity:0; transform:rotate(-8deg) scale(1.9)} to{opacity:1; transform:rotate(-8deg) scale(1)}}
@keyframes pencil{0%{transform:translate(-260px,-250px) rotate(-12deg)} 30%{transform:translate(-40px,-250px) rotate(-12deg)} 70%{transform:translate(-120px,-120px) rotate(-14deg)} 100%{transform:rotate(-12deg)}}
.strong.typing::after{content:"▍"; color:var(--red); animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* Roter Faden: Linie aus den Illustrationen, zeichnet sich beim Scrollen */
.thread{position:absolute; left:0; top:0; width:100%; pointer-events:none; z-index:0; overflow:visible}
.thread path{fill:none; stroke:var(--thread); stroke-width:1.6; stroke-linecap:round; opacity:.75}
@media (max-width:700px){.thread path{stroke-width:1.2; opacity:.5}}

/* Sanftes Einblenden: Ruhezustand bleibt sichtbar */
.rv{transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s}
.rv.pre{transform:translateY(22px); opacity:.35}

/* Prompt-Anatomie: Teile leuchten nacheinander auf */
.seg{transition:background-color .4s}
.anat-text.lit .seg{animation:segglow 1.6s both}
.anat-text.lit .s2{animation-delay:.35s} .anat-text.lit .s3{animation-delay:.7s} .anat-text.lit .s4{animation-delay:1.05s} .anat-text.lit .s5{animation-delay:1.4s}
@keyframes segglow{0%,100%{background:transparent} 35%{background:color-mix(in srgb,var(--mark) 55%,transparent)}}

/* App-Smashing: Stationen leuchten der Reihe nach auf */
.node .ic{transition:border-color .3s, color .3s, background .3s, transform .3s}
.chain.lit .node .ic{animation:nodehop .7s both}
.chain.lit .node:nth-of-type(2) .ic{animation-delay:.45s}
.chain.lit .node:nth-of-type(3) .ic{animation-delay:.9s}
.chain.lit .arr{animation:arrhop .7s both}
.chain.lit .arr:nth-of-type(2){animation-delay:.25s} .chain.lit .arr:nth-of-type(4){animation-delay:.7s}
@keyframes nodehop{40%{transform:translateY(-6px); border-color:var(--red); color:var(--red)}}
@keyframes arrhop{40%{transform:translateX(5px)}}
.node .ic{border-radius:50%; border-width:1.5px}

/* Baukasten: geänderte Zeilen blitzen kurz auf */
.output pre .ln{display:inline}
.output pre .ln.flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{background:color-mix(in srgb,var(--mark) 65%,transparent); color:var(--code-bg)} 100%{background:transparent}}
.out-head .eyebrow,.potw .eyebrow{color:var(--mark)}

/* Galerie mit Illustrationen */
.ex-top{height:auto; aspect-ratio:3/2; max-width:100%; padding:0; align-items:stretch}
.ex-top::before{display:none}
.ex-top img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.excard:hover .ex-top img{transform:scale(1.045)}
.ex-top .cls{position:absolute; left:12px; bottom:12px; background:color-mix(in srgb,#1d2a22 72%,transparent); color:#F3ECDF; backdrop-filter:blur(4px)}
.ex-top .ic{position:absolute; left:50%; top:46%; translate:-50% -50%; width:84px; height:84px; stroke-width:1.1; color:#F3ECDF; opacity:.9}
.ex-top .wave{position:absolute; inset:auto 0 18% 0; width:100%; height:40px}
.ex-top .wave path{fill:none; stroke:#F3ECDF; stroke-width:1.4; opacity:.7}
.ex-body{padding:18px 20px 20px}
.ex-body h3{font-size:1.45rem}
.post.has-img{grid-template-columns:120px minmax(0,1fr); align-items:center; column-gap:18px}
.post.has-img img{grid-row:1 / span 3; width:120px; aspect-ratio:3/2; object-fit:cover; border-radius:8px; max-width:100%}
@media (max-width:420px){.post.has-img{grid-template-columns:1fr} .post.has-img img{grid-row:auto; width:100%}}
.credit{font-size:.8rem; color:var(--ink-soft); margin-top:22px}

/* Zahlen */
.facts b{font-variant-numeric:tabular-nums lining-nums}
.post.has-img img{align-self:center; height:auto}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:520px}
.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.8rem,6vw,4.7rem)}


/* KI-Schulbrief */
.sb-issue{display:grid; gap:34px; max-width:860px}
.sb-head{display:grid; gap:10px}
.sb-meta{font-size:.9rem; color:var(--ink-soft)}
.sb-intro{font-family:var(--f-accent); font-style:italic; font-size:1.45rem; line-height:1.4; max-width:56ch}
.sb-luecke{font-size:.95rem; color:var(--ink-soft); max-width:62ch}
.sb-list{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.sb-item{display:grid; grid-template-columns:56px minmax(0,1fr); gap:18px; background:var(--card); border-radius:var(--r); padding:26px 26px 24px 18px; box-shadow:0 1px 0 var(--line), 0 18px 40px -32px var(--shadow)}
.sb-n{font-family:var(--f-accent); font-style:italic; font-size:3rem; line-height:1; color:var(--red); text-align:center}
.sb-body{display:grid; gap:10px; min-width:0}
.sb-body h3{font-size:1.45rem; line-height:1.2; overflow-wrap:anywhere}
.sb-body h3 a{text-decoration:none}
.sb-body h3 a:hover{text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:4px}
.sb-von{font-size:.9rem; color:var(--ink-soft)}
.sb-von a{color:var(--red); font-weight:600; text-decoration:none}
.sb-kern{font-size:1.05rem}
.sb-dl{margin:6px 0 0; display:grid; gap:12px}
.sb-dl dt{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:2px}
.sb-dl dd{margin:0; font-size:.97rem}
.sb-praxis{background:var(--ok-soft); border-radius:10px; padding:12px 14px}
.sb-praxis dt{color:var(--ok)}
.sb-archive{margin-top:64px; display:grid; gap:14px; max-width:860px}
.sb-h2{font-size:clamp(1.6rem,3vw,2.1rem)!important}
.sb-old{background:var(--card); border-radius:var(--r); padding:16px 20px; box-shadow:0 1px 0 var(--line)}
.sb-old summary{cursor:pointer; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; font-family:var(--f-display); font-size:1.2rem}
.sb-old .sb-issue{margin-top:22px}
@media (max-width:560px){.sb-item{grid-template-columns:1fr; padding:22px 18px} .sb-n{text-align:left; font-size:2.4rem}}

/* Sprachumschalter / Selector de idioma */
.langs{display:flex; align-items:center; gap:2px; font-family:var(--f-mono); font-size:.78rem; font-weight:600; letter-spacing:.06em; border:1.5px solid var(--line); border-radius:999px; padding:2px}
.langs a,.langs span{padding:5px 9px; border-radius:999px; text-decoration:none; line-height:1}
.langs a{color:var(--ink-soft)}
.langs a:hover{color:var(--ink); background:var(--paper-2)}
.langs [aria-current]{background:var(--ink); color:var(--paper)}
@media (max-width:760px){ .top .langs{order:2; margin-left:auto} nav.main{order:3} }