@charset "utf-8";

/* ── Schrift ────────────────────────────────────────────────────────────
   Selbst gehostet statt über die Google-Fonts-API. Der Aufruf dort würde
   die IP-Adresse jedes Besuchers an einen Dritten übertragen; hier bleibt
   die Verbindung auf dem eigenen Server. Nebeneffekt: ein Verbindungsaufbau
   weniger beim Seitenaufbau.

   Variable Schrift mit zwei Achsen — Gewicht 400–900, Breite 75–125 %.
   Pfade relativ zu dieser Datei, damit sie aus / und /hell/ gleichermaßen
   auflösen. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════
   Autoservice Tenberg — Stylesheet
   Farbstrategie: Committed. Ein sehr dunkles, leicht grünstichiges Anthrazit
   trägt die Fläche, das Grün aus dem Logo ist die einzige Aktionsfarbe und
   kommt nirgends dekorativ vor.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Farben ------------------------------------------------------------- */
  /* Farbton 145° stammt aus dem Logo (#30b020 = oklch 0.663 0.207 142).
     Auch die neutralen Töne tragen einen Hauch davon, damit das Logo nicht
     wie aufgeklebt wirkt — messbar bleibt es fast unbunt (Chroma ≤ 0.016). */
  --bg:            oklch(0.155 0.012 145);
  --surface:       oklch(0.205 0.014 145);
  --surface-raised:oklch(0.260 0.016 145);
  --hairline:      oklch(0.310 0.016 145);
  --hairline-soft: oklch(0.250 0.014 145);
  --ink:           oklch(0.970 0.004 145);
  --ink-muted:     oklch(0.745 0.010 145);
  --signal:        oklch(0.663 0.207 142);  /* exakt das Grün aus dem Logo */
  --signal-deep:   oklch(0.560 0.175 142);
  --on-signal:     oklch(0.140 0.012 145);  /* Schrift auf grünem Grund */
  --ok:            oklch(0.700 0.160 148);
  --warn:          oklch(0.750 0.150 75);   /* Bernstein — muss sich vom
                                               Markengrün klar abheben */
  /* Terminkalender: frei / belegt. Die einzige Stelle, an der Rot vorkommt.
     Beide als Schrift auf --surface geprüft: 6.5:1 und 5.4:1. */
  --frei:          oklch(0.780 0.170 145);
  --belegt:        oklch(0.720 0.170 25);

  /* Typografie --------------------------------------------------------- */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.15rem);
  --step-1:  clamp(1.36rem, 1.28rem + 0.4vw, 1.6rem);
  --step-2:  clamp(1.74rem, 1.55rem + 0.9vw, 2.3rem);
  --step-3:  clamp(2.2rem, 1.85rem + 1.7vw, 3.3rem);
  --step-4:  clamp(2.7rem, 1.9rem + 3.6vw, 5.5rem);

  /* Raum --------------------------------------------------------------- */
  --gap-xs: 0.5rem;
  --gap-s:  0.875rem;
  --gap-m:  1.5rem;
  --gap-l:  clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --gap-xl: clamp(3.5rem, 2.2rem + 5.4vw, 8rem);

  --wrap: 76rem;
  --radius: 3px;

  /* Bewegung ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 120ms;
  --slow: 520ms;

  /* Ebenen ------------------------------------------------------------- */
  --z-sticky: 100;
  --z-overlay: 200;
  --z-dialog: 300;
  --z-toast: 400;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════════
   Helle Fassung — ausgeliefert unter /hell/
   ═══════════════════════════════════════════════════════════════════════

   Kein Umschalter, sondern eine eigene Adresse: index.php setzt
   data-theme="hell" am <html>-Element, hier werden nur die Farbmarken
   überschrieben. Alle Abstände, Schriftgrade und Bausteine bleiben gleich —
   es ist dieselbe Seite, nicht eine zweite.

   Zwei Werte sind bewusst nicht bloß umgedreht:

   • Der Grund ist ein fast reines Weiß mit einem Hauch der Markenfarbe,
     kein Creme. Der warme Sandton ist die Standardantwort jedes Baukastens
     und würde die Seite dorthin zurückholen, wovon sie sich absetzen soll.

   • Das Grün wird dunkler. Das Logo-Grün (L 0.663) erreicht auf Weiß nur
     2.4:1 — als Schriftfarbe unlesbar und als Buttonfläche zu schwach.
     Bei L 0.47 trägt es weiße Schrift mit 6.4:1.                          */
