/* ==========================================================================
   Pneuhaus Frank – Startseite (Design "Startseite 1a", dezent modernisiert)
   Farben & Schriften exakt aus dem Live-Theme (siehe _ci/kontext.md)
   ========================================================================== */

/* --- Schriften ---------------------------------------------------------- */
@font-face { font-family:'Gilroy'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/reg.woff2')   format('woff2'); }
@font-face { font-family:'Gilroy'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/bold.woff2')  format('woff2'); }
@font-face { font-family:'Gilroy'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/xbold.woff2') format('woff2'); }
@font-face { font-family:'Gilroy'; font-weight:900; font-style:normal; font-display:swap; src:url('../fonts/heavy.woff2') format('woff2'); }
/* Groessenangepasster Fallback: solange ein Gilroy-Schnitt noch laedt, zeichnet
   Helvetica/Arial im selben Laufmass - sonst rutscht die rechtsbuendige
   Navigation beim Schriftwechsel (gemessen 22.09.2026 mit Playwright:
   Gilroy 400/600/700/900 = 101/96.4/97.2/95.8 % der Helvetica-Breite,
   gemittelt ueber den echten Seitentext von vier Seiten). */
@font-face { font-family:'Gilroy Fallback'; font-weight:400; src:local('Helvetica'), local('Arial'); size-adjust:101%; }
@font-face { font-family:'Gilroy Fallback'; font-weight:600; src:local('Helvetica-Bold'), local('Helvetica Bold'), local('Arial-BoldMT'), local('Arial Bold'); size-adjust:96.4%; }
@font-face { font-family:'Gilroy Fallback'; font-weight:700; src:local('Helvetica-Bold'), local('Helvetica Bold'), local('Arial-BoldMT'), local('Arial Bold'); size-adjust:97.2%; }
@font-face { font-family:'Gilroy Fallback'; font-weight:900; src:local('Helvetica-Bold'), local('Helvetica Bold'), local('Arial-BoldMT'), local('Arial Bold'); size-adjust:95.8%; }

/* --- Tokens ------------------------------------------------------------- */
:root {
  --yellow:   #ffdb02;
  --black:    #000;
  --slate:    #212b36;
  --ink-soft: #424f5e;
  --light:    #f5f6f6;
  --hairline: #e6e8ea;
  --muted:    #c3c7cb; /* gedaempfte Zustaende, z.B. inaktive A-Z-Buchstaben */
  --green:    #33ab1f;
  --amber:    #e7bc1e;
  --red:      #f73558;
  --red-text: #c4122f; /* Fehlertexte: --red hat auf Weiss nur 3.75:1, dies 6.0:1 */
  --grey:     #9a9a9a;

  --cw: 1440px;      /* Laufbreite */
  --frame: 20px;     /* weisser Rahmen um Header/Hero/Ticker/Bänder */
  --gut: 64px;       /* Innenabstand der Sektionen */
  --radius: 3px;

  --font: 'Gilroy', 'Gilroy Fallback', Helvetica, Arial, sans-serif;

  /* --- Abstandsleiter: eine statt der bisherigen zwei ------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-9: 36px;  --sp-10: 40px; --sp-11: 44px; --sp-12: 48px;
  --sp-13: 56px; --sp-14: 64px; --sp-15: 80px; --sp-16: 100px;

  --sec-y:      var(--sp-16);  /* Innenabstand einer Sektion */
  --sec-y-band: var(--sp-14);  /* dunkle und gerahmte Baender */
  --grid-gap:   var(--sp-7);   /* Kartenraster */
  --header-h:   130px;         /* Sprungmarken-Offset unter dem Sticky-Header */
  --hairline-w: 1.5px;
  --control-w:  2px;           /* Rahmen von Eingabefeldern, Selects, Suchleisten */
  --radius-lg:  4px;           /* Karten - haelt den heutigen Wert fest;
                                  hier entscheiden, ob Karten auf 3px sollen */

  /* --- Schriftskala: sechs feste Stufen, sechs fluide ------------------- */
  --fs-display:  clamp(31px, 4.31vw, 62px);
  --fs-hero:     clamp(27px, 3.19vw + 4px, 50px);
  --fs-h1:       clamp(30px, 2.22vw + 14px, 46px);
  --fs-figure:   clamp(36px, 1.11vw + 28px, 44px);
  --fs-h2:       clamp(25px, 1.25vw + 16px, 34px);
  --fs-h3:       clamp(21px, 0.69vw + 16px, 26px);
  --fs-h4:       clamp(19px, 0.42vw + 16px, 22px);
  --fs-sub:      clamp(17px, 0.42vw + 14px, 20px);
  --fs-body-lg:  clamp(16px, 0.28vw + 14px, 18px);
  --fs-body:     clamp(15px, 0.14vw + 14px, 16px);
  --fs-meta:     clamp(13px, 0.28vw + 11px, 15px);
  --fs-caption:  clamp(12px, 0.14vw + 11px, 13px);

  --lh-tight: 1.12; --lh-head: 1.2; --lh-snug: 1.35;
  --lh-body:  1.5;  --lh-loose: 1.65;
  --ls-caps:  .06em;  /* Laufweite der Versal-Labels (Tags, Kastenkoepfe) */

  /* Kein 800 - geladen sind nur 400/600/700/900 (@font-face oben). */
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-heavy: 900;

  /* --- Farbrollen zwischen den Farbtokens ------------------------------- */
  --surface:         #fff;
  --on-dark:         #fff;
  --on-dark-soft:    rgba(255,255,255,.78);  /* gedaempfter Text auf Dunkel */
  --on-yellow-soft:  rgba(0,0,0,.6);         /* gedaempfter Text auf Gelb */
  --hairline-dark:   rgba(255,255,255,.16);
  --hairline-yellow: rgba(0,0,0,.22);

  --shadow-card:  0 16px 34px rgba(0,0,0,.12);
  --shadow-hover: 0 0 20px rgba(0,0,0,.25);   /* Buttons und klickbare Kaesten */
  --shadow-glow:  0 10px 26px rgba(255,219,2,.36);
  --shadow-text:  0 2px 18px rgba(0,0,0,.45);

  /* --- Bewegung --------------------------------------------------------- */
  --dur-fast: .15s; --dur-base: .22s; --dur-slow: .4s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

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

/* Sprungziele nicht unter dem Sticky-Header verstecken */
section[id], footer[id] { scroll-margin-top: var(--header-h); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--black);
  font-family: var(--font);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* Lange Woerter und URLs (Jobtitel, Datenschutz) brechen statt ueberzulaufen */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--ink-soft); opacity: 1; }

/* Doppelter Ring: Gelb aussen, Schwarz fuellt den Versatz - so ist der Fokus
   auf Weiss, Hellgrau, Gelb und Schwarz gleichermassen sichtbar. */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--black);
}

.container {
  max-width: var(--cw);
  margin: 0 auto;
  padding: 0 var(--gut);
}
/* Gerahmte Bloecke (.hero, .ticker, .cta-band, .brands, .cta-image) sitzen um
   --frame nach innen versetzt. Damit ihr Textrand trotzdem exakt auf derselben
   Rail liegt wie der ungerahmten Sektionen, wird der innere Container um
   2x --frame schmaler und um --frame weniger eingerueckt: das hebt den Versatz
   auf jeder Viewportbreite exakt auf. */
.cta-band > .container,
.brands > .container,
.cta-image > .container {
  max-width: calc(var(--cw) - var(--frame) * 2);
  padding-inline: calc(var(--gut) - var(--frame));
}

/* --- Typo-Bausteine ---------------------------------------------------- */
.h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: var(--fw-heavy);
  color: var(--black);
  text-wrap: pretty;
}
.h2--light { color: var(--on-dark); }

/* --- Buttons ----------------------------------------------------------- */
/* Alle Varianten tragen denselben (bei Gelb/Schwarz unsichtbaren) Rahmen,
   damit Primaer- und Sekundaerbutton nebeneinander exakt gleich hoch sind. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border: var(--hairline-w) solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.btn svg { flex: none; }
/* Telefonnummer als CTA immer mit Hoerer davor – per CSS, damit jede Seite
   (auch neu generierte) das Icon ohne Markup-Aenderung bekommt */
.btn[href^="tel:"]::before,
.mobile-menu__phone::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--icon-hoerer) center / contain no-repeat;
  mask: var(--icon-hoerer) center / contain no-repeat;
}
:root {
  --icon-hoerer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
/* Telefonnummern im Fliesstext nicht mitten in der Nummer umbrechen */
:where(p, td, dd) > a[href^="tel:"] { white-space: nowrap; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: none; }

.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--yellow:hover { box-shadow: var(--shadow-hover); }
.btn--glow:hover { box-shadow: var(--shadow-glow); }

.btn--outline {
  background: var(--surface);
  color: var(--black);
  border-color: var(--black);
}
.btn--outline:hover { box-shadow: var(--shadow-hover); }

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--black);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 3px;
}
.link-underline:hover { border-bottom-color: var(--black); }

/* Textlinks in Zeilen (Breadcrumb, Footer, Unterstrich-Links, Zuruecksetzen):
   Klickflaeche auf >= 32px heben, ohne den Zeilenrhythmus zu aendern - der
   Innenabstand oben wird durch denselben negativen Aussenabstand aufgehoben. */
.breadcrumb a,
.link-underline,
.site-footer__col a,
.site-footer__nav a,
.site-footer__links a,
.loc__contact a {
  padding-top: var(--sp-2);
  margin-top: calc(-1 * var(--sp-2));
}
.site-footer__col a,
.site-footer__links a { display: inline-block; }
.site-footer__links a { padding-top: var(--sp-3); margin-top: calc(-1 * var(--sp-3)); }

/* --- Header ------------------------------------------------------------ */
.header-frame {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  padding: var(--frame) var(--frame) 0;
}

.site-header {
  display: flex;
  flex-direction: column;
  background: var(--black);
}

/* Header sitzt im --frame-Rahmen: gleiche Rail-Rechnung wie oben, damit Logo
   und Navigation auf breiten Screens nicht aus dem Raster laufen. */
.site-header__meta,
.site-header__main {
  max-width: calc(var(--cw) - var(--frame) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--gut) - var(--frame));
}
.site-header__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 34px;
  padding: 0;
  background: var(--surface);
  border-bottom: var(--hairline-w) solid var(--hairline);
}
.site-header__meta nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-6);
  width: 100%;
  max-width: calc(var(--cw) - var(--frame) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--gut) - var(--frame));
}
.site-header__meta a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--slate);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}
.site-header__meta a:hover { color: var(--black); }
.site-header__meta a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--yellow);
  content: "";
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.site-header__meta a:hover::after,
.site-header__meta a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header__main {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) auto auto;
  width: 100%;
  align-items: center;
  gap: var(--sp-10);
  height: 72px;
}
.site-header__logo { display: flex; align-items: center; align-self: stretch; }
.site-header__logo img { width: 76px; height: auto; }

.site-header__right {
  display: contents;
}
/* Navigation, Preis-Button und Servicezeile teilen eine rechte Kante; beide
   Zeilen laufen im Medium-Schnitt, damit sie neben dem Heavy-Logo eine Stimme haben. */
.site-nav {
  display: flex;
  justify-self: end;
  gap: var(--sp-7);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--on-dark);
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--yellow);
  content: "";
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header__divider {
  display: none;
}
/* Kopf-CTA: kompakter gelber Button in Balkenhoehe, fuehrt zum Preisrechner.
   Eigene Masse statt .btn, weil der 72px-Balken keinen body-lg-Button traegt. */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 40px;
  padding: 0 var(--sp-5);
  border: var(--hairline-w) solid transparent;
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--black);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
  transition: box-shadow var(--dur-base) var(--ease);
}
.site-header__cta:hover { box-shadow: var(--shadow-hover); }

/* Burger */
.nav-toggle {
  display: none;
  align-items: center;
  justify-self: end;
  gap: var(--sp-3);
  min-width: 44px;
  height: 44px;
  padding: var(--sp-2);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--on-dark);
}
.nav-toggle__icon {
  display: grid;
  gap: 6px;
  width: 22px;
}
.nav-toggle__icon span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--surface);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.mobile-menu { display: none; }

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  height: 700px;
  margin: 0 var(--frame);
  background: var(--slate);
  overflow: hidden;
}
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hochformatige Motive (Person im Bild): oberen Bildteil zeigen, sonst ist der Kopf weg */
.hero__poster--oben { object-position: center 30%; }
/* Kopf am oberen Bildrand: Bild oben buendig, sonst ist der Kopf auf breiten Schirmen weg */
.hero__poster--ganz-oben { object-position: center top; }
/* Selbst gehostetes Hintergrundvideo (2:1), liegt ueber dem Poster aus demselben
   ersten Bild - so gibt es beim Start keinen Sprung. */
.hero__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.15) 100%);
}
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-13);
  max-width: calc(var(--cw) - var(--frame) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--gut) - var(--frame));
  color: var(--on-dark);
}
/* Startseite: eine H1 aus zwei Zeilen - Ortszeile klein oben (Local SEO),
   Markenzeile darunter in der Titelgroesse der H1 */
.hero__ort {
  display: block;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}
.hero__claim { display: block; }
.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-heavy);
  max-width: 900px;
  text-shadow: var(--shadow-text);
  text-wrap: pretty;
}

/* Statuskarte im Hero (Startseite): Live-Wartezeit je Filiale, sitzt rechts
   auf der Grundlinie des Titels. Die Karte ist EIN Link (Standorte). */
.hero-status {
  display: block;
  position: absolute;
  right: calc(var(--gut) - var(--frame));
  bottom: 0;
  width: 300px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  color: var(--black);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-shadow: none;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.hero-status:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
/* Karte hat display:block (Handy: flex), sonst wirkt hidden nicht — der
   Admin kann sie zugunsten des Laufbands abschalten */
.hero-status[hidden] { display: none; }
.hero-status__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--slate);
}
.hero-status__kopf b {
  padding: 2px var(--sp-2);
  background: var(--yellow);
  border-radius: var(--radius);
  color: var(--black);
  font-weight: var(--fw-heavy);
}
.hero-status__liste {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-status__liste li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
.hero-status__liste li[hidden] { display: none; }
/* Der Wert bricht nie um: die Kurzform aus der API ist dafuer gebaut
   ("Morgen 7.30 Uhr"), und eine zweizeilige Filiale sprengt die Karte. Eine
   Stufe kleiner als der Filialname, damit beides nebeneinander Platz hat. */
.hero-status__wert {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--slate);
}
/* Der Titel darf der Karte nicht unter die Fuesse laufen; auf schmalen
   Desktops schrumpft er mit dem Platz neben der Karte */
