/* ==========================================================================
   Kalenastudios®
   Grundlage: design.md. Tokens in Abschnitt 13, Komponenten in Abschnitt 7.
   Verbindliche Breakpoints: 810px und 1200px (siehe README).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift — lokal ausgeliefert, keine externen Anfragen (Datenschutz)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-variable.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farben — design.md §3. Bewusst monochrom, kein Akzent. */
  --color-ink: #0a0a0a;
  --color-black: #090909;
  --color-paper: #f5f5f5;
  --color-white: #ffffff;
  --color-line: #e7e7e7;
  --color-muted: #999999;
  --color-ink-60: rgba(10, 10, 10, 0.6);
  --color-ink-10: rgba(10, 10, 10, 0.1);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-10: rgba(255, 255, 255, 0.1);

  /* Oberflächenbezogene Rollen. Dunkle Sektionen überschreiben sie.

     --color-muted (#999) ist laut design.md §3 für sekundäre Metadaten
     gedacht, erreicht auf Papier aber nur 2,6:1 und fällt damit durch die
     AA-Anforderung aus design.md §11. Auf Ink liegt derselbe Wert bei
     6,7:1 und wird dort verwendet. Auf hellen Flächen greift stattdessen
     --color-ink-60 (5,0:1) — ebenfalls ein Token aus §3.

     Die Hierarchie zwischen Fließtext und Metadaten entsteht auf Papier
     deshalb über Schriftgrad und Gewicht, nicht über Helligkeit. */
  --surface: var(--color-paper);
  --fg: var(--color-ink);
  --fg-secondary: var(--color-ink-60);
  --fg-muted: var(--color-ink-60);
  --rule: var(--color-line);

  --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --radius-xs: 7px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 50px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 30px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 60px;
  --space-12: 70px;
  --space-13: 80px;
  --space-14: 100px;
  --space-15: 120px;
  --space-16: 200px;

  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-reveal: 400ms;
  --ease-editorial: cubic-bezier(0.44, 0, 0.56, 1);

  --page-gutter: 20px;
  --content-max: 1520px;
  --header-h: 64px;

  /* Sektionsrhythmus — bleibt in den Bereichen aus design.md §5. */
  --section-py: 72px;
  --section-py-lg: 96px;
}

@media (min-width: 810px) {
  :root {
    --page-gutter: 30px;
    --header-h: 76px;
    --section-py: 110px;
    --section-py-lg: 140px;
  }
}

@media (min-width: 1200px) {
  :root {
    --page-gutter: 36px;
    --header-h: 80px;
    --section-py: 140px;
    --section-py-lg: 190px;
  }
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anker landen nicht unter dem Sticky-Header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  text-wrap: balance;
}

/* Fokus nie allein über Farbe — design.md §7. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--color-ink);
  color: var(--color-paper);
}

.section--ink ::selection {
  background: var(--color-white);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   4. Typografie — design.md §4
   -------------------------------------------------------------------------- */

.display-xl,
.display-l,
.title-m,
.service__title,
.project-card__typemark {
  /* Ohne hyphens laufen deutsche Komposita bei großen Graden aus dem
     Viewport. Setzt <html lang="de"> voraus. Siehe README.

     hyphenate-limit-chars regelt nicht, WELCHE Wörter getrennt werden,
     sondern WO. Ohne Vorgabe trennt der Browser „Unterneh-men" (3 Zeichen
     in der neuen Zeile). Mit mindestens 4 Zeichen auf beiden Seiten bleibt
     nur die saubere Fuge: „Unter-nehmen".

     Browser ohne Unterstützung (Firefox) trennen weiterhin nach
     hyphens: auto — weniger schön, aber nie fehlerhaft. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  /* Letztes Netz, falls ein Wort auch getrennt nicht passt. */
  overflow-wrap: break-word;
}

