/* ============================================================
   AURALEX HANDWERK · Entwurf "Zwei Orte"
   Die Seite argumentiert über die Pyramide (Spec 02.09.2026):
   1 Zeile, 2 Motto, 3 Einwand, 4 Warum heute, 5 Maßstab, 6 Beleg.
   Gestaltungsidee: zwei Orte, die gleichzeitig laufen.
   Dunkel = die Baustelle, Papier = das Büro. Der Hero ist geteilt,
   danach liegt jedes Büro-Ergebnis als weißes Blatt auf der dunklen
   Bühne (Angebot, Stellenanzeige, Fahrplan). Das erbt die Grundregel
   der 17:04-Seite (einziges Weiß = Papier) und macht sie zur Komposition.
   Typografie: Switzer 400 riesig + JetBrains Mono, ein Easing, 1s.
   ============================================================ */
:root{
  --bg:      #0A0A0C;
  --bg-lift: #101014;
  --ink:     #F5F6F8;
  --muted:   #9DA1A9;
  --meta:    #71757D;
  --line:    rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);
  --papier:  #F4F5F7;
  --papier-ink:#0C0C0E;
  --papier-line:#D9DBE0;
  --papier-meta:#6B6F76;
  --rand: clamp(20px, 4vw, 80px);
  --w: min(1560px, 100% - (var(--rand) * 2));
  /* Außenkante der Hero-Hälften: auf sehr breiten Screens bündig mit dem Wrap */
  --aussen: max(var(--rand), calc((100vw - 1560px) / 2));
  --font-b: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  --font-m: 'JetBrains Mono', 'Courier New', monospace;
  --ease:  cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-b);font-size:18px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--bg)}
