/* =========================================================================
   DESIGN SYSTEM "SPEZIFIKATION" — philipp-weigert.de
   -------------------------------------------------------------------------
   Leitidee: Die Seite liest sich wie ein technisches Spezifikationsblatt,
   nicht wie eine Broschüre. Das Differenzierungsmerkmal ist "gebaut, nicht
   beraten" — also spricht die Oberfläche die Sprache von Baudokumenten:
   nummerierte Abschnitte, Metadaten am Rand, Signalfarbe als Markierung.

   Signature: die Spec-Rail (§-Nummer + Status am linken Rand jedes
   Abschnitts) und der Signal-Marker (Textmarkierung in Industriegelb).

   Reihenfolge der Einbindung:
     <link rel="stylesheet" href="fonts.css" />
     <link rel="stylesheet" href="design-system.css" />
   ========================================================================= */

/* =========================================================
   1 · TOKENS
   ========================================================= */
:root{
  /* Farbe — Beton, Graphit, Signal */
  --concrete:      #E8EAEC;   /* Canvas — kühles Grau, bewusst kein Creme */
  --concrete-deep: #DDE0E3;   /* alternierende Flächen */
  --sheet:         #FFFFFF;   /* Karten, Blätter */
  --graphite:      #101317;   /* Text & invertierte Blöcke */
  --slate:         #59616B;   /* Sekundärtext */
  --slate-soft:    #5E6369;   /* Metadaten — 5,03:1 auf Beton, 4,57:1 auf getönter Fläche */
  --rule:          #C9CED4;   /* Haarlinien */
  --rule-soft:     #DFE2E6;
  --signal:        #DCE838;   /* Industriegelb — nur als Fläche, nie als Text */
  --signal-deep:   #C2CE1E;   /* Hover / Rahmen */
  --alert:         #C4402A;   /* Fehler, seltene Akzente */

  /* Legacy-Aliase — von consent.js referenziert, nicht entfernen */
  --paper: var(--concrete);
  --ink: var(--graphite);
  --blue: var(--graphite);
  --brass: var(--slate);
  --brass-bright: var(--signal-deep);
  --muted: var(--slate);
  --line: var(--rule);

  /* Typografie */
  --font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --font-text:    "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  /* Fluid-Skala als rem + vw: skaliert mit dem Browser-Zoom und der
     Nutzer-Schriftgröße, statt sie zu ignorieren wie reines vw.
     Obergrenzen sind auf die Textspalte (~1000 px) abgestimmt, nicht auf den Viewport. */
  --t-hero:   clamp(2.75rem, 1.70rem + 3.90vw, 4.75rem);   /*  44 →  76 px */
  --t-h1:     clamp(2.10rem, 1.48rem + 2.30vw, 3.25rem);   /*  34 →  52 px */
  --t-h2:     clamp(1.60rem, 1.24rem + 1.35vw, 2.25rem);   /*  26 →  36 px */
  --t-h3:     clamp(1.10rem, 1.03rem + 0.26vw, 1.28rem);   /*  18 →  20 px */
  --t-lead:   clamp(1.05rem, 0.99rem + 0.24vw, 1.20rem);   /*  17 →  19 px */
  --t-body:   1.0625rem;
  --t-small:  0.9375rem;
  --t-meta:   0.6875rem;

  /* Raster & Rhythmus — 8pt */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 44px);
  --rail: 116px;              /* Breite der Spec-Rail */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* Form */
  --r: 2px;                   /* fast eckig — Werkzeug, nicht App */
  --r-lg: 4px;
  --border: 1px solid var(--rule);
  --shadow: 0 1px 0 var(--rule), 0 12px 32px -22px rgba(16,19,23,.5);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* =========================================================
   2 · RESET & BASIS
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--concrete); color:var(--graphite);
  font-family:var(--font-text); font-size:var(--t-body); line-height:1.6;
  font-feature-settings:"ss01","cv01"; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.04;
  letter-spacing:-0.032em; margin:0; text-wrap:balance;}
p{margin:0 0 var(--s2);}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px;}
:focus-visible{outline:2px solid var(--graphite); outline-offset:3px;
  box-shadow:0 0 0 5px var(--signal);}
::selection{background:var(--signal); color:var(--graphite);}
hr{border:0; border-top:var(--border); margin:var(--s5) 0;}

.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--graphite);
  color:var(--concrete); padding:12px 20px; font-family:var(--font-mono); font-size:var(--t-small);}
.skip:focus{left:12px; top:12px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}
.stack > * + *{margin-top:var(--s3);}
.hide{position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;}

/* =========================================================
   3 · TYPO-BAUSTEINE
   ========================================================= */
.mono{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate);}
.lead{font-size:var(--t-lead); line-height:1.5; color:var(--slate); max-width:62ch;}
.small{font-size:var(--t-small); color:var(--slate);}
.num{font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums;}

/* Signature 1 — Signal-Marker: markierter Text wie mit Textmarker */
.marker{background:linear-gradient(to top, var(--signal) 0.62em, transparent 0.62em);
  padding-inline:.06em;}
.marker--full{background:var(--signal); padding:.06em .28em; border-radius:1px;}

/* =========================================================
   4 · SPEC-RAIL — Signature 2
   Jeder Abschnitt trägt links seine Kennung wie ein Bauplan.
   ========================================================= */
.sec{padding-block:var(--s7); border-top:var(--border); position:relative;}
.sec--flat{border-top:0;}
.sec--tint{background:var(--concrete-deep);}
.sec--dark{background:var(--graphite); color:var(--concrete); border-top:0;}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--concrete);}
.sec--dark .lead,.sec--dark .mono,.sec--dark .small{color:#A7AEB6;}

.sec-grid{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:var(--s5);}
.rail{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-soft); position:sticky; top:96px;
  align-self:start; display:flex; flex-direction:column; gap:6px;}
.rail b{color:var(--graphite); font-weight:500; font-size:0.8125rem; letter-spacing:.08em;}
.sec--dark .rail b{color:var(--signal);}
.rail-mark{width:24px; height:3px; background:var(--signal); margin-bottom:4px;}

.sec-head{max-width:26ch; margin-bottom:var(--s5);}
.sec-head .lead{margin-top:var(--s3); max-width:56ch;}

/* =========================================================
   5 · NAVIGATION
   ========================================================= */
.topbar{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--concrete) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:var(--border);}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:76px;}
.menu{display:flex; align-items:center; gap:clamp(14px, 1.6vw, 26px);}
.menu a:not(.btn){font-size:var(--t-small); text-decoration:none; color:var(--slate); padding-block:4px;
  border-bottom:2px solid transparent; transition:color .18s var(--ease), border-color .18s var(--ease);}
.menu a:not(.btn):hover{color:var(--graphite); border-bottom-color:var(--signal);}
.menu .btn{margin-left:var(--s1); white-space:nowrap;}