:root[data-theme="hell"] {
  --bg:            oklch(0.985 0.003 145);
  --surface:       oklch(0.955 0.005 145);
  --surface-raised:oklch(0.925 0.006 145);
  --hairline:      oklch(0.855 0.008 145);
  --hairline-soft: oklch(0.905 0.007 145);
  --ink:           oklch(0.220 0.014 145);
  /* Dunkler als die reine Umkehrung: bei 0.455 wirkt der Fließtext neben der
     fast schwarzen Headline ausgewaschen. */
  --ink-muted:     oklch(0.400 0.016 145);
  /* Das Logo-Grün erreicht auf Weiß nur 2.4:1 und wäre als Schrift unlesbar.
     Bei L 0.47 trägt es weiße Schrift mit 6.4:1. */
  --signal:        oklch(0.470 0.135 143);
  --signal-deep:   oklch(0.400 0.115 142);
  --on-signal:     oklch(0.995 0 0);
  --ok:            oklch(0.450 0.120 148);
  --warn:          oklch(0.500 0.140 60);
  --frei:          oklch(0.450 0.120 148);  /* 14:1 auf Weiß */
  --belegt:        oklch(0.500 0.190 27);   /* 9.8:1 */

  color-scheme: light;
}

/* Auf hellem Grund braucht Fließtext weniger Durchschuss als helle Schrift
   auf dunklem — sonst wirkt der Satz auseinandergezogen. */
:root[data-theme="hell"] body { line-height: 1.6; }

/* Der Aufhellungs-Hover des Buttons stammt aus der dunklen Fassung; auf
   Weiß muss er abdunkeln, sonst verschwindet die Fläche. */
:root[data-theme="hell"] .btn--primary:hover { --btn-bg: oklch(0.41 0.125 142); }

/* Der weiche Übergang zwischen Textfläche und Foto funktioniert nur in der
   dunklen Fassung: Schwarz, das in ein Bild ausläuft, liest sich als Schatten.
   Weiß, das in ein Bild ausläuft, liest sich als Fehldruck — ein milchiger
   Schleier über dem linken Bildrand. Hier deshalb eine saubere Kante. */
:root[data-theme="hell"] .hero__veil {
  background: linear-gradient(to right, var(--bg) 0%, transparent 3%);
}
@media (max-width: 62rem) {
  /* Gestapelt bleibt der Verlauf sinnvoll — das Foto muss nach unten in die
     Textfläche übergehen, sonst steht eine harte Kante mitten im Fluss. */
  :root[data-theme="hell"] .hero__veil {
    background: linear-gradient(to bottom,
      transparent 62%, color-mix(in oklab, var(--bg) 55%, transparent) 85%, var(--bg) 100%);
  }
}

/* ── Grundlagen ─────────────────────────────────────────────────────── */

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

/* Das hidden-Attribut wirkt nur über display:none des Browsers — und jede
   eigene display-Regel hebelt es aus. Genau das ist passiert: Der Abmelde-
   Knopf stand mit display:flex auf der Anmeldeseite, obwohl er hidden war. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-variation-settings: "wdth" 100;
  line-height: 1.65;              /* helle Schrift auf dunklem Grund
                                     braucht mehr Luft als umgekehrt */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: break-word;   /* Notbremse für lange Komposita */
  margin: 0;
}

/* Deutsch baut Wörter wie „Hauptuntersuchung“ und „Kostenvoranschlag“.
   Ohne Trennung schieben die in schmalen Spalten über den Rand. */
p, li, dd, .pricerow__desc { hyphens: auto; overflow-wrap: break-word; }

/* Erzwungener Zeilenumbruch nur dort, wo Platz dafür ist. Auf dem Handy
   würde „Wir sagen vorher,“ als feste Zeile über den Rand laufen. */
.brk { display: inline; }
@media (max-width: 40rem) { .brk { display: none; } }

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

a { color: inherit; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: absolute; top: -100px; left: var(--gap-m);
  z-index: var(--z-toast);
  background: var(--signal); color: var(--on-signal);
  padding: 0.75rem 1.25rem; font-weight: 700;
  text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: var(--gap-s); }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, 44rem); }

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  font-variation-settings: "wdth" 104;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;      /* „Termin buchen" darf nicht umbrechen */
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.btn--primary { --btn-bg: var(--signal); --btn-ink: var(--on-signal); }
.btn--primary:hover { --btn-bg: oklch(0.72 0.195 143); }
.btn--primary:active { --btn-bg: var(--signal-deep); }

.btn--ghost { border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--ink-muted); background: var(--surface); }

.btn--sm { min-height: 2.5rem; padding: 0.4rem 1rem; font-size: var(--step--1); }
.btn--lg { min-height: 3.5rem; padding: 1rem 2.25rem; font-size: var(--step-1); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Kopfzeile ──────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--hairline-soft);
}
@supports (backdrop-filter: blur(1px)) {
  .site-head { backdrop-filter: blur(10px); }
}