.display-xl {
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.display-l {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.title-m {
  font-size: clamp(1.625rem, 2.2vw, 2.375rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.number {
  font-size: clamp(2.375rem, 5.2vw, 5.3125rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.body {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg-secondary);
  text-wrap: pretty;
}

/* Zeilenlänge 48–65 Zeichen — design.md §4 */
.measure {
  max-width: 58ch;
}

.measure-tight {
  max-width: 44ch;
}

.label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Eyebrow — kleiner Kicker über Überschriften. Hero- und Section-Variante
   teilen sich Badge und Layout. Das Badge dreht die Flächenrollen um: Kreis in
   --fg, Plus in --surface. So bleibt es auf Papier (dunkler Kreis, helles Plus)
   wie auf Ink (heller Kreis, dunkles Plus) kontrastreich. Das Plus wird aus
   zwei Verläufen gezeichnet, nicht als Textzeichen — scharf, skalierbar und
   für Screenreader stumm. */
.section-label,
.hero__eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-muted);
}

.section-label::before,
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(var(--surface), var(--surface)) center / 9px 1.5px no-repeat,
    linear-gradient(var(--surface), var(--surface)) center / 1.5px 9px no-repeat,
    var(--fg);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - (var(--page-gutter) * 2), var(--content-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-py);
  background: var(--surface);
  color: var(--fg);
}

.section--lg {
  padding-block: var(--section-py-lg);
}

.section--ink {
  --surface: var(--color-ink);
  --fg: var(--color-white);
  --fg-secondary: var(--color-white-60);
  --fg-muted: var(--color-muted);
  --rule: var(--color-white-10);
}

.section--black {
  --surface: var(--color-black);
  --fg: var(--color-white);
  --fg-secondary: var(--color-white-60);
  --fg-muted: var(--color-muted);
  --rule: var(--color-white-10);
}

/* Aufeinanderfolgende Sektionen gleicher Farbe: keine doppelte Polsterung. */
.section--ink + .section--ink,
.section--black + .section--ink,
.section--ink + .section--black {
  padding-top: 0;
}

/* Editorial-Raster: 12 Spalten Desktop, 6 Tablet, 1 Mobil — design.md §5 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 810px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--space-8);
  }
}

@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* Kopfzeile einer Sektion: Label links, erklärender Text in ferner Spalte.
   Fabrica-Signatur: eine feine Grundlinie über dem Kopf, an beiden Enden von
   einer Plus-Marke gefasst — wie die Registermarken der Referenz. */
.section-head {
  position: relative;
  display: grid;
  gap: var(--space-8);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-8);
}

.section-head::before,
.section-head::after {
  content: "+";
  position: absolute;
  top: 0;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--fg-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.section-head::before {
  left: 0;
}

.section-head::after {
  right: 0;
}

@media (min-width: 810px) {
  .section-head {
    grid-template-columns: repeat(6, 1fr);
  }
  .section-head__title {
    grid-column: 1 / 5;
  }
  .section-head__aside {
    grid-column: 5 / 7;
    padding-top: var(--space-2);
  }
}

@media (min-width: 1200px) {
  .section-head {
    grid-template-columns: repeat(12, 1fr);
  }
  .section-head__title {
    grid-column: 1 / 9;
  }
  .section-head__aside {
    grid-column: 9 / 13;
  }
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-top: var(--gap, var(--space-6));
}

.divider {
  height: 1px;
  border: 0;
  background: var(--rule);
}

/* --------------------------------------------------------------------------
   6. Buttons — design.md §7
   -------------------------------------------------------------------------- */

.button {
  --btn-h: 58px;
  --btn-px: 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--duration-base) var(--ease-editorial),
    color var(--duration-base) var(--ease-editorial),
    border-color var(--duration-base) var(--ease-editorial);
}

.button--compact {
  --btn-h: 30px;
  --btn-px: 14px;
  font-size: 0.8125rem;
}

.button--ink {
  background: var(--color-ink);
  color: var(--color-white);
}

.button--white {
  background: var(--color-white);
  color: var(--color-ink);
}

.button--ghost {
  border: 1px solid var(--rule);
  color: var(--fg);
}

.button--ghost:hover {
  border-color: var(--fg);
}

.button--ink:hover {
  background: #232323;
}

.button--white:hover {
  background: var(--color-line);
}

/* Label-Slide: das Label ist dupliziert und wandert im geclippten
   Container nach oben — design.md §9. */
.button__label {
  display: block;
  position: relative;
  overflow: hidden;
}

.button__label span {
  display: block;
  transition: transform var(--duration-base) var(--ease-editorial);
}

.button__label span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

.button:hover .button__label span,
.button:focus-visible .button__label span {
  transform: translateY(-100%);
}

.button:hover .button__label span:last-child,
.button:focus-visible .button__label span:last-child {
  transform: translateY(0);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Textlink mit unterstrichener Grundlinie */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--duration-base) var(--ease-editorial),
    gap var(--duration-base) var(--ease-editorial);
}

.link:hover {
  border-color: var(--fg);
  gap: var(--space-3);
}

.link__arrow {
  width: 0.7em;
  height: 0.7em;
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Wortmarke
   -------------------------------------------------------------------------- */

.wordmark {
  display: block;
  width: auto;
  height: 18px;
  color: currentColor;
  /* Seitenverhältnis der Marke: 988.15 × 107.8 */
  aspect-ratio: 988.15 / 107.8;
}

/* Kompaktes Monogramm im Header — erbt currentColor, kippt also mit dem
   Header von Weiß (über dunklem Hero) auf Ink (gescrollt/heller Kopf). */
.monogram {
  display: block;
  width: auto;
  height: 30px;
  color: currentColor;
  aspect-ratio: 727.1304 / 658.8758;
}

.wordmark-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Header — design.md §7
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--color-white);
  transition: background-color var(--duration-base) var(--ease-editorial),
    color var(--duration-base) var(--ease-editorial),
    border-color var(--duration-base) var(--ease-editorial);
  border-bottom: 1px solid transparent;
}

/* Über dem dunklen Hero transparent, danach Papier — design.md §7.
   Kein Schlagschatten, nur ein 1px-Trenner. */
.site-header.is-scrolled {
  background: rgba(245, 245, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-ink);
  border-bottom-color: var(--color-line);
}

/* Seiten mit hellem Seitenkopf starten direkt im Papier-Zustand. */
.site-header--solid {
  background: var(--color-paper);
  color: var(--color-ink);
  border-bottom-color: var(--color-line);
}

/* Kein width: 100% — das würde die Gutter-Berechnung von .container
   überschreiben und den Header bündig an den Viewport-Rand ziehen.

   Drei Spalten (1fr auto 1fr): Marke links, Navigation exakt mittig,
   Aktionen rechts. Die gleich breiten Randspalten halten die Navigation
   optisch zentriert, unabhängig davon, wie breit Marke oder CTA werden.
   Fällt die Navigation auf Mobil weg, kollabiert die Mittelspalte und
   Marke/Aktionen rücken an die Ränder. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
}

.site-header__brand {
  display: flex;
  align-items: center;
  /* Feste Spalten, damit die Aktionen rechts bleiben, wenn die Navigation
     auf Mobil per display:none aus dem Grid fällt — sonst rückt der
     Menü-Trigger in die (dann leere) Mittelspalte. */
  grid-column: 1;
  justify-self: start;
}

.site-nav {
  display: none;
}

@media (min-width: 810px) {
  .site-nav {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: var(--space-8);
  }
}

