/* ============================================================================
   C-HUB Crailsheim — Stylesheet
   Stand 04.09.2026

   Grundlagen dieser Datei sind nachgerechnet, nicht geschaetzt:
   - Markengelb #F1D005 hat auf Weiss ein Kontrastverhaeltnis von 1,53:1 und ist
     dort in jeder Groesse unbenutzbar. Auf dem Marken-Anthrazit #1D1D1B sind es
     11,07:1. Deshalb ist die Seite dunkel — das ist Arithmetik, keine Vorliebe.
   - Gelbe Flaechen tragen ausschliesslich dunkle Schrift (11,07:1).
     Weiss auf Gelb waere 1,53:1 und ist verboten.
   - Markengrau #7F8884 und Petrol #4496AD sind Strukturfarben. Nie Fliesstext.
   - Keine Animationsbibliothek. Nur transform und opacity (Compositor).
   ========================================================================== */

/* ---------- Schriften: selbst gehostet ------------------------------------
   Kein Aufruf an fonts.googleapis.com oder fonts.gstatic.com. Das ist die
   Bedingung dafuer, dass diese Seite ohne Einwilligungsbanner auskommt:
   ohne Drittserver-Anfrage wird keine Besucher-IP an Dritte uebertragen.
   Beide Schriften stehen unter SIL Open Font License 1.1 (Lizenztexte liegen
   neben den Dateien).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Rueckfallschrift metrisch angleichen, damit der Schriftwechsel kein
   Layoutspringen (CLS) erzeugt. */
@font-face {
  font-family: 'Inter-Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- Farbwerte und Masse ------------------------------------------ */

:root {
  color-scheme: dark;

  /* Marke — exakt aus der Vektordatei der Designerin gemessen */
  --marke-gelb:    #F1D005;
  --marke-grau:    #7F8884;
  --marke-petrol:  #4496AD;
  --marke-schwarz: #1D1D1B;
  --marke-gruen:   #212D2D;

  /* Flaechen. Nie reines Schwarz: erzeugt auf OLED Schlieren beim Scrollen
     und einen Lichthof um weisse Buchstaben.

     ⭐ WARUM DIESE TOENE WARM SIND. Die erste Fassung war durchgehend kalt:
     jeder Neutralton hatte R−B = −12, also einen Blaustich, und die einzige
     warme Farbe (Gelb, R−B = +236) ist per Hausregel auf ~5 % der Flaeche
     rationiert. Ergebnis: 99 % der Seite grau mit Blaustich — technisch
     sauber, aber kuehl. Die Toene sind jetzt in die Richtung gedreht, die
     das Marken-Anthrazit #1D1D1B (R−B = +2) ohnehin vorgibt.
     Alle Textkontraste nachgerechnet und gehalten:
       Text auf Grund       14,84:1  (vorher 15,02)
       Sekundaertext        7,13:1   (vorher 7,12 — Waerme zum Nulltarif)
       Gelb auf Grund       11,94:1
       dunkle Schrift auf Gelbflaeche 11,01:1  (Knopfregel unangetastet) */
  --grund:      #171512;   /* R−B +5  */
  --flaeche:    #201D18;   /* R−B +8  */
  --flaeche-2:  #241F19;   /* R−B +11 */
  --rand:       #332C25;   /* R−B +14 */
  --rand-hell:  #453C31;   /* R−B +20 */

  /* Petrol-Flaeche bleibt erhalten, aber nur noch als bewusste Zaesur —
     ein- bis zweimal auf der Seite, nicht als Standardhintergrund. */
  --flaeche-petrol: #1B2628;

  /* Schrift. Fliesstext bewusst nicht reinweiss — auf dunklem Grund blendet
     #FFFFFF im Fliesstext und erschwert das Lesen laengerer Absaetze. */
  --text:       #EDE7DF;   /* 14,84:1 auf --grund */
  --text-hell:  #FFFFFF;   /* Ueberschriften, 18,22:1 */
  --text-leise: #A8A198;   /*  7,13:1 auf --grund — Sekundaertext */

  /* Handlung. Genau eine gelbe Handlung pro Bildschirmseite. Sobald Gelb
     ueberall auftaucht, wirkt die Seite billig. */
  --akzent:      var(--marke-gelb);
  --akzent-auf:  var(--marke-schwarz);

  --masse: clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
  --spalte: 76rem;
  --spalte-eng: 46rem;
  --spalte-weit: 92rem;

  /* Drei Sektionstakte statt einem. Ein einziger Takt fuer alle Sektionen ist
     das erste Merkmal einer Baukastenseite: jede Sektion atmet gleich tief,
     nichts ist betont. Ungleichmaessigkeit ist Rhythmus. */
  --takt-eng:  clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --takt:      clamp(3.5rem, 2rem + 6vw, 8rem);
  --takt-weit: clamp(5rem, 2.6rem + 8.4vw, 11rem);

  --radius: 2px;
  --radius-gross: 4px;

  --schrift-text: 'Inter', 'Inter-Fallback', system-ui, sans-serif;
  --schrift-titel: 'Space Grotesk', 'Inter', 'Inter-Fallback', system-ui, sans-serif;

  --tempo: 220ms;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out, kein Overshoot */
}

/* ---------- Grundlagen --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-hell);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6.5rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Sichtbarer Fokus. Gelb auf dem Grund = 12,4:1, weit ueber den 3:1,
   die WCAG 1.4.11 fuer Nicht-Text-Kontrast verlangt. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--akzent); color: var(--akzent-auf); }

/* Zahlen tabellarisch: Uhrzeiten, Preise, Masse springen sonst in der Breite */
.zahl, table, time, .kachel__nr { font-variant-numeric: tabular-nums; }

/* ---------- Hilfsklassen -------------------------------------------------- */

.huelle {
  width: min(100% - 2 * var(--masse), var(--spalte));
  margin-inline: auto;
}
.huelle--eng { width: min(100% - 2 * var(--masse), var(--spalte-eng)); }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--akzent); color: var(--akzent-auf);
  padding: 0.7rem 1.2rem; font-weight: 600; text-decoration: none;
  transition: transform var(--tempo) var(--kurve);
}
.sprung:focus { transform: translateY(0); }

