/* =========================================================================
   RAKU Stahl & Aluminium GmbH · Startseite (Konzeptentwurf Silberschmidt Media)
   Tokens und Maße 1:1 aus dem Figma-Layout „RAKU · Startseite 1440“.
   Mobile-first, Grid/Flex, fluide Typo via clamp(). Kein CDN, alles lokal.
   ========================================================================= */

/* ---------- 1. Schriften (lokal) ---------- */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Flächen und Farben aus dem Layout */
  --paper: #f3f4f4;
  --paper-white: #ffffff;
  --ink: #0e1113;
  --ink-soft: #5e676c;

  /* Stahlblau der Marke. --accent flächig und auf Dunkel,
     --accent-ink für Akzent-TEXT auf hellen Flächen (7,0:1). */
  --accent: #3c81a4;
  --accent-deep: #2f6d8c;
  --accent-ink: #2a5f7c;

  --rule: #0e1113;

  /* Schrift-Stacks */
  --font-display: "Archivo Black", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type-Scale, Min/Max aus dem Layout */
  --t-display-xl: clamp(2.75rem, 7.8vw, 7rem);        /* 112px */
  --t-display-l: clamp(2rem, 3.9vw, 3.5rem);          /*  56px */
  --t-quote: clamp(1.625rem, 3.2vw, 2.875rem);        /*  46px */
  --t-title-l: clamp(1.375rem, 2.08vw, 1.875rem);     /*  30px */
  --t-title-m: clamp(1.25rem, 1.67vw, 1.5rem);        /*  24px */
  --t-body-l: clamp(1rem, 1.18vw, 1.0625rem);         /*  17px */
  --t-body-m: 0.9375rem;                              /*  15px */
  --t-body-s: 0.8125rem;                              /*  13px */
  --t-mono-m: 0.8125rem;                              /*  13px */
  --t-mono-s: 0.75rem;                                /*  12px */

  /* Abstände */
  --gutter: clamp(1.25rem, 4.45vw, 4rem);             /*  64px */
  --pad-section: clamp(3.5rem, 7.23vw, 6.5rem);       /* 104px */
  --gap-xl: clamp(2rem, 3.9vw, 3.5rem);               /*  56px */
  --gap-l: clamp(1.5rem, 2.78vw, 2.5rem);             /*  40px */
  --gap-m: clamp(1.25rem, 2.23vw, 2rem);              /*  32px */
  --gap-s: clamp(1.125rem, 1.95vw, 1.75rem);          /*  28px */
  --gap-xs: 1rem;                                     /*  16px */

  --shell: 90rem;                                     /* 1440px */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 3. Reset und Grundlagen ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body-l);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

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

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

/* Nur für Screenreader */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-mono-s);
  letter-spacing: 0.06em;
  text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- 4. Bausteine ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.display-xl,
.display-l {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-xl {
  font-size: var(--t-display-xl);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.display-l {
  font-size: var(--t-display-l);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.title-m {
  font-family: var(--font-body);
  font-size: var(--t-title-m);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-s);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mono-line {
  font-family: var(--font-mono);
  font-size: var(--t-mono-m);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lead {
  font-size: var(--t-body-l);
  line-height: 1.5;
  max-width: 35rem;                                  /* 560px wie im Layout */
}

.copy {
  font-size: var(--t-body-m);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Buttons: Outline wie im Layout, Füllung läuft beim Hover durch. */

.btn,
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease);
}

.btn {
  min-height: 2.9375rem;                             /* 47px wie im Layout */
  padding: 0.9375rem 1.625rem;
  font-size: var(--t-mono-m);
}

.btn::after,
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}

@media (hover: hover) {
  .btn:hover::after,
  .cta:hover::after { transform: scaleX(1); }
  .btn:hover,
  .cta:hover { color: var(--paper); }
}

/* Full-bleed Raster: die 1px-Fugen sind der Ink-Grund, der durchscheint.
   Die seitlichen Rahmen schließen die Reihe, sonst haben die äußeren Karten
   nach außen keine Kante und das Band steht offen. */
.split {
  display: grid;
  gap: 1px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  background: var(--ink);
  border: 1px solid var(--rule);
}

/* ---------- 5. Header ---------- */

.site-header {
  position: relative;
  z-index: 30;
  background: var(--paper-white);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xs);
  padding-block: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

/* Feste 72er-Box wie im Layout, das Signet wird eingepasst. Ohne die
   Höhenbindung diktiert das Seitenverhältnis der Datei die Headerhöhe. */
.brand__mark {
  width: clamp(3rem, 5vw, 4.5rem);                   /* 72px */
  height: clamp(3rem, 5vw, 4.5rem);
  object-fit: contain;
  flex: none;
}

.brand__word {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);     /* 18px */
  font-weight: 600;
  line-height: 1.24;
  color: var(--accent-ink);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);               /* 36px */
}

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--t-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:not(.btn)::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.25rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
  .nav__link:not(.btn):hover::after { transform: scaleX(1); }
}

