/* nexovito — Das Werkstück (PI2, gezeichnet 29.07.2026) */
@font-face{font-family:'Fraunces';src:url('/assets/fonts/nexovito-fraunces.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/nexovito-fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/nexovito-inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --papier:#F6F1E7; --papier-hell:#FCFAF4; --papier-tief:#EFE8D9;
  --tinte:#23201A; --tinte-70:#4A453B; --tinte-50:#6E675A;
  --linie:rgba(35,32,26,.16); --linie-stark:rgba(35,32,26,.32);
  --lack:#B23A2A; --lack-tief:#93291B; --lack-hauch:rgba(178,58,42,.08);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --mass:66ch;
  /* Chat-Widget (Frag Hannes) erbt das Werkstück über seine var()-Haken */
  --hc-accent:#B23A2A; --hc-head:#23201A; --hc-bg:#FCFAF4; --hc-fg:#23201A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light only;scroll-behavior:smooth}
body{background:var(--papier);color:var(--tinte);font-family:var(--serif);
  font-optical-sizing:auto;font-size:1.075rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:76rem;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}
h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
p{max-width:var(--mass)}
a{color:inherit}
img{max-width:100%;height:auto}
::selection{background:var(--lack-hauch);color:var(--tinte)}
:focus-visible{outline:2px solid var(--lack);outline-offset:3px}

/* stehende Formeln: die Signatur-Kursive */
.formel{font-family:var(--serif);font-style:italic;font-weight:590;
  font-variation-settings:"SOFT" 70,"WONK" 1;color:var(--lack)}

/* Eyebrow mit Passer-Strich */
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--tinte-50);
  display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:2.1rem;height:1px;background:var(--lack);flex:none}

/* Stempel-Knöpfe (auch die Alt-Klassen btn/knopf tragen das Werkstück) */
.stempel,.stempel-blind,.btn,.knopf{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:600;font-size:.95rem;text-decoration:none;
  padding:.92rem 1.75rem;border-radius:2px;cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease}
.stempel,.btn:not(.btn-ghost):not(.stempel-blind),.knopf{background:var(--lack);color:var(--papier-hell);
  border:1px solid var(--lack-tief);box-shadow:0 2px 0 var(--lack-tief)}
.stempel:hover,.knopf:hover{background:var(--lack-tief);transform:translateY(1px);box-shadow:0 1px 0 var(--lack-tief)}
.stempel-blind,.btn-ghost{background:transparent;color:var(--tinte);border:1.5px solid var(--linie-stark);box-shadow:none}
.stempel-blind:hover,.btn-ghost:hover{border-color:var(--tinte);transform:translateY(1px)}
.btn-lg{padding:1rem 1.9rem;font-size:1.02rem}

/* Schnittmarken */
.schnitt{display:flex;justify-content:center;align-items:center;gap:.65rem;
  padding:clamp(2.4rem,5vw,3.6rem) 0;color:var(--linie-stark)}
.schnitt svg{display:block}

/* ── Kopf: Tinte, Zeitungskopf ── */
header.kopf{background:var(--tinte);position:relative;overflow:visible;z-index:60}
header.kopf::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 50% 42%,rgba(246,241,231,.07),transparent 70%)}
header.kopf::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="56" viewBox="0 0 260 56"><g fill="none" stroke="%23F6F1E7" stroke-width="0.7" opacity="0.075"><path d="M0 14 C32 2 64 26 96 14 C128 2 160 26 192 14 C224 2 256 26 288 14"/><path d="M0 28 C32 16 64 40 96 28 C128 16 160 40 192 28 C224 16 256 40 288 28"/><path d="M0 42 C32 30 64 54 96 42 C128 30 160 54 192 42 C224 30 256 54 288 42"/></g></svg>')}
.masthead,.kopf-innen{position:relative;z-index:1}
.masthead{display:flex;justify-content:center;padding:1.5rem 0 1.15rem}
.masthead a{text-decoration:none}
.masthead .kolo-voll{padding:.75rem 1.6rem .8rem}
.masthead .kolo-voll .kolo-wort{font-size:1.65rem}
.nav-zeile{position:sticky;top:0;z-index:50;background:var(--tinte);position:sticky;
  border-top:1px solid rgba(246,241,231,.16);border-bottom:2px solid var(--lack)}
.nav-marke{position:absolute;left:clamp(1.2rem,4vw,3rem);top:50%;transform:translateY(-50%);
  text-decoration:none;font-family:var(--serif);font-weight:600;font-size:1.15rem;
  color:var(--papier-hell);opacity:0}
