@import url("fonts.css");
/* ═══════════════════════════════════════════════════════════════════
   HAN · KOLOPHON — Das Zeichen als Blatt
   Editorial-Duplex: Schwarz-Ink + Zinnober-Spot + rationiertes Jade.
   Keine Karten. Keine Soft-Shadows. Haarlinien-Rules + Folios.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --page:#F1EFE9; --page-2:#E7E4DC; --page-3:#DEDACF;
  --ink:#1A1815; --ink-70:#55504A; --ink-45:#635F58;
  --rule:rgba(26,24,21,.16); --rule-strong:rgba(26,24,21,.34); --rule-hair:rgba(26,24,21,.10);
  --zinnober:#CE3B29; --zinnober-ink:#A82D1E; --zinnober-soft:rgba(206,59,41,.10);
  --jade:#1F6F5C; --jade-ink:#185848; --jade-soft:rgba(31,111,92,.10);
  --gold:#9A7B23; --blau:#2E5586;
  --brush-ink:#1A1815;   /* Tuschefarbe des Schreibpinsels (Papier) */
  --serif:"Literata",Charter,"Iowan Old Style",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --cjk:"Songti SC",STSong,"Noto Serif CJK SC","Hiragino Mincho ProN",SimSun,serif;
  --cjk-zh:"Songti SC",STSong,"Noto Serif CJK SC",SimSun,serif;
  --cjk-ja:"Hiragino Mincho ProN","YuMincho","Noto Serif CJK JP",serif;
  --cjk-ko:"Apple SD Gothic Neo","Nanum Myeongjo","Noto Serif CJK KR",serif;
  --sp:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);color:var(--ink);background:var(--page);
  font-size:17px;line-height:1.6;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.cjk{font-family:var(--cjk)}
.zh{font-family:var(--cjk-zh)} .ja{font-family:var(--cjk-ja)} .ko{font-family:var(--cjk-ko)}
.mono{font-family:var(--mono)}
::selection{background:var(--zinnober);color:var(--page)}

/* ——— Duplex-Utilities ——— */
.kicker{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-70);font-feature-settings:"tnum"}
.kicker .z{color:var(--zinnober-ink)}
.folio{font-family:var(--mono);font-weight:600;font-feature-settings:"tnum";color:var(--ink-45)}
.rule{height:1px;background:var(--rule);border:0;width:100%}
/* Der Abstand VOR einem Abschnittstrenner gehört hierher, nicht in einzelne
   style-Attribute im HTML. Vorher stand er dort 13-mal auf 30px, einmal auf 28,
   einmal auf 24 und an den übrigen Trennern gar nicht. */
.section-rule{display:flex;align-items:baseline;gap:12px;margin:32px 0 20px;padding-top:6px;
  border-top:1px solid var(--rule-strong)}
.section-rule .kicker{padding-top:8px}
.section-rule .glyph{font-family:var(--cjk);font-size:15px;color:var(--zinnober-ink);padding-top:6px}

/* ——— Layout-Gerüst ——— */
#app{display:grid;grid-template-columns:88px 1fr;min-height:100vh;max-width:1240px;margin:0 auto}
.spine{position:sticky;top:0;height:100vh;border-right:1px solid var(--rule-strong);
  display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:4px}
.spine .mast{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:24px}
.spine .seal{width:38px;height:38px;font-size:22px}
.spine .mast b{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--ink-70);writing-mode:vertical-rl;text-transform:uppercase}
.mokuji{display:flex;flex-direction:column;gap:2px;width:100%}
.mokuji button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  width:100%;padding:12px 0;border:0;background:none;cursor:pointer;color:var(--ink-45);
  font-family:var(--serif);transition:color .2s}
.mokuji button .g{font-family:var(--cjk);font-size:23px;line-height:1}
.mokuji button .n{font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.mokuji button:hover{color:var(--ink)}
.mokuji button.on{color:var(--ink)}
.mokuji button.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--zinnober)}
.spine .foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.lang-btn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-strong);background:none;color:var(--ink-70);padding:6px 8px;cursor:pointer;border-radius:0}
.lang-btn:hover{border-color:var(--ink);color:var(--ink)}

.sheet{min-width:0;padding:32px clamp(20px,4vw,56px) 120px;position:relative}

/* ——— Screens ——— */
.screen{display:none}
.screen.on{display:block;animation:pageturn .28s ease both}
@keyframes pageturn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:28px;flex-wrap:wrap}
.masthead .h{font-size:clamp(34px,5.5vw,56px);line-height:1.02;letter-spacing:-.02em;font-weight:500}
.masthead .h .fn{font-weight:400;font-style:italic;color:var(--ink-70)}
.masthead .folio-big{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--ink-45);white-space:nowrap}
.masthead .folio-big .z{color:var(--zinnober-ink)}
.lede{font-size:19px;line-height:1.5;color:var(--ink-70);max-width:60ch;margin:-14px 0 8px}
.lede em{font-style:italic;color:var(--ink)}

/* ——— HEUTE ——— */
.today-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:0 40px}
@media(max-width:820px){.today-grid{grid-template-columns:1fr}}
.today-grid .col-r{border-left:1px solid var(--rule);padding-left:40px}
@media(max-width:820px){.today-grid .col-r{border-left:0;padding-left:0}}
.goal{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.goal .big{font-family:var(--mono);font-size:46px;font-weight:600;letter-spacing:-.02em;line-height:1;font-feature-settings:"tnum"}
.goal .big .of{color:var(--ink-45);font-size:22px}
.goal .bar{flex:1;height:6px;background:var(--page-2);position:relative;top:-4px}
.goal .bar i{position:absolute;inset:0;width:var(--w,60%);background:var(--zinnober);display:block}
.specimen{display:flex;flex-wrap:wrap;margin:14px 0 4px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.specimen .cell{position:relative;width:64px;height:64px;display:grid;place-items:center;
  font-family:var(--cjk);font-size:30px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;transition:background .18s}
.specimen .cell:hover{background:var(--zinnober-soft)}
.specimen .cell .mini{position:absolute;top:3px;left:5px;font-family:var(--mono);font-size:8px;color:var(--ink-45)}
.index-list{list-style:none}
.index-row{display:flex;align-items:baseline;gap:16px;padding:16px 4px;border-bottom:1px solid var(--rule);cursor:pointer;transition:padding .18s,border-color .18s}
.index-row:hover{padding-left:12px;border-color:var(--ink)}
.index-row .num{font-family:var(--mono);font-size:12px;color:var(--zinnober-ink);width:24px;font-feature-settings:"tnum"}
.index-row .g{font-family:var(--cjk);font-size:26px;margin-left:auto;color:var(--ink)}
.index-row .t b{font-weight:500;font-size:18px;display:block}
.index-row .t span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.streak-marks{display:flex;gap:6px;align-items:center}
.streak-marks i{width:11px;height:11px;background:var(--ink);display:block}
.streak-marks i.empty{background:none;border:1px solid var(--rule-strong)}
.streak-marks i.now{background:var(--zinnober)}

/* Plate (Glyph-Tafel) */
.plate{position:relative;display:grid;place-items:center;margin:6px 0}
.plate .reg{position:absolute;inset:0;pointer-events:none}
.plate .reg line{stroke:var(--rule);stroke-width:1;stroke-dasharray:4 6}
.plate .reg .cross{stroke:var(--zinnober);stroke-width:1;opacity:.5}
.plate .writer{position:relative;z-index:1}
.plate-cap{font-style:italic;color:var(--ink-70);font-size:15px;margin-top:6px}
.plate-cap b{font-style:normal;font-family:var(--cjk);color:var(--ink)}

.btn{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 18px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;transition:all .16s;
  display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--ink);color:var(--page)}
.btn.solid{background:var(--ink);color:var(--page)}
.btn.solid:hover{background:var(--zinnober);border-color:var(--zinnober)}
.btn.z{border-color:var(--zinnober);color:var(--zinnober-ink)}
.btn.z:hover{background:var(--zinnober);color:#fff}
.btn.ghost{border-color:var(--rule-strong);color:var(--ink-70)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:none}
.btn:focus-visible{outline:2px solid var(--zinnober);outline-offset:2px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Text-Toggle (statt Pills) */
.toggle{display:inline-flex;border:1px solid var(--rule-strong)}
.toggle button{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 14px;border:0;border-right:1px solid var(--rule-strong);background:none;color:var(--ink-45);cursor:pointer}
.toggle button:last-child{border-right:0}
.toggle button.on{background:var(--ink);color:var(--page)}

/* ——— Seal ——— */
.seal{display:inline-grid;place-items:center;background:var(--zinnober);color:#FFF3EC;
  font-family:var(--cjk);box-shadow:inset 0 0 0 1.5px rgba(255,243,236,.9),inset 0 0 0 3px var(--zinnober);
  transform:rotate(-2.5deg)}

/* ——— LERNPFAD ——— */
.lesson{position:relative;padding:22px 0;border-bottom:1px solid var(--rule)}
.lesson .lh{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.lesson .lh .no{font-family:var(--mono);font-size:13px;color:var(--zinnober-ink);font-feature-settings:"tnum"}
.lesson .lh h2{font-size:26px;font-weight:500;letter-spacing:-.01em}
.lesson.locked h2{color:var(--ink-45)}
.lesson .meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-bottom:12px}
.lesson .pbar{height:3px;background:var(--page-2);margin:10px 0 14px;position:relative}
.lesson .pbar i{position:absolute;inset:0;width:var(--w);background:var(--ink);display:block}
.chapter{display:flex;align-items:center;gap:14px;padding:10px 0;cursor:pointer}
.chapter:hover .ct{color:var(--zinnober-ink)}
.chapter .cno{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);width:78px}
.chapter .ct{font-size:16px;color:var(--ink-70);transition:color .16s}
.chapter .chars{margin-left:auto;display:flex;gap:8px}
.chapter .chars .g{font-family:var(--cjk);font-size:21px;color:var(--ink)}
.chapter .chars .g.done{color:var(--zinnober)}
.chapter .chars .g.now{border-bottom:2px solid var(--ink)}
.chapter .chars .g.zu{color:var(--ink-45)}
.pathwatermark{position:absolute;right:-30px;top:80px;font-family:var(--cjk);font-size:340px;color:var(--ink);opacity:.03;pointer-events:none;z-index:0}

/* ——— ZEICHEN-DETAIL ——— */
.back-link{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);background:none;border:0;cursor:pointer;padding:6px 0;margin-bottom:10px}
.back-link:hover{color:var(--zinnober-ink)}
.detail-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:0 40px;align-items:start;margin-bottom:8px}
@media(max-width:760px){.detail-hero{grid-template-columns:1fr}}
.detail-hero .col-r{border-left:1px solid var(--rule);padding-left:32px}
@media(max-width:760px){.detail-hero .col-r{border-left:0;padding-left:0;margin-top:16px}}
.name-line{font-size:30px;font-weight:500;margin-bottom:2px}
.name-line .cjk{font-size:1.1em}
.meta-inline{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-bottom:14px}
.meta-inline .z{color:var(--zinnober-ink)}
.fnote{font-style:italic;color:var(--ink-70);font-size:15px;line-height:1.5;margin-top:8px}

/* Funktions-Marker */
.marker{display:inline-grid;place-items:center;width:16px;height:16px;font-family:var(--mono);font-size:9px;font-weight:600;color:#fff;vertical-align:-2px}
.marker.rad{background:var(--zinnober);border-radius:2px}
.marker.pho{background:var(--jade);border-radius:50%}
.keyline{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0}
.keyline span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-70)}

/* Formel (FIG.1) */
.formula{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--cjk);font-size:22px;padding:6px 0}
.formula .op{font-family:var(--serif);color:var(--ink-45);font-size:16px}
.f-tok{position:relative;display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 8px;
  border:1px solid var(--rule-strong);cursor:pointer;transition:all .15s}
.f-tok:hover{border-color:var(--ink);transform:translateY(-2px)}
.f-tok.rad{border-color:var(--zinnober);color:var(--zinnober-ink)}
.f-tok .rank{position:absolute;top:-8px;right:-8px}
.f-tok.struct{border-style:dashed;color:var(--ink-45);cursor:default}
.f-arrow{font-size:20px;color:var(--ink-45)}

/* Aussprache-Tabelle (FIG.2) */
.reading-tbl{width:100%;border-collapse:collapse;font-size:15px}
.reading-tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--rule-strong);font-weight:500}
.reading-tbl td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);line-height:1.35}
.reading-tbl tr:last-child td{border-bottom:0}
.reading-tbl .skg{font-family:var(--cjk);font-size:17px}
.common-rd{color:var(--zinnober-ink);font-weight:600}
.play{width:28px;height:28px;border:1px solid var(--rule-strong);background:none;cursor:pointer;display:inline-grid;place-items:center;transition:all .15s}
.play:hover{border-color:var(--ink)}
.play.on{background:var(--ink)}.play.on svg{fill:var(--page)}
.play svg{width:11px;height:11px;fill:var(--ink)}

