/* ── 0 · Schriften ──────────────────────────────────────────────
   Selbst gehostet, kein Aufruf an Google Fonts oder Fontshare: der Besucher
   baut keine Verbindung zu einem fremden Server auf. Herkunft und Lizenz
   stehen in assets/fonts/HERKUNFT.txt.
   font-display: swap — der Text ist sofort lesbar und wechselt die Schrift,
   sobald sie da ist; er bleibt nie unsichtbar. */
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Eine Datei für 400–700: variable Achse wght, Latin-Subset. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/JetBrainsMono-var-latin.woff2") format("woff2-variations"),
       url("assets/fonts/JetBrainsMono-var-latin.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   DIGITAL CRAFT — Styleframe v1 · v30
   Tokens gemäß UI-LIBRARY.md · Leitidee „Die Betriebsbesichtigung"
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────── */
:root {
  --white: #ffffff;
  --surface: #f5f7fa;
  --surface-blue: #eef3fe; /* Raumfarbe Station 02 — sehr helles Markenblau */
  --hairline: #e4e7ee;
  --navy: #0a1633;
  --navy-60: #5b6478;
  --navy-40: rgba(10, 22, 51, 0.6); /* „gedämpfteste" Textstufe — auf WCAG-AA angehoben (≈4,7:1), alle Verwendungen sind Text */
  --navy-15: rgba(10, 22, 51, 0.15);
  --blue: #2d5bff;
  --violet: #7b3bf2;
  --magenta: #e82c8f;
  --gradient: linear-gradient(135deg, #e82c8f, #7b3bf2, #2d5bff);

  --font-sans: "General Sans", "Segoe UI Variable Display", "Segoe UI Variable Text",
               "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-pill: 999px;

  --shadow-rest: 0 2px 8px rgba(10, 22, 51, 0.06);
  --shadow-float: 0 24px 80px -16px rgba(10, 22, 51, 0.16), 0 2px 8px rgba(10, 22, 51, 0.06);
  --shadow-hover: 0 28px 80px -16px rgba(10, 22, 51, 0.2), 0 2px 8px rgba(10, 22, 51, 0.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui: 200ms;
  --dur-stage: 600ms;

  --container: 1200px;
  --container-wide: 1360px;
  --container-text: 720px;

  /* Rhythmus-Revision: Räume trennen durch Kanten, nicht durch Distanz —
     Abstände ~35 % dichter als die Basis-Skala der UI-LIBRARY */
  --sp-xl: clamp(64px, 7.5vw, 104px);
  --sp-l: clamp(48px, 5.5vw, 78px);
  --sp-m: clamp(36px, 4.5vw, 56px);
}

/* ── 2 · Basis ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Witwen-/Waisen-Schutz im Fließtext (graceful; nur unterstützende Browser) */
p { text-wrap: pretty; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.6vw + 0.8rem, 4.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 2.6vw + 0.6rem, 3rem); line-height: 1.12; }
h3 { font-size: 1.25rem; letter-spacing: -0.005em; line-height: 1.3; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
i, em, b { font-style: normal; font-weight: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: -48px; left: 24px; z-index: 600;
  background: var(--navy); color: #fff; padding: 10px 20px;
  border-radius: var(--r-pill); font-size: 0.9rem;
  transition: top var(--dur-ui) var(--ease);
}
.skip-link:focus-visible { top: 16px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* Markenkonforme Textselektion — dezenter Blauton auf hellen Flächen,
   weiß auf dunklen Sektionen (Navy-Card, Footer, CTA). */
::selection { background: rgba(45, 91, 255, 0.16); color: var(--navy); }
.navy-card ::selection, .footer ::selection, .cta ::selection, .wb-stage ::selection {
  background: rgba(255, 255, 255, 0.24); color: #fff;
}

/* Anker landen mit Luft unter der kondensierten Nav-Pill
   (Pill-Unterkante = top 14px + Höhe 58px = 72px) */
section[id] { scroll-margin-top: 96px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 880px; }
.container-text { max-width: var(--container-text); }

/* Mono-Label — technische Signatur */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-60);
}

/* ── 3 · Buttons & Links ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 0.9375rem; line-height: 1;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
  position: relative; overflow: hidden;
}
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-rest); }
.btn-primary::after { /* Verlaufs-Schimmer — nur transient bei Hover (zählt nicht ins Budget) */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px;
  background: var(--gradient); border-radius: 2px;
  opacity: 0; transition: opacity var(--dur-ui) var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(-1px) scale(0.98); }
.btn-l { height: 56px; padding: 0 32px; }
.btn-s { height: 40px; padding: 0 20px; font-size: 0.875rem; }

.link-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; color: var(--navy);
}
.link-ghost .arr, .link-mono .arr { transition: transform var(--dur-ui) var(--ease); }
.link-ghost:hover { color: var(--blue); }
.link-ghost:hover .arr, .link-mono:hover .arr { transform: translateX(4px); }

.link-mono {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline;                                   /* v32: umbruchfähig — der Pfeil bleibt am letzten Wort (nbsp im Markup) */
  transition: color var(--dur-ui) var(--ease);
}
.link-mono .arr { display: inline-block; margin-left: 2px; }  /* + geschütztes Leerzeichen im Markup ≈ 8px */