.nav-marke i{font-style:normal;color:var(--lack)}
@supports (animation-timeline: scroll()) {
  .nav-marke{animation:marke-ein linear both;animation-timeline:scroll();animation-range:120px 340px}
  @keyframes marke-ein{from{opacity:0}to{opacity:1}}
}
.nav-zeile .wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:0;padding:0 clamp(1.2rem,4vw,3rem)}
/* Login sitzt AUSSERHALB des Menübands — als Tuer-Zeichen, nicht als Menuepunkt
   (Lutz 29.07.: „nimm das Anmelden aus dem Menueband raus"). Der Block ist
   absolut positioniert; ohne diese Regel stand er im Fluss und zog die Zeile auf
   290 px auf (gemessen 30.07. per getBoundingClientRect). */
.kopf-rechts{position:absolute;right:clamp(1.2rem,4vw,3rem);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:.9rem}
.nav-zeile .kopf-cta{position:static;transform:none;margin-left:0;padding:.55rem 1.1rem;font-size:.86rem}
.login-tuer{display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border:1px solid rgba(246,241,231,.28);border-radius:2px;
  color:rgba(246,241,231,.72);text-decoration:none;flex:none;
  transition:color .12s ease,border-color .12s ease,background .12s ease}
.login-tuer svg{width:1.15rem;height:1.15rem;display:block}
.login-tuer:hover{color:var(--papier-hell);border-color:var(--lack);background:rgba(178,58,42,.16)}
.login-tuer:focus-visible{outline:2px solid var(--lack);outline-offset:2px}
@media(max-width:1420px){.nav-zeile .kopf-cta{display:none}}
@media(max-width:900px){.kopf-rechts{display:none}}
.kopf-innen{display:none;align-items:center;gap:1rem;padding:1.05rem 0}
@media(max-width:900px){
  .masthead,.nav-zeile{display:none}
  .kopf-innen{display:flex}
  header.kopf{position:sticky;top:0;z-index:50;border-bottom:2px solid var(--lack)}
}
.marke{display:flex;align-items:center;gap:.72rem;text-decoration:none}
.wortmarke{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.015em}
.wortmarke i{font-style:normal;color:var(--lack)}
/* Kolophon-Zeichenfamilie (Z8) */
.kolo-kopf{position:relative;display:inline-flex;align-items:center;gap:.7rem;
  border:2px solid var(--tinte);padding:.5rem .95rem .5rem .7rem;background:var(--papier)}
.kolo-kopf::before{content:"";position:absolute;inset:3px;border:1px solid rgba(35,32,26,.3);pointer-events:none}
.kolo-baum{width:1.75rem;height:1.75rem;flex:none;display:block}
.kolo-wort{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:-.015em;
  line-height:1;display:block;border-bottom:1.5px solid var(--lack);padding-bottom:.3rem}
.kolo-wort i{font-style:normal;color:var(--lack)}
.kolo-voll{position:relative;display:inline-block;border:2px solid rgba(246,241,231,.85);
  padding:.9rem 1.5rem 1rem;text-align:center}
.kolo-voll::before{content:"";position:absolute;inset:4px;border:1px solid rgba(246,241,231,.35);pointer-events:none}
.kolo-voll .kolo-wort{font-size:1.5rem;color:var(--papier-hell)}
.kolo-voll .kolo-linie{display:block;height:1.5px;background:var(--lack);margin:.55rem .2rem .5rem}
.kolo-voll .kolo-unter{font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.22em;color:rgba(246,241,231,.6)}
/* ── Register statt Leiste (PI5): drei Rubriken mit Aufklapp-Tafel, CSS-only.
   Wächst NICHT mit der Seitenzahl — neue Seiten gehen in die Tafel. ── */
nav.haupt{display:flex;gap:.2rem;align-items:stretch;font-family:var(--sans);font-size:.95rem;font-weight:520}
nav.haupt>a,.reg>summary{display:flex;align-items:center;gap:.4rem;padding:.85rem 1.05rem;
  text-decoration:none;color:rgba(246,241,231,.8);border-bottom:2px solid transparent;
  cursor:pointer;list-style:none;white-space:nowrap;transition:color .12s,border-color .12s}
nav.haupt>a:hover,.reg>summary:hover{color:var(--papier-hell);border-bottom-color:var(--lack)}
nav.haupt a.leise{color:rgba(246,241,231,.5)}
.reg{position:static}
.reg>summary::-webkit-details-marker{display:none}
.reg>summary i{display:inline-block;width:.44rem;height:.44rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  opacity:.6;transition:transform .15s}
.reg[open]>summary{color:var(--papier-hell);border-bottom-color:var(--lack)}
.reg[open]>summary i{transform:rotate(-135deg) translateY(-2px)}
/* die Tafel: volle Breite unter der Registerzeile, Papier auf Tinte */
.reg-tafel{position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:100%;z-index:70;background:var(--papier);
  border-top:2px solid var(--lack);border-bottom:1px solid var(--linie-stark);
  box-shadow:0 18px 40px -24px rgba(35,32,26,.55)}