.site-nav__link {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-block: var(--space-2);
  opacity: 0.65;
  transition: opacity var(--duration-base) var(--ease-editorial);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  opacity: 1;
}

.site-nav__count {
  font-size: 0.6875rem;
  vertical-align: super;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

.site-header__actions {
  display: flex;
  align-items: center;
  grid-column: 3;
  justify-self: end;
  gap: var(--space-4);
}

/* Der Header-CTA folgt dem Zustand des Headers: hell über dem dunklen Hero,
   dunkel auf Papier. Sonst verschwindet er beim Scrollen. */
.site-header__cta {
  display: none;
  background: var(--color-white);
  color: var(--color-ink);
}

.site-header__cta:hover {
  background: var(--color-line);
}

.site-header.is-scrolled .site-header__cta,
.site-header--solid .site-header__cta {
  background: var(--color-ink);
  color: var(--color-white);
}

.site-header.is-scrolled .site-header__cta:hover,
.site-header--solid .site-header__cta:hover {
  background: #232323;
}

@media (min-width: 810px) {
  .site-header__cta {
    display: inline-flex;
  }
}

/* Menü-Trigger. Ohne JavaScript wäre er wirkungslos, deshalb erscheint er
   nur mit JS — die Fußzeile führt dieselbe Navigation vollständig. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* 48px Touch-Target — design.md §10 */
  width: 48px;
  height: 48px;
  margin-right: -12px;
  color: inherit;
}

.js .nav-toggle {
  display: inline-flex;
}

@media (min-width: 810px) {
  .js .nav-toggle {
    display: none;
  }
}

.nav-toggle__bars {
  position: relative;
  width: 22px;
  height: 10px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-editorial);
}

.nav-toggle__bars::before {
  top: 0;
}

.nav-toggle__bars::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(4.25px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* Mobile Overlay — design.md §6.1: „full-screen dark overlay" */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* Helles Overlay — einheitlich mit dem Papier-Zustand von Header und Seite. */
  background: var(--color-paper);
  color: var(--color-ink);
  --surface: var(--color-paper);
  --fg: var(--color-ink);
  --fg-secondary: var(--color-ink-60);
  --fg-muted: var(--color-ink-60);
  --rule: var(--color-line);
  padding-top: calc(var(--header-h) + var(--space-11));
  padding-bottom: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility wird nicht mitanimiert, sondern geschaltet: beim Schließen
     erst nach der Blende (Delay), beim Öffnen sofort (kein Delay).
     Läge visibility in der Transition, wäre das Overlay im Moment des
     Klassenwechsels noch hidden — der Fokus käme dann nicht hinein. */
  transition: opacity var(--duration-base) var(--ease-editorial),
    transform var(--duration-base) var(--ease-editorial),
    visibility 0s linear var(--duration-base);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--duration-base) var(--ease-editorial),
    transform var(--duration-base) var(--ease-editorial),
    visibility 0s linear 0s;
}

@media (min-width: 810px) {
  .mobile-nav {
    display: none;
  }
}

/* Fabrica-Referenz: zentrierte Links, ohne Nummern und Trennlinien. */
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.mobile-nav__link {
  display: flex;
  justify-content: center;
  padding-block: var(--space-3);
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Die laufende Nummer entfällt im zentrierten Layout. */
.mobile-nav__index {
  display: none;
}

.mobile-nav__footer {
  margin-top: var(--space-11);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* E-Mail wie in der Referenz: Plus-Badge davor, unterstrichen. Das Plus wird
   aus zwei Verläufen gezeichnet (weißer Kreis, Ink-Plus) — siehe Eyebrow. */
.mobile-nav__footer .label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.0625rem;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Im hellen Menü wäre der weiße CTA unsichtbar — er wird dunkel. */
.mobile-nav .button--white {
  background: var(--color-ink);
  color: var(--color-white);
}

.mobile-nav .button--white:hover {
  background: #232323;
}

/* Bei offenem Menü liegt der transparente Header über heller Fläche:
   Marke und Schließen-Kreuz müssen dunkel werden, sonst verschwinden sie. */
body.is-nav-open .site-header {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Pixel-Übergang des Menüs

   Beim Öffnen deckt ein gestaffeltes Raster aus Papier-Kacheln die Seite ab,
   danach erscheint der Inhalt; beim Schließen läuft es rückwärts. Das Raster
   und die Delays baut JS (.has-pixels). Ohne JS oder bei reduzierter Bewegung
   greift die einfache Blende weiter oben — dieser Block bleibt dann inaktiv.
   -------------------------------------------------------------------------- */

.mobile-nav__pixels {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  pointer-events: none;
}

.mobile-nav__pixel {
  background: var(--color-paper);
  opacity: 0;
  transition: opacity 240ms var(--ease-editorial);
  will-change: opacity;
}

.mobile-nav.is-open .mobile-nav__pixel {
  opacity: 1;
}

/* Mit Pixel-Layer trägt das Raster den Hintergrund; das Overlay selbst wird
   transparent und blendet nicht mehr als Ganzes, sondern ist sofort da —
   nur seine Sichtbarkeit wird geschaltet (beim Schließen erst, nachdem die
   Kacheln aufgelöst sind). */
.mobile-nav.has-pixels {
  background: transparent;
  opacity: 1;
  transform: none;
  transition: visibility 0s linear 640ms;
}

.mobile-nav.has-pixels.is-open {
  transition: visibility 0s linear 0s;
}

.mobile-nav > .container {
  position: relative;
  z-index: 1;
}

/* Inhalt erscheint, nachdem die Kacheln die Fläche geschlossen haben. */
.mobile-nav.has-pixels > .container {
  opacity: 0;
  transition: opacity 220ms var(--ease-editorial);
}

.mobile-nav.has-pixels.is-open > .container {
  opacity: 1;
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__pixel {
    transition: none;
  }
  .mobile-nav.has-pixels > .container {
    transition: none;
  }
}

.mobile-nav__footer .label::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(var(--surface), var(--surface)) center / 10px 1.5px
      no-repeat,
    linear-gradient(var(--surface), var(--surface)) center / 1.5px 10px no-repeat,
    var(--fg);
}

body.is-nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. Hero — design.md §6.2
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + var(--space-13));
  padding-bottom: var(--space-11);
  background: var(--color-ink);
  color: var(--color-white);
  --surface: var(--color-ink);
  --fg: var(--color-white);
  --fg-secondary: var(--color-white-60);
  --fg-muted: var(--color-white-60);
  --rule: var(--color-white-10);
  overflow: hidden;
}

