/* ============================================================================
   LAYOUT – Header, Hero, Sektionen, Footer
============================================================================ */

/* ============================================================================
   Header / Navigation
   Zustand 1 (ganz oben, ungescrollt): unverändert – transparent, volle
   Breite, am oberen Bildschirmrand. Zustand 2 (.is-scrolled): löst sich vom
   Rand und wird zu einer schwebenden, abgerundeten, aber weiterhin breiten
   Leiste (bewusst KEIN Schrumpfen auf Inhaltsbreite/Pillenform – Größe und
   Abstände über --nav-float-* Tokens in tokens.css einstellbar). Bleibt in
   beiden Zuständen hell/an --bg gekoppelt, keine Verdunklung.
============================================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard),
    top var(--nav-transition-dur) ease, left var(--nav-transition-dur) ease, right var(--nav-transition-dur) ease,
    max-width var(--nav-transition-dur) ease, border-radius var(--nav-transition-dur) ease,
    box-shadow var(--nav-transition-dur) ease, backdrop-filter var(--nav-transition-dur) ease;
}

/* Löst sich vom Bildschirmrand (top/left/right statt inset:0), deckelt die
   Breite auf sehr breiten Screens (max-width + margin-inline:auto zentriert
   den Rest), bekommt großen Radius + Schatten. Hintergrund bleibt dieselbe
   helle, halbtransparente Blur-Fläche wie zuvor – nur die Form ändert sich. */
.site-header.is-scrolled {
  top: var(--nav-float-top);
  left: var(--nav-float-side);
  right: var(--nav-float-side);
  max-width: var(--nav-float-max-width);
  margin-inline: auto;
  background: var(--nav-float-bg);
  backdrop-filter: blur(var(--nav-float-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--nav-float-blur)) saturate(130%);
  border-bottom-color: transparent;
  border-radius: var(--nav-float-radius);
  box-shadow: var(--nav-float-shadow);
}

@media (max-width: 640px) {
  .site-header.is-scrolled {
    top: 10px;
    left: 12px;
    right: 12px;
  }
}

/* Kein eigener prefers-reduced-motion-Block nötig: base.css erzwingt global
   (*, *::before, *::after { transition-duration: 0.001ms !important; ... }),
   dass jeder Übergang – auch dieser Bar→Leiste-Wechsel – bei reduzierter
   Bewegung praktisch verzögerungsfrei umspringt statt zu animieren. */

/* Bei offenem Vollbildmenü immer den flachen, vollbreiten Zustand-1-Look
   erzwingen – unabhängig vom Scroll-Zustand. Sonst schwebte eine abgerundete
   Karte über dem Vollbild-Menü darunter. Selektor bewusst mit Element +
   2 Klassen, damit er .site-header.is-scrolled in der Spezifität sicher
   schlägt (Klassen-Anzahl gleich, das zusätzliche "body" gibt den Ausschlag). */
body.nav-open .site-header {
  top: 0;
  left: 0;
  right: 0;
  max-width: none;
  margin-inline: 0;
  background: var(--bg);
  border-bottom-color: var(--border);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--nav-h);
  transition: min-height var(--nav-transition-dur) ease, padding-inline var(--nav-transition-dur) ease;
}

/* Innenabstand bleibt großzügig, schrumpft nur leicht – keine enge Pille. */
.site-header.is-scrolled .container {
  min-height: 68px;
  padding-inline: var(--space-6);
}

body.nav-open .site-header .container {
  min-height: var(--nav-h);
  padding-inline: var(--container-pad);
}

/* --- Wortmarke ---
   Zeile 1 "ENZI GOLDBECK" in Versalien mit geöffneter Laufweite: Versalien
   wirken als Firmenname formell und stabil, die Laufweite nimmt ihnen die
   Schwere. Zeile 2 "digital" klein, kleingeschrieben und rechtsbündig versetzt
   – der Größensprung erzeugt die Hierarchie "Name / Zusatz", der Versatz nach
   rechts liest sich wie ein angehängtes Tag statt wie eine zweite Zeile. */