.nav__cta {
  min-height: 2.25rem;                               /* 36px */
  padding: 0.625rem 1.125rem;
  font-size: var(--t-mono-s);
}

/* Mobile Navigation */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-toggle__bars {
  position: relative;
  width: 1.25rem;
  height: 0.625rem;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding: var(--gap-m) var(--gutter) var(--gap-l);
  background: var(--paper-white);
  border-bottom: 1px solid var(--rule);
}
.nav[data-open="true"] { display: block; }

.nav[data-open] .nav__list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
}

/* Unterhalb des Desktop-Breakpoints brauchen die Links echte Zielgrößen,
   im JS-Panel wie im No-JS-Fluss. */
@media (max-width: 61.9375rem) {
  .nav__link:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Ohne JS gibt es keinen Zustand zum Umschalten: dann steht die Navigation
   offen im Fluss und der Toggle verschwindet, statt als tote Taste zu
   bleiben. */
.no-js .nav-toggle { display: none; }
.no-js .nav {
  position: static;
  display: block;
  padding-block: 0 var(--gap-xs);
  padding-inline: 0;
  background: none;
  border: 0;
}
.no-js .nav__list {
  flex-wrap: wrap;
  gap: var(--gap-xs) clamp(1.25rem, 2.5vw, 2.25rem);
}
.no-js .site-header__inner { flex-wrap: wrap; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    display: block;
    padding: 0;
    background: none;
    border: 0;
  }
  .nav[data-open] .nav__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
  }
  .nav[data-open] .nav__link:not(.btn) { min-height: 0; }
}

/* ---------- 6. Hero ---------- */

/* Der Hero läuft über die ganze Browserbreite. Damit die Headline auf breiten
   Schirmen nicht nach außen springt, hält ein Innenabstand die Textspalte auf
   dem Seitenraster; nur das Bild wächst nach rechts bis zur Fensterkante.
   Unterhalb von 1.440 px ist der Abstand 0, dort ändert sich nichts. */
.hero {
  display: grid;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-s);
  padding: clamp(2.5rem, 7.8vw, 7rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
}

.hero__lead {
  font-size: var(--t-body-l);
  line-height: 1.5;
  max-width: 29.375rem;                              /* 470px wie im Layout */
}

.hero__cta-wrap { display: flex; }

/* Die Höhe hängt am Rahmen, nicht am Bild. Ohne die Bindung setzt das
   Eigenformat (895x1200) durch und der Hero wird bis 1.300 px hoch. */
.hero__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
}

.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: 11fr 7fr;                 /* 880 / 560 */
    padding-left: max(0px, calc((100% - var(--shell)) / 2));
  }
  .hero__content {
    padding-right: 3rem;
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
  }
  /* Ab hier kommt die Zeilenhöhe aus der Textspalte, das Bild wird absolut
     eingehängt und füllt sie. Das Seitenverhältnis wird dazu aufgehoben. */
  .hero__figure { aspect-ratio: auto; }
  .hero__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---------- 7. Produkt-Ticker ---------- */

/* Zieht mit dem Hero über die ganze Browserbreite. Der Innenabstand setzt die
   erste Zelle auf dasselbe Seitenraster wie die Textspalte darüber. */
.ticker {
  position: relative;
  padding-left: max(0px, calc((100% - var(--shell)) / 2));
  /* Papier, nicht Ink: die Vorlauffläche links des Rasters darf nicht als
     schwarzer Block stehen. Die Fugen zeichnen deshalb die Zellen selbst. */
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* Statisch (ohne JS, ohne GSAP, bei reduzierter Bewegung) muss das Band
     bedienbar bleiben, sonst sind zwei der vier Kategorien nie erreichbar. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }

/* Läuft die Animation, übernimmt sie die Bewegung und das Band wird geklippt. */
.is-motion .ticker {
  overflow: hidden;
}

/* Statisch soll die Spur die Bandbreite füllen, damit rechts keine
   Ink-Fläche offen bleibt. Läuft die Animation, zählt wieder der Inhalt. */
.ticker__track {
  display: flex;
  width: 100%;
  min-width: max-content;
}
.is-motion .ticker__track {
  width: max-content;
  min-width: 0;
}

