/* Variante B · re-write — eine Schriftwelt aus drei Stimmen:
   Prata (Kärtchen-Schrift) spricht in Überschriften · Schreibmaschine signiert (Logo, kleine Vorzeilen) ·
   Jost erzählt (Lesetext). Melanies Farbwelt bleibt, raue Papierflächen für ausgewählte Abschnitte.
   Größen nach Handbuch: 18 · 29 · 47 (×1,618). */
/* Ziffern aus Jost: Prata zeichnet die 1 wie ein l */
@font-face{font-family:"Prata";src:url(/assets/fonts/prata.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-002F,U+003A-FFFF}
@font-face{font-family:"Jost";src:url(/assets/fonts/jost.woff2) format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url(/assets/fonts/jost-ext.woff2) format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schreibmaschine";src:url(/assets/fonts/schreibmaschine.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --serif:"Prata","Jost",Georgia,serif;--sans:"Jost",system-ui,sans-serif;--tw:"Schreibmaschine","Courier New",monospace;
  --rau:url(/assets/img/papier-rau.webp);
}
body{font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.618}
b,strong{font-weight:500}
.lead{font-weight:300;font-size:23px;line-height:1.5}

/* Logo: Schreibmaschinen-Wortmarke */
.logo .wm{display:block;line-height:0;color:var(--erde)}
.logo .wm svg{height:30px;width:auto;display:block}
.w-fuss .logo .wm,.dunkel .logo .wm{color:var(--kalk)}

/* Überschriften wie auf den Kärtchen: Prata in Versalien, ruhig gesperrt */
h1,h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
h1,.hero h1{font-family:var(--serif);font-weight:400;font-size:47px;line-height:1.12;letter-spacing:.02em;max-width:16ch}
h2{font-size:29px;line-height:1.2}
h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.3;letter-spacing:0}
/* Akzentwort: Rosenholz, aufrecht — Prata hat keine Kursive */
h1 i,h2 i,h3 i,.kursiv{font-style:normal;color:var(--rose-tief)}
.programm-name{font-family:var(--serif);font-weight:400;letter-spacing:.02em}
.programm-zusatz{font-family:var(--serif);font-size:1em;color:var(--rose-tief)}

/* Schreibmaschine signiert: nur kleine Vorzeilen */
.marke-zeile{font:400 14px/1.3 var(--tw);letter-spacing:.04em;text-transform:lowercase}
.marke-zeile::before{content:"— "}

/* Zahlen, Zitate, Fragen in Prata, nie kursiv */
.fakten b,.hero-plakette b,.preis,.preis small{font-family:var(--serif);font-style:normal}
.fakten b{font-size:29px}.preis{font-size:76px}
.zustand p span,.etappe .nr,.inhalt .nr{font:400 14px var(--tw);font-style:normal;letter-spacing:.04em}
.mit p{font-family:var(--sans);font-size:18px;line-height:1.5}
.coachin .zitatgross{font-family:var(--serif);font-style:normal;font-size:23px;line-height:1.45}
summary{font-family:var(--sans);font-weight:500;font-size:18px}
.kurve .tag,.q-slider .wert{font-style:normal}

/* Knöpfe in Jost, wie die Kleinzeilen der Kärtchen */
.knopf{font-family:var(--sans);font-weight:500;letter-spacing:.04em}

/* Raues Papier: Leinen mit Korn und Fasern */
.problem,.angebot{background:var(--leinen) var(--rau) repeat;background-size:640px}
.schlussbild{background:var(--leinen) var(--rau) repeat;background-size:640px;border-radius:var(--ecke-l);max-width:1184px;margin:0 auto var(--r7)}
.schlussbild h2{font-size:47px;line-height:1.12;max-width:20ch}

@media(max-width:700px){
  h1,.hero h1{font-size:34px}h2{font-size:23px}h3{font-size:20px}.schlussbild h2{font-size:29px}
  .preis{font-size:55px}.logo .wm svg{height:23px}.schlussbild{margin:0 8px var(--r6)}
}

/* Farbwelt der Kärtchen: Oliv · Stein · Creme · Tinte (Jan, 11.11.2026) */
:root{
  --kalk:#F6F2EC;--weiss:#FBF8F3;--leinen:#D8CEC1;--salbei-hell:#E9E3D8;--salbei:#A7A58A;
  --salbei-tief:#6E7148;--wald:#5C5F3B;--erde:#2B2A26;--erde-weich:#6B655D;
  --rose:#E4DCC9;--rose-tief:#6E7148;
}
body{background:var(--kalk)}
.w-kopf{background:rgba(246,242,236,.9)}
/* Auf Stein trägt Tinte, nie Grau (3,7 : 1 zu wenig) */
.problem,.angebot,.schlussbild,.ss-ende{color:var(--erde)}
.problem .marke-zeile,.angebot .marke-zeile,.schlussbild .marke-zeile{color:var(--erde)}
.zustand p{background:var(--weiss);border:0}
.zustand p span{color:var(--salbei-tief)}
/* Oliv-Bühne wie Kärtchen 1 */
.ablauf{background:var(--wald)}
.ablauf h2,.ablauf h3{color:var(--kalk)}.ablauf h2 i{color:var(--rose)}
.ablauf .marke-zeile,.etappe .nr{color:#D8CEC1!important}
.etappe p{color:#E9E3D8}
.etappe .dauer{background:rgba(246,242,236,.14);color:#F6F2EC}
.kurve{background:radial-gradient(120% 90% at 80% 10%,#6a6d47 0%,#4d5032 70%);border-color:rgba(246,242,236,.14)}
.w-fuss{background:var(--wald);color:#E9E3D8}
.angebot-rechts{background:var(--wald)}
.preis-hinweis,.angebot-rechts .fein,.angebot-rechts .marke-zeile{color:#E9E3D8!important}
/* Knopf: Oliv, gewölbt, Creme-Schrift */
.knopf{background:linear-gradient(180deg,#7d8055 0%,#6E7148 52%,#5a5d3a 100%);color:#F6F2EC}
.knopf.hell{background:linear-gradient(180deg,#fbf8f3 0%,#F6F2EC 55%,#e4dcc9 100%);color:var(--erde)}
.knopf::after{background:linear-gradient(110deg,transparent 35%,rgba(246,242,236,.3) 50%,transparent 65%)}
.textlink{border-color:var(--salbei-tief)}
.ring circle:first-child{stroke:#E9E3D8}

/* Knöpfe (Jan, 11.11.2026): kleiner Radius, regelmäßiger Glanz, kurzes Wackeln */
.knopf{border-radius:6px}
.knopf::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.18) 52%,transparent 60%);animation:glanz 4s cubic-bezier(.4,0,.2,1) infinite 1s}
.knopf.hell::after,.ablauf .knopf.hell::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.3) 52%,transparent 60%)}
@keyframes glanz{0%{transform:translateX(-130%)}35%,100%{transform:translateX(130%)}}
main .knopf{animation:wackeln 7s ease-in-out infinite 3s}
main .knopf:hover{animation:none}
@keyframes wackeln{0%,88%,100%{transform:none}90%{transform:rotate(-2deg) scale(1.03)}92%{transform:rotate(2deg) scale(1.03)}94%{transform:rotate(-1.5deg) scale(1.02)}96%{transform:rotate(1deg)}98%{transform:none}}
.w-kopf .knopf{border-radius:6px}