/* =========================================================================
   KFZ-Reparatur & TAXI Wimmer

   Blau und Rot stammen seit 19.08.2026 aus dem echten Logo (WF-Monogramm),
   mit der Pipette gezogen statt wie vorher aus Screenshots geschaetzt.
   Die Korrektur war ein Gewinn, kein Kompromiss:
     Weiss auf Blau  9,57 -> 10,92
     Weiss auf Rot   4,88 ->  6,28
   Das geschaetzte Rot (#E30613) kam als Text auf sand-hell nur auf 4,34
   und lag damit UNTER der AA-Schwelle von 4,5. Das Logorot erreicht 5,58.
   ========================================================================= */

:root {
  --wimmer-blau:      #203A75;   /* aus dem Logo */
  --wimmer-blau-hell: #2E52A0;   /* daraus aufgehellt, Links: 6,59 auf sand-hell */
  --wimmer-rot:       #C30024;   /* aus dem Logo */
  --wimmer-sand:      #EADFC8;
  --sand-hell:        #F6F1E7;
  --anthrazit:        #16191F;
  --instrument:       #0C0E12;
  --bernstein:        #FFB000;

  --grau-text:  #4A5058;
  --grau-linie: #C9C0AD;
  --weiss:      #FFFFFF;

  --spur-werkstatt: var(--wimmer-blau);
  --spur-taxi:      var(--wimmer-rot);

  --mass-text:  68ch;
  --kante:      6px;          /* Breite der Spur-Kante */
  --rand:       clamp(1.25rem, 5vw, 4rem);

  --kopfhoehe:  4.5rem;       /* klebender Kopf, Handy */
  --griff:      2.75rem;      /* kleinste Flaeche, die ein Finger trifft */
}

@media (min-width: 48rem) {
  :root { --kopfhoehe: 5rem; }
}

/* ---------- Schriften, selbst gehostet (Konzept Abschnitt 9) ----------

   Archivo und IBM Plex Sans sind VARIABLE Schriften: eine Datei traegt
   alle Schnitte, der Gewichtsbereich im Deskriptor stellt die Achse ein.
   Deshalb steht hier je Untermenge nur EINE Datei statt einer je Gewicht.

   Vorher lag dieselbe Datei unter zwei Namen (archivo-600 und archivo-800
   waren byteweise identisch), und der Browser lud sie zweimal — rund
   134 kB unnoetig. Geholt werden sie mit werkzeug/schriften-holen.py;
   das Skript bricht ab, wenn wieder Doppelte entstehen.

   IBM Plex Mono ist nicht variabel, dort bleiben zwei Schnitte.
   Der Abruf bei Google passiert beim Bauen, nie im Browser des Besuchers.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600 800; 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: 600 800; 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;
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/plexsans-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: 'Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/plexsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/plexmono-400-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: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/plexmono-600-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: 'Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/plexmono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DSEG7'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/dseg7classic-bold.woff2') format('woff2');
}

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

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand-hell);
  color: var(--anthrazit);
  font-family: 'Plex Sans', system-ui, sans-serif;
  /* 1.125rem statt 18px: rem rechnet gegen die Schriftgroesse, die der
     Nutzer im Browser eingestellt hat. Als feste Pixelangabe wuchsen bei
     vergroesserter Schrift nur Ueberschriften und Knoepfe mit — der
     Lesetext blieb stehen. Genau falschherum fuer diese Zielgruppe.   */
  font-size: 1.125rem;             /* Konzept: 18px, nicht 16px */
  line-height: 1.6;
  /* Kein overflow-x: hidden. Das versteckt nur, dass etwas zu breit ist,
     und macht den ueberstehenden Teil unerreichbar statt sichtbar. Dass
     nichts uebersteht, prueft messen.sh bei echten 390px nach.            */
}

/* Deutsche Komposita sind laenger als jede Handybreite. Ohne Trennung
   schiebt "Korrosionsschadenreparatur" die ganze Seite auf. Die Trennung
   braucht lang="de" am <html> — das steht dort.                          */
h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

p, li, dd, dt, td, th, figcaption { hyphens: auto; overflow-wrap: break-word; }

/* Ziele von Sprungmarken duerfen nicht unter dem klebenden Kopf landen. */
[id] { scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }

h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 600; }

p { margin: 0 0 1em; max-width: var(--mass-text); }

a { color: var(--wimmer-blau-hell); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--wimmer-blau); }

:focus-visible {
  outline: 3px solid var(--wimmer-rot);
  outline-offset: 3px;
}

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

/* Sichtbarer Platzhalter — alles, was noch von Wimmer kommt */
.offen {
  background: repeating-linear-gradient(-45deg, #FFE8A3, #FFE8A3 8px, #FFD866 8px, #FFD866 16px);
  color: #4A3200;
  padding: 0.1em 0.4em;
  font-weight: 600;
  border-bottom: 2px dashed #A67C00;
}

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

.sprungmarke {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--wimmer-blau); color: var(--weiss); padding: 0.75rem 1.25rem;
}
.sprungmarke:focus { left: 0; top: 0; }

/* ---------- Grundraster: bewusst asymmetrisch ----------
   Inhalt sitzt nicht mittig in einer Spalte, sondern in einem Raster mit
   schmaler Marginalspalte links. Ueberschriften ragen dort hinein.
   Das bricht das ueblich zentrierte Sektionsmuster.                       */

