/* ============================================================
   AURALEX HANDWERK · Konzept "17:04"
   Big-Typography-Premium mit Aura (Golden-Suisse-Schule):
   riesige LEICHTE Grotesk, ein Gedanke pro Viewport, Leere,
   Haarlinien-Zellen, souveränes Tempo (1s, ein Easing).
   Der Faden: die Zeit. Eine HUD-Uhr läuft beim Scrollen von
   21:40 auf 17:04. Kapitel-Index /01–/06 läuft links mit.
   Lebendig: Hover-Reveal-Zeilen, Bühnen-Szene, Counter, Uhren.
   Durchgehend dunkel; das einzige Weiß sind die Papier-Elemente
   (Angebots-Zettel-Klasse). ALLE Seiten zeigen GEBAUTE Elemente
   der Zettel-Klasse (Stand 08.07., Screenshots ersetzt); echt
   bleibt der ungeschnittene App-Film (Erfassen) + die Live-Demo.
   ============================================================ */
: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;
  --w: min(1560px, 100% - clamp(40px, 8vw, 160px));
  --font-b: 'Switzer', 'Helvetica Neue', 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}
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)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{hyphens:manual}
section{position:relative;z-index:1;scroll-margin-top:70px}
.wrap{width:var(--w);margin:0 auto}

/* ---------- 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.2rem,5.4vw,5.6rem);
}
.kicker{
  font-family:var(--font-m);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--meta);
}
.kicker b{font-weight:500;color:var(--muted)}
.sub{font-size:clamp(1.02rem,1.25vw,1.2rem);color:var(--muted);max-width:34em;font-weight:400}

/* ---------- Ein Reveal-Vokabular: Zeilen-Maske von unten ---------- */
.l{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.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}
.hl{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.hl.in{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .li,.rv,.hl{transform:none!important;opacity:1!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Header: Understatement + HUD-Uhr ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg, rgba(10,10,12,.92), rgba(10,10,12,0));
  pointer-events:none;
}
/* Glas-Leiste (09.07., David: Nav über weißen Papier-Elementen unlesbar):
   auf dem Hero bleibt der Kopf klar, ab dem ersten Scroll legt sich eine
   Liquid-Glass-Fläche dahinter (dunkles Glas + Blur + Sättigung, zarter
   Innen-Glanz oben, Haarlinie unten). Toggle via header.glas in system.js. */
header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    rgba(10,10,12,.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transition:opacity .5s var(--ease);
}
header.glas::before{opacity:1}
.head-in{
  width:var(--w);margin:0 auto;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);
}
/* Ausgeklappte Navbar: mittig mit gleicher Luft zu beiden Seiten, gleiche Metrik wie der Kontakt-Link */
.hnav{display:flex;align-items:center;gap:clamp(14px,1.9vw,32px);margin:0 auto}
.hnav a{
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--meta);white-space:nowrap;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .35s,border-color .35s;
}
.hnav a:hover,.hnav a:focus-visible{color:var(--ink)}
.hnav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
@media(max-width:919px){.hnav{display:none}}
@media(min-width:920px){.menu-btn{display:none}}
@media(max-width:1439px){.hud .hud-lbl{display:none}}
.head-in>*{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}
.head-r{display:flex;align-items:center;gap:clamp(16px,2.4vw,38px)}
.hud{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta);display:flex;align-items:baseline;gap:10px;
}
.hud b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:12.5px}
.hud .dot{
  position:relative;display:none;width:7px;height:7px;border-radius:50%;background:var(--ink);
  align-self:center;
}
.hud.fertig .dot{display:inline-block}
.hud .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.hud .dot::after{animation:none}}
.head-cta{
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px;transition:opacity .35s;
}
.head-cta:hover,.head-cta:focus-visible{opacity:.6}
@media(max-width:640px){
  .brand span{display:none}
}
/* Schmale Screens: Riesen-Glyphen scrollen sonst halbtransparent in die Header-Zeile
   -> dieselbe Glas-Fläche, nur permanent an */
@media(max-width:919px){
  header::before{opacity:1}
}

/* Kapitel-Rail links entfernt (David 08.07.). Browser-Scrollbar versteckt: die Seite
   führt über HUD-Uhr + Scroll-Pfeil, die native Leiste bricht die Bühne rechts. */