section { padding-block: var(--takt); }
section.eng  { padding-block: var(--takt-eng); }
section.weit { padding-block: var(--takt-weit); }

/* Eine abgesetzte Flaeche, nicht drei. Abwechselnd hell/dunkel gestreifte
   Sektionen sind das sichtbarste Baukastenmerkmal ueberhaupt — jeder
   Website-Baukasten macht das per Vorgabe. Den Wechsel erzeugen stattdessen
   die Bildbaender, die aus der Spalte in die volle Breite ausbrechen. */
section.abgesetzt {
  background: var(--flaeche);
  border-block: 1px solid var(--rand);
}
section.petrol {
  background: var(--flaeche-petrol);
  border-block: 1px solid #27383B;
}

.marke {
  font-family: var(--schrift-titel);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marke-petrol);
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.marke::before {
  content: ''; width: 1.8rem; height: 1px;
  background: currentColor; opacity: 0.6; flex: none;
}

.fuehrung {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 40ch;
}
.leise { color: var(--text-leise); }
.klein { font-size: 0.875rem; line-height: 1.55; }

/* ---------- Knopf --------------------------------------------------------- */

.knopf {
  --k-grund: var(--akzent);
  --k-text: var(--akzent-auf);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  background: var(--k-grund); color: var(--k-text);
  font-family: var(--schrift-titel);
  font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid var(--k-grund);
  border-radius: var(--radius); cursor: pointer;
  transition: transform var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}