.bahn { padding-inline: var(--rand); }

.raster {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
}

/* Rasterkinder duerfen nicht breiter werden als ihre Spalte. Ohne das gilt
   min-width: auto, und ein breiter Inhalt — hier die Tariftabelle — schiebt
   die Spalte auf. Die Tabelle war dadurch 554px breit auf einem 390px
   breiten Bildschirm, und overflow-x am Huellkasten blieb wirkungslos.    */
.raster > * { min-width: 0; }

@media (min-width: 60rem) {
  .raster { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); }
  .raster > .voll { grid-column: 1 / -1; }
  /* Inhalt neben der Marginalspalte — auf schmalen Bildschirmen gibt es
     diese Spalte nicht, dort waere grid-column: 2 eine erfundene Spalte. */
  .raster > .neben-titel { grid-column: 2; }
}

/* Abschnittstitel in der Marginalspalte, mit Linie darueber */
.abschnitt-titel {
  border-top: 3px solid var(--anthrazit);
  padding-top: 0.75rem;
  align-self: start;
}
.abschnitt-titel h2 { margin-bottom: 0.25rem; }
.abschnitt-titel .beiwort {
  font-family: 'Plex Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grau-text);
}

section { padding-block: clamp(3rem, 8vw, 6rem); }

/* Wechselnde Flaechen. Sand ist hier bewusst NICHT dabei: Konzept und
   CLAUDE.md sagen, Sand sei ruhige Flaeche und nie Untergrund fuer
   Fliesstext. Genau das war es aber auf vier von sechs Seiten, auf der
   Taxiseite 1740px am Stueck — damit wurde Sand zum zweiten Texttraeger
   und konnte nicht mehr die Flaeche sein, auf der Blau atmet. Die Baender
   sind jetzt weiss; Sand bleibt Kopfleiste und Buehnenkeil vorbehalten. */
.band-weiss { background: var(--weiss); }

/* ---------- Kopf ---------- */

.kopf {
  background: var(--wimmer-sand);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--grau-linie);
}

.kopf-innen {
  max-width: 1180px; margin-inline: auto;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  min-height: var(--kopfhoehe);
}


.marke {
  color: var(--wimmer-blau); text-decoration: none; margin-right: auto;
  padding-block: 0.4rem;
  display: flex; align-items: center; gap: 0.6rem;
}

/* Die Bildmarke traegt Blau und Rot bereits in sich — deshalb steht sie
   allein und bekommt keinen zusaetzlichen Rahmen. */
.marke-text { display: block; }
.marke-zeichen {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
}
@media (max-width: 23rem) { .marke-zeichen { width: 2rem; height: 2rem; } }
@media (min-width: 48rem) { .marke-zeichen { width: 2.9rem; height: 2.9rem; } }
.marke-haupt {
  display: block;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 1.4rem; line-height: 1; text-transform: uppercase;
  letter-spacing: -0.01em;
}
.marke-neben {
  display: block; margin-top: 0.15rem;
  font-size: 0.68rem; font-weight: 600; line-height: 1.25;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau-text);
}

/* Anrufknopf — steht bewusst ausserhalb des Menues */
.anrufknopf {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: var(--griff); padding-inline: 0.7rem;
  background: var(--wimmer-blau); color: var(--weiss);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; white-space: nowrap;
}
.anrufknopf:hover { background: var(--wimmer-blau-hell); color: var(--weiss); }
.anrufknopf .hoerer { font-size: 1.05rem; }
/* Ziffern auf jeder Breite. Vorher stand mobil nur das Wort "Anrufen"
   da und die Nummer erst im Fuss — ausgerechnet auf der Breite, auf der
   fast alle Besucher kommen. Aeltere Anrufer lesen die Nummer und waehlen
   selbst, und die Wiedererkennung "das ist die Nummer vom Auto"
   funktioniert nur mit sichtbaren Ziffern. Wird der Platz knapp, weicht
   zuerst die Beizeile unter dem Markennamen, dann das Wort "Menue".      */
.anrufknopf .anrufnummer { font-family: 'Plex Mono', monospace; }

/* Menueknopf */
.menueknopf {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: var(--griff); padding-inline: 0.6rem;
  background: transparent; border: 2px solid var(--wimmer-blau);
  color: var(--wimmer-blau); cursor: pointer;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.95rem;
}
.menuestriche {
  display: block; position: relative;
  width: 1.15rem; height: 2px; background: currentColor;
  box-shadow: 0 -0.4rem 0 currentColor, 0 0.4rem 0 currentColor;
}
.menue-offen .menuestriche {
  box-shadow: none; transform: rotate(45deg);
}
.menue-offen .menuestriche::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor; transform: rotate(90deg);
}

/* Navigation: auf dem Handy ein aufklappendes Feld unter der Kopfzeile.
   Ausgeblendet wird sie nur, wenn JavaScript laeuft (Klasse js am <html>) —
   sonst waere sie ohne Skript unerreichbar statt bloss unschoen.          */
.navigation {
  order: 3;
  display: flex; flex-direction: column;
  /* Volle Breite bis an beide Raender: die Breite muss die aufgehobene
     Polsterung mitzaehlen, sonst endet das Feld rechts vor dem Rand. */
  width: calc(100% + var(--rand) * 2);
  margin-inline: calc(var(--rand) * -1);
  border-top: 1px solid var(--grau-linie);
}
html.js .navigation { display: none; }
html.js.menue-offen .navigation { display: flex; }

