/* ============================================================
   BSK – Technik Überprüfung Fahrzeugsicherheit GmbH
   Entwurf Neugestaltung bsk-tuf.de
   Struktur nach Vorbild ingenieurbuero-murtezi.de,
   Farben: weiße Hintergründe, Orange + Blau im Vordergrund.
   ============================================================ */

:root {
  --weiss: #ffffff;
  --navy: #1b365d;
  --blau: #095bb1;
  --orange: #f27311;
  --orange-dkl: #c05a0b;
  --orange-hell: #ff9440; /* für Schrift auf dunklem Grund — heller, damit lesbar */
  --text: rgba(27, 54, 93, 0.78);
  --linie: rgba(27, 54, 93, 0.12);
  --schatten: 0 10px 30px rgba(27, 54, 93, 0.08);
  --radius: 10px;
  --container: 1140px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Reset / Basis ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blau); text-decoration: none; }
a:hover { color: var(--orange); }

h1, h2, h3 {
  font-weight: 400;
  color: var(--navy);
  line-height: 1.25;
}

h1 { font-size: 42px; }
h2 { font-size: 28px; }
h3 { font-size: 18px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Orange Akzentlinie über Sektionsüberschriften —
   übernimmt die Trennfunktion der grauen Bänder des Vorbilds */
.section-title { margin-bottom: 14px; }
.section-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--orange);
  border-radius: 2px;
  margin-bottom: 18px;
}
.section-lead { max-width: 720px; margin-bottom: 40px; }

section, .section { padding: 72px 0; }
.section-line { border-top: 1px solid var(--linie); }

/* ---------- Header ---------- */
.site-header {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
}

.brand { display: flex; align-items: center; gap: 18px; }
.brand img.logo-bsk { height: 62px; width: auto; }
.brand img.logo-partner { height: 26px; width: auto; }
.brand .partner-hinweis {
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--text);
  border-left: 1px solid var(--linie);
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.main-nav a:hover { color: var(--orange); }
.main-nav a.nav-cta {
  background: var(--orange);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  transition: background 0.15s;
}
.main-nav a.nav-cta:hover { background: var(--orange-dkl); color: #fff; }

/* Mobile Navigation */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: transform 0.2s;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 0; }
/* Höhe bewusst knapp gehalten: Das Hero muss zusammen mit den
   Leistungs-Kacheln auf einen Bildschirm passen. Bei 620 px lagen die
   Kacheln auf einem 800-px-Display 76 px unterhalb der Kante. */
.hero-media {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-media img.hero-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Überblendung der wechselnden Hero-Bilder (Liste HERO_BILDER in ui.js).
   Die Klasse `hero-wechsel` setzt erst JavaScript — ohne JavaScript bleibt
   das Bild dadurch sichtbar, statt auf Deckkraft 0 stehen zu bleiben. */
.hero-media.hero-wechsel img.hero-bild {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-media.hero-wechsel img.hero-bild.sichtbar { opacity: 1; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0.82) 0%, rgba(27, 54, 93, 0.55) 45%, rgba(27, 54, 93, 0.15) 100%);
}
.hero-inhalt {
  position: relative;
  z-index: 2;
  max-width: 640px;
  /* Der untere Innenabstand muss größer bleiben als die Überlappung der
     Kacheln (-52 px), sonst verdecken sie die Buttons. */
  padding: 76px 0;
}
.hero-inhalt .ueberzeile {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 22px;
}
.hero-inhalt h1 { color: #fff; margin-bottom: 18px; }
.hero-inhalt p { color: rgba(255, 255, 255, 0.92); font-size: 17px; max-width: 520px; margin-bottom: 32px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-dkl); color: #fff; }
.btn-hell { background: #fff; color: var(--navy); }
.btn-hell:hover { background: #fff; color: var(--orange); }
/* Kontur-Button: durchsichtiger Grund, orangefarbener Rahmen und Schrift.
   Beim Überfahren füllt sich der Button orange, Schrift wird weiß.

   Lesbarkeit: Der Button steht über einem Foto. Reines #F27311 erreicht
   auf dem Navy-Overlay nur 4,2:1 und dort, wo das Overlay dünn wird,
   noch weniger. Deshalb hier das hellere Orange (5,5:1), ein kräftigerer
   Schriftschnitt und eine leichte Abdunklung — der Hintergrund bleibt
   durchscheinend, bekommt unter der Schrift aber genug Ruhe. */
.btn-kontur {
  background: rgba(11, 22, 40, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--orange-hell);
  border: 2px solid var(--orange-hell);
  font-weight: 600;
}
.btn-kontur:hover {
  border-color: var(--orange);
  color: #fff;
  background: var(--orange);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn-kontur-blau { background: transparent; color: var(--blau); border: 2px solid var(--blau); }
.btn-kontur-blau:hover { background: var(--blau); color: #fff; }

/* ---------- Leistungs-Kacheln unter dem Hero ----------
   Die Reihe ragt von unten in das Hero-Bild hinein. Erst die
   Überlappung plus Schatten löst die Kacheln optisch vom Foto ab —
   ohne das wären sie weiße Flächen auf weißem Grund. */
.leistungs-kacheln {
  position: relative;
  z-index: 3;
  margin-top: -52px;
  padding-bottom: 64px;
}
.lk-raster {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.lk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 20px 12px 17px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(27, 54, 93, 0.10);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.lk:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 14px 36px rgba(27, 54, 93, 0.16);
}

.lk-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(242, 115, 17, 0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .18s, color .18s;
}
/* Beim Überfahren füllt sich der Kreis — das Signal, dass die Kachel klickbar ist */
.lk:hover .lk-icon { background: var(--orange); color: #fff; }

.lk-titel {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}
.lk-sub { font-size: 12px; color: var(--text); line-height: 1.35; }

/* ---------- Teaser (zwei große Kacheln) ---------- */
.teaser-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.teaser-karte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--weiss);
  transition: box-shadow 0.2s, transform 0.2s;
}
.teaser-karte:hover { box-shadow: var(--schatten); transform: translateY(-3px); }
.teaser-karte img { height: 300px; width: 100%; object-fit: cover; }
.teaser-karte .teaser-text { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.teaser-karte h2 { font-size: 24px; }
.teaser-karte p { flex: 1; }
.teaser-karte .mehr {
  color: var(--orange);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.teaser-karte:hover .mehr { text-decoration: underline; }

/* ---------- Kachelraster (weitere Leistungen) ---------- */
.kachel-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.kachel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--weiss);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.kachel:hover { box-shadow: var(--schatten); transform: translateY(-3px); }
.kachel img { height: 160px; width: 100%; object-fit: cover; }
.kachel .kachel-text { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kachel h3 { font-size: 16px; font-weight: 500; }
.kachel p { font-size: 13.5px; flex: 1; }
.kachel .mehr { color: var(--orange); font-size: 13.5px; font-weight: 500; }
.kachel:hover .mehr { text-decoration: underline; }

/* ---------- Über uns ---------- */
.ueber-uns-raster {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.ueber-uns-raster img { border-radius: var(--radius); }
.ueber-uns-text p + p { margin-top: 14px; }
.zitat {
  margin-top: 22px;
  padding-left: 18px;
  border-left: 4px solid var(--orange);
  color: var(--navy);
  font-size: 17px;
}

/* Partnerzeile */
.partner-zeile {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--linie);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.partner-zeile img { height: 34px; width: auto; opacity: 0.9; }
.partner-zeile img.gross { height: 56px; }
.partner-zeile .partner-text { font-size: 13.5px; max-width: 420px; }

/* ---------- Standorte ---------- */
.standorte-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.standort-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 30px;
}
.standort-karte h3 { font-size: 19px; margin-bottom: 4px; }
.standort-karte .standort-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 12px;
}
.standort-karte address { font-style: normal; margin-bottom: 18px; }

.zeiten { width: 100%; border-collapse: collapse; font-size: 14px; }
.zeiten th, .zeiten td { text-align: left; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--linie); }
.zeiten th { color: var(--navy); font-weight: 500; width: 90px; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }

/* ---------- Kontakt ---------- */
.kontakt-raster {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}
.kontakt-daten ul { list-style: none; }
.kontakt-daten li { padding: 13px 0; border-bottom: 1px solid var(--linie); display: flex; gap: 12px; align-items: baseline; }
.kontakt-daten li:last-child { border-bottom: 0; }
.kontakt-daten .k-label { color: var(--navy); font-weight: 500; min-width: 92px; }
.kontakt-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.kontakt-formular { display: grid; gap: 16px; }
.kontakt-formular label { font-size: 13.5px; color: var(--navy); font-weight: 500; display: block; margin-bottom: 6px; }
.kontakt-formular input,
.kontakt-formular textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--navy);
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--weiss);
}
.kontakt-formular input:focus,
.kontakt-formular textarea:focus {
  outline: 2px solid var(--blau);
  outline-offset: 0;
  border-color: transparent;
}
.kontakt-formular textarea { min-height: 130px; resize: vertical; }
.dsgvo { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.dsgvo input { width: auto; margin-top: 3px; }
.formular-hinweis { font-size: 12.5px; }
.feld-hilfe { display: block; font-size: 12px; margin-top: 5px; }

/* Auswahlfeld im gleichen Stil wie die Textfelder */
.kontakt-formular select {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--navy);
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--weiss);
}
.kontakt-formular select:focus { outline: 2px solid var(--blau); border-color: transparent; }