/* Lautbrücke (FIG.3) */
.bridge svg{width:100%;height:auto;display:block;max-width:520px}
.bridge .arc{fill:none;stroke:var(--rule-strong);stroke-width:1.5;stroke-dasharray:3 5}
.bridge .axis{stroke:var(--rule);stroke-width:1}
.bridge .tick{stroke:var(--ink-45);stroke-width:1}
.bridge .stone{cursor:pointer}
.bridge .stone rect{fill:var(--page);stroke:var(--ink);stroke-width:1.5;transition:all .2s}
.bridge .stone.on rect{fill:var(--zinnober);stroke:var(--zinnober)}
.bridge .stone text{font-family:var(--mono);font-size:14px;font-weight:600;fill:var(--ink)}
.bridge .stone.on text{fill:#fff}
.bridge .lab{font-family:var(--mono);font-size:9px;letter-spacing:.06em;fill:var(--ink-45);text-transform:uppercase}

/* Ways index (Detail) */
.ways .index-row .g{color:var(--zinnober-ink)}

/* Vokabeln */
.vocab{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.vocab .w{font-family:var(--cjk);font-size:30px;min-width:80px}
.vocab .rel{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.vocab .rd{font-size:14px;color:var(--ink-70);margin-top:2px}
.vocab .rd .skm{font-family:var(--cjk);color:var(--ink-45)}
.vocab .play{margin-left:auto;align-self:center}

/* ——— SCHREIBEN ——— */
.write-grid{display:grid;grid-template-columns:auto 1fr;gap:0 40px;align-items:start}
@media(max-width:800px){.write-grid{grid-template-columns:1fr}}
.write-grid .col-r{border-left:1px solid var(--rule);padding-left:32px}
@media(max-width:800px){.write-grid .col-r{border-left:0;padding-left:0;margin-top:20px}}
.pad{position:relative;touch-action:none;background:var(--page);border:1px solid var(--ink)}
.pad .reg{position:absolute;inset:0;pointer-events:none}
.pad .reg line{stroke:var(--rule);stroke-width:1;stroke-dasharray:4 6}
.pad .writer{position:relative;z-index:1}
.stamp-stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
.stamp{width:108px;height:108px;font-size:56px;opacity:0}
.stamp.go{animation:stamp .7s cubic-bezier(.2,1.5,.35,1) forwards}
@keyframes stamp{0%{opacity:0;transform:rotate(-14deg) scale(2.1)}55%{opacity:1;transform:rotate(-3deg) scale(.94)}100%{opacity:1;transform:rotate(-2.5deg) scale(1)}}
.stroke-list{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.stroke-list .s{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-45);padding:4px 0;border-bottom:1px solid var(--rule-hair)}
.stroke-list .s .n{width:22px;color:inherit}
.stroke-list .s.done{color:var(--ink)}
.stroke-list .s.done .n{color:var(--zinnober-ink)}
.stroke-list .s.done::after{content:"✓";margin-left:auto;color:var(--jade-ink)}
.feedback{min-height:24px;font-style:italic;font-size:15px;margin-top:14px}
.feedback.good{color:var(--jade-ink)}
.feedback.bad{color:var(--zinnober-ink)}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}55%{transform:translateX(5px)}80%{transform:translateX(-3px)}}

/* ——— AUSSPRACHE ——— */
.sound-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media(max-width:800px){.sound-cols{grid-template-columns:1fr}}
.sound-col{padding:0 22px;border-right:1px solid var(--rule)}
.sound-col:first-child{padding-left:0}
.sound-col:last-child{border-right:0;padding-right:0}
@media(max-width:800px){.sound-col{border-right:0;border-bottom:1px solid var(--rule);padding:16px 0}}
.sound-col .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sound-col .head .g{font-family:var(--cjk);font-size:20px}
.sound-col .head .n{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.syl{font-family:var(--cjk);font-size:30px;display:flex;gap:2px;flex-wrap:wrap;align-items:baseline}
.syl .s{padding:1px 4px;transition:background .18s,color .18s}
.syl .s.common{color:var(--zinnober-ink);font-weight:600}
.syl .s.lit{background:var(--ink);color:var(--page)!important}
.tonecurve{margin:12px 0}
.tonecurve svg{width:100%;height:56px;display:block}
.tonecurve .net{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 4}
.tonecurve path{fill:none;stroke:var(--zinnober);stroke-width:2.5;stroke-linecap:round}
.local-note{font-size:13px;color:var(--ink-70);margin-top:8px;line-height:1.4}
.local-note b{font-family:var(--cjk);color:var(--ink);font-weight:400}
.duel-opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.duel-opt{font-family:var(--serif);font-size:15px;padding:10px 14px;border:1px solid var(--rule-strong);background:none;cursor:pointer;border-left:2px solid var(--rule-strong)}
.duel-opt:hover{border-color:var(--ink)}

/* ——— AUFBAU ——— */
.dissect{display:flex;align-items:center;justify-content:flex-start;gap:24px;flex-wrap:wrap;min-height:200px;padding:10px 0}
.comp{opacity:0;transform:translateY(8px);transition:all .45s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.comp.in{opacity:1;transform:none}
.comp .cw{position:relative}
.comp .cl{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-70);display:flex;align-items:center;gap:6px}
.comp.rad .cl{color:var(--zinnober-ink)}
.dossier{margin-top:14px;padding:14px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.55;display:none}
.dossier.show{display:block;animation:pageturn .3s both}
.dossier b{font-family:var(--cjk);font-weight:400}
.build-slots{display:flex;flex-direction:column;gap:2px;width:78px}
.slot{width:78px;height:60px;border:1px dashed var(--ink-45);display:grid;place-items:center;font-family:var(--cjk);font-size:32px;color:var(--ink-45);transition:all .2s}
.slot.full{border-style:solid;border-color:var(--ink);color:var(--ink)}
.slot.ok{border-color:var(--jade);color:var(--jade-ink)}
.tray{display:flex;gap:2px;flex-wrap:wrap;margin-top:14px;border-top:1px solid var(--rule);border-left:1px solid var(--rule);width:max-content;max-width:100%}
.tray button{width:52px;height:52px;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:none;font-family:var(--cjk);font-size:26px;cursor:pointer;transition:background .15s}
.tray button:hover{background:var(--zinnober-soft)}
.tray button.used{opacity:.25;pointer-events:none}
.filmstrip{display:flex;align-items:stretch;gap:0;margin-top:4px;overflow-x:auto}
.frame{flex:1;min-width:120px;padding:14px 12px;border-right:1px solid var(--rule);text-align:center;cursor:pointer}
.frame:last-child{border-right:0}
.frame .g{font-family:var(--cjk);font-size:44px;line-height:1;color:var(--ink)}
.frame.on .g{color:var(--zinnober)}
.frame .cap{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-top:8px}
.frame.on .cap{color:var(--ink)}
.evo-text{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);font-size:15px;line-height:1.55}
.evo-text b{font-family:var(--cjk);font-weight:400}

/* ——— WIEDERHOLEN ——— */
.salad-slots{display:flex;gap:2px;margin:14px 0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);width:max-content}
.salad-slots .slot{border-top:0;border-left:0;border:1px dashed var(--ink-45);border-left:1px dashed var(--ink-45)}
.flip-stage{perspective:1400px;max-width:420px}
.flip{position:relative;width:100%;height:220px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.9,.3,1);cursor:pointer}
.flip.turned{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--ink);background:var(--page);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.flip .face::before{content:"";position:absolute;top:0;right:0;width:22px;height:22px;background:var(--zinnober);clip-path:polygon(100% 0,0 0,100% 100%)}
.flip .back{transform:rotateY(180deg)}
.flip .face .w{font-family:var(--cjk);font-size:60px}
.flip .face .cue{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.srs-row{display:flex;gap:2px;margin-top:16px;border:1px solid var(--rule-strong)}
.srs-row button{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 6px;border:0;border-right:1px solid var(--rule-strong);background:none;cursor:pointer;color:var(--ink-70);border-top:2px solid transparent}
.srs-row button:last-child{border-right:0}
.srs-row button:hover{background:var(--page-2)}
.srs-row button[data-k=again]{border-top-color:var(--zinnober)}
.srs-row button[data-k=hard]{border-top-color:var(--gold)}
.srs-row button[data-k=good]{border-top-color:var(--ink-45)}
.srs-row button[data-k=easy]{border-top-color:var(--jade)}

/* ——— SAMMLUNG ——— */
.bignums{display:flex;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:24px}
.bignum{flex:1;padding:16px 18px;border-right:1px solid var(--rule)}
@media(max-width:520px){
  /* Statistik lief rechts raus (4 Spalten) → 2×2-Gitter */
  .bignums{display:grid;grid-template-columns:1fr 1fr}
  .bignum{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 14px}
  .bignum:nth-child(2n){border-right:0}
  .bignum:nth-last-child(-n+2){border-bottom:0}
  .bignum b{font-size:31px}
}
.bignum:last-child{border-right:0}
.bignum b{font-family:var(--mono);font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1;display:block;font-feature-settings:"tnum"}
.bignum span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.seal-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:12px;margin:6px 0 8px}
.seal-cell{aspect-ratio:1}
.seal-cell .seal{width:100%;height:100%;font-size:clamp(20px,4vw,28px);cursor:pointer}
.seal-cell .ghost{width:100%;height:100%;border:1px dashed var(--ink-45);display:grid;place-items:center;font-family:var(--cjk);font-size:clamp(18px,3.4vw,24px);color:var(--ink-45)}
.callout{margin-top:20px;padding:14px 0 14px 16px;border-left:2px solid var(--jade)}
.callout b{color:var(--jade-ink)}

/* ——— Mobile Masthead + Tabbar ——— */
.m-mast{display:none}
.tabbar{display:none}
@media(max-width:900px){
  #app{grid-template-columns:1fr}
  .spine{display:none}
  /* Unten muss der Platz für die feste Tab-Leiste UND die Sicherheitszone des Geräts
     freibleiben, sonst verschwindet der Schluss des Inhalts hinter der Home-Leiste. */
  .sheet{padding:calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
  .m-mast{display:flex;align-items:center;justify-content:space-between;padding:10px 0 12px;border-bottom:1px solid var(--ink);margin-bottom:20px}
  .m-mast .l{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70)}
  .m-mast .l .z{color:var(--zinnober-ink)}
  .m-mast{gap:10px}
  .m-mast .l{margin-right:auto}
  .m-mast .seal{width:30px;height:30px;font-size:17px}
  .m-mast .m-set{border:0;width:32px;height:32px;color:var(--ink-70)}
  .m-mast .m-set:hover,.m-mast .m-set:active{color:var(--ink)}
  .m-mast .m-set svg{width:19px;height:19px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--page);border-top:1px solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0;border:0;background:none;cursor:pointer;color:var(--ink-45)}
  .tabbar button .g{font-family:var(--cjk);font-size:22px}
  .tabbar button .n{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
  .tabbar button.on{color:var(--ink)}
  .tabbar button.on::before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:var(--zinnober)}
  .today-grid,.detail-hero,.write-grid{gap:24px}
  .masthead .h{font-size:32px}
  .pathwatermark{display:none}
}

/* Toast */
#toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:var(--page);font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  padding:12px 18px;opacity:0;pointer-events:none;transition:all .28s;z-index:100;max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:901px){#toast{bottom:28px}}

/* Overlay (Sprache) */
.overlay{position:fixed;inset:0;background:rgba(26,24,21,.5);display:none;place-items:center;z-index:200}
.overlay.show{display:grid;animation:pageturn .2s both}
.lang-panel{background:var(--page);border:1px solid var(--ink);padding:24px;min-width:280px;max-width:90vw}
.lang-panel h3{font-size:20px;font-weight:500;margin-bottom:4px}
.lang-panel .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-bottom:16px}
.lang-panel ul{list-style:none;max-height:min(60vh,520px);overflow-y:auto;margin-right:-8px;padding-right:8px}
.lang-panel li{padding:12px 4px;border-bottom:1px solid var(--rule);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.lang-panel li:hover{padding-left:10px;color:var(--zinnober-ink)}
.lang-panel li .code{font-family:var(--mono);font-size:11px;color:var(--ink-45)}
.lang-panel li.on .code{color:var(--zinnober)}

/* ═══════════════════════════════════════════════════════════════════
   ERWEITERUNG · Dark Mode · Merkbild · Spiele · Gamification · Settings
   ═══════════════════════════════════════════════════════════════════ */

/* ——— Dark Mode („Nachttusche") ——— */
:root[data-theme="dark"]{
  --page:#171613; --page-2:#201E1A; --page-3:#282520;
  --ink:#EDE9E0; --ink-70:#A29C90; --ink-45:#918B7D;
  --rule:rgba(237,233,224,.16); --rule-strong:rgba(237,233,224,.30); --rule-hair:rgba(237,233,224,.09);
  --zinnober:#F0553F; --zinnober-ink:#F0553F; --zinnober-soft:rgba(240,85,63,.14);
  --jade:#4FC5A8; --jade-ink:#4FC5A8; --jade-soft:rgba(79,197,168,.14);
  --gold:#C9A23E; --blau:#6E93C4;
  --brush-ink:#EDE6D4;   /* Pergament-hell — Tusche sichtbar auf dunklem Papier */
}
:root[data-theme="dark"] body{ -webkit-font-smoothing:auto; }
/* CJK-Striche auf Dunkel etwas kräftiger */
:root[data-theme="dark"] .cjk,:root[data-theme="dark"] .zh,:root[data-theme="dark"] .ja,:root[data-theme="dark"] .ko{ font-weight:500 }
:root[data-theme="dark"] .seal{ box-shadow:inset 0 0 0 1.5px rgba(23,22,19,.9), inset 0 0 0 3px var(--zinnober) }
html{ transition:none }
body,.sheet,.spine,.masthead,.karte{ transition:background-color .3s ease, color .3s ease, border-color .3s ease }

/* ——— Merkbild (Zeichen-Detail) ——— */
.mnemonic-fig{ position:relative; border:1px solid var(--rule-strong); background:var(--page-2); overflow:hidden; max-width:420px }
.mnemonic-fig img{ display:block; width:100%; height:auto; aspect-ratio:1/1; mix-blend-mode:multiply }
:root[data-theme="dark"] .mnemonic-fig img{ mix-blend-mode:screen; opacity:.92 }
.mnemonic-fig figcaption{ font-style:italic; color:var(--ink-70); font-size:14px; padding:10px 14px; border-top:1px solid var(--rule) }
.mnemonic-fig figcaption b{ font-style:normal; font-family:var(--cjk); color:var(--ink) }

/* ——— Gamification-Widget (Spine + Mobile) ——— */
.gamify{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; padding:6px 0 2px }
.gamify .lvl{ display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center; line-height:1 }
.gamify .lvl .rk-k{ font-size:15px; color:var(--ink); line-height:1 }
.gamify .lvl .rk-r{ font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45) }
.gamify .xpbar{ width:52px; height:4px; background:var(--page-2); position:relative; margin-top:1px }
.gamify .xpbar i{ position:absolute; inset:0; width:var(--w,20%); background:var(--zinnober); display:block }
.gamify .flame{ display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--zinnober-ink) }
.gamify .flame svg{ width:11px; height:11px; fill:var(--zinnober) }
/* XP-Popup */
.xp-pop{ position:fixed; z-index:120; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--zinnober-ink); pointer-events:none;
  animation:xpfloat 1.1s ease-out forwards }
@keyframes xpfloat{ 0%{opacity:0;transform:translateY(6px) scale(.9)} 25%{opacity:1} 100%{opacity:0;transform:translateY(-26px) scale(1)} }

/* Heute: Statuszeile */
.stat-strip{ display:flex; gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:6px 0 20px }
.stat-strip .s{ flex:1; padding:12px 14px; border-right:1px solid var(--rule) }
.stat-strip .s:last-child{ border-right:0 }
.stat-strip .s b{ font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1; display:block; font-feature-settings:"tnum" }
.stat-strip .s span{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45) }
.stat-strip .s .flm{ color:var(--zinnober-ink) }

/* ——— Spiele ——— */
.play-cards{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule) }
@media(max-width:640px){ .play-cards{ grid-template-columns:1fr } }
.play-card{ padding:22px 22px 24px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); cursor:pointer; transition:background .18s; text-align:left; background:none; font-family:var(--serif); color:var(--ink) }
.play-card:hover{ background:var(--zinnober-soft) }
.play-card .g{ font-family:var(--cjk); font-size:40px; line-height:1; color:var(--zinnober-ink) }
.play-card h3{ font-size:20px; font-weight:500; margin:14px 0 6px }
.play-card p{ font-size:14px; color:var(--ink-70); line-height:1.5 }
.play-card .best{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin-top:10px }