.navigation a {
  display: flex; align-items: center; min-height: 3.25rem;
  padding-inline: var(--rand);
  color: var(--anthrazit); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--grau-linie);
  border-left: var(--kante) solid transparent;
}
.navigation a:hover { background: var(--sand-hell); }
/* Aktiver Menuepunkt traegt die Farbe seiner Spur */
.navigation a[aria-current="page"] { border-left-color: var(--anthrazit); }
.navigation a.spur-werkstatt[aria-current="page"] { border-left-color: var(--spur-werkstatt); }
.navigation a.spur-taxi[aria-current="page"]      { border-left-color: var(--spur-taxi); }

/* Die Nummer noch einmal ausgeschrieben, unten im aufgeklappten Menue */
/* Muss .navigation a schlagen — sonst gewinnt dort color: anthrazit und
   die Nummer steht dunkelgrau auf Blau. */
.navigation a.menue-telefon {
  background: var(--wimmer-blau); color: var(--weiss);
  font-family: 'Plex Mono', monospace; font-size: 1.15rem;
  border-bottom: 0;
  /* Zwischen Hoerer und Nummer steht ein Leerzeichen im Markup — im
     Flex-Kasten faellt es weg, der Abstand muss hier gesetzt werden. */
  gap: 0.55rem;
}
.navigation a.menue-telefon:hover { background: var(--wimmer-blau-hell); color: var(--weiss); }

@media (min-width: 48rem) {
  .menueknopf { display: none; }
  html.js .navigation { display: flex; }

  .navigation {
    order: 1; width: auto; margin-inline: 0; border-top: 0;
    flex-direction: row; align-items: center; gap: 1.5rem;
  }
  .navigation a {
    min-height: 0; padding: 0.35rem 0;
    border-bottom: var(--kante) solid transparent; border-left: 0;
  }
  .navigation a:hover { background: none; border-bottom-color: var(--grau-linie); }
  .navigation a[aria-current="page"] { border-bottom-color: var(--anthrazit); border-left: 0; }
  .navigation a.spur-werkstatt[aria-current="page"] { border-bottom-color: var(--spur-werkstatt); }
  .navigation a.spur-taxi[aria-current="page"]      { border-bottom-color: var(--spur-taxi); }
  /* Muss .navigation a schlagen, sonst gewinnt dessen display: flex und
     die Nummer steht auf dem Desktop zweimal im Kopf. */
  .navigation a.menue-telefon { display: none; }

  .anrufknopf { order: 2; }
  .anrufknopf .anrufnummer { font-size: 1.05rem; }
  .marke-haupt { font-size: 1.5rem; }
}

/* ---------- Die Diagonale: genau einmal, am Seitenkopf ---------- */

/* Der Schnitt liegt jetzt oben, zwischen Sand und Blau, und damit an der
   Kante, die das Konzept nennt — vorher sass er unten zwischen Blau und dem
   neutralen Seitenhintergrund und verband die beiden Markenflaechen gar
   nicht. 7vw Versatz sind rund 4 Grad und bleiben ueber alle Breiten
   gleich; die vorherigen 2,2 Grad lasen sich wie eine schief gesetzte
   Kante statt wie eine Setzung. Die Unterkante ist dafuer gerade.        */
.buehne {
  position: relative;
  background: var(--wimmer-blau);
  color: var(--weiss);
  padding-block: calc(clamp(2rem, 5vw, 3rem) + 4vw) clamp(2.5rem, 7vw, 4.5rem);
  margin-bottom: -1px;
}
/* Der Sandkeil liegt oben auf dem Blau, nicht umgekehrt. So bleibt die
   Grundfarbe des Kastens die, auf der der Text tatsaechlich steht — sonst
   messen Pruefwerkzeuge weisse Schrift gegen Sand und melden zu Recht
   Alarm, obwohl das Auge Blau sieht. */
.buehne::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 7vw;
  background: var(--wimmer-sand);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.buehne-innen { position: relative; }
.buehne h1 { color: var(--weiss); max-width: 15ch; }
.buehne .vorzeile {
  font-family: 'Plex Mono', monospace; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--wimmer-sand); margin-bottom: 1.25rem;
}
.buehne .nachsatz {
  font-size: 1.15rem; color: #D8E2F0; max-width: 46ch; margin-bottom: 0;
}
.buehne-innen { max-width: 1180px; margin-inline: auto; }

/* Bei 1280px stand die Ueberschrift links und die gesamte rechte Haelfte
   war leeres Blau — und oberhalb von rund 780px gab es nichts zum
   Antippen. Rechts steht jetzt das Instrumentenfeld als Vorschau, das
   gleichzeitig das einzige unverwechselbare Merkmal der Seite auf die
   meistbesuchte Seite holt.                                            */
.buehne-raster { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .buehne-raster { grid-template-columns: 1.35fr 1fr; align-items: center; gap: 3rem; }
}
.instrument--vorschau {
  display: block; text-decoration: none; color: #8A8F98;
  border-color: #39404B;
}
.instrument--vorschau:hover { border-color: var(--bernstein); color: #A7ACB5; }
.instrument--vorschau .hinfuehrung {
  font-family: 'Plex Sans', sans-serif; font-size: 0.95rem; font-weight: 600;
  color: var(--wimmer-sand); margin: 0.4rem 0 0;
}

/* Zwei bis drei Abschnitte brechen aus dem Schema aus, damit der
   Sektionsrhythmus nicht auf jeder Seite identisch ist: Titel oben,
   Inhalt ueber die volle Breite. */
.raster--voll { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .raster--voll { grid-template-columns: minmax(0, 1fr); }
  .raster--voll > .neben-titel { grid-column: 1; }
  .raster--voll .abschnitt-titel { max-width: 46rem; }
}

/* Unterseiten tragen dieselbe Diagonale, nur flacher aufgebaut. Sie ist
   das einzige geerbte Formmerkmal — auf fuenf von sechs Seiten zu fehlen
   hiess, es gar nicht zu haben.                                          */
.buehne.schlank {
  padding-block: calc(clamp(1.5rem, 4vw, 2.25rem) + 3vw) clamp(2rem, 5vw, 3rem);
}
.buehne.schlank h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 20ch; }

/* ---------- Die Weiche: zwei Spuren, bewusst ungleich ---------- */

.weiche {
  display: grid; gap: 1px;
  background: var(--grau-linie);
  border: 1px solid var(--grau-linie);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 48rem) {
  /* 1,6 zu 1 statt 1,18 zu 1. Vorher waren das gemessene 623px gegen 525px,
     also 54:46 — kein Gewicht, sondern ein Zweispalter. Und die schwerere
     Seite war die Werkstatt, obwohl Krankenfahrten das wirtschaftliche
     Kerngeschaeft sind. Jetzt liegt das Gewicht auf dem Taxi, im Markup
     steht es zuerst und damit auf dem Handy auch oben.                  */
  .weiche { grid-template-columns: 1.6fr 1fr; }
}

.spur {
  background: var(--weiss);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-left: var(--kante) solid var(--farbe);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.spur--werkstatt { --farbe: var(--spur-werkstatt); }
.spur--taxi      { --farbe: var(--spur-taxi); }

.spur:hover { background: var(--sand-hell); }
.spur:hover .spur-mehr { text-decoration: underline; }

.spur-label {
  font-family: 'Plex Mono', monospace; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--farbe); font-weight: 600; margin-bottom: 0.5rem;
}
.spur h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 0.4rem; }
.spur p { color: var(--grau-text); flex: 1; }
.spur-mehr { font-weight: 600; color: var(--farbe); margin-top: 0.5rem; }
.spur-mehr::after { content: " →"; }

/* Die leichtere Spur sitzt versetzt — Asymmetrie statt Raster */
@media (min-width: 48rem) {
  .weiche .spur--werkstatt { padding-top: calc(clamp(1.5rem, 4vw, 2.5rem) + 1.75rem); }
  .weiche .spur--taxi h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
}

/* ---------- Leistungsliste: Fliesstext-Liste, keine Kartenreihe ---------- */

/* Zwischentitel trennen die beiden Stufen der Liste. Vorher gab es drei
   Stufen ohne erkennbare Regel — hervorgehoben mit Kante, mit Text ohne
   Kante, und nur der Name. Nichts sagte, warum.                       */
.listen-titel {
  font-family: 'Plex Sans', sans-serif; font-weight: 600; font-size: 0.95rem;
  color: var(--grau-text); margin: 2rem 0 0.5rem;
}
.listen-titel:first-child { margin-top: 0; }
.leistungen { list-style: none; padding: 0; margin: 0; }
.leistungen li {
  border-top: 1px solid var(--grau-linie);
  padding: 1rem 0 1rem 1.25rem;
  border-left: var(--kante) solid transparent;
  max-width: var(--mass-text);
}
/* Hervorhebung ueber Flaeche und Schriftgewicht statt ueber dieselbe
   farbige Kante, die sonst die Spur markiert. Drei Bedeutungen auf einer
   Form heisst keine Bedeutung. */
.leistungen li.hervor { background: var(--weiss); }
.leistungen li.hervor .name { font-size: 1.25rem; font-weight: 800; }
.leistungen .name { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.15rem; display: block; }
.leistungen .text { color: var(--grau-text); font-size: 1.0625rem; }

/* ---------- Hilfsklassen statt style-Attribute ----------
   Die Content-Security-Policy erlaubt kein style="…" im HTML. Diese
   Klassen ersetzen die frueheren Inline-Angaben — allen voran die
   Spurfarbe, die sonst stillschweigend wegfiel und die blau-rote
   Zwei-Spur-Logik unsichtbar machte.                                    */

.farbe-werkstatt { --farbe: var(--spur-werkstatt); }
.farbe-taxi      { --farbe: var(--spur-taxi); }

.mittig { max-width: 1180px; margin-inline: auto; }
.abschnitt--knapp { padding-top: clamp(2rem, 5vw, 3rem); }
.abstand-oben { margin-top: 2rem; }
.zeiten--mit-abstand { margin-bottom: 1.5rem; }
.bildplatz { margin-top: 1.25rem; }

/* ---------- Zeiten ---------- */