html{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- 01 · Hero ---------- */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:64px}
#hero .hero-mitte{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6vh 0 4vh}
#hero h1{max-width:100%}
#hero h1 .zeile2{display:inline-flex;align-items:center;gap:.14em;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;justify-content:space-between;
  height:.62em;aspect-ratio:2.15/1;border-radius:.5em;padding:0 .16em;
  overflow:hidden;transform:translateY(.05em);background:var(--bg-lift);
  border:1px solid var(--line);
}
.pill i{
  flex:0 0 .022em;min-width:1.5px;height:var(--h,55%);background:var(--ink);opacity:.9;
  border-radius:99px;transform-origin:center;
  animation:welle 1.4s ease-in-out calc(var(--i)*-.12s) infinite alternate;
}
@media(prefers-reduced-motion:reduce){.pill i{animation:none}}
#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}
#hero .hero-sub .sub{max-width:26em}
#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){
  #hero .hero-sub .kicker{display:none}
  .hero-fuss span:nth-child(2){display:none}
}

/* ---------- 02 · Der Abend davor ---------- */
#abend{padding:clamp(120px,18vh,220px) 0 0}
.kap{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(36px,6vh,64px)}
.kap .nr{font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;color:var(--meta)}
.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}
#abend .gross{max-width:16em}
.pain{margin-top:clamp(48px,8vh,90px)}
.pain-row{
  display:grid;grid-template-columns:110px 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}
}
.uhren{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);
  margin-top:clamp(64px,10vh,120px);
}
.uhr .lbl{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin-bottom:clamp(16px,2.6vh,28px)}
.uhr .zeit{
  font-family:var(--font-m);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(3.6rem,10vw,10rem);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.32);
}
.uhr.voll .zeit{color:var(--ink);-webkit-text-stroke:0}
.uhr .cap{margin-top:14px;color:var(--muted);font-size:15px;max-width:22em}
@media(max-width:760px){.uhren{grid-template-columns:1fr;gap:40px}}

/* ---------- 03 · So geht das jetzt ---------- */
#satz{padding:clamp(140px,20vh,260px) 0}
#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;
}
#satz .satz .w{opacity:.14;transition:opacity .45s ease}
#satz .satz .w.on{opacity:1}
#satz .satz .chip{position:relative;display:inline-block;padding:0 .18em;font-weight:600}
#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);
}
#satz .satz .w.on.chip::before{transform:scaleX(1)}

