/* ---------------------------------------------------------------------------
   Streiflicht Fahrzeugpflege — Musterprojekt von frindz.ai (erfundener Betrieb)
   Grammatik „Die Scheibe": zwischen dem Leser und allem liegt eine
   verschmutzte Scheibe. Sie ist fest, sie ist das Konstante, und sie laesst
   sich wegwischen. Alles hier drin ist seitenspezifisch; die Engine
   (scrollcraft.css / .js) bleibt unangetastet.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------------- Schriften -- */
/* Selbst gehostet. Kein Aufruf an Google, kein fremder Host. */
@font-face {
  font-family: "Chivo"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/chivo.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Chivo"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/chivo-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/is-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/is-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/is-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/is-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/is-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/is-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------------------------------------------------------------- Token -- */
/* Sechs Rollen, helle Fassung (Lucas 15.09.: „soll hell sein"). Der Goldton
   kommt weiter aus dem eigenen Wappen, aber in zwei Stufen: als Schrift ist
   #F0B420 auf hellem Grund unlesbar (1,9:1), deshalb traegt Text das dunkle
   Gold und nur Flaechen (Knopf, Fahnen, Anzeige) das Wappengold. */
:root {
  --sc-canvas:     #F3F4F6;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #12151C;
  --sc-ink-soft:   #525A68;
  --sc-accent:     #8A6100;
  --sc-accent-ink: #14110A;
  --gold:          #F0B420;

  --sc-font-display: "Chivo", "Instrument Sans", system-ui, sans-serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;

  --sc-shadow-color: 222 22% 38%;

  /* Der Schmutz. Warmgrau, damit er auf dem hellen Grund als Staub liest. */
  --dreck: 138 128 112;
}

.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 800;
  letter-spacing: var(--sc-track-tight);
  line-height: var(--sc-leading-none);
  text-wrap: balance;
}
.sc-lede { color: var(--sc-ink); }

/* ------------------------------------------------------------ Die Scheibe --
   Fest im Bild, vor allem anderen ausser der Anzeige. `data-sc-world` sagt dem
   Pruefstand, dass diese Ebene zum GRUND gehoert und beim Kontrastmessen nicht
   ausgeblendet werden darf. Ohne das misst man einen Kontrast, den es nie gab. */
.pane {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
  contain: strict;
}
.pane__dirt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Der Streiflichtschimmer der dunklen Fassung (weiss, `screen`) ist entfallen:
   auf hellem Grund hat er nichts mehr bewirkt. */

/* ------------------------------------------------------------ Schmutzgrad --
   Die einzige dauerhafte Anzeige der Seite. Keine Links, kein Verzeichnis:
   sie misst ein Material. Fuellstand = wie viel der Scheibe frei ist. */
.grad {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px var(--sc-3);
  padding: var(--sc-2) var(--sc-gutter) 0;
  pointer-events: none;
}
.grad__bahn {
  flex: 1 1 auto; height: 3px; border-radius: 2px;
  background: rgba(var(--dreck) / 0.30);
  overflow: hidden;
}
.grad__fuell {
  display: block; height: 100%; width: 100%;
  background: var(--gold);
  transform-origin: 0 50%; transform: scaleX(0);
}
/* Die Muster-Zeile ist die einzige KI-Kennzeichnung der Seite: deckender
   Grund, nie ausgeblendet, in jedem Breakpoint da (Ledger 07./08.10.2026). */
.grad__muster {
  justify-self: start;
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600;
  color: var(--sc-ink); white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(243, 244, 246, 0.94);
  box-shadow: 0 0 0 1px rgba(18, 21, 28, 0.08);
}
@media (max-width: 44rem) {
  .grad { grid-template-columns: 1fr auto; }
  .grad__muster { grid-column: 1 / -1; grid-row: 2; }
}
.grad__wert {
  flex: 0 0 auto;
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  /* Ueber dem dunklen Film kam die graue Zahl auf 1,0:1 (Telefon-Streifen). */
  padding: 2px 8px; border-radius: 999px;
  background: rgba(243, 244, 246, 0.85);
}

/* ------------------------------------------------------------------ Lack --
   Der Grund der Seite ist eine helle, polierte Flaeche. Die drei schraegen
   Baender sind die Leuchtstoffreflexe aus ihren Studioaufnahmen. Auf hellem
   Lack liest ein Reflex nur mit Schattenkante: rein weisse Baender kamen auf
   1,12:1 und die Flaeche wirkte wie eine graue Wand (Fable-Review 15.09.). */
