/* ==========================================================================
   GlanzWerk Wiesloch — Lack, Chrom, Licht.
   Kein Framework, keine Abhängigkeiten. Alles hier drin.
   ========================================================================== */

/* --- Schriften, selbst gehostet (kein Google-Aufruf, DSGVO-sauber) -------- */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted';
  src: url('../assets/fonts/schibsted.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../assets/fonts/plexmono.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Lack: die Seite ist ein schwarz lackiertes Blech */
  --lack:        #08090b;
  --lack-hoch:   #0e1013;
  --lack-karte:  #111418;
  --kante:       #1c2026;
  --kante-hell:  #2a3038;

  /* Chrom: alles Geschriebene ist Licht auf diesem Blech */
  --chrom-hell:  #f2f5f8;
  --chrom:       #c3cad3;   /* heller als zuvor (#aab3be): Lesbarkeit */
  --chrom-leise: #9ba4af;   /* heller als zuvor (#7d8792) */

  /* Funke: warmer Akzent. Sterne, aktiver Reiter, Preislinien. */
  --funke:       #f6c96b;
  /* Lila: markiert, was gerade angefasst wird. */
  --lila:        #a68cf5;
  --lila-leise:  rgba(166, 140, 245, .28);

  --chromverlauf: linear-gradient(100deg,
      #939daa 0%, #eaf1f8 18%, #aab5c2 38%,
      #ffffff 54%, #b8c2ce 72%, #8f99a6 100%);

  --breit: 1240px;
  --rand: clamp(20px, 5vw, 48px);
  /* Rundungen: von der kleinen Marke bis zur großen Fläche */
  --rund-chip: 999px;      /* Preis, Ort, Marker: immer voll rund */
  --rund-klein: 12px;      /* Eingabefelder, kleine Flächen */
  --radius: 18px;          /* Karten, Bilder, Kacheln */
  --rund-gross: 26px;      /* Videokarten, große Tafeln */
  --rund-flaeche: clamp(28px, 4vw, 52px);  /* ganze Abschnitte */

  --schnell: 180ms cubic-bezier(.4, 0, .2, 1);
  --raus-quart: cubic-bezier(.165, .84, .44, 1);
  --ruhig: 420ms cubic-bezier(.22, .8, .3, 1);
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--lack);
  color: var(--chrom);
  font-family: 'Schibsted', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Kein overflow-x: hidden! Das macht den Body zum Scroll-Container und
     position: sticky im Kopf funktioniert dann nicht mehr. `clip` oben
     am html-Element hält seitliches Überlaufen genauso ab. */
  overflow-x: clip;
}

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

a { color: var(--chrom-hell); text-decoration-color: var(--kante-hell); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--lila);
  outline-offset: 3px;
  border-radius: 10px;
  box-shadow: 0 0 0 6px var(--lila-leise);
}

::selection { background: var(--lila-leise); color: var(--chrom-hell); }

/* Was per Anker angesprungen wurde, leuchtet kurz lila auf */
:target { animation: ziel-leuchtet 1.6s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes ziel-leuchtet {
  0%   { box-shadow: 0 0 0 0 rgba(166, 140, 245, 0); }
  22%  { box-shadow: 0 0 0 10px var(--lila-leise); }
  100% { box-shadow: 0 0 0 10px rgba(166, 140, 245, 0); }
}

h1, h2, h3, h4 {
  /* Deutsche Komposita wie KERAMIKVERSIEGELUNG sind breiter als ein
     Handydisplay. Ohne Trennung laufen sie aus dem Bild. */
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: 'Archivo', 'Schibsted', sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  color: var(--chrom-hell);
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

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

ul, ol { margin: 0; padding: 0; list-style: none; }

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

.sprung {
  position: absolute; left: var(--rand); top: -100px; z-index: 200;
  background: var(--chrom-hell); color: var(--lack);
  padding: .7rem 1.4rem; font-weight: 700; border-radius: var(--rund-chip);
  transition: top var(--schnell);
}
.sprung:focus { top: 12px; }

/* --- Bausteine ------------------------------------------------------------ */
.huelle {
  width: 100%;
  max-width: var(--breit);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.augenbraue {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chrom-leise);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
}
.augenbraue::before,
.augenbraue::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--chromverlauf);
  flex: none;
}
.augenbraue::after { display: none; }
/* Steht die Augenbraue mittig, bekommt sie beidseitig eine Linie */
.mittig .augenbraue,
.abschnitt__kopf .augenbraue,
.seitenkopf .augenbraue { justify-content: center; }
.mittig .augenbraue::after,
.abschnitt__kopf .augenbraue::after,
.seitenkopf .augenbraue::after { display: block; }

/* Haarlinie aus Chrom — trennt die Kapitel */
.linie {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kante-hell) 12%, var(--kante-hell) 88%, transparent);
  border: 0; margin: 0;
}

.abschnitt { padding-block: clamp(2.75rem, 5.5vw, 4.75rem); }
.abschnitt--eng { padding-block: clamp(2rem, 3.6vw, 3.25rem); }
.abschnitt--hoch {
  background: var(--lack-hoch);
  border-radius: var(--rund-flaeche);
}
/* Folgen zwei helle Abschnitte aufeinander, wachsen sie zu einer Flaeche
   zusammen. Sonst blitzt zwischen den Rundungen der dunkle Grund durch. */
.abschnitt--hoch:has(+ .abschnitt--hoch) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.abschnitt--hoch + .abschnitt--hoch {
  border-top-left-radius: 0; border-top-right-radius: 0;
  margin-top: -1px;
}

.abschnitt__kopf {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem);
  text-align: center;
}
.abschnitt__kopf h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem); }
.abschnitt__kopf p { margin-top: .9rem; max-width: 34rem; margin-inline: auto; font-size: 1rem; }

.lead { font-size: clamp(1rem, .96rem + .22vw, 1.125rem); color: var(--chrom); }

/* --- Knöpfe --------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem;
  font-family: 'Archivo', sans-serif;
  font-stretch: 108%;
  font-size: .875rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border-radius: var(--rund-chip);
  border: 1px solid transparent;
  transition: transform var(--schnell), background var(--schnell), border-color var(--schnell), color var(--schnell);
}
.knopf svg { width: 17px; height: 17px; flex: none; }

.knopf--hell { background: var(--chrom-hell); color: var(--lack); }
.knopf--hell:hover { background: #fff; --hebe: -2px; }

.knopf--rand {
  background: transparent; color: var(--chrom-hell);
  border-color: var(--kante-hell);
}
.knopf--rand:hover { border-color: var(--chrom); background: rgba(255,255,255,.04); --hebe: -2px; }

.knopf--klein { padding: .7rem 1.1rem; font-size: .75rem; }

/* Der Anruf im Kopf: eine klare weiße Pille, kein Glas-auf-Glas */
.knopf--ruf {
  background: var(--chrom-hell);
  color: var(--lack);
  border-color: transparent;
  font-family: 'Archivo', sans-serif;
  font-stretch: 104%;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .01em;
  text-transform: none;
  padding: .6rem 1.1rem .6rem .95rem;
}
.knopf--ruf svg { width: 15px; height: 15px; color: var(--lack); }
.knopf--ruf:hover { background: #fff; transform: translateY(-2px); }

/* WhatsApp daneben, nur als Symbol */
.rundknopf {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--chrom-hell);
  background: rgba(242, 245, 248, .07);
  border: 1px solid rgba(242, 245, 248, .2);
  transition: background var(--schnell), transform var(--schnell), color var(--schnell);
}
.rundknopf svg { width: 17px; height: 17px; }
.rundknopf:hover {
  background: var(--chrom-hell); color: var(--lack);
  border-color: transparent; transform: translateY(-2px);
}

/* --- Kopfzeile: liegt oben auf, löst sich beim Scrollen als Glaspille ----- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  padding-block: 0;
  transition: padding-block var(--ruhig);
}
/* Schleier, damit das Menü über dem Hero lesbar bleibt */
.kopf::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 140%;
  background: linear-gradient(to bottom, rgba(8,9,11,.92), rgba(8,9,11,.45) 45%, transparent);
  pointer-events: none;
  transition: opacity var(--ruhig);
}
.kopf[data-gescrollt='ja'] { padding-block: 10px 0; }
.kopf[data-gescrollt='ja']::before { opacity: 0; }

.kopf__bahn { position: relative; }

.kopf__innen {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 64px;
  padding-inline: 0;
  border: 1px solid transparent;
  /* Die Rundung ist immer da, auch wenn man sie nicht sieht. Würde sie von
     0 auf 999 px laufen, hinkt die Unschärfefläche der Rundung ein Bild
     hinterher und die Pille blitzt für einen Moment eckig auf. */
  border-radius: 999px;
  background: transparent;
  /* Aus demselben Grund steht die Unschärfe von Anfang an da, nur auf null.
     So wird die Glasebene beim ersten Zeichnen angelegt und nicht erst,
     wenn gescrollt wird. */
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  will-change: backdrop-filter;
  transition: min-height var(--ruhig), padding var(--ruhig),
              background var(--ruhig), border-color var(--ruhig),
              box-shadow var(--ruhig),
              backdrop-filter var(--ruhig), -webkit-backdrop-filter var(--ruhig);
}

/* Glas: starke Unschärfe, heller Kantenschimmer, Schatten darunter */
.kopf[data-gescrollt='ja'] .kopf__innen,
.kopf[data-menue='offen'] .kopf__innen {
  min-height: 56px;
  padding-inline: 1.1rem 1.1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 48%, rgba(255,255,255,.05)),
    rgba(14, 16, 19, .55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(242, 245, 248, .16);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(255,255,255,.05) inset,
    0 18px 44px rgba(0, 0, 0, .55),
    0 2px 8px rgba(0, 0, 0, .35);
}
/* Lichtkante oben auf dem Glas. Sie liegt immer bereit und wird nur
   eingeblendet, damit ihre Maske nicht erst beim Scrollen gerechnet wird. */
.kopf__innen::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.5), rgba(255,255,255,0) 32%,
              rgba(255,255,255,0) 68%, rgba(255,255,255,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--ruhig);
}
.kopf[data-gescrollt='ja'] .kopf__innen::before,
.kopf[data-menue='offen'] .kopf__innen::before { opacity: 1; }

/* Die Wortmarke steht als Schrift da — kein Bild, keine unscharfen Kanten */
.marke {
  display: grid; gap: .12rem; text-decoration: none; flex: none;
  justify-items: center;               /* der Untertitel steht mittig darunter */
  line-height: 1;
}
.marke__wort {
  font-family: 'Archivo', sans-serif;
  font-stretch: 104%;
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--chrom-hell);
  transition: font-size var(--ruhig);
}
.marke__unter {
  font-family: 'PlexMono', monospace;
  font-size: .4375rem;
  font-weight: 500;
  letter-spacing: .2em;
  /* Die Sperrung hängt rechts nach, sonst sitzt die Zeile sichtbar zu weit links */
  text-indent: .2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--chrom-leise);
  transition: color var(--schnell);
}
.marke:hover .marke__unter { color: var(--chrom); }
.kopf[data-gescrollt='ja'] .marke__wort { font-size: 1.0625rem; }

.navi { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.navi a {
  font-family: 'PlexMono', monospace;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--chrom); text-decoration: none;
  padding: .35rem 0; position: relative;
  transition: color var(--schnell);
}
.navi a:hover { color: var(--chrom-hell); }
.navi a[aria-current='page'] { color: var(--chrom-hell); }
.navi a[aria-current='page']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--chromverlauf);
}
.kopf__tat { display: flex; align-items: center; gap: .6rem; }

.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: rgba(242, 245, 248, .06);
  border: 1px solid rgba(242, 245, 248, .18);
  border-radius: 16px;
  cursor: pointer; padding: 0;
  color: var(--chrom-hell);
  transition: background var(--schnell), border-color var(--schnell);
}
.burger:hover { background: rgba(242, 245, 248, .12); }
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 1.5px; margin-left: -8.5px;
  background: currentColor; border-radius: 1px;
  transition: transform 280ms var(--raus-quart), opacity 160ms ease;
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(2) { transform: translateY(0); }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger[aria-expanded='true'] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded='true'] span:nth-child(3) { transform: rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */

/* Die Wortmarke: Licht wandert einmal über das Blech */
.wortmarke {
  /* Die Wortmarke wird nie getrennt. Die Silbentrennung der Überschriften
     würde sonst GLANZ und WERK auseinanderreißen. */
  hyphens: none;
  overflow-wrap: normal;
  /* Nur so breit wie die längste Zeile, damit die Ortszeile darunter
     exakt bündig ausgeschossen werden kann. */
  width: fit-content;
  max-width: 100%;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 4.75rem);
  font-stretch: 118%;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: .92;
  margin-bottom: 1.1rem;
}
.wortmarke span { display: block; }
/* Jedes Wort eine eigene Zeile. fit-content sorgt dafür, dass der
   Verlaufsausschnitt die letzte Letter nicht kappt. */
.wortmarke .glanz {
  display: block;
  hyphens: none; overflow-wrap: normal;
  width: fit-content;
  max-width: 100%;
  padding-right: .09em;
}
/* WERK hat einen Buchstaben weniger als GLANZ. Auf voller Laufweite fehlen
   genau 0,12 em je Zwischenraum, damit beide Zeilen bündig abschließen.
   Der negative Rand nimmt die Sperrung hinter dem letzten Buchstaben weg. */
.wortmarke .glanz--breit {
  font-stretch: 125%;
  letter-spacing: .09em;
  margin-right: -.09em;
}
.wortmarke .glanz {
  background: var(--chromverlauf);
  background-size: 220% 100%;
  background-position: 128% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: streichlicht 2.6s cubic-bezier(.3,.1,.2,1) .35s both;
}
@keyframes streichlicht {
  from { background-position: 128% 0; }
  to   { background-position: 26% 0; }
}
/* Die Ortszeile wird auf die Breite der Wortmarke ausgeschossen.
   Dieselbe Idee wie bei WERK: alles schließt links und rechts bündig ab. */
.wortmarke .ort {
  display: block; width: 100%;
  font-size: clamp(.6rem, .5rem + .42vw, .95rem);
  font-stretch: 100%; font-weight: 600;
  letter-spacing: .06em; color: var(--chrom-leise);
  margin-top: 1.1rem;
  /* --sperre rechnet app.js aus, damit die Zeile exakt unter WERK endet.
     Ohne JavaScript bleibt es bei der Grundsperrung, das sieht auch gut aus. */
  letter-spacing: var(--sperre, .06em);
  margin-right: calc(var(--sperre, .06em) * -1);
  white-space: nowrap;
}

.hero__zeile { max-width: 30ch; font-size: clamp(1rem, .96rem + .3vw, 1.125rem); color: var(--chrom); margin-bottom: 1.5rem; }
.hero__tat { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }

.hero__merkmale {
  max-width: 30rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--chrom-leise);
}
.hero__merkmale li { display: flex; align-items: center; gap: .5rem; }
.hero__merkmale li::before {
  content: ''; width: 5px; height: 5px; flex: none;
  background: var(--chrom-leise); transform: rotate(45deg);
}

/* --- Die Halle: ein Gang ums Auto ------------------------------------------
   Die Bühne bleibt stehen, der Abschnitt darunter ist so hoch wie der Weg
   ums Auto. Ohne WebGL steht hier das Werkstattbild und die Stationen
   kommen als Liste. */
.halle { position: relative; background: #050607; }
/* Die Halle ist genau einen Bildschirm hoch und liegt unter der Kopfzeile.
   Die Fahrt läuft nicht über den Scrollweg, sondern Station für Station. */
.halle.mit-3d { height: 100svh; margin-top: calc(var(--kopf-h, 64px) * -1); }
.halle__buehne {
  position: relative;
  min-height: clamp(560px, 100svh, 1000px);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.halle.mit-3d .halle__buehne { height: 100svh; min-height: 0; }
.halle__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.halle.ohne-3d .halle__canvas { display: none; }
/* Die Fahrten als Video: unsichtbar, bis eines läuft, dann deckungsgleich mit
   dem Canvas (cover, 1,5 % Rand für die Mausbewegung wie dort) */
.halle__film {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  opacity: 0; pointer-events: none;
}
.halle__film.zeigt {
  width: 100%; height: 100%; opacity: 1;
  object-fit: cover; transform: scale(1.015);
}
/* Das erste gerenderte Bild steht sofort da. Das Canvas legt sich darüber,
   sobald die Bildfolge lädt. Ohne Canvas bleibt es als Standbild. */
.halle__standbild, .halle__standbild img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.halle__standbild img { object-fit: cover; transform: scale(1.015); }
.halle.ohne-3d .halle__buehne::before {
  background: linear-gradient(90deg, rgba(5,6,7,.9) 0%, rgba(5,6,7,.55) 45%, rgba(5,6,7,.15) 100%);
}
/* Ladebalken: haarfein am unteren Rand, verschwindet, wenn alles da ist */
.halle__laden {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(242,245,248,.08); transition: opacity .8s ease .4s;
}
.halle__laden i {
  position: absolute; inset: 0; background: linear-gradient(90deg, var(--funke), var(--chrom-hell));
  transform-origin: left; transform: scaleX(0); transition: transform .3s ease;
}
.halle.fertig-geladen .halle__laden, .halle.ohne-3d .halle__laden { opacity: 0; }
/* Eine Geste wartet auf ihre Fahrt: der Balken zeigt, dass etwas kommt */
.halle.wartet .halle__laden { opacity: 1; transition-delay: 0s; }
.halle.wartet .halle__laden i { animation: laden-atmen 1s ease-in-out infinite; }
@keyframes laden-atmen { 50% { opacity: .35; } }
/* Unten weich in die Seite auslaufen */
.halle__buehne::after {
  content: ''; position: absolute; inset: auto 0 0; height: 18%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, #050607);
}
/* Schleier hinter dem Starttext */
.halle__buehne::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,6,7,.78) 0%, rgba(5,6,7,.45) 30%, transparent 52%);
  transition: opacity .6s ease;
}
/* Der Schleier gehört zum Starttext und geht mit ihm: halle.js setzt
   --schleier im selben Takt, in dem der Text ausblendet. Keine eigene
   Überblendung, sonst läge er in der ersten Fahrt zu lange über dem Bild. */