/* Markenmotiv liegt hinter der Typografie, nie darüber. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bildfokus: Person rechts, heller Wandbereich links für die Textspalte.
     66 % hält die Person bei schmalem (hochkant beschnittenem) Viewport im
     Bild; 30 % vertikal bewahrt den Kopf, wenn oben/unten beschnitten wird. */
  object-position: 66% 30%;
}

/* Zwei Verläufe: der erste hält die Textspalte links praktisch auf Ink und
   sichert damit den Kontrast der weißen Typografie, der zweite dunkelt
   Header- und Fußzone ab. Die Form rechts bleibt sichtbar. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(10, 10, 10, 0.97) 0%,
      rgba(10, 10, 10, 0.9) 30%,
      rgba(10, 10, 10, 0.45) 62%,
      rgba(10, 10, 10, 0.35) 100%
    ),
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.6) 0%,
      rgba(10, 10, 10, 0.1) 30%,
      rgba(10, 10, 10, 0.35) 65%,
      rgba(10, 10, 10, 0.9) 100%
    );
}

/* Mobil läuft der Text über die volle Breite. Ein seitlicher Verlauf hilft
   dort nicht — stattdessen bleibt die obere Hälfte Motiv, die untere Text. */
@media (max-width: 809px) {
  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.7) 0%,
      rgba(10, 10, 10, 0.48) 32%,
      rgba(10, 10, 10, 0.93) 76%,
      rgba(10, 10, 10, 0.97) 100%
    );
  }
}

/* Ebenfalls ohne width: 100% — siehe .site-header__inner. */
.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  margin-bottom: var(--space-7);
}

.hero__title {
  margin-bottom: var(--space-8);
  max-width: 16ch;
}

.hero__lead {
  max-width: 46ch;
  margin-bottom: var(--space-9);
}

.hero__actions {
  margin-bottom: var(--space-11);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-white-10);
}

.hero__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__service {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-white-60);
}

/* Kompakterer Hero für Unterseiten */
.hero--page {
  min-height: 0;
  padding-top: calc(var(--header-h) + var(--space-14));
  padding-bottom: var(--space-14);
}

.hero--page .hero__title {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   9b. Hero — Statement-Variante (Startseite)

   Die Wortmarke trägt die Bühne: nahezu randlos, darüber die Leistungen
   rechts, darunter eine Grundlinie mit Plus-Marken, Claim, Copyright und
   Kontaktkarte. Die eigentliche H1 liegt als visuell verborgener Fließtext
   in der Marke — Suchmaschinen und Screenreader bekommen den vollen Satz,
   das Auge die Marke. Auf Mobil stapelt die Komposition in einer Spalte.
   -------------------------------------------------------------------------- */

.hero--statement {
  justify-content: stretch;
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-9);
}

/* Kein .container-Deckel: die Marke soll wie in der Referenz von Rand zu
   Rand laufen. Ein großzügiges Maximum verhindert nur, dass sie auf sehr
   breiten Monitoren ins Leere zieht. */
.hero--statement .hero__inner {
  width: 100%;
  max-width: 1840px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
}

/* --- Leistungen: auf Mobil oben links, ab Tablet oben rechts ---------- */
.hero-statement__services {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

@media (min-width: 720px) {
  .hero-statement__services {
    align-self: flex-end;
    text-align: right;
  }
}

/* --- Wortmarke und Deskriptor ---------------------------------------- */
.hero-statement__mark {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero-statement__wordmark {
  margin: 0;
  /* Der Rahmen soll die Höhe der Marke exakt fassen. */
  line-height: 0;
}

.wordmark--hero {
  width: 100%;
  height: auto;
}

.hero-statement__descriptor {
  font-size: clamp(1.5rem, 3.2vw, 3.25rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--color-white);
  text-wrap: balance;
}

/* --- Grundlinie mit Plus-Marken -------------------------------------- */
.hero-statement__base {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero-statement__ticks {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-white-10);
}

.hero-statement__ticks span {
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-white-60);
  /* Die Marke sitzt mittig auf der Linie. */
  transform: translateY(-50%);
}

/* --- Fußzeile: Claim, Copyright, Kontaktkarte ------------------------- */
.hero-statement__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.hero-statement__tagline {
  max-width: 36ch;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-white-60);
  text-wrap: pretty;
}

.hero-statement__tagline span {
  color: var(--color-white);
  font-weight: 500;
}

.hero-statement__copy {
  font-size: 0.8125rem;
  color: var(--color-white-60);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .hero-statement__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-9);
  }

  .hero-statement__tagline {
    justify-self: start;
  }

  .hero-statement__copy {
    justify-self: center;
    text-align: center;
  }
}

/* --- Kontaktkarte ----------------------------------------------------- */
.hero-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 460px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-editorial);
}

.hero-card:hover {
  transform: translateY(-2px);
}