/* =========================================================
   6 · BUTTONS  (Klassennamen fix — tracking.js hängt daran)
   ========================================================= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap; font-family:var(--font-text);
  font-size:var(--t-small); font-weight:600; letter-spacing:-0.005em; line-height:1;
  padding:15px 22px; border-radius:var(--r); border:1.5px solid var(--graphite);
  background:transparent; color:var(--graphite); text-decoration:none; cursor:pointer;
  transition:transform .16s var(--ease), background .18s var(--ease), color .18s var(--ease);}
.btn .arw{transition:transform .2s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--graphite); color:var(--concrete);}
.btn-primary:hover{background:#000;}
.btn-signal{background:var(--signal); border-color:var(--graphite); color:var(--graphite);}
.btn-signal:hover{background:var(--signal-deep);}
.btn-ghost{border-color:var(--rule); color:var(--graphite);}
.btn-ghost:hover{border-color:var(--graphite); background:var(--sheet);}
.btn-sm{padding:10px 15px; font-size:0.875rem;}
.sec--dark .btn{border-color:var(--concrete); color:var(--concrete);}
.sec--dark .btn-primary{background:var(--signal); color:var(--graphite); border-color:var(--signal);}
.sec--dark .btn-primary:hover{background:var(--signal-deep); border-color:var(--signal-deep);}
.sec--dark .btn-primary::before{display:none;}
.sec--dark .btn-ghost:hover{color:var(--graphite);}
.sec--dark .btn-signal{background:var(--signal); color:var(--graphite); border-color:var(--signal);}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center;}

.link{font-family:var(--font-mono); font-size:0.8125rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; border-bottom:1.5px solid var(--signal);
  padding-bottom:2px; transition:border-color .18s var(--ease);}
.link:hover{border-bottom-color:var(--graphite);}

/* =========================================================
   7 · KARTEN & RASTER
   ========================================================= */
.grid{display:grid; gap:var(--s3);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.card{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);}
.card h3{font-size:var(--t-h3);}
.card p{margin:0; color:var(--slate); font-size:var(--t-small);}
.card--hover:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--slate-soft);}
.card--flat{background:transparent; border:0; padding:0;}
.card-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);}
.card-foot{margin-top:auto; padding-top:var(--s3);}

/* Nummernkarte — Zahl nur wo Reihenfolge Bedeutung trägt.
   Die Zahl steht im normalen Fluss statt absolut: so kann sie bei
   keiner Bildschirmbreite unter die Überschrift rutschen. */
.card--step .step-no{align-self:flex-start; display:inline-block;
  font-family:var(--font-mono); font-size:0.8125rem; font-weight:500; letter-spacing:.1em;
  color:var(--graphite); background:var(--signal); padding:3px 9px; border-radius:1px;}

/* =========================================================
   8 · HERO
   ========================================================= */
.hero{padding-block:clamp(56px,9vw,116px) var(--s7);}
.hero h1{font-size:var(--t-hero); font-weight:700; letter-spacing:-0.042em;}
.hero .lead{margin-top:var(--s4);}
.hero .cta-row{margin-top:var(--s5);}
.hero-note{margin-top:var(--s3); font-family:var(--font-mono); font-size:var(--t-meta);
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft);}

/* Statuszeile — echte Metadaten, kein Dekor */
.status{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:center;
  padding:12px 0; border-block:var(--border); font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--slate);}
.status b{color:var(--graphite); font-weight:500;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--signal-deep);
  display:inline-block; margin-right:7px; vertical-align:middle;}

/* =========================================================
   9 · LOGO-LEISTE
   ========================================================= */
.logos{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); align-items:center;}
.logos li{font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  letter-spacing:-0.02em; color:var(--slate); list-style:none;}
.logos-wrap{padding-block:var(--s4); border-block:var(--border);}

/* =========================================================
   10 · PREIS- / ANGEBOTSKARTEN
   ========================================================= */
.offer{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);}
.offer--lead{border:1.5px solid var(--graphite); position:relative;}
.offer--lead::before{content:attr(data-flag); position:absolute; top:-11px; left:var(--s4);
  background:var(--signal); color:var(--graphite); font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; padding:4px 10px;}
.offer h3{font-size:1.35rem;}
.price{font-family:var(--font-display); font-weight:700; font-size:1.9rem;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.price small{font-family:var(--font-mono); font-size:var(--t-meta); font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:4px;}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.ticks li{position:relative; padding-left:24px; font-size:var(--t-small); color:var(--slate);}
.ticks li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:2px;
  background:var(--signal-deep);}

/* =========================================================
   11 · FAKTEN-LISTE / DEFINITIONSRASTER
   ========================================================= */
.facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0;}
.facts dt{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate-soft); padding:14px var(--s3) 14px 0;
  border-top:1px solid var(--rule-soft); white-space:nowrap;}
.facts dd{margin:0; padding:14px 0; border-top:1px solid var(--rule-soft);
  font-size:var(--t-small); font-weight:500;}

/* =========================================================
   12 · CHIPS, HINWEISE, ZITATE
   ========================================================= */
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase;
  border:var(--border); border-radius:100px; padding:6px 13px; color:var(--slate);
  background:var(--sheet);}
.chip--signal{background:var(--signal); border-color:var(--signal); color:var(--graphite);}
.chips{display:flex; flex-wrap:wrap; gap:var(--s1);}

.note{border-left:3px solid var(--signal); background:var(--sheet); border-radius:var(--r);
  padding:var(--s3) var(--s4); font-size:var(--t-small); color:var(--slate);}
.note b{color:var(--graphite);}
.aside{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:.06em;
  color:var(--slate-soft);}
.aside::before{content:"// ";}

blockquote{margin:0; padding-left:var(--s4); border-left:2px solid var(--rule);
  font-family:var(--font-display); font-weight:500; font-size:var(--t-h3); line-height:1.35;
  letter-spacing:-0.02em;}

/* =========================================================
   13 · FLIESSTEXT (Rechtstexte, Ratgeber)
   ========================================================= */
.prose{max-width:74ch;}
.prose h2{font-size:var(--t-h2); margin:var(--s6) 0 var(--s2); padding-top:var(--s3);
  border-top:var(--border); scroll-margin-top:96px;}
.prose h2 .num{color:var(--slate-soft); margin-right:12px; font-size:.9rem;}
.prose h3{font-size:1.125rem; margin:var(--s4) 0 var(--s1);}
.prose p,.prose li{color:#20252B;}
.prose ul,.prose ol{padding-left:22px; margin:0 0 var(--s2);}
.prose li{margin-bottom:8px;}
.prose a:not(.btn){color:var(--graphite); text-decoration-color:var(--signal-deep);}
.prose code{font-family:var(--font-mono); font-size:.875em; background:var(--concrete-deep);
  border:1px solid var(--rule-soft); border-radius:2px; padding:1px 6px;}
.addr{font-style:normal; background:var(--sheet); border:var(--border); border-radius:var(--r);
  padding:var(--s3) var(--s4); margin:var(--s2) 0 var(--s3);}
.toc{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
  padding:var(--s3) var(--s4); margin-block:var(--s4);}
.toc ol{columns:2; column-gap:var(--s5); font-size:var(--t-small); padding-left:20px; margin:0;}
.toc a{text-decoration:none; color:var(--slate);}
.toc a:hover{color:var(--graphite); text-decoration:underline; text-decoration-color:var(--signal-deep);}

/* =========================================================
   14 · FOOTER
   ========================================================= */
footer{border-top:var(--border); background:var(--concrete-deep); margin-top:var(--s7);}
.foot-in{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  align-items:flex-start; padding-block:var(--s5) var(--s4);}
.foot-links{display:flex; flex-wrap:wrap; gap:var(--s3); font-size:var(--t-small);}
.foot-links a{text-decoration:none; color:var(--slate);}
.foot-links a:hover{color:var(--graphite); text-decoration:underline; text-decoration-color:var(--signal-deep);}
.foot-legal{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between;
  align-items:center; padding-block:var(--s3) var(--s5); border-top:1px solid var(--rule-soft);
  font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate-soft);}