.knopf:hover { transform: translateY(-2px); background: #FFE03A; border-color: #FFE03A; }
.knopf:active { transform: translateY(0); }

/* Zweitrangige Handlung: Umriss, damit Gelb die einzige Handlungsfarbe bleibt */
.knopf--leise {
  --k-grund: transparent;
  --k-text: var(--text-hell);
  border-color: var(--rand-hell);
}
.knopf--leise:hover {
  background: var(--flaeche-2); border-color: var(--marke-petrol); transform: translateY(-2px);
}

.knopf__pfeil { transition: transform var(--tempo) var(--kurve); }
.knopf:hover .knopf__pfeil { transform: translateX(3px); }

/* ---------- Kopfzeile ----------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve);
}
/* backdrop-filter nur auf dieser schmalen Leiste, nie flaechig ueber dem Hero */
@supports (backdrop-filter: blur(1px)) {
  .kopf { backdrop-filter: blur(14px) saturate(150%); }
}
.kopf[data-gescrollt] {
  border-bottom-color: var(--rand);
  background: color-mix(in srgb, var(--grund) 94%, transparent);
}

.kopf__innen {
  display: flex; align-items: center; gap: 2rem;
  min-height: 5.4rem;
}
/* Das Logo ist die Marke — es darf nicht als Beiwerk in der Ecke verschwinden.
   Seitenverhaeltnis 4,955:1, deshalb wirkt es bei gleicher Hoehe kleiner als
   ein quadratisches Zeichen und braucht mehr Hoehe als ueblich. */
.kopf__logo { flex: none; display: block; }
.kopf__logo img { height: 2.4rem; width: auto; }
@media (max-width: 30rem) { .kopf__logo img { height: 2rem; } }

.navi { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
.navi__punkt {
  position: relative;
  padding: 0.5rem 0.85rem;
  color: var(--text); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--radius);
  transition: color var(--tempo) var(--kurve);
}
.navi__punkt::after {
  content: ''; position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.28rem; height: 1px;
  background: var(--akzent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tempo) var(--kurve);
}
.navi__punkt:hover { color: var(--text-hell); }
.navi__punkt:hover::after { transform: scaleX(1); }
.navi__punkt[aria-current='page'] { color: var(--text-hell); }
.navi__punkt[aria-current='page']::after { transform: scaleX(1); background: var(--marke-petrol); }

.navi__knopf { margin-left: 0.6rem; padding: 0.68rem 1.2rem; font-size: 0.875rem; }

.navi-schalter {
  display: none; margin-left: auto;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--rand); border-radius: var(--radius);
  color: var(--text-hell); cursor: pointer;
}
.navi-schalter span {
  display: block; width: 1.1rem; height: 1.5px; margin: 0.28rem auto;
  background: currentColor;
  transition: transform var(--tempo) var(--kurve), opacity var(--tempo) var(--kurve);
}
.navi-schalter[aria-expanded='true'] span:nth-child(1) { transform: translateY(0.43rem) rotate(45deg); }
.navi-schalter[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.navi-schalter[aria-expanded='true'] span:nth-child(3) { transform: translateY(-0.43rem) rotate(-45deg); }

@media (max-width: 60rem) {
  .navi-schalter { display: block; }
  .navi {
    position: fixed; inset: 5.4rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: var(--masse);
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
    max-height: calc(100dvh - 5.4rem); overflow-y: auto;

    /* Zwei Absicherungen, weil eine allein nicht reicht:
       1. Der Weg nach oben muss die eigene Hoehe UND den Abstand von der
          Oberkante ueberwinden. Mit blossen -101% blieb ein Streifen des
          geschlossenen Menues ueber dem Menueknopf liegen und fing dessen
          Klicks ab — nachgemessen: unterer Rand bei +70px statt im Negativen.
       2. visibility nimmt das geschlossene Menue zusaetzlich aus der
          Trefferpruefung, unabhaengig von jeder Transform-Rechnung. */
    transform: translateY(calc(-100% - 5rem));
    visibility: hidden;
    transition: transform 320ms var(--kurve), visibility 0s linear 320ms;
  }
  .navi[data-offen] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 320ms var(--kurve), visibility 0s;
  }
  .navi__punkt { padding: 0.95rem 0; font-size: 1.15rem; font-family: var(--schrift-titel); }
  .navi__punkt::after { display: none; }
  .navi__knopf { margin: 1rem 0 0; justify-content: center; }
}

/* ---------- Hero ----------------------------------------------------------
   Der Hero ist Text, kein Bild und kein Video. Zwei Gruende: Text-LCP ist der
   schnellste ueberhaupt, und es gibt noch keine eigenen Fotos der Halle.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--takt-weit) var(--takt);
  overflow: hidden;
  isolation: isolate;
  min-height: min(84vh, 46rem);
  display: flex; align-items: center;
}

/* ---- Das Foto -----------------------------------------------------------
   Eine Seite ohne ein einziges Foto kann nicht warm wirken: Waerme haengt in
   der Wahrnehmung an Material — Licht in Luft, Nasse, Korn. Verlaeufe und
   Vektoren haben davon nichts.
   Das Motiv ist zu 93 % dunkel und seine Ecken messen #0C0C0C, also praktisch
   den Seitengrund. Deshalb braucht es keinen Rahmen und keine Vignette: Es
   liegt rechts, laeuft nach links weich aus und geht randlos in die Flaeche
   ueber. Der Text steht links im Freien und wird nie ueberlagert — damit
   entfaellt auch der uebliche Abdunklungsschleier, der Fotos ertraenkt. */
.hero__bild {
  position: absolute; z-index: -2; pointer-events: none;
  inset: 0 0 0 auto;
  width: min(68%, 60rem);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
}
.hero__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 46%;
  opacity: 0.92;
}
@media (max-width: 60rem) {
  .hero__bild {
    inset: auto 0 0 0; width: 100%; height: 58%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 46%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 46%, #000 100%);
  }
  .hero { min-height: 0; }
}

/* ---- Licht --------------------------------------------------------------
   Warm links unter dem Text, kalt rechts als Gegenpol. In der ersten Fassung
   war es umgekehrt: Der Petrol-Schein — die kaelteste Farbe der Palette —
   leuchtete genau auf die Zone, die zuerst gelesen wird. */
