/* ==========================================================================
   DOMINIK JAMBRESIC MEDIA — Design System
   Editorial / Agency Style · Ink + Paper + Signal
   Ein einziger Ort für alle Design-Entscheidungen.
   ========================================================================== */

/* Schriften liegen lokal (latin-Subset), damit keine Verbindung zu Google entsteht. */
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Farben — Schwarz-Weiß. Grautöne nur für Zweitinformation (muted) und Flächen. */
  --ink:        #0A0A0A;
  --ink-soft:   #161616;
  --paper:      #FFFFFF;
  --paper-2:    #F2F2F2;
  --paper-3:    #E4E4E4;
  --muted:      #5A5A5A;
  --muted-2:    #8A8A8A;

  /* Es gibt keine Signalfarbe mehr: Hervorhebung läuft über Schwarz und
     Umkehrung (schwarz ↔ weiß), nicht über Farbe. */
  --accent:     #0A0A0A;
  --accent-ink: #FFFFFF;
  --accent-dim: #EDEDED;
  --blue:       #0A0A0A;

  --line:       rgba(10, 10, 10, .14);
  --line-2:     rgba(10, 10, 10, .08);
  --line-inv:   rgba(255, 255, 255, .18);

  /* Zwei Schriften, ein Charakter: Die Didone-Serif trägt die Wortmarke und
     alle großen Zeilen (hoher Strichkontrast, editorial), die geometrische
     Grotesk übernimmt Lauftext, Navigation, Labels und Buttons. */
  --ff: "Figtree", "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-display: "Playfair Display", "Bodoni Moda", "Didot", "Times New Roman", serif;

  --fs-display: clamp(2.4rem, 6.3vw, 5.7rem);
  --fs-h1:      clamp(2.4rem, 6.2vw, 5.6rem);
  --fs-h2:      clamp(2rem, 4.6vw, 4rem);
  --fs-h3:      clamp(1.35rem, 2.1vw, 1.9rem);
  --fs-lead:    clamp(1.1rem, 1.7vw, 1.5rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.075rem);
  --fs-small:   .875rem;
  --fs-micro:   .72rem;

  /* Die Serif verträgt keine so enge Laufweite wie die Grotesk vorher:
     bei -.045em kleben die Serifen aneinander. */
  --tracking-display: -.02em;
  --tracking-tight:   -.015em;
  --tracking-wide:    .16em;

  /* Raum */
  --gap:      clamp(16px, 2vw, 28px);
  --pad-x:    clamp(20px, 4.4vw, 72px);
  --sec-y:    clamp(72px, 9.5vw, 168px);
  --maxw:     1480px;
  --maxw-text: 68ch;

  /* Form */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  40px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Einschieben von links — dezenter Versatz, ruhige Kurve */
  --slide-x:    46px;
  --slide-in:   .85s;
  --slide-ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur: .55s;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 14px 22px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 1080px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.section--ink {
  background: var(--ink);
  color: var(--paper);
  --line: var(--line-inv);
  --muted: #A6A6A6;
  --muted-2: #707070;
}
.section--paper2 { background: var(--paper-2); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 1000px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap); }
.between { justify-content: space-between; }
.rule { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   4. TYPOGRAFIE
   -------------------------------------------------------------------------- */
.display, .h1, .h2, .h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .98; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 {
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
  line-height: 1.15;
  font-weight: 600;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.42;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 46ch;
  font-weight: 500;
}

.body-text { max-width: var(--maxw-text); color: var(--muted); }
.body-text p + p { margin-top: 1em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}

.accent { color: var(--accent); }
.muted  { color: var(--muted); }
.mono-num {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .9;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
}

.big-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; letter-spacing: -.02em;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.big-link:hover { color: var(--accent); gap: .9em; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-hover-bg: var(--paper);   /* Hover kehrt um: schwarz → weiß */
  --btn-hover-fg: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn > * { position: relative; z-index: 2; }
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--btn-hover-bg);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  color: var(--btn-hover-fg);
  /* Ein weißer Button auf weißem Grund braucht eine Kante. */
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 12px 30px rgba(10,10,10,.14);
}
.btn:hover::after { transform: translateY(0); }

/* Es gibt keine Akzentfarbe mehr — .btn--accent ist der normale schwarze Button. */
.btn--accent { --btn-bg: var(--ink); --btn-fg: var(--paper); }