.hero__content:has(.hero-status:not([hidden])) .hero__title { max-width: min(800px, 100% - 330px); }

/* --- Ticker ------------------------------------------------------------ */
@keyframes pfmarq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker {
  margin: 0 var(--frame);
  background: var(--yellow);
  overflow: hidden;
}
/* Sicherheit: das Band der Startseite startet versteckt (data-banner) */
.ticker[hidden] { display: none; }
/* Im Admin seitenweit ausgeschaltet (js/main.js, api/laufband.mjs) */
[data-laufband="aus"] .ticker { display: none; }
.ticker__track {
  display: flex;
  width: max-content;
  animation: pfmarq 30s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex;
  align-items: center;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-heavy);
  color: var(--black);
  white-space: nowrap;
}
/* Innenabstand liegt auf dem Link, nicht auf der Gruppe: so ist die ganze
   Bandhoehe klickbar */
.ticker__group a { padding: var(--sp-4); }
/* Ring nach innen: .ticker schneidet mit overflow:hidden alles Aeussere ab */
.ticker__group a:focus-visible { outline-color: var(--black); outline-offset: -6px; box-shadow: none; }
.ticker__group i {
  width: 9px;
  height: 9px;
  background: var(--black);
  flex: none;
}

/* --- Intro + USP ------------------------------------------------------- */
.intro { background: var(--surface); padding: var(--sec-y) 0; }
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-15);
}
.intro .h2 { margin-bottom: var(--sp-6); }
.intro__lead {
  font-size: var(--fs-h4);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-4);
}
.intro__text {
  font-size: var(--fs-sub);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}
.intro__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-9);
}

.usp {
  align-content: start;
  border-top: var(--hairline-w) solid var(--hairline);
}
/* Text mit Inline-Links steht in einem <span>: als nackter Text zerfiele er
   in mehrere Flex-Kinder, die nebeneinander statt untereinander umbrechen. */
.usp li {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-bottom: var(--hairline-w) solid var(--hairline);
  font-size: var(--fs-sub);
  font-weight: var(--fw-bold);
}
.usp__mark {
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--yellow);
  transform: translateY(1px);
}
/* Variante mit Mehrwert (seit 22.09.2026 auf allen Intro-Modulen): drei
   Punkte statt sechs, je eine fette Aussage und ein Satz, der den Nutzen
   erklaert. Der Text steht immer in einem <span>, die Aussage in <b>. */
.usp--wert li {
  align-items: start;
  padding: var(--sp-6) 0;
  font-weight: var(--fw-regular);
  color: var(--ink-soft);
}
.usp--wert li b {
  display: block;
  font-weight: var(--fw-heavy);
  color: var(--black);
  margin-bottom: var(--sp-2);
}
.usp--wert .usp__mark { transform: translateY(8px); }
/* Links im Mehrwert-Block wie in den Intro-Texten; ein verlinkter Titel
   behaelt die Titelfarbe und bekommt nur den gelben Strich. */
.usp--wert li a {
  color: var(--black);
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--yellow);
}
.usp--wert li b a { font-weight: inherit; }
.usp--wert li a:hover { border-bottom-color: var(--black); }

/* --- Leistungen -------------------------------------------------------- */
.services { background: var(--light); padding: var(--sec-y) 0; }
.services__head { max-width: 820px; margin-bottom: var(--sp-13); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
/* Kachel ohne Link (div statt a): kein Hover-Lift, der Klickbarkeit vortaeuscht */
div.card:hover { transform: none; box-shadow: none; }
.card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.card__body { padding: var(--sp-6) var(--sp-7) var(--sp-7); }
.card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  font-weight: var(--fw-heavy);
  margin-bottom: var(--sp-2);
}
.card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
/* Pfeil rutscht wie bei .linklist und .usp--links */
.card__link svg { transition: transform var(--dur-base) var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }

/* --- Filialen ---------------------------------------------------------- */
.branches { background: var(--surface); padding: var(--sec-y) 0; }
.branches__head { margin-bottom: var(--sp-13); }
.branches__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
/* Gleiche Kachelmasse wie .loc auf /standorte/ */
.branch {
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}
.branch__name {
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  font-weight: var(--fw-heavy);
  margin-bottom: 6px;
}
.branch__meta {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
.wait {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--light);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3) var(--sp-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-5);
}
.wait__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.wait__dot--green { background: var(--green); }
.wait__dot--amber { background: var(--amber); }
.wait__dot--red   { background: var(--red); }
.wait__dot--grey  { background: var(--grey); }

/* .wait steht auf display:inline-flex — das schlaegt die Browservorgabe fuer
   [hidden]. Ohne diese Regel liesse sich die Zeile nicht ausblenden. */
.wait[hidden] { display: none; }

/* --- Preisrechner ------------------------------------------------------ */
.steps-section { background: var(--slate); padding: var(--sec-y) 0; }
.steps-section .h2 { margin-bottom: var(--sp-2); }
.steps-section__sub {
  font-size: var(--fs-sub);
  color: var(--on-dark-soft);
  margin-bottom: var(--sp-12);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--sp-11);
}
.step {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}
.step__icon {
  display: block; width: 48px; height: 48px; padding: var(--sp-2); margin-bottom: var(--sp-5);
  background: var(--yellow); border-radius: var(--radius); color: var(--black);
}
.step__label {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--yellow);
  margin-bottom: var(--sp-2);
}
.step__title {
  display: block;
  font-size: var(--fs-h4);
  line-height: var(--lh-head);
  font-weight: var(--fw-heavy);
  color: var(--on-dark);
}

/* --- FAQ --------------------------------------------------------------- */
.faq { background: var(--surface); padding: var(--sec-y) 0; }
.faq .h2 { max-width: 820px; margin-bottom: var(--sp-12); }
.faq__list { border-top: var(--hairline-w) solid var(--hairline); }
.faq__item { border-bottom: var(--hairline-w) solid var(--hairline); }
.faq__heading { font: inherit; margin: 0; }

.faq__question {
  display: flex;
  gap: var(--sp-6);
  align-items: baseline;
  width: 100%;
  padding: var(--sp-7) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.faq__num {
  flex: none;
  width: 40px;
  text-align: center;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-heavy);
  padding: var(--sp-1) 0 3px;
  background: var(--light);
  color: var(--black);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.faq__item.is-open .faq__num {
  background: var(--black);
  color: var(--yellow);
}
.faq__q {
  flex: 1;
  /* Lange Komposita («Winterkompletträder») sprengen sonst bei 320px die Zeile */
  min-width: 0;
  hyphens: auto;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-heavy);
}
.faq__icon {
  flex: none;
  font-size: var(--fs-h3);
  line-height: 1;
  font-weight: var(--fw-regular);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}
/* Genau EIN Grid-Kind, sonst greift 0fr nur auf die erste Zeile und
   mehrteilige Antworten bleiben sichtbar. */
.faq__answer-inner {
  overflow: hidden;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  max-width: 760px;
  /* Auf die Frage-Spalte eingerückt (Nummer 40px + Gap 26px). */
  margin-left: var(--sp-14);
}
.faq__answer-inner > * + * { margin-top: var(--sp-3); }
.faq__answer-inner strong { font-weight: var(--fw-bold); color: var(--black); }
.faq__answer-inner a {
  color: var(--black);
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--yellow);
}
.faq__answer-inner a:hover { border-bottom-color: var(--black); }
.faq__answer-inner ul,
.faq__answer-inner ol { padding-left: 0; }
.faq__answer-inner li {
  position: relative;
  padding-left: var(--sp-5);
}
.faq__answer-inner li + li { margin-top: var(--sp-2); }
.faq__answer-inner li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--yellow);
}
.faq__answer-inner ol { counter-reset: faqol; }
.faq__answer-inner ol > li { counter-increment: faqol; }
.faq__answer-inner ol > li::before {
  content: counter(faqol) ".";
  background: none;
  top: 0;
  width: auto;
  height: auto;
  font-weight: var(--fw-bold);
  color: var(--black);
}

.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__item.is-open .faq__answer-inner { padding-bottom: var(--sp-7); }

@media (prefers-reduced-motion: reduce) {
  .faq__answer { transition: none; }
}

/* --- CTA-Band ---------------------------------------------------------- */
/* .cta-image (Bildband) teilt Innenaufbau, Titel und Untertitel mit .cta-band */
.cta-band {
  background: var(--black);
  margin: 0 var(--frame);
  padding: var(--sec-y-band) 0;
}
.cta-band__inner,
.cta-image__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.cta-band__title,
.cta-image__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-heavy);
  color: var(--on-dark);
  margin-bottom: var(--sp-2);
  text-wrap: pretty;
}
.cta-band__sub,
.cta-image__sub {
  font-size: var(--fs-sub);
  color: var(--on-dark-soft);
}
.cta-band__sub strong { color: var(--yellow); font-weight: var(--fw-bold); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --- Footer ------------------------------------------------------------ */
.site-footer { background: var(--surface); padding: var(--sp-15) 0 0; }
.site-footer__grid {
  display: grid;
  /* minmax(0, ..): das Newsletter-Feld hat ~200px Eigenbreite und wuerde
     sonst auf schmalen Handys die Spalte aufsprengen */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--sp-12);
  padding-bottom: var(--sp-13);
}
.site-footer__logo {
  display: inline-block;
  background: var(--black);
  padding: var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.site-footer__logo img { width: 88px; height: auto; }
.site-footer__claim {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}
.site-footer__head {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  font-weight: var(--fw-heavy);
  margin-bottom: var(--sp-4);
}
.site-footer__col {
  font-size: var(--fs-body);
  line-height: 1.9; /* bewusst weiter als --lh-loose: Linkliste */
  color: var(--ink-soft);
}
.site-footer__col a:hover { color: var(--black); }
.site-footer__phone { color: var(--black); font-weight: var(--fw-bold); }

.newsletter { display: flex; }
/* Rahmen und Schnitt wie .lex-search (Eingabefeld + gelber Knopf) */
.newsletter input {
  flex: 1;
  min-width: 0;
  border: var(--control-w) solid var(--black);
  border-right: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  background: var(--surface);
}
.newsletter button {
  background: var(--yellow);
  border: var(--control-w) solid var(--black);
  padding: 0 var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-heavy);
  cursor: pointer;
  white-space: nowrap;
}
.newsletter button:hover { box-shadow: var(--shadow-hover); }
.newsletter__ok {
  display: none;
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
.newsletter__ok.is-visible { display: block; }
.newsletter__fehler { margin-top: var(--sp-3); font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--red-text); }
.newsletter__fehler:empty { display: none; }
.newsletter input[aria-invalid="true"] { border-color: var(--red); }
/* Honigtopf: fuer Menschen unsichtbar, Bots fuellen ihn aus. */
.newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Zahlungsarten, Podcasts, Social Media, Zusatznavigation */
.site-footer__meta { border-top: var(--hairline-w) solid var(--hairline); }
.site-footer__meta-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: var(--sp-12);
  padding-block: var(--sp-10) var(--sp-11);
}
.site-footer__nav { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.site-footer__nav a { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.site-footer__nav a:hover { color: var(--ink-soft); }

.site-footer__pay { display: grid; grid-template-columns: repeat(3, 52px); gap: var(--sp-2); }
.site-footer__pay img { width: 52px; height: auto; }
.site-footer__paynote { margin-top: var(--sp-4); font-size: var(--fs-body); color: var(--ink-soft); }
.site-footer__paynote a { border-bottom: 2px solid var(--yellow); }
.site-footer__paynote a:hover { border-bottom-color: var(--black); }

.site-footer__podcasts { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.site-footer__podcasts img { height: 27px; width: auto; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.site-footer__social img { width: 24px; height: 24px; }
.site-footer__podcasts a:hover img,
.site-footer__social a:hover img { opacity: .55; }

.site-footer__bottom { border-top: var(--hairline-w) solid var(--hairline); }
.site-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}
.site-footer__links { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.site-footer__links a:hover { color: var(--black); }

/* ==========================================================================
   Unterseiten-Komponenten (ab /reifen/)
   ========================================================================== */

/* --- Hero-Variante für Unterseiten ------------------------------------- */
.hero--sub { height: 520px; }
.hero__title--sub { font-size: var(--fs-hero); max-width: 1000px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--on-dark-soft);
  text-shadow: var(--shadow-text);
}
.breadcrumb a { border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.breadcrumb a:hover { color: var(--on-dark); }
.breadcrumb [aria-current] { color: var(--on-dark); }

/* Variante für helle Seiten (Lexikon): dunkle Schrift, kein Schatten */
.breadcrumb--dark {
  color: var(--ink-soft);
  text-shadow: none;
  font-size: var(--fs-meta);
  margin-bottom: var(--sp-5);
}
.breadcrumb--dark a:hover { color: var(--black); }
.breadcrumb--dark [aria-current] { color: var(--black); }
.breadcrumb--dark span[aria-hidden] { color: var(--muted); }

/* --- USP-Liste als Linkliste ------------------------------------------- */
.usp--links li { padding: 0; }
.usp--links a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
}
.usp--links a > svg {
  flex: none;
  margin-left: auto;
  align-self: center;
  opacity: .35;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.usp--links a:hover > svg { opacity: 1; transform: translateX(4px); }

/* --- Karten-Varianten -------------------------------------------------- */
.services--tight { background: var(--surface); }
.cards--quad { grid-template-columns: repeat(4, 1fr); }
.card--compact { border: var(--hairline-w) solid var(--hairline); }
.card--compact img { height: 178px; }
.card--compact .card__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.card--compact .card__title { font-size: var(--fs-h4); }
.card--compact .card__text { margin-bottom: 0; font-size: var(--fs-body); }

/* --- Saison ------------------------------------------------------------
   js/saison.js setzt html[data-saison="winter|sommer"]: zuerst nach Datum,
   dann aus /api/saison (Admin-Uebersteuerung). Ohne Attribut (kein JS)
   greift keine Regel: HTML-Reihenfolge, kein Etikett, Sommerblock bleibt
   hidden. Spec: docs/superpowers/specs/2026-09-22-saison-logik-design.md */
html[data-saison="winter"] [data-saison-nur="sommer"],
html[data-saison="sommer"] [data-saison-nur="winter"] { display: none; }

/* Hellgraues Band: hebt den Saisonblock leise vom weissen Intro ab. Die
   Leistungen darunter sind ebenfalls hellgrau, deshalb trennt eine Hairline
   die beiden. Karten bleiben weiss, ohne Hairline-Rahmen. */
.saison { background: var(--light); padding: var(--sec-y-band) 0; }
.saison__head { max-width: 820px; margin-bottom: var(--sp-8); }
.saison .card--compact { border-color: transparent; }
.saison + .services { border-top: var(--hairline-w) solid var(--hairline); }

/* Reihenfolge: die aktive Saisonkachel rueckt nach vorne; .card--erste
   (Reifenkachel der Startseite) bleibt davor. */
.card--erste { order: -2; }
html[data-saison="winter"] .card[data-saison="winter"],
html[data-saison="sommer"] .card[data-saison="sommer"],
html[data-saison="winter"] #saison .angebot-karte[data-saison="winter"],
html[data-saison="sommer"] #saison .angebot-karte[data-saison="sommer"] { order: -1; }

/* Hervorhebung: Etikett oben links und ein gelber Rahmen als Pseudo-Element
   ueber dem Bild. Kein inset-Schatten (laege unter dem Bild) und kein
   outline (wuerde den Fokus-Doppelring verdraengen). .card--still: Kacheln,
   die nur umsortiert werden (Reifenhotel, Autoreinigung), ohne Rahmen. */
.card,
.angebot-karte { position: relative; }
.saison-etikett {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1;
  display: none; padding: var(--sp-1) var(--sp-2) 3px;
  background: var(--yellow); border-radius: var(--radius);
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--black);
}
.angebot-karte > .saison-etikett { left: auto; right: var(--sp-3); }
.card[data-saison]::after,
.angebot-karte[data-saison]::after {
  content: ''; position: absolute; inset: 0; display: none; pointer-events: none;
  border: var(--control-w) solid var(--yellow); border-radius: inherit;
}
/* .angebot-karte hat einen eigenen Hairline-Rahmen; der Rahmen hier ruecke
   um dessen Breite nach aussen, sonst blasser Doppelring am Kartenrand. */
.angebot-karte[data-saison]::after { inset: calc(-1 * var(--hairline-w)); }
html[data-saison="winter"] [data-saison="winter"] > .saison-etikett,
html[data-saison="sommer"] [data-saison="sommer"] > .saison-etikett { display: inline-block; }
html[data-saison="winter"] [data-saison="winter"]::after,
html[data-saison="sommer"] [data-saison="sommer"]::after { display: block; }
html[data-saison] .card--still::after { display: none; }

/* --- Preisrechner mit fünf Schritten ---------------------------------- */
.steps--five { grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); }
.steps--five .step { padding: var(--sp-6) var(--sp-5); }
.steps--five .step__title { font-size: var(--fs-sub); }

/* --- Reifenhersteller (Logo-Laufband) --------------------------------- */
.brands {
  background: var(--black);
  margin: 0 var(--frame);
  padding: var(--sec-y-band) 0;
  overflow: hidden;
}
.brands__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-heavy);
  color: var(--on-dark);
  margin-bottom: var(--sp-11);
  text-wrap: pretty;
}
.brands__marquee { overflow: hidden; }
.brands__track {
  display: flex;
  width: max-content;
  animation: pfmarq 46s linear infinite;
}
.brands:hover .brands__track,
.brands:focus-within .brands__track { animation-play-state: paused; }
.brands__group {
  display: flex;
  align-items: center;
  flex: none;
}
.brands__group > a,
.brands__group > img {
  flex: none;
  width: 152px;
  padding: 0 var(--sp-6);
  box-sizing: content-box;
}
.brands__group img {
  width: 100%;
  height: 42px;
  object-fit: contain;
  object-position: center;
  /* Die Hersteller-SVGs sind teils weiss, teils dunkel – auf Schwarz vereinheitlichen */
  filter: brightness(0) invert(1);
  opacity: .82;
  transition: opacity var(--dur-base) var(--ease);
}
.brands__group a:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .brands__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .brands__group { flex-wrap: wrap; justify-content: center; }
  .brands__group[aria-hidden="true"] { display: none; }
}