.halle.mit-3d .halle__buehne::before { opacity: var(--schleier, 1); transition: none; }

.halle__start {
  position: relative; z-index: 2;
  padding-top: var(--kopf-h, 64px);
  will-change: opacity, transform;
}
.halle__start > * { max-width: 30rem; }

/* Fortschritt: fünf Striche, je Station einer, füllen sich beim Scrollen */
.halle__fortschritt {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(16px, 4vh, 34px);
  transform: translateX(-50%);
  display: flex; gap: 6px;
  opacity: 0; transition: opacity .5s ease;
}
.halle.auto-da .halle__fortschritt { opacity: 1; }
.halle__fortschritt i {
  position: relative; width: 34px; height: 3px; border-radius: 3px;
  background: rgba(242,245,248,.16); overflow: hidden;
}
.halle__fortschritt i::after {
  content: ''; position: absolute; inset: 0; background: var(--chrom-hell);
  transform-origin: left; transform: scaleX(var(--f, 0));
}
.halle__hinweis {
  position: absolute; z-index: 3; left: 50%; bottom: calc(clamp(16px, 4vh, 34px) + 16px);
  transform: translateX(-50%);
  font-family: 'PlexMono', monospace; font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chrom-leise);
  opacity: 0; transition: opacity .6s ease;
  white-space: nowrap; margin: 0;
}
.halle.auto-da[data-station='-1'] .halle__hinweis { opacity: 1; animation: hinweis-atmen 2.4s ease-in-out infinite; }
@keyframes hinweis-atmen { 50% { transform: translate(-50%, 5px); color: var(--chrom); } }
.halle.ohne-3d .halle__fortschritt, .halle.ohne-3d .halle__hinweis,
.halle.ohne-3d .halle__punkt, .halle.ohne-3d .halle__linie { display: none; }

/* Zeigepunkt am Auto und Linie zur Karte */
.halle__linie {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;
  overflow: visible;
}
.halle__linie line {
  stroke: rgba(242,245,248,.8); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round;
  opacity: 0; transition: opacity .4s ease;
}
.halle__punkt {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  width: 0; height: 0;
}
.halle__punkt::before, .halle__punkt::after {
  content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px;
  border-radius: 50%;
}
.halle__punkt::before {
  background: var(--chrom-hell);
  box-shadow: 0 0 0 4px rgba(242,245,248,.18), 0 0 26px 6px rgba(242,245,248,.55);
  transform: scale(0); transition: transform .5s cubic-bezier(.18,1.12,.28,1);
}
.halle__punkt::after {
  border: 1.5px solid var(--chrom-hell); opacity: 0;
}
.halle[data-punkt='ja'] .halle__punkt::before { transform: scale(1); }
.halle[data-punkt='ja'] .halle__punkt::after { animation: punkt-welle 1.8s cubic-bezier(.2,.7,.3,1) infinite; }
.halle[data-punkt='ja'] .halle__linie line { opacity: 1; }
@keyframes punkt-welle {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(4.2); opacity: 0; }
}

/* Die Karten. Mit 3D liegt immer nur eine sichtbar über der Bühne. */
.halle__karten { position: relative; z-index: 5; }
.halle.mit-3d .halle__karten { position: absolute; inset: 0; pointer-events: none; }
.halle.mit-3d .station[data-offen='ja'] { pointer-events: auto; }
/* Die Karte: eine ruhige dunkle Tafel, oben eine feine Lichtkante wie auf
   Lack. Kein Nummern-Etikett, keine Pillen: Titel, ein Satz, der Preis als
   Zahl und die Wege als Textlinks. */
.station {
  position: relative;
  width: min(360px, calc(100vw - 2 * var(--rand)));
  padding: 1.6rem 1.6rem 1.35rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 12, 15, .80), rgba(8, 9, 11, .88));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(242, 245, 248, .06);
  color: var(--chrom);
}
.station::before {
  content: ''; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 1px;
  background: var(--chromverlauf); opacity: .7;
}
.halle.mit-3d .station {
  position: absolute; right: max(var(--rand), calc((100vw - var(--breit)) / 2 + var(--rand)));
  top: 50%;
  opacity: 0;
  transform: translate(40px, -50%);
  transition: opacity .45s ease, transform .8s cubic-bezier(.2, .9, .25, 1);
}
.halle.mit-3d .station[data-offen='ja'] {
  opacity: 1; transform: translate(0, -50%);
}

.station__titel {
  text-transform: none;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.4rem, 1.15rem + .8vw, 1.7rem); font-stretch: 100%; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.12; color: var(--chrom-hell);
  margin: 0 0 .6rem;
}
.station__text { font-size: .9375rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 30ch; }
.station__fuss {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding-top: 1rem; border-top: 1px solid rgba(242, 245, 248, .08);
}
.station__preis {
  margin: 0; color: var(--funke);
  font-family: 'Archivo', sans-serif; font-weight: 500; font-stretch: 100%;
  font-size: 1.75rem; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.station__preis span {
  font-family: 'PlexMono', monospace; font-size: .6875rem; letter-spacing: .08em;
  color: var(--chrom-leise); margin-right: .15rem; vertical-align: .55em;
}
.station__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; justify-items: end; }
.station__link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .875rem; font-weight: 600; color: var(--chrom-hell); text-decoration: none;
  padding: .15rem 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s cubic-bezier(.2, .9, .25, 1), color var(--schnell);
}
.station__link svg { width: 14px; height: 14px; transition: transform var(--schnell); }
.station__link:hover { background-size: 100% 1px; }
.station__link:hover svg { transform: translateX(3px); }
.station__link:focus-visible { outline: 2px solid var(--lila); outline-offset: 4px; border-radius: 2px; }

/* Komplettpakete: die Liste scrollt in der Karte, die Seite bleibt stehen.
   Zeilen mit feinen Trennlinien, der Preis rechts, wie im Fuß der Karte */
.station__pakete {
  list-style: none; margin: 0 0 .4rem; padding: 0 .4rem 0 0;
  max-height: 15rem; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(242,245,248,.25) transparent;
  /* Unten weich auslaufen: zeigt, dass die Liste weitergeht */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
  padding-bottom: 1.2rem;
}
.station__pakete li + li { border-top: 1px solid rgba(242, 245, 248, .08); }
.station__pakete a {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: baseline;
  padding: .7rem 0; color: var(--chrom); text-decoration: none;
  transition: color var(--schnell);
}
.station__pakete strong { font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--chrom-hell); font-size: 1rem; }
.station__pakete em {
  grid-row: 1; grid-column: 2;
  font-style: normal; font-family: 'Archivo', sans-serif; font-weight: 500;
  font-size: 1rem; color: var(--funke); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.station__pakete span { grid-column: 1 / -1; font-size: .8125rem; color: var(--chrom-leise); }
.station__pakete a:hover strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.station__pakete a:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; border-radius: 4px; }

/* Ohne 3D: die Stationen als Raster unter dem Starttext */
.halle.ohne-3d .halle__karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
  width: min(var(--breit), 100%); margin: 2rem auto 3rem; padding-inline: var(--rand);
}
.halle.ohne-3d .station { width: auto; }
.halle.ohne-3d .station__titel { font-size: 1.2rem; hyphens: manual; }

/* Das Werkstattvideo, jetzt direkt unter der Halle */
.werkstatt-film { padding-block: clamp(3.2rem, 6.5vh, 5.2rem); }
.werkstatt-film__gitter {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
}
.werkstatt-film .hero__bild { justify-self: start; }

@media (max-width: 1000px) {
  .halle__start { padding-top: 0; margin-top: auto; padding-bottom: 5.5rem; }
  .halle__start > * { max-width: none; }
  /* Handy: oben steht das Auto frei, unten nur Name und ein Satz. Anrufen und
     WhatsApp sind unten ohnehin fest eingeblendet, der Absatz über den Betrieb
     steht weiter unten auf der Seite und bleibt hier für Suchmaschinen und
     Vorleseprogramme im Code. */
  .halle.mit-3d .halle__start .hero__tat,
  .halle.mit-3d .halle__start .hero__merkmale { display: none; }
  .halle.mit-3d .halle__start .hero__wer {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .halle.mit-3d .halle__start .wortmarke .glanz { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .halle.mit-3d .halle__start .hero__zeile { font-size: 1rem; line-height: 1.5; margin-top: .6rem; max-width: 34ch; }
  .halle.mit-3d .halle__start .augenbraue { margin-bottom: .5rem; justify-content: flex-start; text-align: left; }
  .halle.mit-3d .halle__start .augenbraue::before,
  .halle.mit-3d .halle__start .augenbraue::after { display: none; }
  .halle__buehne::before {
    background: linear-gradient(to bottom, transparent 30%, rgba(5,6,7,.7) 52%, rgba(5,6,7,.92) 75%);
  }
  .halle.mit-3d .halle__buehne { justify-content: flex-end; }
  .halle.mit-3d .station {
    left: var(--rand); right: var(--rand); top: auto; bottom: calc(4.2rem + 18px); width: auto;
    transform: translateY(40px) scale(.97);
  }
  .halle.mit-3d .station[data-offen='ja'] { transform: none; }
  /* Kompakt auf dem Handy: Titel, Preis, Knopf. Das Auto bleibt sichtbar. */
  .station { padding: 1.05rem 1.15rem .95rem; }
  .station::before { left: 1.15rem; right: 1.15rem; }
  .station__fuss { padding-top: .7rem; }
  .station__preis { font-size: 1.35rem; }
  .halle.mit-3d .station .station__text { display: none; }
  .station__titel { font-size: 1.25rem; margin-bottom: .7rem; }
  .station__pakete { max-height: 9.5rem; margin-bottom: .7rem; }
  .werkstatt-film__gitter { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .halle.mit-3d .station, .halle.mit-3d .station[data-offen='ja'] { transition: opacity .2s ease; filter: none; }
  .halle__punkt::after { animation: none !important; }
  .halle.auto-da[data-station='-1'] .halle__hinweis { animation: none; }
}

/* Das Werkstattvideo steht als Tafel auf dem Lack und spiegelt sich darin. */
.hero__bild {
  position: relative;
  justify-self: end;
  height: clamp(320px, 56svh, 540px);
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: var(--rund-gross);
  /* Das Bild ist um 2 % größer als der Rahmen, damit es beim Scrollen
     atmen kann, ohne dass eine Kante frei wird. Also hier beschneiden. */
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(242, 245, 248, .16),
    0 50px 90px -40px rgba(0, 0, 0, .95);
  -webkit-box-reflect: below 14px linear-gradient(transparent 70%, rgba(255, 255, 255, .2));
  transform: translateY(-12px);
}
/* Chromkante: eine Lichtkante oben, die mit der Decke wandert */
.hero__bild::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .55) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.hero__bild picture, .hero__bild img { display: block; width: 100%; height: 100%; }
.hero__bild img {
  object-fit: cover;
  filter: contrast(1.06);
}


/* Das Video legt sich über das Bild, sobald es geladen ist */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.hero__video[data-laeuft='ja'] { opacity: 1; }

.hero__halt {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  color: var(--chrom-hell);
  background: rgba(8, 9, 11, .6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(242, 245, 248, .22);
  transition: background var(--schnell), transform var(--schnell);
}
.hero__halt:hover { background: rgba(8, 9, 11, .85); transform: translateY(-2px); }
.hero__halt svg { width: 15px; height: 15px; }

/* --- Vertrauensband ------------------------------------------------------- */
.band { background: transparent; }
.band .huelle > .band__liste { }
.band__liste {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--kante);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
  overflow: hidden;
}
.band li {
  background: var(--lack-karte);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(.9rem, 1.8vw, 1.35rem);
}
.band b {
  display: block;
  font-variant-numeric: tabular-nums;
  font-family: 'Archivo', sans-serif; font-stretch: 112%;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800;
  color: var(--chrom-hell); line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase;
}
.band small {
  display: block; margin-top: .5rem;
  font-variant-numeric: tabular-nums;
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--chrom-leise);
}

/* --- Karten --------------------------------------------------------------- */
.raster { display: grid; gap: clamp(.7rem, 1.3vw, 1rem); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.karte {
  position: relative;
  background: var(--lack-karte);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;            /* sonst unterstreicht der Browser die ganze Karte */
  isolation: isolate;
  transition: border-color var(--ruhig), transform var(--ruhig),
              box-shadow var(--ruhig);
}
/* Das Licht folgt dem Zeiger. --mx/--my setzt app.js, sonst liegt es in der Mitte. */
.karte::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0;
  background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%),
              rgba(242, 245, 248, .13), transparent 62%);
  transition: opacity var(--ruhig);
}
a.karte:hover::before, a.karte:focus-visible::before { opacity: 1; }
a.karte:hover {
  border-color: var(--kante-hell);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
a.karte:focus-visible { outline: 2px solid var(--funke); outline-offset: 3px; }

.karte__bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lack); }
.karte__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .8, .3, 1);
}
a.karte:hover .karte__bild img { transform: scale(1.05); }
/* Streifen, der unter dem Bild aufzieht */
.karte__bild::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--funke), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 480ms cubic-bezier(.165, .84, .44, 1);
}
a.karte:hover .karte__bild::after { transform: scaleX(1); }

/* Der Text fuellt die Karte, der Link sitzt bei allen auf derselben Hoehe */
.karte__text {
  padding: clamp(1rem, 1.8vw, 1.35rem); flex: 1;
  display: flex; flex-direction: column;
}
.karte__text .vkarte__mehr { margin-top: auto; padding-top: .7rem; }
/* h2 ist dazugekommen: die Ratgeberkarten tragen die Beitragstitel, und die
   gehören eine Ebene unter die h1 der Übersicht, nicht zwei. Optisch bleibt
   alles gleich. */
.karte__text h3, .karte__text h2 {
  font-size: 1.125rem; font-stretch: 106%; margin-bottom: .6rem;
  min-width: 0; hyphens: auto; overflow-wrap: break-word;
}
/* Der Preis steht auf dem Bild, damit die Überschrift die volle Breite hat */
.karte__preis {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
  transition: transform var(--ruhig);
}
a.karte:hover .karte__preis { transform: translateY(-2px); }
.karte__text p { font-size: .9375rem; color: var(--chrom); }

/* Zwei große Kacheln: Aufbereitung / Autoservice */
.saeule {
  position: relative; display: block; text-decoration: none;
  border: 1px solid var(--kante); border-radius: var(--rund-gross);
  overflow: hidden; background: var(--lack-karte);
  transition: border-color var(--ruhig);
  min-height: 420px;
}
.saeule:hover { border-color: var(--kante-hell); }
.saeule img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; transition: transform 800ms cubic-bezier(.22,.8,.3,1), opacity var(--ruhig); }
.saeule:hover img { transform: scale(1.05); opacity: .7; }
.saeule__inhalt {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(to top, rgba(8,9,11,.96) 18%, rgba(8,9,11,.55) 58%, rgba(8,9,11,.25) 100%);
}
.saeule h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); margin-bottom: .75rem; }
.saeule p { font-size: .9375rem; max-width: 42ch; margin-bottom: 1.25rem; }
.saeule__liste {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-bottom: 1.5rem;
}
.saeule__liste li {
  font-family: 'PlexMono', monospace; font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--chrom);
  border: 1px solid var(--kante-hell); border-radius: var(--rund-chip); padding: .35rem .7rem;
}
.saeule__mehr {
  font-family: 'Archivo', sans-serif; font-stretch: 108%; font-weight: 700;
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--chrom-hell); display: inline-flex; align-items: center; gap: .55rem;
}
.saeule__mehr svg { width: 16px; height: 16px; transition: transform var(--schnell); }
.saeule:hover .saeule__mehr svg { transform: translateX(4px); }