.brand {
  position: relative;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

/* Finales Logo als Bild-Lockup (Icon + Wortmarke in einer Datei). Fester Wert
   statt Token, weil die Datei ihre eigene, feste Bildproportion mitbringt. */
.brand-lockup {
  display: block;
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
}

.brand-word .brand-name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-word .brand-sub {
  margin-top: 4px;
  align-self: flex-end;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 0.625rem;
  font-weight: 550;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Bewusst KEIN Gelb im Logo-Tag: Im Header darf es genau ein gelbes Element
   geben – den CTA-Button. Zwei gelbe Punkte nebeneinander würden sich
   gegenseitig entwerten und der Blick wüsste nicht, wo er hin soll. */

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.nav-links a {
  position: relative;
  padding-block: var(--space-2);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-standard);
}

/* Aktiver/gehoverter Link: Text wird auf volle Textfarbe hochgezogen, das
   Gelb kommt als 3px-Balken darunter. Gelber TEXT auf Weiß wäre mit 1,55:1
   nicht lesbar – der Balken transportiert dieselbe Information kontrastfrei
   und funktioniert in beiden Modi identisch. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}

.nav-links a:hover,
.nav-links a.is-active,
.nav-links a[aria-current="page"] {
  color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.is-active::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  position: relative;
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle .bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--text);
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}

.nav-toggle .bar:nth-child(1) {
  transform: translate(-50%, calc(-50% - 6px));
}

.nav-toggle .bar:nth-child(2) {
  transform: translate(-50%, -50%);
}

.nav-toggle .bar:nth-child(3) {
  transform: translate(-50%, calc(-50% + 6px));
}

body.nav-open .nav-toggle .bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

body.nav-open .nav-toggle .bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle .bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 940px) {
  .nav-links,
  .nav-cta .btn {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    z-index: 1001;
  }

  .main-nav {
    gap: var(--space-3);
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Mobiles Menü als volle Fläche statt Dropdown: Auf dem Telefon ist der
     Daumen das Zeigegerät. Große Ziele, viel Abstand, ein einziger CTA fest
     am unteren Rand – dort, wo der Daumen ohnehin liegt. */
  body.nav-open .nav-links {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--nav-h) var(--container-pad) 160px;
    background: var(--bg);
  }

  body.nav-open .nav-links a {
    display: block;
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }

  body.nav-open .nav-links a::after {
    display: none;
  }

  body.nav-open .nav-links a.is-active {
    background: var(--surface-2);
  }

  body.nav-open .nav-cta {
    display: flex;
    position: fixed;
    z-index: 999;
    inset: auto var(--container-pad) var(--space-7) var(--container-pad);
  }

  body.nav-open .nav-cta .btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   Hero
   Linksbündig, einspaltig-dominant, keine Bühnen-Grafik als Hauptdarsteller.
   Entscheider entscheiden in den ersten Sekunden, ob eine Seite seriös ist.
   Eine große, ruhige Aussage plus genau EIN Button beantwortet die zwei Fragen
   "Was ist das?" und "Was soll ich tun?" ohne Umweg.
============================================================================ */
.hero {
  position: relative;
  overflow: clip;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + var(--space-9));
  padding-bottom: var(--space-9);
}

.hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
}

.hero-copy h1 {
  margin-top: var(--space-5);
  max-width: 26ch;
  font-size: clamp(3.2rem, 2rem + 5.2vw, 5.6rem);
  font-family: "Satoshi", var(--font-display);
}

.hero-lede {
  margin-top: var(--space-5);
  max-width: 52ch;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* Vertrauensanker direkt unter dem CTA: nimmt die stille Sorge "worauf lasse
   ich mich ein?" vorweg, bevor sie zum Absprunggrund wird. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-trust svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--text);
}

/* Chat-Eingabefeld: animierte Attrappe direkt unter der Catchphrase. Kein
   echtes Formularfeld – der Button unten rechts öffnet das Anfrage-Modal.
   Squircle-Rundung, Farben und Abstände kommen vollständig aus den
   bestehenden Tokens, damit sich das Element wie ein Teil des Systems liest
   und nicht wie ein aufgesetztes Widget. */