/* --- Zweispaltiger Textabschnitt -------------------------------------- */
.prose-section { background: var(--surface); padding: var(--sec-y) 0; }
.prose-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-15);
  align-items: start;
}
/* Fliesstext mit Randtiteln (build/prose_randtitel.py, ab zwei Zwischentiteln):
   Kopf ueber die volle Breite, dann je Zwischentitel eine Zeile - Titel links,
   Text rechts. Der Titel faehrt bei langen Abschnitten mit, damit links keine
   leere Flaeche entsteht. Ein Bild aus dem Kopf steht neben Titel und Lead. */
.randtitel__kopf { max-width: 900px; margin-bottom: var(--sp-10); }
.randtitel__kopf .intro__lead { margin-top: var(--sp-4); }
.randtitel__kopf--bild {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-15);
  align-items: end;
}
.randtitel__kopf--bild img { width: auto; max-width: 100%; max-height: 400px; }
.randtitel__einstieg { max-width: 900px; margin: calc(var(--sp-6) - var(--sp-10)) 0 var(--sp-10); }
.randtitel__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-15);
  padding: var(--sp-8) 0;
  border-top: var(--hairline-w) solid var(--hairline);
}
.randtitel__zeile--cta { border-top: 0; padding-top: 0; }
.randtitel__zeile--cta > .prose { grid-column: 2; }
.randtitel__titel {
  position: sticky; top: calc(var(--header-h) + var(--sp-6)); align-self: start;
  padding-top: var(--sp-4);
  font-size: var(--fs-h4); line-height: var(--lh-head); font-weight: var(--fw-heavy); color: var(--black);
  scroll-margin-top: var(--header-h);
}
.randtitel__titel::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; background: var(--yellow); }
/* Breite Tabellen (ab 4 Spalten) stehen nie neben einem Titel: sie rutschen unter
   den Zwischentitel und nehmen die volle Breite. Schmale bleiben in der Textspalte. */
.randtitel__zeile:has(th:nth-child(4)) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.randtitel__zeile:has(th:nth-child(4)) .randtitel__titel { position: relative; top: auto; }
/* Zweispalter mit Tabelle: Titel oben, Text und Tabelle darunter statt daneben */
.prose-section__grid:has(table) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
.prose-section__grid:has(table) > * { max-width: 900px; }
.prose-section__grid:has(table) .intro__lead { margin-top: var(--sp-4); }

/* Text neben Bild (build/bild_split.py): Kopf und Text links (7/12), Bild
   rechts (5/12) und faehrt mit. Auf dem Handy: Kopf, Bild, Text. Mehrere
   Bild-Bloecke einer Seite wechseln die Seite (--links). */
.bild-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "kopf medien" "text medien";
  grid-template-rows: auto 1fr;
  column-gap: var(--sp-15);
  align-items: start;
}
.bild-split--links .bild-split__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "medien kopf" "medien text";
}
.bild-split__kopf { grid-area: kopf; }
.bild-split__kopf .intro__lead { margin-top: var(--sp-4); }
.bild-split__text { grid-area: text; margin-top: var(--sp-8); }
.bild-split__text .intro__ctas { margin-top: var(--sp-8); }
.bild-split__medien { grid-area: medien; position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.bild-split__medien .prose-figure { margin: 0; }
.bild-split__medien .prose-figure img { display: block; width: 100%; max-height: 640px; object-fit: cover; }

/* Vorher/Nachher als Paar nebeneinander */
.vergleich { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.vergleich img { display: block; width: 100%; height: auto; aspect-ratio: 736 / 800; object-fit: cover; border-radius: var(--radius); }
.vergleich figcaption { grid-column: 1 / -1; margin-top: var(--sp-1); font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--ink-soft); }

/* Preis-Karten: Varianten mit Preis, Dauer, Ergebnis statt breiter Tabelle */
.preis-section { background: var(--light); padding: var(--sec-y) 0; }
.preis-section__kopf { max-width: 900px; }
.preis-section__kopf .intro__lead { margin-top: var(--sp-4); }
.preis-karten {
  list-style: none; padding: 0; margin: var(--sp-10) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap);
}
.preis-karte {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-8);
  background: var(--surface); border-top: 4px solid var(--yellow); border-radius: var(--radius-lg);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft);
}
.preis-karte__label { font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.preis-karte__titel { font-size: var(--fs-h4); line-height: var(--lh-head); font-weight: var(--fw-heavy); color: var(--black); }
.preis-karte__preis { margin-top: var(--sp-2); font-size: var(--fs-figure); line-height: var(--lh-tight); font-weight: var(--fw-heavy); color: var(--black); }
.preis-karte__preis small { display: block; margin-top: var(--sp-1); font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--ink-soft); }
.preis-karte__dauer { padding-bottom: var(--sp-3); border-bottom: var(--hairline-w) solid var(--hairline); font-weight: var(--fw-bold); color: var(--black); }
.preis-karte dt { margin-top: var(--sp-3); font-weight: var(--fw-bold); color: var(--black); }
.preis-karte dd { margin: 0; }
.preis-section__fuss { max-width: 900px; margin-top: var(--sp-10); font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--ink-soft); }
.preis-section__fuss .intro__ctas { margin-top: var(--sp-6); }
.prose {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}
.prose > * + * { margin-top: var(--sp-4); }
.prose a {
  color: var(--black);
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--yellow);
}
.prose a:hover { border-bottom-color: var(--black); }
.prose strong { font-weight: var(--fw-bold); }

/* Inline-Links in den Intro-Texten */
.intro__text a {
  color: var(--black);
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--yellow);
}
.intro__text a:hover { border-bottom-color: var(--black); }

/* --- CTA-Band mit Bildhintergrund ------------------------------------- */
.cta-image {
  position: relative;
  margin: 0 var(--frame);
  padding: var(--sec-y) 0;
  overflow: hidden;
  background: var(--slate);
  isolation: isolate;
}
.cta-image__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta-image__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.35) 100%);
  z-index: -1;
}
.cta-image__inner { position: relative; }
.cta-image__sub { max-width: 520px; }

/* --- FAQ: Kategorien und Sprungnavigation ----------------------------- */
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-13);
}
.faq-nav a {
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  background: var(--light);
  border-radius: var(--radius);
  font-size: var(--fs-meta);
  font-weight: var(--fw-heavy);
}
.faq-nav a:hover { background: var(--yellow); }

.faq-group + .faq-group { margin-top: var(--sp-14); }
.faq-group__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  font-weight: var(--fw-heavy);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 3px solid var(--yellow);
  scroll-margin-top: var(--header-h);
  text-wrap: pretty;
}

/* --- Reifen Kompetenz / Linkliste ------------------------------------- */
.knowledge { background: var(--light); padding: var(--sec-y) 0; }
.knowledge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-15);
  align-items: start;
}
.knowledge .intro__text { margin-bottom: var(--sp-8); }

.linklist { border-top: var(--hairline-w) solid var(--hairline); }
.linklist li { border-bottom: var(--hairline-w) solid var(--hairline); }
.linklist a {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
}
.linklist svg {
  flex: none;
  margin-left: auto;
  opacity: .35;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.linklist a:hover svg { opacity: 1; transform: translateX(4px); }

/* ==========================================================================
   Lexikon
   ========================================================================== */

/* --- Lesebreite: Begriffsseiten laufen nicht auf voller --cw ------------ */
.container--reading { max-width: 1180px; }

/* --- Seitenkopf (alle Lexikon-Seiten): Breadcrumb, Tag, h1, Lead ------- */
.lex-head {
  background: var(--light);
  border-bottom: var(--hairline-w) solid var(--hairline);
  padding: var(--sp-9) 0 var(--sp-11);
}
.lex-head__tag {
  display: inline-block; margin: 0 0 var(--sp-3); padding: var(--sp-1) var(--sp-2) 3px;
  background: var(--surface); border: var(--hairline-w) solid var(--hairline);
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-soft);
}
.lex-head__title {
  max-width: 900px;
  font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-heavy); color: var(--black);
  text-wrap: pretty;
}
.lex-head__lead {
  margin-top: var(--sp-4); max-width: 760px;
  font-size: var(--fs-sub); line-height: var(--lh-body); color: var(--ink-soft);
}
.lex-head__lead p + p { margin-top: var(--sp-2); }
.lex-head__lead a {
  color: var(--black); font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow);
}
.lex-head__lead a:hover { border-bottom-color: var(--black); }
/* Kurzdefinition der Begriffsseite: gelb markierter Definitionskasten */
.lex-head__lead--def {
  border-left: 5px solid var(--yellow); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-weight: var(--fw-bold); color: var(--black);
}

/* --- Seitenkoerper (alle Lexikon-Seiten) ------------------------------- */
.lex-body { background: var(--surface); padding: var(--sp-13) 0 var(--sp-16); }

/* --- Register: Werkzeugleiste ----------------------------------------- */
.lex-toolbar { display: flex; gap: var(--sp-3); align-items: stretch; margin-bottom: var(--sp-5); }
.lex-search { display: flex; flex: 1; border: var(--control-w) solid var(--black); }
.lex-search input {
  flex: 1; min-width: 0; border: 0; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body); background: var(--surface);
}
.lex-search button {
  background: var(--yellow); border: 0; padding: 0 var(--sp-5);
  font-size: var(--fs-body); font-weight: var(--fw-heavy); cursor: pointer;
}
.lex-search button:hover { box-shadow: var(--shadow-hover); }
/* Eingabe in gerahmter Leiste: der Fokusring sitzt auf der Leiste (wie bei
   .pr-tile), nicht auf dem rahmenlosen Feld darin */
.lex-search:has(input:focus-visible),
.tool-filter:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 3px var(--black); }
.lex-search input:focus-visible,
.tool-filter input:focus-visible { outline: none; box-shadow: none; }
.lex-switch { display: flex; border: var(--control-w) solid var(--black); flex: none; }
.lex-switch button {
  padding: 0 var(--sp-4); background: none; border: 0; cursor: pointer;
  font-size: var(--fs-body); font-weight: var(--fw-heavy); color: var(--black); white-space: nowrap;
}
.lex-switch button:hover { background: var(--light); }
.lex-switch button[aria-pressed="true"] { background: var(--yellow); }