/* Überschrift aus mehreren Wörtern: jedes wischt nacheinander auf */
.wortfolge span {
  display: inline-block;
  clip-path: inset(0 0 0 0);
}
.js .wortfolge span {
  clip-path: inset(0 100% 0 0);
  transform: translateY(.12em);
  transition: clip-path 620ms var(--raus-quart), transform 620ms var(--raus-quart);
}
.js .wortfolge.da span { clip-path: inset(0 0 0 0); transform: none; }
.js .wortfolge.da span:nth-child(2) { transition-delay: 130ms; }
.js .wortfolge.da span:nth-child(3) { transition-delay: 260ms; }
@media (prefers-reduced-motion: reduce) {
  .js .wortfolge span { clip-path: inset(0 0 0 0); transform: none; }
}

/* --- Leistungskarten mit Werkstattvideo ---------------------------------- */
.vraster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.vkarte {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: var(--lack-karte);
  transition: border-color var(--ruhig), transform var(--ruhig);
}
.vkarte:hover { border-color: var(--kante-hell); transform: translateY(-3px); }
.vkarte:focus-visible { outline: 2px solid var(--funke); outline-offset: 3px; }
.vkarte__mehr {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .7rem;
  font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 700;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--chrom-hell);
  opacity: .78;
  transition: opacity var(--schnell), transform var(--schnell);
}
.vkarte__mehr svg { width: 14px; height: 14px; transition: transform var(--schnell); }
.vkarte:hover .vkarte__mehr,
a.karte:hover .vkarte__mehr { opacity: 1; }
.vkarte:hover .vkarte__mehr svg,
a.karte:hover .vkarte__mehr svg { transform: translateX(4px); }

.vkarte__film {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--lack-hoch);
  overflow: hidden;
}
.vkarte__film video,
.vkarte__film img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vkarte__film video { opacity: 0; transition: opacity 600ms ease; z-index: 1; }
.vkarte__film video[data-laeuft='ja'] { opacity: 1; }
.vkarte__plakat { z-index: 0; }

/* Text steht auf einem eigenen Sockel, nicht frei auf dem Bild.
   Darüber läuft der Verlauf aus, damit nichts hart abreißt. */
.vkarte__text {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(.9rem, 2vw, 1.35rem);
  z-index: 2;
  background: rgba(5, 6, 8, .93);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* Weicher Auslauf über dem Sockel, damit die Kante nicht hart abreißt */
.vkarte__text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(48px, 9vw, 86px);
  background: linear-gradient(to top, rgba(5, 6, 8, .93), rgba(5, 6, 8, 0));
  pointer-events: none;
}
.vkarte__text::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,245,248,.22) 30%,
              rgba(242,245,248,.22) 70%, transparent);
}
.vkarte__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .4rem;
  /* Ohne Umbruch schiebt der Titel den Preischip auf schmalen Schirmen
     aus der Karte heraus. Mit min-width:0 darf der Titel schrumpfen. */
  flex-wrap: wrap;
}
.vkarte__zeile h3 { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
.vkarte__zeile .vkarte__preis { flex: 0 0 auto; }
.vkarte__text h3 {
  font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
  margin: 0; letter-spacing: -.01em;
}
.vkarte__preis {
  flex: none;
  font-family: 'PlexMono', monospace;
  font-size: .75rem; letter-spacing: .04em;
  color: var(--lack);
  background: var(--chrom-hell);
  border-radius: var(--rund-chip);
  padding: .3rem .6rem;
  white-space: nowrap;
}
.vkarte__text p {
  font-size: .8125rem; line-height: 1.55;
  color: #d3d9e0;
}

/* Preis-Chip auch auf den Bildkarten der Leistungsseite */
.karte__bild .vkarte__preis { color: var(--lack); }

/* Kleiner Knopf, wenn der Film nicht von selbst startet */
.vkarte__start {
  position: absolute; right: .75rem; top: .75rem; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  color: var(--chrom-hell);
  background: rgba(8, 9, 11, .58);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(242, 245, 248, .22);
  transition: background var(--schnell), transform var(--schnell), opacity var(--schnell);
}
.vkarte__start:hover { background: rgba(8, 9, 11, .85); transform: scale(1.06); }
.vkarte__start svg { width: 13px; height: 13px; }
.vkarte__start[hidden] { display: none; }

/* Marker: echtes Material, kein Archivbild */
.vkarte__echt {
  position: absolute; left: .75rem; top: .75rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'PlexMono', monospace; font-size: .5rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrom-hell);
  background: rgba(8, 9, 11, .58);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(242, 245, 248, .16);
  border-radius: var(--rund-chip);
  padding: .3rem .65rem;
}
.vkarte__echt::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--funke);
}

.mehr-reihe {
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 1000px) { .vraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .vraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .vkarte__text { padding: .75rem .7rem .8rem; }
  .vkarte__text p { display: none; }
  .vkarte__echt { display: none; }
}

/* --- Paketleiter für die Startseite -------------------------------------- */
.leiter { display: grid; gap: 1px; background: var(--kante);
  border: 1px solid var(--kante); border-radius: var(--rund-gross); overflow: hidden; }
.stufe {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 11rem) minmax(0, 7rem) minmax(0, 1fr);
  align-items: center; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--lack-karte);
  text-decoration: none;
}
/* Der Hintergrund liegt als eigene Ebene darunter und wird nur ein-
   geblendet. Wechselnde Hintergrundfarben lassen die Zeile flackern. */
.stufe::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0;
  background:
    linear-gradient(90deg, rgba(166, 140, 245, .16), transparent 42%),
    var(--lack-hoch);
  transition: opacity 320ms cubic-bezier(.22, .8, .3, 1);
}
/* Verschoben wird mit transform, nicht mit padding. Padding rechnet das
   ganze Raster neu, und genau das sieht man als Ruckeln. */
.stufe > * {
  transition: transform 380ms cubic-bezier(.165, .84, .44, 1),
              color 320ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .stufe:hover::before, .stufe:focus-visible::before { opacity: 1; }
  .stufe:hover > * { transform: translateX(.55rem); }
  .stufe:hover .stufe__name { color: #fff; }
  .stufe:hover .stufe__nr { color: var(--lila); }
}
.stufe__nr {
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .12em; color: var(--chrom-leise);
}
.stufe__name {
  font-family: 'Archivo', sans-serif; font-stretch: 108%; font-weight: 800;
  font-size: clamp(1rem, .9rem + .4vw, 1.25rem); text-transform: uppercase;
  color: var(--chrom-hell); letter-spacing: -.01em;
}
.stufe__preis {
  font-family: 'PlexMono', monospace; font-size: .8125rem;
  color: var(--chrom-hell); white-space: nowrap;
}
.stufe__claim { font-size: .9375rem; color: var(--chrom); display: grid; gap: .2rem; line-height: 1.45; }
.stufe__claim b { color: var(--chrom-hell); font-weight: 600; }
.paket__passt { display: grid; gap: .55rem; margin: .2rem 0 1.1rem; }
.paket__passt div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; align-items: baseline; }
.paket__passt dt { font-family: 'PlexMono', monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--funke); }
.paket__passt dd { margin: 0; color: var(--chrom-hell); font-size: 1rem; line-height: 1.45; }
@media (max-width: 560px) { .paket__passt div { grid-template-columns: 1fr; gap: .15rem; } }
.stufe:last-child { position: relative; }

@media (max-width: 860px) {
  .stufe { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .6rem 1rem; }
  .stufe__name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
  .stufe__claim { grid-column: 2 / -1; font-size: .8125rem; }
}
/* Auf ganz schmalen Geräten steht der Preis unter dem Namen statt daneben */
@media (max-width: 380px) {
  .stufe { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .stufe__preis { grid-column: 2; justify-self: start; }
  .stufe__claim { grid-column: 2; }
}

/* --- Pakete mit Reitern --------------------------------------------------- */
.reiter__leiste {
  display: flex; gap: 0; border-bottom: 1px solid var(--kante);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  overflow-x: auto; scrollbar-width: none;
}
.reiter__leiste::-webkit-scrollbar { display: none; }
.reiter__knopf {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 1rem clamp(.7rem, 1.5vw, 1.35rem) 1.1rem;
  font-family: 'Archivo', sans-serif; font-stretch: 110%; font-weight: 700;
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--chrom-leise); white-space: nowrap;
  position: relative; transition: color var(--schnell);
}
.reiter__knopf { z-index: 1; transition: color 380ms cubic-bezier(.22, .8, .3, 1); }
.reiter__knopf:hover { color: var(--chrom); }
.reiter__knopf[aria-selected='true'] { color: #fff; }
.reiter__knopf[aria-selected='true'] small { color: rgba(242, 245, 248, .75); }
.reiter__knopf small { transition: color 380ms cubic-bezier(.22, .8, .3, 1); }
/* Der Fokusring folgt der Form des Reiters, kein harter Kasten */
.reiter__knopf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lila), 0 0 0 7px var(--lila-leise);
  border-radius: 16px 16px 4px 4px;
}
.reiter__knopf[aria-selected='true']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--funke);
}
/* Sobald der laufende Balken da ist, braucht der feste Strich nicht mehr */
.reiter__leiste:has(.reiter__balken) .reiter__knopf[aria-selected='true']::after {
  display: none;
}
.reiter__knopf small {
  display: block; font-family: 'PlexMono', monospace; font-weight: 500;
  font-size: .6875rem; letter-spacing: .08em; color: var(--chrom-leise);
  margin-top: .3rem; text-transform: none;
}

.paket[hidden] { display: none; }
.paket {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* Beim Wechsel kommt der Inhalt versetzt herein, nicht als Block.
   Der Versatz läuft über nth-child, das kostet kein JavaScript. */
.js .paket[data-offen='ja'] .paket__kopf > *,
.js .paket[data-offen='ja'] .paket__liste > li {
  animation: inhalt-ein 520ms cubic-bezier(.22, .8, .3, 1) both;
}
.js .paket[data-offen='ja'] .paket__kopf > :nth-child(1) { animation-delay: 40ms; }
.js .paket[data-offen='ja'] .paket__kopf > :nth-child(2) { animation-delay: 80ms; }
.js .paket[data-offen='ja'] .paket__kopf > :nth-child(3) { animation-delay: 120ms; }
.js .paket[data-offen='ja'] .paket__kopf > :nth-child(4) { animation-delay: 160ms; }
.js .paket[data-offen='ja'] .paket__kopf > :nth-child(5) { animation-delay: 200ms; }
.js .paket[data-offen='ja'] .paket__kopf > :nth-child(6) { animation-delay: 240ms; }
.js .paket[data-offen='ja'] .paket__liste > li:nth-child(1) { animation-delay: 90ms; }
.js .paket[data-offen='ja'] .paket__liste > li:nth-child(2) { animation-delay: 140ms; }
.js .paket[data-offen='ja'] .paket__liste > li:nth-child(3) { animation-delay: 190ms; }
.js .paket[data-offen='ja'] .paket__liste > li:nth-child(4) { animation-delay: 240ms; }
.js .paket[data-offen='ja'] .paket__liste > li:nth-child(5) { animation-delay: 290ms; }
.js .paket[data-offen='ja'] .paket__liste > li:nth-child(6) { animation-delay: 340ms; }
.js .paket[data-offen='ja'] .paket__liste > li:nth-child(n+7) { animation-delay: 380ms; }
@keyframes inhalt-ein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.paket__kopf h3 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem); margin-bottom: .6rem; }
.paket__preis {
  font-family: 'Archivo', sans-serif; font-stretch: 105%;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); font-weight: 800;
  color: var(--chrom-hell); letter-spacing: -.02em; line-height: 1;
  margin: 1.1rem 0 .4rem;
}
.paket__preis span { font-size: .34em; font-weight: 600; color: var(--chrom-leise); letter-spacing: .12em; display: block; margin-bottom: .5rem; font-family: 'PlexMono', monospace; text-transform: uppercase; }
.paket__dauer {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--chrom-leise);
  padding-top: 1rem; border-top: 1px solid var(--kante); margin-top: 1.5rem;
}
.paket__dauer svg { width: 14px; height: 14px; flex: none; }
/* Die Leistungsspalte stand als schwarze Fläche da. Jetzt liegt sie auf
   gebürstetem Blech: ein Lichtband von oben, sonst nichts. Lila bleibt der
   Bedienung vorbehalten, im Inhalt wirkt es wie von der Stange. */
.paket__liste {
  position: relative; isolation: isolate;
  display: grid; gap: .1rem; align-content: start;
  padding: clamp(.75rem, 1.6vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--rund-gross);
  border: 1px solid var(--kante);
  background:
    linear-gradient(175deg, rgba(242, 245, 248, .055), transparent 42%),
    radial-gradient(120% 80% at 88% 0%, rgba(246, 201, 107, .055), transparent 58%),
    var(--lack-karte);
  box-shadow: inset 0 1px 0 rgba(242, 245, 248, .07);
}
.paket__liste li {
  display: grid; grid-template-columns: 22px 1fr; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(242, 245, 248, .07);
  font-size: .9375rem; color: var(--chrom);
}
.paket__liste li:last-child { border-bottom: 0; }
.paket__liste svg {
  width: 14px; height: 14px; margin-top: .4rem;
  color: var(--funke);
}
/* Die Erbzeile klammert an die Stufe darunter: warmer Strich an der Kante,
   sonst dieselbe Ruhe wie der Rest der Liste. */
.paket__liste li.erbe {
  color: var(--chrom-hell);
  margin: -.2rem 0 .45rem;
  padding: .7rem .9rem;
  border-bottom: 0;
  border-radius: var(--rund-klein);
  background: linear-gradient(90deg, rgba(246, 201, 107, .09), transparent 70%);
  box-shadow: inset 2px 0 0 var(--funke);
}
.paket__liste li.erbe b { color: #fff; font-weight: 700; }

/* Der Preis bekommt denselben Chromverlauf wie die Wortmarke */
.paket__preis {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 58%, #b9c2cd 86%, #8c95a1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .paket__preis { background: none; color: var(--chrom-hell); }
}
.paket__preis span {
  -webkit-text-fill-color: var(--chrom-leise);
  color: var(--chrom-leise);
}

.hinweis {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--kante); border-radius: var(--radius);
  background: var(--lack-hoch);
  font-size: .875rem; color: var(--chrom-leise);
}
.hinweis b { color: var(--chrom); font-weight: 600; }
/* Ohne Begrenzung läuft so ein Kasten auf einem breiten Schirm über 160
   Zeichen pro Zeile. Beim Zurückspringen findet das Auge die nächste Zeile
   dann nicht mehr zuverlässig. Lesbar sind 45 bis 85, darauf wird gedeckelt.
   Der Kasten rückt dadurch mittig ein, was unter einer Tabelle richtig aussieht. */
.hinweis { max-width: 82ch; margin-inline: auto; }