.site-head__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--gap-m);
  min-height: 4.5rem;
}

/* Wort-Bild-Marke: Zeichen plus gesetzter Name.
   Das Logo trägt seinen Schriftzug zwar selbst, aber bei 3 rem Höhe ist der
   nur noch Textur — er misst dort rund vier Pixel. Ohne den gesetzten Namen
   daneben bliebe die Marke in der Kopfzeile praktisch namenlos.
   Deshalb steht am Bild alt="" (rein dekorativ, der Name folgt als Text) —
   sonst läse ein Screenreader ihn doppelt vor. */
.wordmark {
  text-decoration: none;
  display: flex; align-items: center; gap: 0.7rem;
}
.wordmark__logo { height: 3rem; width: auto; flex: none; }
.wordmark__text { display: grid; line-height: 1.15; }
.wordmark__name {
  font-weight: 800; font-variation-settings: "wdth" 118;
  letter-spacing: -0.02em; font-size: 1.05rem; text-transform: uppercase;
  white-space: nowrap;
}
.wordmark__claim {
  font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Der Name muss schrumpfen dürfen. Mit nowrap kann der Flex-Container ihn
   nicht kürzen — auf dem iPhone lief er deshalb unter den Button. */
.wordmark { min-width: 0; }

@media (max-width: 30rem) {
  .site-head__inner { gap: var(--gap-s); }
  .wordmark { gap: 0.55rem; }
  .wordmark__logo { height: 2.5rem; }
  .wordmark__name {
    font-size: 0.85rem;
    white-space: normal;     /* zweizeilig ist besser als abgeschnitten */
    line-height: 1.12;
  }
  .wordmark__claim { display: none; }
  .btn--sm { padding-inline: 0.8rem; font-size: 0.82rem; }
}

.site-nav { display: flex; gap: clamp(0.75rem, 1.6vw, 1.75rem); margin-inline-start: auto; }
.site-nav a {
  text-decoration: none; font-size: var(--step--1); font-weight: 600;
  color: var(--ink-muted); padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--signal); }

.site-head__actions { display: flex; align-items: center; gap: var(--gap-s); }
.phone { text-decoration: none; display: grid; line-height: 1.15; text-align: end; }
.phone__label { font-size: 0.68rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.phone__number { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Zwei getrennte Umbruchpunkte statt einem gemeinsamen: Die Telefonnummer
   braucht viel Platz und geht zuerst, die Navigation hält länger durch.
   Bei einem gemeinsamen Punkt bei 60rem brach die Navigation im Bereich
   zwischen 960 und 1250 Pixeln zweizeilig um — gemessen bei 966 px. */
.site-nav a { white-space: nowrap; }

@media (max-width: 78rem) {
  .phone { display: none; }
}
@media (max-width: 64rem) {
  .site-nav { display: none; }
  .site-head__actions { margin-inline-start: auto; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

/* Zweispaltiger Hero: Text auf fester Fläche, Foto daneben.
   Der Text lag ursprünglich über dem Bild mit einem Verlaufsschleier. Das
   funktionierte, solange die Fotos dunkel waren — gemessene 3.77:1. Mit der
   hellen, aufgeräumten Werkstatt fiel derselbe Aufbau auf 1.42:1, und ein
   Schleier, der eine weiße Wand auf AA-Niveau abdunkelt, hätte genau die
   Sauberkeit zerstört, die das Bild zeigen soll. Getrennte Flächen lösen
   beides: garantierte 15:1 für den Text, unangetastetes Foto. */
/* Der Text liegt in einem ganz normalen .wrap-Container und sitzt dadurch
   zwangsläufig auf derselben Kante wie Wortmarke und alle Abschnitte. Das
   Foto wird absolut daneben gelegt und läuft nach rechts aus dem Bild.

   Vorher war die Spaltenbreite über eine Custom Property mit Prozentwert
   gerechnet und an zwei Stellen verwendet — im Raster bezog sich 100 % auf
   die Hero-Breite, im Innenabstand auf die Spaltenbreite. Bei schmalen
   Fenstern fiel die Abweichung nicht auf, bei 2000 px wäre die Headline an
   den Bildschirmrand gerutscht. */
.hero { border-bottom: 1px solid var(--hairline-soft); }

/* Bezugsrahmen für das absolut gesetzte Foto. Ohne ihn liefe das Bild über
   die volle Höhe des Hero und damit auch über die Faktenleiste darunter. */
.hero__stage { position: relative; }

.hero__content {
  position: relative; z-index: 1;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: grid; align-content: center;
  min-height: min(74vh, 41rem);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  /* 38 % bleiben rechts für das Foto frei, plus Abstand. Bei 40 % brach die
     Headline ab 1700 px in fünf Zeilen aus je einem Wort, und zwischen dem
     schmal gebliebenen Text und dem Foto stand ein handbreiter Streifen. */
  /* Nicht „38 %": Prozent im Innenabstand bezieht sich auf den umgebenden
     Block, also den ganzen Hero — bei 1920 px wären das 730 px, und der
     Text hätte 450 px übrig. Deshalb dieselbe Formel wie in der Breite. */
  padding-inline-end: calc(min(100% - 2.5rem, var(--wrap)) * 0.38 + 2rem);
}

/* Das Foto beginnt bei 62 % des Innenrasters: von der Mitte aus gerechnet
   also 12 % der Rasterbreite nach rechts. */
.hero__media {
  position: absolute; inset: 0 0 0 auto;
  left: calc(50% + min(calc(100% - 2.5rem), var(--wrap)) * 0.12);
  overflow: hidden;
}

.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}

/* Weicher Übergang statt harter Kante zwischen Fläche und Foto. */
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--bg) 0%,
    color-mix(in oklab, var(--bg) 50%, transparent) 9%,
    transparent 26%);
}