.hero-chat {
  width: 100%;
  max-width: 640px;
  margin-top: var(--space-8);
  background: var(--surface);
  border: 3px solid var(--text);
  border-radius: 34px;
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.hero-chat:hover,
.hero-chat:focus-within {
  box-shadow: var(--shadow-lg);
}

.hero-chat-body {
  min-height: 3.2em;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
}

/* Blinkender Strich statt gestylter Pseudo-Cursor: liest sich sofort als
   "hier tippt gerade jemand", ohne dass wir ein echtes Eingabefeld vortäuschen. */
.hero-chat-cursor {
  display: inline-block;
  margin-left: 1px;
  color: var(--text);
  animation: chat-cursor-blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-chat-cursor {
    animation: none;
  }
}

.hero-chat-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

@media (max-width: 480px) {
  .hero-chat-actions .btn {
    width: 100%;
  }
}

.page-hero {
  position: relative;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + var(--space-7));
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.page-hero .container {
  max-width: 820px;
}

.page-hero .hero-lede {
  max-width: none;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

.breadcrumb a:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

@media (max-width: 940px) {
  .hero-copy h1 {
    max-width: none;
  }
}

/* ============================================================================
   Leistungen – Expanding Spotlight Cards ("Bibliotheksregal")
   Ausgangszustand: 4 gleich große Karten nebeneinander. Beim Hover/Fokus
   einer Karte wächst sie deutlich, die Nachbarn treten gestaffelt nach
   Distanz zurück (direkter Nachbar > übernächster > am weitesten entfernt)
   – rein über flex-grow innerhalb der Zeile, ohne Layout-Shift des übrigen
   Seiteninhalts. .service-card/.icon-badge/.card-link werden auch auf den
   Leistungs-Unterseiten für "Verwandte Leistungen" verwendet – deshalb ist
   ALLES hier bewusst unter .services-grid verschachtelt (die Klasse gibt es
   nur auf der Startseite), damit dort nichts mitgeändert wird.
   Werte justieren: --spotlight-* Tokens in tokens.css.
============================================================================ */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  /* Extra Luft nach oben (zusätzlich zum section-head-Abstand), damit die
     angehobene/vergrößerte Karte beim Hover nicht an der Überschrift klebt. */
  margin-top: var(--space-4);
  padding-top: var(--space-2);
}

/* flex-grow:1 auf allen Karten lässt eine ungerade Kartenzahl (z. B. 3 statt
   4) automatisch gleichmäßig auf die Zeile aufteilen – anders als bei einem
   festen Grid ist dafür keine :has()-Sonderregel für "3 Karten" mehr nötig. */
.services-grid .service-card {
  flex: 1 1 calc(25% - (3 / 4) * var(--space-5));
  transition: flex-grow var(--spotlight-dur) var(--spotlight-ease), opacity var(--spotlight-dur) var(--spotlight-ease),
    transform var(--spotlight-dur) var(--spotlight-ease), box-shadow var(--spotlight-dur) var(--spotlight-ease),
    border-color var(--spotlight-dur) var(--spotlight-ease);
}

/* --- Aktive Karte: Hover UND Tastatur-Fokus lösen denselben Effekt aus
   (:is() statt getrennter hover-/focus-within-Blöcke – bewusst KEIN
   "(hover: hover)"-Gate mehr: bei nur 4 Karten ist das Risiko eines
   hängenbleibenden Touch-Hovers vernachlässigbar gegen die Einfachheit,
   hier zuverlässig denselben Effekt für Maus UND Tastatur zu garantieren). */
.services-grid .service-card:is(:hover, :focus-within) {
  flex-grow: var(--spotlight-grow-active);
  opacity: 1;
  transform: translateY(var(--spotlight-lift));
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
  /* Damit die gewachsene Karte ihren Schatten sichtbar über die Nachbarn
     wirft, statt von ihnen überlappt zu werden. */
  z-index: 1;
}

.services-grid .service-card:is(:hover, :focus-within) .icon-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.services-grid .service-card:is(:hover, :focus-within) .card-link {
  border-bottom-color: var(--accent);
}

/* Nur der Pfeil wird gelb, nicht der Linktext – Gelb als Fließtextfarbe auf
   hellem Grund hätte zu wenig Kontrast (siehe tokens.css, Gelb-Regel). */
.services-grid .service-card:is(:hover, :focus-within) .card-link svg {
  color: var(--accent);
  transform: translateX(4px);
}

/* --- "Bibliotheksregal": Nachbarn treten nach Distanz zur aktiven Karte
   gestaffelt zurück. CSS kennt keinen "vorheriger Nachbar"-Selektor, daher
   erkennt :has(+ …) Nachbarn VOR der aktiven Karte im Markup, während +
   Nachbarn DANACH direkt trifft. Bei 4 Karten ist Distanz 3 die größt-
   mögliche – d1–d3 deckt damit immer alle drei übrigen Karten ab. */
.services-grid .service-card:has(+ .service-card:is(:hover, :focus-within)),
.services-grid .service-card:is(:hover, :focus-within) + .service-card {
  flex-grow: var(--spotlight-grow-d1);
  opacity: var(--spotlight-dim-d1);
}

.services-grid .service-card:has(+ .service-card + .service-card:is(:hover, :focus-within)),
.services-grid .service-card:is(:hover, :focus-within) + .service-card + .service-card {
  flex-grow: var(--spotlight-grow-d2);
  opacity: var(--spotlight-dim-d2);
}

.services-grid .service-card:has(+ .service-card + .service-card + .service-card:is(:hover, :focus-within)),
.services-grid .service-card:is(:hover, :focus-within) + .service-card + .service-card + .service-card {
  flex-grow: var(--spotlight-grow-d3);
  opacity: var(--spotlight-dim-d3);
}

/* Reduzierte Bewegung: Weiten/Anheben/Abdunkeln komplett abschalten (kein
   Layout-Wandel mehr), nur die Farbakzente (Rand, Icon, Pfeil, Unter-
   streichung) aus den Regeln oben bleiben als schnelle Hervorhebung übrig. */
@media (prefers-reduced-motion: reduce) {
  .services-grid .service-card:has(+ .service-card:is(:hover, :focus-within)),
  .services-grid .service-card:is(:hover, :focus-within) + .service-card,
  .services-grid .service-card:has(+ .service-card + .service-card:is(:hover, :focus-within)),
  .services-grid .service-card:is(:hover, :focus-within) + .service-card + .service-card,
  .services-grid .service-card:has(+ .service-card + .service-card + .service-card:is(:hover, :focus-within)),
  .services-grid .service-card:is(:hover, :focus-within) + .service-card + .service-card + .service-card {
    flex-grow: 1;
    opacity: 1;
  }

  .services-grid .service-card:is(:hover, :focus-within) {
    flex-grow: 1;
    transform: none;
    box-shadow: none;
    z-index: auto;
  }
}

@media (max-width: 1080px) {
  .services-grid .service-card {
    flex-basis: calc(50% - var(--space-5) / 2);
  }
}

@media (max-width: 620px) {
  .services-grid .service-card {
    flex-basis: 100%;
  }
}

/* ============================================================================
   Ablauf
   Nummerierte Schritte statt Fließtext. Der häufigste ungesagte Einwand bei
   Website-Projekten ist "Wie viel Arbeit kommt auf MICH zu?". Eine sichtbare
   Schrittkette beantwortet das visuell, bevor der Text gelesen wird.
   .process-grid/.process-step/.step-number sind die einfache 4-Spalten-
   Variante, wie sie weiterhin auf den Leistungs-Unterseiten läuft (seo.html,
   support-hosting.html, website-erstellung.html – dort NICHT anfassen). Das
   Karussell auf der Startseite ("Ablauf – Karussell" weiter unten) ist
   bewusst eine eigene Komponente mit eigenen Klassen (.process-carousel /
   .process-slide statt .process-step), damit beide unabhängig voneinander
   bleiben und sich nicht gegenseitig beeinflussen.
============================================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  counter-reset: step;
}

.process-step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 2px solid var(--border);
}

/* Markierung auf der Trennlinie jedes Schritts. Gelb bekommt NUR der erste
   Schritt: Er ist der einzige, den der Besucher selbst auslösen muss
   ("Erstgespräch"). Wären alle vier gelb, würde die Farbe nichts mehr sagen –
   sie markiert hier den Einstiegspunkt, nicht die Dekoration. */
.process-step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--text);
}

