/* Ausgelagert am 2026-10-03 aus konzept-e-rundgang.html (dort bis dahin als <style>), fuer die
   Content-Security-Policy des Bauplatzes (style-src 'self'). Inhalt unveraendert. */
/* KONZEPT E "DER RUNDGANG". Konzept: Vault 03 Projekte/Köllner-Website/Konzept-Rundgang.md.
   Scrollen heißt, einmal um den Wagen zu gehen. Die Kamera hält an drei Stationen.
   Die Bildfolge kommt in der Vorschau aus einem KI-Clip (nur intern, geht nie live),
   im Finale aus einem echten Video des folierten Kundenwagens.

   Zwei Zustände:
   - RUHE (Grundzustand, ohne JavaScript, bei reduzierter Bewegung, im Datensparmodus):
     Ankunftsbild, darunter die drei Stationen als normale Abschnitte mit eigenem Standbild.
   - LAUF (html.laeuft, setzt das Skript unten): Die Bühne klebt, die Seite scrollt
     darunter weg, das Skript zeichnet je Scrollposition das passende Bild.
   Bewegt werden nur Bildwechsel im Canvas, opacity und transform. */

:root {
  --kopf-hoehe: 325px;
  --kopf-klein: 92px;   /* Kopf nach dem Rundgang (Marco 2026-10-09, „Kopf schrumpft + Bilder“) */
  --rand: clamp(16px, 3.4vw, 48px);
}

/* Sprungziele nicht unter der Kopfleiste verstecken. Hinter dem Rundgang ist der Kopf klein
   (html.kopf-klein, setzt das Skript), dort zählt seine kleine Höhe. */
section[id] { scroll-margin-top: var(--kopf-klein); }
#rundgang { scroll-margin-top: var(--kopf-hoehe); }
/* „Nicht nur Autos“: Der Innenabstand oben verschwindet beim Sprung unter dem Kopf, damit
   Überschrift und Kacheln zusammen ins Fenster passen. */
#weiter { scroll-margin-top: calc(var(--kopf-klein) - var(--sp-8) + var(--sp-5)); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink-1); color: var(--paper-0); padding: var(--sp-3) var(--sp-5); font-weight: 600; text-decoration: none; }
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* KOPFLEISTE, wie in Konzept D abgenommen: Siegel links, zwei Wege zur Anfrage rechts. */
/* Fest statt klebend, mit Platzhalter im body: Schrumpft der Kopf, bleibt der Inhalt darunter
   stehen. Klebend im Seitenfluss rutschte beim Schrumpfen alles nach oben. */
body { padding-top: var(--kopf-hoehe); }
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-inline: var(--rand);
  background: var(--paper-0);
  border-bottom: 1px solid var(--line-1);
}
.siegel { position: relative; display: block; height: 295px; aspect-ratio: 525.73 / 340; color: var(--ink-1); }
.siegel svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.siegel .hof { stroke: var(--paper-0); stroke-width: 9px; paint-order: stroke; stroke-linejoin: round; }
/* Der Ring dreht mit dem Kamerawinkel, gesetzt vom Skript als --winkel. */
.siegel .dreh { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(var(--winkel, 0deg)); }
.kopf-wege { display: flex; gap: var(--sp-3); }
.kopf .btn { padding: var(--sp-3) var(--sp-5); font-size: 1.05rem; }

/* 13. FOLIENMARKEN als LAUFBAND (Wunsch Matthias 2026-09-18, Reihenfolge von ihm; Marco hebt das
   Laufband-Verbot für diese Leiste auf, siehe Entscheidungen). Im Kopf zwischen Siegel und Knöpfen ab
   1280 px, darunter als Band nach dem Rundgang (bei 1024 px blieben im Kopf nur 135 px, also 1–2 Logos). Einfarbig hell (eigene Fassungen *-hell in
   bilder/marken), damit keine Herstellerfarbe mit dem Siegel konkurriert. Die Höhen sind je Marke optisch
   angeglichen, nicht rechnerisch gleich. Zwei gleiche Listen laufen je um ihre eigene Breite, dadurch
   nahtlos; die zweite ist für Screenreader ausgeblendet. Pause beim Überfahren, still bei reduzierter
   Bewegung (WCAG 2.2.2). Bewegung über translate, nicht transform. */
.marken-band {
  display: flex; overflow: hidden; min-width: 0; opacity: 0.78;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marken { flex: none; display: flex; align-items: center; gap: var(--sp-6); margin: 0; padding: 0 var(--sp-6) 0 0; list-style: none; }
.marken li { flex: none; }
.marken img { display: block; width: auto; height: var(--h, 26px); }
.marken .m-xpel { --h: 22px; }
.marken .m-3m { --h: 26px; }
.marken .m-avery { --h: 30px; }
.marken .m-orafol { --h: 30px; }
.marken .m-brux { --h: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .marken { animation: marken-laufen 28s linear infinite; }
  @keyframes marken-laufen { from { translate: 0 0; } to { translate: -100% 0; } }
}
@media (hover: hover) { .marken-band:hover .marken { animation-play-state: paused; } }
.kopf .marken-band { flex: 1 1 auto; }
/* Logos und Knöpfe auf die Mitte der Wortmarke „DIE-FOLIENTUNER.DE“, nicht auf die Siegelmitte
   (Marco 2026-09-18). Gemessen: Wortmarke Mitte 150,5 px, Kopfmitte 162 px, also 11,5 px höher;
   23 px Rand unten verschieben bei align-items:center um die Hälfte. Gilt, solange das Siegel 295 px hoch ist. */
.kopf .marken-band, .kopf-wege { margin-bottom: 23px; }

/* KLEINER KOPF hinter dem Rundgang: nur ein kleines Siegel, beim Zurückscrollen in den Rundgang
   wieder groß. Der Ring dreht unverändert weiter. Ruhiger Übergang, bei reduzierter Bewegung sofort. */
html.kopf-klein .kopf { height: var(--kopf-klein); }
html.kopf-klein .siegel { height: calc(var(--kopf-klein) - 14px); }
html.kopf-klein .kopf .marken-band, html.kopf-klein .kopf-wege { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kopf, .siegel, .kopf .marken-band, .kopf-wege { transition: height 0.45s var(--ease-out), margin-bottom 0.45s var(--ease-out); }
}
.marken-reihe { display: none; }
@media (max-width: 1279px) {
  .kopf .marken-band { display: none; }
  .marken-reihe { display: block; border-top: 1px solid var(--line-1); padding: var(--sp-6) 0; }
}
/* Tablet hochkant: Siegel (456 px breit) und beide Knöpfe passen erst ab 860 px nebeneinander. Bis dahin Knöpfe untereinander, im kleinen Kopf wieder nebeneinander. */
@media (min-width: 761px) and (max-width: 859px) and (min-height: 521px) {
  html:not(.kopf-klein) .kopf-wege { flex-direction: column; align-items: stretch; }
  html:not(.kopf-klein) .kopf-wege .btn { justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------------------------
   RUHE: der vollständige Zustand ohne Bewegung.
   --------------------------------------------------------------------------- */
.rundgang { position: relative; }
.buehne { position: relative; }
.bild { position: relative; background: #151516; }
.bild img, .bild canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.bild canvas { display: none; position: absolute; inset: 0; }
.beispiel {
  position: absolute; right: var(--rand); top: var(--sp-3); z-index: 3;
  font-size: 0.82rem; color: var(--paper-0);
  background: var(--ink-1); padding: var(--sp-1) var(--sp-3);
}

.ankunft { padding: var(--sp-5) var(--rand) var(--sp-6); display: grid; gap: var(--sp-5); justify-items: start; }
h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.7rem, 5.2vw, 5.4rem);
  line-height: 1.08; text-transform: uppercase;
}
.fakten { margin: 0; font-size: 1.14rem; font-weight: 500; color: var(--ink-2); }
.ganz { white-space: nowrap; }
.xpel-beleg { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 4px; }
@media (hover: hover) { .xpel-beleg:hover { color: var(--ink-1); text-decoration-color: var(--ink-1); } }
.xpel-beleg:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
.hinweis { margin: 0; color: var(--ink-3); font-size: 0.98rem; }
/* Bewertungszeile und Satz gegen Unsicherheit im ersten Bildschirm (vier Prüfungen 2026-10-08,
   Go Marco 13:30Z). Die Zeile führt zum Google-Profil, damit der Beleg prüfbar ist. */
.bewertung {
  display: inline-block;
  margin-top: calc(-1 * var(--sp-2));
  color: var(--ink-2); font-size: 1rem; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 4px;
}
/* Sterne (Wahl Marco 2026-10-08, Entwurf „Sterne mit Glanz“, ohne Hochzählen): ein SVG, die fünf
   Sternformen sind der Zuschnitt. Darin je Stern ein Füllrechteck, das fünfte nur 80 % der Sternbreite
   (4,8 von 5), darüber der Glanzstreifen; obenauf die fünf Umrisse, damit die leere Spitze sichtbar bleibt.
   Farben nur über Tokens, damit beide Modi stimmen. Bewegung nur im Auftakt, siehe unten. */
.bewertung .sterne { display: inline-block; width: 7em; height: 1.25em; margin-right: 0.4em; vertical-align: -0.25em; overflow: visible; }
.bewertung .fuell { fill: var(--stern-gelb); transform-box: fill-box; transform-origin: left center; }
.bewertung .umriss use { fill: none; stroke: var(--stern-gelb); stroke-width: 1.1; stroke-linejoin: round; }
.bewertung .glanz { transform: translateX(-60px); }
.bewertung .glanz-mitte { stop-color: var(--stern-glanz); }
.bewertung .glanz-rand { stop-color: var(--stern-glanz); stop-opacity: 0; }
@media (hover: hover) { .bewertung:hover { color: var(--ink-1); text-decoration-color: var(--ink-1); } }
.bewertung:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
.zusage { margin: calc(-1 * var(--sp-2)) 0 0; color: var(--ink-2); font-size: 0.98rem; }
/* Rahmen ohne Füllung: deutlich als Schaltfläche erkennbar, ohne mit „Termin anfragen“ zu konkurrieren
   (Wunsch Matthias 2026-09-17: „deutlicher erkennbar“, Text „Fahrzeugrundgang überspringen“). */
.ueberspringen {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-1); font-size: 0.98rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--ink-3);
  transition: border-color 0.25s ease;
}
@media (hover: hover) { .ueberspringen:hover { border-color: var(--ink-1); } }
.ueberspringen:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }

.stationen { list-style: none; margin: 0; padding: 0; }
.station { border-top: 1px solid var(--line-1); }
.station-rahmen { position: relative; }
.station-bild { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #151516; }
.station-text { padding: var(--sp-5) var(--rand) var(--sp-6); max-width: 46rem; }
.station h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.3rem, 4vw, 3.8rem); line-height: 1.08; text-transform: uppercase;
}
.station p { margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: 1.08rem; }
.station a { font-weight: 600; }
/* Wunsch Matthias Nr. 1 (Bauplatz 03.10.): Der Weiter-Link der Station als Akzentknopf, damit klar ist, dass man klicken kann. */
.station .station-knopf { font-weight: 700; white-space: normal; max-width: 100%; }   /* 360 px: „Zum Lackschutzzentrum“ stünde sonst über */
.stationsnav { display: none; }

/* NICHT AM AUTO: ruhig, Bento für genau diesen einen Abschnitt. */
.mehr { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto; }
.mehr > h2, .stimmen h2, .anfrage h2 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.08; text-transform: uppercase;
}
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.bento li { display: grid; align-content: start; gap: var(--sp-3); }
/* Wunsch Matthias 2026-09-18: Bilder kleiner und schwarz-weiß. Querformat 3:2 statt quadratisch, Breite
   bleibt (sonst Lücke neben zwei Kacheln); Graustufen per Filter, die Fotodateien bleiben farbig.
   Gemessen Bildhöhe vorher/nachher: 1440 px 654/436, 1024 px 459/306, 375 px 341/227. */
.bento img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); }
/* Marco 2026-10-09: Überschrift und beide Kacheln sollen ganz ins Fenster passen. Das Bild wird
   deshalb an der Fensterhöhe begrenzt (Rest: kleiner Kopf, Überschrift, Kacheltext, rund 470 px),
   nie flacher als 200 px. Am Handy stehen die Kacheln untereinander, dort bleibt 3:2. */
@media (min-width: 761px) {
  .bento img, .bento .kachelfilm { max-height: max(200px, calc(100svh - var(--kopf-klein) - 470px)); }
}
/* LICHTTUNNEL-FILM auf „Flotte und Beschriftung“ (Marco 2026-10-09): liegt deckungsgleich über dem
   Bild (gleiche Zelle, gleiches Maß, gleicher Ausschnitt), unsichtbar bis er wirklich spielt. Graustufe
   und Farbe wie beim Bild. Ohne Skript und bei reduzierter Bewegung bekommt er nie eine Quelle. */
.bento img { grid-area: 1 / 1; }
.bento .kachelfilm {
  grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(1); opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease, filter 0.6s var(--ease-out);
}
.bento .kachelfilm.an { opacity: 1; }
/* Ganzer Tunnel statt Ausschnitt (Marco 2026-10-09: „man sieht die erste lichtleiste oben gar nicht!“):
   Film und Standbild sind 4:3, die Kachel flacher. Beide stehen deshalb in voller Höhe des Bildfelds als
   4:3 mittig auf Schwarz, die Seiten laufen weich aus wie oben auf der Flottenseite (der Bildrand ist
   nicht schwarz). Bildfeld-Höhe = Breite × 2/3, am Desktop begrenzt wie die anderen Kachelbilder. */
.kachel-tunnel { container-type: inline-size; }
.kachel-tunnel .tunnel-grund { grid-area: 1 / 1; background: #000; }
.kachel-tunnel img, .kachel-tunnel .kachelfilm {
  --feld: calc(100cqw * 2 / 3);
  justify-self: center; width: auto; max-width: 100%; height: var(--feld); max-height: none; aspect-ratio: 4 / 3;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97.5%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97.5%, transparent);
}
@media (min-width: 761px) {
  .kachel-tunnel img, .kachel-tunnel .kachelfilm { --feld: min(100cqw * 2 / 3, max(200px, 100svh - var(--kopf-klein) - 470px)); }
}
/* Ruhebild „Licht aus“ (Marco 2026-10-09, „Beim Ankommen“): liegt über dem hellen Standbild, sichtbar nur,
   wenn das Skript den Film freigibt (.licht-modus). Ohne Skript, bei reduzierter Bewegung oder wenn der
   Film nicht spielen kann, bleibt das helle Standbild. Der Film liegt darüber und endet hell. */
.kachel-tunnel .licht-aus { opacity: 0; transition: opacity 0.35s ease, filter 0.6s var(--ease-out); }
.kachel-tunnel.licht-modus .licht-aus { opacity: 1; }
@media (hover: hover) { .bento li:hover .kachelfilm { filter: none; } }
@media (hover: none) { .bento li:active .kachelfilm { filter: none; } }
.bento h3 { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.bento p { margin: 0; color: var(--ink-2); }
.bildzeile { margin: 0; color: var(--ink-3); font-size: 0.92rem; }
.mehr-link a { color: var(--ink-1); font-weight: 600; text-underline-offset: 3px; }   /* Link zur Leistungsseite (2026-09-25) */

/* BEWERTUNGEN: statisches HTML, kein Widget (Entscheidung 2026-09-15). Zahlen stehen still,
   kein Hochzählen: der Teil nach dem Rundgang bleibt ruhig. */
.stimmen, .meilensteine { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto; }
/* Zweispaltig: links die Zahl, rechts die Zitate untereinander (Entscheidung 2026-09-15). */
.stimmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.stimmen h2 { margin-bottom: var(--sp-3); }
.stimmen h2 .note { display: block; font-size: clamp(4.2rem, 8vw, 7.5rem); line-height: 0.85; }
/* „Big Shoulders Display“ kennt KEINE gleich breiten Ziffern (tabular-nums bleibt wirkungslos,
   gemessen 2026-09-17: „1,1“ 92 px gegen „4,8“ 145,5 px). Deshalb steht hier fest der Platz für
   den breitesten Zwischenwert „4,5“: gemessen 1,277 em, an sechs Fensterbreiten von 320 bis
   1920 px identisch (die Schriftgröße ändert sich, das Verhältnis nicht). In em statt in Pixeln,
   damit kein Skript nachmessen und nichts nachträglich springen muss. */
.stimmen h2 .zaehler { display: inline-block; min-width: 1.28em; text-align: left; font-variant-numeric: tabular-nums; }
.stimmen h2 .rest { display: block; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1; margin-top: clamp(20px, 2vw, 36px); } /* Das Komma in "4,8" reicht 0,14 em unter die Grundlinie; mit 8 px stieß es an diese Zeile (Rückmeldung 2026-09-16). */
.stimmen .neben { margin: 0; color: var(--ink-2); font-size: 1.08rem; }
.stimmen .neben a { color: var(--ink-1); }
.stimmen .gezaehlt { display: block; color: var(--ink-3); font-size: 0.92rem; margin-top: var(--sp-1); }
.zitate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.zitate li { border-top: 2px solid var(--line-2); padding-top: var(--sp-4); }
.zitate blockquote { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.05; text-transform: uppercase; }
.zitate p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
.zitate a { color: var(--ink-2); }

/* MEILENSTEINE: Leiste mit elf Stationen in Zweijahresschritten 2006–2026 (Wunsch Matthias,
   2026-09-23), mobil senkrecht. Belegt ist nur 2006, der Rest ist sichtbar als Platzhalter
   gekennzeichnet (Entscheidung 2026-09-15). Je Station ein quadratischer Bildplatz; welches Foto
   hineinkommt, steht in bilder/manifest-meilensteine.md. */
.meilensteine > h2 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.08; text-transform: uppercase;
}
.leiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, 1fr); gap: var(--sp-3); position: relative; }
.leiste::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line-1); }
.leiste li { position: relative; padding-top: var(--sp-5); display: grid; align-content: start; gap: var(--sp-2); }
.leiste li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; background: var(--ink-1); }
.leiste .mfoto {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border: 2px dashed var(--ink-3); color: var(--ink-3); font-size: 0.85rem; text-align: center;
}
.leiste .mfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leiste .mfoto:has(img) { border: 0; }
.leiste .jahr { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 1.7vw, 2rem); line-height: 1; }
.leiste .was { color: var(--ink-2); font-size: 0.95rem; }
/* box-sizing ausdrücklich: tokens.css?v=3cf1ae5ae0 setzt border-box nur für `*`, Pseudo-Elemente erben das nicht.
   Ohne diese Zeile war das gestrichelte Kästchen 20 statt 16 px und saß 2 px zu tief und zu weit
   rechts neben der Linie (Marco 2026-10-08 per Bildschirmfoto; gemessen content-box 16 + 2×2). */