.foot-legal-links{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center;}
.foot-legal-links a,.foot-legal-links button{color:var(--slate-soft); text-decoration:none;
  font:inherit; background:none; border:0; padding:0; cursor:pointer;}
.foot-legal-links a:hover,.foot-legal-links button:hover{color:var(--graphite);}

/* =========================================================
   15 · BEWEGUNG — sparsam, eine Geste
   ========================================================= */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* =========================================================
   16 · RESPONSIVE
   ========================================================= */
@media (min-width:1600px){
  :root{--maxw:1360px; --rail:132px;}
}
@media (max-width:1040px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:880px){
  :root{--rail:0px;}
  .sec-grid{grid-template-columns:1fr; gap:var(--s3);}
  .rail{position:static; flex-direction:row; align-items:center; gap:var(--s2); margin-bottom:var(--s2);}
  .rail-mark{margin:0;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
    .sec{padding-block:var(--s6);}
}
@media (max-width:620px){
  .grid-4{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .facts dt{padding-bottom:0; border-top:1px solid var(--rule-soft);}
  .facts dd{padding-top:4px; border-top:0;}
  .toc ol{columns:1;}
  .cta-row .btn{flex:1 1 100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important; animation:none!important;}
  .reveal{opacity:1; transform:none;}
}

/* =========================================================
   17 · ERGÄNZENDE MODULE (Unterseiten)
   ========================================================= */

/* Brotkrumen */
.crumbs{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate-soft); padding-block:var(--s3) 0;}
.crumbs a{color:var(--slate); text-decoration:none;}
.crumbs a:hover{color:var(--graphite); text-decoration:underline; text-decoration-color:var(--signal-deep);}

/* Zurück-Link in der Kopfzeile */
.back{font-size:var(--t-small); text-decoration:none; color:var(--slate); white-space:nowrap;}
.back:hover{color:var(--graphite);}

/* Kennzahl-Block (z. B. "2 Tage gebaut") */
.stat{display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap;
  background:var(--sheet); border:var(--border); border-left:3px solid var(--signal);
  border-radius:var(--r); padding:var(--s3) var(--s4); margin-block:var(--s3);}
.stat-num{font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:.9; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; flex:none;}
.stat-num span{display:block; font-family:var(--font-mono); font-size:var(--t-meta); font-weight:400;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate); margin-top:8px;}
.stat p{margin:0; font-size:var(--t-small); color:var(--slate);}

/* Medien-Platzhalter */
.media{margin-block:var(--s3); border:var(--border); border-radius:var(--r-lg);
  background:var(--concrete-deep); overflow:hidden;}
.media iframe,.media video{display:block; width:100%; aspect-ratio:16/9; border:0;}
.media-ph{aspect-ratio:16/9; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; text-align:center; color:var(--slate);
  font-family:var(--font-mono); font-size:var(--t-small); letter-spacing:.08em;}
.media-ph .play{width:52px; height:52px; border-radius:50%; background:var(--signal);
  color:var(--graphite); display:grid; place-items:center; font-size:18px; margin-bottom:4px;}

/* Datentabelle */
.table-wrap{overflow-x:auto; margin-block:var(--s3);}
table.cost{width:100%; border-collapse:collapse; background:var(--sheet);
  border:var(--border); font-size:var(--t-small);}
table.cost caption{caption-side:top; text-align:left; font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase;
  color:var(--slate); padding-bottom:10px;}
table.cost th,table.cost td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--rule-soft);
  vertical-align:top;}
table.cost tbody th{font-weight:600; font-size:1rem; color:var(--graphite);}
table.cost thead th{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate); background:var(--concrete-deep); font-weight:400;}
table.cost tbody tr:last-child td{border-bottom:0;}
table.cost td.price,table.cost .price{font-family:var(--font-mono); font-weight:500; font-size:var(--t-small);
  font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:0;}

/* FAQ */
.faq{display:grid; gap:0; margin-block:var(--s3);}
.faq-item{border-top:1px solid var(--rule); padding-block:var(--s3);}
.faq-item:last-child{border-bottom:1px solid var(--rule);}
.faq-item h3{font-size:1.0625rem; margin-bottom:8px;}
.faq-item p{margin:0; color:var(--slate); font-size:var(--t-small);}

/* Abschluss-Block auf Unterseiten */
.cta-block{background:var(--graphite); color:var(--concrete); border-radius:var(--r-lg);
  padding:var(--s5) var(--s4); margin-top:var(--s6);}