.process-step:first-child::before {
  background: var(--accent);
  width: 52px;
}

.process-step .step-number {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}

.process-step h4 {
  margin-bottom: var(--space-3);
}

.process-step p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Ablauf – Karussell (nur Startseite)
   Immer ein Schritt im Fokus, Nachbarn peeken an den Rändern an. Die
   Positionierung läuft komplett über CSS: main.js setzt nur die Zahl
   --active-index auf .process-track, die eigentliche Breiten-/Verschiebungs-
   Rechnung passiert hier über calc() mit Container-Query-Einheiten (cqw) –
   die beziehen sich korrekt auf die sichtbare .process-viewport-Fläche,
   nicht auf die (viel breitere) Gesamtbreite aller aneinandergereihten
   Karten. Peek-Breite/Abstand/Tempo/Federung: --carousel-* Tokens in
   tokens.css. Interaktion (Pfeile, Punkte, Tastatur, Wischen, Onboarding-
   Hinweis): assets/js/main.js, Abschnitt 7.
============================================================================ */
.process-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.process-viewport {
  container-type: inline-size;
  overflow: hidden;
  flex: 1 1 auto;
  /* Erlaubt horizontales Wischen fürs Karussell, lässt vertikales
     Scrollen der Seite auf Touch-Geräten aber unangetastet. */
  touch-action: pan-y;
}