/* Mehrfachauswahl „Interesse an" auf der Partnerseite */
.kontakt-formular fieldset.interesse { border: 0; padding: 0; }
.kontakt-formular fieldset.interesse legend {
  font-size: 13.5px;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 8px;
  padding: 0;
}
.kontakt-formular fieldset.interesse label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 8px;
}
.kontakt-formular fieldset.interesse input { width: auto; margin-top: 3px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  padding: 40px 0;
  font-size: 13.5px;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer a { color: rgba(255, 255, 255, 0.9); }
.site-footer a:hover { color: var(--orange); }
.footer-links { display: flex; gap: 22px; }

/* ---------- Social-Symbole ---------- */
/* Zwei Fassungen desselben Bausteins: in der navyfarbenen Fußzeile hell auf
   dunkel, in der Kontakt-Sektion dunkel auf weiß. Beide füllen sich beim
   Überfahren orange — so ist ohne Beschriftung klar, dass es Links sind.
   Die Regeln müssen HINTER `.site-footer a:hover` stehen, sonst gewinnt
   dessen Orange über die weiße Schrift auf orangem Kreis. */
.social-links,
.social-kontakt {
  display: flex;
  align-items: center;
  gap: 9px;
}
.social-titel { font-size: 13px; margin-right: 3px; }
.social-links a,
.social-kontakt a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.social-links a { border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; }
.social-links a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.social-kontakt { margin-top: 24px; flex-wrap: wrap; }
.social-kontakt .social-titel { color: var(--navy); font-weight: 500; }
.social-kontakt a { border: 1px solid var(--linie); color: var(--navy); }
.social-kontakt a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* ---------- Unterseiten ---------- */
.seite-kopf { padding: 56px 0 8px; }
.brotkrume { font-size: 13px; margin-bottom: 18px; }
.brotkrume a { color: var(--blau); }
.brotkrume span { color: var(--text); }
.seite-kopf h1 { font-size: 36px; margin-bottom: 10px; }
.seite-kopf .gesetz {
  display: inline-block;
  color: var(--orange);
  font-size: 14px;
  letter-spacing: 0.6px;
  font-weight: 500;
  margin-bottom: 8px;
}
.seite-kopf .einleitung { font-size: 17px; max-width: 760px; }

.inhalt-raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
  padding: 48px 0 0;
}
.inhalt-raster img { border-radius: var(--radius); position: sticky; top: 112px; }
.inhalt-text h2 { font-size: 22px; margin: 28px 0 12px; }
.inhalt-text h2:first-child { margin-top: 0; }
.inhalt-text p + p { margin-top: 12px; }
.inhalt-text ul { margin: 12px 0 12px 2px; list-style: none; }
.inhalt-text ul li { padding: 6px 0 6px 26px; position: relative; }
.inhalt-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.info-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.info-tabelle th, .info-tabelle td { text-align: left; padding: 10px 12px; border: 1px solid var(--linie); vertical-align: top; }
.info-tabelle th { color: var(--navy); font-weight: 500; background: rgba(9, 91, 177, 0.04); }

.faq { margin-top: 8px; }
.faq h3 { font-size: 16px; font-weight: 500; margin: 20px 0 6px; }

.hinweis-box {
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 20px 0;
  font-size: 14px;
}

.seite-cta {
  margin-top: 56px;
  padding: 36px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.seite-cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.seite-cta p { font-size: 17px; color: var(--navy); max-width: 560px; }

/* „Weitere Leistungen" auf Unterseiten */
.weitere { padding: 56px 0 72px; }
.weitere h2 { font-size: 24px; }

/* ---------- Bestätigungsseite (danke.html) ---------- */
/* Stand früher in termin.css. Das war falsch: danke.html gibt es in beiden
   Versionen, termin.css nur in v2 — in v1 lud die Seite eine Datei, die es
   nicht gibt, und stand ohne Gestaltung da. */
.bestaetigung { text-align: center; padding: 24px 0 8px; }
.bestaetigung .haken {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 30px;
  line-height: 62px;
}
.bestaetigung h2 { font-size: 28px; margin-bottom: 12px; }
.bestaetigung p { max-width: 620px; margin: 0 auto; }

.schritt-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 44px 0 72px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
}
.schritt-nav.bestaetigung-nav { justify-content: center; flex-direction: column; }