.hero-card__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero-card__avatar picture,
.hero-card__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-card__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.hero-card__role {
  font-size: 0.6875rem;
  color: var(--color-ink-60);
}

.hero-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-card__cta {
  flex: none;
  /* schiebt die Aktion ans rechte Kartenende, auf Mobil über die volle
     Breite, auf Desktop dicht an den Namen (Karte schrumpft auf Inhalt). */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-editorial);
}

.hero-card:hover .hero-card__cta {
  background: #232323;
}

.hero-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-white);
}

@media (min-width: 900px) {
  .hero-card {
    width: auto;
    justify-self: end;
  }

  .hero-card__cta {
    margin-left: var(--space-3);
  }
}

/* Weniger Bewegung: keine schwebende Karte. */
@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .hero-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. Projektkarten — design.md §7
   -------------------------------------------------------------------------- */

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 810px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

/* Einzelnes Projekt läuft als Featured Story — design.md §6.8 */
.project-grid--single {
  grid-template-columns: 1fr;
}

.project-card {
  display: block;
  position: relative;
}

.project-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-line);
  /* Referenzproportion 602 × 503 ≈ 6:5 — design.md §7 */
  aspect-ratio: 6 / 5;
}

.project-grid--single .project-card__media {
  aspect-ratio: 16 / 10;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--duration-reveal) var(--ease-editorial);
}

.project-card:hover .project-card__media img {
  transform: scale(1.02);
}

/* Typografische Variante — greift, solange kein echtes Projektbild
   vorliegt. Ein generiertes Motiv würde ein reales Projekt darstellen,
   das es so nicht gibt (content.md §17, tech stack.md).

   Bewusst kein leerer Medienrahmen: ohne Bild wäre das nur eine große
   schwarze Fläche. Stattdessen trägt die Typografie den Block, und alle
   Angaben zum Projekt liegen darin. */
.project-card--type .project-card__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-white);
  transition: background-color var(--duration-base) var(--ease-editorial);
}

@media (min-width: 810px) {
  .project-card--type .project-card__panel {
    padding: var(--space-11);
    gap: var(--space-13);
  }
}

.project-card--type:hover .project-card__panel {
  background: #171717;
}

.project-card__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.project-card__panel-head .label,
.project-card__panel-head .status {
  color: var(--color-white-60);
}

.project-card__panel-head .status {
  border-color: var(--color-white-10);
}

.project-card__typemark {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.05em;
  hyphens: auto;
}

/* Variante mit echtem Kundenlogo statt Text-Typemark (weiß auf Ink). */
.project-card__typemark--logo {
  line-height: 0;
}

.project-logo {
  width: min(420px, 80%);
  height: auto;
}

/* Nahezu quadratische Lockups (z. B. Fech) über die Höhe begrenzen, damit sie
   die Karte nicht dominieren. */
.project-logo--compact {
  width: auto;
  height: 132px;
  max-width: 70%;
}

/* Markentafel in der Case Study: Logo zentriert auf gerahmter Fläche. */
.brand-figure {
  margin-top: var(--space-13);
  padding: var(--space-14) var(--space-8);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.brand-figure__logo {
  width: min(440px, 78%);
  height: auto;
}

/* Breitere Wortmarken (z. B. IRO) dürfen etwas mehr Fläche nehmen. */
.brand-figure__logo--wide {
  width: min(560px, 86%);
}

/* Nahezu quadratische Lockups (z. B. Fech) kompakter zeigen. */
.brand-figure__logo--compact {
  width: min(320px, 66%);
}

.brand-figure__caption {
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* Mockup-Galerie der Case Study — entsättigte Aufnahmen, gerundete Kacheln:
   ein breites Leitbild, darunter ein Dreier-Raster. */
.mockups {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.mockup {
  margin: 0;
}

.mockup picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-line);
}

.mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mockup--feature picture {
  aspect-ratio: 16 / 9;
}

.mockup__caption {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  color: var(--fg-muted);
}

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

@media (min-width: 700px) {
  .mockup-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mockup-grid .mockup picture {
  aspect-ratio: 4 / 3;
}

.project-card__panel-foot {
  display: grid;
  gap: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-white-10);
}

@media (min-width: 810px) {
  .project-card__panel-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-9);
  }
}

.project-card__panel-foot .project-card__text {
  margin-top: 0;
  color: var(--color-white-60);
}

.project-card__panel-foot .tag {
  border-color: var(--color-white-10);
  color: var(--color-white-60);
}

.project-card__panel-foot .link {
  border-color: var(--color-white-10);
  color: var(--color-white);
  white-space: nowrap;
}

.project-card--type:hover .project-card__panel-foot .link {
  border-color: var(--color-white);
}

.project-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.project-card__title {
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.project-card__meta {
  font-size: 0.75rem;
  color: var(--fg-muted);
  text-align: right;
  flex: none;
}

.project-card__text {
  margin-top: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--fg-secondary);
  max-width: 52ch;
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.tag {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fg-secondary);
}

/* Statusfähnchen: laufendes Projekt ehrlich kennzeichnen */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fg-secondary);
}

.status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* --------------------------------------------------------------------------
   11. Accordion — Leistungen und FAQ, design.md §7
   -------------------------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--rule);
}

.accordion__item {
  border-bottom: 1px solid var(--rule);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  /* Geschlossene Zeile ≈ 66px, min. 48px Touch-Target */
  min-height: 66px;
  padding-block: var(--space-5);
  text-align: left;
  color: inherit;
}

.accordion__index {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-muted);
  flex: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-base) var(--ease-editorial);
}

