/* ==========================================================================
   Roider ZT GmbH — Designsystem
   Dunkle, editoriale Farbwelt (Etappe-1-Entscheidung), Red Hat self-hosted.
   Tokens (Spacing, Typo-Skala, Radii, Shadow, Motion) aus dem Design-Export.
   ========================================================================== */

/* -- Schriften (self-hosted woff2, DSGVO) ---------------------------------- */
@font-face {
  font-family: "Red Hat Display";
  src: url("/assets/fonts/RedHatDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("/assets/fonts/RedHatDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("/assets/fonts/RedHatDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("/assets/fonts/RedHatText-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("/assets/fonts/RedHatText-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("/assets/fonts/RedHatMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("/assets/fonts/RedHatMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* -- Tokens ---------------------------------------------------------------- */
:root {
  /* Farbwelt (dunkel) */
  --bg:          #17120D;   /* warm-schwarz, Seitenbasis */
  --bg-kontakt:  #211A13;   /* leicht aufgehellt, Kontaktsektion */
  --paper:       #F4F1EA;   /* helle Papier-Sektion (Leistungen) */
  --akzent:      #FF7B00;   /* Marken-Orange = echte Logo-Farbe (Affinity-SVG) */
  --akzent-hover:#E66E00;   /* ~10% dunkler, stimmiger Hover-Ton */

  /* Scrim — weiche Abdunklung hinter Text auf Foto (0 = aus … 1 = voll).
     Zentral justierbar (DevTools/Regler), gilt für Hero + Projekt-Vollbild. */
  --scrim: 0.78;

  /* Dunkles satiniertes Glas — einheitliche Lesbarkeits-Hinterlegung für Text
     auf Fotos. Randlos, ohne Schatten, eng am Text. Wiederverwendbar via .glass-bg
     bzw. direkt über diese Variablen (z. B. Nav-Hover). */
  --glass-bg:   rgba(23,18,13,.45);
  --glass-blur: blur(8px);

  /* Text auf dunkel */
  --on-dark-1: #ffffff;
  --on-dark-2: rgba(255,255,255,.82);
  --on-dark-3: rgba(255,255,255,.62);
  --on-dark-4: rgba(255,255,255,.50);
  /* Text auf Papier */
  --on-light-1: #17120D;
  --on-light-2: rgba(23,18,13,.66);
  --on-light-3: rgba(23,18,13,.50);

  /* Haarlinien */
  --line-dark:  rgba(255,255,255,.16);
  --line-light: rgba(23,18,13,.14);

  /* Schriften */
  --font-display: "Red Hat Display", system-ui, sans-serif;
  --font-body:    "Red Hat Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Typo-Skala (modular, base 16) */
  --fs-12: 0.75rem;  --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem;   --fs-24: 1.5rem;   --fs-32: 2rem;
  --fs-44: 2.75rem;  --fs-60: 3.75rem;   --fs-84: 5.25rem;  --fs-120: 7.5rem;
  --fs-19: 1.1875rem; /* gemeinsamer Fließtext-Wert (19px): .svc p, .prose p, .lead */

  /* Headline-Größen (fluid) — zentrale Steuerung der Überschriften.
     Werte 1:1 aus dem bisherigen Stand (optisch unverändert). */
  --fs-hero:       clamp(34px, 5.3vw, 79px);  /* EINE große Headline-Größe für alle:
                                                  .hero h1 · .proj-intro h2 · .page-hero h1 ·
                                                  .detail-head h1 · .contact h2 (Display Regular) */
  --fs-h2-section: clamp(25px, 3.1vw, 40px);  /* .svc-head h2 (Leistungen-Titel, Display Bold) */
  --fs-statement:  clamp(28px, 4.2vw, 58px);  /* .statement .big */
  --fs-svc-titel:  clamp(22px, 2.4vw, 30px);  /* .svc h3 (Desktop-Max 30px) */
  --fs-svc-num:    47px;                       /* .svc .num */

  /* Tracking / Line-Height */
  --track-tight: -0.015em; --track-normal: 0; --track-wide: 0.04em;
  --track-display: 0.01em; --track-mono: 0.14em;
  --lh-tight: 1; --lh-snug: 1.15; --lh-body: 1.6; --lh-loose: 1.75;

  /* Spacing (4px-Grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --sp-24:96px; --sp-32:128px;

  /* Radii (überwiegend eckig — Architekturmarke) */
  --r-0:0; --r-1:2px; --r-2:4px; --r-pill:999px;

  /* Nav-Logo-Höhe (zentral justierbar) */
  --logo-h: clamp(28px, 4vw, 42px);

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 6px 18px rgba(0,0,0,.28);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.40);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms;
}

/* -- Reset / Basis --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--on-dark-1);
  font: 400 var(--fs-16)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* -- Layout-Helfer --------------------------------------------------------- */
.wrap { width: min(1320px, 100% - 2 * clamp(20px, 5vw, 48px)); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 2 * clamp(20px, 5vw, 48px)); margin-inline: auto; }
.section { padding: clamp(80px, 12vh, 140px) 0; }
.section--paper { background: var(--paper); color: var(--on-light-1); }
.section--kontakt { background: var(--bg-kontakt); }

/* Anker-Ziele: fixe Nav darf den Sektionstitel beim Sprung nicht überdecken */
#ueber, #leistungen, #referenzen, #kontakt { scroll-margin-top: clamp(84px, 10vh, 104px); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--akzent); color: #fff; padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-13);
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* -- Typo-Bausteine -------------------------------------------------------- */
/* Eyebrows stehen blank (kein Glas) — Glas gibt es nur noch bei Nav-Hover/Anfrage
   und als Projektbild-Caption (.project__index). */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-18); font-weight: 400;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--akzent); margin: 0;
}
/* Dunkles satiniertes Glas (randlos, ohne Schatten, eng) — hinter Text auf Fotos.
   inline-block → das Glas umschließt nur den Text, nicht die ganze Zeilenbreite.
   Dezent einsetzen: nur dort, wo Lesbarkeit über Bild es braucht. */