.cta-block h2{color:var(--concrete); border-top:0; padding-top:0; margin-top:0; font-size:var(--t-h2);}
.cta-block p{color:#A7AEB6; max-width:56ch;}
.cta-block .mono{color:var(--signal);}
.cta-block .btn{border-color:var(--signal); background:var(--signal); color:var(--graphite);}
.cta-block .btn:hover{background:var(--signal-deep); border-color:var(--signal-deep);}

/* =========================================================
   18 · LEBEN — Textur, Bewegung, Reaktion
   Leitidee: Die Seite reagiert auf den Nutzer. Ein Werkzeug,
   das sich anfühlt, als wäre jemand dahinter.
   ========================================================= */

/* ---- Korn: gibt der Betonfläche Tastbarkeit ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{position:relative; z-index:2;}

/* ---- Hero: Wort-Rotator ---- */
.rotator{display:inline-grid; vertical-align:baseline; text-align:left;}
.rotator span{grid-area:1/1; opacity:0; transform:translateY(.42em) rotateX(-55deg);
  transform-origin:top center; animation:rot 9s infinite;}
.rotator span:nth-child(1){animation-delay:0s;}
.rotator span:nth-child(2){animation-delay:3s;}
.rotator span:nth-child(3){animation-delay:6s;}
@keyframes rot{
  0%,2%   {opacity:0; transform:translateY(.42em) rotateX(-55deg);}
  6%,30%  {opacity:1; transform:none;}
  34%,100%{opacity:0; transform:translateY(-.42em) rotateX(55deg);}
}

/* ---- Marker zeichnet sich beim Erscheinen ---- */
.marker{background:linear-gradient(to top, var(--signal) .62em, transparent .62em);
  background-size:0% 100%; background-repeat:no-repeat; padding-inline:.06em;
  transition:background-size .85s cubic-bezier(.66,0,.2,1) .25s;}
.marker.drawn,.no-js .marker{background-size:100% 100%;}

/* ---- Gestaffelter Auftritt beim Laden ---- */
.rise{opacity:0; transform:translateY(20px); animation:rise .8s var(--ease) forwards;}
.rise:nth-child(1){animation-delay:.05s;} .rise:nth-child(2){animation-delay:.14s;}
.rise:nth-child(3){animation-delay:.23s;} .rise:nth-child(4){animation-delay:.32s;}
.rise:nth-child(5){animation-delay:.41s;}
@keyframes rise{to{opacity:1; transform:none;}}

/* ---- Laufband für die Stationen ---- */
.ticker{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.ticker-track{display:flex; width:max-content; animation:slide 34s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker ul{display:flex; gap:var(--s5); align-items:center; margin:0; padding:0 var(--s4) 0 0;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ---- Bento-Raster für Arbeitsproben ---- */
.bento{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3);}
.bento > :first-child{grid-column:span 2;}
.bento > :first-child h3{font-size:clamp(1.5rem,2.2vw,1.95rem);}
.bento > :first-child p{max-width:62ch;}
/* Sobald ein Screenshot eingesetzt wird, bekommt die erste Zelle wieder Höhe: */
.bento > :first-child:has(.work-shot){grid-row:span 2;}
.bento > :first-child .work-shot{flex:1; min-height:170px;}

/* ---- Arbeitsproben-Karte mit Signal-Wisch ---- */
.work{position:relative; overflow:hidden; isolation:isolate;}
.work::after{content:""; position:absolute; inset:auto -20% -60% -20%; height:70%;
  background:var(--signal); transform:translateY(101%) rotate(-3deg); z-index:-1;
  transition:transform .5s cubic-bezier(.66,0,.2,1);}
.work:hover::after,.work:focus-within::after{transform:translateY(46%) rotate(-3deg);}
.work .num{transition:transform .35s var(--ease), color .35s var(--ease);}
.work:hover .num{transform:scale(1.35) translateX(-6px); color:var(--graphite);}
.work-shot{border:var(--border); border-radius:var(--r); background:var(--concrete-deep);
  display:grid; place-items:center; min-height:118px; overflow:hidden;
  font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-soft); text-align:center; padding:var(--s2);}
.work-shot img{width:100%; height:100%; object-fit:cover;}

/* ---- Zahlen, die hochzählen ---- */
.count{font-variant-numeric:tabular-nums;}

/* ---- Signal-Abschnitt: der laute Moment der Seite ---- */
.sec--signal{background:var(--signal); color:var(--graphite); border-top:0;
  position:relative; overflow:hidden;}
.sec--signal h1,.sec--signal h2,.sec--signal h3{color:var(--graphite);}
.sec--signal .lead,.sec--signal .small{color:#3D4211;}
.sec--signal .mono,.sec--signal .aside{color:#4A5015;}
.sec--signal .rail{color:#4A5015;} .sec--signal .rail b{color:var(--graphite);}
.sec--signal .rail-mark{background:var(--graphite);}
.sec--signal .btn{border-color:var(--graphite); background:var(--graphite); color:var(--signal);}
.sec--signal .btn:hover{background:#000;}
.sec--signal .chip{background:transparent; border-color:var(--graphite); color:var(--graphite);}

/* ---- Lichtkegel folgt dem Zeiger (dunkler Abschnitt) ---- */
.sec--dark{position:relative; overflow:hidden;}
.sec--dark::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),
    rgba(220,232,56,.16), transparent 62%); transition:opacity .3s;}

/* ---- Karten kippen leicht zum Zeiger ---- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .35s var(--ease);}

/* ---- Fortschritt in der Spec-Rail ---- */
.rail-mark{width:24px; height:3px; background:var(--rule); position:relative; overflow:hidden;}
.rail-mark::after{content:""; position:absolute; inset:0; background:var(--signal);
  transform:scaleX(var(--p,0)); transform-origin:left; transition:transform .18s linear;}

/* ---- Buttons: Farbwisch statt bloßem Farbwechsel ---- */
.btn{position:relative; overflow:hidden; isolation:isolate;}
.btn::before{content:""; position:absolute; inset:0; background:var(--signal); z-index:-1;
  transform:translateY(100%); transition:transform .34s cubic-bezier(.66,0,.2,1);}
.btn-primary:hover::before,.btn-ghost:hover::before{transform:translateY(0);}
.btn-primary:hover{color:var(--graphite);}
.btn-ghost:hover{border-color:var(--graphite);}
.btn-signal::before,.sec--signal .btn::before{display:none;}

/* ---- Porträt ---- */
.portrait{border:var(--border); border-radius:var(--r-lg); overflow:hidden;
  background:var(--concrete-deep); margin:0 0 var(--s3); position:relative;
  max-width:190px; width:100%;}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.06);
  transition:filter .5s var(--ease), transform .6s var(--ease);}
.portrait:hover img{filter:none; transform:scale(1.02);}
.portrait figcaption{position:absolute; left:0; bottom:0; right:0; padding:8px 11px; line-height:1.35;
  background:var(--signal); color:var(--graphite); font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase;}

@media (max-width:880px){
  .bento{grid-template-columns:1fr;}
  .bento > :first-child{grid-column:span 1; grid-row:span 1;}
  .bento > :first-child:has(.work-shot){grid-row:span 1;}
  .tilt{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .rotator span{animation:none; opacity:0;}
  .rotator span:first-child{opacity:1; transform:none;}
  .ticker-track{animation:none;}
  .rise{opacity:1; transform:none; animation:none;}
  .marker{background-size:100% 100%;}
  .work::after,.btn::before{display:none;}
  .sec--dark::before{display:none;}
}

/* =========================================================
   19 · PRÄSENZ — Index, Uhr, Klammern
   Angeregt durch specia1ne.com: nummerierte Abschnittscodes,
   Live-Ortszeit als Anwesenheitsbeweis, Klammern als Rahmung.
   ========================================================= */

/* ---- Live-Ortszeit: zeigt, dass hier jemand ist ---- */
.presence{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
  white-space:nowrap;}
.presence b{color:var(--graphite); font-weight:500;}
.presence .pulse{width:6px; height:6px; border-radius:50%; background:var(--signal-deep);
  flex:none; animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.72);}}
.sec--dark .presence{color:#A7AEB6;} .sec--dark .presence b{color:var(--concrete);}


/* ---- Laufender Index in Listenabschnitten ---- */
.counter{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-soft); display:flex; align-items:center; gap:10px;
  padding-bottom:var(--s2); margin-bottom:var(--s3); border-bottom:1px solid var(--rule-soft);}
.counter b{color:var(--graphite); font-weight:500; font-variant-numeric:tabular-nums;}
.counter .flag{background:var(--signal); color:var(--graphite); padding:3px 8px;}
.sec--signal .counter{border-color:rgba(16,19,23,.2);}