/* ── 4 · Pixel-Bausteine ────────────────────────────────────── */
.fpx { width: 6px; height: 6px; background: var(--blue); display: inline-block; }
.cluster { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: 2px; }
.cluster i { width: 5px; height: 5px; display: inline-block; }
.cluster i:nth-child(1) { background: var(--magenta); }
.cluster i:nth-child(2) { background: var(--violet); transform: translateY(-4px); }
.cluster i:nth-child(3) { background: var(--violet); }
.cluster i:nth-child(4) { background: var(--blue); transform: translateY(3px); }
.cluster i:nth-child(5) { background: var(--blue); }

/* ── 5 · Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: all 250ms var(--ease);
  background: transparent;
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 48px);
  height: 92px; display: flex; align-items: center; gap: 48px;
  transition: height 250ms var(--ease);
}
.nav.condensed { top: 14px; left: 20px; right: 20px; }
.nav.condensed .nav-inner {
  max-width: 1180px; height: 58px;   /* kompakter beim Scrollen — verdeckt weniger Inhalt */
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(228, 231, 238, 0.9); border-radius: var(--r-pill);
  box-shadow: 0 8px 30px -12px rgba(10, 22, 51, 0.16);
  padding: 0 14px 0 26px;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.logo, .footer-logo {
  font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em;
  position: relative; white-space: nowrap;
}
.logo {
  z-index: 95;                          /* bleibt über dem Mobilmenü-Layer */
  display: inline-flex; align-items: center;
  padding: 6px 4px;                     /* mehr Luft ums Logo, größere Klickfläche */
  border-radius: 8px;
  transition: opacity var(--dur-ui) var(--ease);
}
.logo:hover { opacity: 0.82; }
/* Firmenlogo (Original-Vektor, gestochen scharf) — +20 % */
.logo img { display: block; height: 48px; width: auto; }
.nav.condensed .logo img { height: 34px; transition: height 250ms var(--ease); }
.footer-logo img { display: block; height: 50px; width: auto; }
.logo-i { position: relative; }
.logo-i::after {
  content: ""; position: absolute; top: 0.06em; left: 50%;
  width: 0.14em; height: 0.14em; transform: translateX(-50%);
  background: var(--blue);
}
.logo-i-light::after { background: var(--blue); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  font-size: 0.9375rem; font-weight: 500; color: var(--navy-60);
  position: relative; padding: 9px 14px; border-radius: 8px;
  transition: color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
.nav-links a:hover { color: var(--navy); background: rgba(10, 22, 51, 0.04); }
.nav-links a[aria-current="page"] { color: var(--navy); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
  background: var(--blue); border-radius: 2px;
}
/* Header-CTA: etwas präsenter als der Standard-btn-s, mit Abstand zu den Links */
.nav-cta { margin-left: 20px; height: 44px; padding: 0 22px; font-size: 0.9375rem; }
.nav.condensed .nav-cta { height: 36px; padding: 0 18px; }
.nav-cta-mobile { display: none; }
.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; margin-left: auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.burger span { width: 22px; height: 1.5px; background: var(--navy); transition: transform var(--dur-ui) var(--ease); display: block; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ── 6 · Hero — Empfang & Fertigung ─────────────────────────── */
.hero { padding: clamp(104px, 11vh, 132px) 0 clamp(18px, 2.5vw, 34px); overflow-x: clip; }
.hero-inner {
  max-width: var(--container-wide); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.hero-copy h1 { margin: 24px 0 24px; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
/* v29 · Disziplin-Leiste: drei Positionen auf der Hairline — der aktive Pixel benennt, was die Bühne zeigt */
/* Leistungszeile unter dem Hero (nur noch auf webdesign.html).
   Die Trennlinie wurde früher per JS „gezeichnet" — die Animation gehörte
   zum entfernten Hero-Film und lief auf dieser Seite ohnehin nie.
   Sie steht jetzt einfach da. */
.hero-tour {
  margin-top: 34px; padding-top: 14px; max-width: 340px;
  position: relative; color: var(--navy-40); font-size: 0.6875rem;
  border-top: 1px solid var(--hairline);
}

.hero-disciplines {
  max-width: none; display: flex; flex-wrap: wrap; gap: 10px 24px;
  color: var(--navy-60); font-size: 0.75rem;
}
.hero-disciplines a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; margin: -12px 0; transition: color var(--dur-ui) var(--ease); }
.hero-disciplines .fpx { width: 5px; height: 5px; background: var(--navy-15); }
.hero-disciplines .fpx.fpx-on { background: var(--blue); }
.hero-disciplines a:hover, .hero-disciplines a[aria-current] { color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
}

/* ── Schwelle — der Übergang vom Empfang in den Rundgang ──────
   Ein ruhiger Manifest-Moment: ein Gedanke, viel Luft, kein Bild.
   Zentriert als bewusster Kontrapunkt zum asymmetrischen Hero. */
.threshold { padding: clamp(30px, 4vw, 56px) 0 0; text-align: center; }
.threshold .container { max-width: 860px; }
.threshold-marker { color: var(--navy-40); margin-bottom: 28px; }
.threshold-statement {
  font-size: clamp(1.55rem, 2.6vw + 0.6rem, 2.6rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.018em;
  color: var(--navy-60); text-wrap: balance; margin: 0 auto; max-width: 24ch;
}
.th-emph { display: block; margin-top: 0.28em; color: var(--navy); font-weight: 600; }
.threshold-lead {
  color: var(--navy-60); font-size: clamp(1rem, 1.2vw, 1.125rem);
  margin: 24px auto 0; max-width: 46ch;
}
/* feine vertikale Geste, die das Auge in den Rundgang führt */
.threshold-descent {
  margin: clamp(24px, 3vw, 40px) auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.td-line {
  width: 1px; height: clamp(40px, 5vw, 58px);
  background: linear-gradient(var(--hairline), var(--navy-15));
  transform: scaleY(0); transform-origin: top;
  transition: transform 800ms var(--ease); transition-delay: 200ms;
}
.threshold-descent.in .td-line { transform: scaleY(1); }
.td-px { width: 6px; height: 6px; background: var(--blue); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .td-line { transform: scaleY(1); } }

/* erste Station: knapperer Einstieg, da die Schwelle bereits überleitet */
.station-first { padding-top: clamp(28px, 3.5vw, 48px); }

/* Lichtkegel auf der Hero-Bühne (vom neuen Werkbank-Hero verwendet) */
.glow {
  position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side at 65% 40%,
      rgba(123, 59, 242, 0.30), rgba(232, 44, 143, 0.15) 42%,
      rgba(45, 91, 255, 0.12) 62%, transparent 80%);
  opacity: 0.55;
}


/* ── 7 · Stationen (allgemein) ──────────────────────────────── */
/* ── Räume statt Flur: jede Station hat ihren Flächencharakter ── */
.station { padding: var(--sp-l) 0; }
#warum { background: var(--surface); }
#unterschied { background: var(--surface-blue); }
#unterschied .panel { background: transparent; padding: 0; border-radius: 0; }
#fertiger { background: var(--surface); }

/* ── v29 · Startseite „Drei Disziplinen, ein Haus" (hp-) ──────── */
.hp-leistungen { background: var(--surface); }
.hp-disciplines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.hp-discipline {
  min-width: 0;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-m);
  padding: 28px 28px 24px; box-shadow: var(--shadow-rest);
  display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 110px;
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.hp-discipline:has(.link-ghost:hover), .hp-discipline:focus-within { border-color: rgba(10, 22, 51, 0.22); box-shadow: var(--shadow-float); }
.hp-discipline .path-chip { align-self: flex-start; }
.hp-discipline .path-chip .fpx { width: 5px; height: 5px; background: var(--navy-15); transition: background 120ms steps(1); }
.hp-discipline:has(.link-ghost:hover) .path-chip .fpx, .hp-discipline:focus-within .path-chip .fpx { background: var(--blue); }
.hp-discipline h3 { margin-top: 6px; }
.hp-discipline > p { color: var(--navy-60); font-size: 0.9375rem; }
.hp-proofs { margin-top: 4px; }
.hp-proofs li { padding: 8px 0; border-top: 1px solid var(--hairline); display: flex; gap: 10px; align-items: baseline; }
.hp-proofs li::before { content: ""; width: 4px; height: 4px; background: var(--navy-15); flex: none; transform: translateY(-2px); }
.hp-discipline .link-ghost { margin-top: auto; padding-top: 12px; font-size: 0.9375rem; }
.hp-clasp {
  margin-top: var(--sp-m); background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-m); padding: 24px 28px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
  color: var(--navy-60); font-size: 0.9375rem;
}
.hp-clasp > span:not(.mono-label) { flex: 1 1 40ch; }
.hp-clasp .link-ghost { font-size: 0.9375rem; }
.hp-calc-scope { font-size: 0.9375rem; }
.hp-calc-scope .link-ghost { font-size: inherit; }
.hp-usecases-out { text-align: center; }
@media (max-width: 900px) { .hp-disciplines { grid-template-columns: 1fr; } }

/* ── v31 · iPhone-Mockup — EIN Bauteil für alle Seiten (Startseite + webdesign.html) ──
   Foto-Rahmen assets/refs/iphone-frame.webp (1000×2075, Display transparent ausgestanzt,
   Dynamic Island opak im Foto). Das Display ist ein absolut positionierter Ausschnitt an der
   vermessenen Aussparung (left 2,4 % · top 0,771 % · 95,3 × 98,458 %) und wird zusätzlich mit
   der Alpha-Maske der Aussparung beschnitten (iphone-screen-mask.webp) — nichts ragt über den
   Displayrand. Statusleiste/Island werden NICHT nachgebaut: unter der Island liegt, wie bei iOS,
   die weichgezeichnete Fortsetzung des Seiteninhalts (::before aus --shot), der Screenshot
   beginnt 14,7 % der Displaybreite tiefer (59 pt von 402 pt beim iPhone 16 Pro).
   Pro Instanz: style="--shot:url(…); --shot-bg:#…" am .iphone-screen. */
.iphone {
  display: block; position: relative; width: 100%; max-width: 100%; aspect-ratio: 1000 / 2075;
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; color: inherit;
  filter: drop-shadow(0 28px 46px rgba(10, 22, 51, 0.22)) drop-shadow(0 3px 8px rgba(10, 22, 51, 0.10));
}
.iphone-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  pointer-events: none; user-select: none; border-radius: 0;
}
.iphone-screen {
  display: block; position: absolute; left: 2.4%; top: 0.771%; width: 95.3%; height: 98.458%;
  overflow: hidden; z-index: 1; background: var(--shot-bg, #0a0a0b);
  border-radius: 15.7% / 7.34%;                                   /* Fallback ohne mask-image */
  -webkit-mask-image: url("assets/refs/iphone-screen-mask.webp"); mask-image: url("assets/refs/iphone-screen-mask.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  container-type: size;
}
.iphone-screen::before {                                          /* iOS: Statusleiste = frosted Seiteninhalt */
  content: ""; position: absolute; left: -16px; right: -16px; top: -16px; height: calc(14.7cqw + 32px); z-index: 0;
  background: var(--shot) center top / 100% auto no-repeat; filter: blur(14px) saturate(1.15); opacity: 0.92;
}
.iphone-screen::after {                                           /* …und bleibt beim Durchscrollen frosted ÜBER dem Inhalt */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14.7cqw; z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
}
.iphone-screen img, .iphone-screen picture { position: relative; z-index: 1; }
.iphone-screen img { display: block; width: 100%; height: auto; border-radius: 0; margin-top: 14.7%; }
.iphone-screen picture img { margin-top: 0; }
.iphone-screen picture { display: block; margin-top: 14.7%; }

/* ── v46 · Hero „Die Werkbank" ──────────────────────────────────
   Links die Aussage, rechts zwei echte Websites auf einer Navy-Bühne.
   Die Reiter schalten beide Bilder, die Adresszeile und den Lösungssatz um.
   Das Browserfenster ist hier eigenständig definiert, weil die Startseite
   webdesign.css nicht lädt. */
.wb-hero { padding: clamp(104px, 11vh, 132px) 0 clamp(18px, 2.5vw, 34px); overflow-x: clip; }
/* Die DOM-Reihenfolge ist die Lesereihenfolge am Telefon:
   Kopf (Label + Überschrift) → Bühne → Fuß (Text, Preise, Schaltflächen).
   Auf dem Desktop stellt das Raster die Bühne rechts daneben, ohne an der
   Reihenfolge zu drehen — so stimmen Tab-Weg und Blickfolge in jeder Breite.
   Kopf und Fuß sind je EIN Raster-Element: Die Bühne ist höher als der Text,
   und ein Raster verteilt diese Mehrhöhe auf alle überspannten Zeilen. Bei
   fünf Einzelzeilen riss das den Text auseinander (gemessen 101 px zwischen
   Überschrift und Fließtext); bei zweien entsteht genau eine Fuge in der
   Mitte, und die ist der gesetzte Zeilenabstand. */
.wb-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto;
  gap: clamp(16px, 1.8vw, 26px) clamp(32px, 4vw, 72px);
  max-width: var(--container-wide); margin: 0 auto; padding: 0 24px;
}
.wb-kopf  { grid-column: 1; grid-row: 1; align-self: end; }
.wb-fuss  { grid-column: 1; grid-row: 2; align-self: start; }
.wb-stage { grid-column: 2; grid-row: 1 / 3; align-self: center; }

.wb-h1 { font-size: clamp(2.1rem, 3.1vw + 0.4rem, 3.3rem); line-height: 1.04; letter-spacing: -0.025em; }
.wb-lead { color: var(--navy-60); font-size: 1.0625rem; margin-top: 18px; max-width: 46ch; }

.wb-preise {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.wb-preise span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-60);
}
.wb-preise i { width: 5px; height: 5px; background: var(--navy-15); }
.wb-preise span:first-child i { background: var(--blue); }
.wb-actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 28px; }

/* Bühne */
.wb-stage {
  position: relative; background: var(--navy); border-radius: var(--r-l);
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0;
  overflow: hidden; isolation: isolate;
}
.wb-stage::before {
  content: ""; position: absolute; left: 50%; top: -30%; width: 110%; height: 120%;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(123, 59, 242, 0.34), rgba(232, 44, 143, 0.16) 45%,
                              rgba(45, 91, 255, 0.14) 66%, transparent 82%);
}
.wb-buehne { position: relative; z-index: 1; padding-bottom: 11%; }