/* --- Register: Sprungleisten ------------------------------------------ */
.lex-az { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.lex-az a, .lex-az span {
  min-width: 32px; text-align: center; padding: var(--sp-2) 0 6px;
  background: var(--light); font-size: var(--fs-meta); font-weight: var(--fw-heavy); border-radius: var(--radius);
}
.lex-az a:hover { background: var(--yellow); }
.lex-az span { color: var(--muted); }

.lex-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.lex-chips button {
  padding: var(--sp-2) var(--sp-4) var(--sp-2); background: var(--light); border: 0; border-radius: var(--radius);
  font-size: var(--fs-meta); font-weight: var(--fw-heavy); cursor: pointer;
}
.lex-chips button:hover,
.lex-chips button[aria-pressed="true"] { background: var(--yellow); }

/* --- Register: Tool-Karten -------------------------------------------- */
/* Eine Karte je Rechner (register.py aus tools.TOOLS): Icon auf gelber
   Kachel, Titel, Versprechen, darunter das Marken-Suchfeld, das
   js/lexikon.js einblendet (ohne JS bleibt es hidden und die Karte ist ein
   Link). Vier Karten stehen 2x2 statt in der 4er-Reihe von .cards--quad. */
.lex-tools { margin-bottom: var(--sp-8); }
.cards.lex-tools { grid-template-columns: repeat(2, 1fr); }
.tool-karte { display: flex; flex-direction: column; overflow: visible; }
.tool-karte:hover { transform: none; box-shadow: none; border-color: var(--black); }
.tool-karte__link { display: block; flex: 1; padding: var(--sp-5) var(--sp-6) var(--sp-4); }
.tool-karte__icon {
  display: block; width: 48px; height: 48px; padding: var(--sp-2); margin-bottom: var(--sp-4);
  background: var(--yellow); border-radius: var(--radius); color: var(--black);
}
.tool-karte .card__title { margin-bottom: 6px; }
.tool-karte .card__text { margin-bottom: 0; }
.tool-karte__suche { position: relative; margin: 0 var(--sp-6) var(--sp-5); }
.tool-karte__suche input {
  width: 100%; border: var(--control-w) solid var(--black); padding: var(--sp-2) var(--sp-3); background: var(--surface);
  font-size: var(--fs-body);
}
.tool-karte__treffer {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 4;
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: var(--control-w) solid var(--black); border-top: 0;
  box-shadow: var(--shadow-card);
}
.tool-karte__treffer a { display: block; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.tool-karte__treffer a:hover, .tool-karte__treffer a:focus-visible { background: var(--yellow); }
/* Ring nach innen, sonst ueberlappt er die Nachbartreffer */
.tool-karte__treffer a:focus-visible { outline-color: var(--black); outline-offset: -3px; box-shadow: none; }
.tool-karte__leer { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-meta); color: var(--ink-soft); }
.tool-karte__leer a { display: inline; padding: 0; font-size: inherit; border-bottom: 2px solid var(--yellow); }
.tool-karte__leer a:hover { background: none; }

/* --- Rechner-Bereich: Kopf, Reihe, Teaser, Handlungs-Kasten, Hub --------
   Kopf ueber dem Tool-Block (Register, render_tools_kopf) und Listenvariante
   auf der Startseite (startseite_rechner.render_teaser); Handlungs-Kasten
   nach dem Ergebnis auf den Tool-Seiten (lexikon/tools.render_weiter) und
   die Bausteine der Hub-Seite /auto-tools/ (lexikon/rechnerseite.py). */
/* Register: ein Teaser-Kasten auf /auto-tools/ statt der vier Karten (dunkel
   wie .tool-weiter; das Ganze ist EIN Link, der Button innen ist ein span) */
.lex-rechner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-6);
  margin-bottom: var(--sp-8); padding: var(--sp-5) var(--sp-6);
  background: var(--slate); border-left: 5px solid var(--yellow); border-radius: var(--radius); color: var(--on-dark);
  transition: box-shadow var(--dur-base) var(--ease);
}
.lex-rechner:hover { box-shadow: var(--shadow-hover); }
.lex-rechner__label { grid-column: 1; font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--yellow); letter-spacing: var(--ls-caps); }
.lex-rechner__title { grid-column: 1; display: block; font-size: var(--fs-sub); font-weight: var(--fw-heavy); }
.lex-rechner__text { grid-column: 1; display: block; font-style: normal; color: var(--on-dark-soft); }
.lex-rechner__btn { grid-column: 2; grid-row: 1 / span 3; }

/* Startseite: Rechner-Teaser zwischen Leistungen und Filialen. Links Titel,
   Satz und Link, rechts die vier Rechner als Zeilen mit Hairlines (Icon |
   Titel + Frage | Suchfeld). Die Karten aus render_tool_karten werden hier
   zu Zeilen umgebaut, js/lexikon.js bindet weiter an dieselben Klassen. */
.rechner-teaser { background: var(--surface); padding: var(--sec-y) 0; border-top: var(--hairline-w) solid var(--hairline); border-bottom: var(--hairline-w) solid var(--hairline); }
.rechner-teaser__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8) var(--sp-15); align-items: start; }
.rechner-teaser .h2 { margin-bottom: var(--sp-4); }
.rechner-teaser__sub { color: var(--ink-soft); max-width: 480px; margin-bottom: var(--sp-7); }
.rechner-teaser__more { margin: 0; }
.rechner-teaser .tool-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5) 0;
  background: transparent; border: 0; border-radius: 0; border-bottom: var(--hairline-w) solid var(--hairline);
}
.rechner-teaser .tool-karte:first-child { border-top: var(--hairline-w) solid var(--hairline); }
.rechner-teaser .tool-karte:hover { border-color: var(--hairline); }
.rechner-teaser .tool-karte__link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-4); align-items: center;
  flex: none; padding: 0;
}
.rechner-teaser .tool-karte__icon { grid-row: 1 / span 2; margin: 0; }
.rechner-teaser .tool-karte .card__title { font-size: var(--fs-h4); margin: 0; align-self: end; }
.rechner-teaser .tool-karte .card__text { align-self: start; }
.rechner-teaser .tool-karte__link:hover .card__title {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--yellow);
}
.rechner-teaser .tool-karte__suche { margin: 0; }
.rechner-teaser .tool-karte__suche input { padding: var(--sp-3) 44px var(--sp-3) var(--sp-4); }
/* Lupe rechts im Feld; weicht, sobald die Trefferliste offen ist (dort
   sitzt dann der Loeschen-Knopf des Browsers) */
.rechner-teaser .tool-karte__suche::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat center / contain;
}
.rechner-teaser .tool-karte__suche:has(.tool-karte__treffer:not([hidden]))::after { display: none; }
@media (max-width: 1100px) {
  .rechner-teaser__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width: 720px) {
  .rechner-teaser .tool-karte { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; }
}

/* Handlungs-Kasten nach dem Ergebnis auf den Tool-Seiten (dunkel wie
   .term-leistung, gelbe Kante, immer sichtbar - auch ohne JS) */
.tool-weiter {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-9) 0; padding: var(--sp-5) var(--sp-6);
  background: var(--slate); border-left: 5px solid var(--yellow); border-radius: var(--radius); color: var(--on-dark);
}
.tool-weiter__title { grid-column: 1; font-size: var(--fs-sub); font-weight: var(--fw-heavy); margin: 0; }
.tool-weiter__text { grid-column: 1; color: var(--on-dark-soft); margin: 0; }
.tool-weiter__actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: 0; }
.tool-weiter .btn--outline { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.tool-weiter .btn--outline:hover { background: var(--on-dark); color: var(--black); }
/* Teaser oben in der Lesespalte der Begriffsseiten mit eingebettetem Tool
   (Reifenluftdruck, Lochkreise): springt per Anker zum Block .term-extra */
.tool-weiter--oben { margin: 0 0 var(--sp-8); }
.term-extra[id] { scroll-margin-top: var(--header-h); }

/* Hub /auto-tools/: Preisrechner-Hinweis (oben, vor den Karten, bewusst leise) und Erklaerteil */
.rechner-hub__preis {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
  margin: 0 0 var(--sp-9); padding: var(--sp-4) var(--sp-6);
  background: var(--light); border-left: 3px solid var(--yellow); border-radius: var(--radius);
}
.rechner-hub__preis-text { margin: 0; color: var(--ink-soft); }
.rechner-hub__preis-text strong { color: var(--black); font-weight: var(--fw-heavy); }
.rechner-hub__text { margin: var(--sp-12) auto 0; }
/* Lauftext des Kunden: Lesebreite wie eine Textspalte, linksbuendig unter den Karten */
.rechner-hub__text.prose { max-width: 820px; margin-left: 0; }
/* Werkstattfragen: das FAQ-Akkordeon (.faq__list, Toggle in js/main.js) ohne
   die .faq-Sektion, daher eigener Abstand fuer Titel und Quellenzeile. */
.rechner-hub__faq .h2 { margin-bottom: var(--sp-8); }
.rechner-hub__faq .tool-source { margin-top: var(--sp-6); }

/* --- Register: Begriffsliste ------------------------------------------ */
.lex-group { margin-bottom: var(--sp-8); scroll-margin-top: var(--header-h); }
.lex-group__title {
  font-size: var(--fs-h3); font-weight: var(--fw-heavy); margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 3px solid var(--yellow);
}
.lex-terms { column-count: 3; column-gap: var(--sp-8); margin: 0; }
.lex-term {
  break-inside: avoid; padding: var(--sp-3) 0; border-bottom: var(--hairline-w) solid var(--hairline);
}
.lex-term dt { font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.lex-term dd { margin: 2px 0 0; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-soft); }
.lex-tag {
  display: inline-block; margin-left: var(--sp-2); padding: var(--sp-1) var(--sp-2) 3px;
  background: var(--light); border-radius: var(--radius); font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--ink-soft);
  vertical-align: 2px;
}
.lex-empty { padding: var(--sp-10) 0; font-size: var(--fs-sub); font-weight: var(--fw-bold); }

/* --- Begriffsseite: Lesespalte + Randspalte ---------------------------- */
.term-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-14); align-items: start;
}
.term-content { min-width: 0; }
/* Zusatzblock unter der Lesespalte (z.B. Markenraster bei Slug-Kollision) */
.term-extra { margin-top: var(--sp-13); }
.term-aside { position: sticky; top: var(--header-h); }
.aside-box { border: var(--hairline-w) solid var(--hairline); padding: var(--sp-5); }
.aside-box + .aside-box { margin-top: var(--sp-3); }
.aside-head {
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps);
  padding-bottom: var(--sp-2); border-bottom: 3px solid var(--yellow); margin-bottom: var(--sp-3);
}
.aside-link { display: block; padding: var(--sp-2) 0; border-bottom: var(--hairline-w) solid var(--hairline); font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.aside-link:last-child { border-bottom: 0; }
.aside-link:hover { color: var(--ink-soft); }
.aside-link i { display: block; font-style: normal; font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--ink-soft); }
/* <a> mit Block-Kindern: ohne display:block floss der Kasten inline und
   ueberlappte den vorigen .aside-box */
.aside-tool { display: block; background: var(--slate); padding: var(--sp-5); }
.aside-box + .aside-tool { margin-top: var(--sp-3); }
.aside-tool { transition: box-shadow var(--dur-base) var(--ease); }
.aside-tool:hover { box-shadow: var(--shadow-hover); }
.aside-tool__label { display: block; font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--yellow); letter-spacing: var(--ls-caps); margin-bottom: 6px; }
.aside-tool b { display: block; color: var(--on-dark); font-size: var(--fs-sub); font-weight: var(--fw-heavy); margin-bottom: var(--sp-1); }
.aside-tool i { font-style: normal; font-size: var(--fs-meta); color: var(--on-dark-soft); }

.term-prevnext { display: flex; gap: var(--sp-3); margin-top: var(--sp-7); }
.term-prevnext a { flex: 1; border: var(--hairline-w) solid var(--hairline); padding: var(--sp-3) var(--sp-4); transition: border-color var(--dur-base) var(--ease); }
.term-prevnext a:hover { border-color: var(--black); }
.term-prevnext span { display: block; font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--ink-soft); letter-spacing: var(--ls-caps); margin-bottom: 3px; }
.term-prevnext b { font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.term-prevnext .is-next { text-align: right; }

/* --- Kachel-Modul: Bild-Kacheln unter der Lesespalte (eigener Lese-
   Container mit .term-extra fuer den Abstand nach oben). Spaltenzahl kommt
   von .cards (3 / 2 ab 1100px / 1 ab 720px), Rahmen von .card--compact. --- */
.lex-cards__title {
  font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: var(--fw-heavy); margin-bottom: var(--sp-5); text-wrap: pretty;
}
/* Kachelbilder sind Icon-Grafiken auf Weiss (960x640): ganz zeigen statt beschneiden */
.cards--lex .card img { height: 200px; object-fit: contain; background: var(--surface); padding: var(--sp-4); }

/* --- CTA-Modul: Bildband (.cta-image aus /reifen/) mit Ueberzeile und
   Zusatztext unter dem Lead ---------------------------------------------- */
.cta-image__overline {
  font-size: var(--fs-body); font-weight: var(--fw-heavy); color: var(--yellow); letter-spacing: var(--ls-caps); margin-bottom: var(--sp-2);
}
.cta-image__text { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--on-dark-soft); max-width: 520px; }

/* --- Fliesstext: erweitert .prose (Basis bei den Unterseiten, wird auch
   auf /reifen/ fuer reine Absaetze genutzt) additiv um Zwischentitel,
   Listen, Bilder und Tabellen aus dem Markdown-Renderer. --------------- */
.prose p { text-wrap: pretty; }
.prose h2 {
  margin-top: var(--sp-11); font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: var(--fw-heavy);
  color: var(--black); text-wrap: pretty;
}
.prose h3 {
  margin-top: var(--sp-8); font-size: var(--fs-h4); line-height: var(--lh-head); font-weight: var(--fw-heavy);
  color: var(--black);
}
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-3); }
.prose :is(h2, h3):first-child { margin-top: 0; }
/* Listen: der globale Reset nimmt die Marker - hier eigene (gelber Strich / Ziffer) */
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: var(--sp-6); }
.prose li + li { margin-top: var(--sp-2); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .75em;
  width: 12px; height: 3px; background: var(--yellow);
}
.prose ol { counter-reset: prose-liste; }
.prose ol li { counter-increment: prose-liste; }
.prose ol li::before {
  content: counter(prose-liste) "."; position: absolute; left: 0; top: 0;
  font-weight: var(--fw-heavy); color: var(--black);
}
.prose-figure { margin: var(--sp-8) 0; }
.prose-figure img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose-figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--ink-soft); }
.prose .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-7) 0; }
.prose .tool-table { min-width: 520px; }
/* Sprungziele (Inhaltsverzeichnis, FAQ) nicht unter dem Sticky-Header */
.prose h2, .prose h3, .term-faq h2 { scroll-margin-top: var(--header-h); }
/* Verwaister Link-Absatz (nur ein Link) als Outline-Button; .prose a und
   .faq__answer-inner a wuerden dem Button sonst die gelbe Unterkante geben */