.process-track {
  display: flex;
  gap: var(--carousel-gap);
  /* -1 * Index * (Kartenbreite + Lücke) verschiebt zur richtigen Karte,
     + --carousel-peek zentriert sie mit gleich viel Luft auf beiden Seiten. */
  transform: translateX(
    calc(
      (var(--active-index, 0) * -1) * (100cqw - (2 * var(--carousel-peek)) + var(--carousel-gap)) +
        var(--carousel-peek)
    )
  );
  transition: transform var(--carousel-dur) var(--carousel-ease);
  will-change: transform;
}

.process-slide {
  flex: 0 0 calc(100cqw - (2 * var(--carousel-peek)));
  min-height: clamp(220px, 30vw, 270px);
  padding: var(--space-6);
  border-top: 2px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
  opacity: 0.4;
  transform: scale(0.92);
  /* Bewusst nur transform/opacity animiert (Performance-Vorgabe: 60fps,
     reine Compositor-Eigenschaften). Die Randfarbe unten und die Farben des
     step-number-Badges wechseln deshalb ohne eigene Transition, springen
     also synchron zur Slide-Bewegung um statt separat einzublenden. */
  transition: opacity var(--carousel-dur) var(--carousel-ease), transform var(--carousel-dur) var(--carousel-ease);
}

/* Der fokussierte Schritt: volle Größe/Deckkraft, gelbe Fortschrittslinie
   oben (ersetzt die alte, fest auf Schritt 01 stehende Markierung – jetzt
   trägt sie immer die gerade aktive Karte). */
.process-slide[data-offset="0"] {
  opacity: 1;
  transform: scale(1);
  border-top-color: var(--accent);
}

.process-slide .step-number {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}

.process-slide[data-offset="0"] .step-number {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.process-slide h4 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}

.process-slide p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 46ch;
}

/* --- Pfeile --- */
.process-arrow {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.process-arrow svg {
  width: 20px;
  height: 20px;
}

.process-arrow:hover,
.process-arrow:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.process-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.process-arrow:disabled:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

/* --- Fortschritt: "01 / 04" + klickbare Punkte (springen direkt zu einem
     Schritt). Punkte haben ein 44px-Touch-Ziel, der sichtbare Kreis bleibt
     klein – über ::before statt Breite/Höhe des Buttons selbst. --- */
.process-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.process-progress-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.process-dots {
  display: flex;
  align-items: center;
}

.process-dot {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.process-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.process-dot:hover::before {
  background: var(--text-muted);
}

.process-dot[aria-current="true"]::before {
  background: var(--accent);
  transform: scale(1.35);
}

.process-note {
  margin-top: var(--space-7);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --- Onboarding-Hinweis: einmaliger Skip-Wink beim ersten Sichtbarwerden.
     Ausschlag über --carousel-onboard-bounce; main.js hängt/entfernt die
     Klasse .is-onboarding (siehe Abschnitt 7). --- */
@keyframes process-onboard-hint {
  0%,
  100% {
    transform: scale(1) translateX(0);
  }
  20%,
  60% {
    transform: scale(1) translateX(var(--carousel-onboard-bounce));
  }
  40%,
  80% {
    transform: scale(1) translateX(0);
  }
}

.process-slide[data-offset="0"].is-onboarding {
  animation: process-onboard-hint 1.2s ease-in-out 1;
}

@keyframes process-arrow-pulse {
  0%,
  100% {
    box-shadow: none;
    border-color: var(--border-strong);
  }
  50% {
    box-shadow: 0 0 0 6px var(--accent-soft);
    border-color: var(--accent);
  }
}

.process-arrow.is-onboarding {
  animation: process-arrow-pulse 1.1s ease-in-out 1;
}

/* Eigene, bewusst niedrig-spezifische !important-Regel: base.css erzwingt
   global transition-duration:0.001ms für reduzierte Bewegung (Snap statt
   Animation). Hier soll aber laut Vorgabe ausdrücklich ein einfaches,
   schnelles FADE sichtbar bleiben statt komplett verzögerungsfrei
   umzuspringen – deshalb hier gezielt wieder eine kurze, nicht-federnde
   Dauer setzen. Bounce/Overshoot und der Onboarding-Hinweis werden separat
   abgeschaltet, das Durchblättern selbst bleibt voll nutzbar. */
@media (prefers-reduced-motion: reduce) {
  .process-track,
  .process-slide {
    transition-duration: 180ms !important;
    transition-timing-function: ease !important;
  }

  .process-slide.is-onboarding,
  .process-arrow.is-onboarding {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .process-carousel {
    gap: var(--space-2);
  }

  .process-arrow {
    width: 40px;
    height: 40px;
  }

  .process-arrow svg {
    width: 18px;
    height: 18px;
  }

  .process-slide {
    padding: var(--space-5);
  }
}

/* ============================================================================
   Referenzen
============================================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.work-card .photo-frame {
  aspect-ratio: 4 / 3;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.work-card h3 {
  font-size: var(--fs-lg);
}

.work-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Über uns
============================================================================ */
.team-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: clip;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--border);
}

.team-intro {
  max-width: 64ch;
  margin: var(--space-7) auto 0;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-top: var(--space-8);
}

.founder-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.founder-row .photo-frame {
  aspect-ratio: 1 / 1;
}

.founder-row h3 {
  font-size: var(--fs-lg);
}

.founder-role {
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
}

.founder-row p:last-child {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .founders {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 560px) {
  .founder-row {
    grid-template-columns: 1fr;
  }

  .founder-row .photo-frame {
    max-width: 180px;
  }
}

/* ============================================================================
   Preise
============================================================================ */
/* stretch statt start: Alle drei Karten sind gleich hoch und die Buttons
   liegen auf einer Linie – ungleich endende Preiskarten lesen sich als
   Nachlässigkeit, und Nachlässigkeit im Preisblock kostet Vertrauen. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

@media (max-width: 940px) {
  .price-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ============================================================================
   Kontakt
============================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--space-7);
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-detail + .contact-detail {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.contact-detail .icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

.contact-detail strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-display);
}

.contact-detail p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Kontaktdaten unterstrichen: In der Zielgruppe wird häufiger angerufen als
   getippt. Telefonnummer und E-Mail müssen als klickbar erkennbar sein –
   Farbe allein reicht dafür nicht (und Gelb wäre auf Weiß unlesbar). */
.contact-detail a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}

.contact-detail a:hover {
  text-decoration-color: var(--accent);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-info {
    order: 2;
  }
}

/* ============================================================================
   Footer
============================================================================ */
/* Footer bleibt in Hell- und Dunkelmodus identisch schwarz (--footer-*
   Tokens sind fest, drehen sich nicht mit dem Farbschema). Alle Textfarben
   im Footer sind deshalb hier explizit gesetzt statt von --text/--text-muted
   geerbt, sonst würde z. B. der Linktext im Hellmodus schwarz auf schwarz
   verschwinden. */
.site-footer {
  border-top: 1px solid var(--footer-border);
  padding-block: var(--space-8) var(--space-6);
  background: var(--footer-bg);
  color: var(--footer-text);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-7);
}

.footer-brand p {
  margin-top: var(--space-4);
  max-width: 36ch;
  color: var(--footer-text-muted);
  font-size: var(--fs-sm);
}

.site-footer .brand-sub {
  color: var(--footer-text-muted);
  border-color: var(--footer-border);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--footer-text-muted);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.footer-col a {
  color: var(--footer-text);
  transition: color var(--dur-fast) var(--ease-standard);
}

.footer-col a:hover,
.footer-bottom nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--footer-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--footer-text-muted);
}

.footer-bottom nav {
  display: flex;
  gap: var(--space-5);
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ============================================================================
   Rechtstexte (Impressum, Datenschutz)
============================================================================ */
.legal-content {
  max-width: 72ch;
}

.legal-content h2 {
  margin-top: var(--space-8);
  font-size: var(--fs-lg);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  margin-top: var(--space-4);
  color: var(--text-muted);
}

.legal-content li {
  margin-top: var(--space-2);
}

.legal-content strong {
  color: var(--text);
}

.legal-content a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}

.legal-content a:hover {
  text-decoration-color: var(--accent);
}