.wb-desk {
  display: block; border-radius: var(--r-m); overflow: hidden; background: #0d1117;
  transition: transform 0.5s var(--ease);
}
.wb-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--hairline);
}
.wb-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-15); flex: none; }
.wb-url {
  margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.04em;
  text-transform: lowercase; color: var(--navy-40);
}
.wb-desk-body {
  /* Feste Bühnenhöhe: die beiden Aufnahmen haben leicht verschiedene
     Seitenverhältnisse (1600×1000 und 2000×1173). Ohne diese Vorgabe stauchte
     sich die Bühne beim Umschalten und die Seite sprang um bis zu 35 px. */
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
}
.wb-desk-body > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wb-desk img { display: block; width: 100%; height: auto; transition: opacity 0.28s var(--ease); }

.wb-phone { position: absolute; right: 2%; bottom: 0; width: clamp(104px, 15%, 158px); z-index: 2; }
.wb-phone img.wb-shot-m { transition: opacity 0.28s var(--ease); }
.is-swap { opacity: 0 !important; }

/* Reiterleiste */
.wb-tabs {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px;
  margin: 20px 0 0; padding: 0 0 clamp(20px, 2.4vw, 32px);
}
.wb-tab {
  appearance: none; background: none; border: 0; border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.wb-tab:hover { color: #fff; }
.wb-tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.wb-tab:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }

.wb-loest {
  /* Platz für zwei Zeilen reservieren (am Telefon vier): beide Sätze sind
     etwa gleich lang, diese Vorgabe hält die Bühne auch dann ruhig, wenn
     später ein längerer Text dazukommt. */
  min-height: calc(2 * 1.45em);
  position: relative; z-index: 1; margin: 0 0 10px;
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  color: #fff; font-size: 1rem; line-height: 1.45; max-width: 60ch;
}
.wb-loest-label {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8fb4ff; border: 1px solid rgba(143, 180, 255, 0.35); border-radius: var(--r-pill); padding: 4px 10px;
}
.wb-cap {
  position: relative; z-index: 1; margin: 0; padding: 0 0 clamp(22px, 2.6vw, 34px);
  color: rgba(255, 255, 255, 0.62); font-size: 0.8125rem; max-width: 58ch;
}
.wb-cap b { color: #fff; font-weight: 500; }

@media (max-width: 1000px) {
  .wb-phone { width: 22%; }

  /* Eine Spalte: alles läuft in DOM-Reihenfolge, die Bühne steht damit
     von selbst zwischen Überschrift und Text — im ersten Bildschirm. */
  .wb-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .wb-kopf, .wb-stage, .wb-fuss { grid-column: 1; grid-row: auto; align-self: auto; }
  .wb-kopf .wb-h1 { margin: 10px 0 0; }
  .wb-stage { margin: 10px 0 6px; }
  .wb-fuss .wb-lead { margin-top: 0; }
  .hero-inner.wb-grid { gap: 18px; }
}
@media (max-width: 620px) {
  .wb-loest { min-height: 7.8em; }   /* gemessen: der längere der beiden Sätze braucht 123 px */
  /* Auf schmalem Raum steht das Telefon unter dem Fenster statt davor —
     bei 15 % Breite wäre es 56 px und nicht mehr erkennbar. */
  .wb-buehne { padding-bottom: 0; }
  .wb-phone { position: relative; right: auto; bottom: auto; width: 46%; margin: -16% 0 0 auto; display: block; }
  .wb-preise { gap: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-desk, .wb-desk img, .wb-phone img { transition: none; }
}

/* Preisstufen auf der Webdesign-Seite — knapper als auf der Startseite,
   der Besucher ist hier schon im Thema. */
.wd-preis-liste { margin-top: clamp(26px, 3vw, 40px); }
.wd-preis-liste > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--hairline);
}
.wd-preis-liste > div:last-child { border-bottom: 1px solid var(--hairline); }
.wd-preis-liste dt { font-size: 1.0625rem; font-weight: 500; }
.wd-preis-liste dd {
  margin: 0; font-family: var(--font-mono); font-size: 0.8125rem;
  letter-spacing: 0.04em; color: var(--navy); white-space: nowrap;
}
.wd-preis-liste p { grid-column: 1 / -1; margin: 0; color: var(--navy-60); font-size: 0.9375rem; max-width: 56ch; }

/* ── v41 · Referenzen (#referenzen): zwei echte Websites direkt nach dem Hero ──
   Webdesign ist der häufigste Besuchsgrund — der Beweis steht deshalb oben,
   nicht erst bei 75 % Scrolltiefe. Browserfenster, iPhone liegt davor. */
.hp-referenzen { padding-top: clamp(40px, 5vw, 72px); }
.hp-ref-kopf {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
  padding-bottom: clamp(28px, 3vw, 44px);
}
.hp-ref-lead { color: var(--navy-60); max-width: 48ch; }

.hp-ref-paar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
}
.hp-ref-karte { display: flex; flex-direction: column; min-width: 0; }