.memory-head{ display:flex; gap:22px; align-items:baseline; margin-bottom:16px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-70) }
.memory-head b{ color:var(--ink); font-size:15px; font-feature-settings:"tnum" }
.memory-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:520px }
@media(max-width:560px){ .memory-grid{ grid-template-columns:repeat(3,1fr); gap:8px } }
.mcard{ position:relative; aspect-ratio:3/4; perspective:800px; cursor:pointer }
.mcard .in{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.3,.9,.3,1) }
.mcard.up .in,.mcard.matched .in{ transform:rotateY(180deg) }
.mcard .fc{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:grid; place-items:center; border:1px solid var(--rule-strong); background:var(--page-2) }
.mcard .front{ background:var(--ink) }
.mcard .front::after{ content:"漢"; font-family:var(--cjk); font-size:26px; color:var(--page); opacity:.5 }
.mcard .back{ transform:rotateY(180deg); overflow:hidden; background:var(--page) }
.mcard .back img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply }
:root[data-theme="dark"] .mcard .back img{ mix-blend-mode:screen }
.mcard .back .gl{ font-family:var(--cjk); font-size:clamp(30px,7vw,44px); color:var(--ink) }
.mcard.matched{ animation:matchpulse .5s ease }
.mcard.matched .fc{ border-color:var(--jade) }
@keyframes matchpulse{ 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* ——— Settings-Panel (im Sprach-Overlay-Stil) ——— */
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; padding:14px 0; border-bottom:1px solid var(--rule); flex-wrap:wrap }
.set-row .seg{ margin-left:auto }
.set-row .seg button{ padding:8px 10px }
.set-row:last-child{ border-bottom:0 }
.set-row .lab{ font-size:15px }
.seg{ display:inline-flex; border:1px solid var(--rule-strong) }
.seg button{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:8px 12px; border:0; border-right:1px solid var(--rule-strong); background:none; color:var(--ink-45); cursor:pointer }
.seg button:last-child{ border-right:0 }
.seg button.on{ background:var(--ink); color:var(--page) }

/* Icon-Button (Theme/Settings) in Spine-Fuß */
.icon-btn{ width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--rule-strong);background:none;color:var(--ink-70);cursor:pointer;transition:all .16s }
.icon-btn:hover{ border-color:var(--ink);color:var(--ink) }
.icon-btn svg{ width:15px;height:15px;fill:currentColor }

/* Lange Sprachliste (22 Sprachen) scrollbar */
.lang-panel{ max-height:80vh; display:flex; flex-direction:column }
.lang-search{ width:100%; font-family:var(--serif); font-size:15px; color:var(--ink); background:var(--page);
  border:1px solid var(--rule-strong); padding:10px 12px; margin-top:10px; outline:none; transition:border-color .15s; }
.lang-search:focus{ border-color:var(--ink); }
.lang-search::placeholder{ color:var(--ink-45); }
.lang-panel ul{ overflow-y:auto; max-height:56vh; margin-top:8px }
.lang-panel li .name-native{ font-size:15px }

/* Datengetriebenes Zeichen-Detail: Formel-String + Komponenten-Chips */
.formula-str{ font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--ink-70); letter-spacing:.01em; word-break:break-word }
.comp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px }
.comp-chip{ font-family:var(--serif); font-size:13px; color:var(--ink-70); background:none; border:1px solid var(--rule-strong); padding:6px 12px; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:6px }
.comp-chip .cjk{ font-size:17px; color:var(--ink) }
.comp-chip:hover{ border-color:var(--ink); color:var(--ink) }
.comp-chip.rad{ border-left:2px solid var(--zinnober) }
.comp-chip.pho{ border-right:2px solid var(--jade) }
.srs-row button .ivl{ display:block; font-family:var(--mono); font-size:9px; color:var(--ink-45); margin-top:4px; letter-spacing:0 }

/* ═══ Meister Han — KI-Tutor (editorialer Sprech-Apparat, kein Chat-Bubble-Kitsch) ═══ */
.tutor-fab{ position:fixed; right:22px; bottom:26px; width:56px; height:56px; z-index:70;
  display:grid; place-items:center; cursor:grab; background:var(--page); touch-action:none; user-select:none;
  border:1.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  transition:box-shadow .14s ease; }
.tutor-fab.dragging{ cursor:grabbing; transition:none; box-shadow:5px 5px 0 var(--zinnober-ink); }
/* Über der mobilen Tab-Leiste schweben */
@media(max-width:900px){ .tutor-fab{ bottom:calc(env(safe-area-inset-bottom,0px) + 80px); } }
.tutor-fab .cjk{ font-size:26px; color:var(--zinnober-ink); line-height:1;
  text-shadow:inset 0 0 0 1px; }
.tutor-fab:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--zinnober-ink); }
.tutor-fab:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }

.tutor-panel{ position:fixed; right:22px; bottom:90px; z-index:71; width:min(380px, calc(100vw - 32px));
  max-height:min(70vh, 620px); display:none; flex-direction:column;
  background:var(--page); border:1.5px solid var(--ink); box-shadow:6px 6px 0 rgba(26,24,21,.16);
  animation:tutorIn .18s ease; }
.tutor-panel.show{ display:flex; }
@keyframes tutorIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.tutor-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:2px solid var(--ink); }
.tutor-head .cjk{ font-size:22px; color:var(--zinnober-ink); line-height:1; }
.tutor-head b{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); flex:1; }
.tutor-x{ border:0; background:none; color:var(--ink-45); font-size:15px; cursor:pointer; padding:4px; line-height:1; }
.tutor-x:hover{ color:var(--ink); }

.tutor-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.tmsg{ font-size:15px; line-height:1.55; max-width:88%; padding:10px 12px; white-space:pre-wrap; word-break:break-word; }
.tmsg.meister{ align-self:flex-start; background:var(--page-2); border:1px solid var(--rule); border-left:2px solid var(--zinnober); color:var(--ink); }
.tmsg.me{ align-self:flex-end; background:none; border:1px solid var(--rule-strong); color:var(--ink-70); font-style:italic; }
.tmsg.typing{ color:var(--ink-45); letter-spacing:.18em; animation:tutorPulse 1.1s ease-in-out infinite; }
@keyframes tutorPulse{ 0%,100%{ opacity:.35 } 50%{ opacity:.9 } }

.tutor-suggest{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 8px; }
.tutor-suggest button{ font-family:var(--serif); font-size:12.5px; color:var(--ink-70); background:none;
  border:1px solid var(--rule-strong); padding:6px 10px; cursor:pointer; transition:all .15s; }
.tutor-suggest button:hover{ border-color:var(--ink); color:var(--ink); }
.tutor-suggest:empty{ display:none; }

.tutor-form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--rule); }
.tutor-form input{ flex:1; font-family:var(--serif); font-size:15px; color:var(--ink); background:var(--page);
  border:1px solid var(--rule-strong); padding:10px 12px; outline:none; transition:border-color .15s; }
.tutor-form input:focus{ border-color:var(--ink); }
.tutor-form .btn.solid{ background:var(--ink); color:var(--page); border:1.5px solid var(--ink);
  padding:0 16px; font-size:17px; cursor:pointer; transition:background .15s; }
.tutor-form .btn.solid:hover{ background:var(--zinnober-ink); border-color:var(--zinnober-ink); }

:root[data-theme="dark"] .tutor-fab{ box-shadow:3px 3px 0 rgba(0,0,0,.5); }
:root[data-theme="dark"] .tutor-fab:hover{ box-shadow:4px 4px 0 var(--zinnober); }
:root[data-theme="dark"] .tutor-panel{ box-shadow:6px 6px 0 rgba(0,0,0,.45); }

@media (max-width:640px){
  /* Meister Han = near-fullscreen Chat-Sheet: fest von oben (unter Statusleiste) bis über die Tabbar.
     Kopf oben fix, Eingabe unten fix, NUR der Log scrollt → nichts läuft mehr aus dem Bild. */
  .tutor-panel{ left:0 !important; right:0 !important; width:auto !important;
    top:calc(env(safe-area-inset-top,0px) + 6px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 62px);
    max-height:none !important; border-radius:0; border-left:0; border-right:0;
    box-shadow:0 -8px 28px rgba(26,24,21,.16); }
  .tutor-panel.show{ display:flex; }
  .tutor-head{ position:sticky; top:0; background:var(--page); z-index:1; }
  .tutor-log{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .tutor-suggest{ padding:0 14px 10px; }
  .tutor-form{ padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)); }
  .tutor-fab{ right:14px; bottom:calc(env(safe-area-inset-bottom,0px) + 74px); width:46px; height:46px; opacity:.92; box-shadow:2px 2px 0 var(--zinnober-ink); }
  .tutor-fab .cjk{ font-size:21px; }
  body.tutor-open .tutor-fab{ opacity:0; pointer-events:none; }
  body.tutor-open{ overflow:hidden; }
}

/* ═══ Proportions-Score der Schreibkanzlei ═══ */
.pad-score{ display:none; align-items:baseline; gap:12px; margin:10px 0 2px; padding:8px 0 2px;
  border-top:1px solid var(--rule); animation:scoreIn .28s ease; }
.pad-score.show{ display:flex; flex-wrap:wrap; }
.pad-score .ps-glyph{ font-size:15px; color:var(--zinnober-ink); align-self:center; }
.pad-score .ps-num{ font-family:var(--mono); font-weight:600; font-size:30px; line-height:1; letter-spacing:-.01em;
  font-feature-settings:"tnum"; color:var(--ink); }
.pad-score .ps-grade{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-70); }
.pad-score .ps-hint{ font-family:var(--mono); font-size:16px; color:var(--ink-45); letter-spacing:.14em; margin-left:auto; align-self:center; }
.pad-score.s-perfect .ps-num{ color:var(--jade-ink); }
.pad-score.s-perfect .ps-grade{ color:var(--jade-ink); font-style:normal; font-weight:600; }
.pad-score.s-retry .ps-num{ color:var(--zinnober-ink); }
.pad-score.s-retry .ps-hint{ color:var(--zinnober-ink); }
@keyframes scoreIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }

/* ═══ Onboarding — Erstkontakt ═══ */
.onb-overlay{ background:rgba(20,18,16,.72); }
.onb-panel{ background:var(--page); border:1.5px solid var(--ink); box-shadow:8px 8px 0 rgba(26,24,21,.12);
  width:min(460px, calc(100vw - 28px)); max-height:min(90vh, 720px); display:flex; flex-direction:column; }
.onb-scroll{ padding:32px 32px 22px; overflow-y:auto; flex:1; }
.onb-seal{ display:inline-grid; place-items:center; width:56px; height:56px; margin-bottom:20px;
  font-size:30px; color:var(--page); background:var(--zinnober); box-shadow:inset 0 0 0 2px rgba(0,0,0,.15); }
.onb-title{ font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.12; margin:8px 0 14px; letter-spacing:-.01em; }
.onb-title .onb-sub{ display:block; font-weight:400; font-style:italic; font-size:18px; color:var(--ink-70); margin-top:4px; }
.onb-lead{ font-size:18px; line-height:1.5; color:var(--ink); margin-bottom:12px; }
.onb-body{ font-size:15.5px; line-height:1.6; color:var(--ink-70); }
.onb-ways{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:16px; }
.onb-way{ background:var(--page); padding:16px 16px; display:flex; flex-direction:column; gap:4px; }
.onb-way .cjk{ font-size:26px; color:var(--zinnober-ink); line-height:1; margin-bottom:6px; }
.onb-way b{ font-family:var(--serif); font-weight:600; font-size:16px; }
.onb-way em{ font-style:italic; font-size:13px; color:var(--ink-45); }
.onb-circles{ display:flex; gap:10px; margin-top:18px; }
.onb-circle{ flex:1; background:none; border:1.5px solid var(--rule-strong); padding:18px 8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px; transition:all .16s; }
.onb-circle .cjk{ font-size:30px; color:var(--ink); line-height:1; }
.onb-circle b{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-70); }
.onb-circle:hover{ border-color:var(--ink); }
.onb-circle.on{ border-color:var(--zinnober); border-width:1.5px; background:var(--zinnober-soft); }
.onb-circle.on .cjk{ color:var(--zinnober-ink); }
.onb-circle.on b{ color:var(--zinnober-ink); }
.onb-foot{ display:flex; align-items:center; gap:14px; padding:14px 22px; border-top:1px solid var(--rule); }
.onb-skip{ border:0; background:none; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45); cursor:pointer; }
.onb-skip:hover{ color:var(--ink); }
.onb-dots{ display:flex; gap:8px; margin:0 auto; }
.onb-dots span{ width:7px; height:7px; border:1px solid var(--ink-45); background:none; border-radius:50%; }
.onb-dots span.on{ background:var(--zinnober); border-color:var(--zinnober); }
.onb-nav{ display:flex; gap:8px; }
.onb-nav .btn{ padding:8px 16px; font-size:13px; }
:root[data-theme="dark"] .onb-panel{ box-shadow:8px 8px 0 rgba(0,0,0,.45); }
@media (max-width:520px){ .onb-scroll{ padding:24px 20px 18px; } .onb-title{ font-size:25px; } .onb-foot{ padding:12px 16px; gap:10px; } }

/* ═══ Vorlese-Buttons (HanTTS) ═══ */
.tts-btn{ display:inline-grid; place-items:center; width:26px; height:26px; padding:0; vertical-align:middle;
  border:1px solid var(--rule-strong); background:none; color:var(--ink-45); cursor:pointer; transition:all .15s; flex:0 0 auto; }
.tts-btn:hover{ border-color:var(--ink); color:var(--ink); }
.tts-btn svg{ fill:currentColor; }
.tts-btn.playing{ border-color:var(--zinnober); color:var(--zinnober-ink); animation:ttsPulse 1s ease-in-out infinite; }
@keyframes ttsPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.tts-btn.inline{ width:22px; height:22px; margin-left:8px; }
/* Kopfzeile mit Vorlese-Knopf */
.tts-head{ display:flex; align-items:center; gap:10px; }
.tts-head .tts-btn{ margin-left:auto; }

/* ═══════════ Spiele-Overlay + Montage ═══════════ */
.game-overlay{ align-items:stretch; }
.game-shell{ background:var(--page); border:1.5px solid var(--ink); box-shadow:8px 8px 0 rgba(26,24,21,.12);
  width:min(560px, calc(100vw - 24px)); max-height:min(92vh, 760px); margin:auto; display:flex; flex-direction:column; }
:root[data-theme="dark"] .game-shell{ box-shadow:8px 8px 0 rgba(0,0,0,.45); }
.game-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:2px solid var(--ink); }
.game-head .g-glyph{ font-size:22px; color:var(--zinnober-ink); }
.game-head b{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.game-head .g-score{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--ink-70); }
.game-head .g-score b{ font-size:17px; color:var(--ink); letter-spacing:0; }
.game-head .tutor-x{ margin-left:8px; }
.game-body{ padding:22px 20px 24px; overflow-y:auto; flex:1; }
.game-combo{ text-align:center; font-family:var(--mono); font-size:13px; color:var(--zinnober-ink); height:18px; margin-top:12px; letter-spacing:.06em; }