/* Auf dunklem Grund ist der Button weiß und kehrt beim Hover nach schwarz um. */
.footer .btn,
.section--ink .btn,
.cookie .btn--accent,
.plan--featured .btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-hover-bg: var(--ink);
  --btn-hover-fg: var(--paper);
}
.footer .btn:hover,
.section--ink .btn:hover,
.cookie .btn--accent:hover,
.plan--featured .btn:hover { box-shadow: inset 0 0 0 1.5px var(--paper), 0 12px 30px rgba(0,0,0,.35); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: currentColor;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost { --btn-hover-bg: var(--ink); --btn-hover-fg: var(--paper); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

.btn--lg { padding: 20px 36px; font-size: 1.05rem; }
.btn--sm { padding: 11px 20px; font-size: .85rem; }

.btn-arrow {
  width: 1em; height: 1em; flex: none;
  transition: transform .35s var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
/* KEIN BALKEN, IMMER SICHTBAR. Der Header ist durchsichtig und liegt mit
   `mix-blend-mode: difference` über der Seite: Alles, was hier weiß
   gezeichnet wird, erscheint auf hellen Flächen schwarz und auf dunklen
   Flächen weiß — und kippt beim Scrollen von selbst, ohne dass JavaScript
   Farben umschalten muss. Deshalb sind alle Farben in diesem Abschnitt
   "verkehrt herum" notiert: weiß = wird schwarz auf weiß.
   (Die frühere Lösung — ab dem ersten Scrollen ein schwarzer Balken —
   ist damit abgelöst.) */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  color: #fff;
  mix-blend-mode: difference;
  isolation: auto;
  /* Die leere Fläche darf keine Klicks schlucken. */
  pointer-events: none;
}
.header a, .header button, .header .nav { pointer-events: auto; }   /* .nav mit, sonst reißt der Hover zwischen Strichen und Punkten ab */
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Buttons im Header: weiß notiert, damit sie schwarz auf weiß erscheinen. */
.header .btn--accent {
  --btn-bg: #fff; --btn-fg: #000;
  --btn-hover-bg: #000; --btn-hover-fg: #fff;
  color: var(--btn-fg);
}
.header .btn--accent:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.header { --burger-bg: #fff; --burger-fg: #000; }

/* ---------- Wortmarke: schwarzer Block, weißer Schriftzug ---------------- */
/* Als Inline-SVG, damit der schräge Akzent statt des j-Punkts überall
   gleich sitzt (Koordinaten im Browser an Playfair Display gemessen).
   Im Header verkehrt herum eingefärbt (weißer Block), durch die Differenz-
   Verrechnung erscheint er schwarz — und weiß auf dunklen Abschnitten. */
.logo { display: inline-block; line-height: 0; }
.logo-svg { height: 58px; width: auto; display: block; }
.logo-bg { fill: var(--logo-bg, #000); }
.logo-fg { fill: var(--logo-fg, #fff); }
.header .logo { --logo-bg: #fff; --logo-fg: #000; }
.header .wrap > .logo { margin-right: auto; }

/* ---------- Navigation: drei Punkte, die sich zum Hamburger falten ------- */
.nav { position: relative; display: flex; align-items: center; margin-right: clamp(4px, 1vw, 16px); }
.nav-links {
  position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 38px);
  padding-right: clamp(14px, 1.6vw, 22px);
  white-space: nowrap;
}
.nav a {
  font-weight: 600; font-size: .9rem; letter-spacing: -.01em;
  position: relative; padding: 6px 0;
  opacity: 1;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Der Umschalter: drei Striche, oben unsichtbar und ohne Breite. */
.nav-toggle {
  width: 0; height: 40px;
  opacity: 0;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 5px;
  overflow: hidden;
  transition: width .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span {
  display: block; width: 22px; height: 1.8px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}

/* Gefaltet (ab dem ersten Scrollen): Punkte wandern nach rechts in den
   Umschalter und blenden aus — von links nach rechts gestaffelt —, dann
   wachsen die Striche von rechts heraus. */
.header.is-folded .nav-toggle { width: 40px; opacity: 1; }
.header.is-folded .nav-toggle span { transform: scaleX(1); }
.header.is-folded .nav-toggle span:nth-child(1) { transition-delay: .28s; }
.header.is-folded .nav-toggle span:nth-child(2) { transition-delay: .34s; }
.header.is-folded .nav-toggle span:nth-child(3) { transition-delay: .40s; }
.header.is-folded .nav a { opacity: 0; transform: translateX(28px); pointer-events: none; }
.header.is-folded .nav a:nth-child(1) { transition-delay: 0s; }
.header.is-folded .nav a:nth-child(2) { transition-delay: .06s; }
.header.is-folded .nav a:nth-child(3) { transition-delay: .12s; }

/* Berührt die Maus den Umschalter (oder Tastaturfokus / Tipp auf Touch),
   klappen die Punkte wieder nach links aus — der nächste zuerst. */
.header.is-folded .nav:hover a,
.header.is-folded .nav:focus-within a,
.header.is-folded .nav.is-open a { opacity: 1; transform: none; pointer-events: auto; }
.header.is-folded .nav:hover a:nth-child(3),
.header.is-folded .nav:focus-within a:nth-child(3),
.header.is-folded .nav.is-open a:nth-child(3) { transition-delay: 0s; }
.header.is-folded .nav:hover a:nth-child(2),
.header.is-folded .nav:focus-within a:nth-child(2),
.header.is-folded .nav.is-open a:nth-child(2) { transition-delay: .07s; }
.header.is-folded .nav:hover a:nth-child(1),
.header.is-folded .nav:focus-within a:nth-child(1),
.header.is-folded .nav.is-open a:nth-child(1) { transition-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .nav a, .nav-toggle, .nav-toggle span { transition-duration: .001ms !important; transition-delay: 0s !important; }
}

.header-cta { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--burger-bg, var(--ink));
  color: var(--burger-fg, var(--paper));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.burger span {
  display: block; width: 17px; height: 1.8px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

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

/* Offenes Overlay-Menü: Die Differenz-Verrechnung dreht den Header über der
   schwarzen Fläche von selbst auf Weiß — es braucht keine Sonderregel mehr. */

/* Mobile Overlay-Menü */
.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  padding: calc(var(--header-h) + 28px) var(--pad-x) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: circle(0% at calc(100% - 46px) 38px);
  transition: clip-path .7s var(--ease);
  pointer-events: none;
  overflow-y: auto;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 46px) 38px); pointer-events: auto; }
.menu-list a {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 700; letter-spacing: -.02em;
  padding: 8px 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu.is-open .menu-list a { opacity: 1; transform: none; }
.menu-list li:nth-child(1) a { transition-delay: .12s; }
.menu-list li:nth-child(2) a { transition-delay: .17s; }
.menu-list li:nth-child(3) a { transition-delay: .22s; }
.menu-list li:nth-child(4) a { transition-delay: .27s; }
.menu-list li:nth-child(5) a { transition-delay: .32s; }
.menu-list a:hover { color: var(--paper); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 18px; font-size: .9rem; color: var(--muted-2); padding-top: 30px; border-top: 1px solid var(--line-inv); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  padding-top: calc(var(--header-h) + clamp(40px, 7vw, 90px));
  padding-bottom: clamp(40px, 6vw, 80px);
  position: relative;
}
.hero-head { position: relative; }
.hero-title { position: relative; z-index: 2; }
.line { display: block; }

/* Wort-Reveal */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: .08em .30em;
  margin-block: -.08em -.30em;
}
.reveal-word > span {
  display: inline-block;
  /* Um die volle Maskenhöhe verschieben, sonst lugt das Wort im Ruhezustand
     unten aus dem vergrößerten Sichtfenster heraus. */
  transform: translateY(calc(100% + .40em));
  transition: transform .9s var(--ease);
}
.is-revealed .reveal-word > span { transform: none; }
.reveal-word:nth-child(1) > span { transition-delay: .05s; }
.reveal-word:nth-child(2) > span { transition-delay: .11s; }
.reveal-word:nth-child(3) > span { transition-delay: .17s; }
.reveal-word:nth-child(4) > span { transition-delay: .23s; }
.reveal-word:nth-child(5) > span { transition-delay: .29s; }
.reveal-word:nth-child(6) > span { transition-delay: .35s; }
.reveal-word:nth-child(7) > span { transition-delay: .41s; }
.reveal-word:nth-child(8) > span { transition-delay: .47s; }

/* Der Signal-Block, der in die Headline schneidet (dd.nyc-Prinzip) */
.hero-mark {
  position: absolute;
  z-index: 1;
  width: clamp(110px, 13vw, 205px);
  aspect-ratio: 1;
  right: clamp(4%, 9vw, 14%);
  top: -4%;
  background: var(--accent);
  border-radius: 30% 30% 30% 6%;
  animation: markFloat 9s var(--ease) infinite;
  mix-blend-mode: multiply;
}
@keyframes markFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); border-radius: 30% 30% 30% 6%; }
  50%      { transform: translateY(-14px) rotate(6deg); border-radius: 42% 22% 38% 12%; }
}

/* Rotierendes Siegel */
.seal {
  position: relative;
  width: clamp(96px, 11vw, 132px); height: clamp(96px, 11vw, 132px);
  flex: none;
  display: grid; place-items: center;
}
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.seal-core {
  width: 38%; height: 38%; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
}
.seal-core svg { position: static; width: 42%; height: 42%; animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat b { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.hero-stat span { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); font-weight: 700; }

.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   8. MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(14px, 1.6vw, 22px);
  background: inherit;
  --marquee-dur: 34s;
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee var(--marquee-dur) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
.marquee-item {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(.95rem, 1.35vw, 1.15rem);
  white-space: nowrap;
}
.marquee-item::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee--xl { border: 0; padding-block: clamp(20px, 3vw, 40px); --marquee-dur: 26s; }
.marquee--xl .marquee-item {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 7vw, 6rem);
  font-weight: 700; letter-spacing: -.02em;
}
.marquee--xl .marquee-item::before { width: clamp(12px, 1.6vw, 22px); height: clamp(12px, 1.6vw, 22px); }
.marquee--xl .marquee-item.is-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
}

/* --------------------------------------------------------------------------
   9. KARTEN & LEISTUNGEN
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 70%;
  background: radial-gradient(closest-side, var(--accent-dim), transparent 72%);
  opacity: 0; transition: opacity .55s var(--ease); pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: rgba(10,10,10,.3); box-shadow: 0 22px 50px -28px rgba(10,10,10,.4); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card p { color: var(--muted); }
.card-num {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--tracking-wide);
  color: var(--muted-2);
}
.card-icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  transition: background .4s, color .4s, transform .5s var(--ease);
}
.card-icon svg { width: 21px; height: 21px; }
.card:hover .card-icon { background: var(--accent); color: var(--accent-ink); transform: rotate(-8deg); }

.card-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.tag {
  font-size: .78rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--muted);
  white-space: nowrap;
}
.section--ink .card { background: var(--ink-soft); border-color: var(--line-inv); }
.section--ink .tag { background: rgba(243, 236, 222,.08); color: var(--paper); }
.section--ink .card-icon { background: var(--paper); color: var(--ink); }

/* Leistungs-Zeilen (großformatige Liste) */
.svc-list { border-top: 1px solid var(--line); }
.svc-row {
  border-bottom: 1px solid var(--line);
  position: relative;
}
.svc-row > button {
  width: 100%;
  display: flex; align-items: center; gap: var(--gap);
  padding: clamp(22px, 2.6vw, 38px) 0;
  text-align: left;
  transition: padding-inline .5s var(--ease), color .4s;
}
.svc-row > button:hover { padding-inline: clamp(8px, 1.4vw, 24px); color: var(--accent); }
.svc-idx { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--tracking-wide); color: var(--muted-2); width: 3.2em; flex: none; }
.svc-title { font-family: var(--ff-display); font-size: clamp(1.5rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; flex: 1; }
.svc-plus { width: 34px; height: 34px; flex: none; position: relative; border-radius: 50%; border: 1.5px solid var(--line); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.svc-plus::before, .svc-plus::after {
  content: ""; position: absolute; inset: 50% 25%; height: 1.5px; background: currentColor;
  transform: translateY(-50%); transition: transform .4s var(--ease), opacity .3s;
}
.svc-plus::after { transform: translateY(-50%) rotate(90deg); }
.svc-row[data-open="true"] .svc-plus { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: rotate(180deg); }
.svc-row[data-open="true"] .svc-plus::after { opacity: 0; }
.svc-panel { overflow: hidden; height: 0; transition: height .55s var(--ease); }
.svc-panel-inner {
  display: grid; grid-template-columns: 3.2em 1fr 1fr; gap: var(--gap);
  padding-bottom: clamp(24px, 3vw, 44px);
}
.svc-panel-inner > :first-child { grid-column: 2; }
@media (max-width: 820px) {
  .svc-panel-inner { grid-template-columns: 1fr; }
  .svc-panel-inner > :first-child { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   10. KANÄLE
   -------------------------------------------------------------------------- */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.channel {
  background: var(--paper);
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 10px;
  transition: background .4s, color .4s;
}
.channel:hover { background: var(--ink); color: var(--paper); }
.channel svg { width: 26px; height: 26px; }
.channel b { font-weight: 700; letter-spacing: -.02em; }
.channel span { font-size: .82rem; color: var(--muted); }
.channel:hover span { color: rgba(243, 236, 222,.7); }
.section--ink .channel { background: var(--ink-soft); }
.section--ink .channel:hover { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   11. ARBEITEN / CASES
   -------------------------------------------------------------------------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }
.work-grid > *:nth-child(4n+1),
.work-grid > *:nth-child(4n+4) { margin-top: 0; }
@media (min-width: 761px) {
  .work-grid > *:nth-child(even) { margin-top: clamp(20px, 5vw, 72px); }
}

.work {
  display: block; position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.work-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-3);
  display: grid; place-items: center;
}
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work:hover .work-media img { transform: scale(1.05); }
.work-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.55), transparent 55%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.work:hover .work-media::after { opacity: 1; }
.work-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 8px;
  text-align: center; padding: 24px;
  color: var(--muted-2);
  font-weight: 700; letter-spacing: -.02em;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(10,10,10,.045) 14px 28px),
    var(--paper-2);
}
.work-cta {
  position: absolute; z-index: 2;
  left: 24px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: .85rem;
  transform: translateY(14px); opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.work:hover .work-cta { transform: none; opacity: 1; }
.work-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 18px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* --------------------------------------------------------------------------
   12. ZAHLEN / STATS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); }
.stat { padding: clamp(24px, 3vw, 44px) 0; background: inherit; }
.stat-grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat b { display: block; }
.stat span { font-size: .9rem; color: var(--muted); display: block; margin-top: 10px; max-width: 24ch; }

/* --------------------------------------------------------------------------
   13. PROZESS
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: clamp(56px, 7vw, 96px) 1fr 1.15fr;
  gap: var(--gap);
  align-items: start;
  padding-block: clamp(26px, 3.2vw, 46px);
  border-top: 1px solid var(--line);
  transition: background .5s var(--ease);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step:hover { background: rgba(10, 10, 10, .04); }
.step-n {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--accent); line-height: 1;
}
@media (max-width: 780px) { .step { grid-template-columns: 1fr; gap: 10px; } }

/* --------------------------------------------------------------------------
   14. PAKETE / PREISE
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; } }
.plan {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -34px rgba(10,10,10,.5); }
.plan--featured { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan--featured .muted, .plan--featured .plan-feat li { color: rgba(243, 236, 222,.72); }
.plan-flag {
  position: absolute; top: -13px; left: clamp(26px, 3vw, 42px);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill);
}
.plan-price { font-family: var(--ff-display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.plan-price small { font-size: .82rem; font-weight: 600; letter-spacing: 0; color: var(--muted); display: block; margin-top: 8px; }
.plan-feat { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; flex: 1; }
.plan-feat li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; color: var(--muted); }
.plan-feat svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent); }

/* --------------------------------------------------------------------------
   15. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(26px, 3vw, 44px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
}
.quote blockquote { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--muted); margin-top: auto; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--paper-3); display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: var(--muted); flex: none; }
.section--ink .quote { background: var(--ink-soft); border-color: var(--line-inv); }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.2vw, 30px) 0;
  text-align: left;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 700; letter-spacing: -.025em;
  transition: color .35s;
}
.faq-q:hover { color: var(--accent); }
.faq-a { overflow: hidden; height: 0; transition: height .5s var(--ease); }
.faq-a-inner { padding-bottom: clamp(20px, 2.2vw, 30px); color: var(--muted); max-width: var(--maxw-text); }
.faq-a-inner p + p { margin-top: .8em; }

/* --------------------------------------------------------------------------
   17. SICHTBARKEITS-CHECK
   -------------------------------------------------------------------------- */
.check {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  padding: clamp(26px, 3.4vw, 56px);
  position: relative;
  overflow: hidden;
}
.section--ink .check { background: var(--ink-soft); border-color: var(--line-inv); }
.check-progress { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 30px; }
.check-progress i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .5s var(--ease); }
.check-step { display: none; }
.check-step.is-active { display: block; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.check-opts { display: grid; gap: 10px; margin-top: 26px; }
.check-opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.check-opt:hover { border-color: var(--accent); transform: translateX(4px); }
.check-opt kbd {
  font: inherit; font-size: .72rem; font-weight: 800;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--paper-2); color: var(--muted);
  display: grid; place-items: center; flex: none;
}
.section--ink .check-opt kbd { background: rgba(243, 236, 222,.1); color: var(--paper); }
.check-score { font-family: var(--ff-display); font-size: clamp(3.4rem, 9vw, 6.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--accent); }
.check-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 24px 0; max-width: 460px; }
.check-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1s var(--ease); }