.papier ::selection,.h-buero ::selection{background:var(--papier-ink);color:var(--papier)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{hyphens:manual}
b{font-weight:600}
section{position:relative;z-index:1;scroll-margin-top:70px}
.wrap{width:var(--w);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typo-Register ---------- */
.display{font-weight:400;letter-spacing:-.035em;line-height:.95;text-wrap:balance;font-size:clamp(3rem,10.5vw,10.8rem)}
.gross{font-weight:400;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;font-size:clamp(2.1rem,5.2vw,5.4rem)}
.kicker{font-family:var(--font-m);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.sub{font-size:clamp(1.02rem,1.25vw,1.2rem);color:var(--muted);max-width:34em;font-weight:400;hyphens:none}
.kap{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(36px,6vh,64px)}
.kap .t{font-family:var(--font-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.kap::after{content:"";flex:1;border-top:1px solid var(--line-soft);align-self:center}
.mono-note{font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);line-height:1.9}

/* ---------- Ein Reveal-Vokabular ---------- */
.l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.li{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.in .li,.li.in{transform:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1;transform:none}
@keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
@keyframes welle{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .li,.rv{transform:none!important;opacity:1!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Header: eine Zeile, die sich dem Untergrund anpasst ----------
   mix-blend-mode:difference: weiß auf der Baustelle, schwarz auf dem Papier.
   Kein Glas, keine Fläche. Die Seite unter dem Kopf entscheidet die Farbe. */
header{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;mix-blend-mode:difference;color:#fff}
/* Der Kopf spiegelt die Teilung des Heros: links die Marke, rechts Navigation und Nummer.
   So bleibt jedes Wort auf einer Seite der Naht. */
.head-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;height:64px}
.head-l{padding-left:var(--aussen);display:flex;align-items:center}
.head-r{padding-left:clamp(24px,3.6vw,64px);padding-right:var(--aussen);display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,38px);min-width:0}
.head-in a,.head-in button{pointer-events:auto}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-m);font-size:11.5px;letter-spacing:.18em}
.brand img{height:17px;width:auto}
.hnav{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);min-width:0}
.hnav a{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;white-space:nowrap;padding-bottom:3px;border-bottom:1px solid transparent;transition:opacity .35s,border-color .35s}
.hnav a:hover,.hnav a:focus-visible{opacity:1}
.hnav a[aria-current="page"]{opacity:1;border-color:currentColor}
.head-tel{margin-left:auto;font-family:var(--font-m);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .35s}
.head-tel:hover,.head-tel:focus-visible{opacity:.6}
.head-tel .kurz{display:none}
.menu-btn{font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:none;border:none;color:inherit;cursor:pointer;padding:0 0 3px;border-bottom:1px solid currentColor;transition:opacity .35s}
.menu-btn:hover,.menu-btn:focus-visible{opacity:.6}
@media(max-width:1199px){.hnav{display:none}}
@media(min-width:1200px){.menu-btn{display:none}}
@media(max-width:1439px){
  .head-tel .lang{display:none}
  .head-tel .kurz{display:inline}
}
@media(max-width:860px){
  .head-in{grid-template-columns:auto 1fr}
  .head-r{padding-left:16px;justify-content:flex-end}
  /* Schmal: Riesen-Glyphen laufen sonst scharf unter den Kopf. Weichzeichner hinter der Zeile,
     die Farbe kommt weiter aus dem Untergrund (difference bleibt an). */
  header{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media(max-width:640px){.brand span{display:none}}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ============================================================
   01 · DIE ZEILE · zwei Orte, ein Vormittag
   ============================================================ */
#hero.geteilt{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.h-bau,.h-buero{display:flex;flex-direction:column;min-width:0;padding-top:calc(64px + clamp(28px,6vh,64px));padding-bottom:22px}
.h-bau{background:var(--bg);padding-left:var(--aussen);padding-right:clamp(24px,3.6vw,64px)}
.h-buero{background:var(--papier);color:var(--papier-ink);padding-left:clamp(24px,3.6vw,64px);padding-right:var(--aussen)}
.h-kick{display:flex;align-items:center;gap:10px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.h-buero .h-kick{color:var(--papier-meta)}
.h-kick .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ink);flex:0 0 7px}
.h-buero .h-kick .dot{background:var(--papier-ink)}
.h-kick .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.h-head{font-weight:400;letter-spacing:-.035em;line-height:.94;text-wrap:balance;font-size:clamp(2.55rem,5.2vw,6.4rem);margin-top:clamp(28px,7vh,84px);max-width:9em}
.h-scene{margin-top:clamp(32px,6vh,72px)}
.h-foot{display:flex;justify-content:space-between;gap:16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);line-height:1.8}
.h-buero .h-foot{border-color:var(--papier-line);color:var(--papier-meta)}
.h-foot .pfeil{color:var(--ink);white-space:nowrap}

/* Die Sprachnotiz (Baustelle) */
.notiz{border:1px solid var(--line);background:var(--bg-lift);padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) clamp(16px,2vw,22px);max-width:560px;margin-bottom:clamp(22px,4vh,40px);transition:opacity .6s var(--ease)}
.notiz.aus{opacity:0}
.n-kopf{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.n-kopf .st{color:var(--muted)}
.n-wave{display:flex;justify-content:space-between;align-items:center;height:clamp(28px,3.2vw,44px);margin:clamp(14px,2vh,22px) 0}
.n-wave i{flex:0 0 2px;height:var(--h,60%);background:var(--ink);opacity:.85;border-radius:99px;transform-origin:center;animation:welle 1.4s ease-in-out calc(var(--i)*-.12s) infinite alternate}
.notiz:not(.spricht) .n-wave i{animation-play-state:paused;opacity:.28;transition:opacity .9s}
.n-text{font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.58;color:var(--muted);min-height:calc(1.58em*5);hyphens:none}
.n-text .caret{display:inline-block;width:1px;height:.95em;background:var(--ink);vertical-align:-.12em;margin-left:2px;animation:caret 1.05s steps(1) infinite}
.notiz:not(.spricht) .n-text .caret{display:none}

/* Der Entwurf (Büro). Das Blatt ist die ganze Hälfte, die Zeilen sind gedruckt. */
.hdoc{max-width:640px;margin-bottom:clamp(22px,4vh,40px);transition:opacity .6s var(--ease)}
.hdoc.aus{opacity:0}
.hd-kopf{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);border-bottom:1px solid var(--papier-ink);padding-bottom:12px}
.hd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:baseline;border-top:1px solid var(--papier-line);padding:clamp(9px,1.3vh,13px) 0;font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.38}
.hd-kopf+.hd-row{border-top:none}
.hd-t .m{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.04em;color:var(--papier-meta);margin-top:3px}
.hd-v{font-family:var(--font-m);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.hd-chip{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--papier-ink);padding:3px 9px;white-space:nowrap;justify-self:end}
.hd-chip.leise{border-color:var(--papier-line);color:var(--papier-meta)}
.hd-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px 20px;flex-wrap:wrap;border-top:2px solid var(--papier-ink);margin-top:4px;padding-top:clamp(12px,1.8vh,18px)}
.hd-sum .s-l{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier-meta)}
.hd-sum .s-v{font-weight:600;font-size:clamp(1.5rem,2.3vw,2.3rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.hd-status{display:flex;align-items:center;gap:9px;margin-top:clamp(12px,1.8vh,18px);font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--papier-meta)}
.hd-status .dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--papier-ink)}
.hd-status .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
/* Schritte: Platz ist reserviert, nur Sichtbarkeit wandert (kein Layout-Sprung im Hero) */
.hd-step{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hd-step.in{opacity:1;transform:none}
.hd-row.hd-step{visibility:hidden}
.hd-row.hd-step.in{visibility:visible}

@media(max-width:860px){
  #hero.geteilt{grid-template-columns:1fr;min-height:0}
  .h-bau,.h-buero{padding-left:var(--rand);padding-right:var(--rand);min-height:0}
  .h-bau{padding-top:calc(64px + 28px);padding-bottom:28px}
  .h-buero{padding-top:clamp(40px,7vh,64px);padding-bottom:26px}
  .h-head{margin-top:clamp(22px,5vh,44px);max-width:100%}
  .h-scene{margin-top:clamp(30px,5vh,48px)}
  .n-text{min-height:calc(1.58em*4)}
  .h-foot span:nth-child(2){display:none}
  .h-bau .h-foot .pfeil{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .n-wave i{animation:none}
  .n-text .caret{display:none}
  .h-kick .dot::after,.hd-status .dot::after{animation:none}
  .hd-step{opacity:1!important;transform:none!important;visibility:visible!important;transition:none}
  .notiz.aus,.hdoc.aus{opacity:1}
}

/* ============================================================
   02 · DAS MOTTO · Davids Satz, Wort für Wort
   ============================================================ */
#motto{padding:clamp(130px,20vh,250px) 0 clamp(110px,16vh,200px)}
.motto{font-weight:400;letter-spacing:-.025em;font-size:clamp(1.85rem,4.5vw,4.6rem);line-height:1.16;max-width:21.5em;hyphens:none}
.motto .w{opacity:.14;transition:opacity .45s ease}
.motto .w.on{opacity:.62}
.motto .mir .w.on{opacity:1}
.motto .mir{display:block;margin-top:.55em}
.motto .flip{display:inline-block;transform:rotate(180deg);transition:transform 1.1s var(--ease)}
.motto .flip.on{transform:none}
.motto-sig{display:flex;align-items:center;gap:14px;margin-top:clamp(30px,5vh,56px);font-family:var(--font-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--meta)}
.motto-sig::before{content:"";width:36px;border-top:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.motto .w{opacity:1}.motto .flip{transform:none}}

/* ============================================================
   03 · DER EINWAND · die Frage, an der jeder Abschluss hängt
   ============================================================ */
#einwand{padding:clamp(100px,14vh,180px) 0 0}
.frage{font-weight:400;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.6rem,3.6vw,3.6rem);color:var(--muted);text-wrap:balance}
.ja{font-weight:400;letter-spacing:-.05em;line-height:.84;font-size:clamp(7rem,24vw,22rem);margin:.02em 0 .08em -.03em}
.weil{font-weight:400;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.7rem,3.8vw,3.9rem);max-width:17em;text-wrap:balance}
.wer{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(26px,4vh,40px);border:1px solid var(--line);padding:9px 18px 9px 9px;transition:background .35s}
.wer:hover,.wer:focus-visible{background:rgba(255,255,255,.045)}
.wer img{width:46px;height:46px;object-fit:cover;object-position:center 18%;flex:0 0 46px}
.wer span{font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.wer span b{display:block;font-weight:500;color:var(--ink)}
#einwand .sub{margin-top:clamp(36px,6vh,64px)}

/* Die Dreispaltentabelle: das beste vorhandene Stück (August PDFs), hier als Haarlinien-Raster */
.vgl-kick{margin-top:clamp(70px,11vh,130px)}
.vgl{display:grid;grid-template-columns:minmax(120px,.85fr) repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.vgl .c{padding:clamp(16px,2.4vh,26px) clamp(12px,1.6vw,26px) clamp(16px,2.4vh,26px) 0;border-bottom:1px solid var(--line-soft);font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.42;color:var(--muted);hyphens:none;min-width:0}
.vgl .c:not(.l){padding-left:clamp(12px,1.6vw,26px)}
.vgl .c.h{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);padding-top:18px;padding-bottom:18px}
.vgl .c.l{font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);line-height:1.7;padding-right:12px}
.vgl .c.a{color:var(--ink);background:rgba(255,255,255,.035);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.vgl .c.a.h{color:var(--ink);border-top:1px solid var(--ink)}
.vgl .c.a.last{border-bottom:1px solid var(--ink)}
.vgl .c::before{display:none}
.vgl-note{margin-top:clamp(22px,3.6vh,34px);max-width:34em;color:var(--muted);font-size:clamp(1rem,1.2vw,1.15rem);hyphens:none}
.vgl-note b{font-weight:400;color:var(--ink)}
@media(max-width:860px){
  .vgl{grid-template-columns:1fr;border-top:none}
  .vgl .c.h{display:none}
  .vgl .c.l{border-bottom:none;padding:26px 0 8px;border-top:1px solid var(--line)}
  .vgl .c:not(.l){padding:10px 0 12px 0;border-bottom:none;font-size:1rem}
  .vgl .c:not(.l):not(.h)::before{display:block;content:attr(data-col);font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-bottom:3px}
  .vgl .c.a{background:none;border-left:2px solid var(--ink);border-right:none;padding-left:14px;margin-top:6px;padding-bottom:22px}
  .vgl .c.a.last{border-bottom:none}
  .vgl .c:last-child{border-bottom:1px solid var(--line)}
}

/* Die Arbeitsteilung, ehrlich: drei Teile */
.teile{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(70px,11vh,130px)}
.teil{background:var(--bg);padding:clamp(26px,4vh,44px) clamp(18px,2vw,34px) clamp(26px,4vh,44px) 0;position:relative}
.teil:not(:first-child){padding-left:clamp(18px,2vw,34px)}
.teil .t-k{display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin-bottom:18px}
.teil .t-n{display:block;font-weight:400;font-size:clamp(1.7rem,2.9vw,3rem);letter-spacing:-.025em;line-height:1;margin-bottom:16px}
.teil p{color:var(--muted);font-size:clamp(.98rem,1.1vw,1.08rem);line-height:1.55;max-width:24em;hyphens:none}
@media(max-width:860px){.teile{grid-template-columns:1fr}.teil{padding-left:0!important}}

/* ============================================================
   04 · WARUM ES HEUTE GEHT · der eine Satz
   ============================================================ */
#warum{padding:clamp(130px,20vh,250px) 0}
#warum .satz{font-weight:400;letter-spacing:-.02em;font-size:clamp(1.7rem,3.9vw,4rem);line-height:1.26;max-width:24em;margin:0 auto;hyphens:none;text-align:center}
#warum .satz .w{opacity:.14;transition:opacity .45s ease}
#warum .satz .w.on{opacity:1}
.schwelle{margin:clamp(44px,7vh,84px) auto 0;text-align:center;font-size:clamp(1.15rem,1.9vw,1.9rem);color:var(--muted);letter-spacing:-.01em;max-width:30em;hyphens:none}
.schwelle b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){#warum .satz .w{opacity:1}}

/* ============================================================
   05 · DER MASSSTAB · die Stellenanzeige, die nie aufgegeben wird
   ============================================================ */
#massstab{padding:clamp(100px,14vh,180px) 0 0}
#massstab .gross{max-width:14em}
.duo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,4.5vw,84px);align-items:center;margin-top:clamp(44px,7vh,80px)}
.duo>*{min-width:0}
.duo .txt p{color:var(--muted);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.65;max-width:30em;hyphens:none}
.duo .txt p+p{margin-top:18px}
.duo .txt .mono-note{display:block;margin-top:26px}
.anzeige{background:var(--papier);color:var(--papier-ink);width:100%;max-width:470px;justify-self:end;padding:clamp(22px,2.6vw,36px)}
.an-kopf{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);border-bottom:1px solid var(--papier-ink);padding-bottom:12px}
.an-titel{font-weight:600;font-size:clamp(1.3rem,1.9vw,1.75rem);letter-spacing:-.02em;line-height:1.1;padding:18px 0 8px}
.an-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:baseline;border-top:1px solid var(--papier-line);padding:11px 0;font-size:15px;line-height:1.45;hyphens:none}
.an-row .k{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--papier-meta);line-height:1.7}
.an-row.geld{border-top:2px solid var(--papier-ink)}
.an-row.geld .v{font-weight:600;font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.an-fuss{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);margin-top:16px;line-height:1.9;border-top:1px solid var(--papier-line);padding-top:12px}
@media(max-width:860px){.duo{grid-template-columns:1fr}.anzeige{justify-self:start}.an-row{grid-template-columns:96px minmax(0,1fr)}}