/* — Radikal oder Lautgeber — */
.sort-stage{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.sort-q{ text-align:center; }
.sort-q .big{ font-size:96px; line-height:1; }
.sort-comp{ margin-top:12px; font-size:17px; } .sort-comp .cjk{ font-size:26px; color:var(--zinnober-ink); }
.sort-name{ color:var(--ink-70); font-style:italic; }
.sort-hint{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); margin-top:6px; }
.sort-btns{ display:flex; gap:14px; width:100%; max-width:420px; }
.sort-b{ flex:1; padding:16px; border:1.5px solid var(--rule-strong); background:none; cursor:pointer; font-family:var(--serif); font-size:16px; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .14s; }
.sort-b:hover{ border-color:var(--ink); }
.sort-b.good{ border-color:var(--jade); background:var(--jade-soft); color:var(--jade-ink); }
.sort-b.bad{ border-color:var(--zinnober); background:var(--zinnober-soft); }

/* — Bedeutungs-Blitz — */
.blitz-stage{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.blitz-prompt{ text-align:center; font-size:22px; color:var(--ink); min-height:40px; }
.blitz-prompt.cjk.huge{ font-size:104px; line-height:1; }
.blitz-img img{ width:180px; height:180px; object-fit:contain; }
:root[data-theme="dark"] .blitz-img img{ mix-blend-mode:screen; }
.blitz-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:440px; }
.blitz-o{ padding:16px; border:1.5px solid var(--rule-strong); background:none; cursor:pointer; font-family:var(--serif); font-size:17px; min-height:60px; display:grid; place-items:center; transition:all .14s; }
.blitz-o .big{ font-size:34px; }
.blitz-o:hover{ border-color:var(--ink); }
.blitz-o.good{ border-color:var(--jade); background:var(--jade-soft); color:var(--jade-ink); }
.blitz-o.bad{ border-color:var(--zinnober); background:var(--zinnober-soft); }

/* — Zeichen-Schmiede — */
.forge-stage{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.forge-goal{ text-align:center; } .forge-mean{ font-size:22px; display:block; }
.forge-formula{ font-size:13px; color:var(--ink-45); letter-spacing:.02em; }
.forge-slots{ display:flex; align-items:center; gap:6px; }
.forge-slot{ width:72px; height:72px; border:1.5px dashed var(--rule-strong); display:grid; place-items:center; font-size:15px; color:var(--ink-45); }
.forge-slot.full{ border-style:solid; border-color:var(--ink); color:var(--ink); } .forge-slot .cjk{ font-size:40px; }
.forge-plus{ color:var(--ink-45); font-size:20px; }
.forge-tray{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.forge-piece{ width:76px; padding:8px; border:1px solid var(--rule-strong); background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; transition:all .14s; }
.forge-piece:hover{ border-color:var(--ink); }
.forge-piece img{ width:52px; height:52px; object-fit:contain; } :root[data-theme="dark"] .forge-piece img{ mix-blend-mode:screen; }
.forge-piece .cjk{ font-size:16px; } .forge-piece .cjk.big{ font-size:40px; }
.forge-piece.used{ opacity:.25; pointer-events:none; }
.forge-fb{ font-style:italic; min-height:20px; } .forge-fb.good{ color:var(--jade-ink); } .forge-fb.bad{ color:var(--zinnober-ink); }
.montage-cta{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; }
.montage-cta .cjk{ color:var(--zinnober-ink); }

/* — Formel-Film / Montage — */
.montage{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.mtg-stage{ position:relative; width:240px; height:240px; border:1px solid var(--rule); }
.mtg-stage::before,.mtg-stage::after{ content:""; position:absolute; background:var(--rule); }
.mtg-stage::before{ left:0; right:0; top:50%; height:1px; } .mtg-stage::after{ top:0; bottom:0; left:50%; width:1px; }
.mtg-img,.mtg-writer,.mtg-seal{ position:absolute; inset:0; display:grid; place-items:center; }
.mtg-img img{ width:100%; height:100%; object-fit:contain; transition:opacity .9s ease; } :root[data-theme="dark"] .mtg-img img{ mix-blend-mode:screen; }
.mtg-writer{ transition:opacity .6s ease; opacity:0; }
.montage.phase-img .mtg-img{ opacity:1; } .montage.phase-img .mtg-writer{ opacity:0; }
.montage.phase-draw .mtg-img{ opacity:0; } .montage.phase-draw .mtg-writer{ opacity:1; }
.mtg-seal{ font-size:150px; color:var(--zinnober-ink); opacity:0; pointer-events:none; }
.montage.phase-seal .mtg-seal{ animation:mtgSeal 1.1s ease both; }
@keyframes mtgSeal{ 0%{opacity:0;transform:scale(1.4)} 45%{opacity:.9;transform:scale(.94)} 100%{opacity:0;transform:scale(1)} }
.mtg-comps{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.mtg-c{ display:flex; flex-direction:column; align-items:center; gap:2px; opacity:.3; transition:opacity .3s, transform .3s; transform:translateY(4px); }
.mtg-c.lit{ opacity:1; transform:none; }
.mtg-c .cjk{ font-size:30px; } .mtg-c em{ font-size:11px; font-style:italic; color:var(--ink-70); }
.mtg-c.rad .cjk{ color:var(--zinnober-ink); } .mtg-c.pho .cjk{ color:var(--jade-ink); }

/* — Abschluss — */
.game-finish{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 0; }
.gf-seal{ font-size:64px; color:var(--zinnober-ink); }
.gf-score b{ font-family:var(--mono); font-size:40px; } .gf-score{ font-family:var(--mono); font-size:14px; color:var(--ink-70); }
.gf-best{ font-family:var(--mono); font-size:12px; color:var(--ink-45); letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:640px){ .play-cards{ grid-template-columns:1fr 1fr; } .blitz-prompt.cjk.huge{ font-size:80px; } .sort-q .big{ font-size:76px; } }
@media(max-width:420px){ .play-cards{ grid-template-columns:1fr; } .blitz-opts{ grid-template-columns:1fr; } }

/* ═══ Login-Gate (App nur angemeldet) ═══ */
html.gated{ overflow:hidden; }
.login-gate{ position:fixed; inset:0; z-index:300; display:none; place-items:center; background:var(--page);
  background-image:linear-gradient(var(--rule-hair) 1px,transparent 1px),linear-gradient(90deg,var(--rule-hair) 1px,transparent 1px); background-size:34px 34px; }
.login-gate.show{ display:grid; animation:pageturn .3s ease both; }
.lg-inner{ text-align:center; padding:32px; max-width:440px; display:flex; flex-direction:column; align-items:center; }
.lg-seal{ width:64px; height:64px; display:grid; place-items:center; font-size:34px; color:var(--page); background:var(--zinnober); box-shadow:inset 0 0 0 2px rgba(0,0,0,.15); margin-bottom:22px; }
.lg-brand{ font-family:var(--serif); font-weight:600; font-size:40px; letter-spacing:-.01em; line-height:1; }
.lg-tagline{ font-style:italic; color:var(--ink-70); font-size:18px; margin-top:6px; }
.lg-lede{ color:var(--ink-70); font-size:16px; line-height:1.55; margin:22px 0 24px; max-width:34ch; }
.lg-btns{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.lg-btns .btn{ padding:12px 22px; font-size:14px; }
.lg-lang{ margin-top:28px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule-strong); background:none; color:var(--ink-70); padding:6px 12px; cursor:pointer; }
.lg-lang:hover{ border-color:var(--ink); color:var(--ink); }

/* Entwurf-Hinweis für unrevidierte maschinelle Übersetzungen */

/* Skip-Link (WCAG 2.4.1) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink,#1A1815);color:var(--page,#F1EFE9);padding:10px 16px;z-index:1000;border-radius:0 0 6px 0}
.skip-link:focus{left:0;top:0}

/* ═══ Alltag 話 — Sprechen lernen ═══ */
.ev-intro{color:var(--ink-70);max-width:60ch;font-size:16px;line-height:1.55;margin:0 0 24px}
.ev-row{display:flex;align-items:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.ev-row+.ev-row{margin-top:4px}
.ev-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);min-width:70px}
.ev-langs,.ev-lvls{display:flex;gap:8px;flex-wrap:wrap}
.ev-lang,.ev-lvl{border:1px solid var(--rule-strong);background:transparent;padding:8px 16px;cursor:pointer;font-family:var(--serif);font-size:16px;color:var(--ink);border-radius:2px}
.ev-lang.on,.ev-lvl.on{background:var(--ink);color:var(--page)}
.ev-lvl.soon{opacity:.4}
.ev-topics{margin-top:22px;border-top:1px solid var(--rule)}
.ev-topic{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule);padding:18px 4px;cursor:pointer;color:var(--ink)}
.ev-topic:hover{background:var(--zinnober-soft)}
.ev-topic .ev-no{font-family:var(--mono);color:var(--zinnober-ink);font-size:13px}
.ev-topic .ev-tt{flex:1}.ev-topic .ev-tt b{display:block;font-family:var(--serif);font-size:19px;font-weight:500}
.ev-topic .ev-tt small{color:var(--ink-45);font-family:var(--mono);font-size:11px}
.ev-topic .ev-arw{color:var(--ink-45);font-size:18px}
.ev-topic.done .ev-arw{color:var(--jade-ink)}
.ev-empty{padding:40px 0;color:var(--ink-45);font-style:italic}
.lesson-tools{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.ph-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.ph-card{border-bottom:1px solid var(--rule);padding:18px 4px}
.ph-main{display:flex;flex-direction:column;gap:4px}
.ph-t{font-size:30px;line-height:1.2}
.ph-r{color:var(--ink-45);font-size:14px}
.ph-m{color:var(--ink-70);font-size:15px}
.ph-actions{display:flex;gap:10px;margin-top:12px;align-items:center}
.ph-play{width:40px;height:40px;border-radius:50%;border:1px solid var(--rule-strong);background:transparent;cursor:pointer;color:var(--ink);font-size:14px}
.ph-play.on{background:var(--zinnober);color:#fff;border-color:var(--zinnober)}
.ph-shadow{border:1px solid var(--rule-strong);background:transparent;padding:8px 14px;border-radius:20px;cursor:pointer;color:var(--ink);font-size:14px;display:inline-flex;gap:6px;align-items:center}
.ph-shadow.rec{background:var(--zinnober);color:#fff;border-color:var(--zinnober);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.ph-fb{margin-top:10px;font-size:14px;min-height:1px}
.ph-fb.good{color:var(--jade-ink)}.ph-fb.ok{color:var(--gold)}.ph-fb.bad,.ph-fb.warn{color:var(--zinnober-ink)}
.ph-fb.listening{color:var(--zinnober)}
.lesson-foot{margin-top:24px}
/* KI-Gesprächspartner */
.ev-dialog{position:fixed;right:16px;bottom:16px;width:min(400px,92vw);max-height:70vh;background:var(--page);border:1px solid var(--rule-strong);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.22);display:none;flex-direction:column;z-index:200}
.ev-dialog.show{display:flex}
.evd-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--rule);font-family:var(--serif)}
.evd-head .evd-x{margin-left:auto;background:0;border:0;cursor:pointer;font-size:16px;color:var(--ink-45)}
.evd-log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.evd-msg{padding:10px 14px;border-radius:12px;max-width:85%;font-size:15px;line-height:1.45;position:relative}
.evd-msg.me{align-self:flex-end;background:var(--ink);color:var(--page)}
.evd-msg.partner{align-self:flex-start;background:var(--page-2);border:1px solid var(--rule)}
.evd-msg.typing{opacity:.6}
.evd-say{margin-left:8px;background:0;border:0;cursor:pointer;color:var(--zinnober-ink)}
.evd-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--rule)}
.evd-form input{flex:1;border:1px solid var(--rule-strong);border-radius:20px;padding:10px 14px;font-size:15px;background:var(--page);color:var(--ink)}

/* Spine-Menü: winzige Labels unter den Glyphen (Verständlichkeit) */
.mokuji button{flex-direction:column;gap:1px}
.mokuji-lbl{font-family:var(--mono);font-size:7.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-45);line-height:1.1;max-width:52px;text-align:center;margin-top:1px}
.mokuji button.on .mokuji-lbl{color:var(--zinnober-ink)}

/* Alltag: kleiner Sprachname unter dem Buttton */
.ev-lang{flex-direction:column;gap:2px;padding:10px 16px 8px}
.ev-lang-name{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-45);line-height:1}
/* Der gewählte Knopf trägt --ink als Hintergrund, der Name muss also --page tragen.
   Eine feste helle Farbe wäre im dunklen Modus hell auf hell und damit unsichtbar. */
.ev-lang.on .ev-lang-name{color:var(--page);opacity:.78}