.lack {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(120% 86% at 18% 8%, rgba(255,255,255,.95), transparent 58%),
    linear-gradient(163deg, #FFFFFF 0%, #DDE1E8 54%, #EEF1F5 100%);
}
.lack::before, .lack::after {
  content: ""; position: absolute; inset: -30% -10%;
  background: linear-gradient(103deg,
      transparent 0 45.6%,
      rgba(18,21,28,.07) 46.8%, rgba(255,255,255,.95) 48.4%, rgba(18,21,28,.06) 50%,
      transparent 51.2% 100%);
}
.lack::after {
  background: linear-gradient(103deg,
      transparent 0 20%,
      rgba(18,21,28,.05) 21%, rgba(255,255,255,.85) 22.2%, rgba(18,21,28,.04) 23.4%,
      transparent 24.4% 71%,
      rgba(18,21,28,.04) 72.2%, rgba(255,255,255,.7) 73.4%, rgba(18,21,28,.035) 74.6%,
      transparent 75.6% 100%);
}

/* ----------------------------------------------------------------- Buehne -- */
.buehne { display: grid; place-items: center; }
.buehne > .lack { z-index: 0; }

/* ------------------------------------------------------------------ Kopf -- */
.kopf {
  position: relative; z-index: 20;
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; gap: var(--sc-6);
}
.kopf__marke { display: flex; align-items: center; gap: var(--sc-4); }
.kopf__zeichen { width: clamp(230px, 28vw, 360px); height: auto; flex: 0 0 auto; }
.kopf__wort {
  font-family: var(--sc-font-display); font-weight: 800; font-size: 46px;
  letter-spacing: 1.5px; fill: var(--sc-ink);
}
.kopf__ort {
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
  border-left: 1px solid var(--sc-hairline-strong); padding-left: var(--sc-4);
  line-height: 1.5;
}

/* Der freigewischte Streifen. Die weiche Kante entsteht aus einer Maske, nicht
   aus einem Rahmen: eine harte Kante liest sich als Kasten, eine weiche als
   Handbewegung. */
.wisch {
  position: relative;
  padding: var(--sc-7) clamp(var(--sc-5), 5vw, var(--sc-9)) var(--sc-7) 0;
  max-width: 46rem;
}
.wisch::before {
  content: ""; position: absolute; z-index: -1;
  inset: -6% -14% -10% -18%;
  background:
    radial-gradient(80% 120% at 22% 40%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(160deg, #FFFFFF 0%, #F2F4F7 70%);
  /* closest-side: die Ellipse endet an der naechsten Kante, die Maske ist an
     jedem Rand bei 0. Mit festen 72 %/78 % stand am rechten Rand noch ~45 %
     Deckung, und auf hellem Lack schnitt das die Glanzbaender sichtbar ab. */
  -webkit-mask-image: radial-gradient(closest-side at 42% 50%, #000 52%, rgba(0,0,0,.6) 76%, transparent 100%);
          mask-image: radial-gradient(closest-side at 42% 50%, #000 52%, rgba(0,0,0,.6) 76%, transparent 100%);
}
.wisch h1 { margin: 0; }
.wisch p { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); color: var(--sc-ink); max-width: 34ch; }

.ruf {
  /* Der Pruefstand hat das Ziel am Telefon mit 143x34 gemeldet. Eine Rufnummer
     ist auf dieser Seite das wichtigste Ziel ueberhaupt und muss die 44 px
     erreichen, ohne dass sie optisch waechst. */
  display: inline-flex; align-items: baseline; gap: var(--sc-3);
  min-height: 44px; padding-block: var(--sc-2);
  margin-top: var(--sc-5);
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug);
  color: var(--sc-accent); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.ruf small {
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
@media (hover: hover) and (pointer: fine) {
  .ruf:hover { border-bottom-color: var(--sc-accent); }
}
.ruf:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- Abschnitt */
.blatt { position: relative; z-index: 10; background: var(--sc-canvas); }
.blatt--dicht { padding-block: clamp(2.25rem, 4vw, 4rem); }

.zwei {
  display: grid; gap: clamp(var(--sc-6), 5vw, var(--sc-9));
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .zwei { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .zwei--schmal { grid-template-columns: 1.5fr 0.9fr; }
}

.bild { margin: 0; position: relative; }
.bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3);
}
.bild figcaption {
  margin-top: var(--sc-3);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-normal);
}

/* Oeffnungszeiten als Tabelle, nicht als Karten. Zeiten sind Daten. */
.zeiten { width: 100%; border-collapse: collapse; margin-top: var(--sc-6); }
.zeiten caption {
  text-align: left; font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); padding-bottom: var(--sc-3);
}
.zeiten th, .zeiten td {
  text-align: left; padding: var(--sc-3) 0;
  border-bottom: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm); font-weight: 400;
}
.zeiten th { color: var(--sc-ink-soft); font-weight: 500; width: 8.5rem; }
.zeiten td { font-variant-numeric: tabular-nums; color: var(--sc-ink); }

/* ----------------------------------------------------------------- Arbeit -- */
/* Die Kopie sitzt auf einer eigenen Tafel. Der Verlauf allein reichte nicht:
   der Pruefstand hat die Ueberschrift auf einem hellen Schaumbild mit 1,07:1
   gemessen. Eine Tafel deckt jeden Einzelframe, ein Verlauf nur die meisten. */
.arbeit__takt {
  position: absolute; z-index: 20;
  left: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 7rem);
  max-width: min(36rem, 76vw);
}
/* Die Tafel sitzt auf dem Cue selbst, nicht auf dem Rahmen darum: sonst
   blendet die Schrift aus und eine leere weisse Tafel bleibt ueber dem Film
   stehen (auf dem hellen Kontaktbogen sofort sichtbar). */