/* --------------------------------------------------------------------------
   18. FORMULAR
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--line);
  padding: 12px 2px;
  font-size: 1.05rem; font-weight: 500;
  border-radius: 0;
  transition: border-color .35s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); font-weight: 400; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 110px; }
.field-error { font-size: .8rem; color: var(--accent); font-weight: 600; display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--accent); }
.field.has-error .field-error { display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block;
  padding: 11px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.chip:hover span { transform: translateY(-2px); border-color: var(--accent); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.consent input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }

.form-note { font-size: .85rem; color: var(--muted); }
.form-status { font-weight: 600; font-size: .95rem; }
.form-status[data-state="ok"] { color: var(--ink); }
.form-status[data-state="err"] { color: var(--accent); }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* --------------------------------------------------------------------------
   19. CONTACT / CTA-BAND
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .display { max-width: 16ch; }

.contact-lines { display: grid; gap: 0; margin-top: clamp(24px, 3vw, 40px); }
/* Überschrift „Direkt erreichen" mit WhatsApp-Knopf daneben — schwarz-weiß
   wie alle Buttons: Kontur, beim Hover Umkehr nach Schwarz. */
.contact-head { display: flex; align-items: center; gap: 14px; }
/* WhatsApp-Zeichen direkt neben der Überschrift: nur die Kontur, kein Knopf. */
.wa-mark { display: inline-flex; width: 1.5em; height: 1.5em; font-size: var(--fs-h3); transition: transform .35s var(--ease), opacity .3s; }
.wa-mark svg { width: 100%; height: 100%; }
.wa-mark:hover { transform: translateY(-2px); opacity: .7; }
/* Kontakt-Kennzahlen ohne Trennlinie darüber */
.hero-meta--plain { border-top: 0; padding-top: 0; margin-top: clamp(28px, 3.5vw, 48px); }
.contact-line {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--line);
  transition: padding-inline .5s var(--ease), color .35s;
}
.contact-line:last-child { border-bottom: 1px solid var(--line); }
.contact-line:hover { padding-inline: 12px; color: var(--accent); }
.contact-line b { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); font-weight: 800; }
.contact-line span { font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
/* Der Footer füllt am Seitenende alles unterhalb des Headers aus, damit dort
   kein heller Streifen zwischen schwarzem Header und schwarzem Footer stehen
   bleibt. Die untere Leiste bleibt dabei unten verankert. */
.footer {
  background: var(--ink); color: var(--paper);
  --line: var(--line-inv); --muted: #A6A6A6;
  /* Ganz unten angekommen füllt der Footer den kompletten Bildschirm: nur
     noch Schwarz. Die Wortmarke im Footer ist bewusst weg — das fixierte
     Header-Logo landet beim Scrollen genau in der freien Ecke oben links
     (Abstand = Header-Höhe) und bleibt dort stehen, per Differenz-Blend
     weiß auf Schwarz. Die Spalten beginnen erst darunter. */
  padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px));
  /* 2 px Überstand, damit durch Rundung nie ein heller Haarstrich bleibt. */
  min-height: calc(100vh + 2px);
  display: flex;
  flex-direction: column;
}
.footer > .wrap { flex: 1; display: flex; flex-direction: column; }
.footer-word { margin-top: auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--gap); padding-bottom: clamp(40px, 5vw, 70px); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer h4 { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); font-weight: 800; margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-weight: 600; font-size: .95rem; transition: color .3s, padding-left .35s var(--ease); }
/* Bleibt weiß: --accent ist Schwarz und verschwände auf dem Footer. Der Mauskreis
   (difference) färbt die Schrift unter sich von selbst schwarz. */
