/* ==========================================================================
   zaviobuild – styles.css
   Monochrom, flach, strenges Raster. Keine Rundungen, Schatten, Verläufe.
   Mobile-first. Breakpoints: 640 / 768 / 1024 / 1280px
   (Media Queries können keine CSS-Variablen nutzen → Werte hier dokumentiert.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (selbst gehostet, woff2, SIL OFL 1.1 – Lizenzen in assets/fonts/)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Gambetta";
  src: url("assets/fonts/Gambetta-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Nur für das Logo */
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farben (Farbschema „ruhig & luxuriös“, 06.10.2026)
     Kontrast (WCAG), Weiß als Grund (Off-White #f6f4f1 nur noch Schrift auf Schwarz):
       black  #111111  17.1:1  → Text, Buttons, Linien       ✔ AAA
       muted  #595959   6.3:1  → Sekundärtext, Nummern       ✔ AA (auch auf dem Hintergrundbild ≥ 4,5:1)
       silver #a6a6a6   2.2:1  → NUR Linien/Rahmen/Dekoration, nie Text
       champagne #c8b68e 1.9:1 → NUR kleine Akzente (1px-Linien, Punkte, Hover-Unterstreichung,
                                Fokus-Ring), nie Text, nie große Flächen, nie auf Chrom/Silber-Elementen
     Off-White auf Schwarz 17.1:1 | Weiß (Karten/Felder) auf Schwarz 18.9:1  ✔ */
  --color-offwhite: #f6f4f1;
  --color-black: #111111;
  --color-silver: #a6a6a6;
  --color-champagne: #c8b68e;
  --color-white: #ffffff;           /* nur Karten, Formularfelder, Mockups (heben sich dezent vom Off-White ab) */

  --color-ink: var(--color-black);
  --color-ink-hover: #2b2b2b;
  --color-muted: #595959;           /* Sekundärtext (dunkleres Grau, da Silber für Text zu schwach ist) */
  --color-gray: var(--color-silver); /* nur dekorative Linien (Zahlenrad-Bogen), nie Text */
  --color-mist: #f4f5f6;            /* Füllung der Platzhalter-Kästen im Mockup */
  --color-mist-strong: #f0f0f0;     /* gewählte Pills */
  --color-hairline: #d5d9de;        /* feine Linie im Mockup */

  --color-bg: var(--color-white);         /* Seite, Header, Footer (wieder reines Weiß, 06.10.2026) */
  --color-surface: var(--color-white);    /* Karten, Felder, Mockups */
  --color-accent: var(--color-champagne);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-muted);
  --color-line: var(--color-ink);
  --color-btn-bg: var(--color-ink);
  --color-btn-bg-hover: var(--color-ink-hover);
  --color-btn-text: var(--color-offwhite);
  --color-focus: var(--color-ink);

  /* Schriften */
  --font-display: "Gambetta", Georgia, "Times New Roman", serif;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-logo: "Poppins", var(--font-body);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-display: 300;   /* Gambetta Light (einzige Schnittstärke) */

  /* Schriftgrößen (fluid, 375px → 1280px) */
  --fs-nav: 0.8125rem;                                 /* 13px – Nav, Labels */
  --fs-xs: 0.875rem;                                   /* 14px – Meta */
  --fs-base: 1rem;                                     /* 16px – Body-Minimum */
  --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);    /* 16 → 18px */
  --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* 18 → 22px */
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);        /* 24 → 32px */
  --fs-h2: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);      /* 40 → 72px */
  --fs-h2-xl: clamp(2.75rem, 1.6rem + 4.9vw, 5.5rem);  /* 44 → 88px */

  --lh-body: 1.6;
  --tracking-display: -0.01em;
  --tracking-hero: -0.02em;
  --tracking-label: 0.12em;  /* Versalien-Labels mit Abstand */

  --measure: 65ch;

  /* Abstände – 8px-Raster */
  --space-1: 0.5rem;   /*   8px */
  --space-2: 1rem;     /*  16px */
  --space-3: 1.5rem;   /*  24px */
  --space-4: 2rem;     /*  32px */
  --space-6: 3rem;     /*  48px */
  --space-8: 4rem;     /*  64px */
  --space-10: 5rem;    /*  80px */
  --space-15: 7.5rem;  /* 120px */

  /* Layout */
  --container-max: 1280px;
  --gutter: var(--space-2);        /* 16 → 24 → 32 → 40px */
  --header-h: 64px;                /* 80px ab 768px */
  --section-pad: var(--space-8);   /* 64 → 80 → 120px */
  --tap-min: 44px;

  /* Linien & Formen */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-line);
  --radius: 0;
  --radius-soft: 20px; /* weich gerundet: Buttons */

  /* Stahl-Rahmen als Verlauf (border-box), Füllung liegt als padding-box darüber.
     Kühles Blaugrau mit feinen, gebürsteten Streifen statt greller Reflexe.
     --steel: dekorativ (Buttons). */
  --steel: linear-gradient(160deg, #56606a 0%, #9aa5af 14%, #6c7681 27%, #c3cbd2 41%, #7d8791 55%, #b2bbc3 68%, #5f6973 82%, #a4aeb7 100%);

  /* Bewegung (nur transform/opacity) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-reveal: 600ms;

  /* Ebenen */
  --z-header: 100;
  --z-menu: 200;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--space-3);
  }
}

@media (min-width: 768px) {
  :root {
    --header-h: 80px;
    --gutter: var(--space-4);
    --section-pad: var(--space-10);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2.5rem;
    --section-pad: var(--space-15);
  }
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Champagner-Ring zwischen Element und schwarzem Fokusrahmen (der schwarze Rahmen sichert den Kontrast).
   Nicht auf Elementen mit Stahl-/Chrom-Rahmen (.btn, Felder, Pills, FAQ). */
a:not(.btn):focus-visible,
button:not(.btn):not(.faq__question):focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: calc(var(--z-menu) + 1);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   4. Buttons & Links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1.5px solid transparent;
  border-radius: var(--radius-soft);
  background:
    linear-gradient(var(--btn-fill, var(--color-btn-bg)), var(--btn-fill, var(--color-btn-bg))) padding-box,
    var(--steel) border-box;
  color: var(--color-btn-text);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}