.prose .prose-cta { margin-top: var(--sp-6); }
.prose .btn--outline,
.faq__answer-inner .btn--outline { border-bottom: var(--hairline-w) solid var(--black); }

/* --- Begriffsseite: Kopf-Metazeile (Stand / Geprueft / Lesezeit) -------- */
.lex-head__meta {
  display: flex; flex-wrap: wrap; gap: 6px var(--sp-6); margin-top: var(--sp-4);
  font-size: var(--fs-meta); line-height: var(--lh-snug); color: var(--ink-soft);
}
.lex-head__meta b { font-weight: var(--fw-heavy); color: var(--black); }

/* --- Begriffsseite: "Das Wichtigste in Kuerze" vor dem Fliesstext ------ */
.term-kurz {
  background: var(--light); border-left: 5px solid var(--yellow);
  padding: var(--sp-5) var(--sp-6) var(--sp-5); margin-bottom: var(--sp-9);
}
.term-kurz__title {
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.term-kurz li {
  position: relative; padding-left: var(--sp-6);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); color: var(--black); text-wrap: pretty;
}
.term-kurz li + li { margin-top: var(--sp-2); }
.term-kurz li::before {
  content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 3px; background: var(--yellow);
}

/* --- Begriffsseite: Inhaltsverzeichnis. Derselbe Inhalt zweimal: als
   .aside-box in der Randspalte (nur ueber 1100px) und inline vor dem
   Fliesstext (nur ≤1100px, wenn die Randspalte unter den Text faellt). --- */
.term-toc ol { counter-reset: toc; }
.term-toc li { counter-increment: toc; }
.term-toc a {
  display: block; position: relative; padding: var(--sp-2) 0 var(--sp-2) var(--sp-8);
  border-bottom: var(--hairline-w) solid var(--hairline); font-size: var(--fs-body); line-height: var(--lh-snug); font-weight: var(--fw-bold);
}
.term-toc li:last-child a { border-bottom: 0; }
.term-toc a:hover { color: var(--ink-soft); }
.term-toc a::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 9px;
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); color: var(--ink-soft);
}
.term-toc a:hover::before { color: var(--black); }
.term-toc--inline { display: none; border: var(--hairline-w) solid var(--hairline); padding: var(--sp-5); margin-bottom: var(--sp-9); }

/* --- Begriffsseite: Leistungs-Karte im Fliesstext (dunkel wie
   .aside-tool, gelbe Kante). Als .prose .term-leistung geschrieben, weil
   .prose a sonst Farbe und gelbe Unterkante durchdrueckt. ---------------- */
.prose .term-leistung {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-5);
  margin-top: var(--sp-9); padding: var(--sp-5) var(--sp-6);
  background: var(--slate); border-left: 5px solid var(--yellow); border-bottom: 0; border-radius: var(--radius);
  color: var(--on-dark); font-weight: var(--fw-regular);
  transition: box-shadow var(--dur-base) var(--ease);
}
.prose .term-leistung:hover { box-shadow: var(--shadow-hover); }
.term-leistung__label { grid-column: 1; font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); color: var(--yellow); }
.prose .term-leistung b { grid-column: 1; display: block; margin-top: var(--sp-1); font-size: var(--fs-sub); line-height: var(--lh-head); font-weight: var(--fw-heavy); color: var(--on-dark); }
.prose .term-leistung i { grid-column: 1; display: block; margin-top: var(--sp-1); font-style: normal; font-size: var(--fs-body); color: var(--on-dark-soft); }
.term-leistung__pfeil { grid-column: 2; grid-row: 1 / span 3; font-size: var(--fs-h2); line-height: 1; font-weight: var(--fw-heavy); color: var(--yellow); }

/* --- Begriffsseite: FAQ-Akkordeon - Site-Bausteine .faq__* (Markup und
   JS aus main.js), aber ohne die 100px-Sektionsabstaende der Startseite
   und etwas kompakter fuer die Lesespalte ------------------------------ */
.term-faq { margin-top: var(--sp-13); }
.term-faq h2 { font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: var(--fw-heavy); margin-bottom: var(--sp-4); text-wrap: pretty; }
.term-faq .faq__question { gap: var(--sp-4); padding: var(--sp-5) 0; }
.term-faq .faq__num { width: 36px; font-size: var(--fs-body); }
.term-faq .faq__q { font-size: var(--fs-sub); }
.term-faq .faq__icon { font-size: var(--fs-h4); }
.term-faq .faq__answer-inner { margin-left: var(--sp-13); font-size: var(--fs-body-lg); max-width: none; }
.term-faq .faq__item.is-open .faq__answer-inner { padding-bottom: var(--sp-6); }
.term-faq .faq__answer-inner .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Begriffsseite: "Nach oben" unter dem Lesestoff --------------------- */
.term-top {
  display: inline-block; margin-top: var(--sp-9); padding: var(--sp-2) var(--sp-3) var(--sp-2);
  background: var(--light); border-radius: var(--radius);
  font-size: var(--fs-meta); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps);
}
.term-top:hover { background: var(--yellow); }

/* --- Tools -------------------------------------------------------------- */
.tool-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-7); }
.tool-brand {
  border: var(--hairline-w) solid var(--hairline); border-radius: var(--radius); padding: var(--sp-3) var(--sp-2); text-align: center;
  font-size: var(--fs-meta); font-weight: var(--fw-heavy);
}
.tool-brand:hover { background: var(--yellow); border-color: var(--yellow); }
/* Raster-Beschriftung (aside-head-Optik): gelbe Unterkante nicht auf volle Breite */
.tool-label { max-width: 220px; }
.tool-back { margin-top: var(--sp-6); }
.tool-others { margin-top: var(--sp-7); }
.tool-filter { display: flex; border: var(--control-w) solid var(--black); max-width: 420px; margin-bottom: var(--sp-4); }
.tool-filter input { flex: 1; min-width: 0; border: 0; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); }
.tool-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.tool-table th {
  background: var(--black); color: var(--on-dark); text-align: left; padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps);
}
.tool-table td { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--hairline); color: var(--ink-soft); }
.tool-table td:first-child { color: var(--black); font-weight: var(--fw-heavy); }
.tool-table tbody tr:nth-child(even) td { background: var(--light); }
.tool-table tr[hidden] { display: none; }
/* Tabellen aus Records (tools.py): Beschriftung, Zeilenkoepfe, fehlende Werte, Metazeilen */
.tool-table caption { caption-side: top; text-align: left; padding: 0 0 var(--sp-2); font-size: var(--fs-caption); color: var(--ink-soft); }
.tool-table tbody th { background: transparent; color: var(--black); font-size: var(--fs-body); font-weight: var(--fw-heavy); letter-spacing: 0; border-bottom: 1px solid var(--hairline); }
.tool-table tbody tr:nth-child(even) th { background: var(--light); }
.tool-table td.is-leer { color: var(--ink-soft); opacity: .55; }
.tool-meta { margin-top: var(--sp-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-soft); max-width: 760px; }
.tool-meta + .tool-meta { margin-top: 6px; }
.tool-meta a { color: var(--black); font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow); }
.tool-source { display: block; margin-top: var(--sp-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-soft); max-width: 760px; }

/* --- Tools: Finder (js/rechner.js) ---------------------------------------
   <form class="rechner">: Auswahlfelder (native <select>, tastaturbedienbar)
   und gelbe Ergebniskarte (.rechner-ergebnis, aria-live). Ohne JS bleibt das
   Formular hidden. Optik angelehnt an .lex-search/.pr-select. */
.rechner { margin-bottom: var(--sp-8); }
.rechner__titel { margin-bottom: var(--sp-3); }
.rechner__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); max-width: 900px; }
.rechner__feld { display: block; min-width: 0; }
.rechner__feld > span {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft);
}
/* Eine Auswahlliste fuer Finder (.rechner__feld) und Preisrechner (.pr-select) */
.rechner__feld select,
.pr-select {
  display: block; width: 100%; padding: var(--sp-3) var(--sp-11) var(--sp-3) var(--sp-4);
  border: var(--control-w) solid var(--black); border-radius: 0; background: var(--surface);
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--black);
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center;
}
.rechner__feld select:disabled,
.pr-select:disabled { color: var(--ink-soft); border-color: var(--hairline); cursor: default; opacity: 1; }
.rechner-ergebnis { margin-top: var(--sp-5); background: var(--yellow); padding: var(--sp-6); max-width: 900px; }
.rechner-ergebnis[hidden] { display: none; }
.rechner-ergebnis__kopf {
  margin-bottom: var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--on-yellow-soft);
}
.rechner-ergebnis__wert { font-size: var(--fs-figure); line-height: var(--lh-tight); font-weight: var(--fw-heavy); letter-spacing: -.01em; color: var(--black); }
.rechner-ergebnis__wert small { font-size: var(--fs-sub); font-weight: var(--fw-heavy); letter-spacing: 0; }
/* Vier Druckwerte bzw. vier Masse nebeneinander */
.rechner-ergebnis__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); }
.rechner-ergebnis__zelle .rechner-ergebnis__wert { display: block; font-size: var(--fs-h2); }
.rechner-ergebnis__label { display: block; margin-bottom: 2px; font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--on-yellow-soft); }
.rechner-ergebnis__fehlt { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--on-yellow-soft); }
.rechner-ergebnis__details {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--sp-4);
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: var(--hairline-w) solid var(--hairline-yellow); font-size: var(--fs-body);
}
.rechner-ergebnis__details dt { font-weight: var(--fw-heavy); }
.rechner-ergebnis__details dd { margin: 0; color: var(--slate); }
.rechner-ergebnis__hinweis { margin-top: var(--sp-3); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); color: var(--slate); }
.rechner-ergebnis__hinweis a, .rechner-ergebnis__links a { color: var(--black); font-weight: var(--fw-heavy); border-bottom: 2px solid var(--black); }
.rechner-ergebnis__links { margin-top: var(--sp-3); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.rechner-ergebnis__fehler { font-weight: var(--fw-bold); }
.tool-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Markentabellen (tools.py): die Modellspalte bleibt beim seitlichen Wischen
   stehen, damit jede Zahl ihrem Modell zugeordnet bleibt. Zellen brauchen
   dafuer einen deckenden Grund, sonst scheinen die Werte durch. */
.tool-scroll--fix thead th:first-child,
.tool-scroll--fix tbody th { position: sticky; left: 0; z-index: 1; }
.tool-scroll--fix tbody th { background: var(--surface); }
/* Die Beschriftung scrollt mit der Tabelle; sie umbricht darum auf der
   sichtbaren Breite, statt ueber den rechten Rand zu laufen. */
.tool-scroll--fix caption { max-width: calc(100vw - 2 * var(--gut)); }
/* Scrollhinweis (main.js setzt .is-mehr, solange rechts Spalten verdeckt
   sind): der rechte Rand laeuft aus, statt mitten in einer Zahl abzureissen. */
.is-mehr { -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--sp-8)); mask-image: linear-gradient(to left, transparent, #000 var(--sp-8)); }
/* Scrollbare Tabellen sind per Tastatur fokussierbar (main.js setzt
   tabindex): die Maske wuerde den Ring schlucken, darum faellt sie beim
   Fokus weg und der Ring liegt innen (vgl. .suche-treffer). */
[data-tab-auto]:focus-visible { -webkit-mask-image: none; mask-image: none; outline: 3px solid var(--black); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--yellow); }

/* --- Tools: Reifengroessen-Rechner (js/reifenrechner.js) -------------------
   Zwei Eingabegruppen (Groesse, Vergleich), Ergebniskarte mit Vergleich und
   Alternativgroessen. Ampel: .is-ok / .is-knapp / .is-zuviel. */
.reifenrechner { margin-bottom: var(--sp-11); }
.reifenrechner__eingaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.reifenrechner__gruppe { margin: 0; min-width: 0; border: var(--hairline-w) solid var(--hairline); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.reifenrechner__gruppe legend { padding: 0 6px; margin-left: -6px; }
.reifenrechner__gruppe .rechner__felder { max-width: none; }
.reifenrechner-ergebnis { max-width: none; }
.reifenrechner-ergebnis:empty { display: none; }
.reifenrechner__vergleich { margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-5) var(--sp-5); background: var(--surface); border-left: 5px solid var(--muted); }
.reifenrechner__vergleich.is-ok { border-left-color: var(--green); }
.reifenrechner__vergleich.is-knapp { border-left-color: var(--amber); }
.reifenrechner__vergleich.is-zuviel { border-left-color: var(--red); }
.reifenrechner__ampel {
  display: inline-block; margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1);
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase;
  /* Schwarz auf allen vier Zustaenden: weiss ergab 1.70:1 auf --muted,
     3.01 auf --green und 3.75 auf --red. Schwarz liegt bei 12.35, 6.99,
     11.61 und 5.60:1 und traegt damit auch die 13px. */
  color: var(--black); background: var(--muted);
}
.is-ok .reifenrechner__ampel { background: var(--green); }
.is-knapp .reifenrechner__ampel { background: var(--amber); }
.is-zuviel .reifenrechner__ampel { background: var(--red); }
.reifenrechner__alternativen { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: var(--hairline-w) solid var(--hairline-yellow); }
.reifenrechner__untertitel { margin-bottom: var(--sp-3); font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.reifenrechner__alternativen .tool-table { background: var(--surface); }
.reifenrechner__alternativen tr.is-ok th { box-shadow: inset 5px 0 0 var(--green); }
.reifenrechner__alternativen tr.is-knapp th { box-shadow: inset 5px 0 0 var(--amber); }
.reifenrechner__alternativen tr.is-zuviel th { box-shadow: inset 5px 0 0 var(--red); }
.reifenrechner__titel { margin-top: var(--sp-11); }
.reifenrechner__tabelle { margin-bottom: var(--sp-7); }
.reifenrechner__tabelle tbody th a { border-bottom: 2px solid var(--yellow); }
.reifenrechner__tabelle tbody th a:hover { border-bottom-color: var(--black); }
/* Serientabellen (Goodyear) auf /lexikon/reifengroessen/: Sprungziel #serie-XX der 301-Weiterleitungen */
.reifenrechner__serie { margin-bottom: var(--sp-7); scroll-margin-top: var(--header-h); }

/* --- Sanfte Scroll-Animationen ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
}

/* ==========================================================================
   Angebote (/angebote/, build/angebote) - nutzt die Lexikon-Bausteine
   (.lex-head, .lex-body, .term-layout, .aside-box, .aside-tool, .prose);
   hier nur, was dort fehlt: Filial-Kasten, Hub-Raster mit Chips.
   ========================================================================== */

/* --- Randspalte: naechste Filiale ---------------------------------------- */
.aside-filiale__name { font-size: var(--fs-sub); font-weight: var(--fw-heavy); line-height: var(--lh-head); margin-bottom: 6px; }
.aside-filiale__address { font-style: normal; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); }
.aside-filiale__hours {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--hairline-w) solid var(--hairline);
  font-size: var(--fs-meta); line-height: var(--lh-snug);
}
.aside-filiale__hours dt { font-weight: var(--fw-heavy); }
.aside-filiale__hours dd { color: var(--ink-soft); }
.aside-filiale__phone { margin-top: var(--sp-3); font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.aside-filiale__phone a { display: inline-block; padding-top: 2px; border-bottom: 2px solid var(--yellow); }
.aside-filiale__phone a:hover { border-bottom-color: var(--black); }
.aside-filiale__btn { width: 100%; justify-content: center; margin-top: var(--sp-4); }
/* Preisrechner-Kasten steht auf dem dunklen .aside-tool; nur Abstand zum Kasten darueber */
.aside-box + .aside-rechner { margin-top: var(--sp-3); }
.aside-rechner + .aside-box { margin-top: var(--sp-3); }

/* --- Hub: Sprungleiste und Gruppen ---------------------------------------- */
.angebote-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-10); }
.angebote-nav a {
  padding: var(--sp-2) var(--sp-3) var(--sp-2); border: var(--hairline-w) solid var(--hairline); border-radius: var(--radius);
  font-size: var(--fs-meta); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps);
}
.angebote-nav a:hover { background: var(--yellow); border-color: var(--yellow); }
.angebote-gruppe { scroll-margin-top: var(--header-h); }
.angebote-gruppe + .angebote-gruppe { margin-top: var(--sp-14); padding-top: var(--sp-12); border-top: var(--hairline-w) solid var(--hairline); }
.angebote-gruppe__title { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-heavy); margin-bottom: var(--sp-6); text-wrap: pretty; }
.angebote-gruppe__sub {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin: var(--sp-8) 0 var(--sp-4); font-size: var(--fs-h4); font-weight: var(--fw-heavy);
}
.angebote-gruppe__sub a { border-bottom: 2px solid var(--yellow); }
.angebote-gruppe__sub a:hover { border-bottom-color: var(--black); }
.angebote-gruppe__sub small { font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--ink-soft); letter-spacing: var(--ls-caps); }

