/* ============================================================
   vorzimmer — 家族手作语汇，唯一依据 beratung-cockpit/VISUAL-SPEC.md
   token 值从 weibin.at v3 base.css 移植，不许改
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 1000;src:url(/_v/7e744849028e/fonts/fraunces-latin-normal3.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;src:url(/_v/cd614fed3fa0/fonts/karla-latin-normal3.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Zhuque Fangsong';font-style:normal;font-weight:400;src:url(/_v/5f25b58c69d8/zh/vorzimmer/zhuque-subset.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;src:url(/_v/891951df5e8b/fonts/caveat-latin-normal1.woff2) format('woff2');font-display:swap}

:root{
  --paper:#fcf8f1; --paper-2:#f5ecdd; --paper-3:#ebdfc9; --paper-edge:#ddd0b8;
  --ink:#241e1a; --ink-soft:#574a41; --ink-faint:#8b7d70;
  --rule:#241e1a26; --rule-2:#241e1a4d;
  --red:#d0432c; --red-soft:#d0432c1f;
  --blue:#2f6489; --blue-soft:#2f64891f;
  --green:#6b9450; --green-soft:#6b945024;
  --yellow:#f2c53f; --yellow-soft:#f2c53f5c;
  --ochre:#a9741a;
  --draw-1:6px 18px 8px 15px / 14px 7px 16px 8px;
  --draw-2:16px 7px 14px 9px / 7px 15px 8px 13px;
  --draw-3:9px 14px 7px 17px / 15px 8px 13px 7px;
  --ease:cubic-bezier(0.22,0.68,0.24,1);
  --f-disp:'Fraunces','Zhuque Fangsong','Songti SC','SimSun',serif;
  --f-body:'Karla',-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  /* 手写层。Caveat 放最前面只吃拉丁和数字，中文落到楷体——
     否则楷体会把 120 € / 36–45 渲染成全角，读出来是「1 2 0」。
     实测同一串数字楷体比拉丁字体宽 24%，而预算和年龄段正是要一眼看清的两个值。 */
  --f-hand:'Caveat','Kaiti SC','STKaiti','KaiTi','DFKai-SB','TW-Kai',serif;
  /* 文件原文引用不属于手写层：那是从保单上抄下来的德语，要像引文不像笔迹 */
  --f-quote:'Karla',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* 纸纹。让页面像一个物件，不是一个表面 */
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(/zh/vorzimmer/%23p)' opacity='0.5'/%3E%3C/svg%3E");
}
#app{position:relative; z-index:2}
.wrap{max-width:41rem; margin-inline:auto; padding:1.15rem 1.15rem 3.5rem}

/* ---------- 文字层 ---------- */
h1,h2,h3{font-family:var(--f-disp); font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 144;
  font-weight:590; letter-spacing:0; margin:0}
h1{font-size:clamp(1.75rem,6.8vw,2.6rem); line-height:1.28}
/* 标题的两行各自成块：断行由文案决定，长句还能再自然折行。
   德语句子比中文长得多，写死不换行会把整页撑破。 */
.l1{display:block}
h2{font-size:clamp(1.36rem,5.6vw,1.8rem); line-height:1.32}
h3{font-size:1.14rem; line-height:1.4}
:lang(zh-Hans){text-wrap:balance}
/* 中文标题只在词和词之间换行：标点后面，和文案里写好的 <wbr>。
   不加这条，浏览器在任意两个汉字之间都能断：weibin.at 上门口标题在手机和
   桌面宽度都断成「把见面的地 / 基打好。」，学习页 320px 上是「健康问题答得不 / 全」
   （2026-09-24 实测）。break-word 只兜底：一段没有断点的字比一行还长时照样折行，
   不把页面撑破。德语标题不受影响。 */