/* ---- Klammern als Rahmung ---- */
.btn-brackets::after,.btn-brackets::before{content:none;}
.btn-brackets{border-color:transparent; padding-inline:6px; background:transparent;
  color:var(--graphite); font-family:var(--font-mono); font-size:var(--t-small);
  letter-spacing:.08em; text-transform:uppercase;}
.btn-brackets .br{color:var(--signal-deep); transition:transform .3s var(--ease); display:inline-block;}
.btn-brackets .br-l{margin-right:4px;} .btn-brackets .br-r{margin-left:4px;}
.btn-brackets:hover .br-l{transform:translateX(-5px);}
.btn-brackets:hover .br-r{transform:translateX(5px);}
.btn-brackets:hover{transform:none;}

/* ---- Metadaten-Zeile im Klammerstil ---- */
.meta-brackets{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); margin:0;}
.meta-brackets::before{content:"[ "; color:var(--signal-deep);}
.meta-brackets::after{content:" ]"; color:var(--signal-deep);}

/* ---- Antithese-Überschrift: zwei Sätze, harter Umbruch ---- */
.antithesis{display:block;}
.antithesis span{display:block;}
.antithesis span + span{color:var(--slate);}
.sec--dark .antithesis span + span{color:#7E8892;}

/* =========================================================
   20 · FEINSCHLIFF — Proportionen auf großen Schirmen
   ========================================================= */

/* Rechts neben der Textspalte standen bis zu 456 px ungenutzt.
   Ab 1280 px wandert das Inhaltsverzeichnis dorthin und läuft mit. */
@media (min-width:1280px){
  .prose:has(.toc){
    display:grid; grid-template-columns:minmax(0,74ch) minmax(0,1fr);
    gap:var(--s5); align-items:start; max-width:none;
  }
  .prose:has(.toc) > *{grid-column:1; min-width:0;}
  .prose:has(.toc) > .toc{
    grid-column:2; grid-row:1; position:sticky; top:104px;
    margin:0; background:transparent; border:0; border-left:1px solid var(--rule);
    border-radius:0; padding:2px 0 2px var(--s3);
  }
  .prose:has(.toc) > .toc ol{columns:1; font-size:var(--t-small);}
  .prose:has(.toc) > .toc li{margin-bottom:8px;}
  .prose:has(.toc) > .toc p{font-family:var(--font-mono); font-size:var(--t-meta);
    letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft);}
}

/* Abschlussblock der Unterseiten: Fließtext nicht über die volle Breite ziehen */
.cta-block{max-width:1000px;}
.cta-block h2{max-width:22ch;}

/* Kennzahl-Block bündig zur Textspalte halten */
.stat{max-width:74ch;}

/* Kreise im Signal-Abschnitt auf sehr breiten Schirmen begrenzen */
@media (min-width:1600px){
    }

/* =========================================================
   21 · PERSONALBOGEN — Abschnitt „07 Person"
   Aufbau: Porträt und Text nebeneinander, Kennwerte als
   waagerechte Datenleiste darunter über die volle Breite.
   Grund: Eine hohe, schmale Karte neben kurzem Text erzeugt
   zwangsläufig eine tote Fläche. Die Leiste füllt sie und
   liest sich zugleich mehr nach Datenblatt.
   ========================================================= */
.person{display:grid; grid-template-columns:minmax(0,268px) minmax(0,1fr);
  gap:var(--s5); align-items:start;}

/* --- Porträtkarte --- */
.record{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
  overflow:hidden;}
.record-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:10px 13px; border-bottom:var(--border); font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--slate);}
.record-head b{color:var(--graphite); font-weight:500;}
.record-head .tag{background:var(--signal); color:var(--graphite); padding:3px 7px;}

/* Seitenverhältnis sitzt am figure, nicht am Bild — greift auch dann,
   wenn die Quelldatei ein anderes Format hat. */
.record figure{margin:0; position:relative; background:var(--concrete-deep);
  aspect-ratio:4/5; overflow:hidden;}
.record figure picture{display:block; width:100%; height:100%;}
.record figure img{display:block; width:100%; height:100%; object-fit:cover;
  object-position:50% 22%; filter:grayscale(1) contrast(1.05);
  transition:filter .5s var(--ease), transform .6s var(--ease);}
.record:hover figure img{filter:none; transform:scale(1.03);}
.record figcaption{position:absolute; left:0; right:0; bottom:0; padding:7px 12px;
  background:rgba(16,19,23,.86); color:var(--concrete); font-family:var(--font-mono);
  font-size:var(--t-meta); letter-spacing:.12em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:10px;}
.record figcaption span:last-child{color:var(--signal);}

/* --- Datenleiste unter beiden Spalten --- */
.specs{grid-column:1 / -1; margin-top:var(--s2);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
.specs-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:10px 0; font-family:var(--font-mono); font-size:var(--t-meta);
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft);
  border-bottom:1px solid var(--rule-soft);}
.specs-head b{color:var(--graphite); font-weight:500;}
.specs-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0;}
.specs-grid > div{padding:var(--s3) var(--s3) var(--s3) 0; border-right:1px solid var(--rule-soft);
  min-width:0;}
.specs-grid > div:last-child{border-right:0;}
.specs-grid > div + div{padding-left:var(--s3);}
.specs dt{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-soft); margin-bottom:7px;}
.specs dd{margin:0; font-size:var(--t-small); font-weight:500; line-height:1.45;
  overflow-wrap:anywhere;}
.specs-foot{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; padding:var(--s2) 0;
  border-top:1px solid var(--rule-soft);}

/* Großes Zitat trägt den Abschnitt */
.quote-lg{margin:var(--s4) 0; padding-left:var(--s4); border-left:3px solid var(--signal);
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,1.9vw,1.7rem);
  line-height:1.24; letter-spacing:-0.026em; color:var(--graphite); max-width:30ch;}

@media (max-width:1100px){
  .specs-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .specs-grid > div:nth-child(3n){border-right:0;}
  .specs-grid > div:nth-child(n+4){border-top:1px solid var(--rule-soft);}
}
@media (max-width:760px){
  .person{grid-template-columns:1fr; gap:var(--s4);}
  .record{max-width:300px;}
  .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .specs-grid > div:nth-child(2n){border-right:0;}
  .specs-grid > div:nth-child(3n){border-right:1px solid var(--rule-soft);}
  .specs-grid > div:nth-child(n+3){border-top:1px solid var(--rule-soft);}
}
@media (max-width:460px){
  .record{max-width:none;}
  .specs-grid{grid-template-columns:1fr;}
  .specs-grid > div{border-right:0; padding:var(--s2) 0;}
  .specs-grid > div + div{padding-left:0; border-top:1px solid var(--rule-soft);}
  .specs-head{flex-wrap:wrap; gap:6px;}
}

/* =========================================================
   22 · MOBILE — enge Viewports (≤ 620 px)
   Grundregel: nichts erzwingt eine Breite, die der Viewport
   nicht hergibt. nowrap wird gezielt aufgehoben, statt global.
   ========================================================= */