.reg-innen{max-width:76rem;margin:0 auto;padding:2rem clamp(1.2rem,4vw,3rem) 1.8rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.4rem 2.2rem}
.reg-spalte{position:relative;padding:.2rem 0}
.reg-rubrik{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lack);margin:0 0 .7rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--linie)}
.reg-tafel a{display:block;text-decoration:none;color:var(--tinte);padding:.5rem 0;border:0}
.reg-tafel a b{font-family:var(--serif);font-weight:600;font-size:1.06rem;display:block;line-height:1.2}
.reg-tafel a span{font-family:var(--sans);font-size:.85rem;color:var(--tinte-50);
  display:block;margin-top:.15rem;line-height:1.45}
.reg-tafel a:hover b{color:var(--lack)}
.reg-tafel a:hover span{color:var(--tinte-70)}
.reg-fuss{grid-column:1/-1;margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--linie);
  font-family:var(--sans);font-size:.88rem;color:var(--tinte-50);display:flex;
  gap:1.2rem;flex-wrap:wrap;align-items:center}
.reg-fuss a{display:inline;color:var(--lack);font-weight:600;padding:0}
@media(max-width:1100px){nav.haupt>a,.reg>summary{padding:.85rem .8rem;font-size:.9rem}}

/* mobile Klappnavigation — CSS-only (details/summary), 0 JS */
.mnav{display:none;margin-left:auto;position:relative}
.mnav summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:.6rem .2rem}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary i{display:block;width:1.55rem;height:2px;background:var(--papier-hell)}
.mnav[open] summary i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav[open] summary i:nth-child(2){opacity:0}
.mnav[open] summary i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav-liste{position:absolute;right:-.5rem;top:calc(100% + .9rem);min-width:15rem;
  background:var(--tinte);border:1px solid rgba(246,241,231,.25);border-top:2px solid var(--lack);
  padding:.6rem 0;z-index:60}
.mnav-liste a{display:block;padding:.62rem 1.3rem;text-decoration:none;
  font-family:var(--sans);font-size:.98rem;color:rgba(246,241,231,.85)}
.mnav-liste a:hover{color:var(--papier-hell);background:rgba(246,241,231,.06)}
@media(max-width:900px){.mnav{display:block}.kopf-innen .kopf-cta{display:none}}

/* ── Hero (Start) ── */
.hero{position:relative;padding:clamp(3.2rem,7vw,5.6rem) 0 0}
.hero-glow{display:none}
.hero .eyebrow{margin-bottom:1.6rem;flex-wrap:wrap}
.hero h1{font-size:clamp(2.7rem,6.4vw,4.7rem);max-width:20ch}
.hero .unterzeile{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:420;margin-top:1rem;color:var(--tinte-70)}
.hero .unterzeile .formel{font-size:inherit}
.hero .lead{margin-top:1.7rem;font-size:1.13rem;max-width:60ch}
.hero .kern{margin-top:1.5rem;font-size:1.13rem;max-width:60ch}
.hero .kern strong{font-weight:640}
.hero-ctas{display:flex;gap:.9rem;margin-top:2.3rem;flex-wrap:wrap}
.hero-grid{display:grid;gap:2.5rem;align-items:end}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.12fr .88fr}}
.baum-fig{max-width:28rem;margin:1.5rem auto 0}
.baum-bild{position:relative}
.baum-bild img{width:100%;height:auto;display:block}
.baum-labels{position:absolute;inset:0;width:100%;height:100%}
.tafel-linien path{stroke-dasharray:1;stroke-dashoffset:1;animation:tafel-zeichnen 1.1s ease-out forwards}
.tafel-linien path:nth-child(2){animation-delay:.15s}
.tafel-linien path:nth-child(3){animation-delay:.3s}
.tafel-linien path:nth-child(4){animation-delay:.45s}
.tafel-linien path:nth-child(5){animation-delay:.25s}
.tafel-linien path:nth-child(6){animation-delay:.4s}
.tafel-linien path:nth-child(7){animation-delay:.55s}
@keyframes tafel-zeichnen{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.tafel-linien path{animation:none;stroke-dashoffset:0}}
.baum-fig figcaption{text-align:center;margin-top:.9rem}
.baum-fig .bodenzeile{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;color:var(--tinte-50);display:block}
.baum-fig .baumformel{font-size:1.05rem;display:inline-block;margin-top:.3rem}