.hero__title {
  /* Gedeckelt, damit „Wir sagen vorher," auch bei 1216 px Raster auf eine
     Zeile passt. Die volle Stufe 4 (88 px) sprengte die Spalte. */
  font-size: min(var(--step-4), 4.4rem);
  font-variation-settings: "wdth" 112;
  margin-bottom: var(--gap-m);
}

/* Auf schmalen Geräten stapeln: Foto oben, Text darunter auf fester Fläche.
   Nebeneinander bliebe für beides zu wenig Breite. */
/* Ab hier stapeln: Unterhalb von 62rem blieben der Textspalte nur noch
   rund 490 px neben dem Foto — zu wenig für die Headline. */
@media (max-width: 62rem) {
  .hero__stage   { display: flex; flex-direction: column; }
  /* relative, nicht static: Bild und Schleier darin sind absolut gesetzt.
     Bei static verlieren sie ihren Bezugsrahmen, springen auf .hero__stage
     hoch und füllen den ganzen Hero — der Text lag dann über dem Foto. */
  .hero__media   { position: relative; inset: auto; order: 1; min-height: 42vh; }
  .hero__content { order: 2; min-height: 0; padding-inline-end: 0; }
  .hero__veil {
    background: linear-gradient(to bottom,
      transparent 55%, color-mix(in oklab, var(--bg) 60%, transparent) 82%, var(--bg) 100%);
  }
}

.hero__lead {
  font-size: var(--step-1);
  color: var(--ink-muted);
  /* Keine eigene Breite: die Spalte begrenzt schon auf rund 55 Zeichen.
     Mit 44ch blieb rechts neben dem Absatz eine Lücke bis zum Foto. */
  max-width: none;
  margin-bottom: var(--gap-m);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); }

.hero__facts {
  grid-column: 1 / -1; grid-row: 2;
  width: min(100% - 2.5rem, var(--wrap));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--hairline-soft);
  border-top: 1px solid var(--hairline-soft);
}
.hero__facts > div { background: var(--bg); padding: var(--gap-m) var(--gap-s) var(--gap-m) 0; }
.hero__facts dt {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-muted); margin-bottom: 0.35rem;
}
.hero__facts dd { margin: 0; font-weight: 700; font-size: var(--step-0); }
.hero__facts > div + div { padding-inline-start: var(--gap-m); }

/* ── Abschnitte ─────────────────────────────────────────────────────── */

.section { padding-block: var(--gap-xl); }
.section--tight { padding-block: var(--gap-l); }
.section--surface { background: var(--surface); }

.section__head { max-width: 52rem; margin-bottom: var(--gap-l); }
.section__title { font-size: var(--step-3); margin-bottom: var(--gap-s); }
.section__title--sm { font-size: var(--step-1); }
.section__intro { color: var(--ink-muted); font-size: var(--step-1); max-width: 60ch; }

/* ── Preisliste ─────────────────────────────────────────────────────── */

.pricelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }

.pricerow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: var(--gap-m);
  padding: var(--gap-m) var(--gap-s);
  border-bottom: 1px solid var(--hairline-soft);
  transition: background var(--fast) var(--ease);
}
.pricerow:hover { background: var(--surface); }