.glass-bg {
  display: inline-block;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 999px;
  padding: 2px 10px;
}
.display {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-display); line-height: 0.98;
}
.lead { font-size: var(--fs-19); line-height: var(--lh-body); color: var(--on-dark-2); }
.section--paper .lead { color: var(--on-light-2); }
.mono { font-family: var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }

/* ==========================================================================
   NAV — fixiert, beim Scrollen dezent transluzent (einziges Glas-Element)
   ========================================================================== */
/* Variante C: dauerhaft dunkel-transluzent ab Scroll 0 (über Hero + alle
   Sektionen), keine is-stuck-Schwelle mehr. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: var(--sp-8);
  padding: 12px clamp(20px, 5vw, 48px) 8px;
  background: rgba(23,18,13,0.72);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
/* Wortmarke — PNG-Logo (transparent, eingebrannter Verlauf, für dunklen Grund),
   Link zur Startseite. Höhe zentral über --logo-h justierbar. */
.brand { display: inline-flex; align-items: center; }
.brand-logo {
  display: block; width: auto;
  height: var(--logo-h);
}

.nav-links { margin-left: auto; display: flex; gap: var(--sp-6); align-items: center; }
.nav-links a {
  font-family: var(--font-mono); font-size: var(--fs-16); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--on-dark-2);
}
/* Nav-Links (außer CTA): dunkler Pill bei Hover/aktiv — bleibt auf hellen
   Bildstellen lesbar. Padding immer reserviert, nur der Hintergrund blendet
   weich ein → kein Layout-Sprung. Dunkles satiniertes Glas, Text weiß. */
.nav-links a:not(.nav-cta) {
  padding: 6px 14px; border-radius: 999px; background: transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              backdrop-filter var(--dur-fast) var(--ease-standard);
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta)[aria-current="page"] {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--akzent);
}
.nav-cta {
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-pill);
  padding: 9px 18px; color: var(--on-dark-1) !important;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              backdrop-filter var(--dur-fast) var(--ease-standard);
}
/* Anfrage: gleiche Glas-Logik wie die Menüpunkte (dunkles Glas + oranger Text),
   aber GRÖSSER — eigene Form/Rahmen/Padding bleiben unverändert. */
.nav-cta:hover {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--akzent) !important;
}

/* Mobile-Toggle */
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--on-dark-1); padding: var(--sp-2);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero img { object-fit: cover; animation: heroZoom 18s var(--ease-standard) forwards; }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Hero-Scrim KOMPLETT entfernt (auch der frühere Top-Band) → Titelbild bleibt
   voll & unabgedunkelt sichtbar. Lesbarkeit liefert ausschließlich das enge
   Glas hinter den Eyebrows; Headlines/Lead bleiben bewusst blank auf dem Foto. */
.hero-content { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(40px, 7vh, 88px); }
.hero h1 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  letter-spacing: var(--track-display); color: #fff;
  font-size: var(--fs-hero); line-height: 0.95; margin: var(--sp-4) 0 0;
  text-wrap: balance;
  /* Bewusst KEIN Schatten/Glas/Scrim — Headline bleibt blank auf dem Foto. */
}
.hero-sub { margin: var(--sp-6) 0 0; max-width: 540px; color: rgba(255,255,255,.9);
  font-size: clamp(var(--fs-16), 1.5vw, var(--fs-20)); line-height: var(--lh-body); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-dark-3);
}
.scroll-cue span { width: 1px; height: 34px; background: rgba(255,255,255,.5);
  transform-origin: top; animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.3); opacity:.4; } 50% { transform: scaleY(1); opacity:1; } }

/* ── Hero-Diashow (Bilder + Clips gemischt, Crossfade) ───────────────────── */
/* Hero voll hoch. Kein Beschnitt, keine leeren Balken: siehe Blur-Fill unten. */
.hero-slideshow {
  position: relative; height: 100svh; min-height: 620px; overflow: hidden;
  background: var(--bg);
}
/* Gestapelter Reveal-Crossfade: der NEUE Slide liegt voll deckend darunter
   (is-active, ohne Transition → schnappt sofort sichtbar); der ALTE blendet
   darüber aus (is-leaving, opacity 1→0). So sind nie beide gleichzeitig auf 0
   → kein Schwarzframe im Übergang. */
.hero-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide.is-leaving {
  opacity: 0; z-index: 2;
  transition: opacity 800ms var(--ease-standard);
}
/* Blur-Fill (universell): jede Slide = scharfes Medium object-fit:contain
   (kein Beschnitt) ÜBER einem randlos füllenden, unscharfen cover-Backdrop
   desselben Mediums. Gilt für Hoch- und Querformat; ersetzt dunklen Rand. */
.hero-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(28px) brightness(.55);
  transform: scale(1.08); /* überdeckt die durch Blur entstehenden weichen Ränder */
}
.hero-fg, .hero-slide picture {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
}
.hero-slide picture img, .hero-slide img.hero-fg, .hero-slide video.hero-fg {
  width: 100%; height: 100%; object-fit: contain;
  /* Beschnitt-/Ausschnitt-Lenkung des scharfen Vordergrunds via --obj-pos. */
  object-position: var(--obj-pos, 50% 50%);
}
.hero-slide__overlay {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  /* Bodenabstand lässt das Scroll-Cue (unten zentriert) frei. */
  padding-bottom: clamp(40px, 7vh, 88px);
}
/* Titel-Leiste linksbündig: das Overlay liegt im .wrap (gleicher Content-Einzug
   wie die Sektionen darunter). Das horizontale Glas-Padding (10px, s. .glass-bg)
   wird links wegkompensiert, damit die TITEL-SCHRIFT exakt am Content-Einzug
   sitzt — bündig mit den Headlines darunter, NICHT am Viewport-Rand. */
.hero-eyebrow { margin: 0 0 0 -10px; }

/* Kleinerer Seiten-Hero (Unterseiten) */
.page-hero { padding: clamp(140px, 22vh, 220px) 0 clamp(48px, 8vh, 96px); }
.page-hero h1 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  letter-spacing: var(--track-display); line-height: 0.98;
  font-size: var(--fs-hero); margin: var(--sp-4) 0 0; text-wrap: balance;
}

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement .big {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-statement); line-height: 1.16; letter-spacing: var(--track-tight);
  margin: var(--sp-6) 0 0; color: #fff; max-width: 40ch; text-wrap: balance;
}
.statement .big b { font-weight: 500; }
.statement .cols {
  margin-top: var(--sp-16); display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-10); max-width: 760px;
}
.statement .cols p { color: var(--on-dark-3); line-height: var(--lh-loose); margin: 0; }

/* ==========================================================================
   LEISTUNGEN — nummerierte Liste auf Papier
   ========================================================================== */
.svc-head { margin-bottom: var(--sp-12); }
.svc-head h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-tight);
  font-size: var(--fs-h2-section); line-height: 1.1; margin: var(--sp-3) 0 0; max-width: 18ch;
}
.svc-list { border-top: 1px solid var(--line-light);
  transition: border-color var(--dur-base) var(--ease-standard); }
.svc {
  display: grid; grid-template-columns: 88px 1fr 1.4fr; gap: var(--sp-8); align-items: start;
  padding: 0 0 10px; border-bottom: 1px solid var(--line-light);
  transition: border-color var(--dur-base) var(--ease-standard);
}
/* Hover: KEIN Sprung/Bewegung — nur ein leises, editoriales Lebenszeichen.
   Blöcke sind reine Info, NICHT klickbar (kein cursor:pointer). */
/* Hover: BEIDE Begrenzungslinien des Blocks (oben + unten) werden schwarz.
   Untere Linie = border-bottom des Blocks selbst; obere Linie = border-bottom
   des Vorgängers (bzw. border-top der Liste beim ersten Block). */
.svc:hover,
.svc:has(+ .svc:hover) { border-bottom-color: var(--on-light-1); }
.svc-list:has(> .svc:first-child:hover) { border-top-color: var(--on-light-1); }
/* Hover: Nummer wächst (statt Farbwechsel), beide Textabsätze gehen auf Schwarz. */
.svc:hover .num { transform: scale(1.22); }
.svc:hover .svc-text p,
.svc:hover h3 { color: var(--on-light-1); }
.svc .num {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-svc-num); line-height: 1;
  color: var(--akzent); text-transform: uppercase;
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-standard);
}
.svc h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
  font-size: var(--fs-svc-titel); color: var(--on-light-2);
  transition: color var(--dur-base) var(--ease-standard); }
.svc p { margin: 0; color: var(--on-light-2); line-height: var(--lh-body); font-size: var(--fs-19);
  transition: color var(--dur-base) var(--ease-standard); }
/* Selektor MUSS spezifischer sein als `.svc p` (0,1,1), sonst erbt die Zeile
   fälschlich dessen 19px. `.svc p.svc-keywords` = (0,2,1) → font-size 12px greift. */
.svc p.svc-keywords {
  margin: 15px 0 0; font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 0.03em; line-height: 1.5; color: var(--on-light-3);
  text-transform: uppercase;
}

/* ==========================================================================
   PROJEKTE — Vollbild-Blöcke + Duo-Raster (Startseite/Referenzen)
   ========================================================================== */
.proj-intro { padding: clamp(80px, 12vh, 130px) 0 var(--sp-12); }
.proj-intro h2 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  letter-spacing: var(--track-display); font-size: var(--fs-hero);
  line-height: 0.98; margin: var(--sp-4) 0 0;
}
.project { position: relative; display: block; }
.project__media { position: relative; overflow: hidden; }
.project--full .project__media { height: clamp(460px, 86vh, 900px); }
.project__media picture, .project__media img { width: 100%; height: 100%; }
.project__media img { object-fit: cover; transition: transform 1200ms var(--ease-standard); }
.project:hover .project__media img { transform: scale(1.03); }
.project__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(23,18,13, var(--scrim)) 0%, rgba(23,18,13,0) 46%);
}
.project__caption { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(36px, 6vh, 72px); }
/* Projektbild-Caption = einziges Text-Overlay je Bild: kleiner frosted Index-Chip */
.project__index {
  display: inline-flex; align-items: center;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(23,18,13,.32); border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-pill); padding: 7px 15px;
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--akzent);
}
.proj-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.proj-duo .project__media { height: clamp(360px, 60vh, 620px); }
.proj-duo .project__caption { padding: 0 var(--sp-6) var(--sp-6); }

/* ==========================================================================
   PROJEKT-ÜBERSICHT — Raster (Seite /projekte/)
   ========================================================================== */
.proj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 4px;
}
.proj-card { position: relative; display: block; overflow: hidden; }
.proj-card__media { height: clamp(300px, 42vh, 460px); position: relative; overflow: hidden; }
.proj-card__media picture, .proj-card__media img { width: 100%; height: 100%; }
.proj-card__media img { object-fit: cover; transition: transform 1000ms var(--ease-standard); }
.proj-card:hover .proj-card__media img { transform: scale(1.04); }
.proj-card__media::after { content:""; position:absolute; inset:0; z-index: 1;
  background: linear-gradient(0deg, rgba(23,18,13, var(--scrim)) 0%, rgba(23,18,13,0) 55%); }
.proj-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--sp-6); }
.proj-card__title {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  letter-spacing: var(--track-display); color: #fff; font-size: var(--fs-24); line-height: 1;
}
.proj-card__meta { margin-top: var(--sp-2); font-family: var(--font-mono);
  font-size: var(--fs-12); letter-spacing: 0.03em; color: rgba(255,255,255,.86); text-transform: uppercase; }

/* ==========================================================================
   PROJEKT-DETAIL
   ========================================================================== */
.detail-head { padding: clamp(140px, 20vh, 210px) 0 var(--sp-10); }
.detail-head h1 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  letter-spacing: var(--track-display); line-height: 0.98;
  font-size: var(--fs-hero); margin: var(--sp-4) 0 0; text-wrap: balance;
}
.detail-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6);
  font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--on-dark-3);
}
.detail-meta .akz { color: var(--akzent); }
.detail-lead { margin-top: var(--sp-8); max-width: 60ch; }
.detail-media { display: grid; gap: 4px; }
.detail-media .full { width: 100%; }
.detail-media .full img { width: 100%; height: auto; }
.detail-video { position: relative; }
.detail-video video, .detail-video iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block;
}
.detail-back {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-12);
  font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--on-dark-2);
}
.detail-back:hover { color: var(--akzent); }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-16); align-items: end; }
.contact h2, .page-hero h1.contact-title {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  letter-spacing: var(--track-display); line-height: 0.98;
  font-size: var(--fs-hero); margin: var(--sp-4) 0 0;
}
.contact .lead { margin-top: var(--sp-6); max-width: 44ch; }
.contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); align-items: baseline; }
.contact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--on-dark-4); }
.contact dd { margin: 0; color: #fff; }
.contact dd a { border-bottom: 1px solid rgba(255,255,255,.3); }
.contact dd a:hover { color: var(--akzent); border-color: var(--akzent); }

/* ==========================================================================
   PROSE (Über, Impressum)
   ========================================================================== */
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-24);
  letter-spacing: var(--track-tight); margin: var(--sp-10) 0 var(--sp-3); }
.prose p { color: var(--on-dark-2); font-size: var(--fs-19); }
.prose a { color: var(--akzent); }
.prose a:hover { color: var(--akzent-hover); }
/* E-Mail als Grafik (Impressum): skaliert mit dem Fließtext, Akzentfarbe. */
.mail-svg { height: 1.25em; width: auto; vertical-align: -0.22em; }
.mail-svg text { font: 400 19px var(--font-mono); fill: var(--akzent); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer { background: var(--bg); padding: var(--sp-8) 0; border-top: 1px solid var(--line-dark); }
.foot-row { display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.foot-row, .foot-row a, .foot-row span {
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-wide);
  color: var(--on-dark-4); text-transform: uppercase;
}
.foot-row a:hover { color: var(--akzent); }

/* ==========================================================================
   REVEAL — Grundzustand sichtbar (kein JS / Druck / Capture), Verbergen nur unter .js
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard);
}
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero img { animation: none; }
  .hero-slide.is-leaving { transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
  .nav { gap: var(--sp-4); }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: var(--sp-5); padding: var(--sp-6) clamp(20px, 5vw, 48px);
    background: rgba(23,18,13,.92);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-dark);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base), transform var(--dur-base);
  }
  .nav-links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .statement .cols { grid-template-columns: 1fr; gap: var(--sp-6); }
  .svc { grid-template-columns: 56px 1fr; }
  .svc .svc-text { grid-column: 1 / -1; }
  .proj-duo { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
}