/* Browserfenster */
.hp-ref-bild {
  /* overflow bleibt sichtbar, damit das Telefon unten herausragen darf —
     gerundet und beschnitten wird stattdessen das Fenster selbst. */
  display: block; position: relative; overflow: visible;
  transition: transform var(--dur-ui) var(--ease), filter var(--dur-ui) var(--ease);
  filter: drop-shadow(0 10px 24px rgba(10, 22, 51, 0.10));
}
.hp-ref-fenster {
  display: block; border-radius: var(--r-m); overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline);
}
.hp-ref-bild:hover { transform: translateY(-3px); filter: drop-shadow(0 20px 40px rgba(10, 22, 51, 0.16)); }
.hp-ref-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--hairline);
}
.hp-ref-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-15); flex: none; }
.hp-ref-url {
  margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.04em;
  text-transform: lowercase; color: var(--navy-40);
}
.hp-ref-bild-body { display: block; position: relative; }
.hp-ref-bild-body > img { display: block; width: 100%; height: auto; }

/* Das Telefon liegt vorn rechts und ragt über den Fensterrand hinaus */
.hp-ref-phone-over {
  position: absolute; right: 4.5%; bottom: -7%; width: 21%;
  filter: drop-shadow(0 14px 26px rgba(10, 22, 51, 0.24)) drop-shadow(0 2px 6px rgba(10, 22, 51, 0.12));
}