/* Sicherheitsnetz gegen horizontales Scrollen */
html,body{overflow-x:hidden;}
body{overflow-wrap:break-word;}

@media (max-width:620px){
  :root{--gutter:18px;}

  /* --- Ortszeit: 62 Zeichen passen nicht in 320 px --- */
  .presence{white-space:normal; align-items:flex-start; line-height:1.55;
    letter-spacing:.09em; gap:7px;}
  .presence .pulse{margin-top:6px;}

  /* --- Buttons dürfen umbrechen und füllen die Zeile --- */
  .btn{white-space:normal; text-align:center; word-break:break-word;
    padding-inline:16px; line-height:1.25;}
  .cta-row{gap:10px;}
  .cta-row > .btn{flex:1 1 100%;}

  /* Klammer-Button: lange E-Mail-Adresse umbrechen lassen */
  .btn-brackets{padding-inline:2px; letter-spacing:.02em; font-size:0.9rem;
    overflow-wrap:anywhere;}
  .btn-brackets .br-l{margin-right:2px;} .btn-brackets .br-r{margin-left:2px;}

  /* --- Chips und Metadaten --- */
  .chip{font-size:10px; padding:5px 10px;}
  .meta-brackets,.mono{overflow-wrap:anywhere;}

  /* --- Laufender Index und Statuszeile --- */
  .counter{flex-wrap:wrap; gap:8px; row-gap:6px;}
  .status{gap:6px 16px; letter-spacing:.1em;}


  /* --- Kennzahl-Block --- */
  .stat{gap:var(--s2); padding:var(--s3);}
  .stat-num{font-size:clamp(2rem,11vw,2.6rem);}

  /* --- Tabellen: erste Spalte darf nicht sprengen --- */
  table.cost th,table.cost td{padding:11px 12px;}
  table.cost td.price,table.cost .price{white-space:normal;}

  /* --- Fußzeile --- */
  .foot-in{gap:var(--s3); padding-block:var(--s4) var(--s3);}
  .foot-links{gap:var(--s2) var(--s3);}
  .foot-legal{gap:var(--s2); align-items:flex-start; letter-spacing:.1em;}
  .foot-legal-links{gap:var(--s2) var(--s3);}

  /* --- Abschlussblock --- */
  .cta-block{padding:var(--s4) var(--s3); border-radius:var(--r);}
  .cta-block h2{max-width:none;}

  /* --- Kopfzeile --- */
  .topbar-in{gap:var(--s2); min-height:64px;}
  
  /* --- Abschnittsrhythmus --- */
  .sec{padding-block:var(--s5);}
  .sec-head{margin-bottom:var(--s4);}
  .rail{margin-bottom:var(--s1);}

  /* --- Inhaltsverzeichnis --- */
  .toc{padding:var(--s3);}

  /* --- Bildunterschrift im Personalbogen --- */
  .record figcaption{font-size:9px; letter-spacing:.09em; padding:6px 10px;}
  .specs dd{font-size:0.9rem;}
}

@media (max-width:400px){
  :root{--gutter:15px;}
  .btn{font-size:0.9rem; padding-block:14px;}
  .btn-brackets{font-size:0.82rem;}
  .chip{font-size:9.5px;}
  .price{font-size:1.6rem;}
  .quote-lg{padding-left:var(--s3); font-size:1.2rem;}
  .offer,.card{padding:var(--s3);}
}

/* Ortszeit: Zusatz auf eigener Zeile, sobald es eng wird */
@media (max-width:620px){
  .presence .sep{display:none;}
  .presence .add{display:block; width:100%; margin-top:3px; color:var(--slate-soft);}
  .sec--dark .presence .add{color:#7E8892;}
}

/* =========================================================
   23 · SEHR SCHMAL (≤ 400 px, Referenz 360 px)
   Nachgerechnet für 360 px: verfügbare Textbreite 324 px,
   im Personalbogen 302 px. Alles, was darüber lag, ist hier gelöst.
   ========================================================= */
@media (max-width:400px){


  /* --- Hero: Rotator braucht Platz für das längste Wort --- */
  .hero h1{letter-spacing:-0.045em;}
  .rotator{min-width:0;}

  /* --- Kopfzeile: Untertitel kürzen statt umbrechen --- */
  
  /* --- Metadaten und Listenindex --- */
  .meta-brackets{font-size:10px; letter-spacing:.08em; line-height:1.5;}
  .counter{font-size:10px; letter-spacing:.1em;}
  .counter .flag{padding:3px 7px;}
  .status{font-size:10px; letter-spacing:.09em; gap:5px 12px; padding-block:10px;}

  /* --- Stationen-Laufband --- */
  .logos li{font-size:0.95rem;}
  .ticker ul{gap:var(--s4);}

  /* --- Angebotskarten --- */
  .price small{font-size:9.5px;}
  .ticks li{padding-left:20px; font-size:0.9rem;}
  .offer--lead::before{left:var(--s3); font-size:9.5px; padding:3px 8px;}

  /* --- Abschnittsköpfe --- */
  .sec-head{max-width:none;}
  .antithesis span{display:block;}
  .rail{font-size:10px; letter-spacing:.11em;}
  .rail b{font-size:0.75rem;}

  /* --- Fließtext --- */
  .prose h2{font-size:1.4rem;}
  .prose h2 .num{display:block; margin:0 0 4px; font-size:0.75rem;}
  .prose code{font-size:0.8em; overflow-wrap:anywhere;}
  .addr{padding:var(--s3);}
  .note{padding:var(--s3);}

  /* --- Tabelle: bei extremer Enge zur Kartenansicht --- */
  table.cost thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  table.cost,table.cost tbody,table.cost tr,table.cost td,table.cost tbody th{display:block; width:100%;}
  table.cost tr{border-bottom:1px solid var(--rule); padding:var(--s2) 0;}
  table.cost tr:last-child{border-bottom:0;}
  table.cost td,table.cost tbody th{border:0; padding:4px 14px;}
  table.cost tbody th{font-weight:600; font-size:1rem; padding-top:10px;}
  table.cost td[data-label]::before{content:attr(data-label) " · ";
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--slate-soft);}

  /* --- Fußzeile --- */
  .foot-legal{font-size:9.5px; letter-spacing:.09em;}
  .foot-links{font-size:0.9rem;}

  /* --- Kennzahl-Block --- */
  .stat{flex-direction:column; align-items:flex-start; gap:10px;}

  /* --- Bento und Karten --- */
  .bento > :first-child h3{font-size:1.3rem;}
  .card-top{flex-wrap:wrap; gap:6px;}
}

/* =========================================================
   24 · HERO-VISUAL — „Aufbau in Schichten"
   Gezeichnete Isometrie: vier Ebenen stapeln sich wie eine
   Explosionszeichnung, eine davon in Signalgelb. Reines SVG +
   CSS, exakte Markenfarben, rund 4 KB, keine Mediendatei.
   ========================================================= */
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5); align-items:center;}
@media (min-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:var(--s6);}
}