/* ---------- Bewertungen ---------- */
/* Aufgebaut von bewertungen.js. Ohne geladene Daten bleiben nur
   Überschrift und Buttons stehen — das ist so gewollt, siehe dort. */
/* Die Notenkachel ist absichtlich groß: Sie ist der Beleg, nicht die
   Beschriftung. Das Google-Logo steht links und deutlich sichtbar, damit
   ohne Lesen klar ist, woher die Zahlen kommen. */
.bw-notenkachel {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: var(--schatten);
  margin: 24px 0 28px;
}
.bw-note-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.05);
}
.bw-note-logo .bw-g { width: 27px; height: 27px; }
.bw-note-mitte { display: flex; flex-direction: column; gap: 6px; }
.bw-note-zeile { display: flex; align-items: center; gap: 12px; }
.bw-note-zahl {
  font-size: 44px;
  line-height: 1;
  font-weight: 500;
  color: var(--navy);
}
.bw-note-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text);
}
.bw-g { width: 14px; height: 14px; flex: 0 0 auto; }

/* Sternereihe: graue Reihe im Fluss, orange Reihe darüber auf den Anteil
   der Note beschnitten. `width: max-content` ist entscheidend — sonst
   staucht die beschnittene Reihe ihre Sterne, statt sie abzuschneiden. */
/* `align-self: flex-start` ist hier Pflicht, nicht Geschmack: In der
   Notenkachel und in den Karten ist die Sternereihe ein Flex-Element in
   einer Spalte. Ohne die Zeile zieht sie sich auf die Breite des breitesten
   Nachbarn (z. B. „165 Bewertungen"), und der Prozentwert der orangenen
   Reihe rechnet dann gegen die falsche Bezugsbreite — bei 4,7 waren die
   orangenen Sterne breiter als die grauen. */
.bw-sterne {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  line-height: 0;
}
.bw-sterne-reihe { display: inline-flex; gap: 2px; width: max-content; }
.bw-sterne-reihe svg { width: var(--gr); height: var(--gr); display: block; flex: 0 0 auto; }
.bw-sterne-grau { color: rgba(27, 54, 93, 0.18); }
.bw-sterne-voll {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: var(--orange);
}

/* ---------- Bewertungs-Karussell ----------
   Die Karten liegen in einer waagerechten Spur mit fester Kartenbreite.
   Weil die Breite der Spur kein ganzes Vielfaches davon ist, ragt links
   und rechts immer ein Stück der Nachbarkarte ins Bild — genau das ist
   der Hinweis, dass es weitergeht. Ohne diesen Anschnitt hält man drei
   Karten für alles, was es gibt.

   `scroll-snap` sorgt dafür, dass nach dem Wischen wieder eine Karte
   sauber steht statt irgendwo dazwischen. */
.bw-buehne { position: relative; }
.bw-spur {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Platz für den Schatten der Karten, sonst wird er abgeschnitten */
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bw-spur::-webkit-scrollbar { display: none; }

.bw-navi { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.bw-pfeil {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--weiss);
  color: var(--navy);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bw-pfeil:hover { background: rgba(242, 115, 17, .08); border-color: var(--orange); }
.bw-pfeil svg { width: 19px; height: 19px; }
.bw-pfeil[hidden] { display: none; }
.bw-karte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 17px 18px 15px;
  background: var(--weiss);
  /* Feste Breite statt Rasterspalte — nur so entsteht der Anschnitt.
     Auf dem Handy 78 % der Bildschirmbreite: eine Karte in der Mitte,
     links und rechts je ein Streifen der nächsten. */
  /* 300 px sind bewusst gewählt: Bei 1092 px Spurbreite passen damit
     3,5 Karten ins Bild — die halbe Karte am Rand ist der Anschnitt.
     Mit 340 px waren es 3,11, und die übrigen 37 px sahen nach einem
     Layoutfehler aus statt nach „hier geht es weiter". */
  flex: 0 0 clamp(240px, 70vw, 300px);
  scroll-snap-align: center;
  /* Karten am Rand holen sich per Klick in die Mitte (bewertungen.js),
     deshalb der Zeigefinger und die leichte Anhebung beim Überfahren. */
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.bw-spur .bw-karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 54, 93, 0.1);
}
/* Lange Rezensionen werden nur optisch gekürzt — der volle Text bleibt im
   Markup und lässt sich per Knopf aufklappen. Nichts wird verändert.
   Vier Zeilen sind bewusst knapp: Die Kacheln sollen zum Überfliegen
   einladen, nicht zum Lesen zwingen. */
/* NICHT `flex: 1 1 auto` setzen: In einer Rasterzeile werden alle Kacheln
   gleich hoch, der Text würde mitwachsen und wäre dann höher als seine
   vier Zeilen. Folge: Leerraum unter dem Text — und der Aufklapp-Knopf
   bliebe aus, weil scrollHeight dann nicht mehr größer als clientHeight
   ist. Den Abstand macht stattdessen `margin-top: auto` an der Fußzeile. */
.bw-text {
  font-size: 14px;
  margin: 10px 0 0;
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Aufklappen: `display: block` hebt die -webkit-box-Kürzung wieder auf.
   Der Knopf wird von bewertungen.js nur eingeblendet, wenn der Text
   wirklich gekürzt wurde. */
.bw-karte.offen .bw-text { display: block; }
.bw-mehr {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 7px 0 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--blau);
  cursor: pointer;
}
.bw-mehr:hover { color: var(--orange); text-decoration: underline; }
.bw-stand { color: var(--text); }

.bw-fuss {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}
/* Mindestabstand zum Text, wenn die Kachel nicht gestreckt wird */
.bw-text + .bw-fuss,
.bw-mehr + .bw-fuss { margin-top: 14px; }
.bw-bild {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
}
.bw-bild-ersatz {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 115, 17, 0.12);
  color: var(--orange-dkl);
  font-size: 11.5px;
  font-weight: 500;
}
.bw-autor {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  color: var(--navy);
  min-width: 0;
}
.bw-wann { color: var(--text); font-size: 11.5px; }
.bw-quelle-link { margin-left: auto; display: flex; }
.bw-quelle-link .bw-g { width: 16px; height: 16px; }
.bw-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.bw-hinweis {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  margin-top: 18px;
}