.accordion__title {
  flex: 1;
  font-size: clamp(1.5rem, 2.2vw, 2.375rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  transition: opacity var(--duration-base) var(--ease-editorial);
}

.accordion__trigger:hover .accordion__title {
  opacity: 0.6;
}

/* Rotierendes Kreuz — design.md §7 */
.accordion__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform var(--duration-reveal) var(--ease-editorial);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.accordion__icon::before {
  width: 100%;
  height: 1.5px;
}

.accordion__icon::after {
  width: 1.5px;
  height: 100%;
}

/* Rotierendes Kreuz (design.md §7): das Plus dreht zum ×. Beide Balken
   bleiben stehen — würde einer ausgeblendet, bliebe nur ein schräger
   Strich übrig. */
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(135deg);
}

/* Ohne JavaScript sind alle Panels offen — der Inhalt bleibt lesbar. */
.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
}

/* Höhe und Deckkraft animieren gemeinsam — design.md §9 */
.js .accordion__panel {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--duration-reveal) var(--ease-editorial),
    opacity var(--duration-base) var(--ease-editorial);
}

.js .accordion__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__content {
  padding-bottom: var(--space-9);
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 810px) {
  .accordion__content {
    grid-template-columns: repeat(6, 1fr);
    /* Auf Index-Spalte des Triggers ausrichten */
    padding-left: calc(2.5rem + var(--space-6));
  }
  .accordion__content > * {
    grid-column: 1 / 4;
  }
  .accordion__content > .accordion__aside {
    grid-column: 5 / 7;
  }
}

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

.accordion__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* FAQ-Variante: ruhiger, kleinere Titel */
.accordion--faq .accordion__title {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.accordion--faq .accordion__trigger {
  min-height: 48px;
  gap: var(--space-5);
}

.accordion--faq .accordion__content {
  padding-bottom: var(--space-7);
  max-width: 62ch;
}

@media (min-width: 810px) {
  .accordion--faq .accordion__content {
    display: block;
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   12. Metrik- und Ergebnisfelder — design.md §7
   -------------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9) var(--space-8);
}

@media (min-width: 560px) {
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Jede Kennzahl steht als einzeln geregelte Spalte mit Plus-Marke am
   Zeilenanfang — die segmentierte Grundlinie ist eine Fabrica-Signatur. */
.metric {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-6);
}

.metric::before {
  content: "+";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--fg-muted);
  transform: translateY(-50%);
}

.metric__index {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
  font-variant-numeric: tabular-nums;
}

.metric__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.metric__text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--fg-secondary);
}

/* --------------------------------------------------------------------------
   13. Prozessphasen
   -------------------------------------------------------------------------- */

.phases {
  border-top: 1px solid var(--rule);
}

.phase {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-9);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 810px) {
  .phase {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  .phase__index {
    grid-column: 1 / 2;
  }
  .phase__title {
    grid-column: 2 / 4;
  }
  .phase__body {
    grid-column: 4 / 7;
  }
}

@media (min-width: 1200px) {
  .phase {
    grid-template-columns: repeat(12, 1fr);
  }
  .phase__index {
    grid-column: 1 / 2;
  }
  .phase__title {
    grid-column: 2 / 6;
  }
  .phase__body {
    grid-column: 7 / 12;
  }
}

.phase__index {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  padding-top: var(--space-1);
}

.phase__title {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.phase__result {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.phase__result strong {
  color: var(--fg);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   13b. Leistungsblöcke (Leistungsseite)
   -------------------------------------------------------------------------- */

.services {
  border-top: 1px solid var(--rule);
}

.service {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--rule);
  /* Anker landen nicht unter dem Sticky-Header. */
  scroll-margin-top: var(--header-h);
}

@media (min-width: 810px) {
  .service {
    grid-template-columns: repeat(6, 1fr);
  }
  .service__head {
    grid-column: 1 / 4;
  }
  .service__body {
    grid-column: 4 / 7;
  }
}

@media (min-width: 1200px) {
  .service {
    grid-template-columns: repeat(12, 1fr);
    padding-block: var(--space-14);
  }
  .service__head {
    grid-column: 1 / 7;
  }
  .service__body {
    grid-column: 8 / 13;
  }
}

.service__index {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-6);
}

.service__title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.05em;
  hyphens: auto;
}

.service__lead {
  margin-top: var(--space-6);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-secondary);
  max-width: 40ch;
}

.service__scope {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.service__scope-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: var(--space-5);
}

.service__result {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   14. Prinzipien / Differenzierung
   -------------------------------------------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (min-width: 810px) {
  .principles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .principles--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.principle {
  background: var(--surface);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.principle__title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.principle__text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fg-secondary);
}

/* --------------------------------------------------------------------------
   15. Zitat
   -------------------------------------------------------------------------- */

.quote {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-8);
}

.quote__text {
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: pretty;
  max-width: 26ch;
}

.quote__cite {
  display: block;
  margin-top: var(--space-7);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.quote__cite strong {
  display: block;
  color: var(--fg);
  font-weight: 500;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   16. Formular — design.md §7
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

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

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg);
}

.field__req {
  color: var(--fg-muted);
  font-weight: 400;
}

.field__hint {
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.field__control {
  width: 100%;
  min-height: 48px;
  padding: var(--space-4) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-size: 1rem;
  color: var(--fg);
  transition: border-color var(--duration-base) var(--ease-editorial);
  appearance: none;
}

.field__control::placeholder {
  color: var(--fg-muted);
}

.field__control:hover {
  border-color: var(--fg-secondary);
}

.field__control:focus {
  outline: none;
  border-bottom-color: var(--fg);
  border-bottom-width: 2px;
  padding-bottom: calc(var(--space-4) - 1px);
}

/* Sichtbarer Fokus auch für Tastatur — nie nur Farbe */
.field__control:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
  border-radius: 2px;
}