.leiste li::before, .leiste li::after { box-sizing: border-box; }
/* Kästchen offener Stationen sind im Ruhezustand voll wie 2006 (Marco 2026-10-08: gestrichelt wirkte
   unfertig; Füllen beim Ankommen der Linie probiert und verworfen, „gleich befüllt sieht besser aus“).
   Die Lücke zeigt allein der Platzhaltertext. */
.leiste li.offen .jahr, .leiste li.offen .was { color: var(--ink-3); }

/* HÄUFIGE FRAGEN: Wunsch Matthias 2026-09-18. Aufklappen per details/summary, geht ohne Skript.
   Fakten, die nur Matthias kennt, stehen als gestrichelt umrandete Lücke da wie bei den Meilensteinen.
   Keine Preise, auch kein Einstiegspreis (Entscheidung 2026-09-18). */
.fragen { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto; }
.fragen > h2 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.08; text-transform: uppercase;
}
.fragen-liste { max-width: 62rem; border-bottom: 2px solid var(--line-2); }
.fragen details { border-top: 2px solid var(--line-2); }
.fragen summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.05; text-transform: uppercase;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; font-size: 1.4em; line-height: 1; transition: rotate 0.3s var(--ease-out); }
.fragen details[open] summary::after { rotate: 45deg; }
.fragen summary:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
.fragen details p { margin: 0 0 var(--sp-5); max-width: 60ch; color: var(--ink-2); font-size: 1.08rem; }
.fragen details a { color: var(--ink-1); }
.fragen .luecke { display: inline-block; margin-top: var(--sp-2); padding: 2px var(--sp-2); border: 2px dashed var(--pruefstelle); color: var(--ink-3); }
.anruf .zu-fragen { margin-top: var(--sp-2); }

/* ANFRAGE: zweistufig. Erst die Kachel, dann die passenden Freitextfelder.
   Weich filternd: Hinweissatz statt Absende-Verbot (Entscheidung 2026-09-11). Anruf gleichwertig daneben. */