.hero__schein {
  position: absolute; z-index: -3; pointer-events: none;
  width: 46rem; aspect-ratio: 1; border-radius: 50%;
  filter: blur(90px);
}
.hero__schein--warm {
  bottom: -30%; left: -18%;
  background: radial-gradient(circle, rgba(255,178,90,0.11), transparent 68%);
}
.hero__schein--petrol {
  top: -26%; right: -14%;
  background: radial-gradient(circle, rgba(68,150,173,0.13), transparent 68%);
}

/* ---- Der Termin ---------------------------------------------------------
   Frueher eine blinkende Pille mit 0,8125rem Schrift — das meistkopierte
   Element jeder Landingpage seit 2023. Der Termin ist aber die wichtigste
   Aussage der Seite. Als Ueberschrift gesetzt wirkt er wie ein Versprechen,
   in einer Blinkpille wie ein Widget. */
/* Marke im Hero: gut doppelt so gross wie in der Kopfzeile. Das ist die
   Antwort auf schlechte Erkennbarkeit — die Darstellung waechst, die
   Logodatei bleibt unangetastet. Kein Filter, kein Schatten darauf. */
.hero__marke {
  display: block; width: auto;
  height: clamp(2.6rem, 1.9rem + 3.1vw, 4.75rem);
  margin-bottom: clamp(1.1rem, 0.9rem + 1vw, 1.9rem);
}

.hero__termin {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--akzent);
  margin: 0 0 1.6rem;
}
.hero__termin::before {
  content: ''; width: 2.2rem; height: 2px; flex: none;
  background: var(--akzent); align-self: center;
}

.hero h1 { margin-bottom: 0.4em; }
.hero__zeile { display: block; }
.hero__zeile--akzent { color: var(--akzent); }

.hero__text {
  max-width: 38ch;
  font-size: clamp(1.05rem, 1rem + 0.55vw, 1.4rem);
  color: var(--text);
}

.hero__handlungen {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  margin-top: 2.6rem;
}

/* ---- Korn ---------------------------------------------------------------
   Ein perfekt glatter dunkler Verlauf liest sich als Bildschirm, ein leicht
   koerniger als Material. Vier Prozent Deckkraft, aber deutlich spuerbar —
   und nebenbei das Mittel gegen Banding in dunklen Verlaeufen.
   Nicht animiert: das waere ein Dauerlast-Repaint. */
.korn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Bildband -----------------------------------------------------
   Bricht aus der 76rem-Spalte in die volle Breite aus. Das ist der Ersatz
   fuer das gestreifte Sektions-Zebra: Der Wechsel entsteht durch ein Bild,
   nicht durch eine Hintergrundfarbe.
   -------------------------------------------------------------------------- */

.bildband {
  position: relative;
  width: 100vw; margin-inline: calc(50% - 50vw);
  height: clamp(11rem, 8rem + 12vw, 22rem);
  overflow: hidden;
  border-block: 1px solid var(--rand);
  isolation: isolate;
}
.bildband img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.88;
}
/* Oben und unten weich in die Seitenflaeche auslaufen, damit das Band nicht
   als aufgeklebte Platte wirkt. */
.bildband::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--grund) 0%, transparent 22%, transparent 78%, var(--grund) 100%);
}
.bildband__text {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.2rem, 0.8rem + 1.6vw, 2.2rem) 0;
  background: linear-gradient(to top, rgba(23,21,18,0.92), transparent);
}
.bildband__text p {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.7rem);
  color: var(--text-hell); margin: 0; letter-spacing: -0.02em;
}

/* ---- Duotone ------------------------------------------------------------
   Zieht ein fremdes Stockfoto in den Markenzweiklang und nimmt ihm damit das
   Stockfoto-Aussehen. Bewusst als SVG-Farbtabelle, nicht als Blend-Sandwich:
   `lighten` + `multiply` kann per Konstruktion kein Duotone, es liefert ein
   gelbes Multiply mit schwarzen Tiefen.
   ⚠️ `color-interpolation-filters='sRGB'` ist Pflicht — die SVG-Vorgabe ist
   linearRGB, und damit wird das Ergebnis milchig statt markig.
   -------------------------------------------------------------------------- */
/* Gelb-Duotone: nur fuer kleine Flaechen. Gelb ist die Handlungsfarbe und auf
   rund 5 % der Flaeche rationiert — ein gelbes Band ueber die volle Breite
   wuerde genau diese Bedeutung verwaessern. */