.hp-ref-text { padding-top: clamp(30px, 3vw, 42px); }
/* Zwei Zeilen Platz, damit die Überschriften beider Karten bündig stehen,
   auch wenn eine Meta-Zeile umbricht. */
.hp-ref-meta { color: var(--navy-40); min-height: 2.8em; }
.hp-ref-text h3 { margin-top: 12px; font-size: clamp(1.25rem, 1.5vw, 1.5rem); letter-spacing: -0.015em; }
.hp-ref-text p { color: var(--navy-60); margin-top: 12px; max-width: 46ch; }
.hp-ref-text .link-ghost { margin-top: 16px; display: inline-flex; }

/* Der Satz, der zwischen Beweis und Preis steht */
.hp-ref-satz, .hp-preis-satz {
  margin-top: clamp(52px, 6vw, 88px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.5rem, 2.6vw + 0.4rem, 2.5rem);
  line-height: 1.12; letter-spacing: -0.025em; max-width: 20ch;
}
.hp-preis-satz { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: clamp(34px, 4vw, 56px); }

/* ── v41 · Preise (#preise) ─────────────────────────────────── */
.hp-preise { background: var(--surface); }
.hp-preis-kopf {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
  padding-bottom: clamp(30px, 3.4vw, 48px);
}
.hp-preis-lead { color: var(--navy-60); max-width: 48ch; }