@media (max-width: 760px) {
  /* Die Kachel über die volle Breite, aber etwas gedrungener — 44 px
     Zahl neben 22 px Sternen wären auf 375 px zu viel des Guten. */
  .bw-notenkachel {
    width: 100%;
    margin-top: 18px;
    gap: 15px;
    padding: 16px 18px;
  }
  .bw-note-logo { width: 44px; height: 44px; }
  .bw-note-logo .bw-g { width: 23px; height: 23px; }
  .bw-note-zahl { font-size: 36px; }
  .bw-note-sub { font-size: 13px; }

  /* Die Pfeile mittig statt rechts: Auf dem Handy wird gewischt, die
     Pfeile sind dort Beiwerk und stehen dann nicht so verloren. */
  .bw-navi { justify-content: center; margin-top: 8px; }

  /* Die Spur läuft über den Innenabstand des Containers hinaus bis an den
     Bildschirmrand. Nur so bleibt links UND rechts genug von der Nachbar-
     karte sichtbar — innerhalb des Containers wären es keine 20 px, und
     der Anschnitt ginge als Zufall durch. */
  .bw-buehne { margin-inline: -24px; }
  .bw-spur { padding-inline: 24px; scroll-padding-inline: 24px; }
}

/* ---------- FAQ-Seite ---------- */
/* Zwei Bereiche, weil BSK zwei getrennte Rollen ausfüllt: amtliche Prüfungen
   als Prüfingenieur und Gutachten als Sachverständiger. Wer wegen eines
   Unfalls kommt, hat andere Fragen als jemand mit fälliger HU.
   Die Fragen sind <details>-Elemente — aufklappbar ohne eine Zeile
   JavaScript, und der Antworttext steht trotzdem im Markup, wird also von
   Suchmaschinen gelesen. */