.duoton {
  filter: grayscale(1) contrast(1.06)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d' color-interpolation-filters='sRGB'%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.090 0.945'/%3E%3CfeFuncG type='table' tableValues='0.082 0.816'/%3E%3CfeFuncB type='table' tableValues='0.071 0.020'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#d");
}

/* Petrol-Duotone: die Strukturfarbe. Fuer grossflaechige Baender, damit Gelb
   der Handlung vorbehalten bleibt. Tiefe leicht warm, damit das Band nicht
   gegen den warmen Seitengrund kippt. */
.duoton--petrol {
  filter: grayscale(1) contrast(1.08)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p' color-interpolation-filters='sRGB'%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.094 0.267'/%3E%3CfeFuncG type='table' tableValues='0.082 0.588'/%3E%3CfeFuncB type='table' tableValues='0.071 0.678'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#p");
}

/* Farbfotos an die Marke annaehern, ohne sie zu entstellen.
   Der blaue Padelbelag liegt bei rund 220 Grad Farbton, das Marken-Petrol
   #4496AD bei rund 194. Eine leichte Drehung plus Entsaettigung laesst das
   Bild zur Palette gehoeren und haelt zugleich das Blau erkennbar — es ist
   das deutlichste Padel-Signal, das die Seite hat.
   Bewusst kein Duotone: das wuerde den Belag grau machen und genau die
   Wiedererkennung kosten, wegen der das Bild ueberhaupt drin ist. */
.gedaempft {
  filter: saturate(0.62) hue-rotate(-16deg) brightness(0.9) contrast(1.04);
}

/* ---------- Kachelraster -------------------------------------------------- */

/* Kacheln mit echtem Abstand und eigenem Rahmen statt eines durchgehenden
   Rasters mit 1px-Fugen. Grund: Bei `auto-fit` fuellt die letzte Reihe die
   Spalten oft nicht, und ein Raster mit eingefaerbtem Hintergrund zeigt an
   den leeren Stellen einen farbigen Klotz. Mit eigenen Rahmen tritt das
   bei keiner Kachelzahl und keiner Fensterbreite auf. */
.raster {
  display: grid;
  gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.kachel {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  display: flex; flex-direction: column;
  transition: background-color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
.kachel:hover {
  background: var(--flaeche-2);
  border-color: var(--rand-hell);
  transform: translateY(-2px);
}
.kachel__nr {
  font-family: var(--schrift-titel); font-size: 0.75rem; font-weight: 700;
  color: var(--marke-grau); letter-spacing: 0.1em; margin-bottom: 1.1rem;
}
.kachel h3 { margin-bottom: 0.55rem; }
.kachel p { color: var(--text-leise); font-size: 0.9375rem; margin-bottom: 0; }
.kachel__spaeter {
  margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--marke-petrol); font-weight: 600;
}

/* Kachel als Ganzes anklickbar, ohne den Link aus dem Fliesstext zu reissen */
.kachel--link:focus-within { outline: 2px solid var(--akzent); outline-offset: -2px; }
.kachel--link h3 a { color: inherit; text-decoration: none; }
.kachel--link h3 a::after { content: ''; position: absolute; inset: 0; }
.kachel--link:hover h3 { color: var(--akzent); }

/* ---------- Der Dreiklang -------------------------------------------------
   Sport, Business, Events. Die drei Punkte rechts im Logo tragen genau diese
   drei Farben — Gelb, Grau, Petrol, von oben nach unten. Die Seite uebernimmt
   diese Zuordnung durchgaengig, damit die Marke die Struktur erklaert und
   nicht umgekehrt.
   -------------------------------------------------------------------------- */

:root {
  --sport:    var(--marke-gelb);
  --business: var(--marke-grau);
  --events:   var(--marke-petrol);
}

/* Bewusst asymmetrisch: 1,35fr fuer Sport, dann zwei gleiche. Drei exakt
   gleich breite Spalten sind das Standardmodul — eine Kante, die nicht bei
   allen Elementen gleich sitzt, macht mehr Unterschied als jede Farbe.
   Sport bekommt mehr Platz, weil Padel der Einstieg in alles andere ist. */
.klang {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
@media (min-width: 62rem) {
  .klang { grid-template-columns: 1.35fr 1fr 1fr; }
}

.saeule {
  position: relative;
  background: var(--flaeche);
  padding: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem);
  display: flex; flex-direction: column;
  transition: background-color var(--tempo) var(--kurve);
}
.saeule::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--ton);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--kurve);
}
.saeule:hover { background: var(--flaeche-2); }
.saeule:hover::before, .ist-da .saeule::before { transform: scaleX(1); }