.pricerow__label { font-size: var(--step-1); letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.pricerow__desc { color: var(--ink-muted); font-size: var(--step--1); max-width: 62ch; margin: 0; }

.pricerow__meta { text-align: end; display: grid; gap: 0.15rem; }
.pricerow__price {
  font-weight: 800; font-size: var(--step-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pricerow__time { font-size: 0.75rem; color: var(--ink-muted); white-space: nowrap; }

.pricerow__book {
  align-self: center;
  text-decoration: none; font-weight: 700; font-size: var(--step--1);
  padding: 0.55rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.pricerow__book:hover {
  background: var(--signal); color: var(--on-signal); border-color: var(--signal);
}

.pricenote {
  margin-top: var(--gap-m); color: var(--ink-muted);
  font-size: var(--step--1); max-width: 68ch;
}

@media (max-width: 46rem) {
  .pricerow { grid-template-columns: 1fr auto; }
  .pricerow__book { grid-column: 2; justify-self: end; }
}

/* ── Bildband mit Zitat ─────────────────────────────────────────────── */

.band {
  /* Drei Spalten: Bild, Textzelle, Randspalte. Die Randspalte trägt exakt den
     Seitenrand — dadurch endet der Zitattext auf derselben Kante wie jeder
     andere Block. Gerechnet mit 100 % auf .band selbst, das über die volle
     Breite läuft; in der Zelle würde sich 100 % auf die halbe Breite beziehen
     und die Kante um die Scrollleistenbreite verfehlen. */
  margin: 0;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    max(1.25rem, calc((100% - var(--wrap)) / 2));
  align-items: stretch;
  background: var(--surface);
}
.band > img {
  grid-column: 1; grid-row: 1;
  width: 100%; height: 100%; object-fit: cover; min-height: 22rem;
}
.band > .band__quote {
  grid-column: 2; grid-row: 1;
  display: grid; align-content: center;
  padding: var(--gap-l);
  padding-inline-end: 0;
}
.band__quote blockquote { margin: 0; }
.band__quote p {
  font-size: var(--step-2); font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance;
  max-width: 24ch;
}

/* Gespiegelt: Randspalte links, Bild rechts. Sorgt dafür, dass die beiden
   Bildbänder auf der Seite nicht wie eine Wiederholung wirken. */
.band--flip {
  grid-template-columns:
    max(1.25rem, calc((100% - var(--wrap)) / 2))
    minmax(0, 1fr)
    minmax(0, 1fr);
}
.band--flip > img { grid-column: 3; }
.band--flip > .band__quote {
  grid-column: 2;
  padding-inline: 0 var(--gap-l);
}

@media (max-width: 52rem) {
  .band, .band--flip { grid-template-columns: 1fr; }
  .band > img, .band--flip > img { grid-column: 1; grid-row: auto; min-height: 15rem; }
  .band > .band__quote, .band--flip > .band__quote {
    grid-column: 1; grid-row: auto; order: 2;
    padding: var(--gap-l) 1.25rem;
  }
}

/* ── Grenzen ────────────────────────────────────────────────────────── */

.limits { list-style: none; margin: var(--gap-m) 0 0; padding: 0; }
.limits li {
  padding: var(--gap-s) 0 var(--gap-s) 2rem;
  border-top: 1px solid var(--hairline-soft);
  position: relative;
  color: var(--ink-muted);
}
.limits li::before {
  content: "—";
  position: absolute; inset-inline-start: 0;
  color: var(--signal); font-weight: 800;
}

/* ── Zweispalter ────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--gap-l);
  align-items: start;
}
.split__media { margin: 0; }
.split__media img { width: 100%; border-radius: var(--radius); display: block; }
/* Name unter dem Porträt. Ein Gesicht ohne Namen bleibt ein Stockfoto. */
.split__media figcaption {
  margin-top: var(--gap-s);
  font-weight: 700; font-size: var(--step--1);
}
.split__media figcaption span {
  display: block; margin-top: 0.15em;
  font-weight: 500; color: var(--ink-muted);
}
.split__text p { color: var(--ink-muted); max-width: 60ch; }
.split__text .btn { margin-top: var(--gap-s); }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }

/* ── Ablauf ─────────────────────────────────────────────────────────── */

.steps {
  list-style: none; margin: var(--gap-l) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-l);
  counter-reset: step;
}
.step { padding-top: var(--gap-s); border-top: 2px solid var(--signal); }
.step__num {
  display: block; font-size: var(--step-2); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--signal);
  line-height: 1; margin-bottom: var(--gap-s);
}
.step__title { font-size: var(--step-1); margin-bottom: 0.5rem; }
.step p { color: var(--ink-muted); font-size: var(--step--1); }

/* ── Buchung ────────────────────────────────────────────────────────── */

.booking { margin-top: var(--gap-l); }

/* min-width: 0 ist hier nicht optional. Browser geben <fieldset> von Haus
   aus min-width: min-content — das Feld wächst dann auf die Breite seines
   breitesten Inhalts, statt ihn scrollen zu lassen. Auf dem Handy hat das
   die Seite um 837 px über den Rand geschoben (gemessen bei 375 px), und
   die Tagesleiste konnte gar nicht erst scrollen. */
.booking__step {
  border: 0; padding: 0; margin: 0 0 var(--gap-l);
  min-width: 0;
}
.booking__legend {
  display: flex; align-items: baseline; gap: var(--gap-s); flex-wrap: wrap;
  font-size: var(--step-1); font-weight: 800;
  font-variation-settings: "wdth" 108; letter-spacing: -0.02em;
  padding: 0 0 var(--gap-s);
  margin-bottom: var(--gap-m);
  border-bottom: 1px solid var(--hairline);
  width: 100%;
}
.booking__stepnum {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--signal);
  font-variation-settings: "wdth" 100;
}