.anfrage { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.anfrage h2 { margin: 0 0 var(--sp-4); grid-column: 1 / -1; }
/* Zweispaltig steht der Anruf-Kasten ab der Überschrift rechts, nicht erst ab dem Formular: sonst hing er
   98 px unter dem Hinweistext links (Marco 2026-09-18). Einspaltig (≤ 1100 px) gilt weiter die Reihenfolge unten. */
@media (min-width: 1101px) {
  .anfrage h2 { grid-column: 1; grid-row: 1; }
  .anfrage-form { grid-column: 1; grid-row: 2; }
  .anruf { grid-column: 2; grid-row: 1 / span 2; }
}
.anfrage-form { display: grid; gap: var(--sp-5); }
.anfrage fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.anfrage legend { padding: 0; margin-bottom: var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.kacheln { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.kachel { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; flex: 1 1 auto; min-height: 56px; padding: var(--sp-3) var(--sp-4); border: 2px solid var(--line-1); cursor: pointer; font-weight: 600; font-size: 0.96rem; line-height: 1.2; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kachel:hover { border-color: var(--ink-2); }
.kachel:has(input:checked) { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }
.kachel:has(input:focus-visible) { outline: 3px solid var(--ink-1); outline-offset: 3px; }
/* Passen die fünf Kacheln nicht in eine Reihe (Formular unter 760 px, z. B. Tablet hochkant oder Laptop 1280 px): drei oben, zwei unten statt „Flotte“ allein über die volle Breite. Das Handy behält zwei pro Reihe. */
.anfrage-form { container: anfrage / inline-size; }
@container anfrage (min-width: 556px) and (max-width: 759px) {
  .kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kachel { grid-column: span 2; }
  .kachel:nth-child(n+4) { grid-column: span 3; }
}
/* Handy: zwei pro Reihe, die fünfte Kachel gleich breit und mittig statt über die volle Breite. */
@container anfrage (max-width: 555px) {
  .kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kachel { grid-column: span 2; }
  .kachel:nth-child(5) { grid-column: 2 / span 2; }
}
.spezialisierung { margin: var(--sp-2) 0 0; color: var(--ink-3); font-size: 0.92rem; max-width: 60ch; }

.feldgruppe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.feld { display: grid; gap: var(--sp-2); }
.feld.breit { grid-column: 1 / -1; }
.feld label { font-weight: 600; font-size: 0.98rem; }
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; color: var(--ink-1);
  background: var(--paper-1); border: 1px solid var(--line-1); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-3);
}
.feld textarea { min-height: 8.5rem; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 1px; border-color: var(--ink-1); }
.feld .zusatz { color: var(--ink-3); font-size: 0.92rem; font-weight: 400; }
.feld ::placeholder { color: var(--ink-3); opacity: 1; }   /* Browser-Vorgabe lag bei 3,7:1, ink-3 bei 4,9:1 */
.feldgruppe[data-fuer] { margin: 0; padding: 0; border: 0; min-width: 0; }
/* Fotos bei der Fahrzeugfolierung (anfrage.js?v=c0c7330a59 verkleinert und schickt sie). .feld setzt display:grid und
   höbe hidden sonst auf; ohne Skript bleibt das Feld so verborgen. */
.feld.anfrage-fotos[hidden], .foto-liste[hidden] { display: none; }
/* Hinweis bei Komplettfolierung (anfrage.js?v=c0c7330a59), volle Breite unter Fahrzeug und Umfang. */
.komplett-hinweis { grid-column: 1 / -1; margin: 0; max-width: 70ch; color: var(--ink-2); font-size: 0.92rem; }
.komplett-hinweis strong { color: var(--ink-1); }
.feld .feld-titel { font-weight: 600; font-size: 0.98rem; }
.feld .feld-hinweis { margin: 0; color: var(--ink-3); font-size: 0.92rem; max-width: 60ch; }
.foto-datei { display: none; }
.foto-liste { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.foto-liste li { position: relative; }
.foto-liste canvas { display: block; width: 88px; height: 88px; object-fit: cover; border: 1px solid var(--line-1); border-radius: var(--r); }
.foto-weg { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 2px solid var(--paper-0); border-radius: 50%; background: var(--ink-1); color: var(--paper-0); font: 700 1.25rem/1 system-ui, sans-serif; cursor: pointer; }
.foto-weg:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 2px; }
.foto-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.foto-knopf { padding: var(--sp-3) var(--sp-4); font-size: 1rem; }
.foto-knopf:disabled, .foto-knopf:disabled:hover { opacity: 0.45; cursor: default; background: transparent; color: var(--ink-1); }
.foto-meldung { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.foto-meldung:empty { display: none; }
@media (max-width: 760px) {
  .foto-liste canvas { width: 68px; height: 68px; }   /* vier nebeneinander ab 360 px Breite (320 px Inhalt) */
}

/* Stufe 2 erscheint erst nach der Wahl. display:none nimmt verborgene Felder auch aus der Tab-Reihenfolge. */
.stufe-2, .nur-fuer { display: none; }
.anfrage-form:has(input[name="leistung"]:checked) .stufe-2 { display: grid; gap: var(--sp-5); }
.anfrage-form:has(#l-folierung:checked) [data-fuer="folierung"],
.anfrage-form:has(#l-toenung:checked) [data-fuer="toenung"],
.anfrage-form:has(#l-gebaeude:checked) [data-fuer="gebaeude"],
.anfrage-form:has(#l-flotte:checked) [data-fuer="flotte"] { display: grid; }
/* Lackschutz fragt man im Lackschutzzentrum an (Entscheidung Matthias 2026-09-16): statt Stufe 2 nur der Verweis. */
.lackschutz-hinweis { display: none; gap: var(--sp-4); justify-items: start; padding: var(--sp-5); border: 2px solid var(--ink-1); }
.lackschutz-hinweis p { margin: 0; font-size: 1.05rem; max-width: 60ch; }
/* .btn bricht sonst nicht um; mobil schob der Knopf die Seite auf 457 px Breite (gemessen 2026-09-16). */
.lackschutz-hinweis .btn { white-space: normal; max-width: 100%; }
@media (max-width: 760px) {
  .lackschutz-hinweis { padding: var(--sp-4); }
  .lackschutz-hinweis .btn { padding-inline: var(--sp-4); }
}
.anfrage-form:has(#l-lackschutz:checked) .stufe-2 { display: none; }
.anfrage-form:has(#l-lackschutz:checked) .lackschutz-hinweis { display: grid; }
/* Rückfall für Browser ohne :has(): alle Felder stehen offen da, nichts bleibt unbedienbar.
   Das Skript blendet dann per hidden um und sperrt das Absenden bei Lackschutz. */
@supports not selector(:has(*)) {
  .stufe-2, .nur-fuer, .lackschutz-hinweis { display: grid; gap: var(--sp-5); }
  .stufe-2[hidden], .lackschutz-hinweis[hidden] { display: none; }
}
.absenden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.meldung { margin: 0; color: var(--ink-2); }

.anruf { border: 2px solid var(--line-2); padding: var(--sp-5); display: grid; gap: var(--sp-3); justify-items: start; }
.anruf h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.anruf p { margin: 0; color: var(--ink-2); }
.anruf p a, .fuss .ganz { white-space: nowrap; }
.anruf .nummer { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; text-decoration: none; color: var(--ink-1); white-space: nowrap; }
.anruf .erreichbar { max-width: 34rem; }
.anruf .nummer:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }

/* WEICHES EINBLENDEN: nur per CSS-Zeitleiste, kein Skript. Ohne Unterstützung oder bei
   reduzierter Bewegung steht der Endzustand sofort da. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .einblenden { animation: einblenden linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes einblenden { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}

@media (max-width: 1100px) {
  .anfrage { grid-template-columns: 1fr; }
  /* Einspaltig steht der Anruf vor dem Formular, sonst wäre er erst nach dem letzten Feld gleichwertig. */
  .anfrage h2 { order: -2; }
  .anruf { order: -1; }
  .stimmen { grid-template-columns: 1fr; gap: var(--sp-6); }
  .zitate { gap: var(--sp-5); }
  .zitate blockquote { max-width: 30ch; }
  /* Unter 1100 px wird die Leiste senkrecht: Linie links, Stationen untereinander. */
  .leiste { grid-template-columns: 1fr; gap: var(--sp-5); padding-left: var(--sp-6); }
  .leiste::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  /* Bildplatz links, daneben Jahr und Text. */
  .leiste li { padding-top: 0; grid-template-columns: 6rem 6.5rem 1fr; align-items: center; gap: var(--sp-4); }
  .leiste li::before { left: calc(-1 * var(--sp-6)); top: calc(3rem - 8px); }
  .leiste .jahr { font-size: clamp(2rem, 4vw, 2.6rem); }
}

/* FUSS: dunkel, einzeilig, nicht dreispaltig. Hinweis auf Wild Banana AI erlaubt (2026-09-14). */
.fuss { background: var(--paper-1); border-top: 1px solid var(--line-1); padding: var(--sp-5) var(--rand); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-6); font-size: 0.95rem; color: var(--ink-2); }
.fuss a { color: var(--ink-2); }
.fuss .prototyp { margin-left: auto; color: var(--ink-3); }

.leiste-mobil { display: none; }

@media (max-width: 760px) {
  :root { --kopf-hoehe: 174px; --kopf-klein: 76px; }
  #weiter { scroll-margin-top: calc(var(--kopf-klein) - var(--sp-7) + var(--sp-5)); }   /* hier padding-block sp-7 */
  .siegel { height: 162px; }
  .kopf-wege { display: none; }
  .kopf { justify-content: center; }
  .ankunft .btn, .ankunft .zusage { display: none; }
  .bento { grid-template-columns: 1fr; }
  .mehr, .stimmen, .meilensteine, .fragen, .anfrage { padding-block: var(--sp-7); }
  .kachel { flex: 1 1 40%; min-height: 52px; padding: var(--sp-3); }
  .feldgruppe { grid-template-columns: 1fr; }
  /* Schmal: Bildplatz links über zwei Zeilen, Jahr über dem Text. */
  .leiste li { grid-template-columns: 5rem 1fr; grid-template-rows: auto auto; align-content: center; column-gap: var(--sp-3); row-gap: var(--sp-1); }
  .leiste li .mfoto { grid-row: 1 / 3; }
  .leiste li .jahr { align-self: end; }
  .leiste li .was { align-self: start; }
  .leiste li::before { top: calc(2.5rem - 8px); }
  .leiste-mobil {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: var(--paper-0); border-top: 1px solid var(--line-1);
  }
  .leiste-mobil .btn { justify-content: center; padding: var(--sp-3); font-size: 1.02rem; }
  body { padding-bottom: 72px; }
  .fuss .prototyp { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   LAUF: nur wenn das Skript es freigibt.
   --------------------------------------------------------------------------- */
html.laeuft .buehne {
  position: sticky; top: var(--kopf-hoehe);
  height: calc(100dvh - var(--kopf-hoehe));
  overflow: hidden;
}
/* Das Bild wird nie angeschnitten: Bei jedem Seitenverhältnis steht der ganze Wagen da.
   Am Desktop sitzt es rechts, links bleibt die Textspalte frei. Die Ränder laufen weich
   in den Seitengrund aus, sonst stünde ein Kasten da (dieselbe Lehre wie in Konzept D). */
html.laeuft .bild {
  position: absolute; right: 0; top: 50%;
  width: min(80%, calc((100dvh - var(--kopf-hoehe)) * 0.88 * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  background: none;
}
/* Die Maske sitzt auf Bild und Canvas, nicht auf .bild: Das Schild "Beispielbild" liegt im selben
   Kasten und würde sonst mit ausgeblendet. Oben 24 % statt 8 % und rechts ab 88 % statt 94 %:
   Die Lichtdecke im KI-Clip wechselt beim Drehen Form und Helligkeit und blitzte am Rand auf
   (Rückmeldung 2026-09-16, Aufnahme 171606). */
html.laeuft .bild img, html.laeuft .bild canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 24%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 26%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 24%, #000 90%, transparent);
          mask-composite: intersect;
}
html.laeuft .bild canvas { display: block; }
html.laeuft .bild.bereit img { visibility: hidden; }
html.laeuft .beispiel { position: absolute; right: var(--rand); top: var(--sp-3); }

/* Luft unter dem Rundgang, passend zu den 128 px über den Überschriften der Abschnitte darunter
   (Rückmeldung 2026-09-16: Lackschutz-Karte klebte 58 px über der Trennlinie).
   Die Karte sitzt selbst schon 58 px über dem Bühnenboden, 80 px dazu ergibt rund 130 px. */
html.laeuft .rundgang { padding-bottom: var(--sp-7); }

html.laeuft .ankunft {
  position: absolute; left: 0; top: 0; z-index: 2;
  padding: clamp(48px, 7.5vh, 96px) var(--rand) var(--sp-5);
  gap: var(--sp-4);
  max-width: min(40rem, 48%);
  opacity: var(--ankunft, 1);
  transform: translateY(calc((1 - var(--ankunft, 1)) * -16px));
}
html.laeuft .ankunft[aria-hidden="true"] { pointer-events: none; }
html.laeuft .ankunft h1 { font-size: clamp(2.6rem, 4.2vw, 4.6rem); }
/* Desktop: oben zwischen Text und Wagen, auf Höhe der ersten Titelzeile (Skizze Matthias 2026-09-17).
   Bleibt im Ankunftsblock, damit er mit ihm ausblendet und aus der Tab-Reihenfolge fällt.
   .ankunft sitzt bei left:0 der Bühne, deshalb misst left hier ab der Bühnenkante. */
html.laeuft .ankunft .ueberspringen { position: absolute; left: 48vw; top: clamp(48px, 7.5vh, 96px); white-space: nowrap; }
/* Unter rund 1100 px stößt er an das Schild „Beispielbild“ (gemessen bei 1024: Kante an Kante),
   darunter wieder im Fluss unter dem Hinweis. */
@media (max-width: 1200px) { html.laeuft .ankunft .ueberspringen { position: static; } }
/* Flache Bildschirme ab 761 px (Laptop 1366×768, 1280×720, Tablet quer 1024×768): Mit Bewertungszeile
   und Zusage unter dem Knopf lief die Ankunft unten aus der Bühne (gemessen 2026-10-08). Dichter setzen,
   und der Scroll-Hinweis entfällt hier wie schon am Handy; „Fahrzeugrundgang überspringen“ und die
   Stationsleiste zeigen den Rundgang weiter an. */
@media (min-width: 761px) and (max-height: 860px) {
  html.laeuft .ankunft { padding-top: var(--sp-4); gap: var(--sp-3); }
  html.laeuft .ankunft .hinweis { display: none; }
  html.laeuft .ankunft .bewertung, html.laeuft .ankunft .zusage { margin-top: calc(-1 * var(--sp-1)); }
}

html.laeuft .station { border: 0; }
html.laeuft .station-rahmen { display: none; }
html.laeuft .station-text {
  position: absolute; left: var(--rand); bottom: clamp(24px, 6vh, 64px); z-index: 2;
  width: min(34rem, calc(100% - 2 * var(--rand)));
  padding: var(--sp-5);
  background: rgba(18, 18, 19, 0.78);
  border: 1px solid var(--line-1);
  opacity: var(--sichtbar, 0);
  transform: translateY(calc((1 - var(--sichtbar, 0)) * 24px));
  pointer-events: none;
}
html.laeuft .station.aktiv .station-text { pointer-events: auto; }
html.laeuft .station h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); }

/* Stationsleiste rechts unten: Namen statt Nummern (Abgrenzungsmerkmal 4). */
html.laeuft .stationsnav {
  display: flex; gap: var(--sp-5);
  position: absolute; right: var(--rand); bottom: clamp(24px, 6vh, 64px); z-index: 2;
  margin: 0; padding: 0; list-style: none;
}
.stationsnav a {
  display: block; padding: var(--sp-2) 0;
  color: var(--ink-3); text-decoration: none; font-weight: 600; font-size: 0.98rem;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.stationsnav a[aria-current="true"] { color: var(--ink-1); border-color: var(--ink-1); }
/* Wunsch Matthias Nr. 2 (Bauplatz 03.10., Entscheidung 2026-10-05 22:19): Der Link der Station,
   an der man gerade steht, wird größer, beim Weiterscrollen wieder klein. Nur ab 761 px,
   mobil ist die Leiste aus. Größe über font-size, damit die Schrift scharf bleibt. */
html.laeuft .stationsnav { align-items: flex-end; }
html.laeuft .stationsnav a[aria-current="true"] { font-size: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .stationsnav a { transition: color 0.3s ease, border-color 0.3s ease, font-size 0.35s var(--ease-out); }
}

@media (max-width: 760px) {
  html.laeuft .buehne { height: calc(100dvh - var(--kopf-hoehe) - 72px); }
  /* Mobil über die volle Breite, im freien Raum unter dem Ankunftstext gemittelt
     (Entscheidung 2026-09-15, Punkt 10): 190 Prozent Breite lässt kaum noch Schwarz
     über/unter dem Wagen; top:70% schiebt die Bildmitte unter den Text, sonst
     kollidiert die Badge mit "Seit 2006...". Die Ausblendung ist mobil schmaler. */
  html.laeuft .bild {
    width: 190%; right: -45%; top: 76%;
  }
  html.laeuft .bild img, html.laeuft .bild canvas {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 24%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 16%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 24%, #000 90%, transparent);
  }
  html.laeuft .beispiel { right: calc(24% + var(--rand)); }
  html.laeuft .rundgang { padding-bottom: var(--sp-6); }
  html.laeuft .ankunft { padding-top: var(--sp-6); max-width: none; }
  /* Schild „Beispielbild“ oben rechts an die Bühnenkante, über den Titel: weiter unten lag es auf
     „Fahrzeugrundgang überspringen“ (Prüfung 2026-10-08, mit der Bewertungszeile noch enger).
     Das Bild sitzt mit top:76 % und translateY(-50 %) in der Bühne; 50 % hier ist die halbe
     Bildhöhe, der Rest die Lage der Bildmitte in der Bühne (Bühnenhöhe wie .buehne oben). */
  html.laeuft .bild .beispiel { top: calc(50% - 0.76 * (100dvh - var(--kopf-hoehe) - 72px) + var(--sp-3)); }
  .bewertung { font-size: 0.92rem; }
  .bewertung .sterne { width: 5.6em; height: 1em; margin-right: 0.3em; vertical-align: -0.15em; }   /* sonst bricht die Zeile am Handy um */
  html.laeuft .ankunft h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  html.laeuft .ankunft .hinweis { display: none; }
  html.laeuft .station-text { bottom: var(--sp-4); padding: var(--sp-4); }
  html.laeuft .station p { font-size: 1rem; margin-bottom: var(--sp-3); }
  html.laeuft .stationsnav { display: none; }
}

/* ---------------------------------------------------------------------------
   EFFEKTE AUS DER MUSTERSEITE (muster-effekte.html), Einbau 2026-09-17.
   Marco hob für diese vier Effekte die Regel „keine Effekte außerhalb des Rundgangs“ auf;
   Matthias wünscht sie. Übertragen von wild-banana-ai.de nur als Bewegung: kein Gelb,
   kein Leuchtschein. Vault: Entscheidungen.md, Eintrag 2026-09-17.
   --------------------------------------------------------------------------- */

/* 1 · AUFTAKT: Wörter steigen auf, LACKSCHUTZ wird aus der Unschärfe scharf. Tempo 2,0
   (Marco: „2,0 passt“), fertig nach 2,1 s. Füllmodus backwards statt both: Nach dem Ende
   gibt die Animation transform wieder frei, sonst läge sie über dem Magnetzug am Knopf. */
h1 .wort { display: inline-block; clip-path: inset(-0.4em -0.2em 0 -0.2em); }  /* oben Luft für die Ö-Punkte */
h1 .wort > span { display: inline-block; }
.auftakt { --tempo: 2; }
.auftakt .ankunft h1 .wort:nth-child(1) > span { animation: auftakt-steigen calc(0.6s * var(--tempo)) var(--ease-out) backwards; }
.auftakt .ankunft h1 .wort:nth-child(2) > span { animation: auftakt-steigen calc(0.6s * var(--tempo)) var(--ease-out) calc(0.08s * var(--tempo)) backwards; }
.auftakt .ankunft h1 .wort:nth-child(3) > span { animation: auftakt-scharf calc(0.55s * var(--tempo)) var(--ease-out) calc(0.28s * var(--tempo)) backwards; transform-origin: left center; }
.auftakt .ankunft .fakten, .auftakt .ankunft .bewertung { animation: auftakt-nach calc(0.5s * var(--tempo)) var(--ease-out) calc(0.45s * var(--tempo)) backwards; }
.auftakt .ankunft .btn { animation: auftakt-nach calc(0.5s * var(--tempo)) var(--ease-out) calc(0.55s * var(--tempo)) backwards; }
.auftakt .ankunft .zusage, .auftakt .ankunft .hinweis, .auftakt .ankunft .ueberspringen { animation: auftakt-nach calc(0.5s * var(--tempo)) var(--ease-out) calc(0.62s * var(--tempo)) backwards; }
/* Sterne der Bewertungszeile: füllen sich nach dem Einblenden der Zeile nacheinander von links
   (0,12 s Abstand), danach läuft einmal ein Glanz darüber und verlässt die Sterne ganz, nichts bleibt
   stehen. Nur im Auftakt, also einmal beim Laden und nie bei reduzierter Bewegung (startseite-frueh.js?v=4300a72243). */
.auftakt .bewertung .fuell { animation: stern-fuellen 0.32s var(--ease-out) calc(1.25s + var(--i) * 0.12s) backwards; }
.auftakt .bewertung .glanz { animation: stern-glanz 0.7s ease-in-out 2.05s both; }
@keyframes stern-fuellen { from { transform: scaleX(0); } }
@keyframes stern-glanz { from { transform: translateX(-60px); } to { transform: translateX(150px); } }
@keyframes auftakt-steigen { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes auftakt-nach { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes auftakt-scharf {
  from { opacity: 0; transform: scale(1.06); filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* 2 · MAGNETZUG: Skript unten, nur mit Maus. Übergang weicher als in tokens.css?v=3cf1ae5ae0. */
.btn.magnet { transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out), translate 0.25s var(--ease-out); }

/* 3/5 · KACHEL-LICHT auf „Nicht nur Autos“. Klassennamen bewusst nicht .kachel: die gehören
   den Auswahlkacheln im Anfrageformular. Rand und Fleck sind getrennte Schichten: Der Rand liegt
   über dem Bild (sonst verschwände er an der Bildkante), der Fleck darunter (sonst grauschleiert
   er das Foto). */
.bento li {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--paper-1); border: 1px solid var(--line-1); border-radius: var(--r);
  padding-bottom: var(--sp-5);
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.bento li > :not(img):not(video):not(.licht-rand):not(.licht-fleck) { padding-inline: var(--sp-5); }
.bento li::before {          /* Oberkante */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--ink-1), transparent);
  opacity: 0; transition: opacity 0.35s ease;
}
.licht-rand, .licht-fleck { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.licht-rand {
  z-index: 2; inset: -1px; padding: 2px;
  background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), var(--ink-1), var(--ink-1) 33%, transparent 60%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.licht-fleck {
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--ink-1) 9%, transparent), transparent 62%);
}
.bento:hover .licht-rand, .bento:hover .licht-fleck { opacity: 1; }
:root { --kachel-schatten: 0 22px 44px -22px rgba(0, 0, 0, 0.85); }
@media (hover: hover) {
  .bento li:hover { border-color: color-mix(in srgb, var(--ink-1) 35%, var(--line-1)); transform: translateY(-4px); box-shadow: var(--kachel-schatten); }
  .bento li:hover::before { opacity: 1; }
}
@media (hover: none) {
  .bento li:active { border-color: var(--ink-1); transform: translateY(-4px); box-shadow: var(--kachel-schatten); }
  .bento li:active::before { opacity: 1; }
}
/* Farbe kehrt beim Überfahren zurück (Marco 2026-09-18, auf die schwarz-weißen Bilder oben): Der Folierer
   bringt Farbe aufs Objekt. Auf Touch beim Antippen. Bei reduzierter Bewegung sofort statt weich. */
.bento img { transition: filter 0.6s var(--ease-out); }
@media (hover: hover) { .bento li:hover img { filter: none; } }
@media (hover: none) { .bento li:active img { filter: none; } }

/* 7 · FUSS: weicher Übergang, Unterstreichung wird mit kräftiger. */
.fuss a { text-underline-offset: 3px; text-decoration-color: var(--line-1); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.fuss a:hover { color: var(--ink-1); text-decoration-color: var(--ink-1); }

/* MACHER-ZEILE „Wild Banana AI“ (Marco 2026-10-10, Fußleiste, Variante A „Leisten schalten ein“).
   Gleicher Block wie in unterseite.css, Erklärung dort. Die Startseite steht fest dunkel,
   das helle Schild greift hier nur, falls sich das einmal ändert. */
.fuss { --wbai-gold: #ffe600; }   /* Marco 2026-10-10, Fußleiste */
.fuss a.wbai {
  color: var(--wbai-gold); font-weight: 600; text-decoration: none; white-space: nowrap;
  display: inline-block; background: #0d0d0e; padding: 1px 7px 2px; border-radius: 0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fuss a.wbai { background: none; padding: 0; } }
:root[data-theme="dark"] .fuss a.wbai { background: none; padding: 0; }
.fuss a.wbai:hover { color: var(--wbai-gold); }
.fuss a.wbai:focus-visible { outline: 2px solid var(--wbai-gold); outline-offset: 3px; }
.fuss a.wbai .bs { display: inline-block; white-space: pre; text-shadow: 0 0 6px rgba(255, 230, 0, 0.25); }
.fuss a.wbai.los .bs { animation: wbai-einschalten 0.5s ease-out both; }
@keyframes wbai-einschalten {
  0% { color: #4a4636; text-shadow: none; }
  45% { color: #fff8c4; text-shadow: 0 0 10px rgba(255, 230, 0, 0.9); }
  100% { color: var(--wbai-gold); text-shadow: 0 0 6px rgba(255, 230, 0, 0.25); }
}
@media (prefers-reduced-motion: reduce) { .fuss a.wbai.los .bs { animation: none; } }

/* 8 · STIMMEN: Fokus beim Überfahren (Wunsch Matthias 2026-09-17, Marco: „go, bau a direkt“).
   Neue Ausnahme von der Regel „keine Effekte außerhalb des Rundgangs“, Vault: Entscheidungen.md.
   Die Linie über dem Zitat ist schon hell; beim Überfahren zeichnet sich darüber eine 4 px kräftige
   Linie von links, das Zitat rückt 8 px nach rechts, die anderen treten zurück.
   Deckkraft und Verschiebung sitzen auf den Kindern, nicht auf li: li trägt die Einblende-
   Animation (opacity und transform mit Füllmodus both), die jede eigene Regel dort überdecken würde.
   Verschiebung über translate, nicht transform (gleiche Falle wie beim Magnetzug, Commit 81c4070). */
.zitate li { position: relative; }
.zitate li::before {
  content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 4px;
  background: var(--ink-1); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.zitate blockquote, .zitate li > p { transition: translate 0.4s var(--ease-out), opacity 0.3s ease; }
@media (hover: hover) {
  .zitate li:hover::before { transform: scaleX(1); }
  .zitate li:hover > * { translate: 8px 0; }
  .zitate:has(li:hover) li:not(:hover) > * { opacity: 0.45; }
}
/* Tastatur: dieselbe Hervorhebung, wenn der Link im Zitat den Fokus hat. */
.zitate li:focus-within::before { transform: scaleX(1); }
.zitate li:focus-within > * { translate: 8px 0; }

/* 9 · ANFRAGEBEREICH: Leben im flachen Teil (Marco 2026-09-17: „hier müssen wir noch etwas Leben
   reinbringen“). Drei Varianten lagen auf muster-anfragebereich.html, Marcos Wahl: Kacheln nach
   A (Schalter), Anruf-Kasten nach B (Kante). Vault: Entscheidungen.md.

   9a · KACHEL-SCHALTER. Die Füllung wischt von unten hoch und nimmt vorweg, was die Auswahl
   dauerhaft tut. Der Text wechselt 0,1 s versetzt auf Papierfarbe — ohne Versatz läge er kurz
   dunkel auf dunkel. Die Auswahl bleibt die Regel aus dem Grundaufbau (Zeile 172), nur ihre
   Fläche wandert auf das ::before, damit Hover und Auswahl dieselbe Fläche benutzen. */
.kachel { isolation: isolate; overflow: hidden; }
.kachel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink-1);
  transform: scaleY(0); transform-origin: bottom center;
  transition: transform 0.32s var(--ease-out);
}
.kachel:has(input:checked) { background: transparent; }
.kachel:has(input:checked)::before { transform: scaleY(1); }
/* Einrasten sitzt auf scale und auf dem inneren span: transform gehört dem Einblenden,
   translate dem Anheben. Drei Eigenschaften, damit sich nichts gegenseitig löscht. */
.kachel:has(input:checked) .text { animation: einrasten 0.28s var(--ease-out); }
@keyframes einrasten { 0% { scale: 1; } 45% { scale: 0.94; } 100% { scale: 1; } }
@media (hover: hover) {
  .kachel { transition: color 0.2s ease 0.1s, border-color 0.3s ease, translate 0.3s var(--ease-out); }
  .kachel:hover::before { transform: scaleY(1); }
  .kachel:hover { color: var(--paper-0); border-color: var(--ink-1); translate: 0 -2px; }
}
@media (hover: none) {
  .kachel:active::before { transform: scaleY(1); }
  .kachel:active { color: var(--paper-0); border-color: var(--ink-1); }
}

/* 9b · KACHELREIHE STAFFELT EIN, eine nach der anderen von links. Zeitleiste über cover, nicht
   entry: die entry-Phase dauert nur so lange, wie das Element hoch ist — bei einer 56-px-Kachel
   56 px Scrollweg, darin bleibt jeder Versatz unsichtbar (auf der Musterseite gemessen: die ganze
   Reihe sprang innerhalb von 60 px gleichzeitig auf). cover rechnet mit Viewporthöhe plus
   Elementhöhe und beginnt genau dann, wenn die Kachel unten auftaucht. Kein Skript, wie beim
   Einblenden weiter oben (Zeile 226). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kacheln .kachel { animation: einblenden linear both; animation-timeline: view(); }
    .kacheln .kachel:nth-child(1) { animation-range: cover 0%   cover 6.5%; }
    .kacheln .kachel:nth-child(2) { animation-range: cover 1.5% cover 8%; }
    .kacheln .kachel:nth-child(3) { animation-range: cover 3%   cover 9.5%; }
    .kacheln .kachel:nth-child(4) { animation-range: cover 4.5% cover 11%; }
    .kacheln .kachel:nth-child(5) { animation-range: cover 6%   cover 12.5%; }
  }
}

/* 9c · ANRUF-KASTEN, Kante. Die Linie fährt INNEN unter der Überschrift ein, nicht auf dem Rahmen:
   der Kasten trägt --line-2, und das ist in beiden Modi dieselbe Farbe wie --ink-1 (Badge-Sprache
   aus tokens.css?v=3cf1ae5ae0). Ein „Rand zieht an“ wäre dort unsichtbar — gemessen rgb(243,243,241) schon im
   Ruhezustand. Verschiebung der Nummer über translate, nicht transform (Falle aus 81c4070).

   Die Linie liegt im Abstand, den das Raster ohnehin lässt (gap sp-3 = 12 px), statt sich über
   padding eigenen Platz zu nehmen: mit padding-bottom wuchs der Kasten gemessen von 195 auf
   207 px und die Nummer rutschte 12 px nach unten — für eine Linie, die im Ruhezustand unsichtbar
   ist. Bei bottom: -6px sitzt sie mittig zwischen Überschrift und Nummer, ohne Layoutänderung. */
.anruf h3 { position: relative; }
.anruf h3::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px;
  background: var(--ink-1); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.anruf .nummer { transition: translate 0.35s var(--ease-out); }
@media (hover: hover) {
  .anruf:hover h3::after { transform: scaleX(1); }
  .anruf:hover .nummer { translate: 6px 0; }
}
.anruf:focus-within h3::after { transform: scaleX(1); }
.anruf:focus-within .nummer { translate: 6px 0; }

/* 12 · MAIL-LINK wird beim Überfahren fett (Marco 2026-09-17: „wenn man auf die email geht,
   sollte sie fett werden“). Dazu wechselt die Farbe von --ink-2 auf --ink-1, sonst wirkt der
   Sprung hart — die Zeile steht gedämpft im Kasten.

   600, nicht 700: Gemessen bei 1440/1024/768/375 px wächst der Kasten mit 700 um 1 px, weil
   dieser Schnitt eine andere Zeilenmetrik mitbringt (der Link wird dabei sogar 4 px schmaler).
   Mit 600 steht das Layout an allen vier Breiten exakt still; der Link selbst wird 2,8 px
   breiter, was folgenlos bleibt, weil er am Zeilenende steht und `white-space: nowrap` trägt.

   ⚠️ Das Fettwerden springt, es gibt keinen weichen Übergang: Work Sans liegt als vier feste
   Schnitte vor, nicht als Variable Font — zwischen Gewichten interpolieren kann der Browser
   nur dort. Weich läuft deshalb allein der Farbwechsel. */
.anruf p a { transition: color 0.25s var(--ease-out); }
@media (hover: hover) {
  .anruf p a:hover { font-weight: 600; color: var(--ink-1); }
}
.anruf p a:focus-visible { font-weight: 600; color: var(--ink-1); }

/* 11 · PULS auf „bei 97 Google-Rezensionen“ (Marco 2026-09-17: „angenehmes dauerpulsieren“).
   ⚠️ Bewusste Ausnahme von „keine Dauerschleife“ ([[Konzept-Rundgang]]): Marco hat sie nach
   ausdrücklichem Einwand angeordnet. Der einzige Dauereffekt der Seite.

   Deckkraft statt Größe, und das ist der Kern: Ein pulsierendes `scale()` verschiebt die
   Textkanten um Bruchteile von Pixeln — an genau dieser Zeile wurde am selben Tag in drei
   Runden jede Unruhe herausgemessen („es darf gar nicht zucken“). Deckkraft ändert kein
   Layout, bewegt keine Nachbarn und läuft im Compositor ohne Neuzeichnen.

   Weicher Verlauf, 3,2 s je Runde, 1,0 bis 0,42 (nachgezogen 2026-09-17, Marco: „es darf ruhig
   etwas deutlicher pulsieren“ — vorher 4 s und 0,62). Die Blitzgrenze aus WCAG 2.3.1 (3 je
   Sekunde) ist damit rund zehnfach unterschritten.

   ⚠️ Die untere Grenze ist der Kontrast, nicht der Geschmack: Bei 0,42 fällt er im Tiefpunkt
   auf gemessene 3,81:1. Das hält die AA-Grenze nur, weil diese Zeile als großer Text zählt
   (Big Shoulders 900, ab 1,6 rem) — für dort gilt 3:1 statt 4,5:1. Wer den Wert weiter senkt,
   bricht die Barrierefreiheit; dann lieber das Tempo ändern. Voller Kontrast: 16,85:1. Nur
   ein Wert, weil die Seite über `data-theme="dark"` fest dunkel steht, einen Hellmodus gibt
   es hier nicht. */
@media (prefers-reduced-motion: no-preference) {
  .stimmen h2 .rest { animation: puls-rezensionen 3.2s ease-in-out infinite; }
  @keyframes puls-rezensionen { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }
}

/* 9d · ZEITACHSE „Seit 2006“ bekommt Leben (Marco 2026-10-08: „in die zeitachse muss noch leben rein!“,
   gewählt „A, gern mit dem Farbwechsel aus B“). Die Linie zieht von 2006 nach 2026 durch, die
   Stationen erscheinen nacheinander, ihr Punkt pulsiert kurz, das Foto wird aus Grau farbig.

   EINMALIGER ABLAUF, NICHT ANS SCROLLEN GEKOPPELT. Die erste Fassung (c9d7913) lief über
   Scroll-Zeitleisten und wurde am selben Tag zurückgenommen (cdeeea3): In Marcos 560 px hohem
   Fenster stand die Leiste vollständig im Bild, war aber noch halb grau, und beim Zurückscrollen
   baute sie sich wieder ab. Gemessen hatte ich nur bei 900 px Höhe. Jetzt setzt startseite.js?v=fd887eb4a3
   (Abschnitt 9d) beim Sichtbarwerden je Station die Klasse .da; ist die ganze Leiste wieder aus
   dem Bild, nimmt es sie zurück, beim nächsten Hinscrollen läuft der Ablauf erneut (Matze sah ihn
   in Safari nicht, 2026-10-08: einmal verpasst hieß bis zum Neuladen nie wieder).

   Die Ausgangslage (grau, abgesenkt) gilt nur unter .bereit, und die setzt erst das Skript.
   Ohne Skript oder bei reduzierter Bewegung steht die Leiste also wie vorher da.
   Die Verzögerungen kommen als fertige Sekundenwerte vom Skript (--verz, --verz-foto, --verz-punkt),
   breit je Station 0,17 s versetzt, schmal ohne Versatz. Bewusst kein calc() mit Zeiten: ob Safari
   18 das in transition-delay sicher auflöst, ließ sich hier nicht prüfen (kein WebKit vorhanden).
   Schmal (senkrecht) kommt jede Station einzeln ins Bild und zeichnet ihr Linienstück bis zur nächsten. */
@media (prefers-reduced-motion: no-preference) {
  .leiste.bereit::after {
    content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ink-1);
    transform-origin: left; transform: scaleX(0);
  }
  /* Übergänge NUR im Zielzustand: Stünden sie schon unter .bereit, würde die Leiste beim Setzen von
     .bereit selbst erst verzögert ins Grau überblenden (gemessen: bis 1,7 s bei voller Deckkraft). */
  .leiste.bereit.laeuft::after { transform: scaleX(1); transition: transform 2.1s cubic-bezier(0.45, 0, 0.25, 1); }
  .leiste.bereit li { opacity: 0.12; translate: 0 20px; }
  .leiste.bereit .mfoto img { filter: grayscale(1) brightness(0.55); scale: 1.25; }
  .leiste.bereit li.da {
    opacity: 1; translate: 0 0;
    transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
    transition-delay: var(--verz, 0s);
  }
  /* Foto als Animation (nicht als Übergang), Füllmodus nur backwards: Danach gilt wieder der normale
     Stil, und der Farbwechsel unter der Maus (9e) läuft ohne die Einblende-Verzögerung. */
  .leiste.bereit li.da .mfoto img { filter: grayscale(1); scale: 1; animation: achse-foto 0.9s var(--ease-out) var(--verz-foto, 0.15s) backwards; }
  @keyframes achse-foto { from { filter: grayscale(1) brightness(0.55); scale: 1.25; } }
  .leiste.bereit li.da::before { animation: achse-punkt 0.5s var(--ease-out) both; animation-delay: var(--verz-punkt, 0.2s); }
  @keyframes achse-punkt { 0% { scale: 0.3; } 60% { scale: 1.6; } 100% { scale: 1; } }

  @media (max-width: 1100px) {
    .leiste.bereit::after { display: none; }
    /* Linienstück vom eigenen Punkt bis zum nächsten: Punktmitte bei 50 % der Zeile, Abstand zur
       nächsten ist Zeilenhöhe plus gap (--sp-5). */
    .leiste.bereit li::after {
      content: ""; position: absolute; left: calc(-1 * var(--sp-6) + 7px); top: 50%; width: 2px;
      height: calc(100% + var(--sp-5)); background: var(--ink-1); transform-origin: top; transform: scaleY(0);
    }
    .leiste.bereit li.da::after { transform: scaleY(1); transition: transform 0.8s cubic-bezier(0.45, 0, 0.25, 1) 0.35s; }
    .leiste.bereit li:last-child::after { display: none; }
  }
}

/* 9e · ZEITACHSE: Fotos schwarz-weiß, farbig und größer unter der Maus (Wunsch Matze im Livecall,
   Marco 2026-10-08). Ohne Maus (Handy, Tablet) farbig, solange der Finger drauf ist (Marco: „2“).
   Gilt auch ohne Skript und bei reduzierter Bewegung, dort nur ohne weichen Übergang.
   Vergrößert wird der Bildrahmen (.mfoto), nicht das Bild darin: das Bild ist im Rahmen
   beschnitten (overflow: hidden) und würde sonst nur zoomen, statt über die Nachbarn zu wachsen.
   Der Selektor mit .bereit.da ist nötig, weil 9d dort den Filter setzt (höhere Spezifität).

   WIRKLICH GRÖSSER, NICHT AUFGEZOGEN (Marco 2026-10-08: „es wird größer aber dann unscharf!“).
   Die erste Fassung (1c19191) nahm `scale: 1.25`: Der Browser zeichnet den Rahmen in Normalgröße
   und zieht das fertige Bild auf, das wirkt weich. Jetzt wächst die echte Breite auf 125 %, und
   negative Ränder von je 12,5 % nach allen Seiten heben das im Raster wieder auf (Prozent-Ränder
   rechnen auch oben/unten mit der Breite, das Seitenverhältnis 1:1 bleibt). Der Browser zeichnet
   das 480-px-Foto neu in der großen Fläche, die Nachbarn bleiben stehen. */
.leiste .mfoto img { filter: grayscale(1); }
.leiste li { z-index: 0; }
@media (hover: hover) {
  .leiste li:hover { z-index: 2; }
  .leiste li:hover .mfoto { width: 125%; margin: -12.5%; max-width: none; }
  .leiste li:hover .mfoto img, .leiste.bereit li.da:hover .mfoto img { filter: none; }
}
@media (hover: none) {
  .leiste li:active .mfoto img, .leiste.bereit li.da:active .mfoto img { filter: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .leiste .mfoto { transition: width 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
  .leiste .mfoto img { transition: filter 0.3s var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  .licht-rand, .licht-fleck { display: none; }
  .bento li:hover, .bento li:active { transform: none; }
  .bento img { transition: none; }
  .fragen summary::after { transition: none; }
  .zitate li::before, .zitate blockquote, .zitate li > p { transition: none; }
  .zitate li:hover > *, .zitate li:focus-within > * { translate: none; }
  .kachel:hover, .kachel:active { translate: none; }
  .kachel:has(input:checked) .text { animation: none; }
  .anruf:hover .nummer, .anruf:focus-within .nummer { translate: none; }
}

/* FOTOGALERIE „Folie abziehen“ je Kachel. Matthias hat die Variante am 2026-09-25 über „Zur Auswahl“ gewählt,
   sie ersetzt die Wabengalerie vom 2026-09-18 (die bleibt als muster-galerie.html). Muster und ausführliche
   Kommentare: muster-galerie-varianten.html#folie. Knopf je Kachel öffnet ein Vollbild mit Fotoraster; beim
   Scrollen wird über jedem Foto eine matte Schutzfolie diagonal abgezogen. Klick → Großansicht mit Blättern.
   Der Knopf erscheint erst, wenn galerie.js geladen ist. Eigene Namen (.fk, .fk-folie, --abz): .kachel gehört
   den Leistungskacheln und dem Anfrageformular. */
.btn.galerie-knopf[hidden] { display: none; }                      /* .btn setzt inline-flex und hebt hidden sonst auf */
.mehr .bento li > .btn.galerie-knopf { justify-self: start; margin: var(--sp-2) var(--sp-5) 0; padding: var(--sp-4) var(--sp-6); }
.galerie { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--paper-0); color: var(--ink-1); overflow: hidden; }
.galerie::backdrop { background: var(--paper-0); }
.galerie-kopf { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--rand); background: linear-gradient(var(--paper-0) 55%, transparent); pointer-events: none; }
.galerie-kopf > * { pointer-events: auto; }
.galerie-kopf h2 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1; text-transform: uppercase; }
.galerie-zu { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--ink-1); border: 2px solid var(--ink-1); cursor: pointer; font-size: 1.6rem; line-height: 1; }
.galerie-zu:focus-visible, .fk:focus-visible, .blaettern:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
.galerie-tipp { position: absolute; left: 50%; bottom: var(--sp-4); translate: -50% 0; z-index: 3; margin: 0; padding: var(--sp-2) var(--sp-4); background: color-mix(in srgb, var(--paper-0) 85%, transparent); color: var(--ink-2); font-size: 0.88rem; width: max-content; max-width: calc(100% - 2 * var(--rand)); text-align: center; pointer-events: none; }
/* Scrollfläche unter Kopf und Tipp-Zeile; oben Platz für den Kopf (48-px-Knopf + Rand), unten für den Tipp. */
.foto-feld { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: calc(48px + 2 * var(--sp-4)) var(--rand) calc(2 * var(--sp-4) + 3rem); }
.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3);
  margin: 0 auto; padding: 0; max-width: 1500px; list-style: none; }
@media (min-width: 900px) { .foto-raster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } }
.fk { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: var(--paper-1);
  cursor: pointer; -webkit-tap-highlight-color: transparent; --abz: 0.05; }
.fk img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* --abz = Lage der Abziehkante auf der Diagonale (0 = Ecke oben links, 1 = unten rechts). Die Folie ist eine
   graue, milchige Kopie des Fotos, per clip-path auf den Teil hinter der Kante beschnitten; die Lasche ist die
   umgeschlagene Ecke, gekappt auf 18 % der Diagonale. Start bei 0,05: die Ecke ist schon angehoben. */
@property --abz { syntax: "<number>"; inherits: true; initial-value: 0; }
.fk-folie, .fk-kante, .fk-lasche { position: absolute; inset: 0; pointer-events: none; }
.fk-folie { clip-path: polygon(calc(var(--abz) * 200%) 0, 300% 0, 300% 300%, 0 300%, 0 calc(var(--abz) * 200%)); }
.fk-folie img { filter: grayscale(1) contrast(0.75) brightness(1.15) blur(1.2px); transform: scale(1.02); }
.fk-folie::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(236, 238, 240, 0.42), rgba(236, 238, 240, 0.2) 45%, rgba(236, 238, 240, 0.36)); }
.fk-lasche { --m: calc(var(--abz) * 100% + min(var(--abz) * 100%, 18%));
  clip-path: polygon(calc(var(--abz) * 200%) 0, var(--m) var(--m), 0 calc(var(--abz) * 200%));
  background: linear-gradient(135deg, rgba(252, 253, 254, 0.97) calc(var(--abz) * 100%), rgba(214, 218, 222, 0.94) calc(var(--abz) * 100% + 6%),
    rgba(150, 155, 160, 0.92) var(--m)); }
.fk-kante { background: linear-gradient(135deg,
  transparent calc(var(--abz) * 100% - 5%),
  rgba(0, 0, 0, 0.38) calc(var(--abz) * 100% - 0.6%),
  rgba(255, 255, 255, 0.95) calc(var(--abz) * 100%),
  transparent calc(var(--abz) * 100% + 1.2%)); }
.fk.zieht-ab { animation: folie-abziehen 1.25s cubic-bezier(0.55, 0.08, 0.3, 1) forwards; }
@keyframes folie-abziehen { to { --abz: 1.2; } }
.fk.frei :is(.fk-folie, .fk-kante, .fk-lasche) { display: none; }
@media (prefers-reduced-motion: reduce) { .fk-folie, .fk-kante, .fk-lasche { display: none; } }
.gross { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-rows: auto 1fr auto; background: color-mix(in srgb, var(--paper-0) 96%, transparent); }
.gross[hidden] { display: none; }
.gross-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--rand); }
.zaehlung { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Bild füllt genau seinen Bereich (object-fit); mit max-height allein wuchs ein Hochformat über die Blätterknöpfe. */
.gross-buehne { position: relative; min-height: 0; overflow: hidden; display: grid; padding: 0 var(--rand); touch-action: pan-y; }
.gross-buehne img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gross-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--rand) var(--sp-5); }
.gross-fuss p { margin: 0; color: var(--ink-2); text-align: center; flex: 1; }
.blaettern { flex: none; width: 56px; height: 56px; background: transparent; color: var(--ink-1); border: 2px solid var(--line-2); cursor: pointer; font-size: 1.5rem; }
@media (hover: hover) { .blaettern:hover, .galerie-zu:hover { background: var(--ink-1); color: var(--paper-0); } }
@media (prefers-reduced-motion: no-preference) {
  .galerie[open] .foto-raster { animation: galerie-auf 0.45s var(--ease-out); }
  @keyframes galerie-auf { from { opacity: 0; transform: scale(0.92); } }
}

/* Lockfeld gegen Formular-Bots (bis 2026-10-03 als style= im HTML). */
.falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ZEITACHSE GROSS (Wunsch Matze 2026-10-08): Fotos der Leiste sind Knöpfe, Klick zeigt sie groß.
   Dialog wie .galerie, Innenleben mit den Bausteinen der Großansicht (.gross-kopf, -buehne, -fuss). */
.leiste button.mfoto { padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }   /* Hand, keine Lupe (Marco 2026-10-08) */
.leiste button.mfoto:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
.achse-gross { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--paper-0); color: var(--ink-1); overflow: hidden; }
.achse-gross[open] { display: grid; grid-template-rows: auto 1fr auto; }
.achse-gross::backdrop { background: var(--paper-0); }
/* Gesicht im Anrufkasten (Marco 2026-10-21): echtes Foto, freigestellt auf Werkstattgrau. */
/* Luft zum Hover-Strich unter der Überschrift (Marco 2026-10-21: „klebt zu sehr“); 5 px Einzug = Ring
   2 px + Abstand 3 px, damit der Ring mit der Überschrift auf einer Kante steht. */