.faq-sprung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 34px 0 4px;
}
.faq-sprung a {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.faq-sprung a:hover {
  border-color: var(--orange);
  box-shadow: var(--schatten);
  transform: translateY(-2px);
}
.fs-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(242, 115, 17, 0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-sprung strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 3px;
}
.fs-sub { font-size: 13.5px; color: var(--text); }

.faq-block { padding-top: 52px; }
.faq-block .section-lead { margin-bottom: 24px; }
/* Zwischenüberschriften innerhalb eines Bereichs. Ohne sie werden die
   Listen zu lang, um sie mit den Augen zu überfliegen. */
.faq-gruppe {
  font-size: 14px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin: 38px 0 12px;
}
.faq-gruppe:first-of-type { margin-top: 8px; }
.faq-liste { border-top: 1px solid var(--linie); max-width: 860px; }
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-eintrag summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  position: relative;
  color: var(--navy);
  font-size: 16.5px;
  font-weight: 500;
  transition: color 0.18s;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary:hover { color: var(--orange); }
/* Pfeil aus zwei Rahmenkanten, damit keine zusätzliche Datei nötig ist */
.faq-eintrag summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform 0.18s;
}
.faq-eintrag[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-antwort { padding: 0 44px 20px 0; font-size: 15px; }
.faq-antwort p + p { margin-top: 11px; }
.faq-antwort ul { margin: 11px 0 0 2px; list-style: none; }
.faq-antwort ul li { padding: 5px 0 5px 24px; position: relative; }
.faq-antwort ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.faq-hinweis {
  margin-top: 22px;
  max-width: 860px;
  font-size: 13.5px;
}
/* Fachbegriffe wie „Wiederbeschaffungsaufwand" sind länger als eine
   Handy-Spalte breit ist. Ohne diese Regel schiebt ein einziges Wort die
   ganze Tabelle über den Rand hinaus. */
.faq-antwort .info-tabelle th,
.faq-antwort .info-tabelle td {
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .faq-sprung { grid-template-columns: 1fr; }
  .faq-eintrag summary { font-size: 15.5px; padding-right: 34px; }
  .faq-antwort { padding-right: 0; }
}

/* ---------- Rechtsseiten ---------- */
.rechtstext { max-width: 800px; padding-bottom: 72px; }
.rechtstext h2 { font-size: 20px; margin: 30px 0 10px; }
.rechtstext p + p { margin-top: 10px; }

/* ============================================================
   Auffällige Aktions-Elemente
   ============================================================ */

/* ---------- Icons in Buttons ---------- */
.btn svg, .nav-cta svg, .quick-cta svg { flex: 0 0 auto; }

/* Kalender-Icon in Orange — sticht auf hellen Flächen hervor.
   Auf orangefarbenen Buttons wird es weiß, sonst unsichtbar. */
.icon-kalender { color: var(--orange); }
.btn-orange .icon-kalender,
.nav-cta .icon-kalender,
.quick-tab .icon-kalender,
.quick-panel a .icon-kalender { color: #fff; }
/* Icon folgt der Schriftfarbe des Buttons: orange im Ruhezustand,
   weiß beim Überfahren — sonst bliebe es orange auf orangem Grund. */
.btn-kontur .icon-kalender { color: inherit; }

/* ---------- WhatsApp im echten WhatsApp-Grün ---------- */
.btn-whatsapp,
a.btn.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border: 0;
}
.btn-whatsapp:hover,
a.btn.btn-whatsapp:hover { background: #1da851; color: #fff; }
.btn-whatsapp .icon-whatsapp { color: #fff; }

/* ---------- Fixierter Termin-Balken am Bildschirmrand ---------- */
.quick-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  /* center, nicht stretch: Sonst zöge das Aufklapp-Panel sich auf die
     Höhe der gesamten Knopfleiste und stünde halb leer da. */
  align-items: center;
}

/* Die senkrechte Leiste: Termin-Reiter, darunter WhatsApp und Anrufen.
   Steht auf jeder Seite, damit die drei Kontaktwege immer erreichbar
   sind — egal wie weit jemand gescrollt hat. */
.quick-spalte {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.quick-knopf {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 10px 0 0 10px;
  box-shadow: -3px 0 14px rgba(27, 54, 93, 0.18);
  transition: filter 0.15s;
}
.quick-knopf svg { width: 21px; height: 21px; }
/* Muss die globale a:hover-Regel überstimmen, sonst wird das Symbol orange. */
.quick-knopf:hover { color: #fff; filter: brightness(1.08); }
.quick-wa { background: #25d366; }
.quick-tel { background: var(--blau); }

/* Der senkrechte Reiter */
.quick-tab {
  background: var(--orange);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .6px;
  padding: 22px 12px;
  border-radius: 10px 0 0 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: -3px 0 14px rgba(27, 54, 93, .18);
  transition: background .15s;
}
.quick-tab:hover { background: var(--orange-dkl); }
/* 180°, nicht 90°: Der Reiter selbst ist um 180° gedreht: Bei 90° stand
   der Kalender in der Summe quer. */
.quick-tab svg { transform: rotate(180deg); }

/* Die aufklappende Auswahl */
/* Das Panel liegt ABSOLUT neben der Leiste, nicht als Flex-Element darin,
   und wird per transform ein- und ausgeblendet.
   Vorher wurde die Breite von 0 auf 300 px animiert. Das funktionierte
   nur, solange die Leiste aus einem einzigen Knopf bestand: Seit dort
   eine Spalte mit drei Elementen steht, rechnet das Flex-Layout die
   Breite während der Animation jedes Bild neu und drückt das Panel auf
   1 px zusammen. Eine Bewegung per transform fasst das Layout gar nicht
   erst an und kann deshalb nicht mit ihm streiten. */
.quick-panel {
  position: absolute;
  right: 100%;
  top: 50%;
  width: 300px;
  transform: translate(14px, -50%);
  opacity: 0;
  visibility: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 0 24px rgba(27, 54, 93, 0.16);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  display: flex;
  flex-direction: column;
}
.quick-cta.offen .quick-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}
.quick-panel-kopf {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--linie);
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}
.quick-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linie);
  color: var(--navy);
  transition: background .12s;
}
.quick-panel a:last-child { border-bottom: 0; }
.quick-panel a:hover { background: rgba(242, 115, 17, .07); color: var(--navy); }
.quick-panel a .qp-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-panel a .qp-text { display: flex; flex-direction: column; gap: 2px; }
.quick-panel a .qp-titel { font-size: 14.5px; font-weight: 500; }
.quick-panel a .qp-sub { font-size: 12px; color: var(--text); }

@media (max-width: 760px) {
  /* Auf dem Handy als Leiste am unteren Rand statt seitlich */
  .quick-cta {
    right: 0; left: 0; top: auto; bottom: 0;
    transform: none;
  }
  .quick-tab {
    writing-mode: horizontal-tb;
    transform: none;
    border-radius: 0;
    justify-content: center;
    padding: 15px 12px;
    box-shadow: 0 -3px 14px rgba(27, 54, 93, .18);
  }
  .quick-tab svg { transform: none; }

  /* Auf dem Handy liegen die drei Wege nebeneinander in einer Leiste:
     „Termin" nimmt den Rest der Breite, WhatsApp und Anrufen je 68 px. */
  .quick-spalte {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .quick-tab { flex: 1 1 auto; }
  .quick-knopf {
    flex: 0 0 68px;
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: 0 -3px 14px rgba(27, 54, 93, 0.18);
  }

  /* Auf dem Handy klappt das Panel über der unteren Leiste auf */
  .quick-panel {
    right: 0;
    left: 0;
    top: auto;
    bottom: 100%;
    width: auto;
    transform: translateY(14px);
    border: 0;
    border-top: 1px solid var(--linie);
    border-radius: 0;
    box-shadow: 0 -6px 24px rgba(27, 54, 93, 0.16);
  }
  .quick-cta.offen .quick-panel { transform: translateY(0); }
  .quick-panel a { white-space: normal; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  h1 { font-size: 34px; }
  .kachel-raster { grid-template-columns: repeat(2, 1fr); }
  .ueber-uns-raster,
  .inhalt-raster,
  .kontakt-raster { grid-template-columns: 1fr; }
  .inhalt-raster img { position: static; }
  .brand .partner-hinweis { display: none; }
  .lk-raster { grid-template-columns: repeat(3, 1fr); }
  .leistungs-kacheln { margin-top: -56px; }

  /* Ab hier das Klappmenü statt der waagerechten Leiste.
     Vorher schaltete das erst bei 760 px um — mit dem achten Punkt
     („Fragen") drückte die Leiste dazwischen das Logo auf 14 px zusammen.
     `top: 100%` statt einer festen Zahl, damit das Menü unter dem Kopf
     hängt, egal ob dieser 88 px (hier) oder 72 px (unter 760 px) hoch ist. */
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 24px 24px;
    gap: 18px;
  }
  .main-nav.offen { display: flex; }
}

@media (max-width: 760px) {
  section, .section { padding: 52px 0; }

  /* Auf dem Handy keine Überlappung — das Hero ist dort zu knapp,
     die Kacheln würden sonst die Buttons verdecken. */
  .lk-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .leistungs-kacheln { margin-top: 0; padding-top: 40px; padding-bottom: 48px; }
  .lk { padding: 20px 10px 18px; }
  .lk-icon { width: 42px; height: 42px; margin-bottom: 10px; }
  .lk-titel { font-size: 14px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .site-header .container { height: 72px; }
  .brand img.logo-bsk { height: 48px; }

  .hero-media { min-height: 540px; }
  .hero-inhalt { padding: 64px 0; }
  .teaser-raster,
  .standorte-raster { grid-template-columns: 1fr; }
  .teaser-karte img { height: 220px; }
  .kachel-raster { grid-template-columns: 1fr; }
  .site-footer .container { flex-direction: column; align-items: flex-start; }
}

/* ---------- Fragen-Assistent (chat.js) ---------- */
/* Sitzt unten rechts, bewusst in Navy statt Orange: Orange gehört dem
   Termin-Reiter — dem wichtigsten Weg. Der Assistent ist ein Angebot,
   keine Aufforderung, und soll dem nicht die Aufmerksamkeit wegnehmen. */
.bsk-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 61;
}

.chat-knopf {
  /* `position` und `z-index` sind hier NICHT Deko, sondern tragend:
     Die Bühne von Mr. BSK ist absolut positioniert, und positionierte
     Elemente werden immer über nicht positionierten gezeichnet — ganz
     gleich, in welcher Reihenfolge sie im Dokument stehen. Ohne diese
     zwei Zeilen stand die Figur VOR der Kachel und verdeckte deren obere
     Hälfte samt Beschriftung. */
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.28);
  transition: background 0.15s, transform 0.15s;
}
.chat-knopf:hover { background: #16294a; transform: translateY(-1px); }
.bsk-chat.offen .chat-knopf { background: #16294a; }

/* ---------- Mr. BSK ----------
   Die Figur liegt hinter dem Knopf (im DOM davor, deshalb tiefer) und
   wird über `transform: translateY` hoch- und heruntergefahren. Bewegt
   wird ausschließlich transform — das läuft auf der Grafikkarte und
   ruckelt auch auf älteren Handys nicht. */
/* Die Bühne schneidet unten ab — die Figur kann nicht darüber hinaus.
   Ihre Unterkante liegt innerhalb des Knopfes, also genau dort, wo der
   Schnitt ohnehin verdeckt ist. Ohne sie wanderte die abtauchende Figur
   auf dem Handy quer über die Kontaktleiste. */
.mr-buehne {
  position: absolute;
  right: 26px;
  bottom: 20px;
  width: 128px;
  height: 192px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;   /* unter dem Knopf (z-index 2) — er steht dahinter */
}
/* Die Figur nimmt keine Klicks an — und das ist Absicht.
   Sie war zunächst selbst anklickbar. Ihr Arm reicht beim Winken aber bis
   über die Fußzeile, und weil sie im Takt auftaucht und wieder verschwindet,
   verschluckte sie den Link „Datenschutz" mal ja, mal nein. Ein Pflichtlink,
   der je nach Sekunde reagiert oder nicht, ist schlimmer als eine Figur, die
   man nicht antippen kann. Zum Öffnen gibt es den Knopf direkt davor und die
   Sprechblase darüber. */
.mr-bsk {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
  will-change: transform;
}
.mr-svg { width: 100%; height: auto; display: block; }

/* Drei Stellungen: ganz weg, nur der Kopf, ganze Figur.

   Die 34 % sind gemessen, nicht geschätzt: Bei 128 px Breite ist die Figur
   188 px hoch, die Augen sitzen 62 px unter ihrer Oberkante. Mit den
   ursprünglichen 56 % lagen sie 21 px UNTER der Knopfkante — man sah nur
   Haare. Bei 34 % schauen sie 20 px darüber hervor, und genau darum geht
   es bei diesem Zustand. */
.mr-bsk.mr-versteckt { transform: translateY(112%); }
.mr-bsk.mr-lugt      { transform: translateY(34%); }
.mr-bsk.mr-ganz      { transform: translateY(0); }

/* Die Augen wandern dauerhaft hin und her — das lässt die Figur leben,
   ohne dass sich etwas Großes bewegt. */
.mr-pupille {
  transform-box: view-box;
  animation: mrBlick 5.5s ease-in-out infinite;
}
@keyframes mrBlick {
  0%, 22%   { transform: translateX(0); }
  34%, 46%  { transform: translateX(-2.6px); }
  58%, 70%  { transform: translateX(2.6px); }
  82%, 100% { transform: translateX(0); }
}

/* Winken: zweimal, dann Schluss. Drehpunkt ist die Schulter. */
.mr-arm {
  transform-box: view-box;
  transform-origin: -30px 26px;
}
.mr-bsk.mr-winkt .mr-arm { animation: mrWinken 0.85s ease-in-out 2; }
@keyframes mrWinken {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-17deg); }
  50%      { transform: rotate(5deg); }
  75%      { transform: rotate(-17deg); }
}

.mr-blase {
  position: absolute;
  right: 0;
  /* 216 statt 178: Bei 178 lag die Unterkante der Blase 38 px über der
     Knopfkante — und damit mitten in seinen Haaren. Gemessen bei 1280 px. */
  bottom: 216px;
  width: 232px;
  padding: 13px 30px 13px 15px;
  background: var(--weiss);
  border: 1px solid var(--navy);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(27, 54, 93, 0.16);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy);
  cursor: pointer;
}
.mr-blase[hidden] { display: none; }
/* Der Zipfel: zwei übereinanderliegende Dreiecke, das obere in Weiß —
   so entsteht die Spitze samt Rand ohne zusätzliches Bild. */