.btn__icon {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover {
  --btn-fill: var(--color-btn-bg-hover);
}

/* Pfeil wandert nach rechts oben */
.btn:hover .btn__icon,
.btn:focus-visible .btn__icon {
  transform: translate(3px, -3px);
}

/* --------------------------------------------------------------------------
   5. Header & Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--tap-min);
  font-family: var(--font-logo);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  text-decoration: none;
}

/* Chrom-Z vor dem Schriftzug (nur im Header) */
.logo__mark {
  width: auto;
  height: 28px;
  margin-right: 10px;
}

@media (min-width: 768px) {
  .logo__mark {
    height: 30px;
  }
}

.nav__toggle {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Kind 1 ist das versteckte Label → Balken sind Kind 2 und 3 */
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  transform: translateY(4.25px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-4.25px) rotate(-45deg);
}

.nav__menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter) var(--space-6);
  overflow-y: auto;
  background: var(--color-bg);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.nav.is-open .nav__menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.nav__list,
.nav__legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list {
  border-top: var(--border);
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 64px;
  border-bottom: var(--border);
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-decoration: none;
}

.nav__legal {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.nav__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-muted);
}

body.menu-open {
  overflow: hidden;
}

/* Ab 768px: Logo links, rechts gruppiert Textlinks · andere Sprache · Button „Projekt anfragen“.
   In der Mitte bleibt freier Weißraum. Keine Linien zwischen den Menüpunkten. */
@media (min-width: 768px) {
  .nav {
    margin-left: auto;
  }

  .nav__toggle,
  .nav__legal,
  .lang-switch--bar {
    display: none;
  }

  .nav__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: 0;
    overflow: visible;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-top: 0;
  }

  .nav__link {
    flex-direction: column;
    justify-content: center;
    min-height: var(--tap-min);
    border-bottom: 0;
    color: var(--color-text-muted); /* #595959 auf Weiß 7:1 */
    font-family: var(--font-body);
    font-size: var(--fs-nav);
    font-weight: var(--fw-regular);
    letter-spacing: 0.08em;
    transition: color var(--dur-base) var(--ease-out);
  }

  /* Unsichtbare fette Kopie reserviert die Breite → aktiver Punkt verschiebt nichts */
  .nav__link::after {
    content: attr(data-label);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: var(--fw-medium);
  }

  .nav__link:hover,
  .nav__link[aria-current="page"] {
    color: var(--color-ink);
  }

  .nav__link[aria-current="page"] {
    font-weight: var(--fw-medium);
  }

  .nav__cta {
    margin: 0;
  }
}

/* Tablet (768–1023px): rechts wird es eng → nur das Chrom-Z als Logo, etwas kleinere Abstände */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header .logo__word {
    display: none;
  }

  .nav__menu,
  .nav__list {
    gap: var(--space-3);
  }
}

/* Scroll-Fortschritt: 1px-Linie an der Unterkante des Headers, volle Breite (script.js, Modul 2) */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(17, 17, 17, 0.15);
  pointer-events: none;
}