/* --- Hub: Kartenraster ---------------------------------------------------- */
.angebote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.angebot-karte {
  display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5); border: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.angebot-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--black); }
.angebot-karte__tag { font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); }
.angebot-karte__title { font-size: var(--fs-body-lg); line-height: var(--lh-snug); font-weight: var(--fw-heavy); text-wrap: pretty; overflow-wrap: anywhere; }
.angebot-karte__lead {
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.angebot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--sp-2); }
.angebot-chips i {
  font-style: normal; font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: .02em;
  padding: var(--sp-1) var(--sp-2) 3px; background: var(--light); border-radius: var(--radius);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Enge Desktops: Innenabstände und Typo etwas zurücknehmen */
@media (max-width: 1340px) {
  :root { --gut: 44px; }
  .site-nav { gap: var(--sp-6); }

  .cards--quad { grid-template-columns: repeat(3, 1fr); }
  .steps--five { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet: Navigation ins Mobile-Menü, Grids auf 2 Spalten */
@media (max-width: 1100px) {
  /* Angebote: Hub-Raster auf 2 Spalten */
  .angebote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header__meta { display: none; }
  .site-header__main { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header__right { display: none; }
  .nav-toggle { display: flex; }

  .mobile-menu.is-open {
    display: block;
    max-height: calc(100dvh - var(--frame) - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-top: var(--hairline-w) solid var(--hairline);
  }
  .mobile-menu a {
    display: block;
    padding: var(--sp-4) var(--sp-8);
    color: var(--black);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    border-bottom: var(--hairline-w) solid var(--hairline);
  }
  .mobile-menu a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--yellow);
  }
  .mobile-menu__rule {
    display: block;
    height: 0;
    border-bottom: var(--hairline-w) solid var(--ink-soft);
  }
  /* Zwei Handlungen am Ende des Menues: Preisrechner gelb, Anruf als Umriss */
  .mobile-menu__cta,
  .mobile-menu__phone {
    background: var(--yellow);
    color: var(--black) !important;
    border-bottom: 0 !important;
    margin: var(--sp-3) var(--sp-8) var(--sp-5);
    padding: var(--sp-4) var(--sp-5) var(--sp-4) !important;
    border-radius: var(--radius);
    font-weight: var(--fw-bold);
    text-align: center;
  }
  .mobile-menu__cta { margin-bottom: 0; }
  a.mobile-menu__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    background: transparent;
    box-shadow: inset 0 0 0 var(--control-w) var(--black);
    /* Bei 320px bricht sonst die Nummer: «041 920 26 / 26» */
    text-wrap: balance;
  }

  .intro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
  .cards,
  .branches__grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); }
  .site-footer__meta-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .hero { height: 560px; }

  .hero--sub { height: 470px; }
  .cards--quad { grid-template-columns: repeat(2, 1fr); }
  .steps--five { grid-template-columns: repeat(2, 1fr); }
  .prose-section__grid,
  .knowledge__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .randtitel__kopf--bild { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .randtitel__zeile { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .randtitel__zeile--cta > .prose { grid-column: auto; }
  .randtitel__titel { position: relative; top: auto; }
  .bild-split__grid,
  .bild-split--links .bild-split__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "medien" "text"; }
  .bild-split__medien { position: static; margin-top: var(--sp-8); }
  .bild-split__medien .prose-figure img { max-height: 480px; }
  .preis-karten { grid-template-columns: minmax(0, 1fr); }
  .brands__group > a,
  .brands__group > img { width: 120px; padding: 0 var(--sp-5); }

  .term-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .term-aside { position: static; }
  /* Randspalte liegt jetzt unter dem Text: Inhaltsverzeichnis inline zeigen */
  .term-toc--inline { display: block; }
  .term-aside .term-toc { display: none; }
  .lex-terms { column-count: 2; }
  .tool-grid { grid-template-columns: repeat(4, 1fr); }
  .rechner-ergebnis__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reifenrechner__eingaben { grid-template-columns: 1fr; }

  /* Rechner-Bereich */
  .tool-weiter { grid-template-columns: minmax(0, 1fr); }
  .tool-weiter__actions { grid-column: 1; grid-row: auto; }
  .lex-rechner { grid-template-columns: minmax(0, 1fr); }
  .lex-rechner__btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-2); }
}

/* Mobile */
@media (max-width: 720px) {
  /* Angebote: Hub-Raster einspaltig, Gruppentitel kleiner */
  .angebote-grid { grid-template-columns: 1fr; }
  :root { --gut: 22px; --frame: 12px; }

  .site-header__main { height: 64px; }
  .site-header__logo img { width: 62px; }
  .mobile-menu a { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .mobile-menu__cta,
  .mobile-menu__phone { margin-left: var(--sp-5); margin-right: var(--sp-5); }
  .mobile-menu.is-open { max-height: calc(100dvh - var(--frame) - 64px); }

  .hero { height: 460px; }
  .hero__film { display: none; }
  .hero__content { bottom: var(--sp-8); }
  .hero__ort { margin-bottom: var(--sp-2); }
  .hero__title { line-height: var(--lh-tight); }
  /* Statuskarte: keine Ecke mehr frei, also als kompakte Zeile unter dem
     Titel; Kopf und Filialen laufen umbrechend nebeneinander */
  .hero-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    position: static;
    width: auto;
    margin-top: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
  }
  /* gleiche Spezifitaet wie die Desktop-Regel (:not([hidden])), sonst
     gewinnt dort 100% - 330px und der Titel wird zur Buchstabensaeule */
  .hero__content:has(.hero-status:not([hidden])) .hero__title { max-width: none; }
  .hero-status__kopf { flex-basis: 100%; margin: 0; }
  .hero-status__kopf b { display: none; }
  .hero-status__liste { display: contents; }
  .hero-status__liste li { font-size: var(--fs-meta); }
  .hero-status__wert { margin-left: 0; }

  .ticker__group a { padding: var(--sp-3); }

  .intro { padding: var(--sp-14) 0 var(--sp-13); }
  .intro__ctas { margin-top: var(--sp-7); }
  .intro__ctas .btn { width: 100%; justify-content: space-between; }
  .usp li { padding: var(--sp-4) 0; }
  .usp--wert li { padding: var(--sp-5) 0; }

  .services,
  .branches,
  .steps-section,
  .faq { padding: var(--sp-14) 0; }
  .saison { padding: var(--sp-12) 0; }
  .services__head,
  .branches__head { margin-bottom: var(--sp-8); }
  .cards,
  .branches__grid,
  .steps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .card img { height: 200px; }
  .card__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .branch { padding: var(--sp-6) var(--sp-6) var(--sp-6); }

  .steps-section__sub { margin-bottom: var(--sp-8); }
  .steps { margin-bottom: var(--sp-8); }
  .step { padding: var(--sp-5); }

  .faq .h2 { margin-bottom: var(--sp-7); }
  .faq__question { gap: var(--sp-4); padding: var(--sp-5) 0; }
  .faq__answer-inner { margin-left: 0; }
  .faq__item.is-open .faq__answer-inner { padding-bottom: var(--sp-5); }

  .cta-band { padding: var(--sp-12) 0; }
  .cta-image { padding: var(--sp-12) 0; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 auto; justify-content: center; }

  .site-footer { padding-top: var(--sp-13); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding-bottom: var(--sp-10); }
  .site-footer__meta-inner { grid-template-columns: 1fr; gap: var(--sp-8); padding-block: var(--sp-8) var(--sp-9); }
  .site-footer__bottom-inner { flex-direction: column; gap: var(--sp-3); }

  /* --- Unterseiten --- */
  .hero--sub { height: 400px; }
  .breadcrumb { margin-bottom: var(--sp-3); }

  .usp--links a { padding: var(--sp-4) 0; }

  .cards--quad { grid-template-columns: 1fr; }
  .cards.lex-tools { grid-template-columns: 1fr; }

  .steps--five { grid-template-columns: 1fr; }

  .brands { padding: var(--sp-12) 0; }
  .brands__title { margin-bottom: var(--sp-7); }
  .brands__group > a,
  .brands__group > img { width: 96px; padding: 0 var(--sp-4); }
  .brands__group img { height: 34px; }

  .prose-section,
  .knowledge { padding: var(--sp-14) 0; }

  .cta-image__scrim { background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.68) 100%); }

  .faq-nav { gap: var(--sp-2); margin-bottom: var(--sp-8); }
  .faq-nav a { padding: var(--sp-2) var(--sp-3) var(--sp-2); }
  .faq-group + .faq-group { margin-top: var(--sp-11); }

  .linklist a { padding: var(--sp-4) 0; gap: var(--sp-3); }

  .lex-toolbar { flex-direction: column; gap: var(--sp-2); }
  .lex-switch button { flex: 1; padding: var(--sp-3) 0; }
  .lex-terms { column-count: 1; }
  .lex-az a, .lex-az span { min-width: 27px; }
  .breadcrumb--dark { margin-bottom: var(--sp-4); }
  .lex-head { padding: var(--sp-6) 0 var(--sp-7); }
  .lex-head__lead--def { padding-left: var(--sp-3); }
  .lex-body { padding: var(--sp-10) 0 var(--sp-14); }
  .prose h2 { margin-top: var(--sp-9); }
  .term-extra { margin-top: var(--sp-10); }
  .lex-cards__title { margin-bottom: var(--sp-4); }
  .term-prevnext { flex-direction: column; }
  .term-prevnext .is-next { text-align: left; }
  .lex-head__meta { gap: var(--sp-1) var(--sp-4); }
  .term-kurz { padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-7); }
  .term-toc--inline { padding: var(--sp-4); margin-bottom: var(--sp-7); }
  .prose .term-leistung { padding: var(--sp-4) var(--sp-5); }
  .term-faq { margin-top: var(--sp-11); }
  .term-faq .faq__question { gap: var(--sp-3); padding: var(--sp-4) 0; }
  .term-faq .faq__answer-inner { margin-left: 0; }
  .term-top { margin-top: var(--sp-7); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-table th, .tool-table td { padding: var(--sp-2) var(--sp-2); }
  .tool-scroll--fix tbody th, .tool-scroll--fix thead th:first-child { box-shadow: inset -1px 0 0 var(--hairline); }
  /* Schmale Tabellen (2-3 Spalten) passen auf die Handybreite; breite
     scrollen weiterhin im .table-scroll, weil ihre Zellen nicht schmaler
     als das laengste Wort werden. Tabellen mit vielen Spalten und
     Leerzeichen in den Zellen (Groessen, Urteile) wuerden sich trotzdem
     zusammenquetschen: sie nennen ihre Mindestbreite per --tabelle-min. */
  .prose .tool-table { min-width: var(--tabelle-min, 0); }
  .rechner__felder { grid-template-columns: 1fr; }
  .rechner-ergebnis { padding: var(--sp-5) var(--sp-4) var(--sp-5); }
  .rechner-ergebnis__details { grid-template-columns: 1fr; gap: 2px 0; }
  .rechner-ergebnis__details dd { margin-bottom: var(--sp-2); }
  .reifenrechner__vergleich { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
}

/* ==========================================================================
   Preisrechner (Seite /preisrechner/)
   Formularbausteine: es gab bisher keine Radio-/Checkbox-/Select-Styles.
   Alles nur aus den Tokens oben, Optik angelehnt an .lex-switch/.lex-search.
   ========================================================================== */

/* --- Lesespalte + Ergebnis-Randspalte ---------------------------------- */
.pr-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-12); align-items: start;
}
.pr-form { min-width: 0; }
.pr-aside { position: sticky; top: var(--header-h); }