.saeule__punkt {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--ton); flex: none; margin-bottom: 1.3rem;
}
.saeule h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); margin-bottom: 0.5rem; }
.saeule__kurz {
  font-family: var(--schrift-titel); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ton); margin-bottom: 0.7rem;
}
.saeule p { color: var(--text-leise); font-size: 0.9375rem; }
.saeule ul {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: 0.5rem; font-size: 0.875rem; color: var(--text-leise);
}
.saeule li { padding-left: 1.1rem; position: relative; }
.saeule li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 1px; background: var(--ton); opacity: 0.8;
}
.saeule__mehr { margin-top: auto; padding-top: 1.6rem; }
.saeule__mehr a {
  color: var(--text-hell); text-decoration: none;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 0.9375rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.saeule__mehr a::after {
  content: '→'; color: var(--ton);
  transition: transform var(--tempo) var(--kurve);
}
.saeule:hover .saeule__mehr a::after { transform: translateX(4px); }
.saeule__mehr a::before { content: ''; position: absolute; inset: 0; }

.saeule--sport    { --ton: var(--sport); }
.saeule--business { --ton: var(--business); }
.saeule--events   { --ton: var(--events); }

/* Dreiklang in der Hero-Ueberschrift */
.klang-zeile { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.klang-punkt {
  width: 0.42em; height: 0.42em; border-radius: 50%;
  background: var(--ton); flex: none; display: inline-block;
}

/* ---------- Aufruf-Block (Partnerschaften, Vermietung) -------------------- */

.ruf {
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--flaeche-2) 90%, var(--marke-petrol)) 0%,
    var(--flaeche) 62%);
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
}
.ruf h2 { margin-bottom: 0.7rem; }
.ruf__zeilen {
  display: grid; gap: 1px; margin-top: 2.2rem;
  background: var(--rand); border-top: 1px solid var(--rand);
}
.ruf__zeile {
  background: var(--flaeche);
  padding: 1.3rem 0 1.3rem 1.4rem;
  display: grid; gap: 0.35rem;
}
@media (min-width: 46rem) {
  .ruf__zeile { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: baseline; }
}
.ruf__was {
  font-family: var(--schrift-titel); font-weight: 700; font-size: 0.9375rem;
  color: var(--text-hell);
}
.ruf__wie { color: var(--text-leise); font-size: 0.9375rem; }

/* ---------- Gepinnter Erzaehlabschnitt ------------------------------------
   position: sticky ist die wirkungsvollste Einzeltechnik ueberhaupt und
   kostet null Bytes JavaScript.
   -------------------------------------------------------------------------- */

.pin { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 60rem) {
  .pin { grid-template-columns: 0.85fr 1.15fr; }
  .pin__halt { position: sticky; top: 8rem; }
}
.pin__schritte { display: grid; gap: 1px; background: var(--rand); border-block: 1px solid var(--rand); }
.pin__schritt { background: var(--grund); padding: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0; }
@media (min-width: 60rem) { .pin__schritt { padding-inline: 2rem; } }
.pin__schritt h3 { display: flex; gap: 1rem; align-items: baseline; }
.pin__schritt h3 b {
  font-size: 0.8125rem; color: var(--akzent); font-weight: 700;
  letter-spacing: 0.06em; flex: none;
}

/* ---------- Bandzeile mit Fakten ------------------------------------------ */

.band {
  border-block: 1px solid var(--rand);
  background: var(--flaeche);
  padding-block: 1.1rem;
  overflow: hidden;
  --band-tempo: 46s;
}
.band__spur {
  display: flex; width: max-content; gap: 0;
  animation: band-lauf var(--band-tempo) linear infinite;
}
.band:hover .band__spur { animation-play-state: paused; }
.band__stueck {
  display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem;
  font-family: var(--schrift-titel); font-weight: 500;
  font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-leise); white-space: nowrap;
}
.band__stueck b { color: var(--text-hell); font-weight: 700; }
.band__trenner { color: var(--akzent); }
@keyframes band-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Formular ------------------------------------------------------ */

.formular { display: grid; gap: 1.15rem; }
.feld { display: grid; gap: 0.45rem; }
.feld--paar { grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 40rem) { .feld--paar { grid-template-columns: 1fr; } }