.footer-links a:hover { color: var(--paper); padding-left: 6px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding-block: 26px; border-top: 1px solid var(--line-inv);
  font-size: .82rem; color: var(--muted);
}
.footer-word {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 15vw, 14rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.04;         /* Unterlänge des „j" braucht Platz */ color: transparent; -webkit-text-stroke: 1px rgba(243, 236, 222,.2);
  text-align: center; user-select: none; padding-bottom: 10px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   21. DOCK / COOKIE / CURSOR
   -------------------------------------------------------------------------- */
.dock {
  position: fixed; right: clamp(16px, 2.5vw, 34px); bottom: clamp(16px, 2.5vw, 34px);
  z-index: 90;
  transform: translateY(140%);
  transition: transform .6s var(--ease);
}
.dock.is-visible { transform: none; }
.dock .btn { box-shadow: 0 16px 40px -14px rgba(10,10,10,.55); }

.cookie {
  position: fixed; left: clamp(16px, 2.5vw, 34px); bottom: clamp(16px, 2.5vw, 34px);
  z-index: 95; max-width: 460px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px -20px rgba(10,10,10,.6);
  transform: translateY(140%); opacity: 0;
  transition: transform .6s var(--ease), opacity .4s;
}
.cookie.is-visible { transform: none; opacity: 1; }
.cookie p { font-size: .85rem; color: rgba(243, 236, 222,.78); }
.cookie a { text-decoration: underline; text-underline-offset: 3px; }
.cookie .row { gap: 10px; }
@media (max-width: 700px) { .cookie { left: 12px; right: 12px; max-width: none; bottom: 12px; } .dock { display: none; } }

.cursor {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 16px; height: 16px; border-radius: 50%;
  /* Wie der Header: weiß gezeichnet und per Differenz verrechnet — auf
     hellen Flächen schwarz, im Footer und über der Galerie weiß. */
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity .3s, background .3s var(--ease);
  opacity: 0;
  will-change: transform;
}
.cursor.is-on { opacity: 1; }
/* Gleiche Farbänderung wie überall sonst auf der Seite. */
/* Verkehrt herum notiert (Differenz): schwarz = unsichtbare Füllung, weißer
   Ring = schwarzer Ring auf der hellen Hero-Fläche. */
.cursor.is-hot { background: #000; box-shadow: inset 0 0 0 2px #fff; }
/* Sobald der Kreis läuft, verschwindet der Systemzeiger überall — auch über
   Links, Buttons und Feldern. Die Klasse setzt initCursor(), damit Touch-
   Geräte und reduced-motion ihren normalen Zeiger behalten. */
.has-cursor, .has-cursor * { cursor: none !important; }
@media (hover: none), (max-width: 940px) { .cursor { display: none; } }

/* --------------------------------------------------------------------------
   22. REVEAL / MOTION
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .09s; }
.js [data-reveal][data-delay="2"] { transition-delay: .18s; }
.js [data-reveal][data-delay="3"] { transition-delay: .27s; }
.js [data-reveal][data-delay="4"] { transition-delay: .36s; }
.js [data-reveal][data-delay="5"] { transition-delay: .45s; }

.img-mask { overflow: hidden; border-radius: var(--r-lg); }
.img-mask img { width: 100%; transition: transform 1.2s var(--ease); }
.img-mask:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .reveal-word > span { transform: none; }
  .cursor { display: none; }
}

/* --------------------------------------------------------------------------
   23. LEGAL / TEXTSEITEN
   -------------------------------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); }
.legal-body { max-width: 74ch; }
.legal-body h2 { font-family: var(--ff-display); font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -.015em; margin-top: 2.4em; margin-bottom: .6em; }
.legal-body h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin-top: 1.8em; margin-bottom: .4em; }
.legal-body p, .legal-body li { color: var(--muted); }
.legal-body p + p { margin-top: 1em; }
.legal-body ul { list-style: disc; padding-left: 1.3em; margin-top: .8em; display: grid; gap: .5em; }
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.todo {
  display: inline-block;
  background: var(--accent-dim); color: var(--accent-deep);
  border: 1px dashed var(--accent);
  padding: 1px 8px; border-radius: 6px;
  font-size: .88em; font-weight: 700;
}

/* --------------------------------------------------------------------------
   24. UTILITIES
   -------------------------------------------------------------------------- */
.mt-0  { margin-top: 0 !important; }
.mt-sm { margin-top: clamp(12px, 1.4vw, 20px); }
.mt-md { margin-top: clamp(22px, 2.6vw, 40px); }
.mt-lg { margin-top: clamp(36px, 4.6vw, 72px); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 30px); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--sticky > :first-child { position: static; }
}
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: end; margin-bottom: clamp(34px, 4.5vw, 70px); }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }

/* --------------------------------------------------------------------------
   25. MOBILE-FEINSCHLIFF
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Signal-Block schaut nur noch am Rand herein, statt die Headline zu decken */
  .hero-mark {
    width: clamp(96px, 30vw, 150px);
    right: -7%;
    top: 16%;
  }
  /* Kennzahlen zweispaltig statt einer langen Liste */
  .hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }
  /* Große Zitat-Anführung nicht zu breit */
  .lead { max-width: none; }
}

@media (max-width: 420px) {
  .btn { padding: 14px 22px; font-size: .9rem; }
  .btn--lg { padding: 17px 26px; font-size: .98rem; }
}

/* ==========================================================================
   26. GALERIE (direkt unter dem Header, links eingeschoben)
   ========================================================================== */
.gal {
  padding-top: calc(var(--header-h) + clamp(18px, 3vw, 40px));
  padding-bottom: clamp(36px, 5vw, 72px);
}
.gal-stage { margin-left: 0; }

.gal-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
}
@media (max-width: 760px) { .gal-media { aspect-ratio: 4 / 3; } }

.gal-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
  pointer-events: none;
}
.gal-slide.is-active { opacity: 1; pointer-events: auto; }
.gal-slide > img { width: 100%; height: 100%; object-fit: cover; }

/* Platzhalter-Slot, solange ein Bild fehlt */
.gal-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center; padding: 24px;
  font-weight: 700; letter-spacing: -.02em; color: var(--muted-2);
  background:
    repeating-linear-gradient(-45deg, transparent 0 16px, rgba(10,10,10,.045) 16px 32px),
    var(--paper-2);
}

/* Titel + Erklärung: gehen sanft, aber zügig weg und kommen mit dem neuen Bild */
.gal-text {
  margin-top: clamp(18px, 2.4vw, 32px);
  max-width: 52ch;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.gal-text.is-out { opacity: 0; transform: translateY(10px); }
.gal-title { font-family: var(--ff-display); font-size: clamp(1.3rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.gal-desc { color: var(--muted); margin-top: .5em; font-size: clamp(.95rem, 1.2vw, 1.08rem); }
.gal-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }

.gal-foot {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(22px, 3vw, 40px);
}
.gal-bar { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.gal-bar i {
  position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--ink);
  transition: width .25s linear;
}
.gal-count { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gal-arrows { display: flex; gap: 6px; }
.gal-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.gal-arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.06); }
.gal-arrow svg { width: 15px; height: 15px; }

/* ==========================================================================
   27. GROSSE KENNZAHLEN (Zahl · Linie · Text)
   ========================================================================== */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 90px);
}
@media (max-width: 820px) { .figures { grid-template-columns: 1fr; gap: 44px; } }

.figure b {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 7.6vw, 6.6rem);
  font-weight: 700; letter-spacing: -.03em; line-height: .95;
}
.figure hr {
  border: 0; height: 1px; background: var(--line);
  margin-block: clamp(14px, 1.8vw, 24px);
}
.figure p {
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.18;
  max-width: 20ch;
}
.figure small {
  display: block; margin-top: 1.5em;
  font-size: .76rem; line-height: 1.45; color: var(--muted);
  max-width: 28ch;
}

/* ==========================================================================
   28. CLIENTS
   ========================================================================== */
.label-line {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: .84rem; font-weight: 600; letter-spacing: -.01em;
}
.label-line::before {
  content: ""; width: clamp(40px, 6vw, 96px); height: 1px;
  background: currentColor; flex: none;
}
.client {
  display: flex; align-items: center; gap: clamp(22px, 4vw, 56px);
  margin-top: clamp(34px, 5vw, 70px);
  flex-wrap: wrap;
}
.client-crest {
  width: clamp(96px, 11vw, 148px);
  aspect-ratio: 1; flex: none;
  border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  padding: 12px;
  font-size: .68rem; font-weight: 700; line-height: 1.25; color: var(--muted-2);
  border: 1.5px dashed var(--line);
  background: var(--paper-2);
}
.client-crest img { width: 100%; height: 100%; object-fit: contain; }
.client-body { max-width: 58ch; }
.client-body h3 { font-family: var(--ff-display); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.015em; }
.client-body p { color: var(--muted); margin-top: .5em; }