/* --- Anlasspakete --------------------------------------------------------- */
.anlass-reihe { margin-top: clamp(2.5rem, 5vw, 4rem); }
.anlass-reihe .augenbraue { margin-bottom: 1.25rem; }
.anlass {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  background: var(--lack-karte);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
  overflow: hidden;
  transition: border-color var(--ruhig), transform var(--ruhig);
}
.anlass { text-decoration: none; position: relative; isolation: isolate; }
.anlass::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0;
  background: radial-gradient(24rem 24rem at var(--mx, 50%) var(--my, 0%),
              rgba(242, 245, 248, .12), transparent 62%);
  transition: opacity var(--ruhig);
}
a.anlass:hover {
  border-color: var(--kante-hell);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
a.anlass:hover::before { opacity: 1; }
a.anlass:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
.anlass__bild { position: relative; min-height: 190px; overflow: hidden; }
.anlass__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .82;
  transition: transform 700ms cubic-bezier(.22, .8, .3, 1), opacity var(--ruhig);
}
a.anlass:hover .anlass__bild img { transform: scale(1.05); opacity: 1; }
.anlass__text { padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.anlass__text h3 { font-size: 1.125rem; }
.anlass__text p { font-size: .875rem; color: var(--chrom); }
a.anlass:hover .vkarte__mehr { opacity: 1; }
a.anlass:hover .vkarte__mehr svg { transform: translateX(4px); }

@media (max-width: 620px) {
  .anlass { grid-template-columns: 1fr; }
  .anlass__bild { min-height: 150px; }
}

/* --- Womit gearbeitet wird: das Regal ------------------------------------- */
/* Zwei Produktsaetze flankieren den Abschnitt. Sie stehen halb ausserhalb
   des Rahmens, laufen zum Inhalt hin aus und driften beim Scrollen mit.
   Dahinter liegt Schaum, damit sie nicht wie aufgeklebt wirken. */
.abschnitt--flanken { position: relative; overflow: hidden; }
.flanke {
  position: absolute; top: 9%; z-index: 0;
  width: clamp(11rem, 17vw, 19.5rem);
  pointer-events: none; user-select: none;
  transform: translateY(var(--drift, 0px));
}
.flanke img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  /* Die Sätze sollen aus dem Dunkeln kommen, nicht darin verschwinden */
  filter: brightness(1.18) contrast(1.06) saturate(1.1)
          drop-shadow(0 26px 44px rgba(0, 0, 0, .7));
}
.flanke--links {
  left: clamp(-5rem, -4vw, -2rem);
  -webkit-mask-image: linear-gradient(to left, transparent 4%, #000 58%);
  mask-image: linear-gradient(to left, transparent 4%, #000 58%);
}
.flanke--rechts {
  right: clamp(-5rem, -4vw, -2rem);
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 58%);
  mask-image: linear-gradient(to right, transparent 4%, #000 58%);
}

/* Schaum: weiche helle Blasen, die langsam steigen */
.schaum {
  position: absolute; inset: -12% -18% -22%; z-index: 0;
  filter: blur(10px);
  opacity: .5;
  background-image:
    radial-gradient(circle at 22% 78%, rgba(242,245,248,.55) 0 5%,  transparent 6%),
    radial-gradient(circle at 38% 90%, rgba(242,245,248,.42) 0 7%,  transparent 8%),
    radial-gradient(circle at 62% 84%, rgba(242,245,248,.50) 0 4%,  transparent 5%),
    radial-gradient(circle at 74% 94%, rgba(242,245,248,.36) 0 8%,  transparent 9%),
    radial-gradient(circle at 12% 92%, rgba(242,245,248,.40) 0 6%,  transparent 7%),
    radial-gradient(circle at 52% 70%, rgba(242,245,248,.28) 0 3%,  transparent 4%),
    radial-gradient(circle at 86% 74%, rgba(242,245,248,.30) 0 3.5%, transparent 4.5%),
    radial-gradient(120% 60% at 50% 100%, rgba(242,245,248,.16), transparent 72%);
  animation: schaum-steigt 9s ease-in-out infinite alternate;
}
.flanke--rechts .schaum { animation-duration: 11s; animation-delay: -3s; }

@keyframes schaum-steigt {
  from { transform: translateY(0) scale(1); opacity: .42; }
  to   { transform: translateY(-14px) scale(1.04); opacity: .62; }
}

/* Ab hier wird es eng: dann stehen die Saetze nur noch im Weg */
@media (max-width: 1180px) { .flanke { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .flanke { transform: none; }
  .schaum { animation: none; }
}
}


.produkte { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.produkte__text {
  max-width: 40rem; margin-inline: auto; text-align: center;
  font-size: .9375rem; color: var(--chrom);
}

.regal {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.regal__platz {
  display: grid; justify-items: center; text-align: center;
  grid-template-rows: auto 1fr auto auto;
  gap: .5rem;
  padding: 1rem .6rem 1.1rem;
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(242, 245, 248, .07), transparent 70%),
    var(--lack-karte);
  transition: border-color var(--schnell), transform var(--schnell), background var(--schnell);
}
.regal__schritt {
  font-family: 'PlexMono', monospace; font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--chrom-leise);
}
.regal__bild {
  display: grid; place-items: end center;
  width: 100%; align-self: stretch;
  position: relative;
}
/* Die Standlinie, auf der die Flaschen stehen */
.regal__bild::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: -.25rem; height: 1px;
  background: linear-gradient(to right, transparent, rgba(242, 245, 248, .22), transparent);
}
.regal__bild img {
  width: auto; max-width: 100%;
  height: clamp(7.5rem, 13vw, 11rem);
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55));
  transition: transform var(--schnell);
}
.regal__name {
  font-family: 'Archivo', sans-serif; font-stretch: 104%; font-weight: 700;
  font-size: .8125rem; line-height: 1.25; color: var(--chrom-hell);
  margin-top: .35rem;
}
.regal__marke { font-size: .75rem; color: var(--chrom-leise); }

/* Das Licht folgt dem Zeiger, wie auf den Leistungskarten */
.regal__platz { position: relative; isolation: isolate; }
.regal__platz::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(14rem 14rem at var(--mx, 50%) var(--my, 30%),
              rgba(242, 245, 248, .12), transparent 65%);
  transition: opacity var(--ruhig);
}
@media (hover: hover) and (pointer: fine) {
  .regal__platz:hover { border-color: var(--kante-hell); transform: translateY(-3px); }
  .regal__platz:hover::before { opacity: 1; }
  .regal__platz:hover .regal__bild img { transform: translateY(-4px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .regal__platz, .regal__bild img { transition: none; }
  .regal__platz:hover { transform: none; }
  .regal__platz:hover .regal__bild img { transform: none; }
}

@media (max-width: 980px) { .regal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .regal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .regal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Versiegelungsstaffel ------------------------------------------------- */
.siegel {
  background: var(--lack-karte);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  transition: border-color var(--ruhig), transform var(--ruhig);
}
.siegel {
  display: flex; flex-direction: column;
  text-decoration: none; position: relative; isolation: isolate;
}
.siegel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
              rgba(242, 245, 248, .11), transparent 64%);
  transition: opacity var(--ruhig);
}
a.siegel:hover {
  border-color: var(--kante-hell);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
a.siegel:hover::before { opacity: 1; }
a.siegel:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
a.siegel:hover .vkarte__mehr { opacity: 1; }
a.siegel:hover .vkarte__mehr svg { transform: translateX(4px); }
.siegel .vkarte__mehr { margin-top: auto; padding-top: .9rem; }
.siegel__dauer {
  font-family: 'PlexMono', monospace; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chrom-leise);
  margin-bottom: .9rem;
}
/* Vier Karten statt drei heißt schmalere Spalten. Ohne diese Zeile trennt der
   Browser „Keramik" zu „Kera-mik", und ein Produktname, der mitten im Wort
   bricht, sieht nach Fehler aus. Umbrochen wird jetzt an der Lücke. */
.siegel h3 { font-size: 1.1875rem; margin-bottom: .6rem; hyphens: none; overflow-wrap: normal; }
.siegel__preis {
  font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 800;
  font-size: 1.75rem; color: var(--chrom-hell); letter-spacing: -.02em;
  margin-bottom: .8rem;
}
.siegel > p:last-of-type { font-size: .875rem; color: var(--chrom); }
.siegel-reihe .siegel:last-child { border-color: var(--kante-hell); }

/* --- Leistungsseite: Kopfblock zweispaltig ------------------------------- */
.lkopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  max-width: 62rem; margin-inline: auto;
}
.lkopf__text { text-align: left; }
.lkopf__text .augenbraue { justify-content: flex-start; }
.lkopf__text .augenbraue::after { display: none; }
.lkopf__text p { font-size: .9375rem; }
.lkopf__tat { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

.eckdaten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--kante);
  border: 1px solid var(--kante); border-radius: var(--radius);
  overflow: hidden; margin-top: 1.25rem;
}
.eckdaten div { background: var(--lack-karte); padding: .75rem .9rem; }
.eckdaten span {
  display: block; font-family: 'PlexMono', monospace; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chrom-leise);
  margin-bottom: .25rem;
}
.eckdaten b {
  font-family: 'Archivo', sans-serif; font-stretch: 104%; font-weight: 700;
  font-size: .9375rem; color: var(--chrom-hell);
}

/* Die Aufnahme steht neben dem Text und bleibt handlich */
.lfilm {
  position: relative; overflow: hidden;
  border: 1px solid var(--kante); border-radius: var(--rund-gross);
  background: var(--lack-hoch);
  aspect-ratio: 3 / 4;
  max-height: 26rem; justify-self: end; width: 100%;
}
.lfilm img, .lfilm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lfilm video { opacity: 0; transition: opacity 600ms ease; z-index: 1; }
.lfilm video[data-laeuft='ja'] { opacity: 1; }
.lfilm--breit {
  aspect-ratio: 16 / 9; max-height: none; max-width: 52rem;
  margin-inline: auto; justify-self: center;
}
/* Hochkant aufgenommen, also auch hochkant zeigen */
.lfilm--hoch {
  aspect-ratio: 9 / 16;
  max-height: 32rem; max-width: 18rem;
  margin-inline: auto; justify-self: center;
}

/* Arbeitsschritte in zwei Spalten */
@media (min-width: 861px) {
  .schrittliste { grid-template-columns: 1fr 1fr; }
}

/* Preise: Zusätze und Grenzen nebeneinander */
.preis__unten {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: left;
}
.preis__unten .augenbraue { justify-content: flex-start; }
.preis__unten .augenbraue::after { display: none; }
.grenze {
  background: var(--lack-karte);
  border: 1px solid var(--kante);
  border-left: 2px solid var(--funke);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
.grenze p { font-size: .875rem; color: var(--chrom); }

/* Bildstrecke des Falls */
.fall--strecke {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(.5rem, 1.2vw, .9rem);
}
.fall--strecke figure[data-seite='nachher'] figcaption {
  color: var(--lack); background: var(--chrom-hell); border-color: transparent;
}

/* Vorschau: drei nebeneinander, zwei vom Schaden, eins vom Ergebnis */
.fall__dreier {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, .9rem);
}

@media (max-width: 860px) {
  .lkopf { grid-template-columns: 1fr; }
  .lfilm { justify-self: center; max-width: 22rem; }
  .preis__unten { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .fall__dreier { grid-template-columns: 1fr 1fr; }
  .fall__dreier figure:last-child { grid-column: 1 / -1; }
  .eckdaten { grid-template-columns: 1fr 1fr; }
}

/* --- Preistabelle nach Fahrzeuggröße ------------------------------------- */
.ptafel {
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: var(--lack-karte);
}
.ptafel__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--kante);
  background: var(--lack-hoch);
}
.ptafel__kopf span {
  font-family: 'PlexMono', monospace; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chrom-leise);
}
.ptafel__kopf b {
  display: block; font-family: 'Archivo', sans-serif; font-stretch: 106%;
  font-weight: 700; font-size: .8125rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--chrom-hell); margin-bottom: .2rem;
}
.ptafel__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 1rem; align-items: center;
  padding: clamp(.9rem, 1.8vw, 1.2rem) clamp(1.1rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--kante);
  transition: background var(--schnell);
}
.ptafel__zeile:last-child { border-bottom: 0; }
.ptafel__zeile:hover { background: var(--lack-hoch); }
.ptafel__was { font-size: .9375rem; color: var(--chrom-hell); font-weight: 600; }
.ptafel__preis {
  font-family: 'PlexMono', monospace; font-size: .9375rem;
  color: var(--chrom-hell); font-variant-numeric: tabular-nums;
}
.ptafel__zeile:first-of-type .ptafel__preis { color: var(--funke); }

@media (max-width: 720px) {
  .ptafel__kopf { display: none; }
  .ptafel__zeile {
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem .75rem;
    padding: 1rem clamp(1rem, 4vw, 1.5rem);
  }
  .ptafel__was { grid-column: 1 / -1; margin-bottom: .3rem; }
  .ptafel__preis { font-size: .8125rem; }
  .ptafel__preis::before {
    content: attr(data-groesse);
    display: block; font-size: .5625rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--chrom-leise); margin-bottom: .2rem;
  }
}

/* Zusätze als Liste mit Punktlinie */
.zusatz { border-top: 1px solid var(--kante); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.zusatz li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--kante);
  font-size: .9375rem;
}
.zusatz .was { color: var(--chrom); }
.zusatz .punkte { flex: 1; border-bottom: 1px dotted var(--kante-hell); transform: translateY(-4px); min-width: 1rem; }
.zusatz .preis { font-family: 'PlexMono', monospace; font-size: .8125rem; color: var(--chrom-hell); white-space: nowrap; }

/* Arbeitsschritte */
.schrittliste { counter-reset: schritt; display: grid; gap: 1px; background: var(--kante);
  border: 1px solid var(--kante); border-radius: var(--rund-gross); overflow: hidden; }
.schrittliste li {
  counter-increment: schritt;
  background: var(--lack-karte);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.75rem);
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start;
  transition: background var(--schnell);
}
.schrittliste li::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .1em; color: var(--funke); padding-top: .2rem;
  transition: color var(--schnell), transform var(--schnell);
}
.schrittliste p { font-size: .875rem; color: var(--chrom); margin: 0; }

/* Der Kopf ist ein Knopf, sieht aber aus wie eine Überschrift */
.schritt__kopf {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: 100%; min-width: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: .6rem;
  color: var(--chrom-hell);
  font-family: 'Archivo', 'Schibsted', sans-serif;
  font-stretch: 112%; font-weight: 800; font-size: 1rem;
  transition: color var(--schnell);
}
.schritt__titel { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.schritt__kopf svg {
  width: 14px; height: 14px; flex: none; margin-left: auto;
  color: var(--chrom-leise);
  transition: transform var(--ruhig), color var(--schnell);
}
/* Knopf und Text teilen sich die zweite Spalte, die erste gehoert der Nummer */
.schritt__kopf, .schritt__text { grid-column: 2; }
.schritt__text { overflow: hidden; }
.schritt__text p { padding-top: .35rem; }
/* Zugeklappt darf nichts übrig bleiben, auch kein Innenabstand */
.js .schritt[data-offen='nein'] .schritt__text p { padding-top: 0; }

/* Ohne JavaScript steht der Text einfach da. Mit JavaScript klappt er auf. */
.js .schritt__text {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 380ms cubic-bezier(.22, .8, .3, 1),
              opacity 280ms ease;
}
.js .schritt__text > p { min-height: 0; }
.js .schritt[data-offen='ja'] .schritt__text { grid-template-rows: 1fr; opacity: 1; }
.js .schritt[data-offen='ja'] .schritt__kopf svg { transform: rotate(90deg); color: var(--funke); }
.js .schritt[data-offen='ja'] { background: var(--lack-hoch); }
.js .schritt[data-offen='ja']::before { color: var(--funke); transform: scale(1.15); }

@media (hover: hover) and (pointer: fine) {
  .schrittliste li:hover { background: var(--lack-hoch); }
  .schritt__kopf:hover { color: #fff; }
  .schritt__kopf:hover svg { color: var(--chrom-hell); transform: translateX(3px); }
  .js .schritt[data-offen='ja'] .schritt__kopf:hover svg { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .schritt__text { transition: none; }
  .schrittliste li::before, .schritt__kopf svg { transition: none; }
}

/* Verweise auf verwandte Leistungen */
.verwandt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.1rem); }
.verwandt a {
  display: block; text-decoration: none;
  border: 1px solid var(--kante); border-radius: var(--rund-gross);
  overflow: hidden; background: var(--lack-karte);
  transition: border-color var(--ruhig), transform var(--ruhig);
}
.verwandt a:hover { border-color: var(--kante-hell); transform: translateY(-3px); }
.verwandt img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; opacity: .8; }
.verwandt div { padding: 1rem clamp(1rem, 2vw, 1.35rem) 1.2rem; }
.verwandt h3 { font-size: 1rem; margin-bottom: .3rem; }
.verwandt span { font-family: 'PlexMono', monospace; font-size: .75rem; color: var(--chrom-hell); }
@media (max-width: 720px) { .verwandt { grid-template-columns: 1fr; } }

/* --- Preisliste ----------------------------------------------------------- */
.preise { border-top: 1px solid var(--kante); }
.preise li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--kante);
}
.preise dt, .preise .was { color: var(--chrom-hell); font-weight: 600; font-size: 1rem; }
.preise .punkte { flex: 1; border-bottom: 1px dotted var(--kante-hell); transform: translateY(-4px); min-width: 1rem; }
.preise .preis {
  font-family: 'PlexMono', monospace; font-size: .875rem; letter-spacing: .04em;
  color: var(--chrom-hell); white-space: nowrap;
}
.preise .zusatz { display: block; font-weight: 400; font-size: .8125rem; color: var(--chrom-leise); margin-top: .15rem; }

/* --- Der Weg: drei Tafeln, die beim Scrollen übereinander wischen --------
   Die Strecke ist hoch, die Bühne bleibt stehen. Jede Tafel schiebt sich
   von unten über die vorige. Bewegt wird nur clip-path und transform. */