.feld label { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.feld label .pflicht { color: var(--akzent); }

.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  color: var(--text-hell);
  font: inherit; font-size: 0.9375rem;
  transition: border-color var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--marke-grau); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--akzent); background: var(--flaeche-2); outline-offset: 1px;
}
.feld input::placeholder, .feld textarea::placeholder { color: #6E7674; }

.feld__hinweis { font-size: 0.8125rem; color: var(--text-leise); }

/* Honigtopf gegen Formular-Robotor. Kein Captcha, kein Drittanbieter. */
.honig {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.zustimmung { display: flex; gap: 0.75rem; align-items: flex-start; }
.zustimmung input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; accent-color: var(--akzent); }
.zustimmung label { font-size: 0.8125rem; line-height: 1.55; color: var(--text-leise); }

/* ---------- Karte / Anfahrt ----------------------------------------------- */

.karte {
  border: 1px solid var(--rand); border-radius: var(--radius-gross);
  background: var(--flaeche); overflow: hidden;
}
.karte__bild { position: relative; aspect-ratio: 16 / 10; background: var(--flaeche-2); }
.karte__fuss { padding: 1.4rem; border-top: 1px solid var(--rand); }

/* ---------- Fusszeile ----------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--rand);
  background: var(--flaeche);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
}
.fuss__raster {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.fuss__logo img { height: 2.5rem; width: auto; margin-bottom: 1.2rem; }
.fuss h4 {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--marke-grau); margin-bottom: 1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fuss a { color: var(--text-leise); text-decoration: none; font-size: 0.9375rem; }
.fuss a:hover { color: var(--akzent); }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rand);
  font-size: 0.8125rem; color: var(--text-leise);
}

/* ---------- Rechtstexte --------------------------------------------------- */

.recht { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.recht h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--rand);
}
.recht h2:first-of-type { margin-top: 1.5rem; }
.recht h3 { font-size: 1.0625rem; margin-top: 1.8rem; }
.recht dl { display: grid; gap: 0.4rem 1.5rem; margin: 0 0 1.2em; }
@media (min-width: 34rem) { .recht dl { grid-template-columns: 13rem 1fr; } }
.recht dt { color: var(--text-leise); font-size: 0.9375rem; }
.recht dd { margin: 0; color: var(--text); }
.recht address { font-style: normal; line-height: 1.75; }

/* ---------- Reveal --------------------------------------------------------
   Bewusst per IntersectionObserver, NICHT per CSS-Scroll-Timeline: die
   scroll-getriebenen CSS-Animationen sind 2026 nicht Baseline (Firefox nur
   hinter Flag). Mit opacity:0 als Startwert waere der Inhalt fuer rund jeden
   sechsten Besucher dauerhaft unsichtbar.
   Deshalb setzt erst das Skript die Klasse .js-reveal — ohne JavaScript ist
   alles von Anfang an sichtbar.
   -------------------------------------------------------------------------- */

.js-reveal > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
}
.js-reveal.ist-da > * { opacity: 1; transform: none; }

/* Beim Kachelraster blendet der Block als Ganzes ein. Wuerden nur die Kacheln
   einblenden, staende vorher der Rasterhintergrund als farbiger Klotz da. */
.js-reveal--selbst {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
}
.js-reveal--selbst > * { opacity: 1; transform: none; transition: none; }
.js-reveal--selbst.ist-da { opacity: 1; transform: none; }
.js-reveal.ist-da > *:nth-child(2) { transition-delay: 70ms; }
.js-reveal.ist-da > *:nth-child(3) { transition-delay: 140ms; }
.js-reveal.ist-da > *:nth-child(4) { transition-delay: 210ms; }
.js-reveal.ist-da > *:nth-child(5) { transition-delay: 280ms; }
.js-reveal.ist-da > *:nth-child(n+6) { transition-delay: 340ms; }