/* ==========================================================================
   29. DOCK — schwarzer Button mit Impuls
   Nachgebaut nach dd.nyc: kein Ring, kein Pseudo-Element, keine Kontur.
   Der Impuls ist ein box-shadow, dessen Spread nach außen wächst und dabei
   auf Null ausblendet; der Button selbst wächst dabei von 0.9 auf 1.
   dd.nyc läuft mit 3s — hier auf 4s gesetzt.
   ========================================================================== */
.dock-pulse { display: inline-flex; }
.dock .btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-hover-bg: var(--paper);   /* Hover kehrt um: schwarz → weiß */
  --btn-hover-fg: var(--ink);
  box-shadow: none;                      /* Ruhezustand: nichts um den Button */
  animation: dockPulse 4s ease infinite;
}
/* Beim Überfahren hält der Impuls an, damit der Hover-Effekt sauber greift. */
.dock .btn:hover { animation: none; }

@keyframes dockPulse {
  0%   { transform: scale(.9); box-shadow: 0 0 0 0    rgba(10, 10, 10, .10); }
  70%  { transform: scale(1);  box-shadow: 0 0 0 38px rgba(10, 10, 10, 0); }
  100% { transform: scale(.9); box-shadow: 0 0 0 0    rgba(10, 10, 10, 0); }
}

/* ==========================================================================
   30. LEISTUNGSLISTE OHNE TRENNSTRICHE
   ========================================================================== */
.svc-list--plain { border-top: 0; }
.svc-list--plain .svc-row { border-bottom: 0; }
.svc-list--plain .svc-row > button { padding-block: clamp(12px, 1.5vw, 20px); }

@media (prefers-reduced-motion: reduce) {
  .dock .btn { animation: none; transform: none; }
  .gal-slide { transition: none; }
}

/* Einzelner Inhalt in der rechten Spalte eines .split – ohne leeres Füll-Div,
   das auf dem Handy eine zusätzliche Zeile erzeugen würde. */
.split > .push-right { grid-column: 2; }
@media (max-width: 900px) { .split > .push-right { grid-column: 1; } }

/* ==========================================================================
   31. DER KREIS ANSTELLE DES „o" IN EUROPE
   Gleiche Erscheinung wie der Mauskreis. Berühren sich beide, wechseln beide
   auf die Signalfarbe — dieselbe Farbänderung wie bei Links und Buttons.
   ========================================================================== */
.o-dot {
  display: inline-block;
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--blue);
  vertical-align: baseline;
  margin-bottom: -.015em;
  margin-inline: .045em;
  transition: background .3s var(--ease), transform .35s var(--ease);
}
.o-dot.is-hot { background: var(--paper); box-shadow: inset 0 0 0 .09em var(--ink); transform: scale(1.14); }

/* Hält „Europe." als eine Einheit zusammen, damit es nicht umbricht. */
.word { white-space: nowrap; }

/* ==========================================================================
   32. GALERIE — harte Kanten, Text rechts neben dem Bild
   ========================================================================== */
.hero + .gal { padding-top: clamp(18px, 2.6vw, 40px); }

.gal-main {
  display: grid;
  grid-template-columns: minmax(0, 74fr) minmax(0, 26fr);
  gap: clamp(20px, 2.6vw, 44px);
  align-items: end;
}
.gal-media {
  border-radius: 0;          /* exakte Kanten, wie in der Vorlage */
  aspect-ratio: auto;
  --gal-h: clamp(320px, 68vh, 820px);
  height: var(--gal-h);
}
.gal-side { padding-bottom: clamp(4px, 1vw, 14px); }
.gal .gal-text { margin-top: 0; max-width: none; }
.gal-title { font-size: clamp(1.15rem, 1.5vw, 1.45rem); }
.gal-desc  { font-size: clamp(.88rem, 1vw, .98rem); }

.gal-foot {
  margin-top: clamp(18px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 74fr) minmax(0, 26fr);
  gap: clamp(20px, 2.6vw, 44px);
  align-items: center;
}
.gal-controls { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); }

@media (max-width: 860px) {
  .gal-main,
  .gal-foot { grid-template-columns: 1fr; align-items: stretch; }
  .gal-foot { gap: 16px; }
  .gal-media { --gal-h: clamp(300px, 52vh, 520px); height: var(--gal-h); }
  .gal-side { padding-bottom: 0; }
  .gal .gal-text { margin-top: clamp(16px, 2.4vw, 26px); }
  .gal-title { font-size: clamp(1.3rem, 2.4vw, 2.1rem); }
}

/* ==========================================================================
   33. GALERIE BÜNDIG AM LINKEN BILDSCHIRMRAND
   Die Galerie bricht als einziger Abschnitt aus dem zentrierten Raster aus:
   links sitzt sie auf 0, rechts bleibt sie mit dem übrigen Seiteninhalt
   auf einer Linie. Bild, Beschreibung und Fortschrittszeile wandern dabei
   um denselben Betrag mit nach links.
   ========================================================================== */
.gal.wrap {
  max-width: none;
  margin-inline: 0;
  padding-left: 0;
  /* Rechte Kante deckungsgleich mit dem zentrierten Container darüber. */
  padding-right: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
}

@media (max-width: 860px) {
  /* Auf dem Handy bleibt das Bild randlos, der Text bekommt seinen Rand zurück. */
  .gal.wrap { padding-right: 0; }
  .gal-side,
  .gal-foot { padding-inline: var(--pad-x); }
}

/* ==========================================================================
   34. ERSTER BILDSCHIRM
   Die Überschrift füllt den sichtbaren Bereich, von der Galerie schaut nur
   ein schmaler Streifen hervor — so wie in der Vorlage.
   ========================================================================== */
.hero--full {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 860px) {
  /* Auf dem Handy braucht die vierzeilige Überschrift ohnehin die Höhe. */
  .hero--full { min-height: 0; }
}

/* ==========================================================================
   35. CREATIVE SERVICES — Liste links, Detail rechts
   Kein Auf- und Zuklappen, keine Plus/Minus-Zeichen: Die Liste bleibt stehen,
   nur die rechte Spalte wechselt. Solange nichts gewählt ist, stehen alle
   Titel normal in Schwarz; nach dem ersten Klick tritt der Rest zurück.
   ========================================================================== */
.svc2 { position: relative; }
.svc2-list { display: flex; flex-direction: column; }