.mr-blase::before,
.mr-blase::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 34px;
  border: 10px solid transparent;
  border-top-color: var(--navy);
  border-bottom: 0;
}
.mr-blase::after {
  bottom: -8.5px;
  border-top-color: var(--weiss);
}
.mr-blase-zu {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  background: none;
  color: rgba(27, 54, 93, 0.45);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.mr-blase-zu:hover { color: var(--navy); }

/* Chat offen: Mr. BSK tritt ab, er würde sonst am Fenster kleben. */
.bsk-chat.offen .mr-bsk { transform: translateY(100%); }
.bsk-chat.offen .mr-blase { display: none; }

/* „Bewegung reduzieren": Er steht da, sonst nichts. Für manche Menschen
   ist wechselnde Bewegung am Bildschirmrand nicht Deko, sondern ein
   ernstes Problem. */
@media (prefers-reduced-motion: reduce) {
  .mr-bsk { transition: none; }
  .mr-pupille, .mr-bsk.mr-winkt .mr-arm { animation: none; }
}

.chat-fenster {
  position: absolute;
  /* Nicht bündig mit dem Knopf, sondern 30 px weiter links: Sonst schöbe
     sich das geöffnete Fenster über den 46 px breiten Termin-Reiter am
     rechten Rand. Gemessen bei 1280 px — 24 px Überlappung. */
  right: 30px;
  bottom: calc(100% + 12px);
  width: 370px;
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(27, 54, 93, 0.22);
}
/* Muss display:flex überstimmen, sonst bliebe das Fenster sichtbar. */
.chat-fenster[hidden] { display: none; }

.chat-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--navy);
  color: #fff;
}
.chat-kopf strong { display: block; font-size: 15px; font-weight: 600; }
.chat-kopf-sub { display: block; font-size: 12px; opacity: 0.72; }
.chat-kopf-knoepfe { display: flex; gap: 7px; flex: 0 0 auto; }
.chat-zu,
.chat-groesse {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; cursor: pointer;
  transition: background 0.15s;
}
.chat-zu:hover,
.chat-groesse:hover { background: rgba(255, 255, 255, 0.26); }

/* Vergrößertes Fenster. Die Breite wächst stärker als die Höhe: Beim Lesen
   stört ein schmaler Text mehr als ein kurzes Fenster — Preistabellen und
   lange Antworten brauchen Zeilenbreite, nicht Zeilenzahl. */
.bsk-chat.gross .chat-fenster {
  width: min(560px, calc(100vw - 100px));
  max-height: min(84vh, 780px);
}
.bsk-chat.gross .chat-blase { max-width: 96%; font-size: 15px; }
.bsk-chat.gross .chat-antwort table { font-size: 14px; }

.chat-verlauf {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fbfcfd;
}

.chat-blase {
  max-width: 92%;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  /* Lange Fachbegriffe dürfen im engen Fenster umbrechen. */
  overflow-wrap: anywhere;
}
.chat-bot {
  align-self: flex-start;
  background: var(--weiss);
  border: 1px solid var(--linie);
  color: var(--text);
}
.chat-ich {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
}
.chat-blase p + p { margin-top: 9px; }
.chat-blase a { color: var(--blau); text-decoration: underline; }
.chat-blase ul, .chat-blase ol { margin: 8px 0 0 18px; }
.chat-blase li + li { margin-top: 4px; }

.chat-quelle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}
.chat-frage-titel {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

/* Antworten außerhalb der FAQ werden bewusst anders eingefärbt und mit
   einem Hinweis abgeschlossen. Bei einer amtlich anerkannten Prüfstelle
   muss auf einen Blick erkennbar sein, was geprüfte Auskunft ist und was
   allgemeine Information ohne Gewähr. */
.chat-quelle-allgemein { color: var(--blau); }
.chat-hinweis {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--linie);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(27, 54, 93, 0.62);
}
.chat-antwort > *:first-child { margin-top: 0; }

