/* ====================================================================
   weibin.at · Heft — das Aussehen aller deutschen Seiten

   Vorlage: Money in Check (moneyincheck.org), gewählt am 22.09.2026;
   am 23.09.2026 nach zwei Entwürfen für alle deutschen Seiten
   freigegeben („可以，全部换过来"). Die Entwürfe liegen weiter unter
   entwurf/heft/.

   Von der Vorlage: Gitterpapier als Grund, Randnotizen von Hand, eine
   einzige Farbe für das Hervorgehobene, drei Punkte in der Navigation.
   Nicht von dort: der Riesentitel (deutsche Wörter wie
   „Versicherungsdatenauszug" passen in diesen Grad nicht).

   Drei Schichten, jede mit eigener Bedeutung:
     gedruckt      Tinte, Fraunces und Karla
     von Hand      Kugelschreiber-Blau, Caveat: Nummern, Kreise, Rechnungen
     markiert      Textmarker-Gelb: das Ergebnis
   Das Bleistift-Grau der verstreuten Notizen ist nur Schmuck
   (aria-hidden) und trägt deshalb keinen Inhalt.

   Kopiert nach public/css/heft.css von scripts/bauen-heft.mjs.
   ==================================================================== */

:root{
  --grund:#ebeae6;
  --gitter:#d3d1ca;
  --blatt:#ffffff;
  --tinte:#161513;
  --leise:#55524c;
  --bleistift:#8e8a81;
  --kuli:#1f3fa6;
  --kuli-zart:#e4e8f6;
  --marker:#ffe45c;
  --marker-zart:#fff6c4;
  --linie:#dcd9d2;
  --zelle:clamp(92px,11.6vw,168px);
  --kopf:72px;
  --rand:clamp(16px,4.2vw,64px);
  --breite:1180px;
  --schatten:5px 5px 0 var(--tinte);
  --f-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --f-text:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-hand:'Caveat','Segoe Print',cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--tinte);
  font:400 1.0625rem/1.6 var(--f-text);
  background-color:var(--grund);
  background-image:
    linear-gradient(to right,var(--gitter) 1px,transparent 1px),
    linear-gradient(to bottom,var(--gitter) 1px,transparent 1px);
  background-size:var(--zelle) var(--zelle);
  background-position:50% var(--kopf);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,h4{font-family:var(--f-serif);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance;hyphens:manual}
p{margin:0}
a{color:inherit;text-underline-offset:.18em}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--kuli);outline-offset:3px}
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.innen{width:min(100% - 2 * var(--rand),var(--breite));margin-inline:auto}
main:focus{outline:none}

/* Der Sprung an den Inhalt: unsichtbar, bis ihn die Tastatur erreicht. */
.sprunglink{position:absolute;left:var(--rand);top:-100px;z-index:60;background:var(--tinte);color:var(--grund);font:700 1rem/1 var(--f-text);padding:.8rem 1rem;border-radius:3px;text-decoration:none}
.sprunglink:focus{top:.6rem}