/* ── Sektionsbau ── */
section,.band{padding:clamp(2.6rem,6vw,4.4rem) 0}
.band .band{padding:0}
.s-kopf,.sec-head{margin-bottom:2.2rem}
.s-kopf .eyebrow{margin-bottom:1rem}
.s-kopf h2,.sec-head h2{font-size:clamp(1.85rem,3.6vw,2.7rem);max-width:26ch}
.s-kopf p.satz,.sec-head p{margin-top:1.1rem;font-size:1.09rem;color:var(--tinte-70)}

/* Innenseiten-Kopf */
.page-hero{background:var(--papier-tief);border-bottom:1px solid var(--linie);
  padding:clamp(2.4rem,5vw,3.6rem) 0}
.page-hero .crumb{font-family:var(--sans);font-size:.82rem;color:var(--tinte-50);margin-bottom:1.1rem}
.page-hero .crumb a{text-decoration:none;color:var(--tinte-70)}
.page-hero .eyebrow{margin-bottom:.9rem}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:22ch}
.page-hero .lead{margin-top:1.2rem;font-size:1.12rem;max-width:60ch;color:var(--tinte-70)}

/* Fließtext-Räume der Innenseiten */
.prose-block{max-width:var(--mass)}
.prose-block h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:2.2rem 0 .8rem}
.prose-block h2:first-child{margin-top:0}
.prose-block h3{font-size:1.22rem;margin:1.6rem 0 .55rem}
.prose-block p{margin:.85rem 0}
.prose-block ul,.prose-block ol{margin:.85rem 0 .85rem 1.2rem}
.prose-block li{margin:.35rem 0}
.prose-block a{color:var(--lack)}

/* Karten-Raster (cards-Block) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.card{position:relative;background:var(--papier-hell);border:1px solid var(--linie);
  border-radius:3px;padding:1.5rem 1.35rem 1.4rem;text-decoration:none;display:block;
  transition:border-color .15s ease,transform .15s ease}
a.card:hover{border-color:var(--tinte);transform:translateY(-2px)}
.card h3{font-size:1.25rem;margin-bottom:.5rem}
.card p{font-size:.97rem;color:var(--tinte-70);line-height:1.55}

.studio-quote{font-family:var(--serif);font-style:italic;font-weight:480;
  font-variation-settings:"SOFT" 70,"WONK" 1;font-size:1.35rem;max-width:50ch;
  border-left:3px solid var(--lack);padding-left:1.4rem}
.studio-quote small{display:block;font-family:var(--sans);font-style:normal;
  font-size:.85rem;color:var(--tinte-50);margin-top:.7rem}

/* Leiter/Stufen */
.leiter{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;counter-reset:stufe}
.leiter::before{content:"";position:absolute;left:2%;right:2%;top:2.55rem;height:2px;background:var(--lack);opacity:.5}
.leiter.dreier{grid-template-columns:repeat(3,1fr)}
.stufe{position:relative;counter-increment:stufe;background:var(--papier-hell);
  border:1px solid var(--linie);border-radius:3px;padding:1.5rem 1.35rem 1.4rem;
  text-decoration:none;display:block;transition:border-color .15s ease,transform .15s ease}
.stufe:hover{border-color:var(--tinte);transform:translateY(-2px)}
.stufe .nr{display:inline-flex;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--papier);border:2px solid var(--lack);color:var(--lack);
  font-family:var(--sans);font-weight:700;font-size:.9rem;align-items:center;justify-content:center;margin-bottom:1.05rem}
.stufe .nr::before{content:counter(stufe)}
.stufe h3{font-size:1.32rem;margin-bottom:.5rem}
.stufe p{font-size:.97rem;color:var(--tinte-70);line-height:1.5}
.stufe .weiter{display:block;margin-top:.95rem;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--lack)}
@media(max-width:900px){.leiter,.leiter.dreier{grid-template-columns:1fr 1fr}.leiter::before{display:none}}
@media(max-width:540px){.leiter,.leiter.dreier{grid-template-columns:1fr}}

/* Ein-Login / Guss-Karte mit Passermarken */
.einlogin{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.einlogin p{margin-top:1.05rem}
.einlogin p:first-child{margin-top:0}
.guss-karte{background:var(--papier-hell);border:1px solid var(--linie);border-radius:3px;
  padding:1.7rem 1.6rem;position:relative}
.guss-karte::before,.guss-karte::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--linie-stark)}
.guss-karte::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.guss-karte::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.guss-karte h3{font-size:1.18rem;margin-bottom:.85rem}
.guss-karte ul{list-style:none;font-family:var(--sans);font-size:.94rem}
.guss-karte li{padding:.55rem 0;border-top:1px dashed var(--linie);display:flex;gap:.6rem;align-items:baseline}
.guss-karte li:first-child{border-top:0}
.guss-karte li b{font-weight:600}
.guss-karte li::before{content:"—";color:var(--lack)}
@media(max-width:900px){.einlogin{grid-template-columns:1fr}}

/* Grundriss/Räume */
.grundriss{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--tinte);border-radius:2px;background:var(--papier-hell)}
.raum{padding:1.8rem 1.7rem 1.6rem;position:relative}
.raum:nth-child(1){border-right:1px solid var(--linie-stark);border-bottom:1px solid var(--linie-stark)}
.raum:nth-child(2){border-bottom:1px solid var(--linie-stark)}
.raum:nth-child(3){border-right:1px solid var(--linie-stark)}
.raum:nth-child(1)::after{content:"";position:absolute;right:-1px;top:55%;height:3.2rem;width:1px;background:var(--papier-hell)}
.raum:nth-child(3)::after{content:"";position:absolute;right:-1px;top:20%;height:3.2rem;width:1px;background:var(--papier-hell)}
.raum:nth-child(2)::after{content:"";position:absolute;left:18%;bottom:-1px;width:3.2rem;height:1px;background:var(--papier-hell)}
.raum .rnr{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--lack)}
.raum h3{font-size:1.28rem;margin:.45rem 0 .7rem}
.raum p{font-family:var(--sans);font-size:.93rem;line-height:1.65;color:var(--tinte-70)}
.grundriss-satz{margin-top:1.4rem;font-size:1.05rem}
@media(max-width:700px){.grundriss{grid-template-columns:1fr}.raum{border-right:0!important}.raum:nth-child(3){border-bottom:1px solid var(--linie-stark)}}

/* drei Achsen */
.achsen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.achse{background:transparent;border-top:3px solid var(--tinte);padding:1.3rem .2rem 0}
.achse h3{font-size:1.22rem;margin-bottom:.6rem}
.achse h3 .formel{font-size:inherit}
.achse p{font-size:.98rem;color:var(--tinte-70)}
@media(max-width:800px){.achsen{grid-template-columns:1fr}}

/* Preislogik-Kasten */
.preislogik{max-width:44rem;margin:0 auto;text-align:center;position:relative;
  border:2px solid var(--tinte);background:var(--papier-hell);padding:2.2rem 2.4rem 2rem}
.preislogik::before{content:"";position:absolute;inset:5px;border:1px solid rgba(35,32,26,.25);pointer-events:none}
.preislogik h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.preislogik p{margin:1rem auto 0;font-size:1.04rem}
.preislogik .klein{font-family:var(--sans);font-size:.8rem;color:var(--tinte-50);margin-top:1.1rem}

/* Preis: die zwei Wege (Mieten ODER Kaufen) — die Entweder-oder-Logik muss man
   sehen, nicht lesen: zwei Karten mit einem ODER-Steg dazwischen. */
.wege-frage{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte-50);text-align:center;margin:1.6rem 0 .2rem}
.zwei-wege{position:relative}
.zwei-wege::before{content:"ODER";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:2;background:var(--papier-hell);
  border:1.5px solid var(--tinte);border-radius:50%;width:3rem;height:3rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--tinte)}
@media(max-width:700px){.zwei-wege::before{top:calc(50% - .5rem)}}
.weg-du-zahlst{font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-50);margin:.9rem 0 0;
  padding-top:.7rem;border-top:1px dashed var(--linie)}
/* Preis: die zwei Wege (Mieten | Kaufen) */
.zwei-wege{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin:1.9rem 0 0;text-align:left}
.weg{border:1px solid var(--linie-stark);background:var(--papier);padding:1.35rem 1.45rem 1.4rem;position:relative}
.weg.weg-hebel{border-width:2px;border-color:var(--tinte)}
.weg-fahne{position:absolute;top:-.72rem;left:1.3rem;background:var(--lack);color:var(--papier-hell);
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.16em;padding:.24rem .6rem}
.weg-name{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lack);margin:0}
.weg-preis{font-family:var(--serif);font-size:2.15rem;font-weight:600;line-height:1.08;margin:.55rem 0 0}
.weg-preis span{font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--tinte-50)}
.weg-was{font-family:var(--sans);font-size:.92rem;line-height:1.6;color:var(--tinte-70);margin:.7rem 0 0}
.weg-was b{color:var(--tinte);font-weight:600}
@media(max-width:700px){.zwei-wege{grid-template-columns:1fr}}

/* Preistafel (/preise): Stufenzeilen mit zwei Preisspalten */
.tafel{width:100%;max-width:56rem;border-collapse:collapse;margin:1.6rem 0 0;
  font-family:var(--sans);font-size:.96rem}
.tafel th{background:var(--papier-tief);font-weight:600;text-align:left;
  border:1px solid var(--linie-stark);padding:.7rem .9rem}