/* Tabellen aus der FAQ im Chatfenster.

   Zuerst durften sie seitlich scrollen. Das war falsch: Auf 340 px Breite
   stand dann „167,0…" am Rand abgeschnitten da — es sieht kaputt aus, und
   niemand kommt auf die Idee, in einer Tabelle zu wischen. Deshalb werden
   Beschriftung und Wert hier untereinander gesetzt statt nebeneinander.
   Nichts wird abgeschnitten, nichts muss gescrollt werden. */
.chat-tabelle { margin-top: 8px; overflow: visible; }
.chat-antwort table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.chat-antwort tr {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
}
.chat-antwort tr:last-child { border-bottom: 0; }
.chat-antwort th,
.chat-antwort td {
  display: block;
  width: auto;
  padding: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.chat-antwort th {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.chat-antwort td { color: var(--text); }

.chat-weitere { max-width: 100%; display: flex; flex-direction: column; gap: 7px; }
.chat-weitere > p { font-size: 13px; }
.chat-chip {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--weiss);
  color: var(--navy);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.chat-chip:hover { background: rgba(242, 115, 17, 0.08); border-color: var(--orange); }

.chat-wege { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.chat-weg {
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.chat-blase a.chat-weg { color: #fff; text-decoration: none; }
.chat-weg-tel { background: var(--blau); }
.chat-weg-wa { background: #25d366; }
.chat-weg-form { background: var(--orange); }
/* Routenplaner: in den Hausfarben, nicht in denen von Google und Apple —
   es sind unsere Knöpfe, nicht deren Werbung. */
.chat-weg-maps { background: var(--navy); }
.chat-weg-apple { background: var(--blau); }
.chat-routen { margin-top: 12px; }

/* Drei Punkte, solange gesucht wird */
.chat-punkte { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat-punkte i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--linie);
  animation: chatPunkt 1s infinite ease-in-out;
}
.chat-punkte i:nth-child(2) { animation-delay: 0.15s; }
.chat-punkte i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatPunkt {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-eingabe {
  display: flex;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid var(--linie);
  background: var(--weiss);
}
.chat-eingabe input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--navy);
}
.chat-eingabe input:focus { outline: 2px solid rgba(9, 91, 177, 0.35); outline-offset: 1px; }
.chat-eingabe button {
  flex: 0 0 auto;
  width: 42px;
  border: 0;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.chat-eingabe button:hover { background: var(--orange-dkl); }

.chat-fuss {
  padding: 0 14px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.55);
  background: var(--weiss);
}

@media (max-width: 760px) {
  /* Am unteren Rand sitzt die feste Kontaktleiste — der Assistent
     schwebt darüber, damit er sie nicht verdeckt. */
  /* 90 px: sechs über der 84 px hohen Kontaktleiste. Wandert die Leiste
     in der Höhe, muss dieser Wert mit — sonst verschwindet der Chat-Knopf
     dahinter. */
  .bsk-chat { right: 14px; bottom: 90px; }
  .chat-knopf { padding: 11px 14px; }
  .chat-knopf-text { display: none; }

  /* Auf dem Handy ist alles eine Nummer kleiner: Figur, Blase, Schrift.
     Die Blase war zuerst ganz ausgeblendet — in voller Größe nimmt sie auf
     375 px die halbe Bildbreite ein. Verkleinert passt sie aber, und ohne
     sie fehlte die Ansprache genau dort, wo die meisten Besucher sind. */
  .mr-buehne { width: 92px; right: 16px; bottom: 18px; height: 138px; }
  .mr-blase {
    bottom: 164px;
    width: 210px;
    padding: 10px 26px 10px 12px;
    font-size: 12.5px;
    border-radius: 10px;
  }
  .mr-blase::before, .mr-blase::after { right: 26px; }
  .chat-fenster {
    /* Auf dem Handy liegt die Kontaktleiste unten, nicht rechts —
       hier darf das Fenster wieder bündig am Knopf hängen. */
    right: 0;
    width: calc(100vw - 28px);
    max-width: 370px;
    max-height: calc(100vh - 150px);
  }

  /* Auf dem Handy gibt es keine Breite zu gewinnen — dort wird das
     vergrößerte Fenster höher und die Schrift größer.

     Die 130 px sind gerechnet, nicht geschätzt: Der Knopf sitzt 66 px über
     dem unteren Rand, ist 44 px hoch, und darüber liegen 12 px Abstand zum
     Fenster. Mit `100vh - 96px` ragte das Fenster oben 26 px aus dem Bild —
     die Kopfzeile mit dem Schließen-Knopf wäre unerreichbar gewesen. */
  .bsk-chat.gross .chat-fenster {
    width: calc(100vw - 28px);
    max-width: none;
    max-height: calc(100vh - 130px);
  }
}

/* ---------- Anfahrt-Reiter am linken Rand ----------
   Spiegelbild des Termin-Reiters rechts: gleiche Höhe, gleiche Form, nur
   zur anderen Seite geöffnet. Navy statt Orange, weil Orange dem Termin
   gehört — dem Weg, der Ihnen am meisten bringt. */
.anfahrt-cta {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
}
/* Weiß mit orangener Kante — und beides hat einen Grund.
   In Navy verschwand der Reiter im Hero-Foto: Das Bild ist dunkelblau
   getönt, der Reiter war es auch. Gerade dort, wo jeder Besucher zuerst
   hinsieht, war er praktisch unsichtbar.

   Weiß löst das auf dem dunklen Foto. Auf den hellen Abschnitten darunter
   löst es aber nichts — dort steht Weiß auf Weiß, und nur ein zarter
   Schatten trennte beides. Der orangene Rand greift auf beiden Seiten:
   Er hebt sich vom dunklen Foto ebenso ab wie von der weißen Fläche, und
   er ist dieselbe Farbe wie der Termin-Reiter gegenüber — die zwei Reiter
   gehören sichtbar zusammen, ohne dass der eine dem anderen den Rang
   abläuft. Die Nadel nimmt die Farbe auf. */
.anfahrt-tab {
  background: var(--weiss);
  color: var(--navy);
  border: 3px solid var(--orange);
  border-left: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 22px 12px;
  border-radius: 0 10px 10px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 4px 0 20px rgba(27, 54, 93, .3);
  transition: background .15s, color .15s;
}
/* Beim Überfahren dreht sich das Verhältnis um — deutliche Rückmeldung,
   ohne dass sich die Größe des Reiters ändert. */
.anfahrt-tab:hover { background: var(--navy); color: #fff; }

/* Die Nadel lag quer und sah aus wie ein Auge: Das Elternteil ist um 180°
   gedreht, die vorherigen 90° ergaben in der Summe 270°. Erst 180° heben
   die Drehung des Reiters auf, und die Nadel zeigt wieder nach unten. */
.anfahrt-tab svg { transform: rotate(180deg); color: var(--orange); }
.anfahrt-tab:hover svg { color: var(--orange-hell); }

.anfahrt-panel {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 250px;
  transform: translate(-14px, -50%);
  opacity: 0;
  visibility: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 6px 0 24px rgba(27, 54, 93, 0.16);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  padding: 16px 18px 18px;
}
.anfahrt-cta.offen .anfahrt-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}
.anfahrt-kopf {
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 10px;
}
.anfahrt-adresse {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 14px;
}
.anfahrt-knopf {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.anfahrt-knopf + .anfahrt-knopf { margin-top: 8px; }
a.anfahrt-knopf:hover { color: #fff; filter: brightness(1.08); }
.anfahrt-google { background: var(--navy); }
.anfahrt-apple { background: var(--blau); }

/* ---------- Anklickbare Adressen ----------
   Überall dort, wo eine Anschrift steht. Das Ziel wird aus dem Text
   selbst gelesen, deshalb funktioniert es auch beim Prüfstützpunkt in
   Darmstadt, ohne dass die Adresse hier ein zweites Mal gepflegt wird. */
.adresse-klickbar {
  cursor: pointer;
  border-bottom: 1px dashed var(--linie);
  display: inline-block;
  transition: color .12s, border-color .12s;
}
.adresse-klickbar:hover { color: var(--blau); border-bottom-color: var(--blau); }
.adresse-wahl {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.adresse-wahl[hidden] { display: none; }
.adresse-wahl a {
  padding: 7px 13px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  background: var(--weiss);
  transition: background .12s, border-color .12s;
}
.adresse-wahl a:hover { background: rgba(9, 91, 177, .07); border-color: var(--blau); color: var(--navy); }

@media (max-width: 760px) {
  /* Auf dem Handy liegt unten die Kontaktleiste über die volle Breite.
     Ein Reiter am linken Rand schwebte dort über dem Seiteninhalt — und
     gebraucht wird er nicht: Die Adresse steht in der Fußzeile, auf der
     Startseite und in der FAQ, und dort ist sie ohnehin anklickbar. */
  .anfahrt-cta { display: none; }
}

/* ---------- Mittelband der Handy-Leiste ----------
   Am Rechner unsichtbar: dort erledigen die beiden senkrechten Reiter
   links und rechts diese Aufgabe. */
.mittelband, .anfahrt-handy { display: none; }

@media (max-width: 760px) {
  /* Aus der senkrechten Leiste wird eine waagerechte am unteren Rand.
     Sie teilt sich waagerecht: oben der orangene Termin-Knopf mit dem
     Kalender am Anfang, unten der dunkle Anfahrt-Knopf mit der Nadel am
     Ende. Ein eckiges Yin und Yang.

     Die Symbole standen zuvor als eigene Felder über die volle Höhe
     daneben. Dadurch lief senkrecht durch die Leiste eine Farbkante, die
     Beschriftung und zugehöriges Symbol trennte — es sah nach zwei
     Knöpfen aus. Jetzt liegt jedes Symbol auf der Fläche, zu der es
     gehört, und jede Hälfte ist unverkennbar ein einziger Knopf.

     Die Höhe steht fest auf 84 px, damit sich beide Streifen sauber
     halbieren lassen; aus einer Höhe, die sich aus Innenabständen
     ergibt, werden bei ungeraden Werten zwei ungleiche Hälften.

     84 statt der früheren 60: Die Symbole standen zuvor als eigene Felder
     über die volle Höhe daneben — das war der Ausgleich dafür, dass eine
     Hälfte nur 30 px hoch ist, und 30 px trifft man mit dem Daumen nicht
     zuverlässig. Da die Symbole jetzt in ihrer eigenen Hälfte liegen,
     muss die Höhe selbst liefern: 42 px je Hälfte, und damit ungefähr
     die 44 px, die Apple als kleinste sichere Antippfläche nennt. Jede
     Hälfte ist über die ganze Breite antippbar, Symbol eingeschlossen. */
  .quick-spalte { height: 84px; align-items: stretch; }

  /* Platz für die feste Leiste schaffen. Ohne diese Zeile liegt sie über
     dem Ende der Seite — und dort stehen Impressum und Datenschutz, also
     Pflichtangaben, die erreichbar sein müssen. Die Leiste ist 84 px hoch;
     die vier zusätzlichen Pixel verhindern, dass die letzte Zeile bündig
     an der Kante klebt. */
  body { padding-bottom: 88px; }

  /* Der senkrechte Reiter entfällt auf dem Handy vollständig — seine
     Aufgabe übernimmt die obere Hälfte des Mittelbands. */
  .quick-tab { display: none; }

  .mittelband {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }
  .mb-termin, .mb-anfahrt {
    flex: 1 1 50%;
    min-height: 0;
    border: 0;
    padding: 0 14px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
  }
  .mb-termin svg, .mb-anfahrt svg { width: 19px; height: 19px; flex: 0 0 auto; }
  /* Sonst bliebe der Kalender orange auf orange — also unsichtbar. */
  .mb-termin .icon-kalender { color: #fff; }

  /* Oben nach rechts, unten nach links — daher die Ausrichtung. */
  .mb-termin { background: var(--orange); justify-content: flex-start; }
  .mb-anfahrt { background: var(--navy); justify-content: flex-end; }

  /* Die Routenauswahl klappt über der Leiste auf.
     Diese Regel stand versehentlich im 340-px-Block darunter. Auf jedem
     größeren Gerät — also praktisch jedem Handy — blieb das Feld deshalb
     auf „display: none" stehen: Ein Tippen auf „Anfahrt" schaltete zwar
     brav das hidden-Attribut um, sichtbar wurde aber nie etwas. */
  .anfahrt-handy {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    background: var(--weiss);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 24px rgba(27, 54, 93, 0.16);
    padding: 16px 20px 20px;
  }
  .anfahrt-handy[hidden] { display: none; }

  /* Mr. BSK und der Chat-Knopf treten beiseite, solange über der Leiste
     etwas offen ist: Beide liegen sonst über dem rechten Ende der Knöpfe
     im Feld, und wer dort tippt, landet im Chat statt in der Karten-App.
     Sie kommen zurück, sobald das Feld wieder zu ist. */
  body.leiste-offen .mr-buehne,
  body.leiste-offen .chat-knopf { display: none; }
}

/* Sehr schmale Geräte — iPhone SE und ähnliche.
   Bei 320 px wurde „Termin" abgeschnitten. Die beiden Symbolfelder rechts
   rücken deshalb enger zusammen; das verschafft dem Band 32 px mehr. */
@media (max-width: 340px) {
  .quick-knopf { flex: 0 0 52px; }
  .mb-termin, .mb-anfahrt { padding: 0 10px; font-size: 15px; }
}