.scroll-progress__bar {
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* Sprachwahl: nur die jeweils andere Sprache, dezent (mobil neben dem Burger, ab 768px in der Navigation) */
.lang-switch {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.lang-switch:hover {
  color: var(--color-ink);
}

.lang-switch--bar {
  margin-left: auto;
  margin-right: var(--space-1);
}

.lang-switch--nav {
  display: none;
}

@media (min-width: 768px) {
  .lang-switch--nav {
    display: inline-flex;
    min-width: 32px;
  }

  .lang-switch--bar {
    display: none;
  }
}

/* Mobil: Button „Projekt anfragen“ unten im Menü, volle Breite */
@media (max-width: 767px) {
  .nav__cta {
    width: 100%;
    margin-top: var(--space-4);
  }

  .nav__legal {
    margin-top: auto;
    padding-top: var(--space-6);
  }

  .nav__menu {
    justify-content: flex-start;
  }
}

/* Logo: Chrom-Z + Schriftzug; beim Scrollen gleitet der Schriftzug ins Z */
.logo {
  position: relative;
  z-index: 2;
}

.logo__mark {
  position: relative;
  z-index: 2;
}

.logo__word {
  position: relative;
  display: inline-flex;
}

/* Weißer Grund hinter dem Schriftzug deckt den Linienanfang ab */
.logo__word::before {
  content: "";
  position: absolute;
  inset: -6px 0;
  z-index: -1;
  background: var(--color-bg);
  transition: opacity 200ms var(--ease-out) 250ms;
}

.logo__word > span {
  display: inline-block;
  transition:
    transform 450ms var(--ease-out),
    opacity 350ms var(--ease-out);
  /* Ausfahren: von links nach rechts */
  transition-delay: calc(var(--i) * 22ms);
}

.site-header.is-compact .logo__word > span {
  opacity: 0;
  /* jeder Buchstabe gleitet ungefähr bis ans Z */
  transform: translateX(calc(-0.58em * (var(--i) + 1)));
  /* Einfahren: von rechts nach links */
  transition-delay: calc((10 - var(--i)) * 22ms);
}

/* ™ hinter dem Schriftzug: klein, hochgestellt, grau */
.logo__tm {
  position: relative;
  top: -0.75em;
  margin-left: 1px;
  color: var(--color-text-muted);
  font-size: 0.35em;
  line-height: 1;
}

.site-header.is-compact .logo__word::before {
  opacity: 0;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .logo__word > span,
  .site-header.is-compact .logo__word > span {
    transform: none;
    transition: opacity 250ms linear;
    transition-delay: 0ms;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* clip statt hidden: gedrehtes Objekt erzeugt kein horizontales Scrollen */
.hero {
  overflow-x: clip;
}

.hero__inner {
  --hero-gap: var(--space-4);
  /* Höhe der Tagline-Zeile inkl. Abstand zur Headline (1.5rem + 0.75rem) */
  --hero-tagline: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
  min-height: calc(90svh - var(--header-h));
  padding-top: var(--space-3);
  padding-bottom: var(--section-pad);
  container-type: inline-size;
}

/* Tagline „built to be seen.“ – klein, direkt über der Wortmarke */
.hero__tagline {
  margin-bottom: calc(0.75rem - var(--hero-gap));
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.5rem;
  letter-spacing: 0.01em;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: 1;
}

/* Wortmarke füllt die Containerbreite exakt (cqi = 1 % der Containerbreite).
   Kalibriert per Messung (canvas measureText): sichtbare Breite von „ZAVIOBUILD“ (Gambetta
   Light, Tracking -0.02em) ≈ 5.37em → 100 / 5.37 ≈ 18.6, mit Sicherheitsabstand 18.2 (sonst schneidet overflow:hidden das „D“ an).
   margin-left gleicht die linke Vorbreite des „Z“ aus → bündig links. */
.hero__word {
  display: flex;
  overflow: hidden;
  margin-left: -0.035em;
  font-size: 19vw; /* Fallback ohne Container-Query-Einheiten */
  font-size: calc(var(--hero-fit) * 1cqi);
  line-height: 0.8;
  letter-spacing: var(--tracking-hero);
  text-transform: uppercase;
  --hero-fit: 18.2;
}

.hero__word > span {
  display: block;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* „DACH-Raum“ nicht am Bindestrich umbrechen */
.nowrap {
  white-space: nowrap;
}

.hero__lead {
  max-width: 60ch;
  font-size: var(--fs-md);
}

/* Schwebendes Chrome-Objekt
   Mobil: unter der Headline, leicht überlappend.
   Ab 768px: rechts, überlappt den unteren Teil von „ZAVIOBUILD“. */
.hero__object {
  position: relative;
  z-index: 1;
  width: 94%;
  margin: -4cqi 0 0 auto;
  pointer-events: none;
  will-change: transform;
}

.hero__object-img {
  width: 100%;
  height: auto;
}

/* Mobil (< 768px): Reihenfolge Tagline → Headline → Intro → Button → Objekt.
   Objekt groß (fast volle Breite, rechts leicht angeschnitten) und hinter allen
   Texten (z-index -1), damit es beim Hineingleiten in „Über mich“ nie Text verdeckt. */
@media (max-width: 767px) {
  .hero__object {
    order: 1;
    z-index: -1;
    width: calc(100% + var(--gutter) + 8%);
    margin: var(--space-2) calc(-1 * (var(--gutter) + 8%)) 0 0;
  }

  /* Etwas Luft über der ersten Section nach dem Hero, damit das Objekt sichtbar über die
     Sektionsgrenze gleiten kann, bevor Text kommt */
  .hero + .section {
    padding-top: calc(var(--section-pad) + 8svh);
  }
}

@media (min-width: 768px) {
  .hero__inner {
    --hero-gap: var(--space-6);
    position: relative;
    padding-top: var(--space-4);
  }

  .hero__object {
    position: absolute;
    top: calc(var(--space-4) + var(--hero-tagline) + 11.5cqi);
    right: calc(var(--gutter) - 2cqi);
    width: 56cqi;
    margin: 0;
  }

  /* Text links, Button darunter – rechts liegt das Objekt */
  .hero__intro {
    max-width: 42cqi;
    min-height: calc(23.5cqi - 3rem);
  }

  .hero__lead {
    max-width: none;
  }
}

/* Ab 1024px: Objekt größer und tiefer, Text schmaler */
@media (min-width: 1024px) {
  .hero__object {
    top: calc(var(--space-4) + var(--hero-tagline) + 14.5cqi);
    right: calc(var(--gutter) - 4cqi);
    width: 63cqi;
  }

  .hero__intro {
    max-width: 36cqi;
    min-height: calc(31.5cqi - 3rem);
  }
}

/* Beim Scrollen dreht sich das Objekt und sinkt um --hero-drop Richtung
   „Über mich“, bis es aus dem Bild ist (script.js). Das Intro reserviert
   die Höhe von Objekt + Absinkweg → kein Überlappen mit „Über mich“.
   Nicht auf Mobile und nicht bei reduzierter Bewegung. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  :root {
    --hero-drop: 22svh;
  }

  .hero__inner {
    padding-bottom: var(--space-6);
  }

  .hero__intro {
    min-height: calc(27.5cqi + var(--hero-drop) - 3rem);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero__intro {
    min-height: calc(34.5cqi + var(--hero-drop) - 3rem);
  }
}

/* Einblendung beim Laden: Tagline, Buchstaben aus der Maske, Intro, Objekt */
@media (prefers-reduced-motion: no-preference) {
  .hero__tagline {
    animation: fade-up 700ms var(--ease-out) 100ms both;
  }

  .hero__word > span {
    animation: letter-up 800ms var(--ease-out) both;
    animation-delay: calc(var(--i) * 35ms + 80ms);
  }

  .hero__intro {
    animation: fade-up 800ms var(--ease-out) 450ms both;
  }

  .hero__object-img {
    animation: object-in 1200ms var(--ease-out) 250ms both;
  }
}

@keyframes object-in {
  from { opacity: 0; transform: translateY(32px) rotate(-6deg) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes letter-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   7. Sektionen – gemeinsame Bausteine
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-pad);
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.section-title--xl {
  font-size: var(--fs-h2-xl);
  line-height: 0.92;
}

.section-intro {
  max-width: 52ch;
  margin-top: var(--space-3);
}

.section-head {
  margin-bottom: var(--space-6);
}

/* Button der Kopfzeile verschwindet, sobald er unter den Header läuft (script.js, Modul 7) –
   sonst bleibt beim Scrollen ein dunkler Streifen an der Header-Kante stehen. */
.section-head .btn {
  transition:
    background-color var(--dur-base) var(--ease-out),
    opacity 120ms linear;
}

.section-head .btn.is-under-header {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .section-head .btn {
    transition: background-color var(--dur-base) var(--ease-out);
  }
}

/* Überschrift links, Button rechts */
.section-head--row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .section-head--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .section-head {
    margin-bottom: var(--space-8);
  }
}

/* Chrom-Icons (dekorativ): immer 1em hoch, in fester Box, damit sie bei unterschiedlichem
   Rand der Quellbilder auf einer Linie liegen */
.icon-inline {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  object-fit: contain;
}

/* Chrom-Link neben „Projekt anfragen“: so hoch wie die Versalien (Cap-Höhe ≈ 0,71em),
   schwebt langsam (nur transform), beim Hover minimal größer */
.title-nowrap {
  white-space: nowrap;
}

.title-icon {
  display: inline-block;
  height: 0.71em;
  margin-left: 0.22em;
  vertical-align: baseline;
  will-change: transform;
  animation: title-icon-float 4.6s ease-in-out infinite alternate;
}

.title-icon img {
  display: block;
  width: auto;
  height: 100%;
  transform-origin: center;
  transition: transform 140ms ease-out;
}

.title-icon:hover img {
  transform: scale(1.05);
}

@keyframes title-icon-float {
  from { transform: translateY(-3.5px) rotate(-3deg); }
  to   { transform: translateY(3.5px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .title-icon {
    animation: none;
    will-change: auto;
  }

  .title-icon img {
    transition: none;
  }
}

/* Zweispaltig wie „What we work with“ */
.split {
  display: grid;
  gap: var(--space-6);
}

.split__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.split__aside .eyebrow {
  margin-bottom: 0;
}

/* Große Headline in der Spalte: längste Zeile „NEUEN WEBSEITE“ ≈ 7.1em
   → max. 100 / 7.1 ≈ 14 % der Spaltenbreite, damit es bei 3 Zeilen bleibt */
.split__aside {
  container-type: inline-size;
}

.split__aside .section-title--xl {
  font-size: min(var(--fs-h2-xl), 13.6cqi);
}

.split__text {
  max-width: 36ch;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .section-title--xl .line {
    display: block;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   8. Über mich
   -------------------------------------------------------------------------- */
/* Zweispaltig: links Headline + Texte, rechts „Meine Werte“ als Liste mit Linie und Punkt (keine Boxen).
   Ab 768px (und wenn alles in den Bildschirm passt) wird die Section beim Scrollen kurz festgesetzt:
   sticky Bühne + Spacer (--about-len, ≈ 1 Bildschirmhöhe → Section ≈ 200svh). Keine Scroll-Sperre. */
.about {
  --about-len: 100svh;
}

.about__pin {
  position: relative;
}

.about__grid {
  display: grid;
  gap: var(--space-8);
}

.about__left > * + * {
  margin-top: var(--space-3);
}

.about__left .section-title {
  margin-top: 0;
}

.about__name {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.about__claim {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-1);
}

.about__text {
  max-width: 52ch;
  font-size: var(--fs-md);
}

/* Rechts */
.about__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.about__arrow {
  width: 14px;
  height: 14px;
  color: var(--color-accent); /* kleines Champagner-Detail */
  transform: rotate(135deg);  /* ↗ → ↓ */
}

.about__values {
  position: relative;
  padding-left: var(--space-6);
}

.about__list {
  position: relative; /* Bezug für die Messung der Wert-Positionen (offsetTop) */
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-value__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

.about-value p {
  max-width: 40ch;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

/* Dünne senkrechte Linie (Silber) mit Champagner-Füllung und kleinem Punkt */
.about__track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
}

.about__line,
.about__fill {
  position: absolute;
  top: 0;
  bottom: 0;
}

.about__line {
  left: 4px;
  width: 1px;
  background: var(--color-silver);
}

.about__fill {
  left: 3.5px;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
}

/* Kleiner Punkt auf der Linie bei jedem Wert (Silber, wird Champagner sobald der große Punkt ihn erreicht hat) */
.about__tick {
  position: absolute;
  left: 1.5px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-silver);
  transition: background-color var(--dur-base) var(--ease-out);
}

.about__tick.is-reached {
  background: var(--color-accent);
}

.about__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  /* ohne JS / bei reduzierter Bewegung: Punkt auf Höhe des ersten Titels */
  transform: translate3d(0, 14px, 0);
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: var(--space-10);
    align-items: center;
  }
}

.about__spacer {
  display: none;
}

/* Festgesetzt (script.js setzt .is-pin): Bühne klebt unter dem Header */
.about.is-pin .about__stage {
  position: sticky;
  top: var(--header-h);
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
}

.about.is-pin .about__stage > .container {
  width: 100%;
}

.about.is-pin .about__spacer {
  display: block;
  height: var(--about-len);
}

/* Werte dimmen sich per Scroll (opacity setzt script.js) */
.about.is-scrub .about-value {
  will-change: opacity;
}

@media (max-width: 767px) {
  .about__values {
    padding-left: var(--space-4);
  }

  .about__list {
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   8b. Angebot: drei Bereiche (Signature-Hero, Webseite, Hosting & Wartung) + Wartungs-Vergleich
   Keine Boxen: dünne Linien, Titel in Gambetta. Champagner-Akzent der Section:
   feine Linie über jedem Angebot. Keine Preise – stattdessen „Lass uns kurz sprechen“.
   -------------------------------------------------------------------------- */
.offers {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

/* Nebeneinander: Titel, Texte, Listen und Links stehen über alle drei Spalten auf einer Höhe,
   auch wenn ein Titel umbricht (subgrid; ältere Browser zeigen sie einfach untereinander bündig) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    .offers > .offer {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

.offer {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-accent);
}

.offer__num {
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
}

.offer__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: var(--fw-display);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}

.offer__text {
  max-width: 46ch;
  margin-top: var(--space-2);
  font-size: var(--fs-md);
}

.offer__list {
  margin: var(--space-3) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.offer__list li {
  padding-block: 0.75rem;
  border-top: var(--border-width) solid var(--color-silver);
}

.offer__list li:last-child {
  border-bottom: var(--border-width) solid var(--color-silver);
}

/* „Lass uns kurz sprechen“: ruhiger Textlink mit Pfeil, Champagner-Unterstreichung beim Hover */
.offer__link,
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.offer > .offer__link {
  margin-top: auto;
  align-self: flex-start;
}

.offer__link .btn__icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.offer__link:hover,
.link-quiet:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
}

.offer__link:hover .btn__icon {
  transform: translate(3px, -3px);
}

/* Wartungs-Vergleich */
.care {
  margin-top: var(--space-10);
}

.care__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.care__caption {
  padding-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  text-align: left;
}

.care__table th,
.care__table td {
  padding: 0.875rem var(--space-1) 0.875rem 0;
  border-top: var(--border-width) solid var(--color-silver);
  text-align: left;
  vertical-align: baseline;
}

.care__table tr:last-child th,
.care__table tr:last-child td {
  border-bottom: var(--border-width) solid var(--color-silver);
}

.care__table thead th {
  border-top: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.care__table tbody th {
  font-weight: var(--fw-regular);
}

/* Leistungsspalte breiter, die zwei Pakete schmal daneben */
.care__table thead th:first-child {
  width: 46%;
}

.care__table td {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.care__check {
  width: 16px;
  height: 16px;
}

@media (min-width: 768px) {
  .care__table thead th:first-child {
    width: 50%;
  }

  .care__table td,
  .care__table tbody th {
    font-size: var(--fs-md);
  }
}

.care__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.care__note .offer__link {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   9. Nummerierte Zeilen (Ablauf)
   -------------------------------------------------------------------------- */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: var(--border);
}

.row__body {
  display: grid;
  gap: var(--space-1);
  max-width: 58ch;
}

.row__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-display);
  letter-spacing: 0.02em;
}

.row__num {
  padding-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}


@media (min-width: 768px) {
  .row {
    gap: var(--space-6);
    padding-block: var(--space-3) var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   9a. Ablauf: Intro + Zahlenrad
   Standard (ohne JS, mobil, reduzierte Bewegung): nummerierte Liste.
   .steps.is-wheel (script.js, ab 768px): Bühne bleibt stehen, Rad dreht mit.
   -------------------------------------------------------------------------- */
.ablauf-intro {
  display: grid;
  gap: var(--space-6);
}

.ablauf-intro__head {
  container-type: inline-size;
}

/* längste Zeile „NEUEN WEBSEITE“ ≈ 7.1em → max. 14 % der Spaltenbreite */
.ablauf-intro__head .section-title--xl {
  font-size: min(var(--fs-h2-xl), 13.6cqi);
}

.ablauf-intro__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.ablauf-folder {
  display: none;
}

.ablauf-intro__icon {
  width: clamp(120px, 11vw, 160px);
  height: auto;
  margin-top: var(--space-2);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ablauf-intro__icon {
    animation: float 6s ease-in-out infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (min-width: 1024px) {
  .ablauf-intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: end;
  }

  .ablauf-intro .section-title--xl .line {
    display: block;
    white-space: nowrap;
  }
}

/* Liste (Standard) */
.steps {
  margin-top: var(--space-8);
}

.steps__wheel,
.steps__status {
  display: none;
}

/* Rad-Modus */
.steps.is-wheel {
  --step-len: 45svh; /* Scrollweg pro Schritt – kürzer = schneller durch */
  --stage-offset: 0px; /* Abstand der festgesetzten Bühne unter dem Header (mobil > 0, siehe unten) */
  position: relative;
  height: calc(100svh - var(--stage-offset) + (var(--steps-n, 5) - 1) * var(--step-len) + var(--hold-len, 0px));
  margin-top: var(--space-6);
}

.steps.is-wheel .steps__stage {
  position: sticky;
  top: calc(var(--header-h) + var(--stage-offset));
  height: calc(100svh - var(--header-h) - var(--stage-offset));
  overflow: hidden;
}

.steps.is-wheel .steps__wheel {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.steps__circle {
  position: absolute;
  border: 1px solid var(--color-gray);
  border-radius: 50%;
}

.steps__marker {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  will-change: transform, opacity;
}

.steps__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent); /* Champagner-Akzent der Section (kleiner Punkt, dekorativ) */
}

.steps__num {
  margin-left: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(4rem, 1.5rem + 6vw, 8rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: -0.02em;
  transform-origin: 0 50%;
  will-change: transform;
}

.steps.is-wheel .steps__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  height: 100%;
}

.steps.is-wheel .steps__list {
  grid-column: 2;
  display: grid;
  border: 0;
}

.steps.is-wheel .row {
  grid-area: 1 / 1;
  align-self: center; /* jeder Text sitzt für sich mittig, auf einer Höhe mit der Nummer */
  display: block;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
  pointer-events: none;
}

.steps.is-wheel .row.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.steps.is-wheel .row__num {
  display: none;
}

.steps.is-wheel .row__body {
  gap: var(--space-2);
  max-width: 44ch;
}

.steps.is-wheel .row__title {
  font-size: var(--fs-h3);
  line-height: 1.15;
}

.steps.is-wheel .row__body p {
  font-size: var(--fs-md);
}

.steps.is-wheel .steps__status {
  display: block;
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
}

/* Handy: kompaktes Zahlenrad – Bogen oben links, darunter Titel + Beschreibung (immer sichtbar, kein Aufklappen) */
@media (max-width: 767px) {
  .steps.is-wheel {
    --step-len: 65svh; /* kürzer als eine Bildschirmhöhe pro Schritt */
    /* Rad setzt früher fest: Die Bühne bleibt ca. ein Viertel Bildschirm unter dem Header stehen
       (Einleitung mit „Projekt anfragen“ und Ordner läuft darüber normal weg, nicht festgesetzt).
       Die Bühne behält mind. 540px Höhe, damit Bogen, Text und Zähler „01 / 05“ ins Bild passen. */
    --stage-offset: clamp(0px, 100svh - var(--header-h) - 540px, 24svh);
  }

  /* Ordner steht im freien Streifen über der festgesetzten Bühne (Höhe = Streifen − 24px, max. 104px).
     Ersetzt hier das Ordner-Bild der Einleitung; er ist an den Header „geklebt“ (sticky, keine Scroll-Sperre). */
  .section--ablauf:has(.steps.is-wheel) .ablauf-intro__icon {
    display: none;
  }

  .section--ablauf:has(.steps.is-wheel) .ablauf-folder {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 16px);
    z-index: 2;
    height: clamp(0px, min(100svh - var(--header-h) - 540px, 24svh) - 24px, 104px);
    margin-top: var(--space-3);
    padding-inline: var(--gutter);
    pointer-events: none;
  }

  .ablauf-folder__img {
    display: block;
    width: auto;
    height: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ablauf-folder__img {
      animation: float 6s ease-in-out infinite;
    }
  }

  .steps.is-wheel .steps__content {
    display: block;
  }

  .steps.is-wheel .steps__list {
    position: absolute;
    /* auf hohen Handys weiter unten (weniger Leerraum), auf kleinen (375×667) wie bisher */
    top: clamp(59%, calc(59% + (100svh - 667px) * 0.075), 65%);
    left: var(--gutter);
    right: var(--gutter);
  }

  .steps.is-wheel .row__body {
    max-width: none;
    gap: 4px;
  }

  /* Textwechsel passend zur großen Nummer: weich einblenden + leicht hochgleiten (300ms) */
  .steps.is-wheel .row {
    align-self: start; /* Titel immer an derselben Stelle, unter der Nummer */
    transform: translateY(16px);
    transition:
      opacity 300ms var(--ease-out),
      transform 300ms var(--ease-out);
  }

  .steps.is-wheel .row.is-active {
    transform: none;
  }

  .steps.is-wheel .row__title {
    font-size: 1.375rem;
    line-height: 1.15;
  }

  .steps.is-wheel .row__body p {
    font-size: var(--fs-base);
    line-height: 1.55;
  }

  .steps.is-wheel .steps__status {
    bottom: var(--space-2);
  }

  .steps__num {
    font-size: 4.5rem; /* 72px aktiv, Nachbarn per scale kleiner */
  }
}

/* Kurzes Einrasten an den Hauptbereichen – der Browser hilft nur nach,
   wenn man ohnehin nah dran ist (proximity), Scrollen wird nie blockiert */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-snap-type: y proximity;
  }

  main > .section {
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   9b. Globaler Hintergrund
   Eine fixierte Ebene hinter allen Inhalten (z-index -1, liegt über dem
   Body-Weiß). Das Bild ist mindestens so hoch wie 1,35 Bildschirme, script.js
   schiebt es per translate3d über die Seitenlänge genau einmal durch.
   Sehr helle Deckkraft; Bild vorab aufgehellt (Schwarzpunkt 40), weichgezeichnet und mit Randverlauf,
   dazu ein weißer Verlauf oben/unten im Bildschirm → Text bleibt überall AA-lesbar.
   -------------------------------------------------------------------------- */
.site-bg {
  --bg-opacity: 0.2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;   /* große Viewport-Höhe: kein Springen, wenn die Safari-Leiste ein-/ausfährt */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.site-bg__img {
  display: block;
  width: 100%;
  /* volle Breite, Höhe proportional – auf schmalen/breiten Bildschirmen mind. 1,35 Bildschirmhöhen */
  height: max(calc(100vw * 1376 / 768), 135lvh);
  object-fit: cover;
  opacity: var(--bg-opacity);
  will-change: transform;
  /* Die weichen Ränder oben/unten (Verlauf zu Weiß) sind ins Bild eingebacken – keine mask-image
     auf der bewegten Ebene (teuer in Safari). */
}

.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.7) 100%
  );
}

/* --------------------------------------------------------------------------
   10. Projekte: große, ruhige Kacheln (Bild, Branche, Titel, „Demo ansehen“)
   Erzeugt vom Build aus src/projects.js + i18n (Videos: script.js, Modul 4c). Keine Rahmen-Boxen:
   Bild, darunter Text und eine dünne Linie. Champagner-Akzent der Section:
   Unterstreichung von „Demo ansehen“ beim Hover.
   -------------------------------------------------------------------------- */
.projects {
  display: grid;
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.work {
  display: grid;
  gap: var(--space-8);
}

.project__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.project__link:focus-visible {
  outline-offset: 6px;
}

.project__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1280 / 714; /* Format von Poster und Vorschau-Video */
  background: var(--color-mist);
}

/* Vorschau-Video liegt über dem Poster und blendet nur per opacity ein/aus (script.js, Modul 4c) */
/* „coming soon“-Kachel (noch keine Demo): dunkle Chrom-/Silberfläche, mittig der Schriftzug,
   darunter eine feine Champagner-Linie (auf Wunsch von Nelly, 13.10.2026 – Ausnahme von der
   Regel „kein Champagner auf Chrom“). Kein Link, kein Hover, nur ein sehr langsamer Glanz. */
.project--soon .project__link { cursor: default; }

.project--soon .project__media {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, #16181b 0%, #2c3036 24%, #1b1e22 46%, #3a3f46 63%, #1e2125 82%, #2a2e33 100%);
}

.project__soon-label {
  position: relative;
  padding-bottom: var(--space-2);
  color: #e7e4df;                 /* 11:1 auf der dunklen Fläche */
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: 0.02em;
}

.project__soon-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 1px;
  margin-left: -20px;
  background: var(--color-champagne);
  opacity: 0.8;
}

/* Glanz: ein schmaler, weicher Lichtstreif zieht sehr langsam über die Fläche (nur transform) */
.project__soon-shine {
  position: absolute;
  inset: -10% -40%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-60%);
  animation: soon-shine 9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  pointer-events: none;
}

@keyframes soon-shine {
  0% { transform: translateX(-60%); }
  55%, 100% { transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
  .project__soon-shine { animation: none; opacity: 0; }
}

.project__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease; /* langsam zurück zum Poster (FADE_MS in script.js) */
  pointer-events: none;
}

.project__video.is-playing {
  opacity: 1;
  transition-duration: 400ms; /* zügig ein */
}

.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  .project__link:hover .project__cta {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }

  .project__link:hover .project__cta .btn__icon {
    transform: translate(3px, -3px);
  }
}

.project__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-silver);
}

/* Ein Satz, was das Besondere ist */
.project__text {
  grid-column: 1 / -1;
  max-width: 60ch;
  color: var(--color-text-muted);
}

/* Große Kachel ganz oben (Signature-Hero): volle Breite, Video läuft automatisch */
@media (min-width: 1024px) {
  .project--featured .project__meta {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    column-gap: var(--space-6);
  }

  .project--featured .project__cat {
    grid-column: 1 / -1;
  }

  .project--featured .project__title {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--fs-h2);
    line-height: 1;
  }

  .project--featured .project__text {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    font-size: var(--fs-md);
  }

  .project--featured .project__cta {
    grid-column: 3;
    grid-row: 2;
  }
}

.project__cat {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.project__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}

.project__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.project__cta .btn__icon {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
}

.projects__fallback {
  margin-top: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .project__cta .btn__icon,
  .project__video {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   11. FAQ – schlichtes Akkordeon (vier Fragen): Nummer, Frage in Gambetta, Plus-Zeichen,
   dünne Champagner-Linien dazwischen (Champagner-Akzent der Section). Keine Rahmen-Boxen.
   Öffnen/Schließen: Höhe per grid-template-rows 0fr → 1fr (Ausnahme für Aufklapp-Höhe);
   ohne JS sind alle Antworten offen. script.js (Modul 5) setzt .is-enhanced / .is-open.
   -------------------------------------------------------------------------- */
.faq {
  margin: 0;
  padding: 0;
  border-bottom: var(--border-width) solid var(--color-accent);
}

.faq__item {
  border-top: var(--border-width) solid var(--color-accent);
}

.faq__heading {
  margin: 0;
  font: inherit;
}

.faq__question {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.faq__question:focus-visible {
  outline-offset: 2px;
}

.faq__num {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
}

.faq__text {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

/* Plus-Zeichen aus zwei Linien, dreht sich beim Öffnen zum × */
.faq__icon {
  position: relative;
  align-self: center;
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}

.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 450ms var(--ease-out),
    visibility 0s;
}

.faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__answer {
  max-width: 62ch;
  padding: 0 0 var(--space-4) calc(2.5rem + var(--space-2));
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* Mit JS: geschlossene Antworten einklappen (und für Screenreader/Tab unsichtbar machen) */
.faq.is-enhanced .faq__item:not(.is-open) .faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 450ms var(--ease-out),
    visibility 0s linear 450ms;
}

@media (max-width: 639px) {
  .faq__question {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: var(--space-1);
  }

  .faq__answer {
    padding-left: calc(2rem + var(--space-1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__panel,
  .faq.is-enhanced .faq__item:not(.is-open) .faq__panel,
  .faq__icon {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   12. Kontakt & Formular
   -------------------------------------------------------------------------- */
.contact__aside {
  gap: var(--space-4);
}

.contact__direct {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding-top: var(--space-3);
}

/* dünne Silberlinie über jedem Direktkontakt */
.contact__direct::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-silver);
}

.contact__label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.4em;
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contact__mail {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

/* Champagner-Akzent der Section: Unterstreichung beim Hover */
.contact__mail:hover {
  text-decoration-color: var(--color-accent);
}

.form {
  display: grid;
  gap: var(--space-4);
}

.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field__label {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Gruppen mit Pills als fieldset/legend (ohne Browser-Rahmen) */
fieldset.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend.field__label {
  padding: 0;
}

.field__hint {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Fehlermeldung je Feld (script.js setzt Text + hidden=false) */
.field__error {
  display: flex;
  gap: 0.5em;
  margin-top: var(--space-1);
  color: var(--color-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.field__error::before {
  content: "";
  flex: none;
  width: 12px;
  height: 1px;
  margin-top: 0.75em;
  background: var(--color-ink);
}

.field__error[hidden] {
  display: none;
}

/* Meldung zur Datenschutz-Checkbox direkt darunter (sonst läge der Formular-Abstand dazwischen) */
.checkbox + .field__error {
  margin-top: calc(-1 * var(--space-3));
  padding-left: 36px;
}

/* Rückruf-Wunsch: einzelne Pill (Checkbox) */
.pill--check {
  margin-bottom: var(--space-1);
}

/* Ruhige Felder: nur eine dünne Linie unten (Schwarz, damit die Feldgrenze ≥ 3:1 Kontrast hat), keine Box */
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-base); /* 16px verhindert Zoom auf iOS */
}

.field__input:focus-visible {
  outline-offset: 4px;
}

/* Browser-Autofill (Chrome/Safari färben Felder sonst farbig): ruhig in Weiß halten */
.field__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  -webkit-text-fill-color: var(--color-ink);
  caret-color: var(--color-ink);
}

.field__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.field__textarea {
  min-height: 160px;
  resize: vertical;
}

.field__select {
  padding-right: var(--space-4);
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23111111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 2px center;
  cursor: pointer;
}

/* Auswahl-Pills (Kontaktweg: Einfachauswahl, Zeitfenster: Mehrfachauswahl).
   Die echten Radio-/Checkbox-Felder bleiben unsichtbar, aber fokussierbar. */
.field--group {
  display: block;
}

.field--group > .field__label {
  display: block;
  margin-bottom: var(--space-1);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pill {
  position: relative;
  display: inline-flex;
}

.pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.pill label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* ≥ 44px Tippfläche */
  padding: 0 var(--space-3);
  border: 1px solid var(--color-muted);
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--dur-base) var(--ease-out);
}

.pill label:hover {
  background: var(--color-mist-strong);
}

.pill input:checked + label {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-offwhite);
}

.pill input[aria-invalid="true"] + label {
  border-color: var(--color-ink);
  border-width: 2px;
}

.pill input:focus-visible + label {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Telefonnummer blendet sich weich ein (grid-template-rows 0fr → 1fr + Deckkraft).
   Ohne JavaScript bleibt das Feld sichtbar (is-enhanced setzt script.js). */
.field-reveal {
  display: grid;
  grid-template-rows: 1fr;
}

.field-reveal__inner {
  min-height: 0;
  overflow: hidden;
  margin-inline: -4px;      /* Platz für den Fokusring, ohne Höhe zu kosten */
  padding-inline: 4px;
}

.field-reveal__inner > .field {
  padding-top: var(--space-2);
  padding-bottom: 4px;
}

.field-reveal.is-enhanced {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 300ms var(--ease-out),
    opacity 200ms linear,
    visibility 0s linear 300ms;
}

.field-reveal.is-enhanced.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 300ms var(--ease-out),
    opacity 250ms linear 60ms,
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .field-reveal.is-enhanced,
  .field-reveal.is-enhanced.is-open {
    transition: none;
  }
}

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.checkbox input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--color-ink);
  cursor: pointer;
}

.checkbox label {
  cursor: pointer;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.form__note {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* Rückmeldung nach dem Absenden (script.js, Modul 6) */
.form__status {
  padding: var(--space-3) 0;
  border-block: 1px solid var(--color-silver);
  line-height: 1.6;
}

/* Standard: unsichtbar. Nur nach erfolgreichem Absenden (bzw. Fehler) setzt script.js .is-visible. */
.form__status:not(.is-visible),
.form__status[hidden] {
  display: none;
}

.form__status strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.3;
}

/* Fehler: kräftigere Linien in Ink, damit er sich vom Erfolg unterscheidet */
.form__status--error {
  border-block-width: 2px;
  border-color: var(--color-ink);
}

.form__status a {
  text-underline-offset: 3px;
}

.field__input[aria-invalid="true"],
.checkbox input[aria-invalid="true"] {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Senden läuft: Button bleibt sichtbar, ist aber nicht erneut klickbar */
.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

@media (max-width: 639px) {
  .form__footer .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-bottom: var(--space-4);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--color-accent); /* Champagner-Akzent: obere Linie des Footers */
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .footer__grid {
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: auto;
  }
}

.footer__logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
}

.footer__tagline {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.footer__brand p {
  max-width: 36ch;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.footer__heading {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a:not(.logo) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  text-decoration: none;
}

.site-footer a:not(.logo)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--color-accent); /* Hover-Unterstreichung in Champagner */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-footer a:not(.logo):hover::after {
  transform: scaleX(1);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   14. Rechtliche Seiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.legal {
  padding-block: var(--space-6) var(--section-pad);
}

.legal__head {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: var(--border);
}

.legal__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.5rem + 7vw, 8rem);
  font-weight: var(--fw-display);
  line-height: 0.9;
  letter-spacing: var(--tracking-hero);
}

.legal__body {
  max-width: 70ch;
}

.legal__body section + section {
  margin-top: var(--space-6);
}

.legal__body h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  line-height: 1.3;
}

.legal__body p + p,
.legal__body ul + p,
.legal__body p + ul {
  margin-top: var(--space-2);
}

.legal__body ul {
  padding-left: 1.25em;
}

.legal__body li + li {
  margin-top: 4px;
}

.legal__body a {
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal__date {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   15. Scroll-Reveal (nur mit JS und ohne reduzierte Bewegung aktiv)
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal .rows > :nth-child(2) { transition-delay: 60ms; }
.js-reveal .rows > :nth-child(3) { transition-delay: 120ms; }
.js-reveal .rows > :nth-child(4) { transition-delay: 180ms; }
.js-reveal .rows > :nth-child(5) { transition-delay: 240ms; }

/* Hero: Hauptbutton + zurückhaltender Textlink */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

/* Hinweis „German only“ (nur auf Englisch) */
.footer__note,
.nav__legal-note {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.nav__legal-note {
  display: flex;
  align-items: center;
}

.legal__lang {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   17. Bestätigungsseite nach dem Absenden
   -------------------------------------------------------------------------- */
.thanks {
  display: flex;
  align-items: center;
  min-height: calc(70svh - var(--header-h));
  padding-block: var(--section-pad);
}

.thanks .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.thanks .eyebrow {
  margin-bottom: 0;
}

.thanks__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 1.5rem + 9vw, 9rem);
  font-weight: var(--fw-display);
  line-height: 0.9;
  letter-spacing: var(--tracking-hero);
}

.thanks__text {
  max-width: 40ch;
  font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   18. Unterseiten (Leistungen, Projekte, Über mich, Kontakt) – seit 16.10.2026
   Gleiche Bausteine wie die Startseite: Gambetta-Titel, dünne Silberlinien, Champagner nur als feiner Akzent.
   -------------------------------------------------------------------------- */
/* Kopf einer Unterseite */
.page-hero {
  padding-block: var(--space-6) var(--space-4);
}

.page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.page-hero .eyebrow {
  margin-bottom: 0;
}

.page-hero__title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--fs-h2-xl);
  font-weight: var(--fw-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.page-hero__lead {
  max-width: 58ch;
  font-size: var(--fs-md);
}

@media (min-width: 1024px) {
  .page-hero {
    padding-block: var(--space-10) var(--space-6);
  }
}

/* Engere Abstände zwischen den Abschnitten einer Unterseite */
.section--tight {
  padding-block: var(--space-4);
}

@media (min-width: 1024px) {
  .section--tight {
    padding-block: var(--space-6);
  }
}

/* Kontakt-/Über-mich-Seite: weniger Luft über dem ersten Abschnitt */
.section.page-top {
  padding-top: var(--space-6);
}

/* Leistungskarten: Titel ist der Link zur Unterseite */
.offer__title-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
}

.offer__title-link:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
}

.offer__spacer {
  display: block;
  height: var(--space-3);
}

.more-link {
  margin-top: var(--space-6);
}

/* Nicht verlinkte Projektkarte (Aufzug-Hero): gleicher Stil, kein Link-Cursor */
.project--static .project__link {
  cursor: default;
}

/* Feste Position im Raster ab 768px (Feld „slot“ in src/projects.js) */
@media (min-width: 768px) {
  .projects > [style*="--row"] {
    grid-row: var(--row);
    grid-column: var(--col);
  }
}

/* Abschluss-CTA */
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.cta-band .eyebrow {
  margin-bottom: 0;
}

.cta-band__text {
  max-width: 52ch;
  font-size: var(--fs-md);
}

/* Zweispaltig: Zwischentitel links, Inhalt rechts */
.detail-grid {
  display: grid;
  gap: var(--space-3);
}

.detail-grid__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

.detail-grid__body > * + * {
  margin-top: var(--space-3);
}

.detail-text {
  max-width: 58ch;
  font-size: var(--fs-md);
}

@media (min-width: 1024px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--space-8);
  }
}

/* Liste mit Haken und dünnen Silberlinien */
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding-block: 0.875rem;
  border-top: var(--border-width) solid var(--color-silver);
  font-size: var(--fs-md);
}

.check-list li:last-child {
  border-bottom: var(--border-width) solid var(--color-silver);
}

.check {
  width: 16px;
  height: 16px;
  transform: translateY(2px);
}

/* Kurzer Ablauf */
.mini-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-steps__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: 4px;
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--color-silver);
}

.mini-steps__item:last-child {
  border-bottom: var(--border-width) solid var(--color-silver);
}

.mini-steps__num {
  grid-row: span 2;
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  line-height: 2;
}

.mini-steps__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  line-height: 1.3;
}