.tafel td{border:1px solid var(--linie-stark);padding:.75rem .9rem;vertical-align:top}
.tafel td.stufe-n{font-family:var(--serif);font-size:1.08rem;font-weight:600}
.tafel td.preis{font-family:var(--serif);font-size:1.22rem;font-weight:600;white-space:nowrap}
.tafel td.preis small{font-family:var(--sans);font-size:.78rem;font-weight:500;color:var(--tinte-50);display:block}
.tafel .zusatz td{background:var(--papier-hell)}
.preis-fuss{font-family:var(--sans);font-size:.86rem;color:var(--tinte-50);margin-top:1rem;max-width:52rem}
/* Preistafel mobil: jede Zeile wird eine Karte — statt aus dem Bild zu laufen */
@media(max-width:760px){
  .tafel,.tafel tbody,.tafel tr,.tafel td{display:block;width:100%}
  .tafel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tafel tr{border:1px solid var(--linie-stark);margin:0 0 1rem}
  .tafel td{border:0;border-top:1px dashed var(--linie);padding:.7rem .9rem}
  .tafel tr td:first-child{border-top:0;background:var(--papier-tief)}
  .tafel td.stufe-n{font-size:1.15rem}
  .tafel td.preis{font-size:1.3rem}
  .tafel td.preis small{display:inline;margin-left:.5rem}
}

/* Hannes-Sektion */
.hannes{background:var(--papier-tief);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.hannes-innen{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.hannes-bild{position:relative;max-width:24rem;margin:0 auto}
.hannes-bild img{width:100%;height:auto;display:block}
.blase{position:absolute;top:-1.2rem;right:-1rem;background:var(--papier-hell);
  border:1.5px solid var(--tinte);border-radius:3px;padding:.85rem 1.15rem;
  font-family:var(--serif);font-style:italic;font-weight:560;font-size:1.15rem;
  font-variation-settings:"SOFT" 70,"WONK" 1;box-shadow:3px 3px 0 var(--linie)}
.blase::after{content:"";position:absolute;bottom:-9px;left:2rem;width:14px;height:14px;
  background:var(--papier-hell);border-right:1.5px solid var(--tinte);border-bottom:1.5px solid var(--tinte);
  transform:rotate(45deg) skew(8deg,8deg)}
.hannes-text .eyebrow{margin-bottom:1rem}
.hannes-text h2{font-size:clamp(1.85rem,3.4vw,2.6rem)}
.hannes-text p{margin-top:1.05rem}
.hannes-text .wege{margin-top:1.5rem;display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-size:.94rem;font-weight:600}
.hannes-text .wege a.mehr{color:var(--tinte-70)}
@media(max-width:900px){.hannes-innen{grid-template-columns:1fr}.hannes-bild{max-width:18rem}}

/* Tinten-Block (Beweis) */
.beweis{background:var(--tinte);color:var(--papier)}
.beweis .eyebrow{color:rgba(246,241,231,.55)}
.beweis .eyebrow::before{background:var(--lack)}
.beweis h2{color:var(--papier-hell)}
.beweis p{color:rgba(246,241,231,.82)}
.beweis-karten{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.2rem}
.probe{position:relative;background:rgba(252,250,244,.045);border:1px solid rgba(246,241,231,.22);
  border-radius:3px;padding:1.6rem 1.5rem}
.probe::before,.probe::after{content:"";position:absolute;width:12px;height:12px;border:0 solid rgba(246,241,231,.45)}
.probe::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.probe::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.probe .pnr{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em;color:rgba(246,241,231,.5)}
.probe h3{font-size:1.3rem;margin:.5rem 0 .65rem;color:var(--papier-hell)}
.probe p{font-size:.97rem;line-height:1.6}
.probe a{color:var(--papier-hell);font-family:var(--sans);font-size:.88rem;font-weight:600;display:inline-block;margin-top:.9rem}
.beweis-schluss{margin-top:2rem;font-size:1.03rem}
.beweis-schluss a{font-weight:600}
@media(max-width:800px){.beweis-karten{grid-template-columns:1fr}}

/* Abschluss/finale */
.abschluss,.finale{text-align:center;padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(3.5rem,7vw,5.5rem)}
.abschluss h2,.finale h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.abschluss p,.finale p{margin:1.3rem auto 0;max-width:var(--mass)}
.abschluss .hero-ctas,.finale .hero-ctas{justify-content:center}
.abschluss .mailzeile{margin-top:1.2rem;font-family:var(--sans);font-size:.93rem;color:var(--tinte-50)}

/* Formulare (Kontakt) im Werkstück-Ton */
form label{display:block;font-family:var(--sans);font-size:.85rem;font-weight:600;
  letter-spacing:.04em;margin:1.1rem 0 .4rem}
form input[type=text],form input[type=email],form input[type=tel],form textarea,form select{
  width:100%;max-width:38rem;background:var(--papier-hell);border:1.5px solid var(--linie-stark);
  border-radius:2px;padding:.8rem .95rem;font-family:var(--serif);font-size:1rem;color:var(--tinte)}
form input:focus,form textarea:focus{outline:2px solid var(--lack);outline-offset:1px;border-color:var(--lack)}
form textarea{min-height:9rem;resize:vertical}
form button[type=submit]{margin-top:1.4rem}

/* ── Fuß: das Kolophon ── */
footer.fuss{background:var(--tinte);color:rgba(246,241,231,.75);font-family:var(--sans);font-size:.92rem}
.fuss-innen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:3.2rem 0 2.4rem}
.fuss-marke p{margin-top:.8rem;line-height:1.6}
footer.fuss h4{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(246,241,231,.45);margin-bottom:.9rem}
footer.fuss a{display:block;color:rgba(246,241,231,.75);text-decoration:none;padding:.22rem 0}
footer.fuss a:hover{color:var(--papier-hell)}
.farbbalken{display:flex;gap:0;height:10px;width:8.5rem;margin-top:1.3rem}
.farbbalken i{flex:1}
.kolophon{border-top:1px solid rgba(246,241,231,.15);padding:1.3rem 0 1.6rem;
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:.8rem;color:rgba(246,241,231,.45)}
@media(max-width:900px){.fuss-innen{grid-template-columns:1fr 1fr}}

/* ── Import-Stilschicht: gehobene symbiopress-Substanz im Werkstück-Ton ── */
.prosa{max-width:var(--mass)}
.prosa h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:2.2rem 0 .8rem}
.prosa h3{font-size:1.22rem;margin:1.6rem 0 .55rem}
.prosa p{margin:.85rem 0}
.prosa ul,.prosa ol,.liste{margin:.85rem 0 .85rem 1.2rem}
.prosa a{color:var(--lack)}
.tldr,.merksatz,.panel{background:var(--papier-hell);border:1px solid var(--linie);
  border-left:3px solid var(--lack);border-radius:3px;padding:1.2rem 1.4rem;margin:1.4rem 0;
  font-size:1rem}