.arbeit__takt > [data-sc-cue] {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--sc-r-md);
  padding: var(--sc-6);
  box-shadow: var(--sc-e3);
}
.arbeit__takt h2 { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xl); }
/* Alle Schritte stehen gleichzeitig als Liste da (Lucas 15.09.), statt
   einzeln im Takt des Films ein- und auszublenden. */
.arbeit__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sc-2);
}
.arbeit__liste li {
  position: relative; padding-left: var(--sc-5);
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug);
  line-height: 1.3; color: var(--sc-ink);
}
.arbeit__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 1px rgba(138,97,0,.35);
}
.arbeit__quelle {
  position: absolute; z-index: 20; right: var(--sc-gutter);
  bottom: clamp(1.5rem, 5vh, 3rem);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-normal); text-align: right; margin: 0;
  /* Ueber dem dunklen Film sonst 2,25:1. */
  padding: 2px 8px; border-radius: 999px;
  background: rgba(243, 244, 246, 0.85);
}

/* --------------------------------------------------------------- Vergleich --
   Vorher und Nachher liegen uebereinander. Die Blende faehrt ueber das ganze
   Bild, nicht ueber ein Detail: eine Wischblende auf einer Briefmarke ist ein
   Zappeln, ueber die volle Breite ist sie ein Zustandswechsel. */
.verg { position: relative; border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e3); }
.verg img { display: block; width: 100%; height: auto; }
.verg__nach { position: absolute; inset: 0; }
.verg__nach img { height: 100%; object-fit: cover; }
.verg__fahne {
  position: absolute; z-index: 3; top: var(--sc-4); left: var(--sc-4);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  background: var(--sc-canvas); color: var(--sc-ink);
  padding: var(--sc-2) var(--sc-3); border-radius: var(--sc-r-sm);
}
.verg__fahne--nach { left: auto; right: var(--sc-4); background: var(--gold); color: var(--sc-accent-ink); }

/* -------------------------------------------------------------- Preisrail -- */
.rail {
  display: flex; align-items: stretch; gap: clamp(var(--sc-5), 3vw, var(--sc-7));
  padding-inline: var(--sc-gutter);
  padding-right: max(var(--sc-gutter), 12vw);
  will-change: transform;
}
.rail__kopf {
  flex: 0 0 clamp(17rem, 26vw, 24rem);
  align-self: center;
}
.rail__kopf h2 { margin: 0 0 var(--sc-4); }
.rail__kopf p { margin: 0; }