/* Leistungsauswahl
   ------------------------------------------------------------------------
   Die Kacheln trugen zunächst den vollen Leistungsnamen. „Hauptuntersuchung
   mit Abgasuntersuchung“ brach dann zweizeilig um, die Zeile wurde höher als
   ihre Nachbarn, und der Preis rückte an den Text heran. Gelöst an der
   Wurzel: In der Auswahl steht die Kurzform aus site.php ('short'), der
   vollständige Name steht in der Preisliste darüber. Damit passt jede
   Beschriftung in eine Zeile und alle Felder sind gleich hoch.

   Der Punkt links ist nicht Zierde: Die Auswahl darf nicht allein an der
   Farbe hängen. */
.servicegrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap-xs);
}
.servicepick { position: relative; display: block; cursor: pointer; }
.servicepick input { position: absolute; opacity: 0; width: 0; height: 0; }

.servicepick__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.servicepick__mark {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid var(--hairline);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.servicepick input:checked + .servicepick__body .servicepick__mark {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: inset 0 0 0 3px var(--surface);
}

.servicepick:hover .servicepick__body { border-color: var(--ink-muted); }
.servicepick input:checked + .servicepick__body {
  border-color: var(--signal);
  background: color-mix(in oklab, var(--signal) 12%, var(--surface));
}
.servicepick input:focus-visible + .servicepick__body {
  outline: 2px solid var(--signal); outline-offset: 2px;
}

.servicepick__label {
  font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.servicepick__price {
  font-size: var(--step--1); color: var(--ink-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.servicepick input:checked + .servicepick__body .servicepick__price { color: var(--ink); }

/* Tagesleiste */
.dayscroll {
  display: flex; gap: var(--gap-xs);
  max-width: 100%;
  overflow-x: auto; padding-bottom: var(--gap-s);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;   /* kein versehentliches Zurückblättern */
}
.daypick { position: relative; flex: 0 0 auto; scroll-snap-align: start; }
.daypick input { position: absolute; opacity: 0; width: 0; height: 0; }
.daypick__body {
  display: grid; justify-items: center; gap: 0.1rem;
  min-width: 4.5rem; padding: 0.7rem 0.75rem;
  border: 1px solid var(--hairline-soft); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.daypick__wd { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); }
.daypick__d { font-weight: 800; font-size: var(--step-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.daypick__free { font-size: 0.66rem; color: var(--ink-muted); }
.daypick:hover .daypick__body { border-color: var(--ink-muted); }
.daypick input:checked + .daypick__body {
  border-color: var(--signal);
  background: color-mix(in oklab, var(--signal) 16%, var(--surface));
}
.daypick input:focus-visible + .daypick__body { outline: 2px solid var(--signal); outline-offset: 2px; }
/* Ausgebuchte Tage bleiben lesbar. Ein auf 0.4 heruntergedimmter Tag ist
   für ältere Augen praktisch weg — und die Information „belegt“ ist für die
   Entscheidung genauso wichtig wie „frei“. */
.daypick input:disabled + .daypick__body {
  cursor: not-allowed;
  background: color-mix(in oklab, var(--belegt) 7%, transparent);
  border-style: dashed; border-color: color-mix(in oklab, var(--belegt) 45%, transparent);
}
.daypick input:disabled + .daypick__body .daypick__d { color: var(--ink-muted); }
/* Der Zähler trägt die Farbe: grün, solange es Zeiten gibt; rot, wenn nicht. */
.daypick__free { color: var(--frei); font-weight: 700; }
.daypick input:disabled + .daypick__body .daypick__free { color: var(--belegt); }
.daypick input:checked + .daypick__body .daypick__wd,
.daypick input:checked + .daypick__body .daypick__free { color: var(--ink); }

/* Zeitraster */
.slotgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: var(--gap-xs);
  margin-top: var(--gap-m);
}
.slotpick { position: relative; }
.slotpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.slotpick__body {
  display: grid; place-items: center;
  min-height: 3rem; padding: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--frei) 55%, transparent); border-radius: var(--radius);
  background: color-mix(in oklab, var(--frei) 9%, var(--surface));
  font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.slotpick:hover .slotpick__body { border-color: var(--frei); }
.slotpick input:checked + .slotpick__body {
  background: var(--signal); border-color: var(--signal); color: var(--on-signal);
}
.slotpick input:focus-visible + .slotpick__body { outline: 2px solid var(--signal); outline-offset: 2px; }
/* Belegt: rot, gestrichelt, durchgestrichen. Farbe allein reicht nicht —
   wer Rot und Grün nicht unterscheidet, sieht die Strichelung. */
.slotpick input:disabled + .slotpick__body {
  color: var(--belegt);
  background: color-mix(in oklab, var(--belegt) 7%, transparent);
  border-style: dashed; border-color: color-mix(in oklab, var(--belegt) 45%, transparent);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--belegt) 60%, transparent);
}
.slotpick:hover input:disabled + .slotpick__body { border-color: color-mix(in oklab, var(--belegt) 45%, transparent); }

.booking__hint { color: var(--ink-muted); font-size: var(--step--1); margin: 0; grid-column: 1 / -1; }

.booking__legendkey { display: flex; gap: var(--gap-m); margin-top: var(--gap-s); font-size: var(--step--1); color: var(--ink-muted); }
.key { display: inline-flex; align-items: center; gap: 0.45rem; }
.key::before {
  content: ""; width: 0.9rem; height: 0.9rem; border-radius: 2px;
  border: 1px solid var(--hairline);
}
.key--free::before {
  background: color-mix(in oklab, var(--frei) 9%, var(--surface));
  border-color: color-mix(in oklab, var(--frei) 55%, transparent);
}
.key--taken::before {
  border-style: dashed; border-color: color-mix(in oklab, var(--belegt) 45%, transparent);
  background: color-mix(in oklab, var(--belegt) 7%, transparent);
}

/* Felder
   ------------------------------------------------------------------------
   Bewusst ein festes Raster statt auto-fit. Mit auto-fit bekamen alle Felder
   dieselbe Breite — ein Kennzeichen so breit wie eine Fahrzeugbeschreibung —
   und das letzte Feld blieb allein in seiner Zeile stehen. Die Spannen unten
   folgen der Länge des erwarteten Inhalts.

   `align-items: start` ist der zweite Teil der Reparatur: Ohne die Angabe
   dehnten sich die Felder ohne Hinweistext auf die Höhe der Zeile, wodurch
   ihre Eingabefelder höher wurden als das danebenliegende Telefonfeld. */
.fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap-m);
  align-items: start;
  /* Keine Breitenbegrenzung: das Raster endet dort, wo auch der Kalender
     darüber endet. Ein schmaleres Formular sah aus wie versehentlich. */
}
.field {
  margin: 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  grid-column: span 6;
}