.weg { position: relative; }
.weg__strecke { position: relative; height: 300vh; }
.weg__fest {
  position: sticky; top: 0;
  height: 100vh; min-height: 560px;
  overflow: hidden;
}
.weg__tafeln { position: relative; height: 100%; }
.weg__tafel {
  position: absolute; inset: 0;
  display: grid; align-items: center;
  /* Jede Tafel deckt die darunter ab, sonst liest man beide übereinander */
  background: var(--lack);
  clip-path: inset(0 0 0 0);
}
.weg__tafel:not(:first-child) { clip-path: inset(100% 0 0 0); }
.weg__innen {
  width: 100%; max-width: var(--breit); margin-inline: auto;
  padding-inline: var(--rand);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.weg__nr {
  font-family: 'Archivo', sans-serif; font-stretch: 118%; font-weight: 900;
  font-size: clamp(3.25rem, 2.4rem + 4.5vw, 6.5rem);
  line-height: .82; letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 245, 248, .26);
  display: block; margin-bottom: .35em;
}
.weg__kurz {
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--funke);
  margin-bottom: .9rem; display: block;
}
.weg__tafel h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  margin-bottom: .8rem;
}
.weg__tafel p { font-size: clamp(.9375rem, .92rem + .2vw, 1.0625rem); max-width: 32rem; }
.weg__innen { text-align: left; }
.weg__bild {
  position: relative; border-radius: var(--rund-gross); overflow: hidden;
  aspect-ratio: 4 / 5; border: 1px solid var(--kante);
}
.weg__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Fortschritt am linken Rand */
.weg__leiste {
  position: absolute; left: var(--rand); top: 50%; transform: translateY(-50%);
  display: grid; gap: .55rem; z-index: 3;
}
.weg__punkt {
  width: 2px; height: 34px; border-radius: 999px;
  background: var(--kante-hell);
  position: relative; overflow: hidden;
}
.weg__punkt::after {
  content: ''; position: absolute; inset: 0;
  background: var(--funke);
  transform: scaleY(var(--fuell, 0)); transform-origin: top;
  transition: transform 120ms linear;
}

@media (max-width: 1000px) {
  .weg__innen { grid-template-columns: 1fr; gap: 1.75rem; }
  .weg__bild { display: none; }
  .weg__leiste { left: 12px; }
}

/* Ohne JavaScript, bei reduzierter Bewegung oder auf kleinen Schirmen
   werden daraus einfach drei Abschnitte untereinander. */
.kein-js .weg__strecke,
.weg__strecke[data-flach='ja'] { height: auto; }
.kein-js .weg__fest,
.weg__strecke[data-flach='ja'] .weg__fest {
  position: static; height: auto; min-height: 0; display: block;
}
.kein-js .weg__tafeln,
.weg__strecke[data-flach='ja'] .weg__tafeln { height: auto; display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.kein-js .weg__tafel,
.weg__strecke[data-flach='ja'] .weg__tafel { position: static; clip-path: none !important; }
.weg__strecke[data-flach='ja'] .weg__leiste { display: none; }

@media (prefers-reduced-motion: reduce) {
  .weg__strecke { height: auto; }
  .weg__fest { position: static; height: auto; min-height: 0; display: block; }
  .weg__tafeln { height: auto; display: grid; gap: 3rem; }
  .weg__tafel { position: static; clip-path: none !important; }
  .weg__leiste { display: none; }
}

/* --- Der lange Film, über YouTube ---------------------------------------- */
.film { position: relative; }
.film__buehne {
  position: relative; display: block; width: 100%;
  /* Muss auf einen Bildschirm passen, sonst sieht man nur Video */
  max-width: 54rem; margin-inline: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--kante); border-radius: var(--rund-flaeche);
  overflow: hidden; background: var(--lack-hoch);
  cursor: pointer;
}
.film__buehne img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity var(--ruhig), transform 900ms var(--raus-quart); }
.film__buehne:hover img { opacity: .85; transform: scale(1.03); }
.film__buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__knopf {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.film__knopf span {
  width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px);
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(8, 9, 11, .55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 245, 248, .35);
  transition: transform var(--ruhig), background var(--ruhig);
}
.film__buehne:hover .film__knopf span { transform: scale(1.08); background: rgba(8, 9, 11, .75); }
.film__knopf svg { width: 26px; height: 26px; color: var(--chrom-hell); margin-left: 3px; }
.film__marke {
  position: absolute; left: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.film__zeit {
  font-family: 'PlexMono', monospace; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--chrom-hell);
  background: rgba(8, 9, 11, .62); backdrop-filter: blur(8px);
  border: 1px solid rgba(242,245,248,.18);
  border-radius: 999px; padding: .35rem .75rem;
}
.film__hinweis { margin-top: .9rem; font-size: .8125rem; color: var(--chrom-leise); text-align: center; }
/* Die Wahl unter dem Bild: laden oder drüben ansehen, beides gleich schwer.
   Schmaler als das Bild, damit die zwei Sätze lesbar bleiben. */
.film__wahl { max-width: 46rem; margin-inline: auto; }
/* Die Erklärtexte darunter sind klein gesetzt, 46rem ergeben dort über 110
   Zeichen je Zeile. Eigenes, engeres Maß für den Text, der Knopfreihe bleibt
   die volle Breite. */
.film__wahl > p { max-width: 74ch; margin-inline: auto; }
.film__knoepfe {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .7rem; margin-top: 1.1rem;
}
.film__hinweis--klein { font-size: .75rem; margin-top: 1rem; line-height: 1.65; }
.film__hinweis--klein a { color: var(--chrom); text-decoration: underline; text-underline-offset: .2em; }
.film__hinweis--klein a:hover { color: var(--chrom-hell); }
/* Läuft der Film, ist die Frage beantwortet. Der Ladeknopf verschwindet,
   der Weg zu YouTube und der Datenschutzhinweis bleiben stehen. */
.film[data-laeuft="ja"] [data-film-laden] { display: none; }
/* Ein Nein in der Abfrage hat Folgen, sonst waere es keine Wahl: der Ladeknopf
   verschwindet, es bleibt der gewoehnliche Verweis zu YouTube. */
.film__hinweis--nein { display: none; }
html[data-extern="nein"] [data-film-laden] { display: none; }
html[data-extern="nein"] .film__hinweis--nein { display: block; }
.film[data-laeuft="ja"] .film__hinweis:first-child { display: none; }

/* --- Bewertungen: vier Karten nebeneinander ------------------------------- */
.wand__kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.wand__schnitt { display: flex; align-items: baseline; gap: .9rem; flex: none; }
.wand__zahl {
  font-family: 'Archivo', sans-serif; font-stretch: 108%; font-weight: 800;
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem);
  line-height: .85; letter-spacing: -.03em;
  color: var(--chrom-hell);
  font-variant-numeric: tabular-nums;
}
.wand__sterne { display: flex; gap: .2rem; color: var(--funke); justify-content: center; }
.wand__sterne svg { width: 16px; height: 16px; }
.wand__dazu { flex: 1 1 20rem; max-width: 36rem; }
.wand__dazu p { font-size: .9375rem; }
.wand__dazu .knopf { margin-top: 1rem; }

.stimmen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.1rem);
}
.stimme {
  position: relative; margin: 0;
  display: flex; flex-direction: column;
  background: var(--lack-karte);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  overflow: hidden;
  transition: border-color var(--ruhig), transform var(--ruhig);
}
.stimme:hover { border-color: var(--kante-hell); transform: translateY(-4px); }
/* Ein Lichtstreifen wandert beim Überfahren über die Karte */
.stimme::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
              rgba(242,245,248,.07) 48%, rgba(242,245,248,.13) 52%,
              rgba(242,245,248,.05) 58%, transparent 66%);
  background-size: 240% 100%;
  background-position: 130% 0;
  transition: background-position 900ms var(--raus-quart);
}
.stimme:hover::after { background-position: -40% 0; }

.stimme__kopf { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.stimme__rund {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 800;
  font-size: .875rem; letter-spacing: .02em;
  color: var(--lack);
  background: var(--chromverlauf);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.stimme__wer { min-width: 0; }
.stimme__wer b {
  display: block; font-family: 'Archivo', sans-serif; font-stretch: 104%;
  font-weight: 700; font-size: .9375rem; color: var(--chrom-hell);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stimme__wer span {
  display: block; font-family: 'PlexMono', monospace; font-size: .5625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--chrom-leise);
  margin-top: .2rem;
}
.sterne { display: flex; gap: .15rem; color: var(--funke); margin-bottom: .75rem; }
.sterne svg { width: 12px; height: 12px; }
.stimme blockquote {
  margin: 0; font-size: .875rem; line-height: 1.6; color: var(--chrom);
  flex: 1;
}
.stimme__quelle {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--kante);
  display: flex; align-items: center; gap: .45rem;
  font-family: 'PlexMono', monospace; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chrom-leise);
}
.stimme__quelle svg { width: 12px; height: 12px; }

@media (max-width: 1000px) { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stimmen { grid-template-columns: 1fr; } }

/* --- Werkstatt / Über uns ------------------------------------------------- */
.ueber { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
.ueber img { border-radius: var(--radius); border: 1px solid var(--kante); }
.ueber h2 { margin-bottom: 1.25rem; }
.ueber .augenbraue + h2 { margin-top: 0; }
.ueber__zitat {
  margin: 1.75rem 0 0; padding-left: 1.25rem;
  border-left: 1px solid var(--kante-hell);
  font-size: 1.0625rem; color: var(--chrom-hell);
}

/* --- Galerie -------------------------------------------------------------- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1.2vw, 1rem); }
.galerie figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--lack-karte); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms cubic-bezier(.22,.8,.3,1); }
.galerie figure:hover img { transform: scale(1.05); }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem .9rem .75rem;
  background: linear-gradient(to top, rgba(8,9,11,.92), transparent);
  font-family: 'PlexMono', monospace; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--chrom-hell);
}

/* --- Fallbeispiel: echte Vorher-Nachher-Fotos ---------------------------- */
.fall { display: grid; gap: clamp(1rem, 2vw, 1.5rem); max-width: 52rem; margin-inline: auto; }
.fall__paar {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.5rem, 1.2vw, 1rem);
}
.fall__paar--gross { grid-column: 1 / -1; }
.fall__weitere {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.fall figure {
  position: relative; margin: 0;
  border: 1px solid var(--kante); border-radius: var(--radius);
  overflow: hidden; background: var(--lack-hoch);
}
.fall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.fall figcaption {
  position: absolute; left: .7rem; top: .7rem;
  font-family: 'PlexMono', monospace; font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrom-hell);
  background: rgba(8, 9, 11, .72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(242, 245, 248, .14);
  border-radius: var(--rund-chip);
  padding: .35rem .75rem;
}
.fall figure[data-seite='nachher'] figcaption {
  color: var(--lack); background: var(--chrom-hell); border-color: transparent;
}
.fall__text { max-width: 40rem; margin-inline: auto; text-align: center; }
/* Startseite: großer Vergleich links, Problem, Lösung und Bewertung rechts */
.fall--start { max-width: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 3.5vw, 3rem); }
.fall--start .fall__paar--gross { grid-column: auto; }
.fall__seite { display: grid; gap: 1.4rem; align-content: center; }
.fall__seite > .knopf { justify-self: start; }
.fall__fakten { display: grid; gap: 1rem; margin: 0; }
.fall__fakten dt { font-family: 'PlexMono', monospace; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--funke); margin-bottom: .25rem; }
.fall__fakten dd { margin: 0; color: var(--chrom-hell); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.5; }
.fall__stimme { margin: 0; padding: 1.2rem 1.3rem; border-radius: var(--radius); background: var(--lack-karte); border: 1px solid var(--kante-hell); }
.fall__stimme .sterne, .leiter__stimme .sterne { display: flex; gap: .15rem; color: var(--funke); margin-bottom: .6rem; }
.fall__stimme .sterne svg, .leiter__stimme .sterne svg { width: 15px; height: 15px; }
.leiter__stimme { margin: 1.25rem auto 0; max-width: 44rem; padding: 1.2rem 1.3rem; border-radius: var(--radius); background: var(--lack-karte); border: 1px solid var(--kante-hell); }
.leiter__stimme blockquote { margin: 0 0 .7rem; color: var(--chrom-hell); font-size: 1rem; line-height: 1.55; }
.leiter__stimme figcaption { font-size: .8125rem; color: var(--chrom-leise); }
.leiter__stimme figcaption b { color: var(--chrom); }
.fall__stimme blockquote { margin: 0 0 .7rem; color: var(--chrom-hell); font-size: 1rem; line-height: 1.55; }
.fall__stimme figcaption { font-size: .8125rem; color: var(--chrom-leise); }
.fall__stimme figcaption b { color: var(--chrom); }
@media (max-width: 900px) { .fall--start { grid-template-columns: 1fr; } .fall__seite > .knopf { justify-self: stretch; justify-content: center; } }
.fall > .knopf { justify-self: center; }
.fall__text p + p { margin-top: 1em; }

@media (max-width: 620px) {
  .fall__weitere { grid-template-columns: 1fr; }
}

/* --- Einzugsgebiet -------------------------------------------------------- */
.gebiet { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.gebiet li {
  font-family: 'PlexMono', monospace; font-size: .75rem; letter-spacing: .08em;
  color: var(--chrom); border: 1px solid var(--kante); background: var(--lack-karte);
  border-radius: var(--rund-chip); padding: .6rem 1rem;
}
.gebiet li b { color: var(--chrom-hell); font-weight: 500; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--kante); }
.faq details { border-bottom: 1px solid var(--kante); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.35rem 3rem 1.35rem 0; position: relative;
  font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 700;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  color: var(--chrom-hell); line-height: 1.35;
  transition: color var(--schnell);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.5px solid var(--chrom-leise); border-bottom: 1.5px solid var(--chrom-leise);
  transform: rotate(45deg); transition: transform var(--schnell), border-color var(--schnell);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--chrom-hell); }
/* Die Antwort lief über die volle Breite und damit auf 163 Zeichen pro Zeile.
   Das Maß in ch zu deckeln hält die Zeile lesbar, egal wie breit der Schirm
   ist, und es wandert mit, wenn sich die Schriftgröße ändert. */
.faq .antwort { padding: 0 clamp(1rem, 6vw, 5rem) 1.5rem 0; font-size: .9375rem; }
.faq .antwort > * { max-width: 76ch; }

/* --- Kontakt -------------------------------------------------------------- */
.kontakt { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); }

.daten li { padding: 1.15rem 0; border-bottom: 1px solid var(--kante); display: grid; grid-template-columns: 26px 1fr; gap: 1rem; align-items: start; }
.daten li:first-child { border-top: 1px solid var(--kante); }
.daten svg { width: 17px; height: 17px; color: var(--chrom-leise); margin-top: .3rem; }
.daten b { display: block; font-family: 'PlexMono', monospace; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chrom-leise); font-weight: 500; margin-bottom: .3rem; }
.daten a, .daten span { color: var(--chrom-hell); text-decoration: none; font-size: 1rem; }
.daten a:hover { text-decoration: underline; }

.formular { display: grid; gap: 1.1rem; }
.feld { display: grid; gap: .5rem; }
.feld label {
  font-family: 'PlexMono', monospace; font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--chrom-leise);
}
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; font-size: .9375rem;
  color: var(--chrom-hell);
  background: var(--lack-hoch);
  border: 1px solid var(--kante);
  border-radius: var(--rund-klein);
  padding: .9rem 1.1rem;
  transition: border-color var(--schnell), background var(--schnell);
}
.feld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--chrom-leise) 50%), linear-gradient(135deg, var(--chrom-leise) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--chrom-leise); background: var(--lack-karte); }
.feld input::placeholder, .feld textarea::placeholder { color: #545c66; }
.feld--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.honig { position: absolute; left: -9999px; opacity: 0; height: 0; }

.formular__fuss { font-size: .75rem; color: var(--chrom-leise); }
.formular__fuss a { color: var(--chrom); }

.zeiten { border-top: 1px solid var(--kante); }
.zeiten li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--kante);
}
.zeiten span {
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--chrom-leise);
}
.zeiten b { color: var(--chrom-hell); font-weight: 600; font-size: .9375rem; white-space: nowrap; }

/* Karte: ein Bild vom eigenen Server, kein fremder Einbettungscode */
.karte-ort {
  position: relative; display: block;
  border: 1px solid var(--kante); border-radius: var(--radius);
  overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--lack-hoch);
  transition: border-color var(--ruhig);
}
.karte-ort:hover { border-color: var(--kante-hell); }
.karte-ort img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.karte-ort__knopf {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 700;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lack); background: var(--chrom-hell);
  padding: .75rem 1.25rem; border-radius: var(--rund-chip);
  transition: transform var(--schnell);
}
.karte-ort__knopf svg { width: 15px; height: 15px; }
.karte-ort:hover .karte-ort__knopf { transform: translateY(-2px); }

/* --- Schlussruf ----------------------------------------------------------- */
.ruf { position: relative; overflow: hidden; border-block: 1px solid var(--kante); }
.ruf__bild { position: absolute; inset: 0; }
.ruf__bild img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.ruf__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,9,11,.82), rgba(8,9,11,.72)); }
.ruf__inhalt { position: relative; padding-block: clamp(2.5rem, 5vw, 4.25rem); text-align: center; }
.ruf h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem); margin-bottom: 1rem; max-width: 22ch; margin-inline: auto; }
.ruf .lead { max-width: 36rem; margin-inline: auto; }
.ruf .knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; justify-content: center; }