.viz{position:relative; justify-self:center; width:100%; max-width:340px;}
.viz svg{width:100%; height:auto; display:block; overflow:visible;}
.viz figcaption{margin-top:var(--s2); font-family:var(--font-mono); font-size:var(--t-meta);
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft);
  display:flex; justify-content:space-between; gap:10px;}
.viz figcaption b{color:var(--graphite); font-weight:500;}

.viz-stack{animation:viz-float 8s ease-in-out infinite;}
@keyframes viz-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}

.viz-plate{fill:none; stroke:var(--graphite); stroke-width:1.4; stroke-linejoin:round;
  stroke-dasharray:362; stroke-dashoffset:362; animation:viz-draw .95s cubic-bezier(.5,0,.2,1) forwards;}
.viz-plate.p1{animation-delay:.10s;}
.viz-plate.p2{animation-delay:.42s;}
.viz-plate.p3{animation-delay:.74s;}
.viz-plate.p4{animation-delay:1.06s;}
@keyframes viz-draw{to{stroke-dashoffset:0;}}

.viz-fill{fill:var(--signal); opacity:0; animation:viz-in .7s ease .95s forwards;}
.viz-edge{fill:none; stroke:var(--rule); stroke-width:1; stroke-dasharray:3 5;
  opacity:0; animation:viz-in .8s ease 1.5s forwards;}
.viz-tick{stroke:var(--slate-soft); stroke-width:1; opacity:0;
  animation:viz-in .8s ease 1.75s forwards;}
.viz-dot{fill:var(--graphite); opacity:0; animation:viz-in .6s ease 1.9s forwards;}
@keyframes viz-in{to{opacity:1;}}

/* Signalimpuls wandert die linke Kante hinab */
.viz-pulse{stroke:var(--signal-deep); stroke-width:2.5; stroke-linecap:round;
  opacity:0; animation:viz-pulse 4.5s cubic-bezier(.5,0,.5,1) 2.2s infinite;}
@keyframes viz-pulse{
  0%{opacity:0; transform:translateY(-132px);}
  8%{opacity:1;}
  60%{opacity:1; transform:translateY(0);}
  75%,100%{opacity:0; transform:translateY(0);}
}

@media (prefers-reduced-motion:reduce){
  .viz-stack{animation:none;}
  .viz-plate{stroke-dashoffset:0; animation:none;}
  .viz-fill,.viz-edge,.viz-tick,.viz-dot{opacity:1; animation:none;}
  .viz-pulse{display:none;}
}
@media (max-width:1099px){
  .viz{max-width:230px; margin-top:var(--s3);}
}
@media (max-width:620px){
  .viz{max-width:190px;}
}


/* =========================================================
   25 · SIGNAL-HINTERGRUND — abstrakte CSS-Animation (§ 05)
   Drei Ebenen, alle in Graphit auf dem gelben Feld:
   ein driftendes isometrisches Raster, atmende Messringe
   und eine wandernde Prüflinie. Nur transform und opacity —
   keine Bilder, keine Neuberechnung des Layouts.
   ========================================================= */
.signal-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.sec--signal > .wrap{position:relative; z-index:1;}

/* --- Ebene 1: isometrisches Raster, driftet nach unten ---
   Rasterabstand 34.64 px, Versatz 40 px = 34.64 / cos 30°.
   Dadurch trifft die Schleife exakt auf die nächste Linie. */
.signal-bg::before{
  content:""; position:absolute; inset:-25% -25% -25% -25%;
  background-image:
    repeating-linear-gradient(30deg,  rgba(16,19,23,.075) 0 1px, transparent 1px 34.64px),
    repeating-linear-gradient(-30deg, rgba(16,19,23,.075) 0 1px, transparent 1px 34.64px);
  animation:sig-drift 22s linear infinite;
}
@keyframes sig-drift{from{transform:translateY(0);} to{transform:translateY(40px);}}

/* --- Ebene 2: Messringe, atmen langsam --- */
.signal-bg::after{
  content:""; position:absolute; inset:-40%;
  background:repeating-radial-gradient(circle at 76% 22%,
    transparent 0 62px, rgba(16,19,23,.10) 62px 64px);
  transform-origin:76% 22%;
  animation:sig-breathe 26s ease-in-out infinite;
}
@keyframes sig-breathe{
  0%,100%{transform:scale(1);   opacity:.85;}
  50%    {transform:scale(1.09); opacity:1;}
}

/* --- Ebene 3: Prüflinie wandert quer durchs Feld --- */
.sig-sweep{position:absolute; top:0; bottom:0; left:0; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(16,19,23,.32) 22%,
    rgba(16,19,23,.32) 78%, transparent);
  animation:sig-sweep 13s cubic-bezier(.5,0,.5,1) infinite;}
.sig-sweep::after{content:""; position:absolute; top:50%; left:-3px;
  width:7px; height:7px; background:var(--graphite); border-radius:50%;}
@keyframes sig-sweep{
  0%      {transform:translateX(-4vw);  opacity:0;}
  10%,88% {opacity:1;}
  100%    {transform:translateX(104vw); opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .signal-bg::before,.signal-bg::after{animation:none;}
  .sig-sweep{display:none;}
}
@media (max-width:620px){
  .signal-bg::before{background-size:auto; opacity:.75;}
  .signal-bg::after{inset:-60%;}
}

/* =========================================================
   26 · WORT-BILD-MARKE im Kopf und Fuß
   Dasselbe Zeichen wie im Favicon, als Inline-SVG: keine
   zusätzliche Anfrage, gestochen auf jeder Auflösung, und
   die Farben kommen aus den Tokens statt fest im Bild zu stehen.
   ========================================================= */
.brand{display:flex; flex-direction:row; align-items:center; gap:11px;
  text-decoration:none; line-height:1;}
.brand-mark{flex:none; width:36px; height:36px; display:block;
  transition:transform .25s var(--ease);}
.brand-mark svg{display:block; width:100%; height:100%;}
.brand-mark .bm-tile{fill:var(--signal);}
.brand-mark .bm-ink{fill:var(--graphite);}
.brand-mark .bm-bar{fill:var(--graphite); transform-origin:22.4px 50.4px;
  transition:transform .25s var(--ease);}
.brand:hover .brand-mark{transform:rotate(-3deg);}
.brand:hover .bm-bar{transform:scaleX(1.35);}
.brand:focus-visible{outline-offset:5px;}

.brand-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.brand-text b{font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  letter-spacing:-0.02em; color:var(--graphite);}
.brand-text span{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate);}

/* Auf dunklem Grund kehrt sich die Schrift um, die Kachel bleibt */
.sec--dark .brand-text b,footer .brand-text b{color:var(--graphite);}

@media (max-width:620px){
  .brand{gap:9px;}
  .brand-mark{width:32px; height:32px;}
  .brand-text b{font-size:1rem;}
  .brand-text span{font-size:9px; letter-spacing:.13em;}
}
@media (max-width:400px){
  .brand-mark{width:29px; height:29px;}
  .brand-text span{font-size:8.5px; letter-spacing:.11em;}
}
@media (prefers-reduced-motion:reduce){
  .brand-mark,.brand-mark .bm-bar{transition:none;}
  .brand:hover .brand-mark{transform:none;}
  .brand:hover .bm-bar{transform:none;}
}