/* Alltag · Übungs-Quiz */
.pr-wrap{max-width:640px}
.pr-prog{font-family:var(--mono);font-size:12px;color:var(--ink-45);letter-spacing:.1em;margin-bottom:18px}
.pr-qtext{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--zinnober-ink);margin-bottom:14px}
.pr-head{margin-bottom:24px}
.pr-target{font-size:38px;line-height:1.2}
.pr-tr{color:var(--ink-45);font-size:15px;margin-top:4px}
.pr-mean{font-family:var(--serif);font-size:24px;line-height:1.3}
.pr-hear{border:1px solid var(--rule-strong);background:transparent;padding:14px 24px;border-radius:26px;cursor:pointer;color:var(--ink);font-size:16px}
.pr-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.pr-opts{grid-template-columns:1fr}}
.pr-opt{border:1px solid var(--rule-strong);background:transparent;padding:16px 16px;border-radius:4px;cursor:pointer;color:var(--ink);font-size:16px;text-align:left;transition:background .12s}
.pr-opt.cjk{font-size:22px}
.pr-opt:hover:not(:disabled){background:var(--zinnober-soft)}
.pr-opt:disabled{cursor:default}
.pr-opt.ok{background:var(--jade-soft);border-color:var(--jade-ink);color:var(--jade-ink)}
.pr-opt.bad{background:var(--zinnober-soft);border-color:var(--zinnober-ink);color:var(--zinnober-ink)}
.pr-fb{margin-top:18px;min-height:1px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pr-verdict{font-size:15px}.pr-verdict.good{color:var(--jade-ink)}.pr-verdict.bad{color:var(--zinnober-ink)}
.pr-done{text-align:center;padding:40px 0}
.pr-score{font-family:var(--cjk,serif);font-size:64px;color:var(--zinnober-ink);line-height:1}
.pr-scoretext{font-family:var(--serif);font-size:22px;margin:16px 0 28px}
.pr-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Lernpfad: Lektions-Header + Kapitel klickbar */
.lesson .lh[data-open-char]{cursor:pointer}
.lesson .lh[data-open-char]:hover h2{color:var(--zinnober-ink)}
.lesson .lh h2{transition:color .16s}
.chapter [data-open-char],.chapter{}
.chapter .chars .g{cursor:pointer;transition:color .16s,transform .12s}
.chapter .chars .g:hover{color:var(--zinnober-ink);transform:translateY(-1px)}
[data-open-char][role=button]:focus-visible{outline:2px solid var(--zinnober);outline-offset:3px}

/* ═══ Alltag · Spiele 遊 ═══ */
.gm-head{display:flex;align-items:center;gap:14px;margin:4px 0 20px}
.gm-head b{font-family:var(--serif,Literata,serif);font-size:22px;display:block;line-height:1.1}
.gm-head small{color:var(--ink-45);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.gm-back{border:1px solid var(--rule-strong);background:none;color:var(--ink-70);width:38px;height:38px;border-radius:8px;font-size:18px;cursor:pointer;flex:0 0 auto}
.gm-back:hover{border-color:var(--ink);color:var(--ink)}
.gm-menu{display:flex;flex-direction:column;gap:12px;max-width:560px}
.gm-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--page-2);cursor:pointer;text-align:left;transition:border-color .16s,transform .12s}
.gm-card:hover{border-color:var(--zinnober);transform:translateY(-2px)}
.gm-glyph{font-size:30px;color:var(--zinnober);flex:0 0 auto;width:44px;text-align:center}
.gm-txt{flex:1}.gm-txt b{font-family:var(--serif,Literata,serif);font-size:17px;display:block}
.gm-txt small{color:var(--ink-45);font-size:13px}
.gm-arw{color:var(--ink-45);font-size:18px}
.gm-bar{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--ink-45);letter-spacing:.05em}
/* Paare */
.gm-match{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px}
.gm-col{display:flex;flex-direction:column;gap:10px}
.gm-cell{border:1px solid var(--rule-strong);border-radius:10px;background:var(--page-2);padding:14px 12px;min-height:56px;cursor:pointer;transition:all .16s;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink)}
.gm-cell .cjk{font-size:22px}
.gm-cell:hover{border-color:var(--ink)}
.gm-cell.sel{border-color:var(--zinnober);background:var(--zinnober-soft)}
.gm-cell.matched{border-color:transparent;background:rgba(62,124,90,.16);color:var(--ink-45);cursor:default;opacity:.6}
.gm-cell.miss{border-color:var(--zinnober);animation:gmShake .4s}
@keyframes gmShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* Hör-Blitz */
.gm-listen{max-width:560px;display:flex;flex-direction:column;align-items:center;gap:18px}
.gm-replay{width:76px;height:76px;border-radius:50%;border:2px solid var(--zinnober);background:var(--zinnober-soft);color:var(--zinnober);font-size:28px;cursor:pointer}
.gm-replay.sm{width:40px;height:40px;font-size:16px;border-width:1px}
.gm-replay:hover{background:var(--zinnober);color:#fff}
.gm-timebar{width:100%;height:5px;background:var(--rule);border-radius:3px;overflow:hidden}
.gm-timebar i{display:block;height:100%;width:100%;background:var(--zinnober);transition:width .14s linear}
.gm-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.gm-opt{border:1px solid var(--rule-strong);border-radius:10px;background:var(--page-2);padding:14px;cursor:pointer;color:var(--ink);font-size:15px;transition:all .14s}
.gm-opt:hover:not(:disabled){border-color:var(--ink)}
.gm-opt.ok{border-color:transparent;background:rgba(62,124,90,.2);color:var(--ink)}
.gm-opt.bad{border-color:var(--zinnober);background:var(--zinnober-soft)}
/* Zeichen-Puzzle */
.gm-build{max-width:600px}
.gm-hint{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.gm-mean{font-family:var(--serif,Literata,serif);font-size:19px;flex:1}
.gm-slots{min-height:64px;display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:2px solid var(--rule-strong);margin-bottom:20px;align-items:center}
.gm-slot-empty{width:44px;height:44px;border:1px dashed var(--rule-strong);border-radius:8px}
.gm-bank{display:flex;flex-wrap:wrap;gap:8px}
.gm-tile{min-width:44px;height:52px;padding:0 10px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--page-2);font-size:26px;cursor:pointer;color:var(--ink);transition:all .12s}
.gm-tile:hover{border-color:var(--ink);transform:translateY(-2px)}
.gm-tile.used{opacity:.25;pointer-events:none}
.gm-tile.placed{background:var(--zinnober-soft);border-color:var(--zinnober)}
.gm-build-fb{margin-top:16px;font-family:var(--mono);font-size:13px;min-height:20px}
.gm-build-fb.good{color:#3E7C5A}.gm-build-fb.bad{color:var(--zinnober)}
/* Ende */
.gm-done{margin-top:24px;text-align:center;padding:24px;border-top:1px solid var(--rule)}
.gm-score{font-size:52px;color:var(--zinnober);margin-bottom:8px}
.gm-done p{font-family:var(--serif,Literata,serif);font-size:18px;margin-bottom:18px}
.gm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.gm-match{grid-template-columns:1fr 1fr;gap:8px}.gm-cell{min-height:48px;padding:10px 6px}.gm-cell .cjk{font-size:18px}.gm-opts{grid-template-columns:1fr}}

/* ═══ Zeichen-Detail-Erweiterung (char-plus) ═══ */
#cp-plate{position:relative}
.cp-ov{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:4;background:var(--page)}
.cp-ov.show{opacity:1}
.cp-ov img{max-width:96%;max-height:96%;object-fit:contain}
.cp-mnem{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;opacity:.28;z-index:0;pointer-events:none}
#cp-plate.cp-dim .writer{opacity:.9}
.cp-num{position:absolute;transform:translate(-50%,-50%);z-index:6;font-family:var(--mono);font-size:11px;font-weight:600;
  min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;color:#fff;background:var(--zinnober-ink);border-radius:9px;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.cp-cap{min-height:20px;margin-top:12px;text-align:center;font-family:var(--serif);font-size:14px;color:var(--ink-70);opacity:.85;transition:opacity .2s;line-height:1.4}
.cp-play{margin:12px auto 0;display:flex;align-items:center;gap:8px;justify-content:center}
.cp-play .cjk{color:var(--zinnober-ink);font-size:17px}
.cp-play:disabled{opacity:.5;cursor:default}
.cp-seal{position:absolute;top:8%;right:8%;z-index:7;color:var(--zinnober);font-size:40px;opacity:0;transform:scale(.4) rotate(-12deg);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,1.4,.4,1)}
.cp-seal.go{opacity:.92;transform:scale(1) rotate(-6deg)}
/* Familien */
#cp-family{margin-top:6px}
.cp-fam-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--rule)}
.cp-fam-row:last-child{border-bottom:0}
.cp-fam-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);min-width:96px;padding-top:8px;flex:0 0 auto}
.cp-fam-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.cp-fam-chip{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;padding:8px 10px;border:1px solid var(--rule-strong);background:var(--page-2);cursor:pointer;transition:all .15s;border-radius:3px}
.cp-fam-chip:hover{border-color:var(--zinnober);transform:translateY(-2px)}
.cp-fam-chip .cjk{font-size:26px;color:var(--ink);line-height:1}
.cp-fam-chip small{font-size:10px;color:var(--ink-45)}
@media(max-width:640px){ .cp-fam-lbl{min-width:100%;padding-top:0} .cp-fam-row{flex-direction:column;gap:8px} }

/* Review · Methoden-Fußzeile */
.rev-method{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--ink-45);letter-spacing:.02em}
.rev-method .marker{margin:0 2px}

/* ═══════════ LERNTAFEL — die vier Dimensionen ═══════════ */
:root{ --f-rad:#CE3B29; --f-pho:#1F6F5C; --f-komp:#C9A23E; }
:root[data-theme="dark"]{ --f-rad:#F0553F; --f-pho:#4FC5A8; --f-komp:#E0BC55; }

.lerntafel{ border:1.5px solid var(--ink); margin:24px 0 32px; }
.lt-head{ display:flex; align-items:stretch; flex-wrap:wrap; border-bottom:1.5px solid var(--ink); }
.lt-variants{ display:flex; border-right:1.5px solid var(--ink); }
.lt-var{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 12px; min-width:52px;
  border:0; border-right:1px solid var(--rule); background:none; cursor:pointer; transition:background .15s; }
.lt-var:last-child{ border-right:0; }
.lt-var .cjk{ font-size:22px; line-height:1; color:var(--ink-45); }
.lt-var em{ font-family:var(--cjk); font-size:9px; font-style:normal; color:var(--ink-45); letter-spacing:.08em; }
.lt-var:hover{ background:var(--page-2); }
.lt-var.on{ background:var(--ink); } .lt-var.on .cjk,.lt-var.on em{ color:var(--page); }
.lt-tabs{ display:flex; flex:1; min-width:0; }
.lt-tab{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 8px; min-width:0;
  border:0; border-right:1px solid var(--rule); background:none; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45); transition:all .15s; }
.lt-tab:last-child{ border-right:0; }
.lt-tab .cjk{ font-family:var(--cjk); font-size:17px; letter-spacing:0; }
.lt-tab:hover{ color:var(--ink); background:var(--page-2); }
.lt-tab.on{ color:var(--zinnober-ink); }
.lt-tab.on .cjk{ color:var(--zinnober); }
.lt-tab.on{ box-shadow:inset 0 -3px 0 var(--zinnober); }
@media(max-width:640px){ .lt-tab-l{ display:none } .lt-tab{ padding:12px 4px } .lt-tab .cjk{ font-size:21px } }

.lt-body{ display:grid; grid-template-columns:minmax(0,210px) 1fr; }
@media(max-width:760px){ .lt-body{ grid-template-columns:1fr } }
.lt-plate{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px 16px; border-right:1.5px solid var(--ink); background:var(--page-2); }
@media(max-width:760px){ .lt-plate{ border-right:0; border-bottom:1.5px solid var(--ink); padding:20px } }
.lt-glyph{ font-size:96px; line-height:1; color:var(--ink); }
.lt-name{ font-family:var(--serif); font-size:16px; color:var(--ink-70); text-align:center; }
.lt-panel{ padding:20px 22px 24px; min-width:0; }

/* Komponenten mit Farbbalken */
.lt-komps{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.lt-plus{ display:flex; align-items:center; font-size:22px; color:var(--ink-45); }
.lt-komp{ flex:1; min-width:150px; border:1px solid var(--rule-strong); display:flex; flex-direction:column; }
.ltk-bar{ height:6px; }
.lt-komp.f-rad  .ltk-bar{ background:var(--f-rad); }
.lt-komp.f-pho  .ltk-bar{ background:var(--f-pho); }
.lt-komp.f-komp .ltk-bar{ background:var(--f-komp); }
.lt-komp.f-both .ltk-bar{ background:linear-gradient(90deg,var(--f-rad) 50%,var(--f-pho) 50%); }
.ltk-main{ padding:12px 12px 10px; text-align:center; }
.ltk-glyph{ font-size:46px; line-height:1.05; background:none; border:0; padding:0; cursor:pointer; color:var(--ink); }
.ltk-glyph:hover{ color:var(--zinnober-ink); }
.ltk-cap{ font-size:13.5px; color:var(--ink-70); margin-top:4px; }
.ltk-sub{ border-top:1px solid var(--rule); }
.ltk-sub summary{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45); padding:8px 10px; cursor:pointer; list-style:none; }
.ltk-sub summary::-webkit-details-marker{ display:none }
.ltk-sub summary::before{ content:"+ "; }
.ltk-sub[open] summary::before{ content:"− "; }
.ltk-sub ul{ list-style:none; padding:2px 10px 10px; }
.ltk-sub li{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--ink-70); padding:2px 0; }
.ltk-subglyph{ font-size:18px; background:none; border:0; padding:0; cursor:pointer; color:var(--ink); }
.ltk-subglyph:hover{ color:var(--zinnober-ink); }
.ltk-formel{ font-family:var(--mono); font-size:11px; color:var(--ink-45); font-style:normal; }

.lt-formel{ font-size:13px; letter-spacing:.02em; color:var(--ink-70); margin-top:16px;
  padding:10px 12px; border:1px solid var(--rule); overflow-x:auto; white-space:nowrap; }
.lt-bruecke{ display:flex; align-items:baseline; gap:10px; margin-top:16px; padding-top:12px;
  border-top:1px solid var(--rule); }
.lt-bruecke-l{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45); }
.lt-varnote{ font-size:13.5px; font-style:italic; color:var(--ink-70); line-height:1.55; margin-top:16px;
  border-left:2px solid var(--rule-strong); padding-left:12px; max-width:62ch; }
.lt-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.lt-legend .lg{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-70);
  display:flex; align-items:center; gap:6px; }
.lt-legend .lg::before{ content:""; width:12px; height:12px; display:block; }
.lt-legend .f-rad::before{ background:var(--f-rad) } .lt-legend .f-pho::before{ background:var(--f-pho) }
.lt-legend .f-komp::before{ background:var(--f-komp) }
.lt-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.lt-actions .btn{ display:inline-flex; align-items:center; gap:8px; }
.lt-actions .cjk{ color:var(--zinnober-ink); }

/* Unterüberschriften */
.lt-sub-head{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-70);
  border-top:1px solid var(--rule-strong); padding-top:10px; margin:22px 0 12px; display:flex; align-items:baseline; gap:8px; }
.lt-sub-head:first-child{ margin-top:0; border-top:0; padding-top:0; }
.lt-sub-head .cjk{ font-size:15px; color:var(--zinnober-ink); letter-spacing:0; }

/* BENENNUNG */
.lt-kats{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.lt-kat{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule-strong); background:none; color:var(--ink-70); padding:8px 12px; cursor:pointer; transition:all .15s; }
.lt-kat:hover{ border-color:var(--ink); color:var(--ink); }
.lt-kat-amp{ color:var(--ink-45); }
.lt-herl-row{ display:grid; grid-template-columns:1fr minmax(0,190px); gap:18px; align-items:start; }
@media(max-width:640px){ .lt-herl-row{ grid-template-columns:1fr } }
.lt-herleitung{ font-size:16px; line-height:1.55; color:var(--ink); }
/* Die selbst gewählte Herleitung steht voran und wird als solche ausgewiesen;
   die Herleitung des Buches bleibt aufklappbar darunter erhalten. */
.lt-herleitung.eigen{ border-left:2px solid var(--zinnober); padding-left:12px; }
.lt-herl-quelle{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-45); margin-top:6px; }
.lt-herl-buch{ margin-top:12px; }
.lt-herl-buch summary{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-45); cursor:pointer; list-style:none; }
.lt-herl-buch summary::marker{ content:"" }
.lt-herl-buch summary:hover{ color:var(--ink); }
.lt-herleitung.offen{ color:var(--ink-45); font-style:italic; }
.fc.back img{ width:100%; height:auto; aspect-ratio:1/1; display:block }
.lt-bild img{ width:100%; height:auto; aspect-ratio:1/1; border:1px solid var(--rule); }
:root[data-theme="dark"] .lt-bild img{ mix-blend-mode:screen; opacity:.92 }
.lt-eigene{ display:flex; flex-direction:column; gap:8px; }
.lt-eig{ text-align:left; font-family:var(--serif); font-size:14.5px; line-height:1.45; color:var(--ink-70);
  border:1px solid var(--rule); background:none; padding:10px 12px; cursor:pointer; transition:all .15s; }