/* --- Fußzeile ------------------------------------------------------------- */
.fuss { background: var(--lack-hoch); border-top: 1px solid var(--kante); padding-top: clamp(3rem, 6vw, 4.5rem); }
.fuss__gitter {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.fuss h2, .fuss h3 {
  font-family: 'PlexMono', monospace; font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--chrom-leise);
  margin-bottom: 1.1rem;
}
.fuss img.f-logo { width: 150px; margin-bottom: 1.1rem; }
.fuss p, .fuss li { font-size: .875rem; color: var(--chrom); }
.fuss ul { display: grid; gap: .6rem; }
.fuss a:not(.as-signatur) { color: var(--chrom); text-decoration: none; }
.fuss a:not(.as-signatur):hover { color: var(--chrom-hell); text-decoration: underline; }
.fuss__zeile {
  padding-block: 1.5rem .5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .8125rem; color: var(--chrom-leise);
}
.fuss__zeile nav { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
/* Die Datenschutz-Einstellungen sind eine Schaltflaeche, kein Verweis, weil sie
   nirgendwohin fuehren, sondern die Abfrage wieder aufmachen. Aussehen soll sie
   trotzdem wie die beiden Nachbarn. */
.fuss__zeile nav button {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--chrom); cursor: pointer;
}
.fuss__zeile nav button:hover { color: var(--chrom-hell); text-decoration: underline; }

/* ==========================================================================
   Einwilligung fuer externe Inhalte
   Unten am Rand, nicht bildschirmfuellend: die Seite bleibt lesbar, waehrend
   man entscheidet. Beide Schaltflaechen sind gleich breit und gleich
   gestaltet, Ablehnen steht zuerst. Eine Einwilligung, die leichter zu geben
   als zu verweigern ist, waere nach Art. 7 DSGVO keine.
   ========================================================================== */
.einwill {
  position: fixed; z-index: 120;
  left: 50%; bottom: clamp(1rem, 3vw, 2rem);
  transform: translate(-50%, 1.5rem);
  width: min(42rem, calc(100vw - 2rem));
  opacity: 0; pointer-events: none;
  transition: opacity var(--ruhig), transform var(--ruhig);
}
.einwill.ist-da { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.einwill[hidden] { display: none; }
.einwill__karte {
  background: rgba(14, 16, 19, .97);
  backdrop-filter: blur(18px);
  border: 1px solid var(--kante);
  border-radius: clamp(20px, 3vw, 30px);
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  text-align: center;
}
.einwill__titel { font-size: 1rem; margin-bottom: .7rem; }
.einwill__text { font-size: .8125rem; line-height: 1.7; color: var(--chrom); }
.einwill__text a { color: var(--chrom-hell); text-decoration: underline; text-underline-offset: .2em; }
.einwill__knoepfe { display: flex; gap: .7rem; margin-top: 1.2rem; }
.einwill__knoepfe .knopf { flex: 1 1 0; justify-content: center; }
.einwill__fuss { margin-top: .9rem; font-size: .75rem; color: var(--chrom-leise); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .einwill { transition: none; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Agentursignatur — Anthracite Studio
   Die Komponente bringt ihr eigenes Aussehen mit (anthracite-signatur.js).
   Hier nur die eigene, zentrierte Zeile unter Impressum und Datenschutz.
   ========================================================================== */
.fuss__signatur {
  padding-block: 1.25rem 2.5rem;
  display: flex; justify-content: center;
  color: var(--chrom);
}

/* --- Mobiler Ruf-Balken --------------------------------------------------- */
.ruf-balken { display: none; }

/* --- Sanftes Einblenden beim Scrollen ------------------------------------- */
/* Inhalte sind immer sichtbar, die Bewegung ist nur ein leises Ankommen.
   Vorher waren Abschnitte beim schnellen Scrollen kurz leer. */
.js .taucht-auf { transform: translateY(10px); }
.js .taucht-auf.da { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(.22,.8,.3,1), transform 700ms cubic-bezier(.22,.8,.3,1); }

/* Jede Kachel taucht für sich auf, sobald sie im Bild steht. --takt setzt
   app.js beim Auftauchen, damit Kacheln einer Reihe versetzt kommen. */
.js .staffel-kind { transform: translateY(10px); }
.js .staffel-kind.da {
  opacity: 1; transform: none;
  transition: opacity 620ms cubic-bezier(.22, .8, .3, 1) var(--takt, 0ms),
              transform 620ms cubic-bezier(.22, .8, .3, 1) var(--takt, 0ms);
}

/* Grosse Bilder wischen auf, statt nur zu erscheinen */
.js .wischt-auf { clip-path: inset(0 0 0 0); }
.js .wischt-auf.da {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms cubic-bezier(.165, .84, .44, 1);
}

/* Lesefortschritt als feine Linie unter der Kopfleiste */
.fortschritt {
  position: fixed; left: 0; top: 0; z-index: 60;
  height: 2px; width: 100%;
  transform: scaleX(var(--anteil, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--funke), var(--chrom-hell));
  pointer-events: none;
}

/* Knöpfe folgen dem Zeiger ein Stück, --zug-x/--zug-y setzt app.js */
.knopf--hell, .knopf--rand {
  transform: translate(var(--zug-x, 0px), calc(var(--zug-y, 0px) + var(--hebe, 0px)));
}

/* --- Seitentitel für Unterseiten ------------------------------------------ */
/* Der Seitentitel steht ohne Trennlinie und läuft in den ersten Abschnitt
   hinein. Mit Linie und großem Abstand darunter sahen Seitentitel und erste
   Abschnittsüberschrift aus wie zwei Kopfzeilen hintereinander. */
.seitenkopf {
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem) 0;
  text-align: center;
}
/* Der erste Abschnitt schließt eng an, damit beides ein Block bleibt */
.seitenkopf + .abschnitt { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Dort braucht die Überschrift dann keine zweite Augenbraue und keinen
   zweiten Vorspann: beides steht schon im Seitentitel. */
.seitenkopf + .abschnitt > .huelle > .abschnitt__kopf {
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}
.seitenkopf + .abschnitt > .huelle > .abschnitt__kopf h2 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  letter-spacing: .01em;
}
.seitenkopf h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.seitenkopf p { margin-top: 1rem; max-width: 56ch; margin-inline: auto; font-size: clamp(.9375rem, .92rem + .2vw, 1.0625rem); }
.krumen {
  font-family: 'PlexMono', monospace; font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chrom-leise); margin-bottom: 1rem;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
}
.krumen a { color: var(--chrom-leise); text-decoration: none; }
.krumen a:hover { color: var(--chrom); }
.krumen span { margin-inline: .5rem; }

/* --- Fließtext (Recht) ---------------------------------------------------- */
.text-seite { max-width: 70ch; }
.text-seite h2 { font-size: 1.375rem; margin: 2.5rem 0 1rem; }
.text-seite h3 { font-size: 1.0625rem; margin: 1.75rem 0 .75rem; font-stretch: 104%; }
.text-seite p, .text-seite li { font-size: .9375rem; }
.text-seite ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .4rem; margin-bottom: 1em; }
.text-seite a { color: var(--chrom-hell); }

/* ==========================================================================
   Schmale Bildschirme
   ========================================================================== */
@media (max-width: 1000px) {
  .hero__bild {
    order: -1; justify-self: stretch;
    height: auto; aspect-ratio: 16 / 11; max-height: 52svh;
    transform: none; -webkit-box-reflect: unset;
    margin-top: .75rem;
  }
  .paket { grid-template-columns: 1fr; }
  .kontakt, .ueber { grid-template-columns: 1fr; }
  .fuss__gitter { grid-template-columns: 1fr 1fr; }
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .raster--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .navi {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      rgba(14,16,19,.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(242,245,248,.16);
    border-radius: 26px;
    box-shadow: 0 20px 48px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.14) inset;
    padding: .25rem 1.35rem 1rem;
    transform: translateY(-10px) scale(.98); opacity: 0; pointer-events: none;
    transform-origin: top center;
    transition: opacity var(--schnell), transform var(--ruhig);
  }
  .navi[data-offen='ja'] { transform: none; opacity: 1; pointer-events: auto; }
  .navi a {
    padding: 1.05rem .25rem;
    border-bottom: 1px solid rgba(242,245,248,.09);
    font-size: .8125rem;
    opacity: 0; transform: translateY(-6px);
    transition: opacity 220ms ease, transform 280ms var(--raus-quart), color var(--schnell);
  }
  .navi a:last-child { border-bottom: 0; }
  .navi[data-offen='ja'] a { opacity: 1; transform: none; }
  .navi[data-offen='ja'] a:nth-child(1) { transition-delay: 40ms; }
  .navi[data-offen='ja'] a:nth-child(2) { transition-delay: 80ms; }
  .navi[data-offen='ja'] a:nth-child(3) { transition-delay: 120ms; }
  .navi[data-offen='ja'] a:nth-child(4) { transition-delay: 160ms; }
  .navi[data-offen='ja'] a::after { display: none; }
  .navi[data-offen='ja'] a[aria-current='page'] {
    color: var(--chrom-hell);
  }
  .navi[data-offen='ja'] a[aria-current='page']::before {
    content: ''; display: inline-block;
    width: 5px; height: 5px; margin-right: .6rem;
    background: var(--funke); transform: rotate(45deg) translateY(-1px);
  }
  .navi a[aria-current='page']::after { display: none; }
  .burger { display: grid; }
  .kopf__tat .knopf--ruf { display: none; }
  .band__liste { grid-template-columns: 1fr 1fr; }
  .schritte { grid-template-columns: 1fr; }
  .raster--2 { grid-template-columns: 1fr; }
  .marke__wort { font-size: 1.0625rem; }

  /* Immer erreichbar: anrufen oder WhatsApp */
  .ruf-balken {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(8,9,11,.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--kante);
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    gap: .6rem;
  }
  .ruf-balken .knopf { justify-content: center; width: 100%; padding: .85rem 1rem; font-size: .75rem; }
  /* Der Anrufbalken klebt unten. Die Abfrage legt sich darueber, nicht darunter. */
  .einwill { bottom: calc(76px + .75rem); }
  .einwill__knoepfe { flex-direction: column; }
  body { padding-bottom: 76px; }
}

@media (max-width: 620px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .band li { padding: 1.25rem 1rem; }
  .band b { font-size: 1.1875rem; }
  .band small { font-size: .6875rem; letter-spacing: .08em; }
  .raster--3, .raster--4 { grid-template-columns: 1fr; }
  .fuss__gitter { grid-template-columns: 1fr; }
  .feld--zwei { grid-template-columns: 1fr; }
  .band__liste { grid-template-columns: 1fr 1fr; }
  .hero__tat .knopf { width: 100%; justify-content: center; }
  .saeule { min-height: 340px; }
}

/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .wortmarke .glanz { background-position: 26% 0; }
  .js .taucht-auf { opacity: 1; transform: none; }
  .js .staffel-kind { opacity: 1; transform: none; }
  .js .wischt-auf { clip-path: none; }
  .fortschritt { display: none; }
  .knopf--hell, .knopf--rand { transform: none; }
}

/* ==========================================================================
   Große Bildschirme
   Bis hierher ist alles mit clamp() gebaut und läuft bei etwa 1240px gegen
   die Obergrenze. Auf einem 27-Zoll-Schirm stand der Inhalt dadurch auf 48
   Prozent der Fläche, mit 660px Leere links und rechts, und die Schrift wirkte
   verloren. Zwei Stufen, zwei Hebel:

   --breit  lässt die Struktur mitwachsen, also Raster, Karten und Bilder.
   font-size am html skaliert alles, was in rem gerechnet ist: Schrift,
   Abstände, Rundungen. Weil die ganze Seite in rem gebaut ist, bleiben die
   Verhältnisse dabei erhalten, es wird nur alles zusammen eine Spur größer.

   Was absichtlich NICHT mitwächst, ist die Zeilenlänge im Fließtext. Die ist
   an anderer Stelle in ch gedeckelt und soll dort bleiben: Ein breiterer
   Schirm ist kein Grund für längere Zeilen.
   ========================================================================== */
@media (min-width: 1500px) {
  :root { --breit: 1360px; }
  html { font-size: 17px; }
}
@media (min-width: 1900px) {
  :root { --breit: 1480px; }
}
@media (min-width: 2200px) {
  :root { --breit: 1560px; }
  html { font-size: 18px; }
}

/* ==========================================================================
   Druck
   ========================================================================== */
@media print {
  .kopf, .ruf-balken, .ruf, .karte-ort, .burger, .einwill { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
}

/* ==========================================================================
   Vorher / Nachher — der Regler
   ========================================================================== */
.vergleich { margin: 0 auto; max-width: 54rem; }
.vergleich__buehne {
  position: relative;
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--lack-hoch);
  /* Breit und flach, damit der Regler mit Überschrift auf einen Schirm passt */
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  touch-action: pan-y;
}
.vergleich__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
/* Das obere Bild bleibt immer volle Buehnenbreite und wird nur beschnitten.
   Frueher wurde der Kasten schmaler gemacht, dann verzog sich das Bild. */
.vergleich__oben {
  position: absolute; inset: 0;
  width: 100%;
  clip-path: inset(0 calc(100% - var(--teil, 50%)) 0 0);
}
.vergleich__oben .vergleich__bild { width: 100%; height: 100%; }

.vergleich__marke {
  position: absolute; top: 1rem; z-index: 3;
  font-family: 'PlexMono', monospace; font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrom-hell);
  background: rgba(8, 9, 11, .68);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(242, 245, 248, .14);
  border-radius: var(--rund-chip);
  padding: .4rem .8rem;
  pointer-events: none;
}
.vergleich__marke--links { left: 1rem; }
.vergleich__marke--rechts { right: 1rem; }

/* Der Griff sitzt exakt auf der Trennlinie: die Linie füllt die ganze
   Höhe, der Knopf hängt mit translate genau in der Mitte davon.
   Vorher hing er an einem Raster der Breite null und rutschte nach rechts. */
.vergleich__griff {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4;
  width: 2px; margin-left: -1px;
  pointer-events: none;
  background: rgba(242, 245, 248, .85);
}
.vergleich__griff span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(8, 9, 11, .7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(242, 245, 248, .55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  display: grid; place-items: center;
}
.vergleich__griff span::before,
.vergleich__griff span::after {
  content: '';
  position: absolute; top: 50%; left: 50%; margin: -3px 0 0 -3px;
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--chrom-hell);
  border-right: 1.5px solid var(--chrom-hell);
}
.vergleich__griff span::before { transform: translateX(-7px) rotate(-135deg); }
.vergleich__griff span::after { transform: translateX(7px) rotate(45deg); }

.vergleich__regler {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.vergleich__regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px; height: 100vh;
  background: transparent; cursor: ew-resize;
}
.vergleich__regler::-moz-range-thumb {
  width: 56px; height: 400px;
  border: 0; background: transparent; cursor: ew-resize;
}
.vergleich__regler:focus-visible { outline: 2px solid var(--funke); outline-offset: -2px; }

.vergleich figcaption {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--chrom-leise);
}

@media (max-width: 620px) {
  .vergleich__buehne { aspect-ratio: 4 / 3; max-height: none; }
  .vergleich__marke { font-size: .5625rem; padding: .3rem .55rem; top: .6rem; }
  .vergleich__marke--links { left: .6rem; }
  .vergleich__marke--rechts { right: .6rem; }
}

/* ==========================================================================
   Bewegung: die Mischung aus auffällig und leise
   Jede Seite bekommt dieselben Werkzeuge. Groß nur da, wo etwas beginnt,
   leise überall dort, wo man liest.
   ========================================================================== */

/* --- Überschriften steigen wortweise auf (das Auffällige) ----------------- */
.js .wort-auf .wort {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
  transform: translateY(.18em);
}
.js .wort-auf.da .wort {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 620ms cubic-bezier(.165, .84, .44, 1) var(--takt, 0ms),
              transform 720ms cubic-bezier(.165, .84, .44, 1) var(--takt, 0ms),
              filter 620ms cubic-bezier(.165, .84, .44, 1) var(--takt, 0ms);
}

/* --- Die Augenbraue zieht ihre Striche (das Leise) ------------------------ */
.js .augenbraue::before,
.js .augenbraue::after { transform: scaleX(0); transform-origin: center; }
.js .taucht-auf.da .augenbraue::before,
.js .taucht-auf.da .augenbraue::after,
.js .augenbraue.da::before,
.js .augenbraue.da::after {
  transform: scaleX(1);
  transition: transform 700ms cubic-bezier(.165, .84, .44, 1) 120ms;
}