/* ---- Kopf: Marke, drei Punkte, rechts der Ausgang ------------------ */
.kopf{position:relative;z-index:5;min-height:var(--kopf);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem 1.2rem;padding:.6rem var(--rand)}
.marke{justify-self:start;display:inline-flex;align-items:baseline;gap:.7rem;text-decoration:none;white-space:nowrap}
.marke b{font:700 1.32rem/1 var(--f-serif);letter-spacing:-.02em}
.marke i{font:italic 400 1.02rem/1 var(--f-serif);color:var(--leise)}
.haupt{display:flex;gap:clamp(1.1rem,3.4vw,3rem)}
.haupt a{font:500 1.14rem/1 var(--f-serif);text-decoration:none;padding:.45rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.haupt a:hover{border-bottom-color:var(--bleistift)}
.haupt a[aria-current]{border-bottom-color:var(--tinte);font-weight:650}
.ausgang{justify-self:end;font:700 1.08rem/1 var(--f-serif);text-decoration-thickness:2px;white-space:nowrap}
/* Rechts oben: die Sprachwahl (seit 23.09.2026 nur Deutsch und 中文) und der
   Ausgang. Die Sprache ist leiser als der Ausgang: gedruckt, nicht fett. */
.rechts{justify-self:end;display:flex;align-items:baseline;gap:1.1rem}
.sprache{font:500 1.02rem/1 var(--f-text);text-decoration:none;border-bottom:1.5px solid var(--bleistift);padding-bottom:.12rem;white-space:nowrap}
.sprache:hover{border-bottom-color:var(--tinte)}
/* Auf 320 px war die obere Zeile (Marke, 中文, Ausgang) 3,6 px zu breit
   (verify-layout, 23.09.2026); der Abstand rechts wird dort enger. */
@media (max-width:360px){.rechts{gap:.6rem}}
/* Chinesisch ist die obere Zeile auf 320 px noch 22 px zu breit („Deutsch“
   ist länger als „中文“, verify-layout, 23.09.2026 abends): dort stehen
   Sprache und Ausgang rechts untereinander. */
@media (max-width:360px){html:lang(zh) .rechts{flex-direction:column;align-items:flex-end;gap:.3rem}}
@media (max-width:860px){
  .kopf{grid-template-columns:1fr auto}
  .haupt{grid-column:1 / -1;grid-row:2;flex-wrap:wrap;gap:.2rem 1rem}
  .haupt a{font-size:1.02rem}
  .marke i{display:none}
}

/* ---- Handschrift, Nummern und Kreise -------------------------------- */
.hand{font-family:var(--f-hand);font-weight:600;color:var(--kuli)}
.nr{display:inline-grid;place-items:center;width:1.6em;height:1.6em;flex:none;border:2px solid var(--kuli);
  border-radius:52% 48% 50% 50%/48% 54% 46% 52%;font:700 1.05em/1 var(--f-hand);color:var(--kuli);
  transform:rotate(-6deg);vertical-align:middle;margin-left:.3em}
.kringel{position:relative;display:inline-block;white-space:nowrap}
.kringel::after{content:"";position:absolute;inset:-.3em -.45em;border:2px solid var(--kuli);
  border-radius:50% 46% 52% 48%/56% 44% 56% 44%;transform:rotate(-2.5deg);pointer-events:none}
.markiert{background:linear-gradient(transparent 52%,var(--marker) 52%,var(--marker) 90%,transparent 90%);padding:0 .08em}
.verstreut{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.verstreut span{position:absolute;left:var(--x);top:var(--y);font:500 clamp(1.05rem,1.7vw,1.55rem)/1 var(--f-hand);color:var(--bleistift);transform:rotate(var(--r,-4deg));white-space:nowrap}
@media (max-width:860px){.verstreut span:nth-child(n+3){display:none}}

/* ---- Papier: ein Blatt, das auf dem Gitter liegt --------------------- */
.papier{background:var(--blatt);border:1.5px solid var(--tinte);box-shadow:var(--schatten)}

/* ---- Knöpfe ---------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;gap:.5rem;font:700 1.05rem/1 var(--f-serif);background:var(--tinte);color:var(--grund);
  padding:.9rem 1.35rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.knopf:hover{background:var(--kuli)}
.knopf.leer{background:transparent;color:var(--tinte);border:1.5px solid var(--tinte)}
.knopf.leer:hover{background:var(--blatt)}

/* ==================== Auftakt der Startseite ========================== */
.auftakt{position:relative;padding:clamp(1.6rem,4.5vh,3.2rem) 0 clamp(2.4rem,6vh,4.5rem);text-align:center;overflow:clip}
.oben{font:400 clamp(1.02rem,1.5vw,1.4rem)/1.3 var(--f-serif);letter-spacing:-.01em}
.auftakt h1{font-size:clamp(2.3rem,5.4vw,4.8rem);font-weight:620;letter-spacing:-.035em;margin:.22em auto .16em}
.von{font:400 clamp(1.05rem,1.45vw,1.3rem)/1.3 var(--f-serif)}
.von i{font-style:italic;color:var(--leise)}
.objekt{position:absolute;pointer-events:none;z-index:0}
.objekt.buch{left:-2.5%;bottom:-3%;width:clamp(130px,15vw,230px);transform:rotate(-11deg)}
@media (max-width:700px){.objekt.buch{display:none}}

/* Die Rechnung: auf das Gitter geschrieben, jede Zahl mit ihrer Notiz */
.formel-titel{font:600 .82rem/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:clamp(1.8rem,4vh,2.8rem) 0 .9rem}
.formel{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.15em .5em;
  font:500 clamp(1.9rem,4vw,3.3rem)/1.15 var(--f-serif);letter-spacing:-.02em}
.glied{display:inline-grid;justify-items:center;gap:.28em}
.glied .notiz{font:600 clamp(1.02rem,1.25vw,1.22rem)/1.05 var(--f-hand);color:var(--kuli);letter-spacing:0;transform:rotate(-2deg);max-width:9.5em}
.zeichen{color:var(--leise);font-weight:400}
.eingabe{display:inline-flex;align-items:baseline;gap:.12em}
.eingabe input{font:inherit;color:var(--kuli);width:4.6ch;field-sizing:content;min-width:2ch;max-width:7ch;border:0;border-bottom:3px solid var(--kuli);
  background:transparent;padding:0 .04em;text-align:right;border-radius:0}
.eingabe input:focus-visible{outline-offset:6px}
.eingabe input[aria-invalid="true"]{border-bottom-style:dashed}

/* Die Karte: das Ergebnis als Blatt, daneben 小钟 */
.ergebnis-reihe{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,31rem) minmax(0,1fr);align-items:end;margin-top:clamp(1.6rem,3.5vh,2.4rem);text-align:left}
.ergebnis-reihe .xz{grid-column:1;justify-self:end;height:clamp(230px,30vw,330px);width:auto;margin-right:-1.2rem;margin-bottom:-.2rem}
.karte{grid-column:2;padding:clamp(1.1rem,2.2vw,1.6rem);display:grid;gap:.55rem;transform:rotate(.6deg)}
.etikett{font:700 .78rem/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.gross{font:760 clamp(2.9rem,5.4vw,4.2rem)/1 var(--f-serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.gross small{display:block;font:500 1.02rem/1.3 var(--f-serif);letter-spacing:0;margin-top:.35rem}
.vergleich{font-size:1rem;line-height:1.5;padding-top:.6rem;border-top:1px solid var(--gitter)}
.jahre-zeile{font-size:1rem;line-height:1.5}
.jahre-zeile input{font:700 1rem/1 var(--f-text);color:var(--kuli);width:3.2ch;field-sizing:content;min-width:1.5ch;border:0;border-bottom:2px solid var(--kuli);background:transparent;text-align:center;padding:0 .1em}
.kappe{font-size:.93rem;line-height:1.45;background:var(--kuli-zart);padding:.55rem .7rem;border-left:3px solid var(--kuli)}
.quelle{font-size:.84rem;line-height:1.45;color:var(--leise)}
.quelle a{color:var(--tinte)}
@media (max-width:860px){
  .ergebnis-reihe{grid-template-columns:minmax(0,1fr)}
  .ergebnis-reihe .xz{display:none}
  .karte{grid-column:1;transform:none}
}

/* ==================== Abschnitte ====================================== */
.abschnitt{position:relative;padding:clamp(3rem,8vh,5.5rem) 0}
.abschnitt-kopf{display:grid;gap:.6rem;margin-bottom:clamp(1.6rem,4vh,2.6rem);max-width:44rem}
.abschnitt-kopf h2{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.03em}
.abschnitt-kopf p{font:400 clamp(1.05rem,1.4vw,1.2rem)/1.5 var(--f-serif);color:var(--leise)}

/* Nachgerechnet: die Blätter liegen auf dem Gitter */
.blaetter{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.3rem,3vw,2.6rem)}
.blaetter > li{position:relative;padding:1.1rem 1.2rem 1.2rem;display:grid;align-content:start;gap:.55rem;min-height:15.5rem;transition:transform .15s ease}
.blaetter > li:nth-child(odd){transform:rotate(-.7deg)}
.blaetter > li:nth-child(even){transform:rotate(.6deg)}
.blaetter > li:hover{transform:translateY(-3px)}
.absender{font:700 .74rem/1.25 var(--f-text);letter-spacing:.11em;text-transform:uppercase;color:var(--leise)}
.blaetter h3{font-size:clamp(1.45rem,2vw,1.85rem);letter-spacing:-.02em}
.blaetter h3 a{text-decoration:none}
.blaetter h3 a::after{content:"";position:absolute;inset:0}
.blaetter h3 a:focus-visible{outline:none}
.blaetter > li:focus-within{outline:3px solid var(--kuli);outline-offset:4px}
.blaetter p{font-size:1rem;line-height:1.5}
.blaetter .hand{font-size:1.35rem;line-height:1.1;margin-top:auto}
.stand{font:600 .78rem/1.2 var(--f-text);color:var(--leise)}
@media (max-width:980px){.blaetter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.blaetter{grid-template-columns:minmax(0,1fr)}.blaetter > li{min-height:0}}

/* Neu im Recht: ein gedrucktes Blatt, ein Absatz je Änderung */
.recht{padding:clamp(.4rem,1.5vw,1rem) clamp(1.1rem,3vw,2.4rem)}
/* Datum und Zahl stehen übereinander in der ersten Spalte: nebeneinander
   drückte „25 · 50 · 75 %" in den Text der dritten Spalte (22.09.2026). */
.recht article{display:grid;grid-template-columns:minmax(13rem,1fr) minmax(0,2.2fr);gap:.8rem 2.4rem;padding:1.6rem 0;border-top:1.5px solid var(--tinte);align-items:start}
.recht article:first-child{border-top:0}
.recht .wann{display:grid;gap:.45rem;align-content:start}
.recht time{font:italic 500 clamp(1.2rem,1.8vw,1.55rem)/1.15 var(--f-serif)}
.recht .zahl{font:720 clamp(2rem,3.4vw,3rem)/1 var(--f-serif);letter-spacing:-.035em;color:var(--kuli)}
.recht .text{display:grid;gap:.5rem}
.recht .text p{font-size:1.06rem;line-height:1.55;max-width:40rem}
@media (max-width:860px){.recht article{grid-template-columns:minmax(0,1fr);gap:.35rem}}

/* Über mich auf der Startseite: wie „About the Author" */
.ich{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.2rem,4vw,3.5rem);align-items:end}
.ich img{height:clamp(240px,28vw,340px);width:auto}
.ich .text{display:grid;gap:.9rem;max-width:40rem;padding-bottom:1rem}
.ich h2{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.03em}
.ich p{font:400 1.12rem/1.55 var(--f-serif)}
@media (max-width:700px){.ich{grid-template-columns:minmax(0,1fr)}.ich img{height:200px}}

/* Über mich auf der Startseite: ein Blatt ohne Figur. 小钟 steht schon im
   Auftakt, und je Seite gibt es ihn einmal (gate-xiaozhong, B2). */
.ich-blatt{padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:.9rem;max-width:44rem;transform:rotate(.4deg)}
.ich-blatt h2{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.03em}
.ich-blatt p{font:400 1.12rem/1.55 var(--f-serif)}
.ich-blatt .knopf{margin-top:.3rem}
@media (max-width:760px){.ich-blatt{transform:none}}

/* ==================== Über mich ======================================= */
.ich-auftakt{text-align:left;padding-bottom:clamp(1rem,3vh,2rem)}
.ich-auftakt .ich{align-items:center;grid-template-columns:minmax(0,1fr) auto}
.ich .figur{margin:0;display:grid;gap:.6rem;justify-items:center;max-width:15rem}
.ich .figur img{height:clamp(260px,32vw,380px);width:auto}
.ich .figur figcaption{font-size:1.2rem;line-height:1.15;text-align:center;transform:rotate(-2deg)}
.ich-auftakt h1{font-size:clamp(2.5rem,6vw,5rem);font-weight:620;letter-spacing:-.04em;margin:.15em 0 .3em}
.ich-auftakt .text{padding-bottom:0}
.ich-auftakt .text p{font:400 clamp(1.08rem,1.5vw,1.3rem)/1.5 var(--f-serif)}
.ich-auftakt .text .oben{font-size:clamp(1.02rem,1.5vw,1.3rem);color:var(--leise)}
.zwei-spalten.oben{align-items:start}
.markiert{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ich-auftakt .knopf{margin-top:.4rem}
/* Der tragende Satz steht in zwei Absätzen (J: höchstens zwei Sätze je
   Absatz), soll aber als ein Kasten lesen: kein Abstand zwischen beiden. */
.ich-auftakt .einordnung{display:grid;gap:0}
/* 23.09.2026: der Text nach V2 ist länger. Owner-Regel 04.09.: der Knopf
   liegt im ersten Schirm, auch bei 320×568 (gemessen 604 px → 563 px). */
@media (max-width:360px){.ich-auftakt{padding-top:.75rem}.ich-auftakt h1{font-size:2.2rem;margin:0}.ich-auftakt .text{gap:.7rem}.ich-auftakt .text p{font-size:1.02rem;line-height:1.45}}
@media (max-width:700px){.ich-auftakt .ich{grid-template-columns:minmax(0,1fr)}.ich .figur{justify-self:start;grid-template-columns:auto minmax(0,1fr);align-items:center;max-width:none}.ich .figur img{height:180px}.ich .figur figcaption{text-align:left}}
.zwei-spalten > section > .hand,.stapel .hand{display:block;font-size:1.3rem;margin-bottom:.3rem}
.zwei-spalten > section p{line-height:1.55}
.zwei-spalten > section p + p{margin-top:.7rem}
.zwei-spalten h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:.8rem}
.mehr{margin-top:.9rem;border-top:1px solid var(--gitter);padding-top:.7rem}
.mehr summary{cursor:pointer;font:600 1.05rem/1.3 var(--f-serif);color:var(--kuli)}
.mehr p{margin-top:.6rem}
.abschnitt-kopf .hand{font-size:1.45rem}
.korrekturen{list-style:none;margin:0;padding:.4rem clamp(1.1rem,2.6vw,2rem);display:grid;max-width:56rem}
.korrekturen li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.4rem 1.4rem;padding:.9rem 0;border-top:1px solid var(--linie);line-height:1.5}
.korrekturen li:first-child{border-top:0}
.korrekturen time{font:600 1.25rem/1.2 var(--f-hand);color:var(--kuli)}
.korrektur-fuss{margin-top:1rem;font-size:.95rem}
@media (max-width:620px){.korrekturen li{grid-template-columns:minmax(0,1fr);gap:.1rem}}
.kanaele{list-style:none;margin:0 0 1rem;padding:0;display:grid}
.kanaele li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.1rem 1rem;align-items:baseline;padding:.75rem 0;border-top:1px solid var(--gitter)}
.kanaele li:first-child{border-top:0}
.kanaele .art{font:700 .8rem/1.2 var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.kanaele a{font:600 1.12rem/1.3 var(--f-serif);overflow-wrap:anywhere}
.kanaele .weg{grid-column:2;font-size:.86rem;color:var(--leise)}
.kanaele .note{grid-column:2;font-size:.9rem;color:var(--kuli);min-height:0}
.kanaele .note:empty{display:none}
.kanaele button.knopf{justify-self:start;padding:.55rem .9rem;font-size:1rem}
@media (max-width:520px){.kanaele li{grid-template-columns:minmax(0,1fr)}.kanaele .weg,.kanaele .note{grid-column:1}}
.stapel{display:grid;gap:clamp(1.2rem,3vw,2rem);align-content:start}
.stapel .ausgang-blatt{max-width:none}
.stapel .ausgang-blatt h3{font:700 clamp(1.8rem,3.4vw,2.5rem)/1 var(--f-hand);color:var(--kuli);letter-spacing:0}
.stand-blatt{padding:1.3rem 1.4rem 1.4rem}
.stand-blatt h3{font-size:1.35rem;margin-bottom:.6rem}
.stand-blatt h3 + p{margin-top:0}
.stand-blatt p + h3{margin-top:1.3rem}
.stand-blatt p + p{margin-top:.6rem}

/* ==================== Impressum und Datenschutz ======================== */
.recht-blatt{padding:clamp(.6rem,2vw,1.2rem) clamp(1.1rem,3vw,2.4rem) clamp(1.1rem,3vw,2rem);max-width:60rem;margin-bottom:clamp(2rem,6vh,4rem)}
.angaben{margin:0;display:grid}
.angaben > div{display:grid;grid-template-columns:minmax(14.5rem,.9fr) minmax(0,2.4fr);gap:.4rem 2rem;padding:1.1rem 0;border-top:1px solid var(--linie)}
.angaben > div:first-child{border-top:0}
.angaben dt{font:600 1.08rem/1.3 var(--f-serif)}
.angaben dd{margin:0;line-height:1.6;max-width:44rem}
.recht-blatt > .quelle{border-top:1.5px solid var(--tinte);padding-top:1rem;margin-top:.4rem}
@media (max-width:700px){.angaben > div{grid-template-columns:minmax(0,1fr);gap:.3rem}}

/* Der Ausgang: das eigene Blatt schicken */
.ausgang-blatt{padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:.9rem;max-width:44rem;transform:rotate(-.5deg)}
.ausgang-blatt h2{font:700 clamp(2rem,4vw,2.9rem)/1 var(--f-hand);color:var(--kuli);letter-spacing:0}
.ausgang-blatt p{font-size:1.08rem;line-height:1.55}
.ausgang-blatt .knopf{justify-self:start;margin-top:.3rem}
@media (max-width:760px){.ausgang-blatt{transform:none}}

/* Fuß */
.fuss{border-top:1.5px solid var(--tinte);padding:2.2rem 0 3.4rem;margin-top:2rem}
.fuss .innen{display:grid;gap:.6rem}
.fuss strong{font:600 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--f-serif);letter-spacing:-.02em}
.fuss p{font-size:.95rem;color:var(--leise)}
.fuss a{color:var(--tinte)}