/* ---------- 04 · Das System ---------- */
#system{padding:clamp(100px,14vh,180px) 0 0}
#system .gross{max-width:15em}
.buehne{margin-top:clamp(44px,7vh,80px);position:relative}
.buehne .frame{border:1px solid var(--line);background:var(--bg-lift);overflow:hidden}
.buehne .frame img{width:100%;height:auto}
.buehne .frame video.app-film{display:block;width:100%;height:auto}
.buehne .frame-fuss{
  display:flex;justify-content:space-between;gap: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);
}
/* Bühnen-Szene: die Sprachnotiz wird zum Angebot (gebautes Element, kein Screenshot) */
.szene{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,3.5vw,76px);align-items:center;
  aspect-ratio:1.9/1;padding:clamp(24px,3.6vw,72px);
  transition:opacity .6s var(--ease);
}
.szene.aus{opacity:0}
.sz-links{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,28px);min-width:0}
.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}
.sz-wave{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:26em;height:clamp(30px,4vw,58px)}
.sz-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;
}
@keyframes welle{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.szene:not(.spricht) .sz-wave i{animation-play-state:paused;opacity:.28;transition:opacity .9s}
.sz-text{
  font-size:clamp(1.02rem,1.45vw,1.44rem);line-height:1.58;color:var(--muted);
  min-height:calc(1.58em*5);max-width:22em;hyphens:none;
}
.sz-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}
@keyframes caret{50%{opacity:0}}
.sz-paper{background:var(--papier);color:var(--papier-ink);padding:clamp(18px,2.7vw,48px);width:100%;max-width:640px;justify-self:end}
.sz-kopf{
  display:flex;justify-content:space-between;gap:14px;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;
}
.sz-pos{list-style:none}
.sz-pos li{font-size:clamp(.95rem,1.2vw,1.18rem);line-height:1.4}
.sz-pos .sz-innen{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
  border-top:1px solid var(--papier-line);padding:clamp(11px,1.6vh,17px) 0;
}
.sz-pos li:first-child .sz-innen{border-top:none}
.sz-pos .p-meta{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.05em;color:var(--papier-meta);margin-top:4px}
.sz-pos .betrag{font-family:var(--font-m);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sz-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}
.sz-summe .sz-innen{border-top:2px solid var(--papier-ink);margin-top:4px;padding-top:clamp(12px,1.8vh,18px);display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.sz-summe .s-l{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier-meta)}
.sz-summe .s-v{font-weight:600;font-size:clamp(1.5rem,2.4vw,2.4rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sz-status{font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--papier-meta)}
.sz-status .sz-innen{display:flex;align-items:center;gap:9px;padding-top:clamp(12px,1.8vh,18px)}
.sz-status .dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--papier-ink)}
.sz-status .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.sz-step{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sz-paper.sz-step{transform:translateY(22px)}
.sz-step.in{opacity:1;transform:none}
/* der Zettel wächst mit dem Inhalt (Steps klappen als 0fr-Zeilen auf, kein leeres Formular) */
.sz-paper .sz-step{
  display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(10px);
  transition:grid-template-rows .85s var(--ease),opacity .8s var(--ease),transform .8s var(--ease);
}
.sz-paper .sz-step.in{grid-template-rows:1fr;opacity:1;transform:none}
.sz-paper .sz-step>.sz-innen{overflow:hidden;min-height:0}
@media(max-width:860px){
  .szene{grid-template-columns:1fr;aspect-ratio:auto;align-items:start;gap:26px}
  .sz-text{min-height:0}
  .sz-paper{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .sz-step{opacity:1!important;transform:none!important;transition:none}
  .sz-paper .sz-step{grid-template-rows:1fr!important}
  .sz-wave i{animation:none}
  .sz-text .caret{display:none}
  .sz-status .dot::after{animation:none}
}
/* Die drei Handgriffe: Zeilen mit schwebendem Element (Hover-Reveal) */
.fn{margin-top:clamp(70px,11vh,130px)}
.fn-row{
  display:grid;grid-template-columns:80px minmax(0,1fr) auto 40px;
  gap:clamp(14px,2.4vw,40px);align-items:center;
  padding:clamp(24px,3.8vh,42px) 2px;border-top:1px solid var(--line);
  transition:opacity .45s;
}
.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)}
.fn-row .titel{font-weight:400;letter-spacing:-.025em;line-height:1;font-size:clamp(2rem,5.2vw,5.2rem)}
.fn-row .meta{font-family:var(--font-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--meta);white-space:nowrap}
.fn-row .geh{font-family:var(--font-m);font-size:21px;color:var(--muted);text-align:right;transition:transform .6s var(--ease),color .35s}
.fn-row:hover .geh,.fn-row:focus-visible .geh{transform:translate(5px,-5px);color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  #fn:hover .fn-row:not(:hover){opacity:.32}
}
/* die Karte: ein gebautes Element der Zettel-Klasse */
.fn-karte{display:block;background:var(--papier);color:var(--papier-ink);padding:20px 22px 18px}
.fn-karte>span{display:block}
.fn-karte .k-m{font-family:var(--font-m);font-size:9.5px;letter-spacing:.06em;color:var(--papier-meta);white-space:nowrap}
.k-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}
.k-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}
.k-kopf+.k-zeile,.k-bild+.k-zeile{border-top:none}
.k-geld{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;border-top:2px solid var(--papier-ink);padding-top:11px}
.k-geld b{font-weight:600;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-geld .k-wert{font-weight:400;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-geld .k-wert b{font-weight:600;font-size:inherit}
.k-bild{display:grid!important;grid-template-columns:1fr 1fr;gap:1px;background:var(--papier-line);border:1px solid var(--papier-line);aspect-ratio:16/7;margin:12px 0}
.k-bild>span{position:relative;display:block}
/* Vorher = stumpfe Schraffur, Nachher = feines Fliesenraster (gebaute Zeichnung, kein Platzhalter-Grau) */
.k-bild>span:first-child{background:repeating-linear-gradient(135deg,#B7BBC2 0 5px,#AEB2B9 5px 10px)}
.k-bild>span:last-child{
  background-color:#EEF0F3;
  background-image:repeating-linear-gradient(0deg,transparent 0 12px,#D3D6DC 12px 13px),repeating-linear-gradient(90deg,transparent 0 12px,#D3D6DC 12px 13px);
}
.k-bild i{position:absolute;left:9px;bottom:7px;font-style:normal;font-family:var(--font-m);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#41444A}
.k-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)}
.k-step{opacity:0;transform:translateY(8px)}
.fn-karte.an .k-step{opacity:1;transform:none;transition:opacity .55s var(--ease) calc(var(--k)*70ms),transform .55s var(--ease) calc(var(--k)*70ms)}
/* Desktop mit Maus: Karte schwebt am Cursor */
@media(hover:hover) and (pointer:fine) and (min-width:920px){
  .fn-karte{
    position:fixed;left:0;top:0;width:clamp(280px,25vw,392px);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)}
}
/* Touch / schmal: Karte steht ruhig unter der Zeile */
@media(hover:none),(pointer:coarse),(max-width:919px){
  .fn-karte{grid-column:1/-1;max-width:430px;margin-top:8px}
  .k-step{opacity:1;transform:none}
}
@media(max-width:900px){
  .fn-row{grid-template-columns:44px minmax(0,1fr) 30px}
  .fn-row .meta{display:none}
}
/* Zahlen-Zeile */
.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}
}

/* ---------- 05 · Das Angebot (das einzige Weiß) ---------- */
#angebot{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.1rem,2vw,1.7rem);color:var(--muted);margin-bottom:clamp(44px,7vh,80px);
}
#angebot .doc{
  max-width:1180px;margin:0 auto;
  background:var(--papier);color:var(--papier-ink);
  padding:clamp(36px,6vw,92px);
}
.doc-top{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-meta);
  border-bottom:1px solid var(--papier-ink);padding-bottom:18px;
}
#angebot .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;
}
#angebot .lead{color:#4A473F;max-width:32em;margin-bottom:clamp(44px,7vh,72px);font-size:clamp(1.02rem,1.3vw,1.25rem)}
.pos{list-style:none}
.pos li{
  display:grid;grid-template-columns:64px minmax(0,1fr) 170px 130px;
  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.6rem,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}