/* --- Links im Fließtext: der Strich läuft von links ein ------------------- */
.huelle p a:not(.knopf) {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms cubic-bezier(.22, .8, .3, 1);
}
.huelle p a:not(.knopf):hover,
.huelle p a:not(.knopf):focus-visible { background-size: 100% 1px; }

/* --- Reiterleiste: der Balken fährt mit, statt zu springen ---------------- */
.reiter__leiste { position: relative; }
/* Die aktive Kategorie wird hinterleuchtet wie von einer Lampe dahinter:
   ein weicher Schein, der nach allen Seiten ausläuft. Keine Fläche, keine
   Kante, kein Rand. Ein einziges Element wandert von Reiter zu Reiter. */
.reiter__balken {
  position: absolute; top: -6%; bottom: -1px; left: 0; z-index: 0;
  width: var(--balken-breite, 0px);
  transform: translateX(var(--balken-x, 0px));
  transition: transform 520ms cubic-bezier(.22, .8, .3, 1),
              width 520ms cubic-bezier(.22, .8, .3, 1);
  pointer-events: none;
  background:
    radial-gradient(78% 120% at 50% 108%,
        rgba(186, 164, 255, .40) 0%,
        rgba(166, 140, 245, .20) 34%,
        rgba(166, 140, 245, .07) 58%,
        transparent 78%);
  filter: blur(.5px);
}
/* Der Lichtsaum unten läuft zu beiden Seiten aus, statt hart abzuschneiden */
.reiter__balken::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,
      transparent 0%, rgba(166, 140, 245, .55) 22%,
      rgba(214, 200, 255, .95) 50%,
      rgba(166, 140, 245, .55) 78%, transparent 100%);
}
/* Die Bühne hält alle Tafeln übereinander. Die alte blendet aus, während
   die neue einblendet, und die Höhe fährt dazwischen weich nach. Vorher
   verschwand die alte Tafel schlagartig, das war der harte Klick. */
.reiter__buehne { position: relative; }
.js .reiter__buehne {
  display: grid;
  align-items: start;      /* sonst füllt jede Tafel die Bühne und ist
                              immer genau so hoch wie die vorige */
  overflow: hidden;
  height: var(--buehne-hoehe, auto);
  transition: height 460ms cubic-bezier(.22, .8, .3, 1);
}
.js .reiter__buehne > .paket {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px) scale(.995);
  pointer-events: none;
  transition: opacity 340ms cubic-bezier(.22, .8, .3, 1),
              transform 460ms cubic-bezier(.22, .8, .3, 1);
}
/* Im Aufbau bleiben alle Tafeln stehen, versteckt wird nur für Vorleser */
.js .reiter__buehne > .paket[hidden] {
  display: grid;
  visibility: hidden;
}
.js .reiter__buehne > .paket[data-offen='ja'] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}

/* --- Zahlen im Paket zählen hoch, wenn die Tafel aufgeht ------------------ */
.paket__preis .zahl { font-variant-numeric: tabular-nums; }

/* --- Das Heldenbild atmet beim Scrollen ---------------------------------- */
.hero__bild img,
.hero__bild video { transform: translateY(var(--hebe-hero, 0px)) scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .js .wort-auf .wort { opacity: 1; transform: none; filter: none; }
  .js .augenbraue::before, .js .augenbraue::after { transform: scaleX(1); }
  .js .reiter__buehne, .js .reiter__buehne > .paket { transition: none; }
  .js .paket[data-offen='ja'] .paket__kopf > *,
  .js .paket[data-offen='ja'] .paket__liste > li { animation: none; }
  .reiter__balken { transition: none; }
  .hero__bild img, .hero__bild video { transform: none; }
  :target { animation: none; }
}

/* Auf den Rechtsseiten fasst app.js Überschrift und Absätze zu Blöcken
   zusammen. Der Abstand darf sich dadurch nicht ändern. */
.text-seite .text-block { display: contents; }
.js .text-seite .text-block { display: block; }
.js .text-seite .text-block + .text-block { margin-top: 0; }

/* --- Die Bildlaufleiste gehört zum Blech, nicht zum Betriebssystem -------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--kante-hell) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--kante-hell);
  border-radius: 999px;
  border: 3px solid var(--lack);
  transition: background var(--schnell);
}
::-webkit-scrollbar-thumb:hover { background: var(--lila); }
::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   Preistafel mit Größenwahl
   Ohne JavaScript bleiben alle drei Spalten stehen. Sobald app.js die Wahl
   gebaut hat, trägt die Tafel data-wahl und zeigt nur noch einen Preis.
   ========================================================================== */
.groessenwahl {
  position: relative;
  display: inline-flex; gap: .25rem;
  padding: .3rem;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--kante);
  border-radius: 999px;
  background: var(--lack-karte);
}
.groessenwahl__lauf {
  position: absolute; top: .3rem; bottom: .3rem; left: 0;
  width: var(--wahl-breite, 0px);
  transform: translateX(var(--wahl-x, 0px));
  border-radius: 999px;
  background: var(--chrom-hell);
  transition: transform 380ms cubic-bezier(.22, .8, .3, 1),
              width 380ms cubic-bezier(.22, .8, .3, 1);
}
.groessenwahl__knopf {
  position: relative; z-index: 1;
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif; font-stretch: 104%; font-weight: 700;
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--chrom-leise);
  transition: color 240ms ease;
}
.groessenwahl__knopf:hover { color: var(--chrom); }
.groessenwahl__knopf[aria-pressed='true'] { color: var(--lack); }
.groessenwahl__knopf small {
  display: block; font-family: 'PlexMono', monospace; font-weight: 500;
  font-size: .5625rem; letter-spacing: .06em; text-transform: none;
  color: inherit; opacity: .62; margin-top: .15rem;
}
.groessen-reihe { display: flex; justify-content: center; }

/* Ist eine Größe gewählt, wird die Tafel zweispaltig: was, und was es kostet */
.ptafel[data-wahl] .ptafel__kopf,
.ptafel[data-wahl] .ptafel__zeile {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ptafel[data-wahl] .ptafel__kopf span[data-groesse],
.ptafel[data-wahl] .ptafel__preis { display: none; }
.ptafel[data-wahl='Klein']  .ptafel__preis[data-groesse='Klein'],
.ptafel[data-wahl='Mittel'] .ptafel__preis[data-groesse='Mittel'],
.ptafel[data-wahl='Groß']   .ptafel__preis[data-groesse='Groß'] {
  display: block;
  justify-self: end;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.375rem);
  font-weight: 600;
  animation: preis-ein 320ms cubic-bezier(.165, .84, .44, 1) both;
}
@keyframes preis-ein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.ptafel[data-wahl] .ptafel__zeile { cursor: default; }
.ptafel[data-wahl] .ptafel__zeile:hover .ptafel__was { color: #fff; }

.ptafel__fuss {
  margin: 0;
  padding: .85rem clamp(1.1rem, 2.2vw, 1.75rem);
  border-top: 1px solid var(--kante);
  background: var(--lack-hoch);
  font-family: 'PlexMono', monospace;
  font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--chrom-leise);
}
.ptafel:not([data-wahl]) .ptafel__fuss { display: none; }

@media (max-width: 720px) {
  .ptafel[data-wahl] .ptafel__zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .ptafel[data-wahl] .ptafel__was { grid-column: auto; margin-bottom: 0; }
  .ptafel[data-wahl] .ptafel__preis::before { content: none; }
  .groessenwahl__knopf { padding: .5rem .8rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .groessenwahl__lauf { transition: none; }
  .ptafel[data-wahl] .ptafel__preis { animation: none; }
}

/* Jede Tafel im Ablauf endet mit einem Weg nach vorn */
.weg__tat { margin-top: clamp(1rem, 2vw, 1.5rem); align-self: start; }

/* Bewertungen sind Zitate, keine Links. Sie sollen sich trotzdem
   anfassen lassen, wenn der Zeiger darüber geht. */
@media (hover: hover) and (pointer: fine) {
  .stimme:hover { border-color: var(--kante-hell); transform: translateY(-3px); }
}

/* ==========================================================================
   Die auffälligen Sachen
   Dieselbe Idee wie auf der Wortmarke: Licht, das über Blech läuft.
   Jedes Mittel nur einmal je Abschnitt, sonst flackert die ganze Seite.
   ========================================================================== */

/* --- Chrom läuft über die Überschrift, genau wie über die Wortmarke ------
   Die Buchstaben selbst werden hell, nicht ein Streifen darüber. Auf
   schwarzem Grund ist das der einzige Weg, den man auch wirklich sieht. */
.js .wort-auf.da .wort {
  background-image: linear-gradient(100deg,
      #ffffff 0%, #ffffff 40%,
      #c9b8ff 50%, #ffffff 58%,
      #8c95a1 74%, #6f7884 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wort-chrom 1350ms cubic-bezier(.3, .1, .2, 1) var(--takt, 0ms) both;
}
@keyframes wort-chrom {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
/* Kann ein Browser den Verlauf nicht auf die Schrift schneiden, bleibt die
   Überschrift trotzdem lesbar. Sonst stünde dort nichts. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .js .wort-auf.da .wort {
    background: none; color: var(--chrom-hell); animation: none;
  }
}

/* --- Lila markiert, was gerade aktiv ist --------------------------------- */
.groessenwahl__lauf {
  background: linear-gradient(120deg, #fff, #e6dcff);
  box-shadow: 0 2px 14px rgba(166, 140, 245, .4);
}
.js .schritt[data-offen='ja'] .schritt__kopf svg { color: var(--lila); }
.js .schritt[data-offen='ja']::before { color: var(--lila); }
.js .schritt[data-offen='ja'] {
  box-shadow: inset 3px 0 0 var(--lila);
}

/* --- Die Werkstattlampe: helle Stelle folgt dem Zeiger -------------------- */
.abschnitt--hoch { position: relative; isolation: isolate; }
.abschnitt--hoch > .lampe {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0;
  border-radius: inherit;
  background: radial-gradient(26rem 18rem at var(--lx, 50%) var(--ly, 50%),
              rgba(166, 140, 245, .035), rgba(242, 245, 248, .018) 40%, transparent 70%);
  transition: opacity 500ms ease;
}
.abschnitt--hoch[data-lampe='an'] > .lampe { opacity: 1; }

/* --- Videokarten: der richtige Hover -------------------------------------
   Die Karte kippt leicht zum Zeiger, ein Chromstreifen läuft darüber,
   und der Text schiebt sich hoch. Nur auf Zeigergeräten. */
.vkarte { transform-style: preserve-3d; }
/* Unter einer 3D-Neigung greift overflow:hidden in Chrome nicht mehr
   zuverlässig, dann blitzt das Video an der Rundung durch. clip-path
   schneidet sauber, gilt aber nur beim Überfahren: sonst würde es auch
   den Fokusring abschneiden, und den braucht die Tastaturbedienung. */
@media (hover: hover) and (pointer: fine) {
  .vkarte:hover { clip-path: inset(0 round var(--rund-gross)); }
}
.vkarte__film::after {
  content: ''; position: absolute; inset: -30%; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg,
      transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  transform: translateX(-60%);
}
@media (hover: hover) and (pointer: fine) {
  .vkarte {
    transition: transform 420ms cubic-bezier(.22, .8, .3, 1),
                border-color var(--ruhig), box-shadow var(--ruhig);
  }
  .vkarte:hover {
    transform: perspective(900px)
               rotateX(calc(var(--kipp-y, 0) * -5deg))
               rotateY(calc(var(--kipp-x, 0) * 5deg))
               translateY(-6px) scale(1.015);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  }
  .vkarte:hover .vkarte__film::after {
    animation: chromstreifen 900ms cubic-bezier(.22, .8, .3, 1) both;
  }
  /* Nur der Inhalt hebt sich. Würde der Sockel selbst nach oben rutschen,
     bliebe unten ein Spalt und das Video blitzte durch die Rundung. */
  .vkarte:hover .vkarte__zeile,
  .vkarte:hover .vkarte__text p,
  .vkarte:hover .vkarte__text .vkarte__mehr { transform: translateY(-3px); }
  .vkarte__zeile, .vkarte__text p, .vkarte__text .vkarte__mehr {
    transition: transform 420ms cubic-bezier(.22, .8, .3, 1);
  }
}
@keyframes chromstreifen {
  0%   { opacity: 0; transform: translateX(-60%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
  .js .wort-auf.da .wort { animation: none; background: none; color: var(--chrom-hell); }
  .abschnitt--hoch > .lampe { display: none; }
  .vkarte:hover { transform: none; }
  .vkarte:hover .vkarte__film::after { animation: none; }
  .vkarte:hover .vkarte__text { transform: none; }
}

/* ==========================================================================
   Ein Hover für alle Karten: Chromstreifen, Licht, Bewegung
   Dieselbe Geste überall, damit sich die Seite wie ein Stück anfühlt.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {

  /* --- Anlasskarten: das Bild zieht an, das Licht kommt von links -------- */
  .anlass {
    transition: transform 460ms cubic-bezier(.22, .8, .3, 1),
                border-color var(--ruhig), box-shadow var(--ruhig);
  }
  a.anlass:hover {
    transform: translateY(-6px) scale(1.008);
    border-color: rgba(166, 140, 245, .38);
    box-shadow: 0 28px 64px rgba(0, 0, 0, .6),
                0 0 0 1px rgba(166, 140, 245, .18),
                0 0 44px -12px rgba(166, 140, 245, .55);
  }
  .anlass__bild::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    pointer-events: none; opacity: 0;
    background: linear-gradient(104deg,
        transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
    transform: translateX(-70%);
  }
  a.anlass:hover .anlass__bild::after {
    animation: chromstreifen 950ms cubic-bezier(.22, .8, .3, 1) both;
  }
  a.anlass:hover .anlass__bild img {
    transform: scale(1.09) rotate(.6deg);
    opacity: 1;
  }
  /* Ein Lichtsaum an der Nahtstelle zwischen Bild und Text */
  .anlass__bild { position: relative; }
  .anlass__bild::before {
    content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px;
    z-index: 3; opacity: 0;
    background: linear-gradient(180deg, transparent, var(--lila), transparent);
    transition: opacity var(--ruhig);
  }
  a.anlass:hover .anlass__bild::before { opacity: 1; }
  .anlass__text h3 { transition: transform 460ms cubic-bezier(.22, .8, .3, 1); }
  a.anlass:hover .anlass__text h3 { transform: translateX(4px); }
  .anlass .vkarte__preis {
    transition: transform 460ms cubic-bezier(.22, .8, .3, 1), box-shadow var(--ruhig);
  }
  a.anlass:hover .vkarte__preis {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 6px 18px rgba(166, 140, 245, .45);
  }

  /* --- Verwandte Leistungen und Ortskacheln ----------------------------- */
  .verwandt a { position: relative; overflow: hidden; }
  .verwandt a img {
    transition: transform 620ms cubic-bezier(.22, .8, .3, 1), opacity var(--ruhig);
  }
  .verwandt a:hover {
    transform: translateY(-5px);
    border-color: rgba(166, 140, 245, .34);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 36px -14px rgba(166, 140, 245, .5);
  }
  .verwandt a:hover img { transform: scale(1.07); opacity: 1; }
  .verwandt a::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    pointer-events: none; opacity: 0;
    background: linear-gradient(104deg,
        transparent 40%, rgba(255, 255, 255, .42) 50%, transparent 60%);
    transform: translateX(-70%);
  }
  .verwandt a:hover::after {
    animation: chromstreifen 900ms cubic-bezier(.22, .8, .3, 1) both;
  }

  /* --- Leistungskarten bekommen denselben Streifen ----------------------- */
  .karte__bild::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    pointer-events: none; opacity: 0;
    background: linear-gradient(104deg,
        transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%);
    transform: translateX(-70%);
  }
  a.karte:hover .karte__bild::before {
    animation: chromstreifen 900ms cubic-bezier(.22, .8, .3, 1) both;
  }
  a.karte:hover { border-color: rgba(166, 140, 245, .32); }

  /* --- Fragen: die Zeile hebt sich beim Überfahren ----------------------- */
  .faq summary { transition: color var(--schnell), transform 320ms cubic-bezier(.22,.8,.3,1); }
  .faq summary:hover { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  a.anlass:hover, .verwandt a:hover { transform: none; }
  a.anlass:hover .anlass__bild img, .verwandt a:hover img { transform: none; }
  a.anlass:hover .anlass__bild::after, .verwandt a:hover::after,
  a.karte:hover .karte__bild::before { animation: none; }
  .faq summary:hover { transform: none; }
}

/* --- Bewertungskarten: die Sterne springen nacheinander an --------------- */
@media (hover: hover) and (pointer: fine) {
  .stimme .sterne svg {
    transform-origin: 50% 60%;
    transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1),
                filter 320ms ease, color 320ms ease;
  }
  .stimme:hover .sterne svg {
    transform: scale(1.35) rotate(-8deg);
    filter: drop-shadow(0 0 8px rgba(246, 201, 107, .75));
    color: #ffd98a;
  }
  .stimme:hover .sterne svg:nth-child(1) { transition-delay: 0ms; }
  .stimme:hover .sterne svg:nth-child(2) { transition-delay: 55ms; }
  .stimme:hover .sterne svg:nth-child(3) { transition-delay: 110ms; }
  .stimme:hover .sterne svg:nth-child(4) { transition-delay: 165ms; }
  .stimme:hover .sterne svg:nth-child(5) { transition-delay: 220ms; }
  /* Beim Verlassen gehen sie gemeinsam zurück, nicht wieder einzeln */
  .stimme .sterne svg { transition-delay: 0ms; }

  /* Das Monogramm dreht sich leicht mit, die Karte hebt sich */
  .stimme__rund { transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
  .stimme:hover .stimme__rund { transform: scale(1.08) rotate(-4deg); }
  .stimme:hover {
    border-color: var(--kante-hell);
    transform: translateY(-5px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .55), 0 0 30px -14px rgba(246, 201, 107, .5);
  }
  /* Das Zitat rückt einen Hauch nach, damit die Karte lebt */
  .stimme blockquote { transition: transform 420ms cubic-bezier(.22, .8, .3, 1); }
  .stimme:hover blockquote { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .stimme:hover, .stimme:hover .sterne svg,
  .stimme:hover .stimme__rund, .stimme:hover blockquote { transform: none; }
}

/* Fußzeilenlinks waren nur 17 px hoch. Auf dem Handy trifft man das nicht.
   Mit .72rem oben und unten kommen sie auf die 44 px, die eine Fingerkuppe
   braucht. Die Zeilen stehen dadurch etwas luftiger, das schadet nicht. */
.fuss__spalte a,
.fuss li a,
.fuss .daten a { display: inline-block; padding-block: .72rem; }
/* Die Wortmarke im Kopf ist nur so hoch wie ihre zwei Zeilen */
.marke { padding-block: .6rem; }
/* Rechtliches in der Fußzeile: ebenfalls auf Fingergröße */
.fuss__zeile nav a { display: inline-block; padding-block: .72rem; }

/* ==========================================================================
   Ratgeber: Fließtext, der sich lange lesen lässt
   ========================================================================== */
.ratgeber {
  max-width: 42rem;
  margin-inline: auto;
  font-size: clamp(1rem, .97rem + .2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--chrom);
}
.ratgeber h2 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 .85rem;
  color: var(--chrom-hell);
}
.ratgeber h2:first-child { margin-top: 0; }
.ratgeber p { margin: 0 0 1.15rem; }
.ratgeber ul, .ratgeber ol {
  margin: 0 0 1.5rem; padding-left: 0; list-style: none;
  display: grid; gap: .6rem;
}
.ratgeber li { position: relative; padding-left: 1.6rem; }
.ratgeber ul li::before {
  content: ''; position: absolute; left: .35rem; top: .75em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--funke);
}
.ratgeber ol { counter-reset: rg; }
.ratgeber ol li { counter-increment: rg; }
.ratgeber ol li::before {
  content: counter(rg, decimal-leading-zero);
  position: absolute; left: 0; top: .05em;
  font-family: 'PlexMono', monospace; font-size: .75rem;
  letter-spacing: .1em; color: var(--funke);
}
.ratgeber strong { color: var(--chrom-hell); font-weight: 600; }
/* Die Links im Beitrag bekommen denselben einlaufenden Strich wie überall */
.ratgeber a {
  color: var(--chrom-hell); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 320ms cubic-bezier(.22, .8, .3, 1);
}
.ratgeber a:hover, .ratgeber a:focus-visible { background-size: 100% 1px; }

/* --- Material -------------------------------------------------------------
   Womit gearbeitet wird. Steht zwischen Ablauf und Preis und beantwortet
   dort die Frage, warum das Ganze kostet, was es kostet. Mit Bild zweispaltig,
   ohne Bild eine ruhige Spalte in der Mitte. */
.material {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.75rem);
  align-items: center;
  padding: clamp(1.4rem, 3.2vw, 2.6rem);
  background: var(--lack-hoch);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
}
.material--bild { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.material__bild { position: relative; isolation: isolate; }
/* Ein warmer Schein hinter den Pads, damit sie nicht im Schwarz versacken. */
.material__bild::before {
  content: ''; position: absolute; inset: -12% -6%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 55%, rgba(246,201,107,.13), transparent 72%);
}
.material__bild img { display: block; width: 100%; height: auto; }
.material__text h2 { margin: .4rem 0 .95rem; }
.material__text p + p { margin-top: .8rem; }
.material__text p:not(.augenbraue) { color: var(--chrom); }

/* Ohne Bild: mittig, schmaler, damit die Zeilen lesbar bleiben. */
.material:not(.material--bild) { text-align: center; justify-items: center; }
.material:not(.material--bild) .material__text { max-width: 62ch; }

@media (max-width: 860px) {
  .material--bild { grid-template-columns: 1fr; text-align: center; }
  .material--bild .material__text { justify-self: center; max-width: 56ch; }
  .material__bild { max-width: 26rem; margin-inline: auto; }
}

/* Abschluss jeder Pakettafel. Ohne das endet die Tafel im Nichts und man
   muss sich selbst überlegen, wie man jetzt weiterkommt. */
.paket__tat {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
  padding-top: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--kante);
}
@media (max-width: 720px) {
  .paket__tat { justify-content: center; }
  .paket__tat .knopf { flex: 1 1 100%; justify-content: center; }
}

/* Die Stufen unter dem Materialabschnitt. Jede führt auf die Preistafel,
   damit niemand die Zuordnung Stufe zu Preis im Kopf machen muss. */
.system-reihe { margin-top: clamp(1rem, 2.4vw, 1.6rem); }
.system {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .3rem; text-decoration: none;
  padding: clamp(1.2rem, 2.6vw, 1.75rem);
  background: var(--lack-karte);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  transition: border-color var(--ruhig), transform var(--ruhig), background var(--ruhig);
}
.system:hover { border-color: var(--kante-hell); background: var(--lack-hoch); transform: translateY(-3px); }
.system:hover .vkarte__mehr { color: var(--lila); }
.system__bild { display: block; width: 100%; max-width: 11rem; margin-bottom: .5rem; }
.system__bild img { display: block; width: 100%; height: auto; }
.system__stufe {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--funke);
}
.system__produkt { font-size: 1.0625rem; color: var(--chrom-hell); }
.system__haus { font-size: .75rem; color: var(--chrom-leise); }
.system p { font-size: .875rem; color: var(--chrom); margin-top: .5rem; }
.system .vkarte__mehr { margin-top: auto; padding-top: .9rem; }
@media (max-width: 860px) { .system-reihe { grid-template-columns: 1fr; } }