.svc2-btn {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 40px);
  width: 100%;
  text-align: left;
  padding-block: clamp(10px, 1.3vw, 18px);
  color: inherit;
}
.svc2-num {
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--muted-2);
  transition: color .35s var(--ease);
}
/* Der Grad ist so gewählt, dass der längste Titel („Content: Photo, Video,
   Copy") in jeder Fensterbreite auf eine Zeile passt — bei 3,5vw brach er um
   und die Liste geriet aus dem Takt. Der Deckel von 3rem greift oberhalb von
   1480 px, wo der Satzspiegel nicht mehr mitwächst, die Schrift aber schon. */
.svc2-title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  transition: color .4s var(--ease);
  /* Unterlängen brauchen bei diesem Zeilenabstand etwas Luft. */
  padding-bottom: .06em;
}

/* Sobald eine Leistung gewählt ist, treten die übrigen zurück. */
.svc2-item[data-open="false"] .svc2-title { color: rgba(10, 10, 10, .17); }
.svc2-item[data-open="false"] .svc2-num   { color: rgba(10, 10, 10, .17); }
.svc2-item[data-open="false"] .svc2-btn:hover .svc2-title { color: var(--accent); }
.svc2-item[data-open="false"] .svc2-btn:hover .svc2-num   { color: var(--accent); }

.svc2-chips { display: flex; flex-wrap: wrap; gap: 9px; }
/* Fließtext: 16 px, wie bei dd.nyc gemessen. Die Zeilenlänge begrenzt die
   Spalte selbst (max. 470 px ≈ 52 Zeichen), kein zusätzliches `max-width` —
   sonst endet der Text vor der Linie und der Block wirkt nicht mehr bündig.
   Der Durchschuss bleibt bei 1,5 statt der 1,2 von dd.nyc: Deren Absätze sind
   kürzer, unsere laufen über fünf bis sechs Zeilen. */
.svc2-text {
  color: var(--muted);
  margin-top: clamp(22px, 2.8vw, 40px);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- ab 1100 px: Detail steht rechts neben der Liste ---------------
   Die Detailspalte wird über `top: 0; bottom: 0` auf die volle Höhe der Liste
   gezogen. Nur deshalb sitzt die Linie bei jedem Punkt an derselben Stelle —
   auf Höhe der Unterkante des letzten Listeneintrags. Hinge sie am Inhalt,
   spränge sie bei jedem Wechsel mit, weil die Absätze verschieden lang sind.
   Genauso löst es dd.nyc: dort ist die Vorschauspalte exakt so hoch wie die
   Liste (beide 460 px bei 1440 px Fenster), und die Linie ist das letzte
   Flex-Element darin.

   Breiten ebenfalls dort gemessen: Liste 43,75 %, Lücke 12,5 %, Spalte 37,5 %
   mit 450 px Deckel. Unsere Titel sind länger („Content: Photo, Video, Copy"),
   deshalb bekommt die Liste 52 % statt 43,75 %; der Deckel von 470 px hält die
   Zeilenlänge trotz breiterem Satzspiegel im lesbaren Bereich und lässt rechts
   denselben Rand stehen wie bei dd.nyc. */
@media (min-width: 1100px) {
  .svc2-list { width: 52%; }
  .svc2-detail {
    position: absolute;
    top: 0; bottom: 0; left: 58%; right: 0;
    max-width: 470px;
    visibility: hidden;
  }
  .svc2-item[data-open="true"] .svc2-detail,
  .svc2-item[data-leaving="true"] .svc2-detail { visibility: visible; }

  /* Inhalt: geht nach links weg, kommt von rechts zurück.
     Das padding hält langen Inhalt von der Linie fern. */
  .svc2-detail-inner {
    padding-bottom: clamp(28px, 3.4vw, 48px);
    opacity: 0;
    transform: translateX(var(--svc-x, 40px));
    transition: opacity .42s var(--ease), transform .5s var(--ease);
  }
  .svc2-item[data-open="true"] .svc2-detail-inner { opacity: 1; transform: none; }
  .svc2-item[data-leaving="true"] .svc2-detail-inner {
    opacity: 0;
    transform: translateX(calc(var(--svc-x, 40px) * -1));
    transition: opacity .24s ease-in, transform .26s ease-in;
  }

  /* Die Linie läuft genau gegenläufig: nach rechts weg, von links zurück. */
  .svc2-detail::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--ink);
    opacity: 0;
    transform: translateX(calc(var(--svc-x, 40px) * -1));
    transition: opacity .42s var(--ease), transform .5s var(--ease);
  }
  .svc2-item[data-open="true"] .svc2-detail::after { opacity: 1; transform: none; }
  .svc2-item[data-leaving="true"] .svc2-detail::after {
    opacity: 0;
    transform: translateX(var(--svc-x, 40px));
    transition: opacity .24s ease-in, transform .26s ease-in;
  }
}

/* ---------- Schmal: Detail klappt unter dem Titel auf --------------------
   Die Grenze liegt bei 1100 px, nicht bei 860 px. Darunter kippt das Verhältnis:
   Die Liste wird mit der Schrift schmaler und damit kürzer, der Fließtext
   dagegen läuft in der engeren Spalte über mehr Zeilen. Gemessener Abstand
   zwischen Textunterkante und Linie: 1100 px → 43 px, 1050 px → 31 px,
   1020 px → −17 px, der Text liefe also durch die Linie. Die Bruchzahl
   schließt die Lücke, in die sonst gebrochene Fensterbreiten fallen — dort
   griffe keine der beiden Regeln und alle fünf Details stünden gleichzeitig da. */
@media (max-width: 1099.98px) {
  .svc2-detail {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s var(--ease), opacity .3s var(--ease);
  }
  .svc2-detail-inner { overflow: hidden; }
  .svc2-item[data-open="true"] .svc2-detail { grid-template-rows: 1fr; opacity: 1; }
  .svc2-item[data-open="true"] .svc2-detail-inner { padding-block: 4px 26px; border-bottom: 1px solid var(--ink); }
  .svc2-text { margin-top: 18px; }
}

/* ==========================================================================
   36. EINSCHIEBEN VON LINKS
   Die Objekte der Startseite kommen nicht mehr von unten hoch, sondern
   fahren von links auf ihre Position. Ausgelöst wird wie bei [data-reveal]
   über den IntersectionObserver, der `is-in` setzt.
   ========================================================================== */
.js [data-slide] {
  opacity: 0;
  transform: translateX(calc(var(--slide-x) * -1));
  transition: opacity var(--slide-in) var(--slide-ease),
              transform var(--slide-in) var(--slide-ease);
}
.js [data-slide].is-in { opacity: 1; transform: none; }
.js [data-slide][data-delay="1"] { transition-delay: .08s; }
.js [data-slide][data-delay="2"] { transition-delay: .16s; }
.js [data-slide][data-delay="3"] { transition-delay: .24s; }

/* ---------- Überschrift: Zeile für Zeile, zweite leicht versetzt --------- */
.js [data-slide-lines] .line {
  opacity: 0;
  transform: translateX(calc(var(--slide-x) * -1));
  transition: opacity var(--slide-in) var(--slide-ease),
              transform var(--slide-in) var(--slide-ease);
}
.js [data-slide-lines].is-in .line { opacity: 1; transform: none; }
.js [data-slide-lines] .line:nth-child(2) { transition-delay: .09s; }