.anruf .person { display: flex; align-items: center; gap: var(--sp-3); margin-block: var(--sp-3) var(--sp-1); padding-left: 5px; }
.anruf .person img { width: 96px; height: 96px; border-radius: 50%; flex: none; outline: 2px solid var(--line-2); outline-offset: 3px; }
.anruf .person p { color: var(--ink-2); line-height: 1.35; }
.anruf .person strong { color: var(--ink-1); font-weight: 600; }
/* Schwarz-weiß, farbig beim Drüberfahren (Matze 2026-10-21). Ganzer Kasten statt nur das kleine Foto,
   damit es nicht hakelt. Am Handy ohne Maus färbt es sich ein, während der Kasten zur Bildschirmmitte
   rollt; Browser ohne animation-timeline zeigen es dort schwarz-weiß. */
.anruf .person img { filter: grayscale(1); transition: filter .6s ease; }
@media (hover: hover) { .anruf:hover .person img, .anruf:focus-within .person img { filter: none; } }
@media (hover: none) {
  @supports (animation-timeline: view()) {
    .anruf .person img { transition: none; animation: anruf-farbe linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
  }
}
@keyframes anruf-farbe { from { filter: grayscale(1); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) { .anruf .person img { transition: none; } }

/* ---------------------------------------------------------------------------
   HANDY UND TABLET, Prüfung 2026-10-21 (Marco: „tablet und handy versionen im hoch und querformat“).
   Nur Lage und Größe, keine neuen Effekte.
   --------------------------------------------------------------------------- */
/* Handy hochkant, Stationen Tönung und Lackschutz: Der Wagen steht unten in der Bühne (top 76 %), die Textkarte
   lag unten darüber und deckte ihn zu, darüber blieb die Bühne schwarz. Die Karte sitzt jetzt oben unter dem
   Schild „Beispielbild“, wie der Ankunftstext der ersten Station; der Wagen bleibt frei. */
@media (max-width: 760px) {
  html.laeuft .station-text { bottom: auto; top: calc(var(--sp-3) + 2.6rem); }
}
/* Tablet hochkant (820 × 1180): Zusage und Scroll-Hinweis lagen über der Motorhaube. Der Wagen rückt nach
   unten rechts, der Scroll-Hinweis entfällt wie auf flachen Bildschirmen. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  html.laeuft .bild { top: 70%; width: 92%; right: -6%; }
  /* Schild oben an der Bühnenkante, nicht am Bildrand (Bild sitzt mit top:70 % und translateY(-50 %)) */
  html.laeuft .bild .beispiel { right: calc(6% + var(--rand)); top: calc(50% - 0.7 * (100dvh - var(--kopf-hoehe)) + var(--sp-3)); }
  html.laeuft .ankunft .hinweis { display: none; }
}
/* Kurze Fenster (Handy quer, 390 px hoch): Der große Kopf (325 px) ließ der Bühne 65 px, Titel und Wagen waren
   weg. Von Anfang an der kleine Kopf, Ankunft dichter, Wagen rechts neben dem Text, Karte klein unten links. */
@media (max-height: 520px) {
  :root { --kopf-hoehe: 72px; --kopf-klein: 72px; }
  .siegel { height: 58px; }
  .kopf .marken-band, .kopf-wege { margin-bottom: 0; }
  .kopf .btn { padding: var(--sp-2) var(--sp-4); font-size: 0.95rem; }
  html.laeuft .buehne { height: calc(100dvh - var(--kopf-hoehe)); }
  html.laeuft .bild { width: min(62%, calc((100dvh - var(--kopf-hoehe)) * 16 / 9)); right: 0; top: 50%; }
  html.laeuft .bild .beispiel { top: var(--sp-3); right: var(--rand); }
  html.laeuft .ankunft { padding-top: var(--sp-3); gap: var(--sp-2); max-width: 52%; }
  html.laeuft .ankunft h1 { font-size: clamp(1.5rem, 7vh, 2.4rem); }
  html.laeuft .ankunft .hinweis, html.laeuft .ankunft .zusage { display: none; }
  html.laeuft .ankunft .btn { padding: var(--sp-2) var(--sp-4); }
  html.laeuft .ankunft .ueberspringen { position: static; }
  .bewertung { font-size: 0.85rem; }
  html.laeuft .station-text { top: auto; bottom: var(--sp-3); width: min(26rem, 55%); padding: var(--sp-3); }
  html.laeuft .station h2 { font-size: 1.35rem; }
  html.laeuft .station p { font-size: 0.9rem; margin-bottom: var(--sp-2); }
}
@media (max-height: 520px) and (max-width: 760px) {
  html.laeuft .buehne { height: calc(100dvh - var(--kopf-hoehe) - 72px); }   /* feste Leiste unten */
}