/* ============================================================
   06 · DER BELEG · echte App + sechs Bereiche
   ============================================================ */
#beleg{padding:clamp(130px,18vh,240px) 0 0}
#beleg .gross{max-width:15em}
#beleg .sub{margin-top:clamp(24px,4vh,40px)}
.buehne{margin-top:clamp(44px,7vh,80px)}
.frame{border:1px solid var(--line);background:var(--bg-lift);overflow:hidden}
.frame video{display:block;width:100%;height:auto}
.phone{max-width:min(390px,86vw);margin:0 auto;border:1px solid var(--line);background:var(--bg-lift);overflow:hidden}
.phone img{width:100%;height:auto}
.film-phone{display:none}
@media(max-width:560px){.frame-film{display:none}.film-phone{display:block}}
.frame-fuss{display:flex;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 2px 0;font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta)}
/* Sechs Bereiche als Zeilen. Das Bild (die iPhone App) erscheint nur unter dem Cursor,
   als schwebende Karte. Auf Touch steht die Karte ruhig unter der Zeile. */
.fn{margin-top:clamp(56px,9vh,100px)}
.fn-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:clamp(14px,2.4vw,40px);align-items:start;padding:clamp(22px,3.4vh,38px) 2px;border-top:1px solid var(--line);transition:opacity .45s;cursor:default;outline-offset:-2px}
.fn-row:last-of-type{border-bottom:1px solid var(--line)}
.fn-row .nr{font-family:var(--font-m);font-size:11px;letter-spacing:.12em;color:var(--meta);padding-top:.9em}
.fn-mitte{display:flex;flex-direction:column;gap:12px;min-width:0}
.fn-row .titel{font-weight:400;letter-spacing:-.025em;line-height:1;font-size:clamp(2rem,4.6vw,4.6rem)}
.fn-txt{color:var(--muted);font-size:15px;line-height:1.55;max-width:38em;hyphens:none}
.fn-row .meta{font-family:var(--font-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--meta);white-space:nowrap;padding-top:1.1em;text-align:right}
@media(hover:hover) and (pointer:fine){#fn:hover .fn-row:not(:hover){opacity:.32}}
.fn-karte{display:block;background:var(--bg-lift);border:1px solid var(--line);padding:12px 12px 12px}
.fn-karte>span{display:block}
/* Die Karte zeigt beides: der Desktop als Bühne, das iPhone davor, unten rechts */
.k-duo{position:relative;display:block;padding:0 18px 34px 0}
.k-desk{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:#0D0D10;border-radius:6px}
.k-desk img{width:100%;height:100%;object-fit:cover;object-position:top left}
.k-phone{position:absolute;right:0;bottom:0;width:30%;aspect-ratio:9/19.5;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.22);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5)}
.k-phone img{width:100%;height:100%;object-fit:cover;object-position:top center}
.k-cap{font-size:13px;line-height:1.45;color:var(--ink);margin-top:10px;hyphens:none}
.k-fuss{display:flex!important;justify-content:space-between;gap:10px;margin-top:8px;font-family:var(--font-m);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
@media(hover:hover) and (pointer:fine) and (min-width:920px){
  .fn-karte{position:fixed;left:0;top:0;width:clamp(340px,30vw,460px);z-index:42;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s;will-change:transform}
  .fn-karte.an{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
}
@media(hover:none),(pointer:coarse),(max-width:919px){
  .fn-karte{grid-column:2/-1;max-width:320px;margin-top:6px}
}
@media(max-width:900px){
  .fn-row{grid-template-columns:44px minmax(0,1fr)}
  .fn-row .meta{display:none}
}
.mehr{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(22px,3.6vh,34px);font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.mehr a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:5px;transition:border-color .35s}
.mehr a:hover,.mehr a:focus-visible{border-color:var(--ink)}

/* ============================================================
   DER WEG · das Blatt mit Unterschrift
   ============================================================ */
#weg{padding:clamp(130px,18vh,240px) 0 0}
.gravur{font-weight:300;text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;text-align:center;font-size:clamp(1.05rem,2vw,1.7rem);color:var(--muted);margin-bottom:clamp(44px,7vh,80px)}
.doc{max-width:1180px;margin:0 auto;background:var(--papier);color:var(--papier-ink);padding:clamp(30px,6vw,92px)}
.doc-top{display:flex;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;font-family:var(--font-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);border-bottom:1px solid var(--papier-ink);padding-bottom:18px}
.doc h2{font-weight:600;line-height:1;letter-spacing:-.03em;font-size:clamp(2.1rem,4.6vw,4.4rem);margin:clamp(40px,6vh,64px) 0 18px;max-width:12em;text-wrap:balance}
.doc .lead{color:#4A473F;max-width:32em;margin-bottom:clamp(44px,7vh,72px);font-size:clamp(1.02rem,1.3vw,1.25rem);hyphens:none}
.pos{list-style:none}
.pos li{display:grid;grid-template-columns:64px minmax(0,1fr) 170px 150px;gap:clamp(14px,2.5vw,40px);align-items:baseline;border-top:1px solid var(--papier-line);padding:clamp(20px,3vh,30px) 0}
.pos .p-nr{font-family:var(--font-m);font-size:12px;color:var(--papier-meta);white-space:nowrap}
.pos .p-txt{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.45;hyphens:none}
.pos .p-dauer,.pos .p-preis{font-family:var(--font-m);font-size:12px;letter-spacing:.06em;color:var(--papier-meta);text-align:right;white-space:nowrap}
.pos .p-preis{color:var(--papier-ink)}
.summe{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:2px solid var(--papier-ink);margin-top:6px;padding-top:26px}
.summe .s-lbl{font-family:var(--font-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier-meta)}
.summe .s-val{font-weight:600;font-size:clamp(2.4rem,6vw,5.5rem);letter-spacing:-.03em;line-height:1}
.doc-foot{display:flex;justify-content:space-between;align-items:end;gap:36px;flex-wrap:wrap;margin-top:clamp(50px,8vh,80px)}
.doc-sig img{width:min(240px,60vw);opacity:.85;clip-path:inset(0 100% 0 0);transition:clip-path 1.7s var(--ease) .35s}
.doc.in .doc-sig img{clip-path:inset(0 0 0 0)}
.doc-sig .sig-name{font-family:var(--font-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--papier-meta);border-top:1px solid var(--papier-line);padding-top:12px;margin-top:6px}
.btn{display:inline-block;background:var(--papier-ink);color:var(--papier);font-weight:500;font-size:16px;padding:17px 30px;border:none;cursor:pointer;transition:opacity .35s,transform .35s var(--ease)}
.btn:hover,.btn:focus-visible{opacity:.84}
.btn:active{transform:translateY(1px)}
.btn-note{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--papier-meta);margin-top:12px;line-height:1.8}
@media(max-width:860px){
  .pos li{grid-template-columns:64px minmax(0,1fr)}
  .pos .p-dauer,.pos .p-preis{grid-column:2;text-align:left}
}
@media(prefers-reduced-motion:reduce){.doc-sig img{clip-path:none;transition:none}}

/* ============================================================
   KONTAKT · wer dahinter steckt, Klartext, reden
   ============================================================ */
#kontakt{padding:clamp(130px,18vh,240px) 0 0}
.founder{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,80px);align-items:center;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:clamp(30px,5vh,54px) 2px;margin-bottom:clamp(80px,12vh,150px)}
.founder .f-txt p{color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.6;max-width:34em;hyphens:none}
.founder .f-txt .f-kick{display:block;margin-bottom:16px}
.founder .f-foto{width:clamp(120px,14vw,190px);overflow:hidden}
.founder .f-foto img{aspect-ratio:3/3.6;object-fit:cover;object-position:center 22%}
.founder .f-foto figcaption{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin-top:10px;line-height:1.8}
.mehr-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:7px;transition:border-color .35s}
.mehr-link:hover,.mehr-link:focus-visible{border-color:var(--ink)}
@media(max-width:700px){.founder{grid-template-columns:1fr}.founder .f-foto{order:-1}}
.faq{margin-bottom:clamp(90px,13vh,160px)}
.faq-liste{border-top:1px solid var(--line)}
.faq-liste details{border-bottom:1px solid var(--line-soft)}
.faq-liste summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:64px minmax(0,1fr) 40px;gap:clamp(14px,2.5vw,40px);align-items:baseline;padding:clamp(20px,3vh,30px) 2px}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste .q-nr{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;color:var(--meta);white-space:nowrap;font-variant-numeric:tabular-nums}
.faq-liste h4{font-weight:400;font-size:clamp(1.15rem,1.9vw,1.65rem);letter-spacing:-.01em;line-height:1.3;hyphens:none}
.faq-liste .q-mark{font-family:var(--font-m);font-size:19px;color:var(--meta);text-align:right;transition:transform .5s var(--ease),color .35s}
.faq-liste details[open] .q-mark{transform:rotate(45deg);color:var(--ink)}
.faq-liste .a{padding:0 0 clamp(24px,3.4vh,36px);color:var(--muted);max-width:36em;margin-left:calc(64px + clamp(14px,2.5vw,40px));font-size:16px;hyphens:none}
@media(max-width:760px){.faq-liste summary{grid-template-columns:52px minmax(0,1fr) 26px}.faq-liste .a{margin-left:0}}
#kontakt .display{max-width:9em}
#kontakt .k-sub{margin:clamp(24px,4vh,40px) 0 clamp(52px,8vh,90px)}
.zellen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zelle{background:var(--bg);min-height:clamp(220px,30vh,320px);padding:clamp(22px,3vh,36px) clamp(20px,2.2vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative}
.zelle::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .4s;pointer-events:none}
.zelle:hover::after,.zelle:focus-visible::after{opacity:.045}
.zelle .z-kick{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.zelle .z-val{font-weight:400;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.5rem,2.3vw,2.5rem);hyphens:none;word-break:break-word;display:block}
.zelle .z-note{display:block;margin-top:12px;font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);line-height:1.9}
@media(max-width:860px){.zellen{grid-template-columns:1fr}.zelle{min-height:0;gap:16px}}
.foot{margin-top:clamp(100px,14vh,180px);border-top:1px solid var(--line)}
.foot-nav{width:var(--w);margin:0 auto;padding:24px 0;display:flex;flex-wrap:wrap;gap:12px 28px;border-bottom:1px solid var(--line-soft);font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.foot-nav a{color:var(--meta);transition:color .35s}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--ink)}
.foot-social{margin-left:auto;display:flex;gap:12px 22px;flex-wrap:wrap}
.foot-in{width:var(--w);margin:0 auto;padding:26px 0 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta)}
.foot .legal{display:flex;gap:26px}
.foot .legal a{transition:color .35s}
.foot .legal a:hover,.foot .legal a:focus-visible{color:var(--ink)}