.paket {
  flex: 0 0 clamp(17rem, 24vw, 21rem);
  min-height: min(31rem, 64vh);
  display: flex; flex-direction: column;
  background: var(--sc-surface);
  border-radius: var(--sc-r-md);
  padding: var(--sc-6);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.paket--beliebt { background: #FFFDF6; box-shadow: var(--sc-e3), inset 0 0 0 2px rgba(240,180,32,.75); }
.paket__name {
  font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug); margin: 0;
}
.paket__preis {
  font-family: var(--sc-font-display); font-weight: 900;
  font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-tight);
  color: var(--sc-accent); margin: var(--sc-4) 0 var(--sc-1);
  font-variant-numeric: tabular-nums;
}
.paket__preis span { font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink-soft); letter-spacing: var(--sc-track-normal); }
.paket__bezug { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.paket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.paket li {
  font-size: var(--sc-t-sm); color: var(--sc-ink); line-height: 1.45;
  padding-left: var(--sc-5); position: relative;
}
.paket li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 1px; background: var(--sc-accent);
}
.paket__marke {
  align-self: flex-start; margin-bottom: var(--sc-4);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-accent-ink); background: var(--gold);
  padding: 2px var(--sc-2); border-radius: var(--sc-r-sm);
}

.tafel {
  flex: 0 0 clamp(19rem, 28vw, 26rem);
  min-height: min(31rem, 64vh);
  display: flex; flex-direction: column;
  background: var(--sc-surface); border-radius: var(--sc-r-md);
  padding: var(--sc-6); box-shadow: var(--sc-e2), var(--sc-edge);
}
.tafel h3 { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); margin: 0 0 var(--sc-4); letter-spacing: var(--sc-track-snug); }
.tafel table { width: 100%; border-collapse: collapse; }
.tafel th, .tafel td { text-align: left; padding: var(--sc-2) 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.tafel th { font-weight: 400; color: var(--sc-ink-soft); }
.tafel td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sc-ink); }
.tafel p { margin: auto 0 0; padding-top: var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* Das Urteil steht vor dem Formular (frueher in der Preisschiene). */
.urteil { padding: 0 0 var(--sc-8); max-width: 46rem; }
.urteil__zahl {
  font-family: var(--sc-font-display); font-weight: 900;
  font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink); font-variant-numeric: tabular-nums; margin: 0;
}
.urteil p { margin: var(--sc-4) 0 0; }
.urteil blockquote { margin: var(--sc-6) 0 0; padding: 0; border-left: 1px solid var(--sc-accent); padding-left: var(--sc-4); }
.urteil blockquote p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.urteil cite { display: block; margin-top: var(--sc-2); font-style: normal; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }


/* Dichtespalte unter der Kopie des Arbeitsakts. Kein Vollbild-Schleier: die
   Dichte liegt da, wo die Schrift liegt, der Rest des Bildes behaelt seinen
   Kontrast. Eigenes Element, damit der Pruefstand sie wirklich mitmisst. */
.arbeit__platte {
  position: absolute; z-index: 2; left: 0; bottom: 0;
  width: min(52rem, 68vw); height: min(34rem, 74vh);
  background: linear-gradient(72deg,
      rgba(243,244,246,.92) 0 34%,
      rgba(243,244,246,.78) 54%,
      rgba(243,244,246,.4) 76%,
      rgba(243,244,246,0) 100%);
}
@media (max-width: 44rem) {
  .arbeit__platte {
    width: 100%; height: 68vh;
    background: linear-gradient(0deg,
        rgba(243,244,246,.95) 0 46%,
        rgba(243,244,246,.8) 70%,
        rgba(243,244,246,0) 100%);
  }
}

/* Gut zu wissen: steht dort, wo beim echten Betrieb die Bewertungen standen.
   Ein erfundener Betrieb hat keine Bewertungen, also keine erfundenen. */