textarea.field__control {
  min-height: 120px;
  padding-top: var(--space-3);
  resize: vertical;
  line-height: 1.45;
}

select.field__control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 6px;
  padding-right: var(--space-7);
}

.field.has-error .field__control {
  border-bottom-color: var(--color-ink);
  border-bottom-width: 2px;
}

.field__error {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field__error::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.field__error:empty {
  display: none;
}

/* Checkbox-Gruppe für Mehrfachauswahl */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice__box {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  transition: border-color var(--duration-base) var(--ease-editorial),
    background-color var(--duration-base) var(--ease-editorial),
    color var(--duration-base) var(--ease-editorial);
}

.choice input:hover + .choice__box {
  border-color: var(--fg);
}

.choice input:checked + .choice__box {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

.choice input:focus-visible + .choice__box {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* Honeypot — für Menschen und Screenreader unsichtbar, für Bots ausfüllbar */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

/* Consent-Copy direkt unter der Absende-Aktion — design.md §7 */
.form__consent {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 58ch;
}

.form__consent a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
}

.form__consent a:hover {
  border-color: var(--fg);
}

.button[aria-disabled="true"],
.button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Globale Statusmeldung. Sichtbarkeit steuert das hidden-Attribut in
   contact-form.js — hier bewusst kein display, damit [hidden] greift. */
.form__status {
  padding: var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: var(--space-8);
}

.form__status strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  color: var(--fg);
}

.form__status--error {
  border-color: var(--color-ink);
  border-width: 2px;
}

.form__status--success {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white-60);
}

.form__status--success strong {
  color: var(--color-white);
}

.form__status--success a {
  color: var(--color-white);
}

/* Ohne JavaScript beantwortet /api/contact einen Fehler mit einem Redirect
   auf #fehler. Dieser Hinweis wird dann per :target sichtbar — ganz ohne
   JavaScript. Mit JavaScript übernimmt contact-form.js die Ausgabe. */
.form-error-target {
  display: none;
  padding: var(--space-6);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-8);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.form-error-target:target {
  display: block;
}

.form-error-target p {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   17. Nummerierte Schritte (»So geht es weiter«)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  counter-reset: step;
}

@media (min-width: 810px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.step__index {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: var(--space-5);
  font-variant-numeric: tabular-nums;
}

.step__title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.step__text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-secondary);
}

/* --------------------------------------------------------------------------
   18. Footer — design.md §6.13
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-ink);
  color: var(--color-white);
  --fg: var(--color-white);
  --fg-secondary: var(--color-white-60);
  --fg-muted: var(--color-white-60);
  --rule: var(--color-white-10);
  /* Der finale CTA ist eine eigene dunkle Sektion direkt darüber. Beide
     verschmelzen zu einem Schlussblock — design.md §6.13. */
  padding-top: var(--space-11);
  padding-bottom: var(--space-9);
  overflow: hidden;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-9) var(--space-8);
  padding-block: var(--space-11);
}

@media (min-width: 810px) {
  .site-footer__nav {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-col__title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-white-60);
  margin-bottom: var(--space-6);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col__list a,
.footer-col__list span {
  font-size: 0.875rem;
  opacity: 0.75;
  transition: opacity var(--duration-base) var(--ease-editorial);
}

.footer-col__list a:hover {
  opacity: 1;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-white-10);
  font-size: 0.75rem;
  color: var(--color-white-60);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-6);
}

.site-footer__legal a:hover {
  color: var(--color-white);
}

/* Übergroße Wortmarke zum Abschluss — design.md §6.13 */
.site-footer__wordmark {
  margin-top: var(--space-12);
}

.site-footer__wordmark .wordmark {
  width: 100%;
  height: auto;
  color: var(--color-white);
  opacity: 0.12;
}

/* --------------------------------------------------------------------------
   19. Rechtsseiten / Prosa
   -------------------------------------------------------------------------- */

.prose {
  max-width: 68ch;
}

.prose h2 {
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-top: var(--space-11);
  margin-bottom: var(--space-5);
}

.prose h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p,
.prose li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-60);
}

.prose p + p {
  margin-top: var(--space-5);
}

.prose ul {
  list-style: disc;
  padding-left: 1.2em;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prose a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}

.prose a:hover {
  border-color: var(--color-ink);
}

/* Vergleichstabellen — editoriale Hairline-Optik, design.md §3/§5 */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-7);
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  line-height: 1.5;
}

.prose thead th {
  font-weight: 500;
  color: var(--color-ink);
  border-bottom-color: var(--color-ink-10);
}

.prose tbody th {
  font-weight: 500;
  color: var(--color-ink);
  padding-right: var(--space-7);
}

.prose td {
  color: var(--color-ink-60);
}

/* Offene Rechtsangaben sichtbar markieren, damit nichts unbemerkt live geht. */
.todo {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-xs);
  font-size: 0.8125rem;
  font-weight: 500;
}

.notice {
  padding: var(--space-7);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-10);
}

.notice p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   20. Hilfsklassen
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  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-3);
  left: var(--space-3);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-editorial);
}

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

/* --------------------------------------------------------------------------
   21. Reveal — Struktur zeigen, nicht dekorieren (design.md §9)
   -------------------------------------------------------------------------- */

/* Nur wenn JS läuft. Ohne JS ist alles sofort sichtbar. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-reveal) var(--ease-editorial),
    transform var(--duration-reveal) var(--ease-editorial);
}

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

/* Label erscheint kurz vor seiner Display-Headline — design.md §9 */
.js [data-reveal="delayed"] {
  transition-delay: 90ms;
}