.ticker__rest {
  flex: 1 1 auto;
  border-left: 1px solid var(--rule);
  background: var(--paper);
}
.is-motion .ticker__rest { display: none; }

.ticker__group { display: flex; }

/* Die zweite Gruppe ist reine Schleifen-Reserve. Statisch würde sie ab etwa
   1.150 px als sichtbare Dopplung auftauchen. */
.ticker__group + .ticker__group { display: none; }
.is-motion .ticker__group + .ticker__group { display: flex; }

.ticker__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;                                /* 56px */
  padding-inline: 2rem;                              /* 32px */
  border-left: 1px solid var(--rule);
  background: var(--paper);
}

/* Die erste Zelle sitzt auf der Rasterkante und braucht dort keine Fuge. */
.ticker__group:first-child .ticker__item:first-child {
  padding-left: var(--gutter);
  border-left: 0;
}

.ticker__icon {
  width: 1.25rem;                                    /* 20px */
  height: 1.25rem;
  flex: none;
  fill: var(--accent-ink);
}

.ticker__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Die Ausblendung gehört zur laufenden Zeile. Steht das Band, wäre sie nur
   ein Schleier über lesbaren Labels. */
.ticker__fade { display: none; }

.is-motion .ticker__fade {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(4rem, 12.5vw, 11.25rem);              /* 180px */
  background: linear-gradient(to right, rgba(243, 244, 244, 0), var(--paper));
  pointer-events: none;
}

/* Halt für das laufende Band. WCAG 2.2.2 verlangt eine Bedienmöglichkeit,
   Hover allein erreicht Touch und Tastatur nicht. Ohne Motion überflüssig. */
.ticker__halt { display: none; }

.is-motion .ticker__halt {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  color: var(--ink);
  background: var(--paper);
  border-left: 1px solid var(--rule);
}

.ticker__halt svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.ticker__halt .icon-play { display: none; }
.ticker__halt[aria-pressed="true"] .icon-pause { display: none; }
.ticker__halt[aria-pressed="true"] .icon-play { display: block; }

/* ---------- 8. Standbeine ---------- */

.standbeine {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  padding-top: var(--pad-section);
}

.standbeine__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.zelle {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* Seitenverhältnis statt vw-Höhe: sonst laufen Bildhöhe und Spaltenbreite
   auseinander und die Zuschnitte reichen von 1,6:1 bis fast 4:1. */
.zelle__figure {
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.zelle__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zelle__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) var(--gap-l) var(--gap-l);
}

@media (min-width: 48rem) {
  .split { grid-template-columns: 1fr 1fr; }
  /* Bildmaß der Kacheln wie im Layout (719 zu 310). */
  .zelle__figure { aspect-ratio: 719 / 310; }
}

/* Das Dreier-Raster darf die zwei Spalten NICHT erben: sonst bleibt die
   dritte Karte allein und die vierte Zelle rendert als schwarze Fläche.
   Vollbreite Elemente in diesem Band brauchen ein flacheres Bildmaß, sonst
   schiebt ein 3:2-Zuschnitt den Text um 600 px nach unten. */
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .split--3 { grid-template-columns: 1fr; }
  .hero__figure { aspect-ratio: 21 / 9; }
}

/* ---------- 9. Leitsatz ---------- */

.zitat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  padding: clamp(3rem, 6.7vw, 6rem) var(--gutter);   /* 96px */
  text-align: center;
  color: var(--paper-white);
  background: linear-gradient(to bottom, var(--accent), var(--accent-deep));
}

.zitat__label { color: var(--paper-white); }

.zitat__satz {
  font-family: var(--font-display);
  font-size: var(--t-quote);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 61.25rem;                               /* 980px wie im Layout */
  text-wrap: balance;
}

/* ---------- 10. Produkte ---------- */

.showcase {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  padding-top: var(--pad-section);
}

.showcase__head { text-align: center; }

.karte {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.karte__figure {
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.karte__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Muss NACH der Basisregel stehen, sonst überschreibt sie das flachere Maß
   der vollbreiten Karte in diesem Band wieder. */
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .karte__figure { aspect-ratio: 21 / 9; }
}

.karte__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: var(--gap-m) var(--gap-l) var(--gap-l);
}

.karte__text {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;                                     /* 14px */
}

.karte__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: var(--gap-s);                          /* 28px */
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.karte__cta-arrow {
  font-size: 0.9375rem;
  transition: transform 0.35s var(--ease);
}

/* Griff ans Material: die Karte reagiert als eine Fläche, weil in ihr ein
   echtes Ziel liegt. Bewusst knapp dosiert, sonst kippt der Ton ins Werbliche. */