.hp-preis-stufen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
}
.hp-stufe {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-m);
  padding: clamp(24px, 2.4vw, 34px);
}
.hp-stufe-mitte { border-color: var(--navy-15); box-shadow: 0 14px 34px rgba(10, 22, 51, 0.07); }
.hp-stufe-nr { color: var(--navy-40); }
.hp-stufe-preis {
  margin-top: 16px; font-size: 0.9375rem; color: var(--navy-40);
  display: flex; align-items: baseline; gap: 8px;
}
.hp-stufe-preis b {
  font-size: clamp(1.75rem, 2.2vw, 2.25rem); font-weight: 500;
  letter-spacing: -0.025em; color: var(--navy);
}
.hp-stufe-fuer {
  margin-top: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline);
  color: var(--navy-60); font-size: 0.9375rem;
}
.hp-stufe-liste { margin-top: 20px; display: grid; gap: 11px; }
.hp-stufe-liste li {
  position: relative; padding-left: 18px;
  font-size: 0.9375rem; line-height: 1.5; color: var(--navy-60);
}
.hp-stufe-liste li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; background: var(--navy-15);
}
.hp-stufe-mitte .hp-stufe-liste li::before { background: var(--blue); }

.hp-preis-fuss { margin-top: clamp(28px, 3vw, 44px); max-width: 68ch; }
.hp-preis-fuss p { color: var(--navy-60); font-size: 0.9375rem; }
.hp-preis-fuss p + p { margin-top: 10px; }
.hp-preis-fuss b { color: var(--navy); font-weight: 500; }

@media (max-width: 1000px) {
  .hp-ref-kopf, .hp-preis-kopf { grid-template-columns: 1fr; align-items: start; gap: 20px; }
}
/* Preisstufen bleiben bis 900 px dreispaltig — denselben Umbruchpunkt wie die
   Leistungskarten darunter. Vorher klappten sie schon bei 1000 px um, während
   die Karten direkt daneben noch nebeneinander standen. Der Vergleich der drei
   Stufen nebeneinander ist ihr eigentlicher Zweck. */
@media (max-width: 900px) {
  .hp-preis-stufen { grid-template-columns: 1fr; }
  /* Die Hervorhebung der Mittelstufe hing allein am Schatten — gestapelt trägt
     der nicht mehr. Deshalb ein kräftigerer Rahmen und ein farbiger Kopf. */
  .hp-stufe-mitte { box-shadow: none; border-color: var(--blue); border-width: 1.5px; }
  .hp-stufe-mitte .hp-stufe-nr { color: var(--blue); }
}
@media (max-width: 860px) {
  .hp-ref-paar { grid-template-columns: 1fr; gap: clamp(44px, 7vw, 64px); }
  .hp-ref-phone-over { width: 17%; bottom: -5%; }
}

.marker { margin-bottom: 20px; }
.marker-center { margin-bottom: 20px; text-align: center; }
.station-lead { color: var(--navy-60); margin-top: 18px; max-width: 52ch; }
.station-out { margin-top: 24px; }

/* Station 01 — Zitatliste */
.quote-list { margin-top: 28px; max-width: 840px; }
.quote-list li {
  padding: 22px 8px 22px 32px; border-top: 1px solid var(--hairline);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5;
  letter-spacing: -0.005em;
  position: relative;
}
.quote-list li::before { /* Funktionspixel als Bullet (UI-LIBRARY 2.16) */
  content: ""; position: absolute; left: 8px; top: 45px;
  width: 5px; height: 5px; background: var(--navy-15);
}
.quote-list li:last-child { border-bottom: 1px solid var(--hairline); }

/* Station 02 — Panel */
.panel {
  background: var(--surface); border-radius: var(--r-l);
  padding: clamp(32px, 5vw, 64px);
}
.panel h2 { max-width: 22ch; margin-top: 8px; }
.compare {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px);
  margin-top: 48px; align-items: start;
}
.compare-col > .mono-label { margin-bottom: 20px; }
.compare-col li { padding: 16px 0; display: flex; gap: 12px; align-items: baseline; }
.compare-std { color: var(--navy-60); padding-top: 16px; }
.compare-std li { border-top: 1px solid var(--hairline); font-size: 0.9375rem; }
.compare-craft { /* die Maß-Spalte ist selbst ein gefertigtes Objekt —
                    und das Licht liegt nur auf der Maßarbeit */
  background: var(--white); border-radius: var(--r-m);
  padding: 32px 32px 24px;
  box-shadow: var(--shadow-rest), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  position: relative; overflow: hidden;
}
.compare-craft::before { /* Lichtkante — der Verlaufs-Einsatz dieses Viewports */
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: var(--gradient); border-radius: 0 0 2px 2px; opacity: 0.85;
}
.compare-craft li { font-weight: 500; font-size: 1.0625rem; }
.compare-craft li + li { border-top: 1px solid var(--hairline); }
.fpx-li { width: 6px; height: 6px; background: var(--blue); flex-shrink: 0; transform: translateY(-2px); }
.panel-out { margin-top: 40px; color: var(--navy-60); font-size: 0.9375rem; }

/* Station 03 — Navy-Werkbank */
.navy-card {
  background: var(--navy); color: #fff; border-radius: var(--r-l);
  padding: clamp(32px, 5.5vw, 72px);
  position: relative; overflow: hidden;
}
.marker-light { color: rgba(255, 255, 255, 0.55); }
.navy-card h2 { margin-top: 18px; }
/* Kundenreferenzen — kompakte, zurückhaltende Vertrauenszeile.
   Nur Name und Ort; bewusst ohne Logos (keine freigegebenen Dateien
   im Projekt) und ohne Leistungen, Kennzahlen oder Zitate. */
.refs {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  font-size: 0.9375rem;
}
.refs-lead {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56); margin-right: 4px;
}
.refs-item { color: rgba(255, 255, 255, 0.88); }
.refs-sep { width: 4px; height: 4px; background: rgba(255, 255, 255, 0.28); flex: none; }
@media (max-width: 1100px) { .refs-sep { display: none; } .refs { gap: 6px 20px; } }   /* v33: Trennpixel nie allein am Zeilenende */
@media (max-width: 620px) { .refs-sep { display: none; } .refs { gap: 4px 12px; } }

.navy-card .link-mono { color: rgba(255, 255, 255, 0.7); }
.navy-card .link-mono:hover { color: #fff; }

/* Der Abschluss des Produktabschnitts: ein Satz zur Übertragbarkeit, keine
   ausgedachten Beispielprojekte mehr (die standen zwischen echten Produkten
   und sahen aus wie Referenzen). */
.usecases { margin-top: clamp(28px, 3.4vw, 48px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--hairline); }
.hp-andere { color: var(--navy-60); max-width: 72ch; margin: 0 auto; text-align: center; }

/* Station 04 — Fertigungslinie */
.path { margin-top: 36px; position: relative; }
.path::before { /* Der Weg führt ins Licht — die Linie mündet in der Übergabe
                   ins Spektrum (der Verlaufs-Einsatz dieses Viewports) */
  content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg,
      var(--hairline) 0%, var(--hairline) 68%,
      rgba(232, 44, 143, 0.5) 80%, rgba(123, 59, 242, 0.55) 90%,
      rgba(45, 91, 255, 0.7) 100%);
}
.path li { display: flex; gap: 32px; padding: 0 0 32px; position: relative; }
.path li:last-child { padding-bottom: 0; }
.path-chip {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  min-width: 56px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; position: relative; z-index: 1; flex-shrink: 0; box-shadow: var(--shadow-rest);
}
.fpx-on { width: 5px; height: 5px; }
.path h3 { margin-bottom: 6px; }
.path p { color: var(--navy-60); max-width: 52ch; }
.path p.path-result {
  max-width: 68ch;                                   /* ≈ Pixelbreite der 52ch-Absätze in der Mono-Schrift */
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-40) !important; margin-top: 8px;
}
.path li:last-child h3 { color: var(--navy); }
.path li:last-child .path-chip { border-color: var(--navy); }

/* Station 05 — Die Fertiger: kompaktes Band statt Textinsel */
.station-quiet { padding: var(--sp-m) 0; }
.quiet-text { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.6; margin-top: 18px; }

/* Station 06 — CTA */
.cta { padding: var(--sp-l) 0 var(--sp-l); text-align: center; }
.cta h2 { max-width: 30ch; margin: 0 auto; }
.cta-sub { color: var(--navy-60); max-width: 46ch; margin: 18px auto 0; }
.cta-actions {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 30px; flex-wrap: wrap;
}
.cta-actions .link-ghost { padding: 10px 6px; } /* komfortable Touch-Höhe neben dem Primär-Button */
.grad {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── 8 · Footer — Der Ausgang ───────────────────────────────── */
.footer { padding: 0 24px 24px; }
.footer-card {
  max-width: var(--container-wide); margin: 0 auto;
  background: var(--navy); color: #fff; border-radius: var(--r-l);
  padding: clamp(36px, 4vw, 60px) clamp(28px, 5vw, 64px) 28px;
  position: relative; overflow: hidden;
}
.kante { position: absolute; top: 0; left: 0; right: 0; height: 40px; pointer-events: none; }
.kante i { position: absolute; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.14); }
.footer-top { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.footer-claim { color: rgba(255, 255, 255, 0.55); }
.footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 40px;
}
.footer-cols .mono-label { color: rgba(255, 255, 255, 0.56); margin-bottom: 18px; }
.footer-cols a {
  display: block; padding: 10px 0; font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7); transition: color var(--dur-ui) var(--ease);
}
.footer-cols a:hover { color: #fff; }
.footer-note { color: rgba(255, 255, 255, 0.56); font-size: 0.875rem; margin-top: 8px; }
.footer-line {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.56);
}

/* ── 9 · Reveal-System ──────────────────────────────────────── */
/* Nur wenn JS läuft, wird versteckt — sonst steht der Text sofort da
   (ohne JS fügt niemand .in hinzu, der Inhalt bliebe unsichtbar). */
.js .reveal, .js .reveal-group > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-stage) var(--ease), transform var(--dur-stage) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .in.reveal, .js .reveal.in, .js .reveal-group.in > * { opacity: 1; transform: none; }

/* ── 10 · Responsive ────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero { padding-top: 140px; }
}
/* v32: Burger-Navigation bereits ab 1100px — darunter passen Logo, sechs Links und CTA nicht
   nebeneinander (bei 1024px brach „Über uns" um und die CTA-Pille wurde beschnitten). */
@media (max-width: 1100px) {
  .nav-links {
    position: fixed; inset: 0; z-index: 90;
    background: var(--white); flex-direction: column; justify-content: center;
    align-items: flex-start; padding: 0 32px; gap: 8px;
    /* visibility: hidden nimmt den Links auch den Tabstopp — mit opacity allein
       landete der Fokus im geschlossenen Menü, unsichtbar für den Nutzer.
       Beim ÖFFNEN muss visibility sofort umschalten (0s), sonst ist das Menü
       im Moment des focus() noch unerreichbar und der Fokus bleibt hängen.
       Beim SCHLIESSEN erst nach dem Ausblenden, damit man es noch verschwinden sieht. */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui);
  }
  .nav-links.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity var(--dur-ui) var(--ease), visibility 0s;
  }
  .nav-links a { font-size: 1.75rem; font-weight: 600; padding: 12px 0; }
  .nav-links a::after { display: none; }
  .nav-cta { display: none; }
  .nav-cta-mobile { display: inline-flex; margin-top: 32px; font-size: 1rem !important; height: 52px !important; padding: 0 28px !important; }
  .burger { display: flex; position: relative; z-index: 95; }
}
@media (max-width: 860px) {
  .nav.condensed { top: 8px; left: 12px; right: 12px; }


  .compare { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .cta-actions { flex-direction: column; gap: 20px; }
  .cta-actions .btn { width: 100%; max-width: 420px; }
}


/* ── v44 · Tap-Ziele auf Touchgeräten ───────────────────────────
   Textlinks waren 28 px hoch (Footer 14 px). Auf Zeigegeräten ohne
   Feinauflösung bekommen sie 44 px Trefferfläche, ohne dass sich das
   Satzbild ändert: die Fläche wächst über ein ::after, nicht über padding. */
@media (pointer: coarse) {
  .link-ghost, .link-mono, .footer-cols a, .footer-legal a, .recht a {
    position: relative;
  }
  .link-ghost::after, .link-mono::after, .footer-cols a::after, .footer-legal a::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 44px; min-height: 100%;
  }
}

/* ── 11 · Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal, .js .reveal-group > * { opacity: 1; transform: none; }
}

/* ── 12 · Rechtstexte (Impressum, Datenschutz) ──────────────── */
.recht-hero { padding: clamp(104px, 11vh, 132px) 0 0; }
.recht-hero h1 {
  margin-top: 14px;
  font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
  overflow-wrap: break-word;
  hyphens: auto;
}

.recht { padding-top: clamp(32px, 4vw, 56px); }
.recht h2 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin: clamp(34px, 3.4vw, 52px) 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.recht h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.recht p { color: var(--navy-60); max-width: 68ch; }
.recht p + p { margin-top: 12px; }
.recht strong { color: var(--navy); font-weight: 500; }
.recht a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.recht code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
}

.recht-adresse { font-style: normal; line-height: 1.75; color: var(--navy) !important; }

.recht-liste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin-top: 4px;
}
.recht-liste dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-40);
  padding-top: 3px;
}
.recht-liste dd { margin: 0; color: var(--navy); }

.recht-hinweis { font-size: 0.875rem; color: var(--navy-40) !important; margin-top: 12px; }

.recht-platzhalter {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  color: var(--magenta);
  background: rgba(232, 44, 143, 0.07);
  border: 1px dashed rgba(232, 44, 143, 0.4);
  border-radius: 4px;
  padding: 1px 6px;
}

.recht-stand {
  margin-top: clamp(40px, 4vw, 60px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-40) !important;
}

@media (max-width: 560px) {
  .recht-liste { grid-template-columns: 1fr; gap: 2px 0; }
  .recht-liste dd { margin-bottom: 12px; }
}