.lt-eig:hover{ border-color:var(--ink); color:var(--ink); }
.lt-eig.on{ border-color:var(--zinnober); border-left-width:3px; background:var(--zinnober-soft); color:var(--ink); }
.lt-erl-p{ display:none; font-size:15px; line-height:1.6; color:var(--ink-70); margin-bottom:10px;
  padding-left:12px; border-left:2px solid var(--rule); }
.lt-erl-p.on{ display:block; animation:pageturn .25s ease both; }
.lt-weiter{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--rule-strong); background:none; color:var(--ink-70); padding:8px 14px; cursor:pointer; }
.lt-weiter:hover{ border-color:var(--ink); color:var(--ink); }
.lt-fn{ font-size:12.5px; color:var(--ink-45); line-height:1.5; margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); }
.lt-fn b{ color:var(--ink-70); }

/* LAUT + WORT Tabellen */
.lt-tbl{ width:100%; border-collapse:collapse; margin-bottom:6px; }
.lt-tbl th{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45);
  text-align:left; padding:6px 8px; border-bottom:1px solid var(--rule); font-weight:500; }
.lt-tbl th.cjk{ font-family:var(--cjk); font-size:15px; color:var(--zinnober-ink); letter-spacing:0; }
.lt-tbl td{ padding:8px; border-bottom:1px solid var(--rule); vertical-align:top; font-size:14.5px; }
.lt-sk{ font-size:19px; color:var(--zinnober-ink); width:34px; }
.lt-common{ font-weight:600; }
.lt-local{ color:var(--ink-70); font-size:13.5px; }
.lt-muster{ font-family:var(--mono); font-size:12px; color:var(--ink-45); }
.lt-say{ border:1px solid var(--rule-strong); background:none; color:var(--ink-45); cursor:pointer;
  width:26px; height:26px; display:grid; place-items:center; font-size:10px; }
.lt-say:hover{ border-color:var(--ink); color:var(--ink); }
.lt-lb{ font-family:var(--mono); font-size:12px; color:var(--jade-ink); letter-spacing:.04em; }
.lt-lg-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.lt-lg-head .ltk-glyph{ font-size:32px; }
.lt-vg{ display:flex; flex-direction:column; gap:1px; }
.lt-vg .ltk-glyph{ font-size:26px; text-align:left; }
.lt-vg em{ font-size:12px; color:var(--ink-70); font-style:italic; }

/* Trittsteine über den Bach */
.lt-bach{ display:flex; align-items:center; gap:12px; margin:16px 0 6px; padding:16px 14px;
  border:1px solid var(--rule); background:var(--page-2);
  background-image:repeating-linear-gradient(90deg, transparent 0 12px, var(--rule-hair) 12px 13px); }
.lt-ufer{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--zinnober-ink); }
.lt-stein{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink);
  width:44px; height:34px; display:grid; place-items:center; background:var(--page); border:1px solid var(--rule-strong); border-radius:40% 40% 34% 34%; }

/* WORT */
.lt-vok{ margin-bottom:20px; }
.lt-vok-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.lt-vok-head .cjk{ font-size:30px; }
.lt-woertlich{ font-size:13px; color:var(--jade-ink); font-style:italic; }
.lt-vok-mean{ font-size:14.5px; color:var(--ink-70); margin:2px 0 8px; }
.lt-vok-tbl td{ width:33.33%; }
.lt-vok-s{ font-size:22px; } .lt-vok-l{ font-size:12.5px; color:var(--ink-45); font-family:var(--mono); margin-top:2px; }
.lt-vok-b{ list-style:none; margin-top:6px; }
.lt-vok-b li{ font-size:13px; color:var(--ink-70); line-height:1.45; }

/* ═══ STECKBRIEF ═══ */
.sb-overlay{ z-index:210; }
.sb-panel{ background:var(--page); border:1.5px solid var(--ink); box-shadow:8px 8px 0 rgba(26,24,21,.14);
  width:min(620px, calc(100vw - 24px)); max-height:min(90vh,760px); display:flex; flex-direction:column; margin:auto; }
:root[data-theme="dark"] .sb-panel{ box-shadow:8px 8px 0 rgba(0,0,0,.45); }
.sb-head{ display:flex; align-items:center; padding:12px 16px; border-bottom:2px solid var(--ink); }
.sb-kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink); flex:1; }
.sb-sub{ font-style:italic; color:var(--ink-70); font-size:14px; padding:10px 16px 0; }
.sb-body{ display:grid; grid-template-columns:minmax(0,120px) 1fr; gap:16px; padding:14px 16px 20px; overflow-y:auto; }
@media(max-width:560px){ .sb-body{ grid-template-columns:1fr } }
.sb-glyph{ font-size:82px; line-height:1; text-align:center; color:var(--ink); }
.sb-tbl{ width:100%; border-collapse:collapse; }
.sb-tbl th{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45);
  text-align:left; padding:8px 10px 8px 0; vertical-align:top; width:34%; font-weight:500; border-bottom:1px solid var(--rule); }
.sb-tbl td{ padding:8px 0; font-size:14.5px; color:var(--ink); border-bottom:1px solid var(--rule); }
.sb-note{ font-size:12.5px; color:var(--ink-45); line-height:1.5; margin-top:4px; }
.sb-teile{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; align-items:baseline; }
.sb-link{ font-size:19px; background:none; border:0; padding:0 2px; cursor:pointer; color:var(--zinnober-ink); }
.sb-link:hover{ text-decoration:underline; }
.sb-teile em, .sb-auf-v em{ font-size:12.5px; color:var(--ink-70); font-style:italic; margin-right:8px; }
.sb-auf-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.sb-auf-l{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); min-width:82px; padding-top:4px; }
.sb-auf-v{ flex:1; min-width:180px; display:flex; flex-wrap:wrap; gap:2px 4px; align-items:baseline; }
.sb-info{ width:min(460px, calc(100vw - 24px)); }
.sb-info-t{ padding:16px; font-size:15px; line-height:1.6; color:var(--ink-70); }

/* ═══════════ 我道 MEIN WEG — Monate, Wochen, Merksätze ═══════════
   Ersetzt den alten Lernpfad. Keine Karten, nur Haarlinien und Folios.
   Zinnober markiert den eigenen Stand, Jade den Stand der App. Zeichen, die noch
   vorbereitet werden, bleiben sichtbar, treten aber zurück. */
.weg{ padding-bottom:28px }
.weg-lede{ margin:0 0 24px }
.weg-lade{ font-style:italic; color:var(--ink-45); padding:24px 0 }
.weg-mast{ color:var(--zinnober-ink); margin-right:2px }

/* ——— Die beiden Marken als Kopfzeile ——— */
.weg-stand{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
  padding:16px 0 18px; margin-bottom:18px }
.weg-stand .ws-col+.ws-col{ border-left:1px solid var(--rule); padding-left:28px }
.ws-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45); display:flex; align-items:center; gap:8px }
.ws-v{ font-size:15px; color:var(--ink-70); margin:6px 0 10px }
.ws-v b{ font-family:var(--mono); font-size:27px; font-weight:600; color:var(--ink);
  font-feature-settings:"tnum"; margin-right:6px; line-height:1 }
.ws-bar{ height:3px; background:var(--page-2); position:relative }
.ws-bar i{ position:absolute; inset:0 auto 0 0; width:var(--w); display:block }
.ws-bar.mine i{ background:var(--zinnober) }
.ws-bar.app i{ background:var(--jade) }
.weg-stand .ws-col:first-child .ws-l .wm-hand{ color:var(--zinnober-ink) }
.weg-stand .ws-col+.ws-col .ws-l .wm-hand{ color:var(--jade-ink) }

/* ——— Legende der drei Zustände ——— */
.weg-legende{ display:flex; flex-wrap:wrap; gap:6px 20px; margin-bottom:32px }
.weg-legende .wl{ display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45) }
.wl-p{ width:9px; height:9px; display:block; flex:none }
.wl-p.done{ background:var(--zinnober) }
.wl-p.open{ background:var(--ink) }
.wl-p.soon{ background:none; border:1px dotted var(--rule-strong) }

/* ——— Monat ——— */
.weg-monat{ margin-bottom:32px }
.weg-monat .wm-head{ border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:4px }
.weg-monat.ruht .wm-head{ border-bottom-color:var(--rule-strong) }
.wm-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--zinnober-ink); display:block; margin-bottom:6px }
.weg-monat.ruht .wm-kicker{ color:var(--ink-45) }
.wm-title{ font-size:27px; font-weight:500; letter-spacing:-.01em; line-height:1.22; max-width:34ch }
.weg-monat.ruht .wm-title{ color:var(--ink-45) }
.wm-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-45); margin-top:8px }
.wm-bar{ height:2px; background:var(--page-2); position:relative; margin-top:10px }
.wm-bar i{ position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--ink); display:block }

/* ——— Woche ——— */
.weg-zeile{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:baseline; gap:8px 16px;
  padding:14px 0; border-bottom:1px solid var(--rule) }
.weg-zeile:last-child{ border-bottom:0 }
.ww-no{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-45) }
.weg-zeile.fertig .ww-no{ color:var(--zinnober-ink) }
.ww-mitte{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; min-width:0 }
.ww-satz{ font-family:var(--serif); font-size:16.5px; line-height:1.4; color:var(--ink-70);
  background:none; border:0; padding:0; text-align:left; cursor:pointer; transition:color .16s }
.ww-satz:hover{ color:var(--zinnober-ink) }
.ww-satz.plain{ cursor:default; color:var(--ink-45) }
.ww-soon{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45) }
.ww-chars{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; justify-content:flex-end }
.ww-g{ font-family:var(--cjk); font-size:23px; line-height:1.1; color:var(--ink);
  background:none; border:0; padding:0 1px; cursor:pointer; transition:color .16s, transform .12s }
.ww-g:hover{ color:var(--zinnober-ink); transform:translateY(-1px) }
.ww-g.done{ color:var(--zinnober) }
.ww-g.komp{ font-size:21px; color:var(--jade-ink) }
.ww-g.soon{ color:var(--ink-45); opacity:.72; cursor:default; transform:none;
  border-bottom:1px dotted var(--rule-strong) }
.ww-g.soon:hover{ color:var(--ink-45); transform:none }
.ww-komps{ display:inline-flex; align-items:baseline; gap:8px; padding-left:12px; margin-left:4px;
  border-left:1px solid var(--rule) }
.ww-komps-l{ font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-45) }

/* ——— Die Marken im Textfluss ——— */
.weg-marke{ display:flex; align-items:center; gap:10px; padding:12px 0 10px }
.weg-marke::after{ content:""; flex:1; height:1px; background:var(--rule-strong) }
.wm-hand{ font-size:15px; line-height:1 }
.wm-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap }
.wm-h{ font-size:13px; font-style:italic; color:var(--ink-45) }
.weg-marke.mine .wm-hand, .weg-marke.mine .wm-l{ color:var(--zinnober-ink) }
.weg-marke.app .wm-hand, .weg-marke.app .wm-l{ color:var(--jade-ink) }

/* ——— Fußnote zum Fantasiewort ——— */
.weg-fn{ font-size:13.5px; line-height:1.6; font-style:italic; color:var(--ink-45);
  border-top:1px solid var(--rule); padding-top:14px; margin-top:6px; max-width:62ch }

@media(max-width:720px){
  .weg-stand{ grid-template-columns:1fr; gap:16px }
  .weg-stand .ws-col+.ws-col{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:16px }
  .weg-zeile{ grid-template-columns:1fr; gap:6px }
  .ww-chars{ justify-content:flex-start }
  .wm-title{ font-size:23px }
  .weg-marke .wm-h{ display:none }
}

/* Die Einführung steht vor dem ersten Monat und trägt weder Nummer noch Merksatz. */
.weg-monat.einleitung{ border-top:2px solid var(--ink); margin-bottom:32px }
.weg-monat.einleitung .weg-zeile{ border-bottom:0; padding:16px 0 4px }
.weg-monat.einleitung .ww-no{ color:var(--zinnober-ink); letter-spacing:.22em }

/* ═══════════════════════════════════════════════════════════════════
   KARTEIKARTEN · 練習 Übung im Bereich Heute
   Vorlage: Dr. Schleicher, PDF vom 11.08.2026, Seite 16.
   Keine Kästen mit Schatten: das Zeichen steht in einem Haarlinien-Feld,
   die Antworten sind Zeilen mit einer Marke links. Zinnober markiert das
   gefragte Feld, Jade die richtige Antwort. Alle Farben über Variablen,
   damit der Dark Mode ohne Sonderregeln mitgeht.
   ═══════════════════════════════════════════════════════════════════ */
#kartenBlock{ margin-top:32px; }
.kt-lede{ font-size:15.5px; font-style:italic; color:var(--ink-70); margin:-8px 0 16px; }
.kt-empty{ font-size:14.5px; font-style:italic; color:var(--ink-45); }

/* Ruhezustand: die Zeichen der Runde und der Anstoß */
.kt-idle{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; }
.kt-vorschau{ display:flex; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.kt-vz{ font-size:26px; line-height:1; color:var(--ink); width:48px; height:56px; display:grid; place-items:center;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.kt-idle-r .btn-row{ margin-top:10px; }
.kt-note{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45); }

/* Die Karte selbst */
.kt-card{ display:grid; grid-template-columns:minmax(0,140px) 1fr; gap:22px; align-items:start; }
@media(max-width:640px){ .kt-card{ grid-template-columns:1fr; gap:16px }
  /* Untereinander bleibt das Zeichenfeld ein Täfelchen, kein Banner über die ganze Breite */
  .kt-face{ max-width:150px } }
.kt-face{ border:1px solid var(--rule-strong); padding:16px 10px; text-align:center; background:var(--page); }
.kt-glyph{ display:block; font-size:clamp(52px,9vw,68px); line-height:1.05; color:var(--ink); }
.kt-word{ display:block; font-size:24px; margin-top:10px; padding-top:10px; border-top:1px solid var(--rule); color:var(--ink); }

.kt-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); }
.kt-feld{ color:var(--zinnober-ink); }
.kt-bar{ height:2px; background:var(--rule); margin:10px 0 16px; }
.kt-bar i{ display:block; height:2px; width:var(--w,0%); background:var(--ink); transition:width .3s ease; }
.kt-q{ font-size:18px; line-height:1.45; margin-bottom:14px; }
/* Sprachkreis-Marke unter der Frage: Zeichen in Zinnober, Name als Kicker */
.kt-kreis{ display:flex; align-items:baseline; gap:8px; margin:-6px 0 14px; }
.kt-kreis .cjk{ font-size:19px; line-height:1; color:var(--zinnober-ink); }
.kt-kreis span+span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-70); }