.field--name    { grid-column: span 2; }
.field--phone   { grid-column: span 2; }
.field--email   { grid-column: span 2; }
.field--vehicle { grid-column: span 4; }
.field--plate   { grid-column: span 2; }
.field--wide    { grid-column: span 6; }

/* Unter 64rem einspaltig. Ein zweispaltiges Restraster ließe je nach
   Feldzahl wieder eine Lücke stehen; eine Spalte kann das nicht. */
@media (max-width: 64rem) {
  .fields { grid-template-columns: 1fr; }
  .field, .field--name, .field--phone, .field--email,
  .field--vehicle, .field--plate, .field--wide { grid-column: 1; }
}
.field label { font-weight: 600; font-size: var(--step--1); }
.req { color: var(--signal); }

.field input, .field textarea {
  font: inherit; font-size: var(--step-0);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  min-height: 3rem;
  width: 100%;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: oklch(0.63 0.008 250); }
.field input:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field input:focus, .field textarea:focus { border-color: var(--signal); background: var(--surface-raised); }

.field__hint { font-size: 0.78rem; color: var(--ink-muted); }
.field__error { font-size: 0.82rem; color: var(--warn); font-weight: 600; }
.field__error:empty { display: none; }
.field--invalid input, .field--invalid textarea { border-color: var(--warn); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.booking__submit { display: grid; gap: var(--gap-s); justify-items: start; }
.booking__smallprint { color: var(--ink-muted); font-size: var(--step--1); max-width: 56ch; }

.booking__status {
  margin-top: var(--gap-m); padding: var(--gap-s) var(--gap-m);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  font-weight: 600;
}
.booking__status:empty { display: none; }
.booking__status[data-tone="ok"]   { border-color: var(--ok);   color: var(--ok); }
.booking__status[data-tone="err"]  { border-color: var(--warn); color: var(--warn); }

.notice { padding: var(--gap-s) var(--gap-m); border: 1px solid var(--hairline); border-radius: var(--radius); }
.notice--warn { border-color: var(--warn); }

/* ── Kontakt ────────────────────────────────────────────────────────── */

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--gap-l); align-items: start; }
.contact address { font-style: normal; line-height: 1.8; }
.contact__block--media img { width: 100%; border-radius: var(--radius); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--gap-m); margin: 0 0 var(--gap-m); }
.hours dt { color: var(--ink-muted); }
.hours dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.contact__note { color: var(--ink-muted); font-size: var(--step--1); }