.karte__figure img { transition: transform 0.6s var(--ease); }

@media (hover: hover) {
  .karte:hover .karte__cta-label { text-decoration: underline; text-underline-offset: 0.25em; }
  .karte:hover .karte__cta-arrow { transform: translateX(0.375rem); }
  .karte:hover .karte__figure img { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .karte:hover .karte__figure img { transform: none; }
}

@media (min-width: 62rem) {
  .split--3 { grid-template-columns: repeat(3, 1fr); }
  /* Bildmaß der Karten wie im Layout (479 zu 300). */
  .karte__figure { aspect-ratio: 479 / 300; }
}

/* ---------- 11. Vorschau-Fade ---------- */

.handoff {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 5.55vw, 5rem);          /* 80px */
}

.handoff__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.handoff__title { color: var(--ink); }

/* Die Kontaktzeile ist die einzige Pflichtangabe der Seite und das Ziel der
   Navigation. Sie muss über dem Veil liegen, sonst steht sie bei 2:1. Die
   Display-Headline darf im Fade bleiben, als Großschrift reicht ihr 3:1. */
.handoff .mono-line {
  position: relative;
  z-index: 1;
  color: var(--ink);
}

.handoff .mono-line a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.handoff__fragment {
  display: block;
  width: 14.125rem;                                  /* 226px */
  height: 3.25rem;                                   /* 52px */
  margin-bottom: -1.625rem;                          /* Rahmen wird angeschnitten */
  border: 1.5px solid var(--rule);
}

.handoff__veil {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(2rem, 4.2vw, 3.75rem);                  /* 60px */
  bottom: 0;
  background: linear-gradient(to bottom, rgba(243, 244, 244, 0) 0%, var(--paper) 100%);
  pointer-events: none;
}

/* ---------- 12. Pitch-Abschluss ---------- */

.pitch {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6.1vw, 5.5rem);
  background: var(--paper);
}

.pitch__inner {
  display: grid;
  gap: var(--gap-xl);
}

.pitch__photo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 15rem;                                      /* 240px */
  max-width: 100%;
}

.pitch__photo img { width: 100%; height: auto; }

.pitch__photo figcaption {
  font-size: var(--t-body-m);
  line-height: 1.45;
}

.pitch__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;                                     /* 18px */
}

.pitch__eyebrow {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
}

.pitch__eyebrow-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pitch__title {
  font-family: var(--font-body);
  font-size: var(--t-title-l);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.cta {
  min-height: 2.8125rem;                             /* 45px */
  padding: 0.875rem 1.5rem;
  font-size: var(--t-mono-m);
  letter-spacing: 0.02em;
  text-transform: none;
}

.cta__icon { flex: none; }

.pitch__tel { color: var(--ink); }

.pitch__fine {
  font-size: var(--t-body-s);
  line-height: 1.35;
  color: var(--ink-soft);
}

@media (min-width: 62rem) {
  .pitch__inner { grid-template-columns: 15rem 1fr; }
}

/* ---------- 13. Bewegung nur, wenn erwünscht ---------- */

/* Die Maske hat keine feste Höhe, ein umbrechender Abschnitt wird also nicht
   beschnitten. Der kleine Puffer schützt Unterlängen und Umlaute vor der
   Überlaufkante, ohne die Zeilenposition zu verschieben. */
.is-motion .line-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.09em;
  margin-block: -0.09em;
}
.is-motion .line { display: block; }

/* Läuft der Ticker, müssen beide Gruppen exakt gleich breit sein, sonst
   springt die Schleife. Deshalb bekommt die erste Zelle dann dasselbe
   Innenmaß und dieselbe Fuge wie alle anderen. Statisch sitzt sie am
   Seitenraster und ohne linke Fuge. */
.is-motion .ticker__group:first-child .ticker__item:first-child {
  padding-left: 2rem;
  border-left: 1px solid var(--rule);
}

/* Anriss: die tragenden 1px-Linien zeichnen sich in Leserichtung, bevor der
   Inhalt dahinter kommt. Ohne Motion tragen die originalen Borders weiter,
   deshalb werden sie nur unter .is-motion auf transparent gesetzt. Die Breite
   bleibt erhalten, es entsteht kein Layout-Shift. */
.is-motion .site-header { border-bottom-color: transparent; }

.is-motion .site-header__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
}

.is-motion .split {
  position: relative;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.is-motion .anriss {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
  pointer-events: none;
}
.is-motion .anriss--top { top: -1px; }
.is-motion .anriss--bottom { bottom: -1px; }

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