/* ══════════════════════════════════════════════════════════════════════════
   CI — David Haumann Foto- & Mediendesign
   ──────────────────────────────────────────────────────────────────────────
   Einzige Quelle für Farben, Schriften, Abstände und die Bausteine, die auf
   jeder Seite gleich sind (Footer, Skip-Link, Fokusringe, Druckansicht).

   Eingebunden in: index.html · impressum.html · datenschutz.html ·
                   danke.html · 404.html · projekte/*.html
   Wird VOR dem seiteneigenen <style> geladen — seitenspezifische Regeln
   überschreiben also weiterhin problemlos, was hier steht.

   Enthält seit dem 4.9.2026 auch die beiden globalen Komponenten
   (Datenschutzhinweis, Zurück-nach-oben-Knopf). Sie lagen vorher in eigenen
   Dateien, die jede Seite zusätzlich laden musste — drei blockierende
   Stylesheet-Abrufe statt einem. Die Regeln sind unverändert übernommen.

   ⚠ Der Shop liegt auf einer eigenen Subdomain mit strikter CSP und kann
     diese Datei nicht laden. Er hat unter shop/assets/ci.css eine bewusste
     Kopie. Änderungen an den Tokens (:root) hier bitte dort nachziehen —
     die Komponenten unten kennt der Shop nicht und braucht er nicht.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Farben ─────────────────────────────────────────────────────────── */
  --black: #0a0a0a;
  --white: #fafafa;
  --grey-light: #f2f2f0;
  --grey-mid: #c8c8c4;
  --grey-dark: #5a5a56;
  /* Weinrot – die Markenfarbe. Seit dem Audit vom 5.10.2026 als Fläche
     (Buttons, Footer, Auftraggeber-Leiste) und als Detail auf hellem Grund
     (Schlusspunkt der Überschriften, Kennzeilen-Quadrate, große Zahlen). */
  --accent: #8b1a2f;
  /* Aufgehelltes Weinrot für Text auf Schwarz. Das echte Weinrot erreicht
     dort nur 2,2:1 (WCAG verlangt 4,5:1) – dieser Ton ist die hellste noch
     erkennbare Variante desselben Farbtons (4,9:1). Auf Schwarz daher nur
     für Text und feine Details; Flächen bleiben echtes Weinrot. */
  --accent-on-dark: #d4526b;

  /* Randradius der großen abgerundeten Panels (Hero, Featured Work, Footer,
     sowie die hellgrauen Panels wie Zahlen/FAQ) */
  --panel-radius: 28px;

  /* ── Layout-Raster (seit Audit 5.10.2026) ──────────────────────────────
     Alle großen Abstände der Site kommen aus diesen sieben Werten. Sie
     werden unten bei 1024px und 640px gemeinsam verkleinert – dadurch
     bleiben die Verhältnisse auf jeder Bildschirmbreite gleich.

     --page-margin  Rahmen links/rechts um den Seiteninhalt (Nav und Footer
                    bleiben randlos, alles dazwischen sitzt im Rahmen)
     --gutter       Innenabstand links/rechts in jeder Sektion/jedem Panel
     --edge         = Rahmen + Innenabstand: die eine linke Textkante, auf der
                    Nav, Inhalt und Footer gemeinsam stehen
     --section-pad  Innenabstand oben/unten einer Sektion
     --head-gap     Abstand Sektionskopf -> Inhalt
     --band-pad     Innenabstand oben/unten der schmalen Bänder (Wortmarke,
                    USP-Leiste)
     --card-pad     Innenabstand von Karten und Kacheln
     --section-gap  Abstand zwischen zwei Panels (vom Nutzer auf 50px
                    festgelegt). Zwischen einem Panel und einer Sektion
                    ohne Hintergrund gilt stattdessen --section-pad, weil
                    dort keine sichtbare Kante den Abstand begrenzt. */
  --page-margin: 24px;
  --gutter: 48px;
  --edge: calc(var(--page-margin) + var(--gutter));
  --section-pad: 96px;
  --head-gap: 48px;
  --band-pad: 64px;
  --card-pad: 32px;
  --section-gap: 50px;

  /* ── Schriftgrößen-Skala (seit Audit 5.10.2026) ───────────────────────
     Vorher 17 verschiedene Größen allein auf der Startseite. Jetzt fünf
     Textstufen (Faktor ~1,15) und fünf Überschriftenstufen. Neue Regeln
     bitte nur mit diesen Werten. */
  --fs-xs: 11px;    /* gesperrte Versal-Labels (Formular, Bildunterschrift, Footer-Leiste) */
  --fs-sm: 13px;    /* Eyebrows, Navigation, Nummerierungen, Meta, Hinweise */
  --fs-base: 15px;  /* Karten- und Listentexte, Akkordeon, Buttons */
  --fs-md: 17px;    /* Fließtext */
  --fs-lg: 20px;    /* Einleitungen (Lede) */
  --fs-h4: clamp(20px, 1.8vw, 24px);  /* Karten-, Kachel-, Akkordeon-Titel */
  --fs-h3: clamp(24px, 2.8vw, 36px);  /* Claim, Preise, Projekttitel */
  --fs-h2: clamp(32px, 4.2vw, 56px);  /* Sektionsüberschriften */
  --fs-h1: clamp(36px, 5vw, 72px);    /* Seitentitel, Kontakt, große Zahlen */
  --fs-hero: clamp(42px, 6.8vw, 104px);

  /* ── Schriften ──────────────────────────────────────────────────────── */
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  /* Für große, fette Versal-Headlines im Reelio-Stil: Systemschriften mit
     echtem Heavy/Black-Schnitt (SF Pro auf Mac, Segoe UI auf Windows) statt
     nur unecht fett gerendertem Helvetica – bewusst ohne Webfont-Nachladen
     (kein Google-Fonts-Request, siehe Cookie-Hinweis: keine Drittanbieter-
     Aufrufe). */
  --font-display: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;

  /* ── Abstandsskala ──────────────────────────────────────────────────── */
  /* Bildet den Rhythmus ab, der ohnehin überall verwendet wird (8er-Raster).
     Für neue Regeln bitte diese Werte nutzen statt neuer px-Zahlen. */
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ── Effekte & Layout ───────────────────────────────────────────────── */
  --shadow-sm: 0 2px 16px rgba(10,10,10,0.07);
  --shadow-md: 0 12px 32px rgba(10,10,10,0.10);
  --radius: 3px;
  /* Feste Höhe der Navigation – die Nav bekommt genau diese Höhe, damit
     Seitenrahmen und Sticky-Elemente nie mehr von gemessenen Werten abhängen. */
  --nav-h: 80px;

  /* Mindestgröße für Tippziele auf Touchgeräten (WCAG 2.5.8) */
  --tap-target: 44px;
}