/* Fortschrittsbalken: reine Zugabe, Ausfall folgenlos */
@supports (animation-timeline: scroll()) {
  .fortschritt {
    position: fixed; top: 0; left: 0; z-index: 110;
    height: 2px; width: 100%; transform-origin: 0 50%;
    background: var(--akzent);
    animation: fortschritt linear;
    animation-timeline: scroll(root);
  }
  @keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Sanfter Seitenwechsel, wo unterstuetzt. Firefox bekommt den harten
   Wechsel und verliert nichts. */
@view-transition { navigation: auto; }

/* ---------- Bewegung reduzieren ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal > *, .js-reveal--selbst { opacity: 1 !important; transform: none !important; }
  .band__spur { animation: none; }
  @view-transition { navigation: none; }
}

/* ---------- Druck ---------------------------------------------------------
   Impressum und Datenschutzerklaerung werden ausgedruckt und abgeheftet.
   Dunkel gedruckt kostet Toner und ist unleserlich.
   -------------------------------------------------------------------------- */

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; font-size: 11pt; }
  h1, h2, h3, h4 { color: #000; }
  .kopf, .fuss__raster, .navi, .navi-schalter, .fortschritt, .knopf, .band,
  .bildband, .hero__bild, .hero__schein { display: none !important; }
  .korn::after { display: none !important; }
  .recht h2 { border-top: 1pt solid #999; }
  a { color: #000; text-decoration: underline; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .huelle, .huelle--eng { width: auto; }
  section, .recht { padding-block: 0; }
}

/* ============================================================================
   Zeitstrahl — Ausblick auf die naechsten Stufen
   Stand 04.09.2026

   Warum eine Zeitleiste und keine dritte Kachelreihe: Die Aussage ist nicht
   "wir koennen dreierlei", sondern "das hier waechst". Eine Reihe gleichwertiger
   Kacheln wuerde genau das verschweigen. Die Linie traegt die Aussage, der Text
   fuellt sie nur.

   Die Linie waechst beim Einblenden von links nach rechts. Sie ist reine Zugabe:
   ohne JavaScript steht sie sofort vollstaendig da, weil .ist-da dann nie kommt
   und der Startwert scaleX(1) greift.
   ========================================================================== */

.zeitstrahl {
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.2rem;
  position: relative;
}

@media (min-width: 52rem) {
  .zeitstrahl { grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }

  /* Die durchgehende Linie liegt hinter den Punkten, auf deren Hoehe. */
  .zeitstrahl::before {
    content: '';
    position: absolute;
    left: 0.35rem; right: 0.35rem; top: 0.35rem;
    height: 1px;
    /* Nach rechts auslaufend: die Linie endet nicht, sie hoert nur auf sichtbar
       zu sein. Das ist genau die Aussage der dritten Station. */
    background: linear-gradient(90deg,
      var(--sport) 0%, var(--business) 42%, var(--events) 72%, transparent 100%);
    opacity: 0.5;
    transform-origin: left center;
  }
  .js-reveal .zeitstrahl::before { transform: scaleX(0); }
  .js-reveal.ist-da .zeitstrahl::before {
    transform: scaleX(1);
    transition: transform 1100ms var(--kurve) 120ms;
  }
}

.zeitstrahl__halt { position: relative; padding-top: 2rem; }

/* Auf schmalen Bildschirmen verbindet eine senkrechte Linie die Stationen —
   sonst stehen drei Absaetze lose untereinander und die Abfolge geht verloren.
   Die letzte Station bekommt keine, dort endet die Reihe. */
@media (max-width: 51.999rem) {
  .zeitstrahl__halt:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0.325rem; top: 1.1rem; bottom: -2.2rem;
    width: 1px;
    background: linear-gradient(180deg, var(--ton), var(--linie-leise, #2c2c2c));
    opacity: 0.5;
  }
}

.zeitstrahl__halt::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--ton);
}

.zeitstrahl__jahr {
  font-family: var(--schrift-titel);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ton);
  margin: 0 0 0.6rem;
}

.zeitstrahl__halt h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  margin: 0 0 0.6rem;
}

.zeitstrahl__halt p:not(.zeitstrahl__jahr) {
  color: var(--text-leise);
  font-size: 0.9375rem;
  margin: 0;
}

/* Die letzte Station ist die offene: gestrichelter Punkt statt gefuelltem,
   damit auch grafisch klar ist, dass hier noch nichts festgelegt ist. */
.zeitstrahl__halt--offen::before {
  background: none;
  border: 1px dashed var(--ton);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .zeitstrahl::before,
  .js-reveal.ist-da .zeitstrahl::before { transform: none; transition: none; }
}

/* ============================================================================
   Hero: der Ball bleibt beim Scrollen leicht zurueck
   Stand 04.09.2026

   Warum ueberhaupt Bewegung: Das Hero-Motiv ist ein Ball im Flug, steht aber
   still — die Seite behauptet Tempo und zeigt Stillstand. Ein kleiner
   Geschwindigkeitsunterschied zwischen Bild und Text loest das, ohne dass
   irgendwo etwas blinkt oder zappelt.

   Bewusst klein gehalten: 6 % Versatz und ein Hauch Skalierung. Alles darueber
   wirkt auf einer Sportseite schnell nach Bausparkassen-Slider.

   Technik wie beim Fortschrittsbalken: scroll-getriebene Animation ohne eine
   Zeile JavaScript. Wo der Browser sie nicht kennt, steht das Bild still —
   das ist kein Mangel, sondern der Ausgangszustand.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .hero__bild img {
      animation: ball-zurueck linear;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes ball-zurueck {
      from { transform: translate3d(0, -1.5%, 0) scale(1.04); }
      to   { transform: translate3d(0, 4.5%, 0)  scale(1.00); }
    }
  }
}