/* ==================== Blattseiten ====================================== */
.blatt-kopf{padding:clamp(2rem,5vh,3.4rem) 0 clamp(1.4rem,3vh,2rem);display:grid;gap:.7rem;max-width:48rem}
/* 2.3rem unten: bei 2.6rem war „Kontomitteilung" auf 320 px 304 px breit,
   die Spalte 288 px, und das ganze Raster wurde mitgezogen (23.09.2026). */
.blatt-kopf h1{font-size:clamp(2.3rem,6.4vw,5.4rem);font-weight:620;letter-spacing:-.04em}
.frage{font:italic 400 clamp(1.4rem,2.4vw,2.1rem)/1.2 var(--f-serif)}
.kurz{font:400 clamp(1.1rem,1.5vw,1.3rem)/1.5 var(--f-serif);max-width:42rem}
.gezeichnet{font-size:.9rem;color:var(--leise)}

/* minmax(0,…) und min-width:0: sonst setzt die Tabelle (min-width 720px) über
   den Mindestinhalt des Rasters die Breite des ganzen Blatts, und auf dem
   Telefon ragt das Blatt rechts aus dem Schirm, statt dass nur die Tabelle
   in ihrem Rahmen wischt. Gesehen am 22.09.2026 auf 390 px. */
.blatt-buehne{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:2rem;align-items:start}
.muster{position:relative;min-width:0;padding:clamp(1rem,2.6vw,2rem);transform:rotate(-.4deg);font-family:var(--f-text);margin:0}
.muster .stempel{position:absolute;top:.9rem;right:.9rem;border:2px solid var(--tinte);padding:.3rem .55rem;font:800 .72rem/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;transform:rotate(4deg);background:var(--blatt)}
.muster h3{font:700 clamp(1.5rem,2.4vw,1.9rem)/1.1 var(--f-text);letter-spacing:-.01em;margin-bottom:.8rem;padding-right:8rem}
.muster .traeger{font-size:.92rem;margin-bottom:.8rem}
.muster .traeger span{color:var(--leise);margin-right:.3rem}
.muster .zitat{font-size:.95rem;line-height:1.55;max-width:46rem;margin-bottom:1rem}
.muster .summe{font-size:1.05rem;font-weight:700;margin:.4rem 0 1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem}
.muster .zwei{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:.9rem}
.muster .erst{margin:0;border:1.5px solid var(--tinte);padding:.5rem .8rem;display:grid;gap:.2rem;font-size:.92rem;min-width:min(18rem,100%)}
/* Umbrechen statt herausstehen: auf 320 px passt „Kontoerstgutschrift ②"
   mit dem Betrag nicht in eine Zeile (235 px bei 226 px Platz, 23.09.2026).
   Dann rutscht der Betrag in die nächste Zeile und bleibt rechts. */