.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;
}
.btn:hover,.btn:focus-visible{opacity:.82}
.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}
}

/* ---------- 06 · Feierabend (Kontakt) ---------- */
#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)}
.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}
@media(max-width:700px){.founder{grid-template-columns:1fr}.founder .f-foto{order:-1}}
#kontakt .display{max-width:9em}
#kontakt .k-sub{margin:clamp(24px,4vh,40px) 0 clamp(52px,8vh,90px)}
/* Haarlinien-Zellen (Golden-Suisse-Katalog) */
.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;
}
.zelle .z-note{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}}
/* Klartext-Fragen */
.faq{margin-top: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}
.faq-liste .q-mark{font-family:var(--font-m);font-size:19px;color:var(--meta);text-align:right;transition:transform .5s var(--ease)}
.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}
@media(max-width:760px){
  .faq-liste summary{grid-template-columns:52px minmax(0,1fr) 26px}
  .faq-liste .a{margin-left:0;hyphens:auto;-webkit-hyphens:auto}
}
/* Footer */
.foot{margin-top:clamp(100px,14vh,180px);border-top:1px solid var(--line)}
.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)}

/* Mobile dichter setzen */
@media(max-width:560px){
  #abend{padding-top:clamp(80px,12vh,120px)}
  #satz{padding:clamp(90px,13vh,140px) 0}
  #system{padding-top:clamp(80px,12vh,120px)}
  #angebot,#kontakt{padding-top:clamp(90px,13vh,140px)}
  .kap{margin-bottom:clamp(26px,4vh,44px)}
}

/* ============================================================
   SUBPAGE-LAYER · geteilte Muster der /neu-Unterseiten
   (Kanon = alles oben; hier nur Ergänzungen, kein Override)
   ============================================================ */

/* Weiter-Teaser: die Kette zwischen den Seiten */
.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)}

/* Footer-Sitemap (alle /neu-Seiten) */
.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-nav a[aria-current="page"]{color:var(--ink)}

/* Unterseiten: Kapitel-Abstand + Duo-Layout + Phone-Frame + Satz-Caption */
.kapitel{padding:clamp(100px,14vh,180px) 0 0}
@media(max-width:560px){.kapitel{padding-top:clamp(80px,12vh,120px)}}
.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;
}
.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;
  font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);line-height:1.9;
}
.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}
@media(max-width:860px){.duo{grid-template-columns:1fr}.duo .phone{order:-1}}

/* Text-Zeile unter einer Bühne: links Erklärung, rechts Mono-Fakt */
.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}
}