:is(h1,h2,h3):lang(zh){word-break:keep-all; overflow-wrap:break-word}
p{margin:0}
.label{font-family:var(--f-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; font-size:.72rem; color:var(--ink-faint)}
.label:lang(zh-Hans),.label .zh{letter-spacing:.06em; text-transform:none; font-size:.8125rem}
.de{color:var(--ink-soft); font-family:'Karla',sans-serif; font-weight:600}
.dim{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
.small{font-size:.86rem; line-height:1.65}
.hand{font-family:var(--f-hand); color:var(--blue)}
.why{font-family:var(--f-hand); color:var(--blue); font-size:.98rem; line-height:1.6; margin-top:.55rem}
.n{font-family:'Fraunces',serif; font-variation-settings:'SOFT' 55,'WONK' 1;
  font-weight:640; color:var(--red); font-size:1.3em; line-height:1; margin-right:.4rem}

/* ---------- 手作便签（唯一允许的盒子形态） ---------- */
.note{background:#fff; border:2px solid var(--ink); box-shadow:3px 4px 0 var(--rule-2);
  border-radius:var(--draw-1); padding:1.15rem 1.2rem 1.25rem; rotate:-.35deg}
.note:nth-of-type(2n){border-radius:var(--draw-2); rotate:.3deg}
.note:nth-of-type(3n){border-radius:var(--draw-3)}
.notbox{background:var(--red-soft); border:2px solid var(--red);
  border-radius:var(--draw-2); padding:.7rem .95rem; rotate:.25deg}
.padnote{background:var(--paper-2); border:2px dashed var(--rule-2);
  border-radius:var(--draw-3); padding:.75rem .95rem}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.62rem 1.5rem; cursor:pointer;
  font-family:var(--f-disp); font-variation-settings:'SOFT' 55,'WONK' 1;
  font-size:1.13rem; letter-spacing:.02em; line-height:1.3;
  background:var(--ink); color:var(--paper); border:2px solid var(--ink);
  border-radius:var(--draw-1); box-shadow:3px 4px 0 var(--rule-2);
  transition:translate .18s var(--ease), box-shadow .18s var(--ease);
  text-decoration:none; -webkit-tap-highlight-color:transparent}
.btn:hover,.btn:active{translate:0 -2px; box-shadow:4px 6px 0 var(--rule-2)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover,.btn--ghost:active{background:var(--yellow-soft)}
.btn--line{background:transparent; color:var(--ink); border:none; box-shadow:none;
  min-height:44px; padding:.4rem .5rem; font-size:1rem; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--rule-2)}
.btn--line:hover{translate:none; box-shadow:none; text-decoration-color:var(--ink)}
.btn[disabled]{opacity:.4; pointer-events:none}
.btn--red{background:var(--red); border-color:var(--red)}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.8rem}
.chip{display:inline-flex; align-items:center; gap:.45rem; min-height:46px;
  padding:.55rem 1rem; cursor:pointer; font-family:var(--f-body); font-size:.96rem;
  background:#fff; border:2px solid var(--rule-2); border-radius:var(--draw-2);
  transition:background .16s var(--ease), border-color .16s var(--ease);
  -webkit-tap-highlight-color:transparent}