/* --------------------------------------------------------------------------
   22. Reduzierte Bewegung — design.md §9
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

/* --------------------------------------------------------------------------
   24. Kontakt-Modal

   Fortschrittliche Verbesserung: Ohne JavaScript führen alle CTAs weiterhin
   auf /anfrage/. Mit JavaScript baut main.js diesen Dialog, lädt das Formular
   einmalig aus /anfrage/ nach (eine Quelle) und blendet ihn hier ein.
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-editorial),
    visibility 0s linear var(--duration-base);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-editorial),
    visibility 0s linear 0s;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  /* Eigene Papier-Oberfläche, unabhängig von der Sektion dahinter. */
  background: var(--color-paper);
  color: var(--color-ink);
  --surface: var(--color-paper);
  --fg: var(--color-ink);
  --fg-secondary: var(--color-ink-60);
  --fg-muted: var(--color-ink-60);
  --rule: var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  transition: transform var(--duration-base) var(--ease-editorial);
}

.modal.is-open .modal__dialog {
  transform: none;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--rule);
}

.modal__title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin-top: var(--space-3);
}

.modal__desc {
  font-size: 0.875rem;
  color: var(--fg-secondary);
  margin-top: var(--space-4);
  max-width: 46ch;
}

.modal__close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  border: 1px solid var(--rule);
  transition: background-color var(--duration-base) var(--ease-editorial),
    color var(--duration-base) var(--ease-editorial),
    border-color var(--duration-base) var(--ease-editorial);
}

.modal__close:hover {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}

.modal__close-x {
  position: relative;
  width: 16px;
  height: 16px;
}

.modal__close-x::before,
.modal__close-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

.modal__close-x::before {
  transform: rotate(45deg);
}

.modal__close-x::after {
  transform: rotate(-45deg);
}

.modal__body {
  padding: var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Im Modal beginnt das Formular oben — der Seitenabstand entfällt. */
.modal__body .form__status:first-child {
  margin-top: 0;
}

.modal__loading {
  color: var(--fg-muted);
  font-size: 0.875rem;
  padding: var(--space-6) 0;
}

/* Auf Smartphones nahezu bildschirmfüllend. */
@media (max-width: 560px) {
  .modal {
    padding: 0;
  }

  .modal__dialog {
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

body.is-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal__dialog {
    transition: opacity var(--duration-base) var(--ease-editorial),
      visibility 0s;
  }

  .modal__dialog {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   25. Mega-Menü (Desktop-Navigation)
   -------------------------------------------------------------------------- */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger sind Buttons, sollen aber wie .site-nav__link aussehen. */
button.site-nav__link {
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

button.site-nav__link::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: var(--space-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-editorial);
}

.nav-item.is-open button.site-nav__link,
button.site-nav__link[aria-expanded="true"] {
  opacity: 1;
}

.nav-item.is-open button.site-nav__link::after {
  transform: translateY(1px) rotate(-135deg);
}

.mega-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  /* Kleiner Abstand zum Header — hält die Hover-Lücke zur Karte gering. */
  padding-top: var(--space-2);
  padding-bottom: var(--space-9);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease-editorial),
    transform var(--duration-base) var(--ease-editorial),
    visibility 0s linear var(--duration-base);
}

.nav-item.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease-editorial),
    transform var(--duration-base) var(--ease-editorial),
    visibility 0s linear 0s;
}

/* Karte innerhalb des Seitenrasters zentriert; die transparente Fläche
   daneben lässt Klicks durch (schließt das Menü). */
.mega-panel__inner {
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.mega-card {
  pointer-events: auto;
  width: 100%;
  max-width: 780px;
  background: var(--color-paper);
  color: var(--color-ink);
  --surface: var(--color-paper);
  --fg: var(--color-ink);
  --fg-secondary: var(--color-ink-60);
  --rule: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -34px rgba(10, 10, 10, 0.4);
  padding: var(--space-8);
}

.mega-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.mega-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-secondary);
}

.mega-card__all {
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
}

.mega-card__all .link__arrow {
  width: 9px;
  height: 9px;
}

.mega-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}

.mega-link {
  display: block;
  padding: var(--space-4);
  margin: calc(var(--space-4) * -1) 0;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) var(--ease-editorial);
}

.mega-link:hover,
.mega-link:focus-visible {
  background: var(--color-white);
  outline: none;
}

.mega-link:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.mega-link__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.mega-link[aria-current="page"] .mega-link__title {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.mega-link__text {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg-secondary);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   26. Mobile-Navigation: Akkordeon für gruppierte Bereiche
   -------------------------------------------------------------------------- */

.mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.mobile-nav__link--accordion {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  /* gleiche Optik wie .mobile-nav__link */
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding-block: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-nav__link--accordion::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-editorial);
}

.mobile-nav__link--accordion[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

.mobile-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: grid-template-rows 280ms var(--ease-editorial),
    opacity 200ms var(--ease-editorial), visibility 0s linear 280ms;
}

.mobile-nav__sub.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition: grid-template-rows 280ms var(--ease-editorial),
    opacity 200ms var(--ease-editorial), visibility 0s linear 0s;
}

.mobile-nav__sub-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2) var(--space-4);
}

.mobile-nav__sublink {
  font-size: 1.0625rem;
  color: var(--color-ink-60);
  padding-block: var(--space-2);
  transition: color var(--duration-base) var(--ease-editorial);
}

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

@media (prefers-reduced-motion: reduce) {
  .mega-panel,
  .mobile-nav__sub {
    transition: opacity var(--duration-base) var(--ease-editorial),
      visibility 0s;
  }

  .mobile-nav__sub.is-open {
    grid-template-rows: 1fr;
  }
}

/* --------------------------------------------------------------------------
   27. Druck
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .mobile-nav,
  .modal,
  .site-footer__wordmark,
  .hero__media {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}