/* Herstellerangaben als Tafel. Bewusst nüchtern: zwei Spalten, klare Kante
   dazwischen, keine Icons. Es sind fremde Zahlen, die sollen nicht wirken
   wie eigene Versprechen. */
.werte {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--kante);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  overflow: hidden;
}
.werte__zeile {
  display: flex; flex-direction: column; gap: .3rem;
  padding: clamp(.9rem, 2vw, 1.3rem);
  background: var(--lack-karte);
}
.werte__zeile span {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrom-leise);
}
.werte__zeile b { font-weight: 500; color: var(--chrom-hell); font-size: .9375rem; }
@media (max-width: 620px) { .werte { grid-template-columns: 1fr; } }

/* --- Garantie -------------------------------------------------------------
   Die eigene Zusage. Die Zahl steht groß und in Funke, weil sie das Argument
   ist. Bedingungen und Ausschlüsse stehen gleichberechtigt daneben: eine
   Garantie, deren Grenzen man suchen muss, ist keine. */
.garantie {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.25rem);
  align-items: start;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  background: var(--lack-hoch);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
}
.garantie__zahl {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .2rem; align-self: center;
}
.garantie__zahl b {
  font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 5.2rem); line-height: .9;
  color: var(--funke);
}
.garantie__zahl span {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrom-leise);
}
.garantie__spalte .augenbraue { margin-bottom: .6rem; }
.garantie__aus { list-style: none; margin: 0; padding: 0; }
.garantie__aus li {
  position: relative; padding: .5rem 0 .5rem 1.3rem;
  font-size: .875rem; color: var(--chrom);
  border-bottom: 1px solid var(--kante);
}
.garantie__aus li:last-child { border-bottom: 0; }
/* Ein Minus statt eines Hakens: hier gilt etwas nicht. */
.garantie__aus li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 9px; height: 1px; background: var(--chrom-leise);
}
@media (max-width: 860px) {
  .garantie { grid-template-columns: 1fr; text-align: center; }
  .garantie__aus li { padding-left: 0; }
  .garantie__aus li::before { display: none; }
}

/* Porträt auf der Inhaberseite: Hochformat, deshalb schmaler als ein
   Produktbild, sonst drückt es den Text aus dem Blick. */
.material__bild--portraet img { border-radius: var(--radius); }
.material--bild:has(.material__bild--portraet) {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
}
@media (max-width: 860px) {
  .material--bild:has(.material__bild--portraet) { grid-template-columns: 1fr; }
  .material__bild--portraet { max-width: 20rem; }
}

/* Einzugsgebiet: eine Zeile je Ort mit Entfernung. Kein Raster mit zehn
   Kacheln, das wäre nur Fläche ohne Aussage. */
.ortliste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(1rem, 3vw, 2.5rem); }
.ortliste li { break-inside: avoid; }
.ortliste a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--kante);
  color: var(--chrom-hell); text-decoration: none;
  transition: color var(--schnell), padding-left var(--schnell);
}
.ortliste a span {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: .75rem; color: var(--chrom-leise); white-space: nowrap;
}
.ortliste a:hover { color: var(--lila); }
.ortliste a:hover span { color: var(--chrom); }
@media (max-width: 620px) { .ortliste { columns: 1; } }

/* Orte mit eigener Seite sind Chips, die man anklicken kann. Die Fahrzeit
   steht daneben, damit der Chip etwas sagt und nicht nur einen Namen nennt. */
.gebiet li:has(a) { padding: 0; border-color: var(--kante); }
.gebiet li a {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .6rem 1rem; border-radius: var(--rund-chip);
  color: inherit; text-decoration: none;
  transition: background var(--schnell), border-color var(--schnell);
}
.gebiet li:has(a):hover { border-color: var(--kante-hell); background: var(--lack-hoch); }
.gebiet li:has(a):hover b { color: var(--lila); }
.gebiet li a span { color: var(--chrom-leise); font-size: .75rem; }

/* --- Die Weiche -----------------------------------------------------------
   Lack oder Technik, die erste Entscheidung auf der Seite. Zwei große Flächen
   statt zwei Kacheln: wer wegen eines Ölwechsels kommt, soll das sofort sehen
   und nicht erst an Politurbildern vorbeiscrollen.

   Zur Bewegung: alles auf dieser Karte läuft mit derselben Dauer und derselben
   Kurve (--ruhig), wie die Stufenkarten bei der Keramik. Vorher liefen Bild,
   Karte und Liste mit 900, 420 und 300 Millisekunden nebeneinander her, und
   genau das liest sich als Ruckeln. Dinge, die zusammen gehören, müssen auch
   zusammen ankommen. */
.weiche {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.weiche__seite {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  min-height: clamp(20rem, 34vw, 27rem);
  border: 1px solid var(--kante); border-radius: var(--rund-gross);
  background: var(--lack-karte);
  transition: border-color var(--ruhig), transform var(--ruhig);
}
.weiche__seite:hover { border-color: var(--kante-hell); transform: translateY(-3px); }

/* Das Bild liegt hinten und bleibt zurückhaltend. Es soll die Fläche füllen,
   nicht vom Text ablenken. */
.weiche__bild { position: absolute; inset: 0; z-index: -2; }
.weiche__bild img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .28; transform: scale(1.04);
  transition: opacity var(--ruhig), transform var(--ruhig);
}
.weiche__seite:hover .weiche__bild img { opacity: .4; transform: scale(1); }
.weiche__bild::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,9,11,.96) 24%, rgba(8,9,11,.62) 68%, rgba(8,9,11,.4));
}

.weiche__innen {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .45rem; height: 100%;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  justify-content: flex-end;
}
.weiche__innen h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: .1rem 0 0; }

/* Der Inhalt sitzt unten, und die beiden Karten tragen unterschiedlich viel
   Text: "Service und Wartung" ist eine Zeile, "Aufbereitung und Pflege" sind
   zwei. Ohne feste Höhen rutscht die kürzere Karte nach unten weg, und zwei
   Dinge, die nebeneinander zur Wahl stehen, stehen dann nicht auf einer Linie.
   Die Zeile als Einheit (lh) reserviert genau so viel Platz, wie die längere
   Fassung braucht, ohne geratene Pixelwerte. Nur am Doppelsatz nötig, unter
   861px steht ohnehin eine Karte unter der anderen. */
@media (min-width: 861px) {
  .weiche__innen h3 { min-height: 2lh; }
  .weiche__innen > p { min-height: 4lh; }
}
.weiche__preis {
  font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 700;
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--funke);
}
.weiche__innen p { font-size: .9375rem; color: var(--chrom); max-width: 34ch; }

.weiche__liste {
  list-style: none; margin: 0; padding: .55rem 0 0; width: 100%;
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
}
.weiche__liste li {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: .75rem; letter-spacing: .06em;
  color: var(--chrom-hell);
  border: 1px solid var(--kante); border-radius: var(--rund-chip);
  padding: .4rem .7rem; background: rgba(8,9,11,.55);
}
.weiche .vkarte__mehr { margin-top: .7rem; transition: color var(--ruhig); }
.weiche__seite:hover .vkarte__mehr { color: var(--lila); }

/* Aufklappen über die Zeilenhöhe des Rasters, nicht über eine geratene
   Maximalhöhe. 0fr auf 1fr läuft auf die tatsächliche Höhe des Inhalts, hört
   also genau dann auf, wenn er ganz da ist. */
@media (hover: hover) and (pointer: fine) {
  .weiche__auf {
    display: grid; grid-template-rows: 0fr; width: 100%;
    transition: grid-template-rows var(--ruhig);
  }
  .weiche__auf > * { overflow: hidden; min-height: 0; }
  .weiche__auf .weiche__liste {
    opacity: 0;
    transition: opacity var(--ruhig);
  }
  .weiche__seite:hover .weiche__auf,
  .weiche__seite:focus-visible .weiche__auf { grid-template-rows: 1fr; }
  .weiche__seite:hover .weiche__liste,
  .weiche__seite:focus-visible .weiche__liste { opacity: 1; }
}

@media (max-width: 760px) {
  .weiche { grid-template-columns: 1fr; }
  .weiche__seite { min-height: 17rem; }
}
@media (prefers-reduced-motion: reduce) {
  .weiche__seite, .weiche__bild img, .weiche__auf, .weiche__liste,
  .weiche .vkarte__mehr { transition: none; }
}

/* --- Trefferflächen -------------------------------------------------------
   Gemessen am 22.09.2026: Ortskacheln 38 Pixel hoch, Ortsverweise in der
   Fußzeile 16. Das Mindestmaß für eine sichere Berührung sind 44. Die Schrift
   bleibt gleich, nur die Fläche wächst. */
.gebiet li a { padding-block: .85rem; }
/* Listenverweise in der Fußzeile auf volle 44 Pixel. Feste Mindesthöhe statt
   Polsterung, sonst hängt das Maß an der Zeilenhöhe der jeweiligen Zeile.
   Verweise mitten im Fließtext bleiben, wie sie sind: dort würde eine
   vergrößerte Fläche den Satz auseinanderreißen, und dafür gibt es in den
   Richtlinien ausdrücklich eine Ausnahme. */
.fuss ul a {
  display: flex; align-items: center;
  min-height: 44px;
}
.fuss ul li { line-height: 1.25; }

/* Der definierende Satz unter der Wortmarke. Ruhig gesetzt, er ist die
   Antwort auf "Was ist das hier", nicht die Überschrift. */
.hero__wer {
  font-size: .875rem; line-height: 1.55;
  color: var(--chrom-leise);
  max-width: 46ch; margin-top: .9rem;
}
@media (max-width: 1000px) { .hero__wer { margin-inline: auto; } }

/* --- Überschriften sofort lesbar (09.10.2026) ------------------------------
   Der Chrom-Lauf durch jedes Wort ließ Überschriften beim schnellen Scrollen
   halb leer aussehen. Jetzt stehen sie sofort hell da, nur das leise
   Ankommen bleibt. Der Glanz auf der Wortmarke oben ist davon unberührt. */
.js .wort-auf.da .wort { animation: none; background: none; color: var(--chrom-hell); }