.wissen { padding: 0 0 var(--sc-8); max-width: 62rem; }
.wissen h3 {
  margin: 0 0 var(--sc-4); font-family: var(--sc-font-display); font-weight: 800;
  font-size: var(--sc-t-lg); color: var(--sc-ink);
}
.wissen dl { margin: 0; display: grid; gap: var(--sc-4) var(--sc-8); }
.wissen dl > div { border-left: 1px solid var(--sc-accent); padding-left: var(--sc-4); }
.wissen dt { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.wissen dd { margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink); }
@media (min-width: 52rem) {
  .wissen dl { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ Leise -- */
.leise { max-width: 46rem; }
.leise h2 { font-size: var(--sc-t-xl); margin: 0 0 var(--sc-4); }
.leise ul { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.leise li { font-size: var(--sc-t-sm); color: var(--sc-ink); }
.leise li + li { position: relative; }
.leise li + li::before { content: ""; position: absolute; left: calc(var(--sc-5) / -2); top: 0.55em; width: 3px; height: 3px; border-radius: 50%; background: var(--sc-accent); }

/* --------------------------------------------------------------- Rueckgabe --
   Der Peak. Das Foto liegt unter der Scheibe und wird sichtbar, waehrend die
   Scheibe in einem Zug frei wird. Der Grund ist von Anfang an da, damit die
   Buehne nicht leer einfaehrt. */
/* KEIN position hier. .sc-stage ist sticky; jede eigene Positionsangabe auf
   demselben Element schlaegt die Engine-Regel, und der Akt pinnt dann gar
   nicht. Die Engine warnt davor, aber nur als Warnung, nicht als Fehler.
   Sticky ist selbst positioniert, die absoluten Kinder haengen daran. */
.rueck { isolation: isolate; }
.rueck__bild { position: absolute; inset: 0; }
.rueck__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rueck__blende {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(243,244,246,.97) 0%, rgba(243,244,246,.86) 26%, rgba(243,244,246,.2) 54%, transparent 74%);
}
.rueck__satz {
  position: absolute; z-index: 20; left: var(--sc-gutter); right: var(--sc-gutter);
  bottom: clamp(3rem, 11vh, 8rem);
  max-width: 44rem;
}
.rueck__satz h2 { margin: 0; }
.rueck__satz p { margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); color: var(--sc-ink); }

/* --------------------------------------------------------------- Formular -- */
.schluss { position: relative; z-index: 10; background: var(--sc-canvas);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4rem, 8vw, 7rem); }
.frei {
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-normal); margin: 0 0 var(--sc-6);
}
.frei b { color: var(--sc-accent); font-variant-numeric: tabular-nums; font-weight: 600; }

.form { display: grid; gap: var(--sc-5); }
@media (min-width: 46rem) { .form { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: var(--sc-2); }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: var(--sc-t-base); color: var(--sc-ink);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-sm);
  padding: var(--sc-3) var(--sc-4);
  width: 100%;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background-color var(--sc-d-fast) var(--sc-ease-out);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: var(--sc-accent);
}
.feld--zu { display: flex; align-items: flex-start; gap: var(--sc-3); }
.feld--zu input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--sc-accent); }
.feld--zu label { text-transform: none; letter-spacing: var(--sc-track-normal); font-weight: 400; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.feld--zu a { color: var(--sc-ink); }

.senden {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug);
  background: var(--gold); color: var(--sc-accent-ink);
  border: 0; border-radius: var(--sc-r-sm);
  padding: var(--sc-4) var(--sc-7);
  cursor: pointer; white-space: nowrap;
  transition: filter var(--sc-d-fast) var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .senden:hover { filter: brightness(1.08); } }
.senden:active { transform: translateY(1px); }
.senden:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.senden:disabled { opacity: .5; cursor: not-allowed; }
.hinweis { grid-column: 1 / -1; margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.meldung {
  grid-column: 1 / -1; margin: 0;
  font-size: var(--sc-t-sm); color: var(--sc-accent);
  border-left: 1px solid var(--sc-accent); padding-left: var(--sc-4);
}
.meldung:empty { display: none; }

/* ------------------------------------------------------------------- Fuss -- */
.fuss {
  position: relative; z-index: 10;
  background: var(--sc-canvas);
  border-top: 1px solid var(--sc-hairline);
  padding-block: var(--sc-7) var(--sc-8);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.fuss__reihe { display: grid; gap: var(--sc-6); }
@media (min-width: 52rem) { .fuss__reihe { grid-template-columns: repeat(3, 1fr); } }
.fuss h2 { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink); margin: 0 0 var(--sc-3); }
.fuss p { margin: 0 0 var(--sc-2); }
.fuss a { color: var(--sc-ink); text-underline-offset: 3px; }
.fuss__klein { margin-top: var(--sc-7); font-size: var(--sc-t-xs); line-height: 1.7; }

.fahne {
  display: inline-block; margin-bottom: var(--sc-5);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent-ink); background: var(--gold);
  padding: var(--sc-2) var(--sc-3); border-radius: var(--sc-r-sm);
}