.muster .erst div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1.5rem}
.muster .erst dd{margin:0 0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}
.muster table{border-collapse:collapse;width:100%;min-width:720px;font-variant-numeric:tabular-nums;font-size:.95rem}
.muster th,.muster td{padding:.5rem .6rem;text-align:right;border-bottom:1px solid var(--linie);white-space:nowrap}
.muster th{font-weight:700;font-size:.8rem;line-height:1.25;vertical-align:bottom;white-space:normal}
.muster th:first-child,.muster td:first-child{text-align:left}
.muster tbody tr:first-child td{background:var(--marker-zart)}
.muster tfoot td{color:var(--leise);border-bottom:0}
.muster figcaption{font-size:.85rem;line-height:1.45;color:var(--leise);margin-top:1rem;max-width:46rem}
.wischen{display:none;font:600 1.1rem/1 var(--f-hand);color:var(--kuli);margin-top:.5rem}
/* Auf dem Telefon ist das Blatt über tausend Pixel hoch: schon 0,4° Drehung
   schieben die unteren Ecken um rund acht Pixel zur Seite. Dort liegt es gerade. */
@media (max-width:760px){.wischen{display:block}.muster{transform:none}.muster .erst div{gap:.8rem}}
/* Bis 760 px ist der Stempel breiter als die 8rem, die ihm die Überschrift
   freihält: auf 390 px lag er über „Pensionskonto", „Pensionsversicherung"
   und „Basisinformationsblatt" (Sichtprüfung 23.09.2026; verify-layout prüft
   das seitdem). Dort steht er in einer eigenen Zeile über dem Blatt. */
@media (max-width:760px){.muster .stempel{position:static;display:table;margin:0 0 1rem auto}.muster h3,.schreiben h3:first-of-type{padding-right:0}.schreiben .briefe{padding-top:0}}

.rand{display:grid;gap:1.1rem;padding-top:4.5rem}
.rand p{font:600 1.35rem/1.1 var(--f-hand);color:var(--kuli);transform:rotate(-2deg)}
.rand .nr{width:1.35em;height:1.35em;font-size:.95em;margin:0 .08em;border-width:1.6px}
.rand p:nth-child(even){transform:rotate(1.5deg)}
@media (max-width:1100px){
  .blatt-buehne{grid-template-columns:minmax(0,1fr)}
  .rand{padding-top:0;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
}

.zeilen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.zeilen > li{padding:1.1rem 1.2rem 1.2rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .9rem;align-content:start}
.zeilen .nr{grid-row:span 5;font-size:1.5rem;margin:0;align-self:start}
.zeilen h3{font-size:1.3rem}
.zeilen .wert{font:720 1.9rem/1.1 var(--f-serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zeilen p{font-size:1rem;line-height:1.55}
.zeilen .rechnung{font:600 1.3rem/1.2 var(--f-hand);color:var(--kuli)}
@media (max-width:760px){.zeilen{grid-template-columns:minmax(0,1fr)}}

.kette{list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.kette .stand-jahr{display:grid;justify-items:center;gap:.15rem}
.kette .betrag{font:720 clamp(1.25rem,2vw,1.7rem)/1 var(--f-serif);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kette .jahr{font:600 .8rem/1 var(--f-text);letter-spacing:.08em;color:var(--leise)}
.kette .schritt{font:600 1.2rem/1.1 var(--f-hand);color:var(--kuli);text-align:center}
.kette .schritt::after{content:" →";color:var(--tinte);font-family:var(--f-text)}
.kette-unter{margin-top:.9rem;color:var(--leise);font-size:.95rem}

.zwei-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.zwei-spalten > section{padding:1.3rem 1.4rem 1.4rem}
.zwei-spalten h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.9rem}
.zwei-spalten ul{margin:0;padding-left:1.1rem;display:grid;gap:.7rem}
.zwei-spalten li{line-height:1.5}
.zwei-spalten li::marker{color:var(--kuli)}
@media (max-width:860px){.zwei-spalten{grid-template-columns:minmax(0,1fr)}}

.wo{max-width:46rem;display:grid;gap:.7rem}
.wo h2{font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.03em}
.wo p{font-size:1.02rem;line-height:1.55}
.wo ol{margin:0;padding-left:1.3rem;display:grid;gap:.45rem;font:400 1.12rem/1.5 var(--f-serif)}
.wo ol li::marker{font-family:var(--f-hand);font-weight:700;color:var(--kuli)}

/* Die eigene Zeile: schriftlich gerechnet, Zahlen rechtsbündig */
.eigene{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.schriftlich{padding:clamp(1.1rem,2.4vw,1.8rem);display:grid;gap:0;font-variant-numeric:tabular-nums}
.schriftlich .posten{display:grid;grid-template-columns:6.8rem minmax(0,1fr) auto;gap:.2rem 1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--gitter)}
.schriftlich .op{font:600 1.35rem/1 var(--f-hand);color:var(--kuli)}
.schriftlich .was{font-size:.98rem;line-height:1.35}
.schriftlich .betrag{font:700 1.3rem/1.1 var(--f-serif);text-align:right;white-space:nowrap}
.schriftlich .posten.summe .betrag{font-size:1.9rem}
.schriftlich label{display:contents}
.schriftlich input{font:700 1.3rem/1.1 var(--f-serif);color:var(--kuli);text-align:right;width:6.5ch;field-sizing:content;min-width:2ch;max-width:9ch;border:0;border-bottom:3px solid var(--kuli);background:transparent;padding:0 .05em;border-radius:0}
.schriftlich input[aria-invalid="true"]{border-bottom-style:dashed}
@media (max-width:860px){.eigene{grid-template-columns:minmax(0,1fr)}}

/* ==================== Muster ohne Werte ================================
   Wo es kein öffentliches Musterblatt mit Zahlen gibt, zeigt das Muster
   nur den Aufbau. An der Stelle eines Werts steht eine Lücke mit dem,
   was dort stünde — nie ein Beispielwert, der wie ein echter aussähe. */
.luecke{display:inline-block;min-width:5.5em;padding:0 .4em;border-bottom:1.5px dotted var(--bleistift);color:var(--leise);font-style:italic;font-size:.94em;line-height:1.35}
.klammer{background:var(--kuli-zart);padding:0 .15em}
.muster .kopfzeile{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-bottom:.9rem;font-size:.92rem}
.muster .teil{font:800 .76rem/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:1.1rem 0 .55rem;padding-top:.8rem;border-top:1px solid var(--linie)}
.muster p{font-size:.97rem;line-height:1.5}
.spruch,.absaetze,.abschnitte{margin:0;padding-left:1.5rem;display:grid;gap:.6rem;font-size:.97rem;line-height:1.5}
.spruch li::marker,.absaetze li::marker,.abschnitte li::marker{font-weight:700}
.absaetze li{max-width:46rem}
.abschnitte li{font-weight:700}
.tabellen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem;font-weight:400}
.tabellen span{border:1.5px solid var(--tinte);padding:.25rem .55rem;font-size:.88rem}
.muster .warnung{border:1.5px dashed var(--tinte);padding:.5rem .7rem;margin:0 0 1rem;font-size:.92rem;color:var(--leise)}
.muster .warnung span{color:var(--tinte)}
/* Zwei Schreiben nebeneinander: die Meldung und die Antwort darauf */
.briefe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;padding-top:.2rem}
.brief{display:grid;gap:.6rem;align-content:start}
.brief h3{padding-right:0;margin-bottom:.2rem}
.brief.antwort{border-left:1.5px solid var(--linie);padding-left:1.4rem}
.briefe + figcaption{margin-top:1.3rem}
.schreiben h3:first-of-type{padding-right:8rem}
/* Bei zwei Schreiben ist jede Überschrift die erste ihres Briefs, und beide
   bekamen oben die 8rem für den Stempel: „Schadenmeldung" wurde damit auf
   320 px 326 px breit, der Brief 254 px (23.09.2026). Hier liegt der Stempel
   über beiden Schreiben, und die Briefe fangen darunter an. */
.schreiben .brief h3{padding-right:0}
.schreiben .briefe{padding-top:2.4rem}
@media (max-width:760px){.briefe{grid-template-columns:minmax(0,1fr)}.brief.antwort{border-left:0;padding-left:0;border-top:1.5px solid var(--linie);padding-top:1rem}}

/* ==================== Die kleinen Rechnungen der Blattseiten ============= */
/* Zwei Säulen: der Boden auf halber Höhe, daneben der eigene Betrag */
.saeulen{position:relative;display:flex;align-items:flex-end;gap:1.6rem;height:11rem;padding:0 .6rem;margin-top:1.8rem;border-bottom:2px solid var(--tinte)}
.saeulen::before{content:"";position:absolute;left:0;right:0;bottom:50%;border-top:1.5px dashed var(--bleistift)}
.saeule{position:relative;width:4.4rem;height:var(--h);min-height:2px;border:1.5px solid var(--tinte);border-bottom:0;background:var(--blatt);transition:height .25s ease}
.boden-saeule{background:repeating-linear-gradient(135deg,var(--blatt) 0 6px,var(--gitter) 6px 7.5px)}
.ihre-saeule{background:var(--marker)}
.ihre-saeule.gekappt{border-top:2px dashed var(--tinte)}
.saeule i{position:absolute;bottom:calc(100% + .3rem);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 1.15rem/1 var(--f-hand);color:var(--kuli);font-style:normal}

/* Die Liste zum Anhaken */
.liste{margin:0;display:grid;gap:0;padding:clamp(.8rem,2vw,1.4rem) clamp(1.1rem,2.4vw,1.8rem)}
.haken{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--gitter);font:500 1.1rem/1.3 var(--f-serif);cursor:pointer}
.haken:last-child{border-bottom:0}
.haken.eigen{margin-top:.6rem;padding-top:1rem;border-top:1.5px solid var(--tinte);font-size:1rem;color:var(--leise)}
.haken input{width:1.35rem;height:1.35rem;accent-color:var(--kuli);margin:0}
.stand-text{font:500 1.08rem/1.45 var(--f-serif)}

/* Datumsfelder in der schriftlichen Rechnung */
.schriftlich input[type="date"]{width:auto;max-width:none;field-sizing:fixed;font-size:1.05rem;min-width:9.5rem;text-align:left}
.abstaende{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:1rem}
.abstaende li::marker{color:var(--kuli)}
@media (max-width:520px){.schriftlich .posten{grid-template-columns:minmax(0,1fr) auto}.schriftlich .posten .op{grid-column:1 / -1}}

/* ==================== Der Sparplan-Rechner im Heft ======================
   Formular und Ergebnis kommen unverändert aus samples/sparplan.html;
   samples/sparplan.js hängt an ihren data-Attributen. Hier nur das
   Aussehen. Das Ergebnis bleibt am Desktop beim Scrollen stehen: am
   22.09.2026 tat es das nicht, weil body dort overflow-x:hidden trug und
   damit selbst zum Scrollbehälter wurde. Das Heft setzt so etwas nicht. */
.werkbank{display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:68rem){.werkbank{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
  .werkbank .ergebnis{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto}}
.werkbank fieldset{margin:0;border:1.5px solid var(--tinte);background:var(--blatt);box-shadow:var(--schatten);padding:1rem clamp(.9rem,2vw,1.4rem) 1.2rem}
.werkbank fieldset + fieldset{margin-top:1.4rem}
.werkbank legend{font:600 1.3rem/1.2 var(--f-serif);letter-spacing:-.01em;padding:0 .4rem;background:var(--blatt)}
.werkbank .hilfe{font-size:.92rem;line-height:1.45;color:var(--leise);margin:.2rem 0 .8rem}
.werkbank .felder{display:grid;gap:.8rem 1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.werkbank .feld{display:grid;gap:.25rem;align-content:start}
.werkbank .feld label{font-weight:700;font-size:.95rem;line-height:1.3}
.werkbank .einheit{display:flex;align-items:baseline;gap:.4rem;font-size:.92rem;color:var(--leise)}
.werkbank .feld input,.werkbank .zuzahlungen input{width:100%;min-width:0;padding:.35rem .1rem;border:0;border-bottom:2px solid var(--kuli);border-radius:0;background:transparent;
  font:700 1.12rem/1.2 var(--f-serif);color:var(--kuli);font-variant-numeric:tabular-nums}
.werkbank .feld input[aria-invalid="true"],.werkbank .zuzahlungen input[aria-invalid="true"]{border-bottom-style:dashed;background:#fff4f1}
.werkbank .fehler{color:#9a2a17;font-size:.86rem}
.werkbank .feld small{font-size:.84rem;color:var(--leise);line-height:1.35}
.werkbank .zuzahlungen{display:grid;gap:.5rem 1rem;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.werkbank .zu-kopf{font:700 .78rem/1.2 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.werkbank .schalter{display:flex;align-items:center;gap:.6rem;font-weight:700;margin:.2rem 0 .7rem}
.werkbank .schalter input{width:1.25rem;height:1.25rem;accent-color:var(--kuli)}
.werkbank [data-entnahme-felder][hidden]{display:none}
.werkbank .ergebnis{padding:clamp(1rem,2.2vw,1.5rem);display:grid;gap:1rem}
.werkbank .zustand{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;font-size:.92rem}
.werkbank .zustand b{background:var(--marker);padding:.1rem .45rem}
.werkbank .zustand button{border:1.5px solid var(--tinte);background:var(--blatt);border-radius:999px;padding:.35rem .85rem;font:700 .9rem/1 var(--f-text);cursor:pointer}
.werkbank .zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.werkbank .seite{border:1.5px solid var(--tinte);padding:.8rem .9rem}
.werkbank .seite.vertrag{background:var(--blatt)}
.werkbank .seite.depot{background:var(--kuli-zart)}
.werkbank .seite h3{font:600 1.1rem/1.2 var(--f-serif)}
.werkbank .seite .gross{font:720 clamp(1.5rem,3vw,2.1rem)/1.1 var(--f-serif);letter-spacing:-.02em;margin:.35rem 0 .1rem}
.werkbank .seite dl{margin:.5rem 0 0;display:grid;grid-template-columns:auto auto;gap:.15rem .6rem;font-size:.88rem}
.werkbank .seite dt{color:var(--leise)}
.werkbank .seite dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.werkbank .satz{font:500 1.06rem/1.45 var(--f-serif)}
.werkbank .satz strong{background:linear-gradient(transparent 52%,var(--marker) 52%,var(--marker) 90%,transparent 90%);font-weight:700}
.werkbank .hinweise{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;font-size:.92rem}
.werkbank .hinweise li::marker{color:var(--kuli)}
.werkbank details summary{cursor:pointer;font:600 1.05rem/1.3 var(--f-serif)}
.werkbank .tabelle{overflow-x:auto;margin-top:.6rem}
.werkbank table{border-collapse:collapse;width:100%;font-size:.86rem;font-variant-numeric:tabular-nums}
.werkbank th,.werkbank td{padding:.3rem .45rem;text-align:right;border-bottom:1px solid var(--linie);white-space:nowrap}
.werkbank th:first-child,.werkbank td:first-child{text-align:left}
.werkbank thead th{font-weight:700;border-bottom:1.5px solid var(--tinte)}
.werkbank .minus{color:#9a2a17}
.werkbank .grenzen ul{margin:.5rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.92rem}
@media (max-width:40rem){.werkbank .zwei{grid-template-columns:minmax(0,1fr)}}

/* ==================== Die Seiten außerhalb der Leiste ===================
   Versicherung, Investieren und Haushalt stehen seit dem 23.09.2026 nicht
   mehr in der Navigation; ihre Adressen bleiben. Inhalt wie vorher, im
   Heft gesetzt, ohne die bewegten Bühnen. */

/* Häufige Fragen: jede Frage ein aufklappbares Blatt */
.fragen-liste{display:grid;gap:.9rem;max-width:52rem}
.fragen-liste details{padding:.9rem 1.2rem}
.fragen-liste summary{cursor:pointer;font:600 1.12rem/1.35 var(--f-serif);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary::after{content:"+";font:700 1.4rem/1 var(--f-hand);color:var(--kuli)}
.fragen-liste details[open] summary::after{content:"–"}
.fragen-liste details p{margin-top:.7rem;line-height:1.55}
.quellen-titel{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:.8rem 0 1rem}
.recht-blatt > p{line-height:1.6}
.recht-blatt > p + p{margin-top:.8rem}
.quellen-liste{margin:1rem 0;padding-left:1.1rem;display:grid;gap:.4rem}
.quellen-liste li::marker{color:var(--kuli)}

/* Versicherung: sechs Blätter, dann die Arbeitskraft */
.risiken > li{min-height:0}
.risiken .hand{font-size:1.5rem;line-height:1;margin:0}
.stichwoerter{display:flex;flex-wrap:wrap;gap:.35rem}
.stichwoerter span{border:1.2px solid var(--tinte);border-radius:999px;padding:.12rem .55rem;font-size:.82rem}
.bleibt{margin:.3rem 0 0;display:grid;gap:.45rem;border-top:1px solid var(--gitter);padding-top:.6rem}
.bleibt dt{font:700 .72rem/1.2 var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.bleibt dd{margin:.1rem 0 0;font:600 1.02rem/1.35 var(--f-serif)}
.arbeitskraft{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.arbeitskraft .karte{grid-column:auto;transform:none}
.arbeitskraft .karte:first-child{transform:rotate(-.5deg)}
.arbeitskraft .karte:last-child{transform:rotate(.5deg)}
.arbeitskraft-text{margin-top:1.4rem;max-width:44rem;font:400 1.1rem/1.55 var(--f-serif)}
/* Tausend Punkte als Raster (40 × 25), fünf davon markiert. Nur Schmuck:
   die Zahl steht im Text daneben. */
.punkte{position:relative;width:100%;aspect-ratio:40 / 25;margin:.6rem 0 .2rem;
  background-image:radial-gradient(circle,var(--bleistift) 34%,transparent 38%);background-size:calc(100% / 40) calc(100% / 25)}
.punkte .fuenf i{position:absolute;top:0;width:calc(100% / 40);height:calc(100% / 25);background:radial-gradient(circle,var(--kuli) 46%,transparent 50%)}
.punkte .fuenf i:nth-child(1){left:calc(100% / 40 * 0)}
.punkte .fuenf i:nth-child(2){left:calc(100% / 40 * 1)}
.punkte .fuenf i:nth-child(3){left:calc(100% / 40 * 2)}
.punkte .fuenf i:nth-child(4){left:calc(100% / 40 * 3)}
.punkte .fuenf i:nth-child(5){left:calc(100% / 40 * 4)}
@media (max-width:860px){.arbeitskraft{grid-template-columns:minmax(0,1fr)}.arbeitskraft .karte{transform:none!important}}
.saeulen-bild{margin:0;padding:clamp(1rem,2.4vw,1.6rem);display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:center;max-width:44rem}
.luecke-saeule{display:grid;grid-template-rows:4fr 5fr 3fr;width:7.5rem;height:16rem;border:1.5px solid var(--tinte)}
.luecke-saeule span{display:grid;place-items:center;text-align:center;font:600 1.05rem/1.05 var(--f-hand);color:var(--kuli);padding:.2rem}
.luecke-saeule .lohn{background:var(--blatt);border-bottom:1.5px dashed var(--tinte)}
.luecke-saeule .spalt{background:repeating-linear-gradient(135deg,var(--blatt) 0 7px,var(--gitter) 7px 9px)}
.luecke-saeule .boden{background:var(--marker);color:var(--tinte)}
.saeulen-bild figcaption{line-height:1.55}
@media (max-width:520px){.saeulen-bild{grid-template-columns:minmax(0,1fr)}}

/* Investieren: zehn Schritte, jeder ein Blatt */
.schritte{list-style:none;margin:0;padding:clamp(1rem,3vh,2rem) 0 0;display:grid;gap:clamp(1.6rem,4vh,2.8rem);max-width:52rem}
.schritt{padding:clamp(1.1rem,2.6vw,1.9rem);display:grid;gap:.75rem;scroll-margin-top:1rem}
.schritt:nth-child(odd){transform:rotate(-.35deg)}
.schritt:nth-child(even){transform:rotate(.35deg)}
.schritt .hand{font-size:1.35rem;line-height:1.1}
.schritt h2{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.03em}
.schritt p{line-height:1.55}
.merksatz{font:600 1.12rem/1.45 var(--f-serif);border-top:1.5px solid var(--tinte);padding-top:.7rem;margin-top:.2rem}
@media (max-width:760px){.schritt{transform:none!important}}
.kaufkraft{display:grid;gap:.4rem;padding:.8rem 1rem;background:var(--kuli-zart);border-left:3px solid var(--kuli)}
.kaufkraft-zeile{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.kaufkraft-zeile b{font:720 clamp(1.5rem,3vw,2.1rem)/1.1 var(--f-serif);font-variant-numeric:tabular-nums}
.kaufkraft-eingabe input{font:700 1.05rem/1 var(--f-text);color:var(--kuli);width:3.4ch;field-sizing:content;min-width:1.6ch;border:0;border-bottom:2px solid var(--kuli);background:transparent;text-align:center;padding:0 .1em}
.kaufkraft-eingabe input[aria-invalid="true"]{border-bottom-style:dashed}
.kacheln-paar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:end}
.kacheln-paar > div{display:grid;gap:.3rem;justify-items:start}
.kacheln{display:block;height:5.4rem;border:1.5px solid var(--tinte)}
.kacheln.eins{width:5.4rem;background:var(--marker)}
.kacheln.viele{width:100%;max-width:24rem;background-color:var(--blatt);
  background-image:linear-gradient(to right,var(--tinte) 1px,transparent 1px),linear-gradient(to bottom,var(--tinte) 1px,transparent 1px);
  background-size:calc(100% / 30) calc(100% / 6)}
.antworten{margin:0;display:grid;gap:.2rem}
.antworten > div{padding:.7rem 0;border-top:1px solid var(--gitter)}
.antworten > div:first-child{border-top:0}
.antworten dt{font:600 1.1rem/1.35 var(--f-serif)}
.antworten dd{margin:.25rem 0 0;line-height:1.55}
.urteil{font:700 1.2rem/1 var(--f-hand);color:var(--leise);margin-left:.4rem}
.urteil.ja{color:var(--kuli)}
.formen{margin:0;padding-left:1.5rem;display:grid;gap:.5rem;line-height:1.5}
.formen li::marker{font:700 1rem var(--f-hand);color:var(--kuli)}
.formen b{font-family:var(--f-serif);font-weight:650}
.herkunft{font:700 .72rem/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);border:1px solid var(--bleistift);border-radius:999px;padding:.15rem .45rem;margin:0 .3rem;vertical-align:.1em}
.herkunft.selbst{color:var(--kuli);border-color:var(--kuli)}
.zwei-listen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.zwei-listen h3{font-size:1.2rem;margin-bottom:.5rem;display:flex;align-items:baseline;gap:.5rem}
.zwei-listen .zahl{font:720 2.2rem/1 var(--f-serif);color:var(--kuli)}
.zwei-listen ul{margin:0;padding-left:1.1rem;display:grid;gap:.25rem}
@media (max-width:620px){.zwei-listen{grid-template-columns:minmax(0,1fr)}}
.vier-fragen{margin:0;padding-left:1.6rem;display:grid;gap:.5rem;font:500 1.2rem/1.4 var(--f-serif)}
.vier-fragen li::marker{font:700 1.1rem var(--f-hand);color:var(--kuli)}
.saetze{margin:0;padding-left:1.6rem;display:grid;gap:.4rem;font:600 1.25rem/1.4 var(--f-serif)}

/* Haushalt: der Rechner von vorher, Markup unverändert, im Heft gesetzt.
   [hidden] muss gewinnen: haushalt.js blendet Zeilen damit ein und aus. */
.haushalt-rechner [hidden]{display:none!important}
.haushalt-rechner .bogen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.haushalt-rechner .blatt{background:var(--blatt);border:1.5px solid var(--tinte);box-shadow:var(--schatten);padding:clamp(1.1rem,2.4vw,1.8rem);display:grid;gap:.2rem}
.haushalt-rechner .blatt > .hand{font-size:1.45rem;margin-bottom:.4rem}
.haushalt-rechner .zeile{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem;gap:.3rem 1rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--gitter)}
.haushalt-rechner .zeile b{display:block;font:600 1.02rem/1.3 var(--f-serif)}
.haushalt-rechner .zeile small{display:block;font-size:.84rem;line-height:1.35;color:var(--leise)}
.haushalt-rechner .zeile.kopfzeile{grid-template-columns:minmax(0,1fr);font:700 .76rem/1.2 var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);border-bottom:0;padding-top:1rem}
.haushalt-rechner .zeile input{width:100%;min-width:0;font:700 1.15rem/1.2 var(--f-serif);color:var(--kuli);text-align:right;border:0;border-bottom:2px solid var(--kuli);background:transparent;padding:.2rem .1rem;border-radius:0}
.haushalt-rechner .zeile input[aria-invalid="true"]{border-bottom-style:dashed}
.haushalt-rechner .hinzu{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.8rem 0}
.haushalt-rechner .hinzu button{font:600 .88rem/1 var(--f-text);background:var(--blatt);border:1.2px solid var(--tinte);border-radius:999px;padding:.45rem .7rem;cursor:pointer;color:var(--tinte)}
.haushalt-rechner .hinzu button i{font-style:normal;color:var(--kuli);margin-right:.25rem}
.haushalt-rechner .hinzu button:hover{background:var(--kuli-zart)}
.haushalt-rechner dl{margin:0}
.haushalt-rechner .summe{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--gitter)}
.haushalt-rechner .summe dt{font-size:.98rem;line-height:1.35}
.haushalt-rechner .summe dd{margin:0;font:700 1.25rem/1.1 var(--f-serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.haushalt-rechner .summe.gross{font:inherit;letter-spacing:0}
.haushalt-rechner .summe.gross dd{font-size:clamp(1.9rem,3.4vw,2.6rem);background:linear-gradient(transparent 55%,var(--marker) 55%,var(--marker) 92%,transparent 92%)}
.haushalt-rechner .stand{font:500 1rem/1.45 var(--f-serif);color:var(--tinte)}
.haushalt-rechner .stand:empty{display:none}
.haushalt-rechner .fussnote,.haushalt-rechner .note{font-size:.86rem;line-height:1.45;color:var(--leise);margin-top:.5rem}
.haushalt-rechner .fussnote p + p{margin-top:.3rem}
.haushalt-rechner .leise{font-size:.88rem;color:var(--leise)}
.haushalt-rechner .knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.8rem}
.haushalt-rechner .knopf{padding:.65rem 1rem;font-size:.95rem}
.haushalt-rechner .knopf.still{background:transparent;color:var(--tinte);border:1.5px solid var(--tinte)}
.haushalt-rechner .knopf.still:hover{background:var(--kuli-zart)}
.haushalt-rechner h3{font-size:1.35rem;margin:1.4rem 0 .3rem}
.haushalt-rechner .regler{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;padding:.7rem 0}
.haushalt-rechner .regler label{font-weight:700;font-size:.95rem}
.haushalt-rechner .regler output{font:700 1.1rem/1 var(--f-serif);color:var(--kuli)}
.haushalt-rechner .regler input[type="range"]{grid-column:1 / -1;width:100%;accent-color:var(--kuli)}
.haushalt-rechner .regler .note{grid-column:1 / -1}
.haushalt-rechner .feld-ergebnis{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-items:end;margin-top:.6rem}
.haushalt-rechner .feld-ergebnis dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .8rem}
.haushalt-rechner .feld-ergebnis dt{font:700 .74rem/1.2 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);align-self:center}
.haushalt-rechner .feld-ergebnis dd{margin:0;text-align:right;font:700 1.15rem/1.2 var(--f-serif);font-variant-numeric:tabular-nums}
.haushalt-rechner .pflanze{position:relative;height:6.5rem}
.haushalt-rechner .pflanze img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.haushalt-rechner .pflanze img.an{opacity:1}
.haushalt-rechner .antwort-leiste{position:sticky;bottom:0;z-index:4;display:flex;justify-content:space-between;gap:1rem;background:var(--tinte);color:var(--grund);padding:.6rem 1rem;margin-bottom:1rem}
/* Die beiden Schaubilder, in den Farben des Hefts */
.haushalt-rechner svg.monat{width:100%;height:auto;display:block;margin:.6rem 0 .4rem;overflow:visible}
.haushalt-rechner .monat .m-rahmen{fill:var(--blatt);stroke:var(--tinte);stroke-width:1.5}
.haushalt-rechner .monat [data-segmente] rect{fill:var(--bleistift);stroke:var(--blatt);stroke-width:1.5}
.haushalt-rechner .monat [data-segmente] rect:nth-child(even){fill:var(--leise)}
.haushalt-rechner .monat .m-rest{fill:var(--marker)}
.haushalt-rechner .monat .m-kante{stroke:var(--tinte);stroke-width:2}
.haushalt-rechner svg.jahr{width:100%;height:auto;display:block;margin:.8rem 0}
.haushalt-rechner .jahr .j-rahmen{fill:var(--blatt);stroke:var(--tinte);stroke-width:1.2}
.haushalt-rechner .jahr .j-fix{fill:var(--bleistift)}
.haushalt-rechner .jahr .j-rest{fill:var(--marker)}
.haushalt-rechner .jahr [data-art="sonder"] .j-rest{fill:var(--kuli-zart)}
.haushalt-rechner .jahr .j-nr{font:700 13px var(--f-text);fill:var(--tinte);opacity:.75}
@media (max-width:900px){.haushalt-rechner .bogen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.haushalt-rechner .zeile{grid-template-columns:minmax(0,1fr) 6.5rem}}

/* Lange deutsche Wörter auf schmalen Schirmen: „Jahreshöchstbeitragsgrundlage"
   ist allein 268 px breit und schob auf 320 px zwei Blätter über den Rand
   (gemessen 22.09.2026). Dort trennt der Browser nach Silben (lang=de-AT);
   Überschriften bleiben bei ihren gesetzten Trennstellen. */
@media (max-width:520px){p,li,dd,dt,figcaption,summary,td,th{hyphens:auto;-webkit-hyphens:auto}}

/* ---- Chinesisch -------------------------------------------------------
   Seit 23.09.2026 abends gibt es jede Heft-Seite auch auf vereinfachtem
   Chinesisch (Owner: „中文补齐然后上线"). Dieselben drei Schichten:
   gedruckt = Fraunces/Karla für Zahlen und lateinische Wörter, dahinter
   Noto Serif SC für Titel und die Systemschrift für Text; von Hand =
   Caveat, dahinter LXGW WenKai; markiert bleibt gelb. Die beiden
   chinesischen Schnitte stehen in /fonts/fonts-cjk.css (nur die
   chinesischen Seiten laden die Datei).

   Was lateinische Auszeichnung braucht und chinesische zerstört (siehe
   docs, cjk-display-typografie): Durchschuss unter 1,2 lässt CJK-Zeilen
   aneinanderstoßen (Tintenhöhe ≈ 1,03 em), negatives Tracking drückt die
   Zeichen zusammen, und Kursiv gibt es für Chinesisch nicht — der Browser
   schrägt dann bloß. Die deutschen Teile auf der Seite (das Blatt selbst,
   lang="de-AT") behalten ihre Regeln. */
html:lang(zh){
  --f-serif:'Fraunces','Noto Serif SC Subset','Songti SC','Source Han Serif SC','Noto Serif CJK SC',SimSun,STSong,serif;
  --f-text:'Karla',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Segoe UI',sans-serif;
  --f-hand:'Caveat','LXGW WenKai Subset','Kaiti SC',STKaiti,KaiTi,cursive;
}
html:lang(zh) body{line-height:1.75}
html:lang(zh) :is(h1,h2,h3,h4):not([lang|="de"] *){line-height:1.32;letter-spacing:0}
html:lang(zh) :is(.frage,.marke i,.von i,.recht time){font-style:normal}
html:lang(zh) :is(.oben,.kurz,.frage){letter-spacing:0;line-height:1.5}
html:lang(zh) :is(.etikett,.absender,.kanaele .art,.bleibt dt,.herkunft,.zu-kopf,.formel-titel,.muster .stempel){letter-spacing:.04em}
html:lang(zh) :is(.glied .notiz,.rand p,.zeilen .rechnung,.luecke-saeule span,.urteil,.schriftlich .op){line-height:1.4}
html:lang(zh) :is(.ausgang-blatt h2,.stapel .ausgang-blatt h3,.fuss strong){line-height:1.3}
html:lang(zh) :is(.haupt a,.ausgang,.marke b){letter-spacing:0}
/* Chinesische Überschriften brechen nur an Wortgrenzen: nach Satzzeichen und
   an den <wbr> der Quellen. Vorher brach der Browser zwischen zwei beliebigen
   Zeichen, auf 320 px „养老金账 / 户对账单“, auf 375 px „你的单据长 / 得不一样？“
   (gemessen 23.09.2026 abends). break-word nur als Netz, falls ein Stück
   länger ist als die Zeile. */
html:lang(zh) :is(h1,h2,h3):not([lang|="de"] *){word-break:keep-all;overflow-wrap:break-word}
html:lang(zh) .gross small{line-height:1.5}
/* Einheiten neben den Feldern des Sparplans: chinesisch darf zwischen
   jedem Zeichen umbrochen werden, und in der schmalen Spalte stand dann
   „% 每 / 年“. Umbrochen wird nur an Leerzeichen und Satzzeichen. */
html:lang(zh) .werkbank .einheit span{word-break:keep-all}
/* Dasselbe in den Rechnungen von Hand („1.100,15 € 每月“ brach zu „每 / 月“). */
html:lang(zh) :is(.zeilen .rechnung,.rand p,.glied .notiz){word-break:keep-all}
/* Unter dem chinesischen Titel steht der deutsche, so wie auf dem Blatt,
   das man in der Hand hat; in den Zeilen der deutsche Name der Zeile. */
.de-name{font:500 clamp(.98rem,1.3vw,1.12rem)/1.4 var(--f-text);color:var(--leise);margin:-.2rem 0 .1rem}
.de-name [lang]{font-weight:700;color:var(--tinte)}
.zeilen h3 .de{display:block;margin-top:.15rem;font:600 .8rem/1.25 var(--f-text);letter-spacing:.02em;color:var(--leise);overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{body{background:#fff}.verstreut,.objekt,.sprunglink{display:none}}