@media (max-width: 1024px) {
  :root {
    --page-margin: 16px;
    --gutter: 32px;
    --section-pad: 64px;
    --head-gap: 32px;
    --band-pad: 48px;
    --section-gap: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --page-margin: 12px;
    --gutter: 20px;
    --section-pad: 48px;
    --head-gap: 24px;
    --band-pad: 32px;
    --card-pad: 24px;
    --section-gap: 20px;
    --fs-lg: 18px;
  }
}

/* ─── Weiche Seitenübergänge (View Transitions API) ──────────────────────
   Lässt den Wechsel zwischen zwei Seiten dieser Site (z. B. Startseite ->
   Projektseite) in unterstützenden Browsern sanft überblenden statt hart
   zu schneiden. Kein JavaScript nötig; Browser ohne Unterstützung
   ignorieren die Regel einfach und zeigen weiterhin den normalen,
   sofortigen Seitenwechsel – keine Fallback-Logik nötig. */
@view-transition {
  navigation: auto;
}

/* ─── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Basis ───────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sicherheitsnetz gegen seitliches Scrollen durch randlose Fotos, deren
     versetzte Rahmen-/Icon-Elemente knapp über den Viewport hinausragen
     könnten. Wirkt nur horizontal, das vertikale Bluten bleibt unberührt. */
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ─── Scroll-Einblendung (progressive enhancement, siehe site.js) ────────
   Ohne JS oder ohne IntersectionObserver bekommt ein Element nie die Klasse
   "reveal-armed" und bleibt schlicht bei opacity: 1 / transform: none –
   vollständig lesbar und an seinem endgültigen Platz.

   Richtung per data-reveal-Wert: "left"/"right" lassen das Element seitlich
   hereinfliegen, alles andere (kein Wert, "up") von unten – so bauen sich
   Sektionen aus mehreren Richtungen auf statt immer gleich von unten. */
[data-reveal] {
  opacity: 1;
  transform: none;
  --reveal-x: 0px;
  --reveal-y: 22px;
}
[data-reveal="left"] { --reveal-x: -56px; --reveal-y: 0px; }
[data-reveal="right"] { --reveal-x: 56px; --reveal-y: 0px; }

[data-reveal].reveal-armed {
  opacity: 0.35;
  transform: translate(var(--reveal-x), var(--reveal-y));
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
[data-reveal].is-revealed { opacity: 1; transform: translate(0, 0); }

/* ─── NAVIGATION ───────────────────────────────────────────────────────
   Auf jeder Seite identisch (Startseite und Unterseiten) – vorher gab es
   zwei leicht unterschiedliche Nav-Varianten (Startseite mit Hamburger-Menü,
   Unterseiten mit schlichtem "Zurück"-Link), was sich inkonsistent anfühlte.
   Jetzt überall dieselbe Nav mit vollständigen Menüpunkten; site.js liefert
   dazu die Hamburger-Logik. */
/* body > nav statt nav: der Footer enthält ein eigenes <nav> für die
   Seitenlinks, das sonst ebenfalls zur fixierten Kopfleiste würde. */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--edge);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.nav-logo {
  white-space: nowrap;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--black);
}

.nav-links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
}

.nav-links a {
  display: inline-block;
  white-space: nowrap;
  padding: 12px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 101;
  flex-shrink: 0;
  width: var(--tap-target);
  height: var(--tap-target);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--black);
}

/* Drei Striche morphen zum Kreuz statt eines starren Hamburger-Icons zu
   wechseln – zwei Linien drehen sich in die Mitte, die mittlere blendet aus. */
.nav-toggle-icon {
  /* display:block ist Pflicht – als <span> (inline) wurden Breite und Höhe
     ignoriert, das Symbol war 0x0 groß und auf dem Handy unsichtbar. */
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
  margin-left: auto; /* rechtsbündig: Striche enden auf der Inhaltskante */
}

.nav-toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), top 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s;
}

.nav-toggle-icon span:nth-child(1) { top: 0; }
.nav-toggle-icon span:nth-child(2) { top: 7px; }
.nav-toggle-icon span:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Navigation braucht ~969px für eine Zeile -> Hamburger schon ab 1000px */
@media (max-width: 1000px) {
  .nav-logo { white-space: normal; }
  .nav-toggle { display: block; }

  /* Vollflächiges Overlay-Menü, das sich per Kreisblende vom Toggle-Knopf
     aus öffnet (clip-path), statt eines simplen Dropdowns. --ox/--oy setzt
     site.js anhand der Knopf-Position, bevor die Klasse "is-open" greift. */
  /* Startet unterhalb der Nav-Leiste (nicht inset:0) – Logo und weißer
     Leisten-Hintergrund bleiben so sichtbar, statt vom Overlay verdeckt zu
     werden (der Toggle-Knopf sitzt ohnehin schon per z-index darüber). */
  .nav-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--black);
    padding: var(--section-pad) var(--edge);
    overflow-y: auto;
    clip-path: circle(0% at var(--ox, 100%) var(--oy, 0%));
    transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
    visibility: hidden;
  }

  .nav-links::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(640px 480px at 88% 10%, rgba(255, 255, 255, 0.08), transparent 70%);
  }

  .nav-links.is-open {
    clip-path: circle(150% at var(--ox, 100%) var(--oy, 0%));
    transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: visible;
  }

  .nav-links { list-style: none; counter-reset: navnum; }

  .nav-links li {
    counter-increment: navnum;
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }

  .nav-links li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

  .nav-links.is-open li {
    animation: navLinkIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .nav-links.is-open li:nth-child(1) { animation-delay: 0.1s; }
  .nav-links.is-open li:nth-child(2) { animation-delay: 0.16s; }
  .nav-links.is-open li:nth-child(3) { animation-delay: 0.22s; }
  .nav-links.is-open li:nth-child(4) { animation-delay: 0.28s; }
  .nav-links.is-open li:nth-child(5) { animation-delay: 0.34s; }

  @keyframes navLinkIn {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  .nav-links li::before {
    content: counter(navnum, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent-on-dark);
    font-variant-numeric: tabular-nums;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: var(--space-sm) 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--white);
    transition: color 0.2s;
  }

  .nav-links a:hover { color: var(--accent-on-dark); }

  @media (prefers-reduced-motion: reduce) {
    .nav-links, .nav-links.is-open, .nav-toggle-icon span { transition: none; }
    .nav-links li { animation: none !important; opacity: 1; transform: none; filter: none; }
  }
}

@media (max-width: 1024px) {
  :root { --nav-h: 72px; }
}