/* ------------------------------------------------------------ Kleinbildschirm */
@media (max-width: 44rem) {
  /* 84 px Wappen liessen den hellen Aufmacher am Telefon leer wirken. */
  .kopf__zeichen { width: 190px; }
  .wisch h1 { font-size: var(--sc-t-2xl); }
  .wisch { padding-right: 0; }
  .wisch p { font-size: var(--sc-t-base); }
  .arbeit__takt { right: var(--sc-gutter); }
  .arbeit__quelle { position: static; text-align: left; margin-top: var(--sc-5); }
  .rueck__satz h2 { font-size: var(--sc-t-2xl); }
  .rail { padding-right: var(--sc-gutter); }
  /* 78vw liess immer einen breiten Streifen der Nachbarkarte im Bild stehen,
     und eine halb sichtbare Tabelle liest sich als Fehler, nicht als Anschnitt
     ("Komplettaufbereitung nach Fahrzeuggroesse" kam als "bereitung uggroesse"
     an). Gemessen am Telefon-Streifen, nicht am Desktop. Jetzt faellt je eine
     Karte ganz ins Bild, vom Nachbarn bleibt nur eine Kante als Hinweis. */
  /* Am Telefon muss der Rasterabstand GENAU eine Bildbreite betragen, sonst
     stehen dauerhaft zwei halbe Karten nebeneinander. Bei einer Preistabelle
     ist das nicht "angeschnitten", sondern unlesbar: "Komplettaufbereitung
     nach Fahrzeuggroesse" kam als "bereitung uggroesse" an. Karte plus Spalt
     ergibt jetzt 100vw, also faellt je eine Karte ganz ins Bild und die
     naechste beginnt erst hinter dem rechten Rand. Am Desktop-Streifen war
     davon nichts zu sehen. */
  .rail { gap: calc(var(--sc-gutter) * 2); padding-right: var(--sc-gutter); }
  .paket, .tafel, .rail__kopf { flex-basis: calc(100vw - var(--sc-gutter) * 2); }
  .paket, .tafel { min-height: 0; }
  .tafel th, .tafel td { padding: var(--sc-3) 0; }

  /* Preise als Stapel, gesetzt vom Skript vor ScrollCraft.mount. Nur mit
     dieser Klasse: ohne sie ist die Buehne eine Engine-Buehne, und ein eigenes
     `position` darauf wuerde das Pinnen schlagen (Ledger 07.09.). Hier ist sie
     keine mehr, also darf sie Bezugsrahmen fuer den Lack sein. In einer Spalte
     wirkt flex-basis als HOEHE, deshalb zurueck auf auto. */
  .preise--stapel .buehne { position: relative; display: block; padding-block: var(--sc-8); }
  .preise--stapel .rail {
    position: relative; z-index: 1;
    flex-direction: column; gap: var(--sc-5);
    padding-inline: var(--sc-gutter);
    will-change: auto;
  }
  .preise--stapel :is(.rail__kopf, .paket, .tafel) { flex-basis: auto; align-self: stretch; }
  .preise--stapel .rail__kopf { margin-bottom: var(--sc-2); }
  .senden { width: 100%; justify-self: stretch; text-align: center; }
}

/* ------------------------------------------------------------ Rechtsseiten --
   Impressum und Datenschutz. Stand vorher doppelt als <style> in beiden
   Dateien, und dort schlug `.recht p` die Farbe der Fahne (3,7:1 auf Gold)
   und `.recht a` das Gold des Zurueck-Links. */
.recht { max-width: 46rem; margin-inline: auto; padding: clamp(3rem,7vw,6rem) var(--sc-gutter) 6rem; }
.recht h1 { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-6); }
.recht h2 { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); margin: var(--sc-8) 0 var(--sc-3); letter-spacing: var(--sc-track-snug); }
.recht p, .recht li { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); }
.recht strong { color: var(--sc-ink); }
.recht a { color: var(--sc-ink); text-underline-offset: 3px; }
.recht ul { padding-left: var(--sc-5); }
.recht .fahne { color: var(--sc-accent-ink); font-size: var(--sc-t-xs); }
.recht .klein { margin-top: var(--sc-8); font-size: var(--sc-t-xs); }
.recht a.zurueck { display: inline-block; margin-bottom: var(--sc-6); color: var(--sc-accent); text-decoration: none; font-weight: 600; }
.recht a.zurueck:hover { text-decoration: underline; }
.luecke { border-left: 2px solid var(--gold); padding: var(--sc-4) 0 var(--sc-4) var(--sc-5); margin: var(--sc-6) 0; }
.recht .luecke p { color: var(--sc-ink); }