/* --- Zuruecksetzen ------------------------------------------------------ */
.pr-reset {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-6); padding: var(--sp-2) 0 0; background: none; border: 0; cursor: pointer;
  /* Klickflaeche nach oben erweitern, Position unveraendert (siehe Textlinks oben) */
  margin-top: calc(-1 * var(--sp-2));
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--black);
}
.pr-reset span { border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.pr-reset:hover span { border-bottom-color: var(--black); }

/* --- Block = ein Leistungsbereich --------------------------------------- */
.pr-block { min-width: 0; border: var(--hairline-w) solid var(--hairline); padding: var(--sp-6) var(--sp-7) var(--sp-7); }
.pr-block + .pr-block { margin-top: var(--sp-4); }
/* Letztes Element im Block traegt keinen Aussenabstand nach unten */
.pr-block > :last-child { margin-bottom: 0; }
.pr-block__title {
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
  font-size: var(--fs-h3); font-weight: var(--fw-heavy);
  border-bottom: 3px solid var(--yellow);
}
.pr-block__title sup { font-size: .6em; vertical-align: super; }
.pr-block__note { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.pr-block__note a { font-weight: var(--fw-bold); color: var(--black); border-bottom: 2px solid var(--yellow); }
.pr-block__note strong { color: var(--black); font-weight: var(--fw-heavy); }

/* Feldgruppe innerhalb eines Blocks */
.pr-field + .pr-field { margin-top: var(--sp-5); }
.pr-field__label { display: block; font-size: var(--fs-body); font-weight: var(--fw-heavy); margin-bottom: var(--sp-2); }
.pr-field__label sup { color: var(--black); }
.pr-field__hint { margin-top: var(--sp-2); font-size: var(--fs-meta); color: var(--ink-soft); }
.pr-field__hint a { font-weight: var(--fw-bold); color: var(--black); border-bottom: 2px solid var(--yellow); }

/* Bedingt eingeblendete Folgefelder haengen sichtbar am Auslöser */
.pr-sub { margin-top: var(--sp-5); padding-left: var(--sp-5); border-left: 3px solid var(--light); }

/* --- Auswahlkachel (Radio) ---------------------------------------------- */
.pr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pr-tiles--single { grid-template-columns: minmax(0, 1fr); }
.pr-tile {
  position: relative; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); cursor: pointer;
  background: var(--surface); border: var(--hairline-w) solid var(--hairline); border-left: 5px solid var(--yellow);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pr-tile:hover { box-shadow: var(--shadow-hover); }
.pr-tile:has(input:checked) { border-color: var(--black); border-left-color: var(--yellow); }
/* Fokusring wie global, auf der Kachel statt auf dem versteckten Input;
   ohne :has() traegt ihn die Markierung (sonst doppelter Ring) */
.pr-tile:has(input:focus-visible),
.pr-opt:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 3px var(--black); }
@supports not selector(:has(*)) {
  .pr-tile input:focus-visible + .pr-tile__mark,
  .pr-opt input:focus-visible + .pr-opt__box { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 3px var(--black); }
}
.pr-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pr-tile__mark {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border: var(--control-w) solid var(--black); border-radius: 50%; background: var(--surface);
}
.pr-tile input:checked + .pr-tile__mark { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--surface); }
.pr-tile b { display: block; font-size: var(--fs-body-lg); font-weight: var(--fw-heavy); }
.pr-tile i {
  display: block; margin-top: 3px;
  font-style: normal; font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--ink-soft);
}

/* --- Ankreuzzeile (Checkbox) und schmale Radios ------------------------- */
.pr-list { display: flex; flex-direction: column; }
.pr-list--row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); }
.pr-opt {
  position: relative; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0; cursor: pointer; font-size: var(--fs-body); line-height: var(--lh-snug);
}
.pr-list > .pr-opt + .pr-opt { border-top: var(--hairline-w) solid var(--hairline); }
.pr-list--row > .pr-opt + .pr-opt { border-top: 0; }
.pr-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pr-opt__box {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: var(--control-w) solid var(--black); background: var(--surface);
}
.pr-opt__box--round { border-radius: 50%; }
.pr-opt input:checked + .pr-opt__box { background: var(--yellow); }
.pr-opt input:checked + .pr-opt__box--round { box-shadow: inset 0 0 0 3px var(--surface); }
/* Haken erst im angekreuzten Zustand zeichnen */
.pr-opt__box::after {
  content: ""; display: block; width: 10px; height: 6px; margin: 4px 0 0 4px;
  border-left: var(--control-w) solid var(--black); border-bottom: var(--control-w) solid var(--black);
  transform: rotate(-45deg); opacity: 0;
}
.pr-opt__box--round::after { display: none; }
.pr-opt input:checked + .pr-opt__box::after { opacity: 1; }
.pr-opt:has(input:checked) { font-weight: var(--fw-bold); }

/* --- Auswahlliste (Select): Grundregel bei .rechner__feld select ------- */
.pr-select { max-width: 340px; }

/* --- Ergebnisbox -------------------------------------------------------- */
.pr-total { background: var(--yellow); padding: var(--sp-6); }
.pr-total__amount { font-size: var(--fs-figure); line-height: var(--lh-tight); font-weight: var(--fw-heavy); letter-spacing: -.01em; }
.pr-total__label { margin-top: var(--sp-1); font-size: var(--fs-body); color: var(--ink-soft); }
.pr-total__list { margin: var(--sp-5) 0 0; border-top: var(--hairline-w) solid var(--hairline-yellow); }
/* Solange nichts gewaehlt ist, bleibt keine Trennlinie im Leeren stehen */
.pr-total__list:empty { display: none; }
.pr-total__group {
  padding-top: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-caption); font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-yellow-soft);
}
.pr-total__item {
  display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; font-size: var(--fs-body); line-height: var(--lh-snug);
}
.pr-total__item b { font-weight: var(--fw-heavy); white-space: nowrap; }
.pr-total__hint {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--hairline-w) solid var(--hairline-yellow);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold);
}
.pr-total__error { margin-top: var(--sp-3); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.pr-total .btn { width: 100%; justify-content: space-between; margin-top: var(--sp-4); }

/* Button auf gelbem Grund */
.btn--dark { background: var(--black); color: var(--on-dark); }
.btn--dark:hover { box-shadow: var(--shadow-hover); }

/* --- Sprungmarke Ergebnis (nur mobil sichtbar, siehe Media Query) ------- */
.pr-jump { display: none; }

@media (max-width: 1100px) {
  .pr-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  /* Ergebnis wandert unter das Formular: sticky waere dort nur im Weg */
  .pr-aside { position: static; order: 2; }
  .pr-jump {
    display: block; position: sticky; bottom: 0; z-index: 5;
    margin: 0 calc(var(--gut) * -1);
    background: var(--yellow); border-top: var(--hairline-w) solid var(--hairline-yellow);
  }
  /* Innenabstand auf dem Link: die ganze Leiste ist klickbar */
  .pr-jump a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) var(--gut); font-weight: var(--fw-heavy); }
}

@media (max-width: 720px) {
  .pr-block { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .pr-tiles { grid-template-columns: minmax(0, 1fr); }
  .pr-select { max-width: none; }
  .pr-total { padding: var(--sp-5) var(--sp-5) var(--sp-5); }
  .pr-sub { padding-left: var(--sp-3); }
}

/* --- Zwei Schritte und Mitnehmen (js/preisrechner.js) ------------------ */
/* Schritt 1 Rechner, Schritt 2 Anfrage: das Skript setzt hidden am Abschnitt */
.lex-body[hidden], .formular[hidden] { display: none; }
/* Formularwerte in der Randspalte sind Freitext und duerfen umbrechen */
#formularSumme .pr-total__item b { white-space: normal; }
.pr-total__mail {
  display: inline-block; background: none; border-width: 0 0 2px; cursor: pointer; font-size: var(--fs-body); margin-top: var(--sp-4); padding-bottom: 2px;
  font-weight: var(--fw-bold); color: var(--black); border-bottom: 2px solid var(--black);
}
.pr-total__mail:hover { border-bottom-color: transparent; }
.pr-total__mail[hidden] { display: none; }
.pr-total__mail[aria-disabled="true"] { opacity: .55; cursor: default; }
.pr-mail { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--hairline-w) solid var(--hairline-yellow); }
.pr-mail[hidden] { display: none; }
.pr-mail .btn { justify-self: start; }
.pr-mail__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pr-mail__status:empty { display: none; }
.pr-mail__status { font-weight: var(--fw-bold); }
.pr-mail__hinweis { font-size: var(--fs-meta); color: var(--on-yellow-soft); }
.pr-mail__hinweis a { color: var(--black); font-weight: var(--fw-bold); border-bottom: 2px solid var(--black); }

/* --- Standorte (Seite /standorte/) ------------------------------------- */
.locations { background: var(--surface); padding: var(--sec-y) 0; }
.locations__head { margin-bottom: var(--sp-3); }
.locations__sub {
  max-width: 720px;
  margin-bottom: var(--sp-13);
  font-size: var(--fs-sub); line-height: var(--lh-body); color: var(--ink-soft);
}
.locations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.loc {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.loc:hover { border-color: var(--black); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.loc__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--light);
}
.loc__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.loc:hover .loc__media img { transform: scale(1.04); }
.loc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-7) var(--sp-7) var(--sp-7);
}
.loc__region {
  display: inline-block; align-self: flex-start;
  margin-bottom: var(--sp-3); padding: var(--sp-1) var(--sp-2) 3px;
  background: var(--yellow); border-radius: var(--radius);
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--black);
}
.loc__name {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: var(--fw-heavy);
}
.loc__name a:hover { color: var(--ink-soft); }
.loc__address {
  margin-bottom: var(--sp-4);
  font-style: normal; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft);
}
.loc__hours {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.loc__hours dt { font-weight: var(--fw-bold); }
.loc__hours dd { color: var(--ink-soft); }
.loc__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-body);
}
.loc__contact a { font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow); }
.loc__contact a:hover { border-bottom-color: var(--black); }
.loc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: auto;
}

/* Zwei statt drei Kacheln (Detailseiten: "Die anderen Filialen") */
.locations__grid--zwei { grid-template-columns: repeat(2, 1fr); }

/* --- Standorte: Anzeigetafel (Uebersicht /standorte/, seit 22.09.2026) ------
   Kein Bild-Hero, kein Laufband: kurzer Kopf, dann die drei Filialen als Zeilen
   (Bild / Filiale / Status). Drei Textgroessen: H1, Filialname, Fliesstext. */
.tafel-kopf { background: var(--surface); padding: var(--sp-12) 0 var(--sp-10); }
.tafel-kopf .breadcrumb { margin-bottom: var(--sp-6); }
.tafel-kopf .breadcrumb a { color: var(--ink-soft); }
.tafel-kopf .breadcrumb span[aria-current] { color: var(--black); font-weight: var(--fw-bold); }
.tafel-kopf__title { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-heavy); margin-bottom: var(--sp-4); }
.tafel-kopf__lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); max-width: 60ch; }

.tafel { background: var(--surface); padding-bottom: var(--sec-y); }
.tafel__liste { border-top: var(--hairline-w) solid var(--black); }
.filiale {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--sp-8);
  padding: var(--sp-9) 0; border-bottom: var(--hairline-w) solid var(--hairline);
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.filiale__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--light); }
.filiale__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.filiale__kanton { color: var(--ink-soft); margin-bottom: var(--sp-1); }
.filiale__name { font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: var(--fw-heavy); margin-bottom: var(--sp-3); }
.filiale__name a:hover { color: var(--ink-soft); }
.filiale__adresse { font-style: normal; margin-bottom: var(--sp-4); }
.filiale__zeiten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-4); }
.filiale__zeiten dt { font-weight: var(--fw-bold); }
.filiale__zeiten dd { color: var(--ink-soft); }
.filiale__umkreis { color: var(--ink-soft); max-width: 52ch; }

.filiale__status { display: flex; flex-direction: column; }
.filiale__status .wait { margin: 0 0 var(--sp-2); }
.filiale__status .wait + .wait { margin-bottom: var(--sp-5); }
.filiale__kontakt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); margin-bottom: var(--sp-6); }
.filiale__kontakt a { font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow); }
.filiale__kontakt a:hover { border-bottom-color: var(--black); }
.filiale__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: auto; }

/* Ablauf: vier Schritte in einer Zeile, Zahl und Text gleich gross */
.ablauf { background: var(--slate); padding: var(--sec-y-band) 0; }
.ablauf__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); align-items: start; }
.ablauf .h2 { margin-bottom: var(--sp-2); }
.ablauf__sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--on-dark-soft); }
.ablauf__liste { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.ablauf__liste li { counter-increment: schritt; border-top: var(--hairline-w) solid var(--hairline-dark); padding-top: var(--sp-4); color: var(--on-dark); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold); }
.ablauf__liste li { padding-left: 1.5em; text-indent: -1.5em; }
.ablauf__liste li::before { content: counter(schritt); display: inline-block; width: 1.5em; text-indent: 0; color: var(--yellow); }

@media (max-width: 1023px) {
  .filiale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filiale__media { grid-column: 1 / -1; }
  .ablauf__inner { grid-template-columns: 1fr; }
  .ablauf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .filiale { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-8) 0; }
  .tafel-kopf { padding-top: var(--sp-8); }
  .ablauf__liste { grid-template-columns: 1fr; }
}

/* Bild im Fliesstext der Detailseiten: einheitliches Format.
   --hoch fuer Motive, die nur klein vorliegen - lieber schmal als unscharf. */
.std-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.std-figure--hoch img { width: auto; max-width: min(100%, 420px); aspect-ratio: auto; }

@media (max-width: 1340px) {
  .loc__body { padding: var(--sp-6) var(--sp-6) var(--sp-6); }
}

@media (max-width: 1100px) {
  .locations__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .locations { padding: var(--sp-14) 0; }
  .locations__sub { margin-bottom: var(--sp-9); }
  .locations__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* ======================================================================
   Felgen (Seite /felgen/)
   ====================================================================== */

/* Die Felgenmarken liegen nur als Raster-Logos vor. Der Weiss-Filter des
   Reifen-Laufbands würde sie zu leeren Flächen machen – darum hier weisse
   Plättchen statt Silhouetten. */
.brands--marken .brands__group > a,
.brands--marken .brands__group > span { width: 168px; padding: 0 var(--sp-4); }
.brands--marken .brands__group img {
  filter: none;
  opacity: 1;
  height: 56px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border-radius: var(--radius);
  box-sizing: border-box;
  transition: transform var(--dur-base) var(--ease);
}
.brands--marken .brands__group a:hover img { transform: translateY(-2px); }
.brands--marken .brands__track { animation-duration: 96s; }

/* Bilderreihe im Hochformat */
.photo-row-section { background: var(--surface); padding: 0 0 var(--sp-16); }
/* Variante mit eigener Ueberschrift: sie folgt keinem Textblock, sondern
   einem eigenstaendigen Band und braucht darum Luft nach oben. */
.photo-row-section--kopf { padding-top: var(--sp-16); }
.photo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.photo-row__item { margin: 0; }
.photo-row__item img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 1100px) {
  .photo-row { grid-template-columns: repeat(2, 1fr); }
  .brands--marken .brands__group > a,
  .brands--marken .brands__group > span { width: 132px; padding: 0 var(--sp-3); }
  .brands--marken .brands__group img { height: 46px; padding: var(--sp-2) var(--sp-3); }
}
@media (max-width: 720px) {
  .photo-row-section { padding: 0 0 var(--sp-14); }
  .photo-row-section--kopf { padding-top: var(--sp-14); }
  .photo-row { gap: var(--sp-3); }
  .brands--marken .brands__group > a,
  .brands--marken .brands__group > span { width: 104px; padding: 0 var(--sp-3); }
  .brands--marken .brands__group img { height: 38px; padding: var(--sp-2) var(--sp-2); }
}