/* ── Fußzeile ───────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--hairline-soft); padding-block: var(--gap-l); }
.site-foot__inner {
  display: flex; flex-wrap: wrap; gap: var(--gap-m);
  justify-content: space-between; align-items: center;
  color: var(--ink-muted); font-size: var(--step--1);
}
.site-foot p { margin: 0; }
.site-foot__links { display: flex; gap: var(--gap-m); }

/* Urhebervermerk: eigene Zeile unter Adresse und Links, kleiner als beides.
   Die Wortmarke erbt die gedämpfte Textfarbe; nur ihre drei Quadrate sind
   grün. Beim Überfahren wird der Name weiß, das Logo zieht mit. */
.site-foot__credit {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs) var(--gap-s);
  padding-top: var(--gap-s); border-top: 1px solid var(--hairline-soft);
  font-size: 0.82em;
}
.site-foot__credit-label { opacity: 0.8; }
.umsetzung {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: inherit; text-decoration: none;
}
.umsetzung__logo { display: block; width: auto; height: 2em; flex: none; }
.umsetzung__name { font-weight: 600; letter-spacing: 0.01em; }
a.umsetzung:hover, a.umsetzung:focus-visible { color: var(--ink); }

/* ── Bewegung ───────────────────────────────────────────────────────── */

/* Der Hero baut sich einmal auf. Wichtig: Startzustand ist sichtbar —
   die Animation hebt an, statt Inhalt zu verstecken. Bleibt das Skript
   oder die Animation aus, steht trotzdem alles da. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__lead, .hero__actions {
    animation: rise var(--slow) var(--ease) backwards;
  }
  .hero__lead    { animation-delay: 90ms; }
  .hero__actions { animation-delay: 170ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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

/* ── Ausstattung ────────────────────────────────────────────────────── */

/* Zweispaltig mit Trennlinien statt Kacheln — dieselbe Grammatik wie die
   Leistungsliste, damit die Seite nicht in zwei Gestaltungswelten zerfällt. */
.kann {
  margin: 0;
  display: grid;
  /* Dieselbe Umbruchschwelle wie bei den häufigen Fragen. Vorher brachen die
     beiden benachbarten Abschnitte bei gleicher Fensterbreite unterschiedlich
     um — drei Spalten über zwei —, was wie ein Rastersprung aussieht. */
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 0 var(--gap-xl);
}
.kann__item {
  padding: var(--gap-m) 0;
  border-top: 1px solid var(--hairline-soft);
}
.kann__titel {
  font-weight: 800; font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em; font-size: var(--step-1);
  margin-bottom: 0.35rem;
}
.kann__text { margin: 0; color: var(--ink-muted); font-size: var(--step--1); max-width: 52ch; }

/* ── Häufige Fragen ─────────────────────────────────────────────────── */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--gap-l) var(--gap-xl);
}
.faq__item { max-width: 56ch; }
.faq__frage {
  font-size: var(--step-1); letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  /* Fragezeichen hängt aus, damit die Fragen als Block lesbar bleiben */
  text-wrap: balance;
}
.faq__antwort { color: var(--ink-muted); margin: 0; }

@media (max-width: 46rem) {
  .faq { gap: var(--gap-l); }
}

/* ── Textseiten (Impressum, Datenschutz) ────────────────────────────── */

.textseite { max-width: 44rem; }
.textseite h1 { margin-bottom: var(--gap-l); }
.textseite__h2 {
  font-size: var(--step-1);
  margin: var(--gap-l) 0 var(--gap-s);
  padding-top: var(--gap-s);
  border-top: 1px solid var(--hairline-soft);
}
.textseite p { color: var(--ink-muted); max-width: 68ch; }
.textseite strong { color: var(--ink); }
.textseite a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; }

/* Noch nicht vergebene Pflichtangabe. Unaufgeregt gesetzt, weil es auf der
   Seite eine gewöhnliche Auskunft ist und keine Warnung an den Betreiber. */
.offen { color: var(--ink-muted); font-style: italic; }