.chip:nth-child(2n){border-radius:var(--draw-3); rotate:.25deg}
.chip:nth-child(3n){border-radius:var(--draw-1); rotate:-.2deg}
.chip:hover{background:var(--yellow-soft); border-color:var(--ink)}
.ck{width:15px; height:15px; flex:none}
.ck path{stroke:var(--ink); stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.btn .ck path{stroke:currentColor}
.chip .ck{opacity:0}
.chip .ck path{stroke-dasharray:24; stroke-dashoffset:24}
.chip.on{border-color:var(--ink); background:linear-gradient(104deg,#f2c53f00 1%,var(--yellow-soft) 7% 93%,#f2c53f00 99%),#fff}
.chip.on .ck{opacity:1}
.chip.on .ck path{stroke-dashoffset:0; transition:stroke-dashoffset .2s var(--ease)}

/* ---------- 手绘记号 ---------- */
.circ{position:relative; display:inline-block; padding:.04em .22em; white-space:nowrap}
.circ svg{position:absolute; inset:-16% -7%; width:114%; height:132%;
  max-width:none; pointer-events:none; overflow:visible}
.circ svg path{stroke:var(--red); stroke-width:3.5; fill:none;
  stroke-linecap:round; vector-effect:non-scaling-stroke}
/* 圈和紧跟在后面的中文标点，由 fmt() 包成一块，标点就不会落到下一行行首 */
.nobr{white-space:nowrap}
.squig{display:block; width:min(13.5rem,72%); height:9px; margin-top:.35rem}
.squig path{stroke:var(--yellow); stroke-width:5.5; fill:none; stroke-linecap:round}
.hl{background:linear-gradient(100deg,#f2c53f00 2%,var(--yellow-soft) 8% 92%,#f2c53f00 98%);
  padding:.05em .28em; border-radius:.35em .6em .4em .7em; box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
.pencil::before{content:'✎ '; color:var(--blue)}
.term{font-weight:700; color:var(--ink-soft); cursor:pointer; border-bottom:2px dashed var(--rule-2)}
.term:hover{background:var(--yellow-soft); border-bottom-color:var(--ink)}

/* ---------- 小钟说话 ---------- */
.says{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end;
  gap:.9rem; margin-bottom:1.1rem}
.says__xz{width:auto; flex:none}
.says__bubble{position:relative; align-self:center; padding:.8rem 1.05rem;
  background:#fff; border:2px solid var(--ink); border-radius:var(--draw-3);
  max-width:30rem; box-shadow:2px 3px 0 var(--rule-2)}
.says__bubble::before{content:''; position:absolute; inset-block-start:50%;
  inset-inline-start:-8px; width:14px; height:14px; rotate:45deg; translate:0 -50%;
  background:#fff; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  border-radius:0 0 0 3px}
.says__bubble::after{content:''; position:absolute; inset-block-start:50%;
  inset-inline-start:-1px; width:4px; height:15px; translate:0 -50%; background:#fff}
.says__bubble p{margin:0; font-size:1.02rem; line-height:1.6}

/* ---------- 进度（一排手画方框） ---------- */
.prognav{display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem}
.prog{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:1.2rem}
.prog .pbox{width:19px; height:19px; position:relative}
.prog .pbox svg{width:100%; height:100%; overflow:visible}
.prog .pbox .bx{stroke:var(--rule-2); stroke-width:1.9; fill:none; stroke-linejoin:round}
.prog .pbox.cur .bx{stroke:var(--ink)}
.prog .pbox.cur{background:var(--yellow-soft); border-radius:40% 55% 45% 60%}
.prog .pbox .tick{stroke:var(--green); stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.prog .pbox:nth-child(2n){rotate:2.5deg}
.prog .pbox:nth-child(3n){rotate:-2deg}
.prog .pbox:nth-child(5n){rotate:3.5deg}

/* ---------- 表单手写层 ---------- */
.inp,.ta{font-family:var(--f-hand); color:var(--blue); font-size:1.08rem;
  background:transparent; border:none; border-bottom:2px dashed var(--rule-2);
  padding:.4rem .15rem; width:100%; border-radius:0}
.inp:focus,.ta:focus{outline:none; border-bottom-color:var(--ink)}
.ta{border:2px dashed var(--rule-2); border-radius:var(--draw-3); padding:.6rem .8rem;
  min-height:4.4rem; resize:vertical; line-height:1.7}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}

/* ---------- 硫酸纸抽屉（术语） ---------- */
.sheetback{position:fixed; inset:0; z-index:50; background:#241e1a14}
.sheet{position:fixed; inset-inline:0; bottom:0; z-index:51; max-height:76vh;
  overflow:auto; overscroll-behavior:contain; padding:1.1rem 1.15rem 2.2rem;
  background:rgba(253,250,244,.87);
  -webkit-backdrop-filter:blur(2.5px) saturate(.88); backdrop-filter:blur(2.5px) saturate(.88);
  border-top:1px solid #241e1a1f; border-radius:14px 10px 0 0 / 8px 12px 0 0;
  box-shadow:0 -3px 18px rgba(36,30,26,.13), inset 0 -1px 0 rgba(255,255,255,.9)}
.sheet::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(/zh/vorzimmer/%23q)' opacity='0.35'/%3E%3C/svg%3E")}
.sheet>*{position:relative}
.gloss{display:grid; gap:.9rem; margin-top:.9rem}
.gloss dt{font-family:'Karla',sans-serif; font-weight:800; font-size:1.02rem}
.gloss dt .zh2{font-family:var(--f-disp); font-weight:590; margin-left:.45rem}
.gloss dd{margin:0; font-size:.92rem; line-height:1.7; color:var(--ink-soft)}
.gloss .gitem{padding:.55rem .7rem; border-radius:var(--draw-3)}
.gloss .gitem.mark{background:var(--yellow-soft)}

/* ---------- 杂项 ---------- */
.stack{display:grid; gap:1rem}
.stack--lg{gap:1.4rem}
.row{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
.footlegal{margin-top:2.6rem; padding-top:1rem; border-top:2px solid var(--rule);
  display:grid; gap:.3rem; color:var(--ink-faint); font-size:.78rem; line-height:1.6}
.qrow{display:grid; grid-template-columns:auto 1fr; gap:.5rem .6rem; align-items:baseline}
.snip{font-family:var(--f-quote); color:var(--ink-soft); font-size:.92rem; line-height:1.6;
  overflow-wrap:anywhere; padding-left:.6rem; border-left:2px solid var(--rule-2)}
.fieldrow{display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem;
  padding:.7rem 0; border-bottom:2px solid var(--rule); align-items:start}
.fieldrow:last-child{border-bottom:none}
.okbtn{min-width:52px; min-height:44px; cursor:pointer; background:#fff;
  border:2px solid var(--rule-2); border-radius:var(--draw-3);
  font-family:var(--f-body); font-size:.9rem; padding:.3rem .6rem}
.okbtn.on{border-color:var(--ink);
  background:linear-gradient(104deg,#f2c53f00 1%,var(--yellow-soft) 7% 93%,#f2c53f00 99%),#fff}
/* 蓝箭头必须指向某个东西（VISUAL-SPEC §2.6 是手法不是装饰）。
   这里从「给已经有保单的人」那句指回上面那个幽灵按钮。 */
.pointup{display:grid; grid-template-columns:auto 1fr; gap:.1rem .6rem; align-items:start}
.pointup svg{width:38px; height:52px; max-width:none; margin-top:-.6rem; rotate:184deg}
.pointup path{stroke:var(--blue); stroke-width:2.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.copywrap{display:grid; gap:.5rem}
/* 「发出去」那一段。摘要写完了，缺的是往哪儿发——所以它排在复制和 PDF 之前，
   是终点不是附录。按钮撑满一行：手机上够得着，两条路一眼看全，不用挑。 */
.sendwrap{display:grid; gap:.55rem; margin-top:1.1rem}
.sendwrap .btn{width:100%}
.sendwrap .who{margin:0}
.sendwrap .who a{color:inherit}
.sumnote dl{display:grid; grid-template-columns:auto 1fr; gap:.32rem .8rem; margin:0}
.sumnote dt{color:var(--ink-faint); font-size:.85rem; white-space:nowrap; padding-top:.12rem}
.sumnote dd{margin:0; font-family:var(--f-hand); color:var(--blue); font-size:1.02rem; line-height:1.6}
.tiles{display:grid; gap:.85rem}
.tile{display:block; width:100%; text-align:left; cursor:pointer; border:none;
  background:none; padding:0; font:inherit; color:inherit}
.tile .note{transition:translate .18s var(--ease), box-shadow .18s var(--ease)}
.tile:hover .note{translate:0 -2px; box-shadow:4px 6px 0 var(--rule-2)}
.locked{display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:center;
  padding:.55rem .3rem; border-bottom:2px solid var(--rule); color:var(--ink-faint)}
.locked:last-child{border-bottom:none}
.locked .lbox{width:20px; height:20px}
.locked .lbox .bx{stroke:var(--rule-2); stroke-width:1.9; fill:none; stroke-linejoin:round}
img{max-width:100%}
.hidden{display:none !important}
/* 健康清单：读的东西，不是填的东西 */
.hlist{margin:1rem 0 0; padding-left:1.15rem}
.hlist li::marker{color:var(--red); font-weight:700}
.hlist b{font-weight:700}

/* 语言切换。固定右上，不占文档流；小而始终在手边。 */
.langs{position:fixed; top:.5rem; right:.55rem; z-index:40; display:flex; gap:3px;
  padding:3px; background:rgba(253,250,244,.92);
  -webkit-backdrop-filter:blur(2.5px) saturate(.9); backdrop-filter:blur(2.5px) saturate(.9);
  border:2px solid var(--ink); border-radius:var(--draw-2);
  box-shadow:2px 3px 0 var(--rule-2)}
.lg{min-width:34px; min-height:34px; padding:.2rem .42rem; cursor:pointer;
  font-family:var(--f-body); font-size:.78rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink-soft); background:transparent; border:none; border-radius:7px 5px 6px 4px;
  -webkit-tap-highlight-color:transparent}
.lg:hover{color:var(--ink); background:var(--yellow-soft)}
.lg.on{color:var(--ink);
  background:linear-gradient(102deg,#f2c53f00 2%,var(--yellow-soft) 9% 91%,#f2c53f00 98%)}
/* 切换器压在右上角，第一屏的内容要给它让出位置 */
.wrap{padding-top:2.9rem}
@media (min-width:44rem){ .langs{top:.7rem; right:.9rem} }

/* ---------- 打印：出一份能放进文件夹的记录，不是屏幕的截图 ---------- */
.printonly{display:none}
@media print{
  @page{ size:A4; margin:16mm 15mm 14mm; }
  html,body{background:#fff !important}
  body::before{display:none !important}          /* 纸纹在纸上是多余的 */
  /* .sendwrap 整块隐藏，不能只靠 .btn：里面的身份披露和提示是 <p>，
     那些规则捞不到，会跟着摘要一起印到纸上。联系按钮和身份声明属于
     屏幕上做决定的那一刻，不属于顾客带去面谈的那张纸。 */
  .langs,.says__xz,.copywrap .btn,.copywrap .btn--line,
  .prognav,.prog,.btn,.sheetback,.sheet,.sendwrap{display:none !important}
  .wrap{max-width:none; padding:0; margin:0}
  .printonly{display:block}
  .says{display:block; margin:0 0 6mm}
  .says__bubble{border:none; box-shadow:none; padding:0; max-width:none;
    border-radius:0; font-size:10.5pt; color:#444}
  .says__bubble::before,.says__bubble::after{display:none}
  .note{border:1.2pt solid #241e1a; box-shadow:none; border-radius:2mm;
    rotate:none; break-inside:avoid; padding:6mm 6mm 7mm}
  .sumnote dl{grid-template-columns:auto 1fr; gap:2.2mm 7mm}
  .sumnote dt{font-size:9.5pt}
  .sumnote dd{font-size:11.5pt}
  .footlegal{border-top:.8pt solid #241e1a55; font-size:8.5pt; margin-top:8mm}
  .footlegal a{color:inherit; text-decoration:none}
  h1,h2,h3{break-after:avoid}
  .pcode{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:8pt;
    word-break:break-all; color:#333; border:.6pt dashed #2419; padding:2mm 3mm;
    border-radius:1.5mm; margin-top:2mm}
  .phead{display:flex; justify-content:space-between; align-items:baseline;
    border-bottom:1.2pt solid #241e1a; padding-bottom:2.5mm; margin-bottom:6mm}
  .phead b{font-family:var(--f-disp); font-size:15pt; font-weight:600}
  .phead span{font-size:9pt; color:#555}
  .pablauf{margin-top:6mm; break-inside:avoid}
  .pablauf p{font-size:10.5pt; margin:1.5mm 0}
}

/* 健康清单默认不参与打印。点「只打印这份」时反过来：
   只出这一屏，摘要那些一概不出。 */
@media print{
  body.printhealth .wrap > *:not(.note):not(.notbox){display:none !important}
  body:not(.printhealth) .printhealth-only{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}
@media (min-width:44rem){
  .says{gap:1.4rem}
  .says__bubble p{font-size:1.06rem}
}

/* ============================================================
   Die Haut der Site-Fassung — nur für site/, nicht für dist/.

   Das Vorzimmer hat seine eigene Handschrift: Papierton, Fraunces,
   krumme Radien, zwei Millimeter Tinte um jede Karte. Das ist die
   Sprache der Werkzeugfamilie (Cockpit, Auslage, Trainer), und in der
   Artifact-Fassung bleibt sie unverändert.

   Auf weibin.at steht es aber zwischen Seiten, die anders sprechen:
   Outfit 900, flache Farbflächen, keine Schatten. Wer von der
   Werkzeugseite hierher klickt, soll nicht das Gefühl haben, die Site
   verlassen zu haben. Also bekommt die Site-Fassung hier eine Haut
   darüber — dieselben Bausteine, die Typografie und der Grund der Site.

   Was NICHT angefasst wird: die Reihenfolge der elf Schritte, die
   Texte, die fünf Module, das Nicht-Fragen nach Namen und Gesundheit.
   Das ist der Inhalt, und der Plan sagt: kein Wort davon.

   Wird in build.py::build_site an app.css angehängt, also gewinnt es
   bei gleicher Spezifität.
   ============================================================ */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;
  src:url(/_v/6c18d579fd87/fonts/outfit-latin-normal1.woff2) format('woff2');font-display:swap}

:root{
  /* Der Grund der Site statt des Papiers der Werkzeugfamilie. */
  --paper:#fffdf8; --paper-2:#f6f1e6; --paper-3:#efe7d6; --paper-edge:#e4dac6;
  --ink:#141210; --ink-soft:#4a423b; --ink-faint:#7d726a;
  --cta:#d81577;
  --rund:clamp(22px,3vw,46px);
  /* Die Anzeigeschrift der Site. Fraunces bleibt als Rückfall stehen —
     fällt Outfit aus, sieht die Seite aus wie vorher und nicht kaputt. */
  --f-disp:'Outfit','Fraunces','Zhuque Fangsong','Songti SC',sans-serif;
  /* Die krummen Radien werden gerade: ein Wert, wie überall sonst. */
  --draw-1:var(--rund); --draw-2:var(--rund); --draw-3:var(--rund);
}

/* Outfit hat keine Variable Axes für SOFT/WONK; die Angaben aus der
   Werkzeugfamilie würden sonst als ungültige Settings hängenbleiben. */
h1,h2,h3,.btn{font-variation-settings:normal;font-weight:900;letter-spacing:-.035em}
h1{line-height:1.06}
h2{line-height:1.12}

/* Kein Papierkorn: die Site ist flach. */
body::before{display:none}

/* Keine Tintenränder, keine versetzten Schatten, keine Drehungen — das
   sind die drei Dinge, an denen man die Werkzeugfamilie erkennt. Die
   Liste steht hier vollstaendig: sie ist aus app.css herausgesucht, indem
   nach genau diesen drei Merkmalen gesucht wurde, nicht aus dem Kopf. Der
   erste Anlauf hatte .note vergessen — die Karte, die auf jeder Seite die
   groesste Flaeche hat. */
.note,.padnote,.ta,.okbtn,.gloss .gitem{border:0;box-shadow:none;rotate:none}
.note{background:var(--paper-2);border-radius:calc(var(--rund) * .58)}
.note:nth-of-type(2n),.note:nth-of-type(3n){border-radius:calc(var(--rund) * .58);rotate:none}
.tile:hover .note{translate:0 -3px;box-shadow:none}
.padnote{background:var(--paper-3);border-radius:calc(var(--rund) * .5)}
.ta{background:var(--paper-2);border-radius:calc(var(--rund) * .42)}
.okbtn{background:#14121010;border-radius:999px}
.okbtn.on{background:var(--ink);color:var(--paper)}
/* Keine Tintenränder, keine versetzten Schatten, keine Drehungen —
   das sind die drei Dinge, an denen man die Werkzeugfamilie erkennt. */
.notbox,.chip,.says__bubble,.tile,.btn{box-shadow:none}
.chip,.tile{border:0;rotate:none}
.chip:nth-child(2n),.chip:nth-child(3n){rotate:none}
.prog .pbox:nth-child(2n),.prog .pbox:nth-child(3n),.prog .pbox:nth-child(5n){rotate:none}
.notbox{rotate:none;border:0;border-radius:calc(var(--rund) * .62)}
.says__bubble{border:0;border-radius:calc(var(--rund) * .55);box-shadow:none;background:var(--paper-2)}
.says__bubble::before{background:var(--paper-2);border:0}
.says__bubble::after{background:var(--paper-2)}

.chip{background:#14121010;border-radius:999px;font-weight:700}
.chip:hover{background:#14121020}
.chip.on{background:var(--ink);color:var(--paper)}
.chip.on .ck path{stroke:var(--paper)}

.btn{border:0;border-radius:999px;background:var(--ink);color:var(--paper)}
/* Nicht reines Schwarz: die Werkzeugfamilie hat dagegen ein Gate
   (build.py::gate_ink), und es hat hier zugeschlagen — auch auf den
   Kommentar, in dem der Wert stand. Eine Stufe unter der Tinte der
   Site tut dasselbe. */
.btn:hover,.btn:active{translate:0 -2px;box-shadow:none;background:#0a0908}
.btn--red{background:var(--cta);color:#fff}
.btn--red:hover{background:#b30f61}
.btn--ghost{background:#14121010;color:var(--ink)}
.btn--ghost:hover,.btn--ghost:active{background:#14121020}
.btn--line{background:transparent;color:var(--ink)}

.tile{background:var(--paper-2);border-radius:calc(var(--rund) * .62)}
.sheet{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:var(--rund) var(--rund) 0 0}
.sheet::before{display:none}
.sheetback{background:#14121070}

/* Der eigene Sprachumschalter sitzt neben der Leiste der Site und soll
   aussehen wie deren Sprachpillen — er bleibt aber der eigene, weil er
   die Sprache ohne Neuladen wechselt und die Antworten behaelt. */
.langs{background:#1412100f;border:0;box-shadow:none;border-radius:999px;
  -webkit-backdrop-filter:none;backdrop-filter:none;padding:.18rem;gap:.1rem}
.langs button,.langs a{border:0;border-radius:999px;background:none;
  font:600 .74rem/1 var(--f-body);padding:.4rem .58rem;color:var(--ink)}
/* Nur die aktive: die inaktiven tragen aria-current="false", und ein
   blosses [aria-current] hat alle drei hervorgehoben. */
.langs .lg.on,.langs [aria-current="true"]{background:var(--ink);color:var(--paper)}

/* Die Kopfleiste der Site sitzt oben; der Inhalt braucht Platz darunter.
   Die 41 rem bleiben — die Lesebreite ist Inhalt, nicht Haut. */
.wrap{padding-top:1.6rem}

/* ============================================================
   Der Auftakt: Titelbande, Anzug als Deckbild, zwei Türen als
   Kartenpaar — und die elf Schritte je auf einer Tafel.

   Der Plan, fünfter Schritt, wörtlich: „Auftakt = 居中标题带
   „Zehn Minuten hier." + 小钟正装 c3-erklaeren 当封面 + 两扇门作两张镜像式卡；
   11 步每步一张 .tafel，进度 „Schritt 3 von 11" 手写体."

   Bis hierher war davon nichts gebaut: die Überschrift stand links in
   einer normalen Textspalte, das Bild war das Alltags-Winken in einer
   Sprechblase, die zwei Türen waren zwei Knöpfe nebeneinander, und
   .tafel kam im ganzen Site-Bau kein einziges Mal vor.

   Alles hier ist Haut. Kein Wort der elf Schritte, kein Modul, keine
   Frage ändert sich — die Marken im Template (.auftakt, .tueren,
   .tafel) sind leere Haken, die nur diese Datei kennt.
   ============================================================ */

/* Caveat ist die Handschrift der Site (dort --f-hand). Keine neue
   Schrift also, sondern dieselbe: build.py liefert sie unter
   SITE_FONT['CAVEAT'] als /fonts/caveat-latin-normal1.woff2 aus.
   Latein-Subset — auf den chinesischen Fassungen fällt die Zeile auf
   die Grundschrift zurück, genauso wie auf weibin.at. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;
  src:url(/_v/891951df5e8b/fonts/caveat-latin-normal1.woff2) format('woff2');font-display:swap}
:root{--f-hand:'Caveat','Zhuque Fangsong',cursive}

/* ---- Die Bande: Farbfläche, vier Wellen, Titel links, Anzug rechts ---- */
/* Dieselbe Grammatik wie der Auftakt der vier Rechnerseiten (haushalt:
   #c9f5d2 mit vier Wellen w1–w4 in Stufen). Fünfte Farbe der Familie:
   --rosa aus der Palette der Versicherungsseite; die tiefste Welle ist
   --magenta, ebenfalls aus der Palette. Kein Ton, den es dort nicht gibt. */
.auftakt{padding-top:0; gap:0}
/* Kein Ausbrechen mehr: die Bande ist Geschwister von .wrap, also schon
   so breit wie das Fenster. Der frühere `margin-inline:calc(50% - 50vw)`
   rechnete die Bildlaufleiste mit und stand 18–74 px über dem Rand. */
.bande{position:relative; overflow:clip; background:#ffe4f6;
  padding:clamp(5.5rem,13vh,8.5rem) 0 clamp(2.5rem,6vh,4rem);
  min-height:100svh; display:grid; align-items:center}
.bande .wellen{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.bande .wellen svg{position:absolute; inset:-4% -6%; width:112%; height:108%}
.bande .wellen path{will-change:transform; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:center}
.bande .wellen .w1{fill:#fff4fb; stroke:#fff4fb; animation:woge 34s ease-in-out infinite alternate,atmen 6s ease-in-out infinite}
.bande .wellen .w2{fill:#ffd0ec; stroke:#ffd0ec; animation:woge 27s ease-in-out infinite alternate-reverse,atmen 6s ease-in-out -1.5s infinite}
.bande .wellen .w3{fill:#ffb3df; stroke:#ffb3df; animation:woge 41s ease-in-out infinite alternate,atmen 6s ease-in-out -3s infinite}
.bande .wellen .w4{fill:#ff4fb8; stroke:#ff4fb8; animation:woge 22s ease-in-out infinite alternate-reverse,atmen 6s ease-in-out -4.5s infinite}
@keyframes woge{from{translate:0 0}to{translate:-3.5% 0}}
@keyframes atmen{0%,100%{stroke-width:0;rotate:0deg}50%{stroke-width:60px;rotate:2deg}}
@media (prefers-reduced-motion:reduce){.bande .wellen path{animation:none}}

.bande .innen{position:relative; z-index:1; width:100%;
  max-width:min(78rem,94vw); margin:0 auto; padding-inline:1.15rem;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1rem,4vw,3rem); align-items:end; text-align:left}
.bande .label{color:#5a1f2e; margin-bottom:.9rem}
.bande h1{font-size:clamp(2.6rem,6.6vw,5.8rem); line-height:.92; max-width:none;
  margin:0 0 1.2rem; letter-spacing:-.045em; text-wrap:balance}
.bande h1 .l1{display:block}
.bande .dim{max-width:30rem; margin:0; font-size:clamp(1.1rem,1.6vw,1.35rem);
  line-height:1.45; color:var(--ink-soft); text-wrap:pretty}
/* Der Anzug steht auf der Grundlinie der Bande, nicht in der Mitte —
   wie die Gießkanne, die auf ihrem Beet steht. */
.bande .anzug{width:auto; height:min(62svh,34rem); justify-self:center;
  align-self:end; display:block; filter:none}
/* Die Anmerkung: der Satz aus der Sprechblase, schräg oben rechts, wie
   „Rechnet in Ihrem Browser." auf der Haushaltsseite. */
.bande .hand.notiz{position:absolute; right:clamp(1rem,5vw,4rem);
  top:clamp(4.6rem,11vh,7rem); max-width:17rem; text-align:center;
  rotate:-6deg; color:#5a1f2e; z-index:2; margin:0;
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.05}
@media (max-width:52rem){
  .bande{min-height:0; padding-top:clamp(4rem,9vh,6rem)}
  .bande .innen{grid-template-columns:minmax(0,1fr); align-items:start}
  .bande .anzug{height:min(46svh,22rem); justify-self:start; margin-top:1rem}
  .bande .hand.notiz{position:static; rotate:-3deg; max-width:none;
    text-align:left; margin:0 0 1rem}
}

/* ---- Die drei Notizen ------------------------------------------- */
/* Mittig als Block, innen links: Fließtext mittig zu setzen macht ihn
   schwerer lesbar, und diese drei Zeilen sind das, was man wirklich
   liest, bevor man sich für eine Tür entscheidet. */
.auftakt .stack{max-width:34rem; margin-inline:auto; text-align:left}

/* ---- Die zwei Türen als Kartenpaar ------------------------------ */
/* Vorher: zwei Knöpfe in einer Reihe — das liest sich wie „Absenden"
   und „Abbrechen", also wie ein Hauptweg und ein Rückzieher. Es sind
   aber zwei gleichwertige Türen. Als Kartenpaar sind sie gleich groß,
   gleich schwer und stehen nebeneinander wie die Kacheln der Site. */
.tueren{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem; max-width:34rem; margin-inline:auto; margin-top:1.6rem}
.tueren .btn{display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-end; text-align:left; min-height:7.5rem;
  padding:1.1rem 1.15rem; border-radius:calc(var(--rund) * .62);
  font-size:clamp(1rem,2.6vw,1.15rem); line-height:1.2; white-space:normal}
.tueren .btn::after{content:'→'; font-size:1.1em; margin-top:.5rem;
  align-self:flex-start; transition:translate .18s var(--ease)}
.tueren .btn:hover::after{translate:.25rem 0}
/* „Weitermachen" ist keine dritte Tür, sondern die Rückkehr in eine
   angefangene. Sie steht unter dem Paar, über die ganze Breite. */
.tueren .btn--line{grid-column:1 / -1; min-height:0; flex-direction:row;
  justify-content:center; text-align:center; padding:.7rem 1rem}
.tueren .btn--line::after{content:none}
@media (max-width:34rem){
  .tueren{grid-template-columns:minmax(0,1fr)}
  .tueren .btn{min-height:0}
}

/* ---- Elf Schritte, elf Tafeln ----------------------------------- */
/* Die Tafel ist auf der Site die Platte, auf der ein Rechner oder die
   Schublade steht. Hier trägt sie einen Schritt. Ohne sie lief der
   Inhalt frei in der Spalte, und elf Schritte hintereinander sahen aus
   wie ein langes Formular statt wie elf einzelne Karten. */
.tafel{background:var(--paper); border-radius:var(--rund);
  border:1px solid var(--paper-edge); padding:clamp(1.1rem,3.5vw,1.9rem);
  margin-bottom:1.4rem}
/* Die Notiz im Inneren ist dann eine Karte auf einer Karte. Auf der
   Tafel reicht ihr die Fläche; Rahmen und Schlagschatten fallen weg. */
.tafel > .note{background:transparent; border:0; box-shadow:none;
  border-radius:0; padding:0}

/* ---- Die Fortschrittszeile in Handschrift ----------------------- */
/* „Schritt 3 von 11" ist eine Randnotiz, kein Etikett: gesetzt wie die
   handschriftlichen Anmerkungen der Site, nicht als Versalienzeile. */
.prognav .label{font:700 1.25rem/1 var(--f-hand); text-transform:none;
  letter-spacing:.01em; color:var(--ink-soft)}
.prognav .label .zh{font-size:inherit; letter-spacing:.01em}

/* Der Pfeil unter den Türen zeigte auf die alte Knopfreihe. Jetzt steht
   er neben einem zentrierten Satz und deutete ins Leere; der Block
   bekommt dieselbe Mitte wie alles darüber. */
/* Der Pfeil zeigte auf die alte Knopfreihe. Der Satz daneben handelt
   ausdrücklich von der ZWEITEN Tür („Das zweite ist für alle, die schon
   etwas haben"), also gehört der Block unter die rechte Karte — mittig
   gesetzt zeigte er auf die linke und sagte damit das Gegenteil. */
.auftakt .pointup{max-width:34rem; margin:.9rem auto 0;
  grid-template-columns:auto minmax(0,1fr); justify-content:end;
  width:min(34rem,100%); padding-left:50%; text-align:left}
@media (max-width:34rem){
  .auftakt .pointup{padding-left:0}
}