/* Vier Antworten */
.kt-opts{ display:flex; flex-direction:column; gap:8px; }
.kt-opt{ display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
  font-family:var(--serif); font-size:15.5px; line-height:1.4; color:var(--ink); background:none;
  border:1px solid var(--rule); border-left:3px solid var(--rule); padding:10px 14px; cursor:pointer;
  transition:border-color .15s, background-color .15s; }
.kt-opt:hover:not(:disabled){ border-color:var(--rule-strong); border-left-color:var(--ink); }
.kt-opt:focus-visible{ outline:2px solid var(--zinnober); outline-offset:2px; }
.kt-opt:disabled{ cursor:default; }
.kt-nr{ font-size:10px; color:var(--ink-45); letter-spacing:.06em; min-width:9px; }
.kt-og{ font-size:25px; line-height:1; color:var(--ink); }
.kt-ol{ flex:1; min-width:0; }
.kt-ol.mono{ font-family:var(--mono); font-size:14px; letter-spacing:.02em; }
.kt-opt.gut{ border-color:var(--jade); border-left-color:var(--jade); background:var(--jade-soft); }
.kt-opt.schlecht{ border-color:var(--zinnober); border-left-color:var(--zinnober); background:var(--zinnober-soft); }
.kt-opt.blass{ opacity:.45; }
.kt-fb{ min-height:24px; font-style:italic; font-size:15px; margin-top:14px; }
.kt-fb.gut{ color:var(--jade-ink); }
.kt-fb.schlecht{ color:var(--zinnober-ink); }

/* Bilanz am Ende der Runde */
.kt-score{ font-size:22px; line-height:1.35; color:var(--ink); }
.kt-recap{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
  border-top:1px solid var(--rule); padding-top:12px; }
.kt-recap-b{ display:flex; align-items:baseline; gap:8px; background:none; border:1px solid var(--rule);
  padding:8px 12px; cursor:pointer; color:var(--ink-70); transition:border-color .15s, color .15s; }
.kt-recap-b:hover{ border-color:var(--ink); color:var(--ink); }
.kt-recap-b .cjk{ font-size:23px; line-height:1; color:var(--ink); }
.kt-recap-b .mono{ font-size:11px; letter-spacing:.06em; }
.kt-recap li.voll .kt-recap-b{ border-color:var(--jade); }
.kt-recap li.voll .kt-recap-b .mono{ color:var(--jade-ink); }

/* ═══════════ 遊戲 Spiele · Han-Namen, dritte Kategorie, zwei Schmied-Varianten ═══════════
   Nach dem Feedback von Dr. Schleicher vom 11.08.2026, Seiten 17 bis 19. Farben kommen
   ausschließlich aus den Variablen --f-rad (Radikal), --f-pho (Lautgeber) und --f-komp
   (einfache Komponente), die schon die Lerntafel benutzt. */

/* — Han-Name in der Kopfzeile des Spiel-Overlays — */
.game-head .g-han{ font-size:15px; color:var(--ink-70); letter-spacing:.06em; }
.game-head b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* — Han-Name auf den Spielkarten — */
.play-card .pc-han{ font-family:var(--cjk); font-size:15px; letter-spacing:.1em; color:var(--ink-45); margin-top:12px }
.play-card h3{ margin-top:2px }

/* — Komponentenquiz: drei Antworten mit Farbbalken statt Buchstabenmarke — */
.sort-btns.three{ flex-wrap:wrap; gap:10px }
.sort-btns.three .sort-b{ flex:1 1 100%; justify-content:flex-start; gap:12px; padding:14px 16px; position:relative }
@media(min-width:520px){ .sort-btns.three .sort-b{ flex:1 1 0 } }
.sort-b .sb-bar{ width:4px; align-self:stretch; min-height:20px; background:var(--rule-strong); flex:0 0 auto }
.sort-b.f-rad .sb-bar{ background:var(--f-rad) }
.sort-b.f-pho .sb-bar{ background:var(--f-pho) }
.sort-b.f-komp .sb-bar{ background:var(--f-komp) }
.sort-b[disabled]{ cursor:default }
.sort-note{ font-size:14px; line-height:1.5; font-style:italic; color:var(--ink-70); text-align:center;
  max-width:44ch; opacity:0; transition:opacity .2s; border-top:1px solid var(--rule); padding-top:10px }
.sort-note.show{ opacity:1 }

/* — Zeichenschmied: Variantenwahl und verborgene Formel — */
.forge-seg{ align-self:center }
.forge-skel{ align-self:stretch; width:100%; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:6px 8px; font-size:15px; line-height:1.6; }
.forge-skel .fs-op{ color:var(--ink-45); font-family:var(--cjk) }
.forge-skel .fs-goal{ font-size:26px; color:var(--zinnober-ink) }
.forge-slot.mini{ width:38px; height:38px; font-size:13px }
.forge-slot.mini .cjk{ font-size:24px }

/* — Bild-Memory: Paarungswahl und Karten mit Benennung — */
.mem-bar{ flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px }
.mem-paarung{ display:flex; align-items:center; gap:10px }
.mem-lab{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45) }
.mem-stats{ display:flex; gap:22px; margin-left:auto }
.mcard .back .nm{ font-family:var(--serif); font-size:clamp(13px,3.2vw,16px); line-height:1.3; text-align:center;
  padding:6px; color:var(--ink); hyphens:auto }

/* — Formel-Film: einfache Komponenten bleiben in Tuschefarbe, nur Radikal und Lautgeber
     tragen ihre Farbe. So bleibt die Bühne ruhig. — */
.mtg-c.komp .cjk{ color:var(--ink) }

/* Die Antwort- und Bausteinknöpfe erbten bisher die Systemfarbe des Browsers und wurden im
   dunklen Modus schwarz auf schwarz. Sie tragen jetzt die Tuschefarbe. */
.sort-b, .blitz-o, .forge-piece{ color:var(--ink) }

/* Auf schmalen Geräten rückt die Kopfzeile des Spiels enger zusammen, damit der Han-Name
   und der deutsche Titel nebeneinander Platz finden. */
.game-head .g-han{ white-space:nowrap }
@media(max-width:480px){
  .game-head{ gap:8px; padding:10px 12px }
  .game-head .g-glyph{ font-size:19px }
  .game-head .g-han{ font-size:13px }
  .game-head b{ font-size:10.5px; letter-spacing:.08em }
  .game-head .g-score{ font-size:12px }
  .mem-bar{ gap:10px 14px }
  .mem-stats{ gap:16px }
}

/* Glyphen ohne Ziel: sichtbar, aber ohne Klick-Versprechen */
.ltk-glyph.tot, .ltk-subglyph.tot, .sb-link.tot{ color:var(--ink-45); cursor:default; display:inline-block; }
.ltk-glyph.tot{ font-size:46px; line-height:1.05; }
.ltk-subglyph.tot{ font-size:18px; }
.sb-link.tot{ font-size:19px; padding:0 2px; }

.screen > .section-rule:first-child{ margin-top:0 }

/* ————— Abo 契 ————— */
.abo-stand{ border:1px solid var(--rule-strong); padding:20px 24px; margin-top:20px }
.abo-stand.an{ border-left:2px solid var(--jade) }
.abo-stand-l{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45) }
.abo-stand-w{ font-size:26px; font-weight:500; letter-spacing:-.01em; margin-top:4px }
.abo-stand-p{ font-size:15px; color:var(--ink-70); margin-top:8px; max-width:56ch }
.abo-stand .btn{ margin-top:16px }
.abo-takt{ margin-top:20px }
.abo-tafel{ width:100%; border-collapse:collapse; margin-top:20px; min-width:520px }
.abo-tafel th,.abo-tafel td{ border-bottom:1px solid var(--rule); padding:16px 12px;
  text-align:left; vertical-align:top }
.abo-tafel tr:first-child th{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-45); font-weight:500; border-bottom:1px solid var(--ink) }
.abo-zeile-k{ width:34% }
.abo-geschw{ font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; display:block }
.abo-zeile-k em{ font-style:normal; font-size:13px; color:var(--ink-70); display:block; margin-top:4px }
.abo-preis{ font-size:20px; font-weight:500; font-feature-settings:"tnum" }
.abo-takt-l{ font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-45); margin-top:2px }
.abo-tafel .btn{ margin-top:12px }
.abo-jetzt{ background:var(--page-2) }
.abo-marke{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--jade-ink); margin-top:12px }
.abo-fein{ font-size:13px; color:var(--ink-70); margin-top:16px; max-width:64ch; line-height:1.55 }
.abo-leer{ font-style:italic; color:var(--ink-45); padding:24px 0 }
.abo-rechnungen{ margin-top:20px }
.abo-betrag{ font-feature-settings:"tnum"; text-align:right }
@media(max-width:600px){ .abo-tafel{ min-width:460px } }

/* ————— Konto-Menü ————— */
.acct-menu{ position:fixed; z-index:80; background:var(--page); border:1px solid var(--ink);
  min-width:180px; box-shadow:none }
.acct-wer{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45); padding:12px 16px 8px; border-bottom:1px solid var(--rule) }
.acct-p{ display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font-family:var(--serif); font-size:15px; color:var(--ink); padding:12px 16px;
  border-bottom:1px solid var(--rule-hair) }
.acct-p:last-child{ border-bottom:0 }
.acct-p:hover{ background:var(--page-2); color:var(--zinnober-ink) }
.acct-p:focus-visible{ outline:2px solid var(--zinnober); outline-offset:-2px }

/* ══════════════════════════════════════════════════════════════════
   Die vier Spiele aus der Vorlage vom 11.08.2026
   Puzzle · Scrabble · Lautbrücken · Packesel
   Gleiche Sprache wie der Rest: Haarlinien, Zinnober als Akzent,
   keine Karten, keine weichen Schatten.
   ══════════════════════════════════════════════════════════════════ */
.sp-wahl{ display:flex; gap:0; border:1px solid var(--rule-strong); width:max-content; margin-bottom:18px }
.sp-wahl button{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px; border:0; border-right:1px solid var(--rule-strong); background:none;
  color:var(--ink-45); cursor:pointer; transition:background .15s }
.sp-wahl button:last-child{ border-right:0 }
.sp-wahl button:hover{ color:var(--ink) }
.sp-wahl button.on{ background:var(--ink); color:var(--page) }
.sp-auftrag{ font-size:16px; color:var(--ink-70); line-height:1.5; margin:0 0 18px; max-width:56ch }
.sp-leer{ font-style:italic; color:var(--ink-45); padding:24px 0 }
.sp-fertig{ text-align:center; padding:26px 0 8px; border-top:1px solid var(--rule); margin-top:22px }
.sp-fertig-g{ font-size:44px; line-height:1; color:var(--zinnober) }
.sp-fertig-t{ font-size:19px; margin:10px 0 4px }
.sp-fertig-p{ font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:16px }

/* ——— 圖片版 Puzzle ——— */
.puz-brett{ display:grid; gap:2px; width:min(340px,78vw); aspect-ratio:1;
  border:1.5px solid var(--ink); background-size:cover; background-position:center;
  margin:0 auto 22px; padding:2px }
.puz-brett.mit-bild{ box-shadow:inset 0 0 0 100vmax rgba(241,239,233,.62) }
.puz-brett.fertig{ box-shadow:none; transition:box-shadow .5s }
.puz-feld{ border:1px dashed var(--rule-strong); display:grid; place-items:center;
  background-size:cover; min-height:0 }
.puz-feld.voll{ border-style:solid; border-color:var(--ink) }
.puz-g{ font-family:var(--cjk); font-size:26px; line-height:1; color:var(--ink);
  text-shadow:0 0 4px var(--page), 0 0 8px var(--page) }
.puz-teile{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.puz-teil{ width:64px; height:64px; border:1px solid var(--rule-strong); background:none;
  display:grid; place-items:center; cursor:pointer; background-size:cover; transition:border-color .15s }
.puz-teil:hover{ border-color:var(--ink) }
.puz-teil.gesetzt{ opacity:.25; cursor:default }
.puz-teil.falsch{ border-color:var(--zinnober); animation:sp-zittern .34s }
.puz-loesung{ margin:16px 0 4px }
.puz-loesung-g{ font-family:var(--cjk); font-size:52px; line-height:1 }
.puz-loesung-t{ font-size:15px; color:var(--ink-70); margin-top:4px }
@keyframes sp-zittern{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ——— 單語網 Scrabble ——— */
.scr-kette{ display:flex; flex-direction:column; align-items:center; gap:14px }
.scr-reihe{ display:flex; gap:6px }
.scr-feld{ width:52px; height:52px; border:1px solid var(--rule-strong); display:grid;
  place-items:center; font-family:var(--cjk); font-size:30px; color:var(--rule-strong) }
.scr-feld.voll{ border-color:var(--ink); color:var(--ink) }
.scr-vorrat{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:420px }
.scr-stein{ width:44px; height:44px; border:1px solid var(--rule); background:none;
  font-family:var(--cjk); font-size:24px; color:var(--ink); cursor:pointer; transition:all .15s }
.scr-stein:hover{ border-color:var(--ink); background:var(--page-2) }
.scr-stein.weg{ opacity:.2; cursor:default }
.scr-stein.falsch{ border-color:var(--zinnober); animation:sp-zittern .34s }
.scr-treffer{ display:flex; align-items:baseline; gap:12px; justify-content:center;
  border-top:1px solid var(--rule); padding-top:10px; margin-top:4px }
.scr-treffer-w{ font-family:var(--cjk); font-size:26px; color:var(--zinnober-ink) }
.scr-treffer-b{ font-size:14px; color:var(--ink-70) }
.scr-anker{ display:flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45) }
.scr-anker-g{ font-family:var(--cjk); font-size:22px; color:var(--zinnober-ink) }
.scr-stand{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-45); text-align:center; margin-top:14px }

/* ——— 漢江之踏石 Lautbrücken ——— */
.lb-fluss{ display:flex; gap:16px; justify-content:center; align-items:flex-end;
  padding:22px 0 26px; border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,transparent 55%,var(--jade-soft) 55%) }
.lb-stein{ min-width:76px; padding:10px 8px; border:1.5px solid var(--rule-strong);
  background:var(--page-2); text-align:center }