/* ---------- Kennzahlen: Linie eilt vor, Zahl und Text folgen dicht ------- */
.figures .figure:nth-child(1) { --fd: 0ms; }
.figures .figure:nth-child(2) { --fd: 170ms; }
.figures .figure:nth-child(3) { --fd: 340ms; }

.js [data-slide-figures] .figure hr {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--slide-ease);
  transition-delay: var(--fd);
}
.js [data-slide-figures].is-in .figure hr { transform: scaleX(1); }

.js [data-slide-figures] .figure b,
.js [data-slide-figures] .figure p,
.js [data-slide-figures] .figure small {
  opacity: 0;
  transform: translateX(calc(var(--slide-x) * -1));
  transition: opacity .6s var(--slide-ease), transform .7s var(--slide-ease);
  transition-delay: calc(var(--fd) + 120ms);
}
.js [data-slide-figures] .figure small { transition-delay: calc(var(--fd) + 190ms); }
.js [data-slide-figures].is-in .figure b,
.js [data-slide-figures].is-in .figure p,
.js [data-slide-figures].is-in .figure small { opacity: 1; transform: none; }

/* ---------- Label: erst die Linie aufziehen, dann der Text --------------- */
.label-text { display: inline-block; }
.js [data-slide-label]::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--slide-ease);
}
.js [data-slide-label].is-in::before { transform: scaleX(1); }
.js [data-slide-label] .label-text {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .45s var(--slide-ease) .4s,
              transform .45s var(--slide-ease) .4s;
}
.js [data-slide-label].is-in .label-text { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-slide],
  .js [data-slide-lines] .line,
  .js [data-slide-figures] .figure b,
  .js [data-slide-figures] .figure p,
  .js [data-slide-figures] .figure small,
  .js [data-slide-label] .label-text { opacity: 1; transform: none; }
  .js [data-slide-figures] .figure hr,
  .js [data-slide-label]::before { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .svc2-detail-inner, .svc2-detail::after { transition: none; }
}

/* ==========================================================================
   37. GALERIE — SCHWARZ-WEISS
   Fotos werden entsättigt und über `luminosity` mit der schwarzen Fläche
   verrechnet: reine Graustufen mit voller Tonwertabstufung. Logos rechnen
   ihren eigenen Grund über `screen` weg und stehen weiß auf Schwarz.
   ========================================================================== */
:root { --gal-tint: var(--ink); }

.gal-media,
.gal-slide { background: var(--gal-tint); }

.gal-slide > img {
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}

/* ---------- Logos auf der Fläche ---------------------------------------- */
.gal-brand {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--gal-tint);
  padding: clamp(28px, 5vw, 88px);
}
/* Absolut mittig statt per Grid: Prozent-Höhen von Grid-Kindern rechnet
   Safari anders, dort rutschte das Logo nach unten. */
.gal-brand img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 62%;
  height: 62%;
  object-fit: contain;
  /* grayscale nimmt Restfarben heraus, contrast drückt das fast-schwarze
     Umfeld der Vorlage auf echtes Schwarz — sonst zeichnet sich beim
     screen-Verrechnen ein heller Kasten um das Logo ab. */
  filter: grayscale(1) contrast(1.35);
  mix-blend-mode: screen;
}
/* Logos, die schwarz auf hell angelegt sind, vorher umdrehen. */
.gal-brand--invert img { filter: grayscale(1) contrast(1.35) invert(1); }

@media (max-width: 860px) {
  .gal-brand img { height: 54%; max-width: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  .svc2-detail-inner, .svc2-detail::after { transition: none; }
}

/* Typografische Karte, solange ein Logo als Datei fehlt — weiß auf der Fläche */
.gal-brand-type {
  display: grid;
  justify-items: center;
  gap: .35em;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--paper);
}
.gal-brand-type small {
  font-size: .19em;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* Teamfoto (Querformat 3:2) füllt den Rahmen; der Ausschnitt sitzt etwas
   über der Mitte, damit die Köpfe Luft behalten. */
.gal-slide--top > img { object-fit: cover; object-position: 50% 42%; }

/* Das EFC-Wappen sitzt in seiner Bilddatei nicht mittig (Kreis-Mitte bei
   47 % / 51 % statt 50 % / 50 %, im Browser ausgemessen) — der Versatz
   gleicht das aus. Dazu auf Wunsch etwa einen halben Zentimeter (≈ 19 px)
   höher als die exakte Mitte. */
.gal-brand--efc img { transform: translate(-46.7%, calc(-51% - 19px)); }

/* Galerie: verlinkte Logos und Titel */
a.gal-brand { cursor: pointer; }
.gal-title-link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease); }
.gal-title-link:hover, .gal-title-link:focus-visible { text-decoration-color: currentColor; }

/* ==========================================================================
   38. JOURNAL — Übersicht und Beitrag
   ========================================================================== */
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.journal-head { max-width: 22ch; }
.journal-list { margin-top: clamp(40px, 6vw, 90px); display: grid; gap: clamp(36px, 5vw, 64px); }

.post-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(22px, 3.4vw, 56px);
  align-items: center;
}
.post-card-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--ink);
}
.post-card-media img {
  position: absolute; top: 50%; left: 50%;
  height: 64%; width: auto;
  transform: translate(-46.7%, -51%) scale(1);
  filter: grayscale(1) contrast(1.35);
  mix-blend-mode: screen;
  transition: transform .8s var(--ease);
}
.post-card:hover .post-card-media img { transform: translate(-46.7%, -51%) scale(1.04); }
.post-meta { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-card h2 {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(1.6rem, 3vw, 2.6rem); margin-top: .45em;
}
.post-card p { color: var(--muted); margin-top: .8em; max-width: 52ch; }
.post-card .big-link { margin-top: 1.2em; }
@media (max-width: 760px) { .post-card { grid-template-columns: 1fr; } }

.post { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); }
.post, .journal-list { padding-bottom: clamp(72px, 9vw, 140px); }
.post-title { max-width: 18ch; margin-top: .35em; }
.post-figure {
  position: relative; margin-top: clamp(32px, 5vw, 64px);
  aspect-ratio: 16 / 7; background: var(--ink); overflow: hidden;
}
.post-figure img {
  position: absolute; top: 50%; left: 50%; height: 70%; width: auto;
  transform: translate(-46.7%, -51%);
  filter: grayscale(1) contrast(1.35); mix-blend-mode: screen;
}
@media (max-width: 760px) { .post-figure { aspect-ratio: 4 / 3; } }
.post-body { max-width: 64ch; margin-top: clamp(32px, 5vw, 64px); font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.7; }
.post-body p + p { margin-top: 1.1em; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-foot { max-width: 64ch; margin-top: clamp(40px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }