/* ════════════════════════════════════════════════════════════════
   LEADSMITH — Above the fold
   Schrift: Adobe Fonts Kit rhd6two
     aktiv-grotesk        400 / 700, normal + kursiv
     freight-display-pro  400 / 700, normal + kursiv
   Hinweis: Aktiv Grotesk Medium (500), das Sequel nutzt, ist im Kit
   nicht aktiviert. Falls gewuenscht, im Adobe-Webprojekt ergaenzen
   und unten --w-display auf 500 stellen.
   ════════════════════════════════════════════════════════════════ */

:root {
  --sans: "aktiv-grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "freight-display-pro", Georgia, "Times New Roman", serif;

  --w-display: 700;

  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.78);
  /* .47 statt .42: erst dort erreicht der Sekundaertext 4,5:1 gegen
     den Seitengrund und besteht WCAG AA. Nachgerechnet, nicht geschaetzt. */
  --ink-mute: rgba(255, 255, 255, 0.47);
  --line: rgba(255, 255, 255, 0.13);
  --paper: #f5f5f0;   /* warmes Weiss der CTA-Pille, wie bei Sequel */
  --on-paper: #0a0a0a;
  --black: #050505;

  /* Die Abstufungen des Panel-Materials. Vorher lagen sie als einzelne
     Hex-Werte in den Verlaeufen und liessen sich nicht gemeinsam
     nachziehen. */
  --panel-hell: #121216;   /* Lichtkante oben */
  --panel-mitte: #0a0a0d;  /* Flaeche */
  --panel-tief: #08080a;   /* Abdunklung unten */
  --panel-fuss: #0c0c0e;   /* Grund der Fusszeile */
  --knoten: #0d0d11;       /* Fuellung kleiner Kreise auf Kanten */
  --warnung: #e0a0a0;      /* Fehlermeldungen */
  --warnung-rand: #d97b7b;
  /* Gebrochenes Silber fuer Haken und Auszeichnungen. Reines Weiss
     wirkt an kleinen Zeichen hart, Silber liest sich wertiger. */
  --silber: #cfd4dd;

  --gutter: clamp(20px, 4vw, 80px);
  /* Zusatzabstand fuer Geraete mit Notch. Auf allen anderen null. */
  --sicher-l: env(safe-area-inset-left, 0px);
  --sicher-r: env(safe-area-inset-right, 0px);
  --sicher-u: env(safe-area-inset-bottom, 0px);
  --header-h: clamp(72px, 8vw, 108px);

  /* Formregel: alles Interaktive ist Pille, Flaechen sind 18px. */
  --r-card: 18px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Nimmt die 300 ms Verzoegerung, die Browser fuer doppeltes Antippen
   offen halten. */
a, button, [role="button"], label, summary { touch-action: manipulation; }

html {
  -webkit-text-size-adjust: 100%;
  /* Sagt dem Browser, dass die Seite dunkel ist. Scrollbalken und
     native Formularelemente kommen dadurch dunkel statt hell. */
  color-scheme: dark;
}

/* Sprungziele der Navigation duerfen nicht unter dem festen Kopf
   landen. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  /* Kein blaues Aufblitzen beim Antippen auf iOS. */
  -webkit-tap-highlight-color: transparent;
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 4px; }

/* Sprunglink. Unsichtbar, bis jemand die Tabulatortaste drueckt. */
.sprung {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px;
  border-radius: 9999px;
  background: var(--paper); color: var(--on-paper);
  font-size: 14px; font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.sprung:focus-visible { transform: none; }

/* ─────────── Kursives Serifenwort ───────────
   Freight Display hat bei gleicher Punktgroesse nur 87,5 Prozent der
   Versalhoehe von Aktiv Grotesk, gemessen 62,5 gegen 71,4 bei 100px.
   Ohne Ausgleich wirkt das Wort kleiner und duenner als der Rest.
   1.14em gleicht die Versalhoehe aus, Gewicht 700 die Strichstaerke. */
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.14em;
  letter-spacing: -0.012em;
}

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  font-family: var(--sans);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.btn--light { background: var(--paper); color: var(--on-paper); }
.btn--light:hover { background: #ffffff; }
.btn:active { transform: scale(.985); }
.btn--sm { height: 45px; padding: 0 24px; font-size: 15px; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 16px; }
.btn__arrow { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
}
.header__inner {
  height: var(--header-h);
  padding: 0 calc(var(--gutter) + var(--sicher-r)) 0 calc(var(--gutter) + var(--sicher-l));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* ─────────── Wortmarke ───────────
   Initialen und Schriftzug stehen in derselben Serife wie die
   Auszeichnungen im Text. Als echte Schrift statt als Bild: dadurch
   bleibt sie in jeder Groesse scharf, folgt der Textfarbe und laesst
   sich ueber font-size als Ganzes skalieren. */
.logo {
  display: inline-flex; align-items: center;
  gap: .62em;
  justify-self: start;
  /* Eine Groesse steuert das ganze Lockup. Auf schmalen Geraeten faellt
     sie zurueck, damit Marke und Menueknopf nicht aneinanderstossen. */
  font-size: clamp(18px, 1.45vw, 21px);
  color: var(--ink);
}
.logo__mark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.42em;
  letter-spacing: .03em;
  line-height: 1;
}
.logo__strich {
  width: 1px; height: 1.15em;
  background: currentColor;
  opacity: .26;
}
.logo__text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1em;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
  /* Die Sperrung haengt hinter dem letzten Buchstaben als Leerraum
     nach. Ohne Ausgleich sitzt die Marke sichtbar zu weit links. */
  margin-right: -.26em;
}

/* Fuenf Punkte statt vier. Der Abstand faellt zwischen 1240 und 940
   zurueck, sonst stossen Navigation und Knopf aneinander. */
.nav { display: flex; gap: clamp(20px, 2.6vw, 38px); justify-self: center; }
.nav a {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  transition: color .25s var(--ease);
}
.nav a:hover { color: #fff; }

.header__cta { justify-self: end; }

.burger {
  display: none;
  justify-self: end;
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 1.5px;
  background: #fff;
  transition: transform .3s var(--ease);
}
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--gutter) 24px;
  background: rgba(5, 5, 5, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mobile-nav a:not(.btn) {
  padding: 15px 0;
  font-size: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mobile-nav .btn { margin-top: 18px; height: 52px; padding: 0 26px; justify-content: center; }

/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--black);
}

.hero__media { position: absolute; inset: 0; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Verlauf: oben leicht fuer den Header, unten stark fuer die Headline */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.12) 22%, rgba(5,5,5,0) 42%),
    linear-gradient(0deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.55) 26%, rgba(5,5,5,0) 62%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 40px) var(--gutter) clamp(48px, 7vh, 88px);
}
/* Wie bei Sequel: der Textblock belegt nur die linke Haelfte,
   die Headline laeuft darin auf einer Zeile. */
.hero__content { width: 100%; max-width: min(54vw, 780px); }

.hero__title {
  font-family: var(--sans);
  font-weight: var(--w-display);
  /* Sequel setzt die Headline auf rund 51px bei 1280px Fensterbreite.
     Gemessen: diese Zeile ist das 12.1-fache der Schriftgroesse breit,
     bei 3.6vw bleibt sie damit innerhalb der halben Seite einzeilig. */
  font-size: clamp(30px, 3.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* Das kursive Serifen-Wort, wie "legacy" bei Sequel */

.hero__sub {
  margin-top: clamp(18px, 1.8vw, 26px);
  max-width: 44ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--ink-dim);
}

.hero__cta { margin-top: clamp(28px, 3.2vw, 40px); }

/* ════════════════════════════════════════════════════════════════
   STATEMENT — Satz baut sich zeichenweise beim Scrollen auf
   ════════════════════════════════════════════════════════════════ */
/* Der Satz ist die Ueberschrift der drei Karten, beide stehen
   deshalb in einer Sektion. Oben viel Luft wie bei Sequel. */
.statement {
  position: relative;
  z-index: 2;               /* deckt den ausblendenden Hero ab */
  background: var(--black);
  padding: clamp(120px, 30vh, 320px) var(--gutter) clamp(96px, 14vh, 180px);
}
.statement__inner { width: 100%; max-width: 940px; margin: 0 auto; }

.statement__text {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--ink);
}

/* Fester Umbruch zwischen den beiden Saetzen. */
.statement__line { display: block; }

/* Wortklammer verhindert Umbrueche mitten im Wort,
   die Zeichen sind die eigentlich animierten Elemente. */
.statement__text .w { display: inline-block; white-space: nowrap; }
.statement__text .c { display: inline-block; }
/* Nur solange die Schleife laeuft. Danach faellt die Ebene weg. */
.statement__text.laeuft .c { will-change: opacity, filter; }
/* Ausgangszustand vor der Animation: unsichtbar und unscharf.
   Gemessen bei Sequel: Deckkraft 0, Unschaerfe 8px. */
.statement__text.is-split .c { opacity: 0; filter: blur(8px); }

/* ════════════════════════════════════════════════════════════════
   VORTEILE — drei Karten mit 3D-Neigung und Lichtschein
   ════════════════════════════════════════════════════════════════ */
.benefits__grid {
  list-style: none;
  margin: clamp(64px, 9vh, 120px) auto 0;
  padding: 0;
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  /* Jede Karte neigt sich einzeln, deshalb liegt die Perspektive
     auf dem Raster und nicht auf jeder Karte. */
  perspective: 1100px;
}

.bcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  /* Reines Schwarz, keine aufgehellte Flaeche. Die Karte hebt sich
     ueber Schatten und eine sehr feine Kante ab, nicht ueber Helligkeit. */
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 40px 90px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.bcard:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 26px 56px rgba(0, 0, 0, 0.6),
    0 56px 120px rgba(0, 0, 0, 0.5);
}
/* Während der Mausbewegung führt das Skript, ohne Nachlauf. */
.bcard.is-tilting { transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }

/* Die Grafik bekommt deutlich mehr Luft und faellt kleiner aus. */
.bcard__art {
  padding: clamp(26px, 3vw, 42px) clamp(26px, 3vw, 42px) 0;
}
.bcard__art img,
.bcard__art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
/* Karte 3 fuellt ihren Rahmen staerker aus als die beiden anderen.
   Das Bild wird deshalb verkleinert, damit alle drei Zeichnungen
   gleich viel Luft um sich haben. Der Bildgrund ist Schwarz wie die
   Karte, dadurch entsteht keine sichtbare Kante. */
.bcard__art--klein img { transform: scale(0.78); }

.bcard__body {
  padding: clamp(24px, 2.6vw, 34px);
  padding-top: clamp(18px, 2vw, 26px);
  margin-top: auto;
}
.bcard__title {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.bcard__text {
  margin: 0;
  font-size: clamp(14px, 1.02vw, 15.5px);
  line-height: 1.55;
  color: var(--ink-dim);
}

/* Lichtschein, folgt der Maus. Position setzt das Skript. */
.tilt__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(
    240px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0) 62%);
}
.bcard:hover .tilt__glare { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   HALTUNG — angehefteter Bereich
   Aussen ein hoher Rahmen, innen ein Kern von einer Bildschirmhoehe.
   Die Differenz beider Hoehen ist die Strecke, die er oben festklebt.
   ════════════════════════════════════════════════════════════════ */
.believe {
  position: relative;
  z-index: 2;
  height: 325svh;              /* wie bei Sequel: 3,25 Bildschirmhoehen */
  background: var(--black);
}
.believe__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--header-h) var(--gutter) clamp(48px, 8vh, 96px);
}

/* Buehne: startet schmaler mit runden Ecken, waechst auf volle Breite.
   Breite und Radius setzt das Skript ueber den Scrollstand.
   Gemessen bei Sequel: 78 Prozent Breite und 10px Radius am Anfang. */
.believe__stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--buehne-breite, 100%);
  border-radius: var(--buehne-radius, 0px);
  overflow: hidden;
}
.believe__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  will-change: transform;
}
.believe__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.70) 0%, rgba(5,5,5,.34) 30%, rgba(5,5,5,.34) 70%, rgba(5,5,5,.76) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(5,5,5,.10), rgba(5,5,5,.68));
}

/* Alles zentriert, wie im Original. */
.believe__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.believe__label {
  margin: 0 0 clamp(30px, 5vh, 60px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Die fuenf Saetze liegen im selben Rasterfeld uebereinander.
   Dadurch bestimmt der laengste die Hoehe und nichts springt. */
.believe__deck {
  display: grid;
  width: 100%;
  perspective: 1000px;
}
.believe__item {
  grid-area: 1 / 1;
  /* Volle Breite statt margin auto. Sonst schrumpft die Rasterzelle
     auf Inhaltsbreite und die Saetze brechen viel zu frueh um.
     Zentriert wird ueber text-align, nicht ueber die Box. */
  width: 100%;
  margin: 0;
  align-self: center;
  /* Keine Zeichenbegrenzung: die meisten Saetze sollen einzeilig
     laufen. Die Breite gibt der Inhaltsblock vor. Gemessen bei
     Sequel: 32px, Zeilenhoehe 1.2, Laufweite -0.03em. */
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
  /* Kein text-wrap: balance. Der Ausgleich verkuerzt die Zeilenbreite
     und erzwingt Umbrueche, wo der Satz einzeilig laufen soll. */
  text-wrap: pretty;
  /* Ausgangszustand, bevor das Skript uebernimmt. */
  opacity: 0;
}
[data-pin].laeuft .believe__item { will-change: transform, opacity, filter; }

.believe__cta { margin-top: clamp(40px, 6vh, 72px); }

/* Ausgangszustand für das gestaffelte Einblenden.
   Gleiche Machart wie der Satz darüber: Deckkraft und Unschärfe. */
[data-pin].is-armed [data-fade],
[data-stagger].is-armed [data-fade] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
}
/* Der Hinweis auf die Compositor-Ebene gilt nur waehrend der Bewegung.
   Dauerhaft gesetzt haelt er auf dieser Seite ueber 130 Ebenen offen,
   ohne dass sich noch etwas bewegt. */
[data-pin].laeuft [data-fade],
[data-stagger].laeuft [data-fade] { will-change: opacity, filter, transform; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
  .header__inner { grid-template-columns: 1fr auto; }
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .benefits__grid { grid-template-columns: 1fr; max-width: 560px; }
  /* Unter 940px ist eine Zeile nicht mehr moeglich, also Umbruch erlauben. */
  .hero__content { max-width: none; }
  .hero__title {
    white-space: normal;
    font-size: clamp(34px, 7.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }
  .hero__sub { max-width: none; font-size: 16px; }
}

@media (max-width: 560px) {
  .hero__cta { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   BEWEGUNG
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow, .burger span { transition: none; }
  /* Der Satz steht sofort vollstaendig da, ohne Aufbau. */
  .statement__text.is-split .c { opacity: 1 !important; filter: none !important; }
  [data-pin].is-armed [data-fade],
  [data-stagger].is-armed [data-fade] {
    opacity: 1 !important; filter: none !important; transform: none !important;
  }
  /* Ohne Bewegung braucht der Bereich keine lange Anheftstrecke.
     Die Saetze stehen dann untereinander statt uebereinander. */
  .believe { height: auto; }
  .believe__pin { position: static; height: auto; min-height: 100svh; }
  .believe__deck { display: flex; flex-direction: column; gap: 28px; perspective: none; }
  .believe__item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    font-size: clamp(20px, 2.4vw, 30px);
  }
}

/* ════════════════════════════════════════════════════════════════
   REFERENZEN
   Eine Karte je Projekt. Text links, Collage rechts, bei jeder
   zweiten Karte umgekehrt. Die Aufnahmen stehen gerade, die Tiefe
   entsteht allein aus Versatz und Schatten. Nichts ist gedreht,
   damit das Auge ruhig bleibt.
   ════════════════════════════════════════════════════════════════ */
.refs {
  position: relative;
  z-index: 2;
  background: var(--black);
  padding: clamp(96px, 14vh, 180px) var(--gutter);
}
.refs__inner { width: 100%; max-width: 1240px; margin: 0 auto; }

.refs__head { margin-bottom: clamp(56px, 8vh, 100px); text-align: center; }
.refs__label {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.refs__title {
  margin: 0 auto;
  max-width: 22ch;
  /* Zweite Ruecknahme, von 40 auf 31. Der Sektionstitel soll die
     Sektion anmelden, nicht mit der Hero-Zeile konkurrieren. */
  font-size: clamp(21px, 2.1vw, 31px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.ref {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
  padding: clamp(40px, 6vh, 80px) 0;
  border-top: 1px solid var(--line);
}
/* Jede zweite Karte spiegelt die Spalten. Wichtig: nicht nur die
   Reihenfolge tauschen, sondern auch die Spaltenbreiten. Sonst landet
   die Medienspalte im schmalen Track und die Aufnahmen fallen auf
   gespiegelten Karten rund ein Viertel kleiner aus. */
.ref--gedreht { grid-template-columns: 1.14fr 0.86fr; }
.ref--gedreht .ref__text { order: 2; }
.ref--gedreht .ref__media { order: 1; }

.ref__result {
  margin: 22px 0 0;
  /* Zurueckgenommen von 33 auf 27. Der Sprung zum 15px-Fliesstext
     daneben betrug vorher das 2,2-fache und wirkte laut. */
  font-size: clamp(19px, 1.85vw, 27px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.024em;
}
.ref__line { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }

.ref__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ref__points li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ink-dim);
}
/* Feiner Haken statt Aufzaehlungspunkt. */
.ref__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}

/* ─────────── Aufnahmen-Stapel ─────────── */
.stack {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.stack__shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #000;
}
.stack__shot img { display: block; width: 100%; height: auto; }

/* Tiefenschaerfe: was hinten liegt, tritt zurueck. Ohne das zieht
   eine helle Aufnahme im Hintergrund den Blick staerker an als die
   vordere und die Staffelung kippt. */
.stack__shot--hinten,
.stack__shot--mitte { }
.stack__shot--hinten::after,
.stack__shot--mitte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  pointer-events: none;
}
.stack__shot--hinten::after { opacity: .55; }
.stack__shot--mitte::after { opacity: .3; }

/* Hinten, klein und weit oben rechts */
.stack__shot--hinten {
  width: 52%;
  right: 0;
  top: 0;
  z-index: 1;
  box-shadow: 0 12px 30px rgba(0,0,0,.7), 0 30px 70px rgba(0,0,0,.5);
}
/* Mitte, versetzt */
.stack__shot--mitte {
  width: 58%;
  right: 8%;
  top: 16%;
  z-index: 2;
  box-shadow: 0 16px 38px rgba(0,0,0,.75), 0 38px 90px rgba(0,0,0,.55);
}
/* Vorne, gross und unten links */
.stack__shot--vorne {
  width: 76%;
  left: 0;
  bottom: 0;
  z-index: 3;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 46px rgba(0,0,0,.8), 0 48px 110px rgba(0,0,0,.6);
}

/* ─────────── Fusszeile der Karte ─────────── */
.ref__foot {
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(22px, 3vh, 32px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.ref__person { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.ref__person .slot--portrait,
.ref__person > img:first-child {
  width: 56px; height: 56px;
  border-radius: 50%;
  aspect-ratio: 1;
  flex: none;
  object-fit: cover;
}
.ref__person .slot__label { font-size: 9px; }
.ref__name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.ref__role { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-mute); }
.ref__logo {
  grid-column: 1 / -1;
  width: auto; height: 30px;
  margin-top: 16px;
  object-fit: contain; object-position: left center;
  opacity: .85;
}

.ref__tags-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ref__tags-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.ref__tags-list li {
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.ref__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(24px, 3vh, 34px);
  font-size: 14px; font-weight: 700;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
.ref__link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.ref__link:hover { border-bottom-color: var(--ink); }
.ref__link:hover svg { transform: translateX(3px); }

/* ─────────── Bild-Platzhalter ─────────── */
.slot {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px),
    #0a0a0a;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-mute);
}
.slot__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}

@media (max-width: 940px) {
  .ref { grid-template-columns: 1fr; gap: 36px; padding: 44px 0; }
  .ref--gedreht .ref__text,
  .ref--gedreht .ref__media { order: 0; }
  .ref__foot { grid-template-columns: 1fr; gap: 26px; }
}

/* Die Kundenlogos sind als transparente Dateien abgelegt, weisse
   Marke auf Nichts. Ein CSS-Filter waere hier falsch: er faerbt auch
   den Hintergrund des Ausschnitts weiss und macht aus dem Logo einen
   Balken. Die Transparenz steckt deshalb in der Datei. */

/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN — Bento nach dem Vorbild der Aceternity-Vorlage
   Gemessen dort: fünf Spalten, 12px Abstand, Zeilen 314px,
   vier Kacheln im Wechsel 2/3 und 3/2, Radius 16px, Überschrift
   oben, Grafik füllt den Rest. Kein Rand, kein Aussenschatten.
   Die Tiefe kommt hier stattdessen aus der Oberfläche selbst:
   Lackglanz von oben, Punktraster, dunkler Rand nach unten.
   ════════════════════════════════════════════════════════════════ */
.leistungen {
  position: relative;
  z-index: 2;
  background: var(--black);
  padding: clamp(80px, 11vh, 140px) var(--gutter);
}
.leistungen__inner { width: 100%; max-width: 1240px; margin: 0 auto; }
.leistungen__head { margin-bottom: clamp(40px, 6vh, 68px); text-align: center; }
.leistungen__label {
  margin: 0 0 18px;
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.leistungen__title {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(21px, 2.1vw, 31px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
  text-wrap: balance;
}

.bento {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 314px;
  gap: 12px;
}
.kachel {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 22px 0;
  /* Glänzendes Schwarz: Lichtkante oben, Punktraster in der Fläche,
     Abdunklung nach unten. Zusammen wirkt es wie lackiertes Material
     statt wie eine flache Farbe. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(168deg, var(--panel-hell) 0%, var(--panel-mitte) 46%, var(--panel-tief) 100%);
  /* Umlaufende Haarlinie. Ohne sie verliert sich die Unterkante im
     Seitenhintergrund, weil die Kachel dort fast gleich dunkel wird,
     und die Form wirkt nach unten offen. */
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -30px 50px rgba(0,0,0,.45);
}
.kachel--gross { grid-column: span 3; }

.kachel__kopf { position: relative; z-index: 2; }
.kachel__titel {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: 700; line-height: 1.25; letter-spacing: -.02em;
  color: var(--ink);
}
.kachel__text {
  margin: 0;
  font-size: clamp(12.5px, .92vw, 14px);
  line-height: 1.5; color: var(--ink-mute);
  max-width: 46ch;
}

.kachel__buehne {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center;
}

/* Die Buehne traegt in allen vier Kacheln ein Panel, das unten
   weich ausblendet statt hart abzureissen. */
.kachel__buehne { padding-bottom: 0; }

/* ─────────── Ablaufplan in der Strategie-Kachel ───────────
   Die Kette laeuft absichtlich unten aus der Kachel heraus und wird
   dabei weich ausgeblendet. Der Plan wirkt dadurch laenger als der
   Ausschnitt, ohne dass eine Karte hart abgeschnitten aussieht. */
.kachel__buehne--plan { display: block; padding-bottom: 0; }
.kachel__buehne--plan,
.kachel__buehne--tafel,
.kachel__buehne--hitze,
.kachel__buehne--seiten {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.plan {
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  font-size: 12.5px;
}
.plan__kette { padding: 12px 14px 0; }
.plan__karte {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  color: var(--ink-mute);
  letter-spacing: -.01em;
}
.plan__karte + .plan__karte { margin-top: 14px; }
/* Verbindung zur vorigen Karte: Haarlinie plus Knoten auf der Kante. */
.plan__karte + .plan__karte::before {
  content: ''; position: absolute; left: 26px; top: -15px;
  width: 1px; height: 15px;
  /* Die Leitung ist dreimal so hoch wie das Element. In der Mitte des
     Verlaufs sitzt ein heller Streifen, den die Animation durch das
     sichtbare Fenster schiebt. So laeuft Licht die Leitung hinunter. */
  background-image: linear-gradient(180deg,
    rgba(255,255,255,.18) 0%,   rgba(255,255,255,.18) 38%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.18) 62%,  rgba(255,255,255,.18) 100%);
  background-size: 100% 300%;
  background-position: 0 0;
}
.plan__karte + .plan__karte::after {
  content: ''; position: absolute; left: 23px; top: -18px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: var(--knoten);
}
.plan__nr {
  flex: none;
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  font-size: 10px; font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Der erste Schritt ist der einzige helle. Die Reihenfolge soll man
   sehen, ohne dass vier gleich laute Karten darum konkurrieren. */
.plan__karte--aktiv {
  color: var(--ink);
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}
.plan__karte--aktiv .plan__nr { border-color: rgba(255,255,255,.45); }

/* ─────────── Aufmerksamkeitskarte in der Psychologie-Kachel ───────────
   Ausschnitt einer Landingpage mit Heatmap darueber. Die Flecken sind
   monochrom statt rot-gelb, weil die Seite sonst ihre Ruhe verliert.
   Die Intensitaet allein traegt die Aussage. */
.kachel__buehne--hitze { display: block; padding-bottom: 0; }
.hitze {
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  font-size: 12px;
}
.hitze__seite {
  position: relative;
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 16px; align-items: center;
  padding: 18px 16px 22px;
  overflow: hidden;
}
.hitze__spalte { display: flex; flex-direction: column; gap: 9px; }
.hitze__zeile {
  height: 6px; width: 100%;
  border-radius: 3px;
  background: rgba(255,255,255,.2);
}
/* Die Ueberschriftzeile ist dicker und heller, damit der heisseste
   Fleck auf etwas sitzt, das erkennbar eine Headline ist. */
.hitze__zeile--titel { height: 11px; width: 94%; background: rgba(255,255,255,.3); }
.hitze__knopf {
  margin-top: 6px;
  width: 42%; height: 17px;
  border-radius: 9px;
  background: rgba(255,255,255,.24);
}
.hitze__block {
  height: 92px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
}

/* Ein Fleck sind konzentrische Baender im Verlauf selbst, nicht Ringe
   per Schatten. Erst die harten Stufen lesen sich als Hoehenlinien
   einer Messung. Der leichte Weichzeichner nimmt ihnen die Haerte,
   ohne die Stufen zu verwischen. */
.hitze__fleck {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(.5px);   /* nimmt den Stufen die Haerte, ohne sie zu verwischen */
  --o: 1;
  opacity: var(--o);
  background: radial-gradient(circle,
    rgba(255,255,255,.52) 0%,  rgba(255,255,255,.52) 15%,
    rgba(255,255,255,.32) 16%, rgba(255,255,255,.32) 31%,
    rgba(255,255,255,.19) 32%, rgba(255,255,255,.19) 47%,
    rgba(255,255,255,.10) 48%, rgba(255,255,255,.10) 63%,
    rgba(255,255,255,.045) 64%, rgba(255,255,255,.045) 81%,
    transparent 82%);
}
/* Kopfzeile und Schaltflaeche sind heiss, das Bild mittel, der Rest kalt.
   Genau die Verteilung, die eine Seite zeigt, die funktioniert. */
.hitze__fleck--kopf  { left: 9%;    top: 10%; width: 60px; height: 44px; }
.hitze__fleck--knopf { left: 9.5%;  top: 55%; width: 52px; height: 38px; --o: .85; }
.hitze__fleck--bild  { left: 73%;   top: 32%; width: 56px; height: 44px; --o: .5; }
.hitze__fleck--rand  { left: 34.5%; top: 44%; width: 34px; height: 26px; --o: .32; }

/* ─────────── Seitenentwuerfe in der Webseiten-Kachel ───────────
   Bewusst weiche Flaechen statt Konturzeichnung. Eine Vektorgrafik mit
   1-px-Kanten stand hier vorher hart neben den drei Panels der anderen
   Kacheln und liess die ganze Reihe uneinheitlich wirken. */
.kachel__buehne--seiten { display: block; }
.seiten {
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  font-size: 12px;
}
.seiten__reihe {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 16px 0;
}
.seite {
  display: flex; flex-direction: column; gap: 7px;
  min-height: 168px;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
}
.seite__leiste { height: 5px;  width: 100%; border-radius: 3px; background: rgba(255,255,255,.10); }
.seite__titel  { height: 9px;  width: 76%;  border-radius: 3px; background: rgba(255,255,255,.2); margin-top: 4px; }
.seite__zeile  { height: 4px;              border-radius: 2px; background: rgba(255,255,255,.10); }
.seite__knopf  { height: 13px; width: 48%; border-radius: 7px; background: rgba(255,255,255,.16); margin-top: 3px; }
.seite__block  {
  flex: 1; min-height: 46px; margin-top: 4px;
  border-radius: 7px;
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
/* Ein Entwurf ist der gewaehlte. Derselbe Blickanker wie die
   Gewinnerzeile in der Anzeigenverwaltung und der erste Schritt im
   Ablaufplan, damit die vier Kacheln dieselbe Grammatik sprechen. */
.seite--gewaehlt {
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.028));
}
.seite--gewaehlt .seite__titel { background: rgba(255,255,255,.34); }
.seite--gewaehlt .seite__knopf { background: rgba(255,255,255,.3); }
.seite--gewaehlt .seite__block { background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.025)); }

/* ─────────── Anzeigenverwaltung als Nachbau ─────────── */
.kachel__buehne--tafel { display: block; padding-bottom: 0; }
.tafel {
  --sp: 1.5fr .95fr .8fr 1.15fr;
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  font-size: 12px;
  overflow: hidden;
}
.tafel__leiste {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tafel__marke {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); opacity: .85;
}
.tafel__name { color: var(--ink-dim); font-weight: 700; letter-spacing: -.01em; }
.tafel__zeit { margin-left: auto; color: var(--ink-mute); font-size: 11px; }

.tafel__kopf, .tafel__zeile {
  display: grid; grid-template-columns: var(--sp);
  align-items: center; gap: 10px;
  padding: 0 14px;
}
.tafel__kopf {
  height: 30px; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tafel__kopf span + span, .tafel__zeile .tafel__wert { text-align: right; }

.tafel__zeile {
  height: 42px;
  color: var(--ink-mute);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tafel__anzeige { display: flex; align-items: center; gap: 9px; text-align: left; }
.tafel__bild {
  flex: none; width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
}
/* Die Gewinnervariante ist die einzige helle Zeile. Ein Blickanker
   reicht, mehr Kontrast würde die Tafel unruhig machen. */
.tafel__zeile--sieger { color: var(--ink); }
.tafel__zeile--sieger .tafel__bild { border-color: rgba(255,255,255,.4); }
.tafel__wert { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ════════════════════════════════════════════════════════════════
   BEWEGUNG — läuft nur, solange der Bereich im Bild ist
   ════════════════════════════════════════════════════════════════ */
/* Der Impuls laeuft die Kette hinunter, Leitung fuer Leitung, dann
   eine Pause. Sequenziell statt gleichzeitig, sonst blinkt der Plan,
   statt eine Richtung zu zeigen. */
[data-live].is-live .plan__karte + .plan__karte::before { animation: leitungLauf 2.8s linear infinite; }
[data-live].is-live .plan__karte + .plan__karte::after  { animation: knotenBlitz 2.8s ease-out infinite; }
[data-live].is-live .plan__karte:nth-child(3)::before,
[data-live].is-live .plan__karte:nth-child(3)::after { animation-delay: .7s; }
[data-live].is-live .plan__karte:nth-child(4)::before,
[data-live].is-live .plan__karte:nth-child(4)::after { animation-delay: 1.4s; }

@keyframes leitungLauf {
  0%        { background-position: 0 100%; }
  25%, 100% { background-position: 0 0; }
}
/* Der Knoten sitzt am Anfang der Leitung und blitzt auf, wenn der
   Impuls ihn erreicht. */
@keyframes knotenBlitz {
  0%       { border-color: rgba(255,255,255,.8); background: #1b1b22; }
  16%, 100%{ border-color: rgba(255,255,255,.3); background: var(--knoten); }
}

/* Die Flecken pulsieren versetzt, wie Messpunkte, die sich fuellen.
   Der Puls skaliert die jeweilige Grunddeckkraft, damit die Abstufung
   heiss zu kalt zwischen den Flecken erhalten bleibt. */
[data-live].is-live .hitze__fleck { animation: fleckPuls 3.4s ease-in-out infinite; }
[data-live].is-live .hitze__fleck--knopf { animation-delay: .5s; }
[data-live].is-live .hitze__fleck--bild  { animation-delay: 1s; }
[data-live].is-live .hitze__fleck--rand  { animation-delay: 1.5s; }
/* Nur Deckkraft, keine Skalierung. Ein skalierter Fleck wird von Chrome
   einmal gerastert und dann aufgezogen, wodurch die Hoehenlinien
   verwaschen. Das Pulsieren allein traegt die Bewegung. */
@keyframes fleckPuls {
  0%, 100% { opacity: calc(var(--o) * .42); }
  45%      { opacity: var(--o); }
}

.tafel__zeile--sieger { box-shadow: inset 2px 0 0 rgba(255,255,255,0); transition: box-shadow .6s var(--ease); }
[data-live].is-live .tafel__zeile--sieger { box-shadow: inset 2px 0 0 rgba(255,255,255,.55); }

.tafel__kurz { display: none; }

@media (max-width: 940px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .kachel, .kachel--gross { grid-column: span 1; }
}

/* Auf schmalen Geraeten faellt die Spalte Ausgaben weg. Drei Werte
   nebeneinander bleiben lesbar, vier brechen um und zerstoeren die Zeile. */
@media (max-width: 620px) {
  .tafel { --sp: 1.4fr .8fr 1.1fr; font-size: 11px; }
  .tafel__kopf, .tafel__zeile { padding: 0 12px; gap: 8px; }
  .tafel__kopf > span:nth-child(2),
  .tafel__zeile > :nth-child(2) { display: none; }
  .tafel__lang { display: none; }
  .tafel__kurz { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  [data-live].is-live .hitze__fleck,
  [data-live].is-live .plan__karte + .plan__karte::before,
  [data-live].is-live .plan__karte + .plan__karte::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   ABLAUF — vier breite Zeilen, wie gearbeitet wird
   ════════════════════════════════════════════════════════════════ */
.ablauf {
  position: relative;
  z-index: 2;
  background: var(--black);
  padding: clamp(80px, 11vh, 140px) var(--gutter) clamp(96px, 13vh, 160px);
}
/* Keine Boxen, keine Fuellflaechen, nur Luft und je eine Haarlinie
   zwischen den Schritten. Breiter als die uebrigen Sektionen, damit
   Titel und Text weit auseinander stehen koennen, aber nicht bis an
   den Bildschirmrand. Gleiche Breite wie Referenzen und Leistungen,
   damit die Haarlinien mit den Karten darueber fluchten. */
.ablauf__inner { width: 100%; max-width: 1240px; margin: 0 auto; }

.ablauf__head {
  margin: 0 auto clamp(56px, 8vh, 104px);
  max-width: 1240px;
  text-align: center;
}
.ablauf__label {
  margin: 0 0 18px;
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ablauf__title {
  margin: 0 auto;
  /* Weiter als bei den anderen Sektionstiteln: dieser Satz ist laenger
     und wuerde bei 22ch auf drei Zeilen brechen. */
  max-width: 30ch;
  font-size: clamp(21px, 2.1vw, 31px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
  text-wrap: balance;
}
/* Die Subheadline traegt das Versprechen und darf laenger stehen als
   der Titel. Etwas heller als Fliesstext, damit sie gelesen wird. */
.ablauf__sub {
  margin: 20px auto 0;
  max-width: 62ch;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.schritte { list-style: none; margin: 0; padding: 0; }

/* Nummer und Titel links, Text und Schlagworte rechts. Getrennt nur
   durch eine Haarlinie, die von Rand zu Rand laeuft.

   Die Karten stapeln sich beim Scrollen: jede bleibt unter dem Kopf
   haengen, die naechste schiebt sich darueber. Damit das geht, braucht
   jede Karte eine deckende Flaeche. Sie bekommt den Seitengrund, sieht
   dadurch aus wie vorher und deckt trotzdem ab. Sichtbar bleibt vom
   Stapel nur die Haarlinie jeder Karte, um --n * 13px versetzt. */
.schritt {
  position: sticky;
  top: calc(var(--header-h) + var(--n, 0) * 13px);
  z-index: calc(var(--n, 0) + 1);
  background: var(--black);
  /* Schatten in der Grundfarbe ueber der Oberkante. Die Karte darunter
     loest sich dadurch auf, statt an der Kante abgeschnitten zu werden.
     Ohne ihn liest sich der Stapel als Darstellungsfehler. */
  box-shadow: 0 -34px 44px -14px var(--black);

  display: grid;
  /* Titel buendig links, Text buendig rechts. Die schmale rechte
     Spalte schiebt beide so weit auseinander wie moeglich und haelt
     die Zeilenlaenge gleichzeitig lesbar. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: clamp(28px, 3vw, 56px);
  padding: clamp(40px, 4.6vw, 70px) 0 clamp(48px, 5.6vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.schritt:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* Der letzte Schritt braucht Auslauf, sonst rastet er nie ein und der
   Stapel bleibt unvollstaendig. */
.schritte { padding-bottom: clamp(120px, 22vh, 260px); }

.schritt__nr {
  display: block;
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}
.schritt__titel {
  margin: 0;
  /* Kursive Serife wie im Rest der Seite. Freight Display hat bei
     gleicher Punktgroesse rund 87 Prozent der Versalhoehe von Aktiv
     Grotesk, wirkt hier also von selbst eine Spur kleiner. */
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(21px, 1.95vw, 29px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--ink);
  /* Begrenzt, damit lange Titel auf zwei ausgewogene Zeilen brechen
     statt sich ueber die halbe Sektion zu ziehen. */
  max-width: 24ch;
  text-wrap: balance;
}

.schritt__koerper { max-width: none; }
.schritt__text {
  margin: 0;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.62;
  color: var(--ink-mute);
}
.schritt__text + .schritt__text { margin-top: 15px; }

.pillen {
  list-style: none;
  margin: 0;
  padding: clamp(22px, 2.2vw, 30px) 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pillen li {
  padding: 6px 13px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.11);
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
}

@media (max-width: 940px) {
  /* Untereinander ist eine Karte hoeher als das Fenster. Gestapelt
     wuerde immer nur ein Ausschnitt kleben, das liest sich als Fehler.
     Deshalb dort wieder normal untereinander. */
  .schritt {
    position: static;
    background: none;
    box-shadow: none;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 0;
  }
  .schritte { padding-bottom: 0; }
  .pillen { padding-top: 20px; }
}

/* ════════════════════════════════════════════════════════════════
   GEGENUEBERSTELLUNG — Agenturmarkt gegen Leadsmith
   ════════════════════════════════════════════════════════════════ */
.vergleich {
  position: relative;
  z-index: 2;
  background: var(--black);
  padding: clamp(80px, 11vh, 140px) var(--gutter);
}
.vergleich__inner { width: 100%; max-width: 1240px; margin: 0 auto; }
.vergleich__head { margin-bottom: clamp(40px, 6vh, 68px); text-align: center; }
.vergleich__title {
  margin: 0 auto;
  max-width: 26ch;
  font-size: clamp(21px, 2.1vw, 31px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
  text-wrap: balance;
}

/* Ein einziges Raster fuer beide Spalten. Zwei getrennte Listen wuerden
   bei unterschiedlich langen Texten auseinanderlaufen, und dann steht
   die Gegenaussage nicht mehr neben ihrer Aussage. */
.gegen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(14px, 2.4vw, 36px);
  align-items: stretch;
}

.gegen__kopf {
  margin: 0;
  padding: 18px 0;
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase;
}
.gegen__kopf--alt { color: var(--ink-mute); }
.gegen__kopf--wir { color: var(--ink); }

.gegen__zelle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(20px, 2vw, 28px) 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.gegen__mark { flex: none; width: 14px; height: 14px; margin-top: 3px; }
/* Der Haken sitzt in einem eigenen Ring, das Kreuz nicht. Der
   Unterschied zwischen blossem Zeichen und gefasstem Zeichen traegt
   die Hierarchie mit, ohne dass Farbe noetig waere. */
.gegen__zelle--wir .gegen__mark {
  width: 21px; height: 21px;
  padding: 5px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid rgba(207, 212, 221, .38);
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.02));
}

.gegen__text { margin: 0; font-size: clamp(13.5px, .98vw, 15px); line-height: 1.6; }
.gegen__titel {
  margin: 0 0 7px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Links zurueckgenommen, rechts angehoben. Dieselbe Hierarchie wie
   in der Vorlage, nur ohne Rot und Gruen: die Farben wuerden die
   ruhige Flaeche der Seite zerreissen. */
.gegen__zelle--alt { color: var(--ink-mute); }
.gegen__zelle--alt .gegen__mark { color: rgba(255,255,255,.3); }

.gegen__kopf--wir,
.gegen__zelle--wir {
  padding-left: clamp(18px, 2vw, 30px);
  padding-right: clamp(18px, 2vw, 30px);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.gegen__kopf--wir { border-radius: var(--r-card) var(--r-card) 0 0; padding-top: 22px; }
.gegen__zelle--wir { color: var(--ink-dim); border-top-color: rgba(255,255,255,.09); }
.gegen__zelle--wir .gegen__mark { color: var(--silber); }
.gegen > .gegen__zelle--wir:last-child {
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding-bottom: clamp(26px, 2.6vw, 34px);
}

@media (max-width: 860px) {
  /* Untereinander folgt jede Gegenaussage direkt auf ihre Aussage.
     Die Spaltenkoepfe fallen weg, weil im Einspalter beide oben
     landen wuerden und die Zuordnung zerstoeren. Das Kreuz, der Haken
     und die angehobene Flaeche tragen die Unterscheidung allein. */
  .gegen { grid-template-columns: 1fr; column-gap: 0; }
  .gegen__kopf { display: none; }

  .gegen__zelle--alt {
    border-top: 0;
    padding: 22px 0 14px;
  }
  .gegen__zelle--alt + .gegen__zelle--alt { border-top: 1px solid rgba(255,255,255,.07); }

  .gegen__zelle--wir,
  .gegen > .gegen__zelle--wir:last-child {
    border-top: 0;
    border-radius: var(--r-card);
    padding-top: clamp(20px, 3.4vw, 26px);
    padding-bottom: clamp(20px, 3.4vw, 26px);
  }
}

/* ════════════════════════════════════════════════════════════════
   UEBER — der Kopf hinter Leadsmith
   ════════════════════════════════════════════════════════════════ */
.ueber {
  position: relative;
  z-index: 2;
  background: var(--black);
  padding: clamp(80px, 11vh, 140px) var(--gutter) clamp(96px, 13vh, 160px);
}
.ueber__inner {
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.ueber__title {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
}
.ueber__abs {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.62;
  color: var(--ink-mute);
}
.ueber__abs + .ueber__abs { margin-top: 18px; }

/* Das Portraet ist auf Schwarz fotografiert. Die weiche Kante links und
   unten laesst es in die Seitenflaeche laufen, statt es in einen Rahmen
   zu sperren. */
.ueber__bild {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
}
.ueber__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  /* Alle vier Kanten laufen aus. Der Studiohintergrund des Fotos ist
     heller als das Seitenschwarz, ohne den Auslauf zeichnet sich oben
     und rechts eine sichtbare Kante ab. */
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 26%),
                      linear-gradient(0deg, transparent 0%, #000 22%),
                      linear-gradient(280deg, transparent 0%, #000 9%),
                      linear-gradient(180deg, transparent 0%, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(100deg, transparent 0%, #000 26%),
              linear-gradient(0deg, transparent 0%, #000 22%),
              linear-gradient(280deg, transparent 0%, #000 9%),
              linear-gradient(180deg, transparent 0%, #000 9%);
  mask-composite: intersect;
}
.ueber__bild .slot { position: absolute; inset: 0; border-radius: var(--r-card); }

@media (max-width: 940px) {
  .ueber__inner { grid-template-columns: 1fr; gap: 36px; }
  /* Zuerst das Gesicht, dann der Text. Ein Portraet unter drei Absaetzen
     wird auf dem Handy kaum noch gesehen. */
  .ueber__bild { order: -1; aspect-ratio: 5 / 6; max-width: 420px; }
  .ueber__bild img {
    /* Quadratisch beschneidet den Kopf an der Oberkante. Hochformat
       liegt naeher am Original und laesst dem Gesicht Luft. */
    object-position: 50% 10%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 18%),
                        linear-gradient(180deg, transparent 0%, #000 8%),
                        linear-gradient(90deg, transparent 0%, #000 7%),
                        linear-gradient(270deg, transparent 0%, #000 7%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(0deg, transparent 0%, #000 18%),
                linear-gradient(180deg, transparent 0%, #000 8%),
                linear-gradient(90deg, transparent 0%, #000 7%),
                linear-gradient(270deg, transparent 0%, #000 7%);
    mask-composite: intersect;
  }
}

/* ════════════════════════════════════════════════════════════════
   NAECHSTER ZUG — Abschluss und Handlungsaufforderung
   ════════════════════════════════════════════════════════════════ */
.zug {
  position: relative;
  z-index: 2;
  background: var(--black);
  padding: clamp(80px, 11vh, 140px) var(--gutter) clamp(100px, 14vh, 170px);
}
.zug__inner { width: 100%; max-width: 1240px; margin: 0 auto; }

.zug__head { margin-bottom: clamp(48px, 7vh, 88px); text-align: center; }
.zug__title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
}
.zug__sub {
  margin: 14px 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--ink-mute);
}

.zug__reihe {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
/* Senkrechte Haarlinie vor jeder Spalte, auch vor der ersten. Sie
   traegt die Gliederung, deshalb steht der Text mit Abstand dahinter. */
/* Fester Abstand statt Verteilung ueber die Hoehe. Bei space-between
   haengen die Bloecke unten buendig, und sobald ein Text eine Zeile
   mehr hat, rutschen seine Ueberschrift und sein Textanfang gegen die
   Nachbarn ab. So stehen sie immer auf einer Hoehe. */
.zug__spalte {
  display: flex;
  flex-direction: column;
  min-height: clamp(250px, 25vw, 330px);
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, .11);
}

/* Die Ziffer ist der Anker der Spalte. Kursive Serife wie die
   Auszeichnungen im Rest der Seite. Freight Display hat kleinere
   Ziffernhoehen als Aktiv Grotesk, deshalb eine Stufe groesser. */
.zug__nr {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 8.2vw, 118px);
  line-height: .84;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.zug__fuss { margin-top: clamp(48px, 9vh, 112px); }
.zug__titel {
  margin: 0 0 9px;
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: 700; line-height: 1.25; letter-spacing: -.02em;
  color: var(--ink);
}
.zug__text {
  margin: 0;
  font-size: clamp(13.5px, .98vw, 15px);
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 34ch;
}

.zug__cta { margin-top: clamp(56px, 8vh, 100px); text-align: center; }
/* Letzter Anlauf vor dem Knopf: was es kostet zu warten, und was das
   Gespraech kostet. Kurz, sonst liest es niemand mehr. */
.zug__schluss {
  margin: 0 auto clamp(24px, 2.8vw, 34px);
  max-width: 52ch;
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.6;
  color: var(--ink-mute);
  text-wrap: pretty;
}
.zug__frage {
  margin: 0 auto clamp(16px, 1.8vw, 22px);
  max-width: 26ch;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700; line-height: 1.25; letter-spacing: -.025em;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .zug__reihe { grid-template-columns: 1fr; gap: 34px; }
  .zug__spalte { min-height: 0; gap: 20px; }
}

/* ════════════════════════════════════════════════════════════════
   FUSS — Claim, Wegweiser, Rechtliches
   ════════════════════════════════════════════════════════════════ */
.fuss {
  position: relative;
  z-index: 2;
  /* Eine Spur heller als der Seitengrund, dazu eine Lichtkante oben.
     Dadurch setzt sich der Fuss ab, ohne eine Trennlinie zu brauchen. */
  background: var(--panel-fuss);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  padding: clamp(64px, 9vh, 104px) calc(var(--gutter) + var(--sicher-r))
           calc(clamp(40px, 5vh, 56px) + var(--sicher-u)) calc(var(--gutter) + var(--sicher-l));
}
.fuss__inner { width: 100%; max-width: 1240px; margin: 0 auto; }

/* Der Claim schliesst die Seite mit derselben Zeile, mit der sie
   oeffnet. Einzeilig, aber nicht randvoll: bei Sequel belegt er 78
   Prozent der verfuegbaren Breite, gemessen 976 von 1248. Die Zeile
   ist das 12,93-fache der Schriftgroesse breit, daraus ergeben sich
   75px im 1240er Raster und 5.5vw darunter. */
.fuss__claim {
  margin: 0;
  font-size: min(5.5vw, 75px);
  font-weight: var(--w-display);
  line-height: 1.06;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.fuss__mitte {
  margin-top: clamp(72px, 13vh, 168px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 9vw, 128px);
}
/* Der Abstand steckt im Innenabstand der Links statt im Rasterabstand.
   Das Bild bleibt identisch, die Trefferflaeche waechst von 23 auf
   37 Pixel und liegt damit ueber dem Mindestmass. */
.fuss__spalte { display: flex; flex-direction: column; gap: 1px; }
.fuss__label {
  margin: 0 0 3px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.fuss__spalte a {
  padding: 7px 0;
  font-size: 15.5px;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.fuss__spalte a:hover { color: var(--ink-dim); }

.fuss__unten {
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.fuss__recht {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 640px) {
  .fuss__mitte { gap: 34px 56px; }
}

/* ─────────── Wiederkehrender Aufruf ───────────
   Nach dem Beleg und nach der Arbeitsweise. An beiden Stellen ist die
   Bereitschaft am hoechsten, und der Weg zum Abschluss ist von dort
   sonst sehr lang. Nur der Knopf, ohne Anmoderation. */
.ctaband {
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: clamp(40px, 5vh, 64px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}

/* Der lange Aufruf passt auf schmalen Geraeten nicht in eine Zeile.
   Statt ihn zu kuerzen, darf er dort umbrechen. Der Pfeil entfaellt,
   er wuerde sonst allein auf der zweiten Zeile stehen. */
@media (max-width: 620px) {
  .btn--lg,
  .mobile-nav .btn {
    height: auto;
    min-height: 56px;
    padding: 15px 24px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .btn--lg .btn__arrow,
  .mobile-nav .btn .btn__arrow { display: none; }
}