/* Menü: Header bleibt minimal, das Menü ist ein Vollbild-Overlay (z zwischen Rail und Header) */
.menu-btn{
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:none;color:var(--ink);cursor:pointer;padding:0 0 3px;
  border-bottom:1px solid var(--line);transition:opacity .35s;
}
.menu-btn:hover,.menu-btn:focus-visible{opacity:.6}
.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;text-wrap:balance;
  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-link .m-hint{
  margin-left:auto;font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--meta);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s var(--ease);
  white-space:nowrap;
}
.m-link:hover .m-hint,.m-link:focus-visible .m-hint{opacity:1;transform:none}
.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(max-width:640px){.m-link .m-hint{display:none}}
@media(prefers-reduced-motion:reduce){
  .menu{transition:none}
  .m-link{opacity:1;transform:none;transition:color .35s}
}

/* ============================================================
   GEBAUTE ELEMENTE · Funktions-Seiten (08.07.)
   Die App-Screenshots sind ersetzt: jede Funktion zeigt Elemente
   der Zettel-Klasse (Papier) bzw. der dunklen App-Seite.
   Echt bleibt der ungeschnittene Film (Erfassen) + die Live-Demo.
   NIE "Echte Oberfläche" auf ein gebautes Element schreiben.
   ============================================================ */

/* Handy-Karte (Erfassen /02): die Sprachnotiz im Telefon-Format */
.handy{
  max-width:min(400px,88vw);width:100%;margin:0 auto;
  border:1px solid var(--line);background:var(--bg-lift);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.3vw,28px);
  display:flex;flex-direction:column;gap:clamp(15px,2vh,22px);
}
.handy .sz-wave{max-width:100%;height:clamp(26px,3vw,40px)}
.handy .h-text{font-size:15px;line-height:1.62;color:var(--muted);hyphens:none}
.handy .h-erkannt{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line-soft);padding-top:15px}
.handy .h-chip{font-family:var(--font-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:4px 10px;white-space:nowrap}
.handy .h-satz{font-size:15px;color:var(--ink);border-top:1px solid var(--line-soft);padding-top:15px;hyphens:none}
.handy .h-satz span{display:block;font-family:var(--font-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--meta);margin-top:8px;line-height:1.8}

/* Drei-Zettel (Erfassen /04): eine Notiz, drei Entwürfe. Läuft in .buehne */
.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 (Material /02): 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}

/* Papier-Dokument (Material /03 Katalog + /05 Rechnungen): volle Bühne */
.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}
/* Live-Preis-Zeile (Open-Masterdata-Schnittstelle): Puls-Punkt am Tagespreis */
.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}
}

/* Post-Entwurf (Außenwirkung /02): Vorher/Nachher + Freigabe-Leiste.
   Als Szene (#postSzene): Fotos entwickeln sich, der Text tippt, Status kommt zuletzt */
.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 .k-bild{aspect-ratio:16/8.5;margin:16px 0 0}
.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}
#postSzene .k-bild>span{clip-path:inset(0 100% 0 0);transition:clip-path .95s var(--ease)}
#postSzene .k-bild>span.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-Szene (Außenwirkung /04): die Anfrage (dunkel) wird zur Bewertung (Papier) */
.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}
/* 4,8 = der fünfte Stern ist zu ~80 % gefüllt (Text-Clip), nie volle 5 zeigen.
   letter-spacing:0, sonst zählt der Nachlauf mit und der Clip landet am Glyph-Rand */
.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}
}
@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-bild>span{clip-path:none!important;transition:none}
  #postSzene .pk-step{opacity:1!important;transform:none!important;transition:none}
  .postkarte .caret{display:none!important}
}

/* Social-Links im Footer (09.07.): rechtsbündig in der Sitemap-Zeile */
.foot-social{margin-left:auto;display:flex;gap:12px 22px;flex-wrap:wrap}
.foot-social a{color:var(--meta);transition:color .35s}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--ink)}

/* Mobile-Typo (09.07.): Meta-/Mono-Zeilen brechen sonst mit Ein-Wort-Waisen um
   ("GEBAUT FÜRS / HANDWERK") -- balance verteilt die Zeilen gleichmäßig.
   Desktop bleibt unberührt (dort einzeilig = no-op). */
@media(max-width:760px){
  .kicker,.mono-note,.satz-cap,.streifen-label,.z-note,.z-lbl,.kf-note,
  .hero-fuss span,.sz-kick span,.foot-in span,.kap .t,figcaption{text-wrap:balance}
}