/* ---------- Menü-Overlay ---------- */
.menu{position:fixed;inset:0;z-index:45;background:var(--bg);opacity:0;visibility:hidden;overflow:auto;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.menu.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.menu-in{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:84px 0 36px}
.m-liste{display:flex;flex-direction:column}
.m-link{display:flex;align-items:baseline;gap:clamp(14px,2.4vw,28px);padding:clamp(9px,1.5vh,15px) 2px;border-top:1px solid var(--line-soft);font-weight:400;letter-spacing:-.025em;line-height:1.05;font-size:clamp(1.55rem,4.1vw,3.3rem);color:var(--muted);opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) calc(var(--i)*45ms),transform .6s var(--ease) calc(var(--i)*45ms),color .35s ease 0s}
.menu.open .m-link{opacity:1;transform:none}
.m-link:last-child{border-bottom:1px solid var(--line-soft)}
.m-link .m-nr{font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;color:var(--meta);font-variant-numeric:tabular-nums}
.m-link:hover,.m-link:focus-visible,.m-link[aria-current="page"]{color:var(--ink)}
.m-fuss{display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;margin-top:clamp(26px,4.5vh,44px);font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta)}
.m-fuss a{transition:color .35s}
.m-fuss a:hover,.m-fuss a:focus-visible{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.menu{transition:none}.m-link{opacity:1;transform:none;transition:color .35s}}