.merksatz{font-family:var(--serif);font-style:italic;font-weight:520;
  font-variation-settings:"SOFT" 70,"WONK" 1}
.karte{background:var(--papier-hell);border:1px solid var(--linie);border-radius:3px;
  padding:1.4rem 1.3rem;margin:.8rem 0}
.k-kat,.kat{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lack)}
.muted{color:var(--tinte-50)}
.weiter{font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--lack)}
table{border-collapse:collapse;font-family:var(--sans);font-size:.94rem;margin:1.2rem 0;width:100%;max-width:52rem}
@media(max-width:700px){
  .prose-block table,.prosa table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .prose-block table th,.prose-block table td,.prosa table th,.prosa table td{min-width:9rem}
}
th,td{border:1px solid var(--linie-stark);padding:.6rem .8rem;text-align:left;vertical-align:top}
th{background:var(--papier-tief);font-weight:600}

/* ── Makulatur: die 404 (30.07.) ──
   Der Fehldruck ist in einer Druck-Manufaktur kein Unfall, sondern ein eigener
   Stapel: Makulatur. Das Band trägt Tinte wie der Beweis-Block, darunter die
   Suche und die Türen — eine 404, die weiterarbeitet statt sich zu entschuldigen. */
.mak{background:var(--tinte);color:var(--papier);position:relative;overflow:hidden;
  padding:clamp(3.2rem,7vw,5.4rem) 0 clamp(2.8rem,6vw,4.4rem)}
.mak::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 95% at 50% 38%,rgba(246,241,231,.07),transparent 70%)}
/* Die Schatten-Ziffer läuft NUR nach unten aus dem Bogen (Sichtprobe 30.07.:
   ein zusätzlicher Anschnitt rechts hat die letzte 4 mitten im Zeichen gekappt —
   das liest sich als Fehler, nicht als Absicht). Waagerecht bleibt sie ganz. */
.mak::after{content:"404";position:absolute;right:clamp(1rem,4vw,3rem);bottom:-.3em;
  font-family:var(--serif);font-weight:560;font-size:clamp(7rem,22vw,17rem);line-height:.8;
  letter-spacing:-.02em;color:rgba(246,241,231,.055);pointer-events:none;user-select:none}