/* ─── Fokus (WCAG 2.4.7) ──────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Auf dunklen Flächen (Hero, Featured Work, Leistungen, Footer, Kontakt)
   den aufgehellten Akzent nutzen – der normale --accent hat auf Schwarz zu
   wenig Kontrast für einen barrierefreien Fokusring (WCAG 1.4.11). */
.panel-dark a:focus-visible,
.panel-dark button:focus-visible,
.kontakt a:focus-visible,
.kontakt button:focus-visible {
  outline-color: var(--accent-on-dark);
}

/* Nur für Screenreader (z. B. Hinweis "öffnet in neuem Tab"). */
.sr-only {
  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 (WCAG 2.4.1) ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ─── PILL-BUTTONS (seit 9/2026, ersetzt die alten Rechteck-Buttons) ─────
   Basisstil geht von hellem Untergrund aus (voll gefüllt = schwarz).
   Auf dunklen Flächen (Hero, Kontakt, Footer, .panel-dark) drehen sich die
   Farben um, siehe Overrides unten – so funktioniert dieselbe Klasse
   automatisch auf beiden Hintergründen. Seit dem Audit vom 5.10.2026 auch
   für <button> nutzbar (Kontaktformular) – vorher hatte das Formular einen
   eigenen eckigen Versal-Button, der aus der Reihe fiel. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  padding: var(--space-sm) var(--space-lg);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.btn-primary:hover {
  background: var(--black);
  transform: translateY(-1px);
}

.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary .chev {
  transition: transform 0.2s;
}

.btn-primary:hover .chev {
  transform: translateX(2px);
}

/* Auf dunklen Flächen bleibt der Button weinrot und wird beim Hover weiß. */
.hero .btn-primary:hover,
.kontakt .btn-primary:hover,
.panel-dark .btn-primary:hover {
  background: var(--white);
  color: var(--black);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 600;
  transition: color 0.2s;
}

.btn-secondary:hover {
  color: var(--accent);
}

.btn-secondary .chev {
  transition: transform 0.2s;
}

.btn-secondary:hover .chev {
  transform: translateX(3px);
}

.hero .btn-secondary:hover,
.kontakt .btn-secondary:hover,
.panel-dark .btn-secondary:hover {
  color: var(--accent-on-dark);
}

/* ─── PANELS (seit 9/2026) ──────────────────────────────────────────────
   Zwei Flächentypen im Look von reelio.framer.media: .panel-dark (Hero,
   Projekte, Leistungen, Kontakt, Footer) und .panel-light (Wortmarke,
   Intro, Zahlen, FAQ, Kopf der Unterseiten). Beide mit demselben Radius.
   (Die gestrichelten Blaupausen-Führungslinien, die anfangs zusätzlich auf
   den dunklen Panels lagen, wurden am 1.10.2026 wieder entfernt.) */
.panel-dark {
  position: relative;
  background: var(--black);
  color: var(--white);
  border-radius: var(--panel-radius);
  overflow: hidden;
}

.panel-light {
  background: var(--grey-light);
  border-radius: var(--panel-radius);
  overflow: hidden;
}

/* ─── SEITENRAHMEN & SEKTIONS-RHYTHMUS ────────────────────────────────────
   Gilt auf jeder Seite mit <main id="inhalt">. Zwei Sektionstypen:
     · Panels (.panel-dark/.panel-light bzw. Sektionen, die selbst eine
       Fläche sind): Abstand untereinander --section-gap, Innenabstand
       oben/unten --section-pad.
     · Sektionen ohne Hintergrund (.section-plain): haben keine sichtbare
       Kante, also auch keinen eigenen Innenabstand oben/unten – der Abstand
       zu den Nachbarn ist stattdessen --section-pad. So wirkt der Weißraum
       vor und nach jedem Inhalt überall gleich groß. */
main#inhalt {
  padding: calc(var(--nav-h) + var(--page-margin)) var(--page-margin) 0;
  /* Seitlich einfliegende Elemente (data-reveal="right", startet 56px
     versetzt) dürfen nicht über den Rand ragen – "clip" statt "hidden",
     weil hidden einen Scroll-Container erzeugt und position:sticky bricht
     (Projektseiten). body { overflow-x: hidden } allein reicht auf iOS nicht. */
  overflow-x: clip;
}

main#inhalt > * + * {
  margin-top: var(--section-gap);
}

main#inhalt > * + .section-plain,
main#inhalt > .section-plain + * {
  margin-top: var(--section-pad);
}

.section-plain .section-head { padding-top: 0; }
.section-plain > :last-child { padding-bottom: 0; }

/* Footer: gleicher Abstand zum letzten Inhalt wie zwischen zwei Panels. */
main#inhalt + footer { margin-top: var(--section-gap); }

/* ─── GEMEINSAME TEXTBAUSTEINE ────────────────────────────────────────────
   Eyebrow (kleine Kennzeile über Überschriften), Überschriften und Lede –
   auf der Startseite wie auf den Unterseiten dieselben Klassen. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--grey-dark);
  margin-bottom: var(--space-md);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--accent);
}

.hero .eyebrow,
.panel-dark .eyebrow,
.kontakt .eyebrow {
  color: var(--grey-mid);
}

.hero .eyebrow::before,
.panel-dark .eyebrow::before,
.kontakt .eyebrow::before {
  background: var(--accent-on-dark);
}

/* Schlusspunkt jeder großen Überschrift in Weinrot – das wiederkehrende
   Markendetail der Seite (auf Schwarz in der aufgehellten Variante). */
.dot { color: var(--accent); }

.hero .dot,
.panel-dark .dot,
.kontakt .dot { color: var(--accent-on-dark); }

::selection { background: var(--accent); color: var(--white); }

.display-h1,
.display-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  overflow-wrap: break-word;
  hyphens: auto;
}

.display-h1 { font-size: var(--fs-h1); }
.display-h2 { font-size: var(--fs-h2); }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--grey-dark);
}

.lede strong { color: var(--black); font-weight: 700; }

.hero .lede,
.panel-dark .lede,
.kontakt .lede {
  color: var(--grey-mid);
}

.hero .lede strong,
.panel-dark .lede strong,
.kontakt .lede strong {
  color: var(--white);
}

/* Sektionskopf: links Eyebrow + Überschrift, rechts die Lede, unten bündig. */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: end;
  padding: var(--section-pad) var(--gutter) var(--head-gap);
}

/* Seitenkopf der Unterseiten: helles Panel nur mit Sektionskopf – unten
   daher volles --section-pad statt --head-gap (wie das Intro der Startseite). */
.page-head .section-head { padding-bottom: var(--section-pad); }

/* ─── RECHTSTEXTE (Impressum, Datenschutz) ────────────────────────────────
   Label links, Text rechts – auf derselben Zweiteilung wie .section-head,
   der Text beginnt also auf der Linie der Lede im Seitenkopf. Feine graue
   Trennlinien wie im Akkordeon statt der früheren schwarzen Rasterlinien. */
.legal-list { padding: 0 var(--gutter); }

.legal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--grey-mid);
}

.legal-row:first-child { border-top: none; padding-top: 0; }

.legal-row dt {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}


.legal-label {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.25;
}

.legal-row dd {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--grey-dark);
  max-width: 640px;
}

.legal-row dd > * + * { margin-top: var(--space-sm); }

.legal-row address { font-style: normal; }
.legal-row address strong { color: var(--black); }

.rechtsgrundlage {
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-sm);
  font-style: italic;
}

.copyright-note { font-size: var(--fs-sm); font-style: italic; color: var(--black); }

.rights-list { list-style: none; }

.rights-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--grey-light);
}

.rights-list li:last-child { border-bottom: none; }
.rights-list .right-name { font-weight: 700; color: var(--black); }

@media (max-width: 1024px) {
  .legal-row { grid-template-columns: 1fr; gap: var(--space-xs); }
}

@media (max-width: 640px) {
  .rights-list li { grid-template-columns: 1fr; gap: 0; }
}

/* Fließtext-Links in Textspalten (Rechtsseiten, Projektseiten). */
.text-link {
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  transition: color 0.2s;
}

.text-link:hover { color: var(--accent); }

@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* ─── FOOTER ──────────────────────────────────────────────────────────── */
/* Weinrote Schlussfläche seit dem Audit vom 5.10.2026 – vorher schwarz wie
   die Panels darüber, mit viel Leerraum neben Uhr und Kennzeile. Jetzt:
   oben der Claim als Überschrift, darunter vier gleich gebaute
   Spalten (Label + Inhalt), unten die Rechtsleiste. Randlos über die ganze
   Breite, Text auf derselben Kante (--edge) wie Nav und Seiteninhalt.
   Weiß auf Weinrot: 9,2:1; Weiß 75 % (Labels): 5,8:1. */
.site-footer {
  background: var(--accent);
  color: var(--white);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: end;
  padding: var(--section-pad) var(--edge) var(--head-gap);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-claim {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
}

.footer-intro {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  max-width: 520px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--head-gap) var(--gutter);
  padding: var(--head-gap) var(--edge);
}

.footer-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-sm);
}

.footer-text {
  font-style: normal;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.footer-mail {
  display: inline-block;
  margin-bottom: var(--space-2xs);
  padding-bottom: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s;
}

.footer-mail:hover { border-color: var(--white); }

.footer-sitelinks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-sitelinks a {
  font-size: var(--fs-base);
  color: var(--white);
  text-decoration: none;
  text-underline-offset: 4px;
}

.footer-sitelinks a:hover { text-decoration: underline; }

.footer-clock {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.footer-bottom {
  padding: var(--space-md) var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Untere Leiste: alles im selben gesperrten Label-Stil. */
.footer-meta,
.footer-links a,
.site-footer .cookie-reopen {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 10px 0;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover,
.site-footer .cookie-reopen:hover { color: var(--white); }

.site-footer a:focus-visible,
.site-footer button:focus-visible { outline-color: var(--white); }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr; align-items: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ─── Tippziele auf Touchgeräten (WCAG 2.5.8) ─────────────────────────── */
/* Nur dort, wo tatsächlich mit dem Finger bedient wird — verändert das
   Aussehen nicht, vergrößert lediglich die Trefferfläche. */
@media (pointer: coarse) {
  .footer-links a,
  .footer-links button {
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
  }
}

/* ─── Druckansicht ────────────────────────────────────────────────────── */
/* Impressum, Datenschutz und Rechtstexte werden erfahrungsgemäß ausgedruckt
   oder als PDF gesichert. Ohne diese Regeln landen Navigation, Cookie-Banner
   und der Zurück-nach-oben-Knopf mit auf dem Papier. */
@media print {
  body > nav,
  .skip-link,
  .back-to-top,
  #cookie-banner,
  .cookie-reopen,
  .nav-toggle {
    display: none !important;
  }

  html { scroll-behavior: auto; }

  body {
    background: #fff;
    color: #000;
    font-family: var(--font-serif);
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Feste Positionierung bricht den Seitenumbruch */
  * { position: static !important; box-shadow: none !important; }

  main, .section-head, .legal-list { padding-left: 0; padding-right: 0; }
  .panel-dark, .panel-light, .site-footer, .client-band { background: none !important; color: #000 !important; border-radius: 0; }

  /* Zieladresse ausschreiben — auf Papier ist ein Link sonst wertlos */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }

  /* Interne Anker, Seitenlinks und E-Mail-Adressen brauchen keine
     ausgeschriebene URL — bei mailto steht die Adresse bereits im Linktext. */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href$=".html"]::after { content: ""; }

  h1, h2, h3 { page-break-after: avoid; }
  p, li, address { page-break-inside: avoid; }

  footer {
    border-top: 1px solid #000;
    padding-top: 12pt;
  }

  .footer-grid, .footer-top { grid-template-columns: 1fr; padding: 0; }
  .footer-links { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBALE KOMPONENTEN
   Beide bauen sich per JavaScript selbst ins DOM (site.js). Die Regeln
   standen bis zum 4.9.2026 in cookie-banner.css und back-to-top.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Datenschutzhinweis-Banner ───────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--black);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--edge);
}

.cb-text {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  max-width: 680px;
}

.cb-text a {
  display: inline-block;
  padding: 4px 0;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-on-dark);
  transition: color 0.2s;
}

.cb-text a:hover {
  color: var(--accent-on-dark);
}

.cb-actions {
  flex-shrink: 0;
}

.cb-btn {
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  padding: var(--space-xs) var(--space-lg);
  transition: background 0.2s, color 0.2s;
}

.cb-btn:hover {
  background: var(--white);
  color: var(--black);
}

#cookie-banner a:focus-visible,
#cookie-banner button:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .cb-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .cb-btn {
    width: 100%;
    text-align: center;
  }
}

/* Footer-Schaltfläche, die den Hinweis erneut einblendet */
.cookie-reopen {
  display: inline-block;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--grey-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.cookie-reopen:hover {
  color: var(--black);
}

/* ─── Zurück-nach-oben-Knopf ──────────────────────────────────────────── */
/* Die "bottom"-Werte hier und die Basiswerte in site.js müssen zusammen
   passen — das Skript rechnet sie beim Scrollen hoch, damit der Knopf dem
   Footer ausweicht statt ihn zu überlagern. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, background 0.2s, visibility 0.25s;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.18);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  display: block;
}

.back-to-top svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.01ms, visibility 0.01ms;
  }
}