/* Mobile dichter setzen, Ein-Wort-Waisen in Mono-Zeilen verteilen */
@media(max-width:560px){
  #motto{padding:clamp(90px,14vh,140px) 0 clamp(80px,12vh,120px)}
  #einwand,#massstab{padding-top:clamp(80px,12vh,120px)}
  #warum{padding:clamp(90px,14vh,150px) 0}
  #beleg,#weg,#kontakt{padding-top:clamp(90px,13vh,140px)}
  .kap{margin-bottom:clamp(26px,4vh,44px)}
  .kicker,.mono-note,.h-foot span,.frame-fuss span,.foot-in span,.kap .t,figcaption,.z-note,.an-fuss,.motto-sig{text-wrap:balance}
}

/* ============================================================
   UNTERSEITEN · geteilte Muster (Erfassen, Material & Marge,
   Außenwirkung, Founder, Kontakt, Rechtliches). Papier bleibt Papier.
   ============================================================ */
.kapitel{padding:clamp(100px,14vh,180px) 0 0}
@media(max-width:560px){.kapitel{padding-top:clamp(80px,12vh,120px)}}
/* Unterseiten Hero: eine Zeile, ein Gedanke, unten die Fußzeile */
.u-hero{min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:64px}
.u-hero .hero-mitte{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6vh 0 4vh}
.u-hero .hero-sub{margin-top:clamp(26px,4.5vh,48px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.u-hero .hero-sub .sub{max-width:28em}
.u-hero .hero-sub .kicker{text-align:right;line-height:2}
.hero-fuss{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;padding:16px 2px 22px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--meta)}
.hero-fuss .pfeil{color:var(--ink)}
@media(max-width:640px){.u-hero .hero-sub .kicker{display:none}.hero-fuss span:nth-child(2){display:none}}
/* Satz mit Chips (Wort für Wort beim Scrollen) */
.u-satz{padding:clamp(140px,20vh,260px) 0}
.u-satz .satz{font-weight:400;letter-spacing:-.02em;font-size:clamp(1.9rem,4.4vw,4.4rem);line-height:1.28;max-width:24em;margin:0 auto;hyphens:none;text-align:center}
.u-satz .satz .w{opacity:.14;transition:opacity .45s ease}
.u-satz .satz .w.on{opacity:1}
.u-satz .satz .chip{position:relative;display:inline-block;padding:0 .18em;font-weight:600}
.u-satz .satz .chip::before{content:"";position:absolute;inset:.04em -.03em .02em;border:1.5px solid rgba(255,255,255,.55);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.u-satz .satz .w.on.chip::before{transform:scaleX(1)}
.satz-cap{margin-top:clamp(26px,4vh,40px);text-align:center;font-family:var(--font-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--meta);line-height:2}
@media(max-width:560px){.u-satz{padding:clamp(90px,13vh,140px) 0}}
@media(prefers-reduced-motion:reduce){.u-satz .satz .w{opacity:1}.u-satz .satz .chip::before{transform:none}}
/* Zeilen mit Kicker links, Text, Wert rechts (Invert beim Hover) */
.pain{margin-top:clamp(48px,8vh,90px)}
.pain-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:clamp(18px,3vw,48px);align-items:baseline;padding:clamp(22px,3.2vh,34px) 2px;border-top:1px solid var(--line-soft);position:relative;isolation:isolate}
.pain-row:last-of-type{border-bottom:1px solid var(--line-soft)}
.pain-row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.pain-row:hover::before{transform:scaleY(1);transform-origin:top}
.pain-row>*{transition:color .35s}
.pain-row:hover .zeit-k,.pain-row:hover p,.pain-row:hover .kosten{color:var(--bg)}
.pain-row .zeit-k{font-family:var(--font-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);font-variant-numeric:tabular-nums}
.pain-row p{font-weight:400;font-size:clamp(1.2rem,2.1vw,1.85rem);line-height:1.3;letter-spacing:-.01em;hyphens:none}
.pain-row .kosten{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:760px){.pain-row{grid-template-columns:minmax(0,1fr)}.pain-row .kosten{white-space:normal}}
/* Zahlenzeile */
.zahlen{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(80px,12vh,150px)}
.zahlen ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.zahlen li{padding:clamp(28px,4.4vh,46px) 24px clamp(28px,4.4vh,46px) 0;border-right:1px solid var(--line-soft)}
.zahlen li:last-child{border-right:none}
.zahlen li:not(:first-child){padding-left:24px}
.z-num{font-weight:400;letter-spacing:-.03em;line-height:1;font-size:clamp(2.4rem,3.6vw,4.2rem);display:block}
.z-num b{font-weight:400;font-variant-numeric:tabular-nums}
.z-num i{font-style:normal;font-weight:400;font-size:.45em;color:var(--muted);margin-left:.14em;letter-spacing:0}
.z-lbl{font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);display:block;margin-top:14px}
@media(max-width:860px){.zahlen ul{grid-template-columns:1fr 1fr}.zahlen li{border-right:none;border-bottom:1px solid var(--line-soft);padding-left:0!important}.zahlen li:nth-child(3),.zahlen li:nth-child(4){border-bottom:none}}
/* Duo, Notiz unter der Bühne, Weiter Teaser */
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,4.5vw,84px);align-items:center;margin-top:clamp(44px,7vh,80px)}
.duo>*{min-width:0}
.duo .txt p{color:var(--muted);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.65;max-width:30em;hyphens:none}
.duo .txt p+p{margin-top:18px}
.duo .txt .mono-note{display:block;margin-top:24px}
@media(max-width:860px){.duo{grid-template-columns:1fr}.duo .phone{order:-1}}
.frame-note{margin-top:clamp(30px,5vh,52px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,64px);align-items:start}
.frame-note .sub{max-width:30em}
.frame-note .kicker{line-height:2.1;text-align:right}
@media(max-width:860px){.frame-note{grid-template-columns:1fr}.frame-note .kicker{text-align:left}}
.next{margin-top:clamp(110px,16vh,200px);border-top:1px solid var(--line)}
.next a{display:block;padding:clamp(40px,7vh,76px) 2px clamp(46px,8vh,84px);position:relative;isolation:isolate}
.next a::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.next a:hover::before,.next a:focus-visible::before{transform:scaleY(1);transform-origin:top}
.next .n-kick{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(16px,2.6vh,26px);font-family:var(--font-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--meta);transition:color .35s}
.next .n-titel{font-weight:400;letter-spacing:-.03em;line-height:.98;text-wrap:balance;font-size:clamp(2.6rem,7vw,7rem);transition:color .35s}
.next a:hover .n-kick,.next a:hover .n-titel,.next a:focus-visible .n-kick,.next a:focus-visible .n-titel{color:var(--bg)}
/* Papierzeilen (Zettel, Sternekarte, Postkarte) */
.pk-kopf{display:flex!important;justify-content:space-between;gap:12px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);border-bottom:1px solid var(--papier-ink);padding-bottom:10px}
.pk-zeile{display:flex!important;justify-content:space-between;gap:14px;align-items:baseline;border-top:1px solid var(--papier-line);padding:10px 0;font-size:13.5px;line-height:1.4}
.pk-kopf+.pk-zeile{border-top:none}
.pk-m{font-family:var(--font-m);font-size:9.5px;letter-spacing:.06em;color:var(--papier-meta);white-space:nowrap}
.pk-geld{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;border-top:2px solid var(--papier-ink);padding-top:11px}
.pk-geld b{font-weight:600;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-geld .pk-wert{font-weight:400;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-geld .pk-wert b{font-weight:600;font-size:inherit}
.pk-fuss{display:flex!important;justify-content:space-between;gap:10px;margin-top:12px;font-family:var(--font-m);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta)}
/* Drei Zettel: eine Notiz, drei Entwürfe */
.zettel3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.z3{background:var(--papier);color:var(--papier-ink);padding:clamp(18px,1.9vw,28px)}
.z3>span{display:block}
.zettel3 .z3:nth-child(2){margin-top:clamp(18px,3.5vh,44px)}
.zettel3 .z3:nth-child(3){margin-top:clamp(36px,7vh,88px)}
@media(max-width:860px){.zettel3{grid-template-columns:1fr;max-width:480px}.zettel3 .z3{margin-top:0!important}}
/* Bon: der abfotografierte Beleg, Zackenkante unten */
.bon{position:relative;background:var(--papier);color:var(--papier-ink);width:min(360px,88vw);margin:0 auto;padding:clamp(24px,2.7vw,32px) clamp(20px,2.3vw,28px);font-family:var(--font-m)}
.bon::after{content:"";position:absolute;left:0;right:0;top:100%;height:7px;background:conic-gradient(from 135deg at 50% 0,var(--papier) 90deg,transparent 90deg) 0 0/14px 7px repeat-x}
.bon .b-kopf{display:flex;justify-content:space-between;gap:12px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);border-bottom:1px solid var(--papier-ink);padding-bottom:12px}
.bon .b-name{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;padding:16px 0 6px}
.bon .b-zeile{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;line-height:1.5;padding:9px 0;border-top:1px solid var(--papier-line);font-variant-numeric:tabular-nums}
.bon .b-name+.b-zeile{border-top:none}
.bon .b-summe{display:flex;justify-content:space-between;gap:12px;border-top:2px solid var(--papier-ink);padding-top:12px;margin-top:2px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.bon .b-zu{display:flex;align-items:center;gap:9px;border:1px solid var(--papier-ink);padding:10px 12px;margin-top:16px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.bon .b-zu .dot{position:relative;flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--papier-ink)}
.bon .b-zu .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.bon .b-meta{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);margin-top:12px;line-height:1.9}
/* Papierdokument (Katalog, Rechnungen) */
.pdoc{background:var(--papier);color:var(--papier-ink);max-width:920px;margin:clamp(44px,7vh,80px) auto 0;padding:clamp(26px,3.2vw,52px)}
.pd-kopf{display:flex;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);border-bottom:1px solid var(--papier-ink);padding-bottom:13px}
.pd-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px clamp(16px,2.4vw,36px);align-items:baseline;border-top:1px solid var(--papier-line);padding:clamp(13px,1.9vh,19px) 0}
.pd-kopf+.pd-zeile{border-top:none}
.pd-zeile.drei{grid-template-columns:minmax(0,1fr) auto auto}
.pd-t{font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.4;hyphens:none}
.pd-t .pd-m{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.05em;color:var(--papier-meta);margin-top:4px}
.pd-v{font-family:var(--font-m);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.pd-v.pd-live{display:inline-flex;align-items:center;gap:8px;justify-self:end}
.pd-v.pd-live .dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--papier-ink)}
.pd-v.pd-live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.pd-chip{font-family:var(--font-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--papier-ink);padding:3px 9px;white-space:nowrap;justify-self:end}
.pd-chip.leer{border-color:transparent;padding:3px 0;color:var(--papier-meta)}
.pd-summe{display:flex;justify-content:space-between;align-items:baseline;gap:12px 20px;flex-wrap:wrap;border-top:2px solid var(--papier-ink);margin-top:4px;padding-top:clamp(14px,2vh,20px)}
.pd-summe .s-l{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier-meta)}
.pd-summe .s-v{font-weight:600;font-size:clamp(1.7rem,2.8vw,2.7rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pd-fuss{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);margin-top:18px}
@media(max-width:640px){.pd-zeile.drei{grid-template-columns:minmax(0,1fr) auto}.pd-zeile.drei .pd-chip{grid-column:1/-1;justify-self:start}}
/* Postkarte mit Serie (Außenwirkung) */
.postkarte{background:var(--papier);color:var(--papier-ink);max-width:min(520px,100%);width:100%;margin:0 auto;padding:clamp(20px,2.4vw,32px);transition:opacity .6s var(--ease)}
.postkarte.aus{opacity:0}
.postkarte>span{display:block}
.postkarte .p-text{font-size:15px;line-height:1.6;hyphens:none;margin-top:16px;min-height:calc(1.6em*3)}
@media(max-width:560px){.postkarte .p-text{min-height:calc(1.6em*4)}}
.postkarte .caret{display:none;width:1px;height:.95em;background:var(--papier-ink);vertical-align:-.12em;margin-left:2px;animation:caret 1.05s steps(1) infinite}
.postkarte.tippt .caret{display:inline-block}
.k-slides{position:relative;display:block;aspect-ratio:4/5;margin:16px 0 0;overflow:hidden;background:#15161A;container-type:inline-size}
.k-slides .ks-track{display:flex;height:100%;transition:transform .7s var(--ease)}
.k-slides .ks-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.k-slides .ks-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.k-slides .ks-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,0) 34%,rgba(10,10,12,.74) 84%)}
.k-slides .ks-shade.leicht{background:linear-gradient(180deg,rgba(10,10,12,0) 58%,rgba(10,10,12,.55) 94%)}
.k-slides .ks-cover-txt{position:absolute;left:6.5cqw;right:6.5cqw;bottom:9cqw;color:#fff}
.k-slides .ks-kick{display:block;font-style:normal;font-family:var(--font-m);font-size:3.1cqw;letter-spacing:.16em;text-transform:uppercase;color:#D9AE35;margin-bottom:2.8cqw}
.k-slides .ks-head{display:block;font-weight:600;font-size:9.4cqw;line-height:1.06;letter-spacing:-.02em}
.k-slides .ks-brand{display:flex;align-items:center;gap:2.4cqw;margin-top:4.2cqw;font-style:normal;font-family:var(--font-m);font-size:2.9cqw;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.88);white-space:nowrap}
.k-slides .ks-brand::before{content:"";flex:0 0 auto;width:7cqw;height:2px;background:#D9AE35}
.k-slides .ks-pill{position:absolute;left:5.5cqw;top:5.5cqw;font-family:var(--font-m);font-size:3cqw;letter-spacing:.16em;text-transform:uppercase;background:#D9AE35;color:#1C1708;padding:1.9cqw 3.6cqw;border-radius:99px}
.k-slides .ks-brand-s{position:absolute;left:5.5cqw;bottom:8.6cqw;font-family:var(--font-m);font-size:2.7cqw;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.k-slides .ks-cta{background:#1E1A10;color:#fff;display:flex;align-items:flex-end}
.k-slides .ks-cta-in{padding:0 6.5cqw 10cqw}
.k-slides .ks-cta-in u{display:block;width:9cqw;height:2px;background:#D9AE35;text-decoration:none;margin-bottom:4.6cqw}
.k-slides .ks-cta-in b{display:block;font-weight:600;font-size:8.8cqw;line-height:1.08;letter-spacing:-.02em}
.k-slides .ks-cta-in i{display:block;font-style:normal;font-family:var(--font-m);font-size:2.9cqw;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:4.2cqw}
.k-slides .ks-zaehler{position:absolute;right:4.6cqw;top:4.6cqw;z-index:2;font-family:var(--font-m);font-size:3cqw;letter-spacing:.08em;background:rgba(10,10,12,.55);color:#fff;padding:1.7cqw 3.2cqw;border-radius:99px;backdrop-filter:blur(4px)}
.k-slides .ks-zaehler b{font-weight:400}
.k-slides .ks-dots{position:absolute;left:50%;bottom:3.8cqw;transform:translateX(-50%);z-index:2;display:flex;gap:2.1cqw}
.k-slides .ks-dots i{width:1.8cqw;height:1.8cqw;min-width:5px;min-height:5px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.k-slides .ks-dots i.on{background:#fff;transform:scale(1.25)}
#postSzene .k-slides{clip-path:inset(0 100% 0 0);transition:clip-path .95s var(--ease)}
#postSzene .k-slides.in{clip-path:inset(0 0 0 0)}
#postSzene .pk-step{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
#postSzene .pk-step.in{opacity:1;transform:none}
.postkarte .p-tags{font-family:var(--font-m);font-size:10px;letter-spacing:.06em;color:var(--papier-meta);margin-top:12px}
.postkarte .p-status{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:2px solid var(--papier-ink);margin-top:18px;padding-top:14px}
.postkarte .p-status .st{display:flex;align-items:center;gap:9px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta)}
.postkarte .p-status .dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--papier-ink)}
.postkarte .p-status .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.postkarte .p-knopf{display:flex;gap:8px}
.postkarte .p-knopf span{font-family:var(--font-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;padding:7px 13px;white-space:nowrap}
.postkarte .p-knopf .voll{background:var(--papier-ink);color:var(--papier)}
.postkarte .p-knopf .rand{border:1px solid var(--papier-ink)}
/* Sterne: die Anfrage (dunkel) wird zur Bewertung (Papier) */
.sz-kick{font-family:var(--font-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--meta);display:flex;justify-content:space-between;gap:14px}
.stg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,80px);align-items:center;margin-top:clamp(44px,7vh,80px)}
.stg-l{display:flex;flex-direction:column;gap:clamp(14px,2vh,20px);min-width:0}
.stg .msg{border:1px solid var(--line);background:var(--bg-lift);padding:clamp(18px,2.2vw,28px);font-size:15px;line-height:1.65;color:var(--muted);max-width:32em;hyphens:none}
.stg .msg .msg-sig{margin-top:14px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.stg .msg-meta{font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);line-height:1.9}
.stern-karte{background:var(--papier);color:var(--papier-ink);padding:clamp(22px,2.6vw,38px);width:100%;max-width:520px;justify-self:end}
.stern-karte>span{display:block}
.stern-wert{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:clamp(18px,2.6vh,28px) 0 clamp(14px,2vh,20px)}
.stern-wert b{font-weight:400;font-size:clamp(3.2rem,5.5vw,5.4rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.sterne5{display:inline-block;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:4px;color:var(--papier-ink);line-height:1}
.sterne5 .st-p{letter-spacing:0;background:linear-gradient(90deg,var(--papier-ink) 72%,var(--papier-line) 72%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stern-zitat{border-top:1px solid var(--papier-line);padding:16px 0 18px;font-size:15.5px;line-height:1.55;hyphens:none}
.stern-zitat span{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.08em;color:var(--papier-meta);margin-top:10px}
@media(max-width:860px){.stg{grid-template-columns:1fr;align-items:start}.stern-karte{justify-self:start}}
/* Foto im Rahmen, sanfte Parallax */
.foto{border:1px solid var(--line);background:var(--bg-lift);overflow:hidden}
.foto img,.foto video{width:100%;height:auto;display:block}
.foto figcaption{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);padding:12px 2px 0;line-height:1.8}
/* Rechtsseiten: ruhige Textspalte */
.recht{padding:calc(64px + clamp(60px,10vh,120px)) 0 clamp(80px,12vh,140px)}
.recht .wrap{max-width:860px}
.recht h1{font-weight:400;letter-spacing:-.03em;line-height:1;font-size:clamp(2.4rem,6vw,5.4rem);margin-bottom:clamp(36px,6vh,64px)}
.recht h2{font-weight:400;letter-spacing:-.02em;font-size:clamp(1.4rem,2.4vw,2rem);margin:clamp(40px,6vh,64px) 0 16px}
.recht h3{font-weight:500;font-size:1.05rem;margin:28px 0 10px}
.recht p,.recht li{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:40em}
.recht p+p{margin-top:14px}
.recht ul,.recht ol{margin:12px 0 12px 20px}
.recht a{border-bottom:1px solid var(--line);transition:border-color .35s}
.recht a:hover{border-color:var(--ink)}
.recht .kicker{margin-bottom:18px;display:block}
@media(prefers-reduced-motion:reduce){
  .bon .b-zu .dot::after,.postkarte .p-status .dot::after,.pd-v.pd-live .dot::after{animation:none}
  #postSzene .k-slides{clip-path:none!important;transition:none}
  .k-slides .ks-track{transition:none}
  #postSzene .pk-step{opacity:1!important;transform:none!important;transition:none}
  .postkarte .caret{display:none!important}
}