@media(max-width:700px){.mak::after{right:.5rem;bottom:-.34em}}
.mak .wrap{position:relative;z-index:1}
.mak .eyebrow{color:rgba(246,241,231,.58);margin-bottom:1.2rem}
.mak h1{font-size:clamp(2.1rem,5vw,3.5rem);max-width:24ch;color:var(--papier-hell)}
.mak .lead{margin-top:1.2rem;font-size:1.12rem;max-width:56ch;color:rgba(246,241,231,.82)}
/* Passermarke: der angefragte Pfad, wie eine Registermarke am Bogenrand */
.mak-marke{margin-top:1.7rem;display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;
  border:1px dashed rgba(246,241,231,.28);border-radius:2px;padding:.5rem .8rem;
  max-width:100%;color:rgba(246,241,231,.6)}
.mak-marke span{text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:700;
  color:rgba(246,241,231,.45);flex:none}
.mak-marke code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;
  color:var(--papier-hell);overflow-wrap:anywhere;min-width:0}
/* Suchbogen */
.suchform{margin-top:2.1rem;max-width:34rem}
.suchform label{display:block;font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(246,241,231,.55);margin-bottom:.55rem}
.suchform-zeile{display:flex;gap:.6rem;flex-wrap:wrap}
.suchform input{flex:1 1 14rem;min-width:0;font-family:var(--serif);font-size:1.02rem;
  padding:.85rem 1rem;border:1.5px solid rgba(246,241,231,.3);border-radius:2px;
  background:rgba(246,241,231,.06);color:var(--papier-hell)}
.suchform input::placeholder{color:rgba(246,241,231,.42)}
.suchform input:focus{outline:2px solid var(--lack);outline-offset:1px;
  border-color:var(--lack);background:rgba(246,241,231,.1)}
.suchform button{flex:none}
/* die Türen */
.mak-tueren{margin-top:1.6rem}
.mak-tueren .kat{display:block;margin-bottom:.9rem}
.mak-tueren .cards{margin-bottom:2rem}
.mak-schluss{margin-top:.6rem;display:flex;gap:.9rem 1.2rem;align-items:center;flex-wrap:wrap;
  font-family:var(--sans);font-size:.96rem;color:var(--tinte-70)}
.mak-schluss a{color:var(--lack)}
@media(max-width:640px){.suchform button{width:100%;justify-content:center}}

/* ── Überdruck für die hd-Streuseiten (Perf, 30.07.) ──
   Die dynamischen Alt-Renderer (Suche, Danke-Seite) sprechen noch das hd-*-
   Designsystem aus /hannes.css. Auf Werkstück-Seiten wird diese Datei nicht mehr
   geladen (gemessen: 11,2 KB gzip, keine benutzte Klasse auf /ratgeber) — damit
   solche Seiten trotzdem im Werkstück stehen statt nackt, tragen die tragenden
   hd-Klassen hier eine Werkstück-Definition. Neue Seiten bauen mit den echten
   Werkstück-Klassen; das hier ist Auffangnetz, kein zweites System. */
.hd-wrap{max-width:76rem;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}
.hd-band{padding:clamp(2.6rem,5vw,3.8rem) 0}
.hd-band--soft{background:var(--papier-tief);border-block:1px solid var(--linie)}
.hd-eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tinte-50);display:flex;align-items:center;gap:.7rem;
  margin-bottom:1rem}
.hd-eyebrow::before{content:"";width:2.1rem;height:1px;background:var(--lack);flex:none}
.hd-title{font-family:var(--serif);font-weight:560;line-height:1.12;letter-spacing:-.01em;
  font-size:clamp(2rem,4.4vw,3.1rem);max-width:24ch;text-wrap:balance}
.hd-h3{font-family:var(--serif);font-weight:560;font-size:1.25rem;line-height:1.2;margin-bottom:.5rem}
.hd-lead{margin-top:1.1rem;font-size:1.1rem;max-width:60ch;color:var(--tinte-70)}
.hd-cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hd-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:600;
  font-size:.95rem;text-decoration:none;padding:.92rem 1.6rem;border-radius:2px;
  cursor:pointer;transition:transform .12s,background .12s,border-color .12s}
.hd-btn--primary{background:var(--lack);color:var(--papier-hell);border:1px solid var(--lack-tief);
  box-shadow:0 2px 0 var(--lack-tief)}
.hd-btn--primary:hover{background:var(--lack-tief);transform:translateY(1px);box-shadow:0 1px 0 var(--lack-tief)}
.hd-btn--ghost{background:transparent;color:var(--tinte);border:1.5px solid var(--linie-stark)}
.hd-btn--ghost:hover{border-color:var(--tinte);transform:translateY(1px)}
.hd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem;margin-top:1.6rem}
.hd-card{background:var(--papier-hell);border:1px solid var(--linie);border-radius:3px;
  padding:1.5rem 1.35rem 1.4rem;text-decoration:none;color:inherit;display:block}
a.hd-card:hover{border-color:var(--tinte)}
.hd-badge{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lack)}
.hd-reveal{opacity:1;transform:none}
.cf-turnstile{flex-basis:100%}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}