/* ======================================================================
   Felgenreparatur (Seite /felgenreparatur/)
   ====================================================================== */

/* Dunkles Videoband – gleiche Anmutung wie .steps-section, aber mit 16:9-Bühne */
.video-band { background: var(--slate); padding: var(--sec-y) 0; }
.video-band .h2 { margin-bottom: var(--sp-2); }
.video-band__sub {
  font-size: var(--fs-sub);
  color: var(--on-dark-soft);
  margin-bottom: var(--sp-12);
}
.video-band__frame {
  position: relative;
  max-width: 980px;
  aspect-ratio: 16 / 9;
  background: var(--black);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-band__frame iframe,
.video-band__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px) {
  .video-band { padding: var(--sp-14) 0; }
  .video-band__sub { margin-bottom: var(--sp-7); }
}

/* ======================================================================
   Jobs & Lehrstellen (Seiten /jobs/ und /lehrstellen/)
   ====================================================================== */

/* Stellenliste: die Live-Seite zeigt sieben Bildkarten, die sich drei Fotos
   teilen. Als Liste bleibt jede Stelle einzeln lesbar - Titel, Pensum,
   Standort - ohne dass dasselbe Foto dreimal auftaucht. */
/* Ueberschrift, der direkt ein Untertitel folgt (Paarung wie
   .locations__head + .locations__sub in standorte/). Gleiche Lesebreite wie
   .services__head - die Klasse steht im Markup ohne die Basisklasse. */
.services__head--tight { max-width: 820px; margin-bottom: var(--sp-3); }

.joblist { border-top: var(--hairline-w) solid var(--hairline); }
.joblist__item { border-bottom: var(--hairline-w) solid var(--hairline); }
.joblist__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-1);
}
.joblist__title {
  display: block;
  font-size: var(--fs-h4);
  line-height: var(--lh-head);
  font-weight: var(--fw-heavy);
  text-wrap: pretty;
}
.joblist__meta {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  color: var(--ink-soft);
}
.joblist__meta span + span::before {
  content: "·";
  margin: 0 var(--sp-2);
  color: var(--muted);
}
.joblist__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.joblist__link:hover .joblist__cta svg { transform: translateX(4px); }
.joblist__cta svg { transition: transform var(--dur-base) var(--ease); }
.section-hinweis { margin-top: var(--sp-8); font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--ink-soft); }

@media (max-width: 720px) {
  .joblist__link { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-6) 0; }
}

/* ======================================================================
   Bewegung reduzieren - Auffangregel
   ====================================================================== */
/* Die vier aelteren prefers-reduced-motion-Bloecke decken Scroll, FAQ,
   Laufbaender und .reveal ab. 15 weitere Transitions liefen trotzdem, elf
   davon mit transform (u.a. der 500ms-Bildzoom der Filialkacheln). Statt sie
   einzeln nachzuziehen, faengt diese Regel den Rest - Zustandswechsel bleiben
   sichtbar, sie passieren nur ohne Weg. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======================================================================
   Cookie-Banner (js/consent.js) - erscheint unten, blockiert nichts
   ====================================================================== */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;                     /* ueber dem Sticky-Header (50) */
  background: var(--surface);
  border-top: var(--hairline-w) solid var(--black);
  box-shadow: 0 -8px 30px rgba(0,0,0,.12);
  padding-block: var(--sp-5);
}
.consent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}
.consent__text { margin: 0; font-size: var(--fs-body); max-width: 72ch; }
.consent__text a { text-decoration: underline; }
.consent__aktionen { display: flex; gap: var(--sp-3); flex-shrink: 0; }
.consent .btn { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-body); }
@media (max-width: 720px) {
  .consent__inner { flex-direction: column; align-items: stretch; }
  .consent__aktionen { flex-direction: column-reverse; }
  .consent .btn { justify-content: center; }
}

/* ======================================================================
   Video-Klickhuelle - YouTube-iframe erst nach Klick (js/main.js)
   ====================================================================== */
.video-huelle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--black);
  cursor: pointer;
  display: block;
}
.video-huelle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .85;
  transition: opacity .25s;
}
.video-huelle:hover img, .video-huelle:focus-visible img { opacity: 1; }
.video-huelle__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  background: var(--yellow);
  color: var(--black);
  border-radius: var(--radius);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
}
.video-huelle__play::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent currentColor;
}
.video-huelle__hinweis {
  max-width: 980px;
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--on-dark-soft);
}
.video-huelle__hinweis a { color: inherit; text-decoration: underline; }

/* Newsletter: Datenschutzhinweis unter dem Feld (Block ist bis zur Anbindung
   eines Versandsystems mit Double-Opt-in per hidden ausgeblendet) */
.newsletter__hinweis { margin-top: var(--sp-3); font-size: var(--fs-meta); }
.newsletter__hinweis a { text-decoration: underline; }

/* Platzhalter fuer juristische Pruefung (Impressum) - muss vor dem Go-live
   verschwinden: grep -rl 'PRÜFEN' --include=index.html . */
.pruefen { background: var(--yellow); color: var(--black); padding: 0 .25em; font-weight: var(--fw-bold); }

/* --- FAQ-Uebersicht /faq/ (build/faq/render.py, js/faq.js) --------------
   Suchfeld und Chips wie im Lexikon-Register; die Gruppen nutzen .faq-group
   der Hubs, das Akkordeon .faq__*. Auf den Handseiten haengt unter dem
   Akkordeon der Link auf die Uebersicht (.faq__mehr). */
.faq__mehr { margin-top: var(--sp-8); }
.faq-hub__toolbar { max-width: 720px; }
.faq-hub__chips { margin-bottom: var(--sp-4); }
.faq-hub__status { min-height: 1.5em; color: var(--ink-soft); margin-bottom: var(--sp-8); }
.faq-hub__gruppen .faq-group { scroll-margin-top: var(--header-h); }
.faq-hub__gruppen .faq-group + .faq-group { margin-top: var(--sp-13); }
.faq-group__zahl { font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--ink-soft); margin-left: var(--sp-2); vertical-align: middle; }
.faq__quelle { font-size: var(--fs-meta); color: var(--ink-soft); }
.faq__quelle a { font-weight: var(--fw-bold); color: var(--black); border-bottom: 2px solid var(--yellow); }
.faq__quelle a:hover { border-bottom-color: var(--black); }
.faq-hub__leer { padding: var(--sp-6) 0; font-size: var(--fs-sub); }
.faq-hub__leer a { font-weight: var(--fw-bold); color: var(--black); border-bottom: 2px solid var(--yellow); }

/* --- Site-Suche (js/suche.js, build/baue_suche.py) ----------------------
   Lupe in der Servicenavigation neben FAQ (Desktop) bzw. neben dem Menue
   (bis 1100px). Das Overlay ist ein <dialog>: Fokusfalle, Esc und Top-Layer
   liefert der Browser. Die Seite /suche/ nutzt dieselben Ergebnis-Bausteine. */
.site-header__meta .site-header__suche { padding-inline: var(--sp-1); }
.site-header__suche svg,
.nav-suche svg { display: block; }
.nav-suche { display: none; }

html.suche-offen { overflow: hidden; }
/* nur fuer Bildschirmleser (Trefferzahl der Suche) */
.visuell-versteckt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.suche {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 12vh var(--sp-5) var(--sp-5);
  border: 0;
  background: transparent;
}
.suche::backdrop { background: rgba(0,0,0,.6); }
.suche__panel {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  max-height: 76vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.suche .suche__feld {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4);
  padding: 0 var(--sp-2) 0 var(--sp-4);
  border: var(--control-w) solid var(--black);
}
.suche .suche__feld:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 3px var(--black); }
.suche__lupe { display: flex; flex: none; color: var(--black); }
.suche__eingabe {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4) 0;
  border: 0;
  background: none;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
}
.suche__eingabe:focus-visible { outline: none; box-shadow: none; }
.suche__eingabe::-webkit-search-cancel-button { display: none; }
.suche__zu {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  cursor: pointer;
}
.suche__zu:hover { color: var(--black); }
.suche .suche__ergebnis {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--sp-4) var(--sp-5);
}

/* Ergebnis-Bausteine (Overlay und /suche/) */
.suche-status { margin: 0 0 var(--sp-4); color: var(--ink-soft); font-size: var(--fs-meta); }
.suche-karte {
  margin-bottom: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--light);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius);
}
.suche-karte p { margin: 0; }
.suche-karte__titel { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.suche-karte__text { margin-top: var(--sp-1) !important; color: var(--ink-soft); font-size: var(--fs-meta); }
.suche-karte__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3) !important; }
.suche-karte__links a,
.suche-karte__filialen a,
.suche-leer a {
  font-weight: var(--fw-bold);
  color: var(--black);
  border-bottom: 2px solid var(--yellow);
}
.suche-karte__links a:hover,
.suche-karte__filialen a:hover,
.suche-leer a:hover { border-bottom-color: var(--black); }
.suche-karte__zeiten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--sp-4);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
}
.suche-karte__zeiten dt { font-weight: var(--fw-bold); }
.suche-karte__zeiten dd { margin: 0; }
.suche-karte__filialen { margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); }
.suche-karte__filialen li { display: grid; gap: 0 var(--sp-4); grid-template-columns: 9em minmax(0, 1fr); padding: var(--sp-1) 0; }

.suche-gruppe + .suche-gruppe { margin-top: var(--sp-5); }
.suche-gruppe__titel {
  margin: 0 0 var(--sp-1);
  padding-bottom: var(--sp-2);
  border-bottom: var(--hairline-w) solid var(--hairline);
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.suche-gruppe__zahl { margin-left: var(--sp-1); color: var(--ink-soft); }
.suche-gruppe__liste { margin: 0; padding: 0; list-style: none; }
.suche-treffer {
  display: grid;
  gap: 2px;
  padding: var(--sp-3);
  color: var(--black);
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease);
}
.suche-treffer:hover { background: var(--light); }
/* Liste im scrollenden Kasten: Fokusring nach innen (vgl. Trefferliste Lexikon) */
.suche-treffer:focus-visible { background: var(--light); outline: 3px solid var(--black); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--yellow); }
.suche-treffer__titel { font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.suche-treffer__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  line-height: var(--lh-snug);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.suche-treffer__pfad { color: var(--ink-soft); font-size: var(--fs-caption); }
.suche-treffer mark { background: rgba(255,219,2,.55); color: inherit; }
.suche-gruppe__mehr {
  margin: var(--sp-1) 0 0 var(--sp-3);
  padding: var(--sp-2) 0;
  border: 0;
  background: none;
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--yellow);
  cursor: pointer;
}
.suche-gruppe__mehr:hover { border-bottom-color: var(--black); }

.suche-start__titel {
  margin: var(--sp-2) 0 var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.suche-start__liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.suche-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-4);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--black);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.suche-chip:hover { background: var(--yellow); border-color: var(--yellow); }
.suche-leer { padding: var(--sp-2) 0; }
.suche-leer p { margin: 0 0 var(--sp-3); }

/* Seite /suche/ */
.suche-seite .suche__feld { max-width: 720px; margin-bottom: var(--sp-8); }
.suche-seite .suche__ergebnis { max-width: 820px; }
.suche__hinweis { color: var(--ink-soft); }

@media (max-width: 1100px) {
  .site-header__main:has(.nav-suche) { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); }
  .nav-suche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--on-dark);
  }
}
@media (max-width: 720px) {
  .suche { padding: 0; }
  .suche__panel { max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .suche .suche__feld { margin: var(--sp-3); }
  .suche-karte__filialen li { grid-template-columns: minmax(0, 1fr); }
}

/* --- 404: «Hier ist die Luft raus» (404.html) -------------------------------
   Gelbe Buehne, die Null ist ein Reifen: rollt einmal herein und sackt dann
   platt ab. Ohne Bewegung (reduced motion) steht er gleich platt da. */
.platt { background: var(--yellow); padding-block: var(--sec-y-band) var(--sec-y); overflow: hidden; }
.platt__inner { text-align: center; }
.platt__zahl {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .04em;
  font-size: calc(var(--fs-display) * 3);
  font-weight: var(--fw-heavy);
  line-height: .8;
  color: var(--black);
  margin-bottom: var(--sp-8);
}
.platt__zahl span { position: relative; z-index: 1; }  /* Reifen rollt hinter der ersten 4 durch */
.platt__reifen {
  width: .78em;
  height: .78em;
  transform-origin: 50% 100%;
  animation: pfPlattRein 1.1s var(--ease) both, pfPlattAb .5s var(--ease) 1.2s both;
}
.platt__rad { transform-origin: 100px 100px; animation: pfPlattDreh 1.1s var(--ease) both; }
@keyframes pfPlattRein { from { transform: translateX(-60vw); } to { transform: translateX(0); } }
@keyframes pfPlattDreh { from { transform: rotate(-540deg); } to { transform: rotate(0); } }
@keyframes pfPlattAb { to { transform: scale(1.14, .76); } }
.platt__label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--on-yellow-soft);
}
.platt__titel { margin: 0 0 var(--sp-5); font-size: var(--fs-hero); font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
.platt__text { max-width: 560px; margin: 0 auto var(--sp-8); font-size: var(--fs-sub); line-height: var(--lh-snug); text-wrap: pretty; }
.platt__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
.platt-wege { padding-block: var(--sec-y-band); }
.platt-wege__inner { text-align: center; }
.platt-wege__titel { margin: 0 0 var(--sp-6); font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.platt-wege__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-8);
  padding: 0;
  list-style: none;
}
.platt-wege__liste a {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: 999px;
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.platt-wege__liste a:hover { background: var(--yellow); border-color: var(--yellow); }
.platt-wege__support { margin: 0; color: var(--ink-soft); }
.platt-wege__support a { color: var(--black); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .platt__reifen { animation: none; transform: scale(1.14, .76); }
  .platt__rad { animation: none; }
}