/* =========================================================
   27 · NAVIGATION — Verhalten beim Scrollen
   Desktop: Die Kopfzeile weicht beim Abwärtsscrollen aus und
   kehrt zurück, sobald der Nutzer stoppt oder aufwärts scrollt.
   Mobil: Eine feste Leiste am unteren Rand hält Menü und
   Handlungsaufruf in Daumenreichweite; das Menü fährt von
   unten als Blatt hoch.
   ========================================================= */
:root{--dock-h:72px;}

/* --- Kopfzeile weicht aus --- */
/* Rückkehr verzögert ausklingend, Weggang beschleunigend — die Leiste
   kommt einladend zurück und verschwindet zügig. */
.topbar{transition:transform .36s cubic-bezier(.16,.84,.28,1), box-shadow .3s var(--ease);
  will-change:transform;}
.topbar--hidden{transform:translateY(-101%);
  transition:transform .24s cubic-bezier(.55,0,.85,.2), box-shadow .3s var(--ease);}
.topbar--stuck{box-shadow:0 10px 30px -24px rgba(16,19,23,.7);}

/* --- Lesefortschritt als Haarlinie an der Unterkante --- */
.topbar-progress{position:absolute; left:0; right:0; bottom:-1px; height:2px;
  overflow:hidden; pointer-events:none;}
.topbar-progress::after{content:""; display:block; height:100%; width:100%;
  background:var(--signal-deep); transform:scaleX(var(--sp,0)); transform-origin:left;
  transition:transform .12s linear;}

/* --- Aktiver Abschnitt in der Navigation --- */
.menu a:not(.btn)[aria-current="true"]{color:var(--graphite); border-bottom-color:var(--signal);}

/* --- Untere Leiste: nur mobil --- */
.dock{display:none;}
.dock-menu{display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
  text-transform:uppercase; background:transparent; color:var(--graphite);
  border:1.5px solid var(--graphite); border-radius:var(--r); padding:0 16px; height:46px;
  cursor:pointer;}
.dock-bars{display:block; width:15px; height:9px; position:relative; flex:none;}
.dock-bars::before,.dock-bars::after{content:""; position:absolute; left:0; right:0; height:1.5px;
  background:currentColor; transition:transform .25s var(--ease);}
.dock-bars::before{top:0;} .dock-bars::after{bottom:0;}
.dock-menu[aria-expanded="true"] .dock-bars::before{transform:translateY(3.75px) rotate(45deg);}
.dock-menu[aria-expanded="true"] .dock-bars::after{transform:translateY(-3.75px) rotate(-45deg);}
.dock .btn{flex:1; height:46px; padding-block:0;}

.menu-scrim{position:fixed; inset:0; z-index:88; background:rgba(16,19,23,.42);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;}
.menu-scrim.open{opacity:1; visibility:visible;}

@media (max-width:880px){
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));}

  .dock{display:flex; align-items:center; gap:10px; position:fixed; left:0; right:0; bottom:0;
    z-index:90; padding:13px var(--gutter) calc(13px + env(safe-area-inset-bottom, 0px));
    background:color-mix(in srgb, var(--concrete) 93%, transparent);
    backdrop-filter:blur(14px); border-top:var(--border);
    box-shadow:0 -10px 30px -22px rgba(16,19,23,.5);}

  /* Der Umschalter oben entfällt — er sitzt jetzt unten */
  
  .menu{display:none;}   /* mobil übernimmt das Blatt am unteren Rand */

  /* Die Kopfzeile darf mobil nicht ausweichen — sie trägt nur die Marke */
  .topbar--hidden{transform:none;}
}

@media (max-width:400px){
  .dock{gap:8px; padding-inline:var(--gutter);}
  .dock-menu{padding:0 12px; font-size:10px; letter-spacing:.1em;}
  .dock .btn{font-size:0.875rem;}
}

@media (prefers-reduced-motion:reduce){
  .topbar{transition:none;}
  .topbar--hidden{transform:none;}     /* nicht ausblenden, das irritiert */
  .menu,.menu-scrim,.dock-bars::before,.dock-bars::after{transition:none;}
  .topbar-progress::after{transition:none;}
}

/* Sprungziele nicht unter die Kopfzeile rutschen lassen */
.sec[id]{scroll-margin-top:88px;}
@media (max-width:880px){
  .sec[id]{scroll-margin-top:74px;}
  .back{display:none;}          /* der Rückweg steht in der unteren Leiste */
}

/* =========================================================
   28 · MENÜBLATT (mobil)
   Eigenes Element direkt unter <body>. Es darf NICHT in der
   Kopfzeile liegen: deren backdrop-filter macht sie zum
   Bezugsrahmen für position:fixed, und ihr z-index bildet
   einen Stapelkontext — das Blatt wäre dort eingesperrt.

   Bewusst ohne visibility: die Eigenschaft ist diskret und
   verhält sich in Übergängen je nach Engine unterschiedlich.
   Statt dessen pointer-events und aria-hidden.
   ========================================================= */
.sheet{display:none;}

@media (max-width:880px){
  .sheet{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; left:0; right:0; bottom:0; z-index:210;
    max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:14px var(--gutter) calc(var(--dock-h) + var(--s3) + env(safe-area-inset-bottom, 0px));
    background:var(--concrete); border-top:var(--border); border-radius:14px 14px 0 0;
    box-shadow:0 -26px 64px -30px rgba(16,19,23,.65);
    transform:translateY(102%); pointer-events:none;
    transition:transform .34s cubic-bezier(.16,.84,.28,1);}
  .sheet[data-open="true"]{transform:translateY(0); pointer-events:auto;}

  .sheet-grip{flex:none; width:40px; height:4px; border-radius:2px;
    background:var(--rule); margin:0 auto var(--s3);}
  .sheet-title{margin:0 0 var(--s1); font-family:var(--font-mono); font-size:var(--t-meta);
    letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft);}
  .sheet a{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
    padding:16px 2px; font-size:1.0625rem; color:var(--graphite); text-decoration:none;
    border-bottom:1px solid var(--rule-soft);}
  .sheet a:last-of-type{border-bottom:0;}
  .sheet a .idx{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:.12em;
    color:var(--slate-soft);}
  .sheet a[aria-current="true"]{font-weight:600;}
  .sheet a[aria-current="true"] .idx{color:var(--graphite); background:var(--signal);
    padding:2px 7px; border-radius:1px;}

  /* Ebenen neu gestaffelt: klar getrennt vom übrigen Seiteninhalt (max. 60) */
  .menu-scrim{z-index:200;}
  .dock{z-index:220;}
}

/* Scrollsperre über eine Klasse statt über Inline-Stile am body */
html.sheet-open,html.sheet-open body{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .sheet{transition:none;}
}