.lb-stein:nth-child(even){ margin-bottom:14px }
.lb-stein.leer{ min-height:52px; font-family:var(--cjk); font-size:28px }
.lb-stein.voll{ border-color:var(--jade); font-size:28px; line-height:1.3 }
.lb-kreis{ display:block; font-family:var(--cjk); font-size:15px; color:var(--zinnober-ink) }
.lb-lesung{ display:block; font-family:var(--mono); font-size:13px; margin-top:5px }
.lb-ufer{ text-align:center; font-size:42px; line-height:1; margin:20px 0 18px }
.lb-ufer.mono{ font-family:var(--mono); font-size:20px; letter-spacing:.08em; color:var(--jade-ink) }
.lb-vorrat{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.lb-wahl{ padding:12px 16px; border:1px solid var(--rule-strong); background:none;
  color:var(--ink); cursor:pointer; transition:all .15s }
.lb-wahl.cjk{ font-family:var(--cjk); font-size:28px; line-height:1 }
.lb-wahl.mono{ font-family:var(--mono); font-size:13px; letter-spacing:.06em }
.lb-wahl:hover{ border-color:var(--ink) }
.lb-wahl.richtig{ border-color:var(--jade); background:var(--jade-soft); color:var(--jade-ink) }
.lb-wahl.falsch{ border-color:var(--zinnober); opacity:.45 }
.lb-wahl.weg{ opacity:.2; cursor:default }
.lb-loesung{ text-align:center; font-family:var(--mono); font-size:13px;
  color:var(--ink-70); margin-top:16px }
.lb-familie .lb-stein{ min-width:62px }

/* ——— 荷驢 Packesel ——— */
.esel{ position:relative; border:1.5px solid var(--rule-strong); padding:18px 20px;
  margin-bottom:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.esel-rot{ border-left:4px solid var(--zinnober) }
.esel-gruen{ border-left:4px solid var(--jade) }
.esel-gelb{ border-left:4px solid var(--gold) }
.esel-zier{ font-family:var(--cjk); font-size:30px; line-height:1; color:var(--ink-45) }
.esel-komp{ font-family:var(--cjk); font-size:40px; line-height:1 }
.esel-korb{ display:flex; flex-wrap:wrap; gap:6px; flex:1; min-height:36px;
  border-left:1px dashed var(--rule); padding-left:16px }
.korb-stueck{ font-family:var(--cjk); font-size:24px; line-height:1 }
.korb-stueck.verpasst{ color:var(--zinnober-ink); opacity:.6 }
.esel-vorrat{ display:flex; flex-wrap:wrap; gap:8px }
.esel-zeichen{ width:52px; height:52px; border:1px solid var(--rule-strong); background:none;
  font-family:var(--cjk); font-size:28px; color:var(--ink); cursor:pointer; transition:all .15s }
.esel-zeichen:hover{ border-color:var(--ink); background:var(--page-2) }
.esel-zeichen.weg{ opacity:.2; cursor:default }
.esel-zeichen.falsch{ border-color:var(--zinnober); animation:sp-zittern .34s }
.esel-loesung{ font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:8px }
.esel-koerbe{ display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--rule-strong); margin-bottom:20px }
.esel-korb-gross{ padding:12px 14px; border-right:1px solid var(--rule) }
.esel-korb-gross:last-child{ border-right:0 }
.korb-l{ font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px }
.korb-rot .korb-l{ color:var(--zinnober-ink) }
.korb-gruen .korb-l{ color:var(--jade-ink) }
.korb-gelb .korb-l{ color:var(--gold) }
.korb-inhalt{ display:flex; flex-wrap:wrap; gap:5px; min-height:30px }
.esel-buehne{ text-align:center }
.buehne-frage{ font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:12px }
.buehne-karte{ display:flex; align-items:baseline; gap:12px; justify-content:center;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:18px 0; margin-bottom:18px }
.buehne-komp{ font-family:var(--cjk); font-size:40px; line-height:1; color:var(--zinnober-ink) }
.buehne-in{ font-style:italic; color:var(--ink-45); font-size:14px }
.buehne-zeichen{ font-family:var(--cjk); font-size:40px; line-height:1 }
.buehne-wahl{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.buehne-knopf{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding:12px 18px; border:1px solid var(--rule-strong);
  background:none; cursor:pointer; transition:all .15s }
.buehne-knopf.korb-rot{ color:var(--zinnober-ink) }
.buehne-knopf.korb-gruen{ color:var(--jade-ink) }
.buehne-knopf.korb-gelb{ color:var(--gold) }
.buehne-knopf:hover{ border-color:var(--ink) }
.buehne-knopf.falsch{ border-color:var(--zinnober); background:var(--zinnober-soft) }

@media(max-width:560px){
  .esel-koerbe{ grid-template-columns:1fr }
  .esel-korb-gross{ border-right:0; border-bottom:1px solid var(--rule) }
  .esel-korb-gross:last-child{ border-bottom:0 }
  .lb-fluss{ gap:8px }
  .lb-stein{ min-width:62px }
  .scr-feld{ width:44px; height:44px; font-size:26px }
}

/* ══════════════════════════════════════════════════════════════════
   Lerntafel · Umbau nach der Abstimmung vom 20.08.2026
   Vier Schriftformen, Zerlegen und Zusammenbauen, Ton, ACADEMY.
   ══════════════════════════════════════════════════════════════════ */

/* ——— Vier Schriftformen ———
   Jede Form hat ihre eigene Schrift: Simsun für China, Mincho für Japan,
   Batang für Korea. Der Unterschied ist nicht kosmetisch — dieselbe Kodierung
   wird in den drei Ländern verschieden gezeichnet, und genau das soll man sehen.
   Die Klasse hängt an der Wurzel der Tafel und schlägt auf jedes CJK-Zeichen
   darin durch, wie es die Vorlage verlangt. */
:root{
  --cjk-hant:"Songti TC","Noto Serif CJK TC","Source Han Serif TC",SimSun,"Songti SC",serif;
  --cjk-hans:"Songti SC",STSong,"Noto Serif CJK SC",SimSun,serif;
  --cjk-jp:"Hiragino Mincho ProN","YuMincho","MS Mincho","Noto Serif CJK JP",serif;
  --cjk-kr:"Batang","AppleMyungjo","Nanum Myeongjo","Noto Serif CJK KR",serif;
}
.lerntafel.sf-hant .cjk, .lerntafel.sf-hant .lt-glyph{ font-family:var(--cjk-hant) }
.lerntafel.sf-hans .cjk, .lerntafel.sf-hans .lt-glyph{ font-family:var(--cjk-hans) }
.lerntafel.sf-ja   .cjk, .lerntafel.sf-ja   .lt-glyph{ font-family:var(--cjk-jp) }
.lerntafel.sf-ko   .cjk, .lerntafel.sf-ko   .lt-glyph{ font-family:var(--cjk-kr) }
/* Die Marke auf der Schaltfläche zeigt immer ihre eigene Schrift, damit man den
   Unterschied schon an der Auswahl sieht und nicht erst nach dem Umschalten. */
/* Höhere Spezifität als die Wurzelregel `.lerntafel.sf-… .cjk`, sonst trügen alle vier
   Schaltflächen die Schrift der gerade gewählten Form und der Unterschied wäre
   ausgerechnet dort unsichtbar, wo man ihn vergleichen soll. */
.lerntafel .lt-var .sf-mark.sf-hant{ font-family:var(--cjk-hant) }
.lerntafel .lt-var .sf-mark.sf-hans{ font-family:var(--cjk-hans) }
.lerntafel .lt-var .sf-mark.sf-ja{   font-family:var(--cjk-jp) }
.lerntafel .lt-var .sf-mark.sf-ko{   font-family:var(--cjk-kr) }
.lerntafel .lt-var em.sf-hant{ font-family:var(--cjk-hant) }
.lerntafel .lt-var em.sf-hans{ font-family:var(--cjk-hans) }
.lerntafel .lt-var em.sf-ja{   font-family:var(--cjk-jp) }
.lerntafel .lt-var em.sf-ko{   font-family:var(--cjk-kr) }
.lt-var em{ display:block; font-style:normal; font-size:19px; line-height:1.1; margin-top:2px }

/* ——— Das große Zeichen ist anzutippen ——— */
.lt-glyph{ cursor:pointer; transition:color .15s }
.lt-glyph:hover{ color:var(--zinnober-ink) }
.lt-glyph:focus-visible{ outline:2px solid var(--zinnober); outline-offset:4px }
.lt-anim{ margin-top:10px }

/* ——— Zerlegen und Zusammenbauen ——— */
.lt-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:10px }
.lt-zerlegen{ transition:opacity .2s }
.lt-zerlegen.verdeckt{ opacity:0; pointer-events:none; height:0; overflow:hidden; margin:0 }
.ltk-sub.leer{ font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--ink-45); padding:6px 0 0; opacity:.7 }
.lt-bauen{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:12px 0; margin:16px 0 }
.lt-bauen>summary{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; color:var(--zinnober-ink); list-style:none }
.lt-bauen>summary::-webkit-details-marker{ display:none }
.lt-bauen>summary::before{ content:"＋"; margin-right:8px }
.lt-bauen[open]>summary::before{ content:"−" }
.lt-bau-body{ padding-top:16px }
.lt-bau-frage{ font-size:16px; margin-bottom:12px }
.lt-bau-wahl{ display:flex; gap:8px; margin-bottom:8px }
.lt-bau-n{ width:44px; height:44px; border:1px solid var(--rule-strong); background:none;
  font-family:var(--mono); font-size:17px; color:var(--ink); cursor:pointer; transition:all .15s }
.lt-bau-n:hover{ border-color:var(--ink) }
.lt-bau-n.richtig{ border-color:var(--jade); background:var(--jade-soft); color:var(--jade-ink) }
.lt-bau-n.falsch{ border-color:var(--zinnober); animation:sp-zittern .34s }
.lt-bau-auftrag{ font-size:15px; color:var(--ink-70); margin:16px 0 12px; max-width:56ch }
.lt-bau-reihe{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px }
.lt-bau-feld{ display:flex; gap:4px; padding:8px; border:1.5px solid var(--rule-strong) }
.lt-bau-plus{ font-size:19px; color:var(--zinnober-ink) }
.lt-bau-platz{ width:44px; height:44px; border:1px dashed var(--rule-strong); display:grid;
  place-items:center; font-size:26px; line-height:1 }
.lt-bau-platz.voll{ border-style:solid; border-color:var(--ink) }
.lt-bau-vorrat{ display:flex; gap:8px; flex-wrap:wrap }
.lt-bau-teil{ width:48px; height:48px; border:1px solid var(--rule-strong); background:none;
  font-size:26px; line-height:1; color:var(--ink); cursor:pointer; transition:all .15s }
.lt-bau-teil:hover{ border-color:var(--ink); background:var(--page-2) }
.lt-bau-teil.weg{ opacity:.2; cursor:default }
.lt-bau-teil.falsch{ border-color:var(--zinnober); animation:sp-zittern .34s }
.lt-bau-rueck{ min-height:20px; margin-top:12px; font-size:14px }
.lt-bau-rueck.gut{ color:var(--jade-ink) }
.lt-bau-rueck.falsch{ color:var(--zinnober-ink) }
.lt-bau-nochmal{ margin-top:12px }

/* ——— Zum Ton ——— */
.lt-ton{ display:inline-flex; align-items:center; gap:7px; margin-left:10px; padding:3px 9px;
  border:1px solid var(--rule); background:none; cursor:default; vertical-align:middle }
.lt-ton svg{ width:20px; height:15px; flex:none }
.lt-ton svg path{ fill:none; stroke:var(--zinnober); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.lt-ton-t{ display:flex; flex-direction:column; line-height:1.15; text-align:left }
.lt-ton-t b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600 }
.lt-ton-t em{ font-style:normal; font-size:10.5px; color:var(--ink-45) }

/* ——— Lautfolger und weitere Zeichen der Brücke ——— */
.lt-lf{ border-left:2px solid var(--jade); padding-left:16px; margin:18px 0 }
.lt-lf-head{ font-size:15px; color:var(--ink-70); margin-bottom:10px }
.lt-verw-reihe{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.lt-verw-reihe .lt-glyph-btn{ font-size:30px }

/* ——— Lust auf mehr? ——— */
.lt-academy{ border:1px solid var(--gold); background:var(--gold-soft);
  padding:16px 20px; margin-top:24px }
.lt-academy-l{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px }
.lt-academy p{ font-size:14.5px; color:var(--ink-70); max-width:60ch; margin-bottom:12px }
.lt-academy-btn{ border-color:var(--gold); color:var(--gold) }
.lt-academy-btn:hover{ background:var(--gold); color:var(--page) }
.lt-offen{ font-style:italic; color:var(--ink-45); padding:6px 0 }

/* Strichzahl unter dem Zeichen und die anklickbare Lautbrücke (Vorlage 20.08.2026) */
.lt-striche{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-45); margin-top:4px }
button.lt-lb{ font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--jade-ink); background:none; border:0; border-bottom:1px dotted var(--jade);
  padding:0 0 1px; cursor:pointer; transition:color .14s }
button.lt-lb:hover{ color:var(--ink) }
button.lt-lb.offen{ border-bottom-style:solid }
.lt-lb-erkl{ font-size:13.5px; line-height:1.5; color:var(--ink-70); max-width:64ch;
  border-left:2px solid var(--jade); padding:6px 0 6px 14px; margin:8px 0 4px }
/* Die gezeichnete Wasserfläche liegt UNTER den drei Trittsteinen, die die App selbst
   zeichnet. Das Bild liefert die Stimmung, die Steine die Aussage: drei Sprachkreise,
   jeder anklickbar. Ein erzeugtes Bild mit „ungefähr drei" Steinen wäre hübsch und
   fachlich falsch — acht Anläufe haben gezeigt, dass das Modell nicht zählt. */
.lt-bach.mit-wasser{ position:relative; background-image:var(--wasser);
  background-size:cover; background-position:center 40%; border-color:transparent;
  min-height:132px; overflow:hidden }
.lt-bach.mit-wasser::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(241,239,233,.55), rgba(241,239,233,.78)) }
.lt-bach.mit-wasser>*{ position:relative; z-index:1 }
.lt-bach.mit-wasser .lt-stein{ background:var(--page); border:1px solid var(--ink);
  box-shadow:0 1px 0 rgba(26,24,21,.18) }
.lt-bach.mit-wasser .lt-ufer{ background:var(--page); padding:2px 8px; border:1px solid var(--zinnober) }
@media (prefers-color-scheme: dark){
  .lt-bach.mit-wasser::before{ background:linear-gradient(180deg, rgba(23,22,19,.58), rgba(23,22,19,.80)) }
}

/* Kurzangabe zu einem Baustein ohne eigenen Steckbrief. Die Auskunft steht im
   Zeichenmodell (Benennung und Erläuterung); sie zu verschweigen und stattdessen
   „kein Steckbrief" zu melden, wäre eine Sackgasse vor vorhandenem Wissen. */
.sb-kurz{ max-width:44ch }
.sb-kurz .sb-head{ display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--rule); padding-bottom:8px; margin-bottom:14px }
.sb-kurz .sb-glyph{ font-size:64px; line-height:1; text-align:center; margin-bottom:8px }
.sb-kurz .sb-name{ text-align:center; font-size:18px; margin-bottom:12px }
.sb-kurz .sb-note{ color:var(--ink-70); line-height:1.6 }
.sb-kurz .sb-folgt{ font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-45); border-top:1px solid var(--rule); padding-top:10px; margin-top:14px }