.mini-steps__text {
  max-width: 58ch;
  color: var(--color-text-muted);
}

/* Preis-Block „Auf Anfrage“ */
.price {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  margin-top: var(--space-6) !important;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-accent);
}

.price__label,
.option-card__price span,
.addon__price span {
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.price__value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.15;
}

.price__text {
  max-width: 52ch;
  color: var(--color-text-muted);
}

/* Beispiel-Video (Signature-Hero-Seite) */
.showcase {
  margin: 0;
}

.showcase__caption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* Wartungs-Tabelle: Preiszeile */
.care__price th,
.care__price td {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}

.care {
  margin-top: 0;
}

/* Einzelne Option (Hero-Hosting) */
.option-card {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  max-width: 760px;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-accent);
}

.option-card .eyebrow {
  margin-bottom: 0;
}

.option-card__title,
.addon__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

.option-card__text,
.addon__text {
  max-width: 58ch;
}

.option-card__price,
.addon__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-weight: var(--fw-medium);
}

/* Erweiterungen als Kartenraster (keine Boxen: Linie oben) */
.addon-grid {
  display: grid;
  gap: var(--space-6) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .addon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .addon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.addon {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-silver);
}

.addon__text {
  color: var(--color-text-muted);
}

.addon__price {
  margin-top: auto;
  padding-top: var(--space-1);
}

/* Hinweis auf die Erweiterungen (Leistungsseite) */
.addons-teaser {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  margin-top: var(--space-8);
  padding-block: var(--space-4);
  border-block: var(--border-width) solid var(--color-silver);
  color: inherit;
  text-decoration: none;
}

.addons-teaser__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: 1.15;
}

.addons-teaser__text {
  max-width: 58ch;
  color: var(--color-text-muted);
}

.addons-teaser:hover .offer__link {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
}

@media (min-width: 1024px) {
  .addons-teaser {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    column-gap: var(--space-6);
  }
}

/* Projekte-Teaser (Startseite): drei Karten nebeneinander ab 1024px, darunter untereinander */
.work--teaser .projects {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .work--teaser .projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .work--teaser .project__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .work--teaser .project__cta {
    grid-row: 4;
    justify-self: start;
  }
}