.zeiten { display: grid; gap: 1.25rem; margin: 0; }
@media (min-width: 40rem) { .zeiten { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.zeiten > div { border-left: var(--kante) solid var(--farbe); padding-left: 1rem; }
.zeiten dt { font-family: 'Archivo', sans-serif; font-weight: 600; margin-bottom: 0.2rem; }
.zeiten dd { margin: 0; color: var(--grau-text); }

/* ---------- Schaltflaechen ---------- */

.knopf {
  display: inline-block;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.125rem;
  padding: 0.85rem 1.5rem;
  background: var(--wimmer-blau); color: var(--weiss);
  text-decoration: none; border: 2px solid var(--wimmer-blau);
}
.knopf:hover { background: var(--wimmer-blau-hell); border-color: var(--wimmer-blau-hell); color: var(--weiss); }
.knopf--taxi { background: var(--wimmer-rot); border-color: var(--wimmer-rot); }
.knopf--taxi:hover { background: #B8050F; border-color: #B8050F; color: var(--weiss); }
.knopf--leer { background: transparent; color: var(--wimmer-blau); }
/* Auf der blauen Buehne braucht der leere Knopf weisse Kante statt
   blauer — sonst ist er dort unsichtbar. */
.knopf--auf-blau { background: transparent; color: var(--weiss); border-color: var(--weiss); }
.knopf--auf-blau:hover { background: var(--weiss); color: var(--wimmer-blau); }
.knopf--leer:hover { background: var(--wimmer-blau); color: var(--weiss); }
.knopf[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------- Kontaktspuren ---------- */

.kontaktspuren { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .kontaktspuren { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.kontaktspur {
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-left: var(--kante) solid var(--farbe);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.kontaktspur dl { margin: 0; display: grid; gap: 0.6rem; }
/* Feldbeschriftung, nicht Gliederungsebene: kleiner, ungesperrt, grau.
   Vorher war sie von der Sektionsvorzeile kaum zu unterscheiden — dieselbe
   gesperrte Mono-Versalzeile diente als Sektionstitel, Spurkennung,
   Feldbeschriftung und Instrumentenlabel. */
.kontaktspur dt {
  font-family: 'Plex Sans', sans-serif; font-size: 0.85rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--grau-text);
}
.kontaktspur dd { margin: 0 0 0.5rem; font-weight: 600; }

/* ---------- Stundensatz ----------
   Das Gegenstueck zur Tariftabelle: Die Werkstatt legt ihren Preis genauso
   offen wie das Taxi. Bewusst NICHT als Instrumentenfeld — die
   Siebensegment-Anzeige gehoert dem Taxameter. Sie ist der eine
   orchestrierte Moment der Seite und verliert ihn, sobald sie zweimal
   vorkommt. Hier tut es eine grosse Zahl in der Hausschrift.
   Ein einzelner Block, keine Kartenreihe.                                */

.preisblock {
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-left: var(--kante) solid var(--farbe);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-top: 1.5rem;
}
.preisblock-marke {
  margin: 0;
  font-family: 'Plex Sans', sans-serif; font-size: 0.85rem; font-weight: 600;
  color: var(--grau-text);
}
.preisblock-zahl {
  margin: 0.3rem 0 0.25rem;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  line-height: 1.05;
  color: var(--wimmer-blau);
  font-variant-numeric: tabular-nums;
}
.preisblock-zusatz {
  margin: 0;
  font-family: 'Plex Mono', monospace; font-size: 0.85rem;
  color: var(--grau-text);
}

/* ---------- Fotos ----------
   Feste Seitenverhaeltnisse verhindern, dass der Text beim Nachladen
   springt. Die Kante links traegt die Spurfarbe, wenn eine gesetzt ist —
   sonst bleibt sie weg, statt eine Bedeutung vorzutaeuschen.            */

.bild { margin: 1.5rem 0 0; }
.bild img {
  display: block; width: 100%; height: auto;
  border-left: var(--kante) solid var(--farbe, transparent);
}
.bild figcaption {
  font-size: 0.9rem; color: var(--grau-text);
  padding: 0.6rem 0 0 1rem;
  max-width: var(--mass-text);
}

/* ---------- Anfahrtskarte ----------

   Die Karte bringt ihren eigenen Sandgrund mit, denselben wie die Seite.
   Ohne Rahmen liefe sie deshalb randlos in den Abschnitt aus und saehe
   aus wie ein Fehler; die duenne Linie gibt ihr eine Kante. Die farbige
   Kante links ist dieselbe wie bei Fotos, damit beide gleich sitzen.   */

.karte-rahmen { margin: 1.5rem 0 0; }
.karte-rahmen .karte {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--grau-linie);
  border-left: var(--kante) solid var(--farbe, var(--wimmer-blau));
}
.karte-rahmen figcaption {
  font-size: 0.9rem; color: var(--grau-text);
  padding: 0.6rem 0 0 1rem;
  max-width: var(--mass-text);
}

/* Beschriftung der Karte.

   Sie steht hier und nicht in der SVG, weil die Karte eingebettet ist —
   damit greift diese Datei auch auf ihren Inhalt zu. Das ist der ganze
   Grund fuer die Einbettung: Eine SVG im <img> waere ein eigenes
   Dokument, in dem weder diese Regeln noch die selbst gehosteten
   Schriften der Seite gelten.

   Die Groessen sind viewBox-Einheiten (Breite 1600), keine Pixel. Sie
   schrumpfen also mit der Karte. Auf dem Handy ist die Karte gut
   viereinhalbmal kleiner als die viewBox — ohne die Anhebung weiter
   unten waeren die Ortsnamen dort vier Pixel hoch.                     */

.karte-namen, .karte-betrieb, .karte-massstab {
  fill: var(--wimmer-blau);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--sand-hell);
  stroke-linejoin: round;
}
.karte-namen {
  font-family: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  stroke-width: 6;
}
.karte-ort { font-size: 25px; font-weight: 600; letter-spacing: 0.8px; }
.karte-ort--stadt { font-size: 34px; font-weight: 700; letter-spacing: 1.2px; }
.karte-betrieb {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 30px; font-weight: 700; stroke-width: 7;
}
.karte-massstab {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 19px; stroke-width: 4;
}
.karte-massstab-strich { fill: none; stroke: var(--wimmer-blau); stroke-width: 3; }

@media (max-width: 45rem) {
  .karte-ort { font-size: 34px; }
  .karte-ort--stadt { font-size: 46px; }
  .karte-betrieb { font-size: 40px; }
  .karte-massstab { font-size: 26px; }
}

/* ---------- Tariftabelle ---------- */

.tarif-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarif-tabelle caption { text-align: left; padding-bottom: 0.75rem; color: var(--grau-text); font-size: 0.95rem; }
.tarif-tabelle th, .tarif-tabelle td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--grau-linie); text-align: left; }
.tarif-tabelle thead th { font-family: 'Plex Mono', monospace; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grau-text); border-bottom-width: 2px; border-bottom-color: var(--anthrazit); }
.tarif-tabelle td.zahl, .tarif-tabelle th.zahl { text-align: right; font-family: 'Plex Mono', monospace; font-weight: 600; white-space: nowrap; }
.tabelle-huelle { overflow-x: auto; }

/* ---------- Einklappbare Tarifabschnitte ----------
   <details>/<summary> statt eigener Aufklapp-Logik: funktioniert ohne
   JavaScript, ist mit der Tastatur bedienbar, und der Inhalt steht auch
   zugeklappt im HTML — Suchmaschinen finden die Preise trotzdem.
   Bewusst ohne Animation, der einzige orchestrierte Moment bleibt das
   Taxameter.                                                             */

.klappe { border-top: 1px solid var(--grau-linie); }
.klappe:last-of-type { border-bottom: 1px solid var(--grau-linie); }

.klappe > summary {
  cursor: pointer; position: relative;
  list-style: none;                 /* Standarddreieck weg */
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; min-height: var(--griff);
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 1.15rem; line-height: 1.25;
}
.klappe > summary::-webkit-details-marker { display: none; }

/* Plus und Minus statt Dreieck, als ein Element gezeichnet: zwei Striche,
   beide mittig, davon faellt beim Aufklappen der senkrechte weg. Als
   Schriftzeichen gesetzt saessen + und − je nach Schrift unterschiedlich
   hoch. Die Verlaeufe sind hier nur Striche in einer Farbe, keine
   Farbflaechen im Sinne der Designregel. */
.klappe > summary::after {
  content: "";
  flex: 0 0 auto; width: 0.95rem; height: 0.95rem;
  background:
    linear-gradient(var(--wimmer-blau), var(--wimmer-blau)) center / 100% 2px no-repeat,
    linear-gradient(var(--wimmer-blau), var(--wimmer-blau)) center / 2px 100% no-repeat;
}
.klappe[open] > summary::after {
  background:
    linear-gradient(var(--wimmer-blau), var(--wimmer-blau)) center / 100% 2px no-repeat;
}

.klappe > summary:hover { color: var(--wimmer-blau); }

.klappe-inhalt { padding-bottom: 1.5rem; }
.tarif-tabelle .zusatz { font-weight: 400; color: var(--grau-text); }

/* Auf dem Handy wird aus jeder Tabellenzeile ein eigener Block. Eine
   quer scrollende Preistabelle ist genau das, was aeltere Leser aufgeben
   laesst — und die Tarife sind der Grund, warum sie die Seite aufrufen.
   Die Spaltennamen kommen per data-spalte aus derselben Datenquelle.     */
@media (max-width: 47.99rem) {
  .tarif-tabelle,
  .tarif-tabelle tbody,
  .tarif-tabelle tr,
  .tarif-tabelle td,
  .tarif-tabelle th,
  .tarif-tabelle caption { display: block; width: auto; }

  .tarif-tabelle thead { display: none; }

  .tarif-tabelle tbody tr {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--grau-linie);
  }
  .tarif-tabelle th[scope="row"] {
    border: 0; padding: 0 0 0.35rem;
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.05rem;
  }
  .tarif-tabelle td {
    border: 0; padding: 0.2rem 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  }
  .tarif-tabelle td[data-spalte]::before {
    content: attr(data-spalte);
    font-family: 'Plex Mono', monospace; font-size: 0.85rem;
    font-weight: 400; color: var(--grau-text);
  }

  /* Zeilen mit nur einem Preis setzten ihn bisher linksbuendig UNTER die
     Bezeichnung, waehrend die Zonenzeilen ihn rechts danebenstellten. Damit
     gab es auf der Breite, auf der die meisten lesen, keine durchgehende
     Preisspalte zum Abfahren. Jetzt haben alle Zeilen dieselbe Kante.   */
  .tarif-tabelle tr.einwertig {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  }
  .tarif-tabelle tr.einwertig th[scope="row"] { padding: 0; flex: 1 1 auto; }
  .tarif-tabelle tr.einwertig td { padding: 0; display: block; text-align: right; }
  .tarif-tabelle tr.einwertig th[scope="row"] .zusatz {
    display: block; font-family: 'Plex Sans', sans-serif;
    font-size: 0.9rem; font-weight: 400; color: var(--grau-text);
  }
}

/* ---------- Der Kalkulator als Taxameter ---------- */

.kalkulator { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56rem) { .kalkulator { grid-template-columns: 1fr 1fr; } }

.kalk-feld { display: grid; gap: 1rem; }
.kalk-feld label { font-weight: 600; display: block; margin-bottom: 0.3rem; }
/* Kein Effekt, nur Konsequenz: gleiche Kantenschaerfe wie das Panel,
   Anthrazitrahmen statt duennem Grau, Ziffern in Mono. Vorher endete die
   Taxameter-Metapher genau dort, wo der Nutzer sie anfasst. */
.kalk-feld select, .kalk-feld input[type="number"], .kalk-feld input[type="text"] {
  font: inherit; width: 100%; padding: 0.75rem 0.8rem;
  border: 2px solid var(--anthrazit); border-radius: 0;
  background: var(--weiss); color: inherit;
  font-variant-numeric: tabular-nums;
}
.kalk-feld select:focus-visible, .kalk-feld input:focus-visible { border-color: var(--wimmer-blau); }
.kalk-feld label {
  font-family: 'Plex Sans', sans-serif; font-weight: 600;
}
/* ---------- Ortsfelder mit Vorschlagsliste ----------
   Gesucht wird im Browser, die Liste haengt unter dem Feld. Bewusst ohne
   Animation und ohne Schatten: dieselbe Kantenschaerfe wie das
   Instrumentenfeld daneben.                                              */

.ortsfeld { position: relative; }

.vorschlaege {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 20;
  background: var(--weiss);
  border: 2px solid var(--anthrazit); border-top: 0;
  max-height: 17rem; overflow-y: auto;
}
.vorschlaege[hidden] { display: none; }

.vorschlaege li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  min-height: var(--griff);
  cursor: pointer;
  border-bottom: 1px solid var(--grau-linie);
}
.vorschlaege li:last-child { border-bottom: 0; }
.vorschlaege li:hover,
.vorschlaege li[aria-selected="true"] {
  background: var(--wimmer-blau); color: var(--weiss);
}

/* Ziele ausserhalb des Pflichtfahrbereichs werden schon in der Liste
   gekennzeichnet — dort gilt die Tarifordnung nicht, der Preis wird
   vorher vereinbart. */
.vorschlag-hinweis {
  flex: 0 0 auto;
  font-family: 'Plex Mono', monospace; font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--wimmer-rot);
  border: 1px solid currentColor; padding: 0.1rem 0.4rem;
}
.vorschlaege li:hover .vorschlag-hinweis,
.vorschlaege li[aria-selected="true"] .vorschlag-hinweis { color: var(--wimmer-sand); }

.kalk-schalter { display: flex; align-items: center; gap: 0.6rem; }

/* Zuschlagsfelder im eingeklappten Teil des Formulars */
.klappe--im-formular { border-bottom: 1px solid var(--grau-linie); }
.klappe--im-formular > summary { font-size: 1.05rem; }
.zuschlagfelder { display: grid; gap: 0.9rem; }
.zuschlagfeld {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.zuschlagfeld label { margin: 0; }
.zuschlagfeld input[type="number"] {
  flex: 0 0 5.5rem; width: 5.5rem; text-align: right;
}
.zuschlagfeld .zusatz,
.kalk-schalter .zusatz {
  display: block; font-weight: 400; font-size: 0.9rem; color: var(--grau-text);
}
/* 24 CSS-Pixel sind das Mindestmass aus WCAG 2.2 (2.5.8). 1.35rem waren
   21,6px — auf dem Handy war es korrekt geloest, ausgerechnet am Desktop
   nicht. */
.kalk-schalter input { width: 1.5rem; height: 1.5rem; accent-color: var(--wimmer-rot); }
.kalk-schalter label { padding-block: 0.5rem; }

/* Instrumentenfeld — der einzige orchestrierte Moment der Seite */
.instrument {
  background: var(--instrument);
  border: 1px solid #2A2F38;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  color: #8A8F98;
  /* Bezugsgroesse fuer die Ziffern unten — siehe dort. */
  container-type: inline-size;
}
.instrument .marke-oben {
  margin: 0;
  font-family: 'Plex Sans', sans-serif; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em; color: #8C929B;
}
/* Die Ziffern rechnen in cqw, also gegen die Breite des Instrumentenfelds
   — vorher gegen die des Fensters (8vw). Das Feld steht aber in einer
   schmalen Spalte: bei 1280px Fensterbreite standen 61px grosse Ziffern in
   336px Innenbreite, und das Eurozeichen rutschte in eine zweite Zeile.
   Der eine orchestrierte Moment der Seite war damit am Desktop kaputt.   */
.instrument .anzeige {
  margin-block: 0.6rem 0.4rem;
  font-family: 'DSEG7', 'Plex Mono', monospace;
  font-size: clamp(1.9rem, 12cqw, 3.4rem);
  color: var(--bernstein);
  line-height: 1.25;
  margin: 0.6rem 0 0.4rem;
  text-shadow: 0 0 18px rgba(255, 176, 0, 0.28);
  white-space: nowrap;
}
.instrument .zeile-unten {
  margin-bottom: 0;
  font-family: 'Plex Mono', monospace; font-size: 0.8rem; color: #7C828C;
  border-top: 1px solid #262B33; padding-top: 0.6rem; margin-top: 0.6rem;
}
/* Der leere Zustand ist gedaempft, aber lesbar: #3A3F48 kam auf 1,83:1 und
   fiel bei WCAG AA durch. Grosser Text braucht 3:1. */
.instrument[data-leer="true"] .anzeige { color: #606670; text-shadow: none; }

/* Hinweise sind eingerueckt statt mit Kante versehen — die Kante gehoert
   der Spurzugehoerigkeit. */
.hinweis {
  font-size: 0.95rem; color: var(--grau-text);
  padding: 0.85rem 1rem; margin-top: 1.25rem;
  background: #00000008;
}
.hinweis--kasse { background: #E306130F; color: var(--anthrazit); }

/* Herkunft der Kartendaten — Pflichtangabe unter der ODbL, deshalb
   sichtbar am Rechner und nicht nur im Datenschutztext. */
.herkunft {
  font-size: 0.85rem; color: var(--grau-text);
  margin-top: 1.25rem; max-width: var(--mass-text);
}

/* ---------- Fuss ---------- */

.fuss {
  background: var(--anthrazit); color: #C9CDD3;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  margin-top: clamp(3rem, 8vw, 5rem);
  font-size: 0.95rem;
}
.fuss-innen { max-width: 1180px; margin-inline: auto; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .fuss-innen { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h2 { font-size: 0.78rem; font-family: 'Plex Mono', monospace; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: #868C95; margin-bottom: 0.75rem; }
.fuss a { color: var(--wimmer-sand); }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.fuss .fuss-marke { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--weiss); text-transform: uppercase; font-size: 1.1rem; line-height: 1.15; }
.fuss-nummer { font-family: 'Plex Mono', monospace; font-size: 1.15rem; font-weight: 600; }

.fuss-schluss {
  grid-column: 1 / -1;
  border-top: 1px solid #2C323B; margin-top: 1rem; padding-top: 1.25rem;
  color: #9AA0A8; font-size: 0.95rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between; align-items: baseline;
}
.fuss-schluss p { margin: 0; }
/* Frueher stand hier float: right — das rutschte auf dem Handy in die
   Rechtstexte hinein. */
.fuss-rechtliches { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.fuss-rechtliches a { padding-block: 0.4rem; }
.fuss-betreuung { display: block; margin-top: 0.35rem; }

#kalkulator { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- Kleine Bildschirme ----------
   Die Zielgruppe ist eher aelter und kommt ueberwiegend vom Handy. Hier
   zaehlt Trefferflaeche vor Eleganz, und Kleinsatz unter 14px wird nicht
   gelesen, sondern uebersprungen.                                        */

@media (max-width: 47.99rem) {
  section { padding-block: clamp(2.5rem, 9vw, 4rem); }

  /* Schaltflaechen nehmen die Breite, die da ist */
  .knopf-reihe { gap: 0.6rem; }
  .knopf-reihe > .knopf { flex: 1 1 14rem; text-align: center; }
  .knopf { padding-block: 0.95rem; }

  /* Kleinsatz anheben */
  .spur-label,
  .abschnitt-titel .beiwort { font-size: 0.85rem; }
  .kontaktspur dt { font-size: 0.82rem; }
  .instrument .zeile-unten {
  margin-bottom: 0; font-size: 0.9rem; }
  .instrument .marke-oben {
  margin: 0; font-size: 0.8rem; letter-spacing: 0.16em; }
  .hinweis { font-size: 1rem; }
  .buehne .vorzeile { font-size: 0.8rem; letter-spacing: 0.12em; }
  .fuss { font-size: 1rem; }

  /* Unter 16px zoomt iOS beim Antippen ins Formular hinein */
  .kalk-feld select,
  .kalk-feld input[type="number"],
  .kalk-feld input[type="text"] { font-size: 1.0625rem; min-height: var(--griff); }
  .kalk-schalter input { width: 1.5rem; height: 1.5rem; }
  .kalk-schalter label { padding-block: 0.5rem; }
}

/* ---------- Bewegung nur, wenn erwuenscht ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Enge Kopfzeile ----------
   Marke, Anrufknopf und Menue muessen zusammen in EINE Zeile passen, sonst
   klebt ein zweizeiliger Kopf dauerhaft ueber dem Inhalt. Weicht wird in
   dieser Reihenfolge: Beizeile unter dem Markennamen, dann das Wort
   "Menue", dann die Groesse von Marke und Knopf. Die Nummer bleibt in
   Ziffern stehen — sie ist der Grund, warum die Leute anrufen.

   Diese Abfragen stehen bewusst am Dateiende: sie ueberschreiben die
   Grundregeln der Kopfzeile und haben dieselbe Spezifitaet, also
   entscheidet die Reihenfolge.                                          */

@media (max-width: 27rem) {
  /* Die Bildmarke steht allein. Der Schriftzug wird nur OPTISCH
     ausgeblendet, nicht entfernt — sonst verloere der Verweis auf die
     Startseite seinen Namen fuer Vorleseprogramme. */
  .marke-text {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .marke-zeichen { width: 2.6rem; height: 2.6rem; }
}

@media (max-width: 23rem) {
  .menuewort { display: none; }
  .marke-haupt { font-size: 1.15rem; }
  .anrufknopf { font-size: 0.82rem; padding-inline: 0.5rem; gap: 0.3rem; }
  .anrufknopf .hoerer { font-size: 0.9rem; }
  .kopf-innen { gap: 0.4rem; }
}