/* ==========================================================================
   Kfz-Prüfstelle – Frontend
   Mobil zuerst. Farben kommen als CSS-Variablen aus dem Adminbereich.
   ========================================================================== */

:root {
  --primary: #123a5a;
  --secondary: #0e7c6b;
  --button: #e4610f;
  --bg: #f6f7f9;
  --ink: #101822;

  --ink-soft: #55636f;
  --line: #dee3e9;
  --surface: #ffffff;
  --steel: #eef1f5;
  --open: #127a4b;
  --closed: #9a3d2f;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 34, .06), 0 8px 24px -12px rgba(16, 24, 34, .18);

  --wrap: 1180px;
  --gap: clamp(1rem, 4vw, 2rem);
  --section: clamp(3rem, 8vw, 5.5rem);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  /* Sicherheitsnetz: ein einzelnes zu breites Element wuerde sonst die gesamte
     Seite horizontal verschieben, wodurch Ueberschriften und Text am rechten
     Rand abgeschnitten wirken. */
  overflow-x: clip;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 68px; /* Platz für die mobile Aktionsleiste */
}
@media (min-width: 860px) { body { padding-bottom: 0; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--button); }

:focus-visible {
  outline: 3px solid var(--button);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
  /* Lange Komposita wie "Hauptuntersuchung" oder "Aenderungsabnahme" passen auf
     schmalen Displays sonst nicht in eine Zeile und ragen aus dem Layout. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(1.7rem, 6.5vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.35rem); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2rem, 5vw, 3rem); }
.section--steel { background: var(--steel); }
.section--ink { background: var(--primary); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: #fff; }

.eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--secondary-text, var(--secondary));
  margin: 0 0 .75rem;
}
.section--ink .eyebrow { color: #9dc3dd; }

.lead { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; }
.section--ink .lead { color: rgba(255,255,255,.8); }

.num { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 12px 18px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------- Buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
  min-height: 48px;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--button); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); color: #fff; }
.btn--dark { background: var(--primary); color: #fff; }
.btn--dark:hover { color: #fff; filter: brightness(1.15); }
.btn--outline { border-color: var(--line); background: var(--surface); color: var(--primary); }
.btn--outline:hover { border-color: var(--primary); }
.btn--ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------------------- Header -- */

.topbar {
  background: var(--primary);
  color: rgba(255,255,255,.9);
  font-size: .85rem;
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar__hide { display: none; }
@media (min-width: 860px) { .topbar__hide { display: inline; } }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem 0;
  /* Waechst mit der eingestellten Logohoehe mit, damit oben und unten
     Luft bleibt und der Kopfbereich nicht gedraengt wirkt. */
  min-height: max(66px, calc(var(--logo-h, 46px) + 20px));
  flex-wrap: nowrap;
}
@media (min-width: 600px) { .site-header__inner { gap: 1rem; } }
/* min-width: 0 ist hier entscheidend: ohne diese Angabe schrumpfen Flex-Kinder
   nicht unter ihre Inhaltsbreite – der Firmenname schiebt sich dann unter den
   Menue-Button. */
.brand {
  display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink);
  min-width: 0; flex: 1 1 auto;
}
.brand img { max-height: var(--logo-h, 46px); width: auto; flex: none; }
.brand__name {
  font-weight: 750; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.15;
  min-width: 0; overflow-wrap: break-word;
}
.brand__sub { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-soft); letter-spacing: .02em; }

/* Auf schmalen Geraeten hat der Zusatz keinen Platz neben Logo und Button. */
@media (max-width: 480px) {
  /* Auf schmalen Geraeten anteilig kleiner, damit Name und Menue Platz behalten. */
  .brand img { max-height: calc(var(--logo-h, 46px) * .74); }
  .brand__name { font-size: .95rem; }
  .brand__sub { display: none; }
}
@media (max-width: 360px) {
  .brand__name { font-size: .88rem; }
}

.nav-toggle {
  /* Nur das Symbol, ohne Beschriftung. Quadratisch und mindestens 44px,
     damit die Flaeche mit dem Finger sicher zu treffen bleibt. */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; font: inherit; cursor: pointer;
  flex: none;              /* schrumpft nie, wird nie ueberlagert */
  width: 46px; min-height: 46px;
  white-space: nowrap;
  position: relative; z-index: 1;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.main-nav { display: none; }
.main-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.main-nav ul { list-style: none; margin: 0; padding: .5rem var(--gap) 1rem; display: grid; gap: .1rem; }
.main-nav a {
  display: block; padding: .8rem .2rem; text-decoration: none; color: var(--ink);
  font-weight: 600; border-bottom: 1px solid var(--line);
}
.main-nav a[aria-current="page"] { color: var(--button); }

@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .main-nav { display: block; }
  .main-nav ul { display: flex; gap: 1.4rem; padding: 0; }
  .main-nav a { border: 0; padding: .3rem 0; font-size: .95rem; }
  .main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--button); }
  .header-cta { display: inline-flex; }
}
.header-cta { display: none; }

/* ---------------------------------------------------------------- Hero -- */

.hero { background: var(--primary); color: #fff; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18,58,90,.96) 0%, rgba(18,58,90,.86) 46%, rgba(18,58,90,.45) 100%);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Der Bildbereich uebernimmt die Hoehe des Textblocks. Ohne Mindesthoehe bleibt
   er auf dem Smartphone flach, und ein Hochformat-Bild wird auf einen schmalen
   Streifen beschnitten – der Upload wirkt dann folgenlos. */
/* "Einpassen": Das Bild wird vollstaendig gezeigt statt formatfuellend
   beschnitten. Fuer Logos und Grafiken, die sonst hochgerechnet wuerden.
   Der abgedunkelte Verlauf wird dabei zurueckgenommen, damit die Grafik
   nicht hinter einer Farbflaeche verschwindet. */
/* Farbflaeche statt Headerbild. Die dunkle Auflage aus .hero::after wuerde
   die eingestellte Farbe verfaelschen – bei einer Flaeche wird sie deshalb
   ausgeblendet und der Inhalt sitzt mittig darauf. */
/* Ueberschrift der Seitenspalte: semantisch ein H2, optisch aber so klein
   wie die frueheren H3. */
.aside-title {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  margin-bottom: 1rem;
}

.hero--painted::after { display: none; }
/* Kein display:flex oder grid hier: .wrap zentriert sich ueber margin-inline
   selbst. Als Flex- oder Grid-Element verliert es diese Zentrierung und der
   Text klebt am linken Bildschirmrand. Die Mindesthoehe kommt inline aus der
   Einstellung, den Abstand nach oben und unten bringt .hero__inner mit. */
.hero--painted { display: block; }
@media (max-width: 700px) {
  /* Auf dem Smartphone flacher: eine hohe Farbflaeche schiebt den Inhalt
     sonst komplett unter die Bildschirmkante. */
  .hero--painted { min-height: 260px !important; }
}

.hero--contain .hero__media img { object-fit: contain; object-position: center; }
.hero--contain .hero__media { padding: 1.5rem; }
.hero--contain::after { background: rgba(18,58,90,.72); }

/* Die drei Hauptknoepfe im Hero sollen auf dem Smartphone nebeneinander
   passen. Sie teilen sich die Breite zu gleichen Teilen, die Schrift waechst
   mit der Bildschirmbreite mit. Die Hoehe bleibt bei mindestens 46px, damit
   sie mit dem Finger sicher zu treffen sind. */
@media (max-width: 700px) {
  .hero .btn-row { flex-wrap: nowrap; gap: .45rem; }
  .hero .btn-row .btn {
    flex: 1 1 0; min-width: 0;
    padding: .8rem .4rem;
    font-size: clamp(.72rem, 3.1vw, .95rem);
    white-space: nowrap;
    min-height: 46px;
  }
}
@media (max-width: 350px) {
  /* Sehr schmale Geraete (iPhone SE und aehnlich): Ein Drittel der Breite
     reicht rechnerisch nicht mehr fuer "Termin buchen" – dann lieber
     umbrechen als den Text abschneiden. */
  .hero .btn-row { flex-wrap: wrap; }
  .hero .btn-row .btn { flex: 1 1 45%; }
}

@media (max-width: 700px) {
  /* Frueher stand hier min-height mit align-items:flex-end. Das schob den
     Inhalt an den unteren Rand, wo ihn die Kopfleiste oben abschnitt und die
     Schnellaktionsleiste unten ueberdeckte. Der Bereich waechst jetzt mit
     seinem Inhalt; das Bild bekommt ueber die Innenabstaende Hoehe. */
  .hero__inner { padding-block: 2.2rem 2.6rem; }
  .hero__media img { object-position: center 30%; }
  .hero--contain .hero__media img { object-position: center; }
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.hero__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.35fr .65fr; gap: 3rem; } }
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero__sub { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: rgba(255,255,255,.86); max-width: 46ch; margin-bottom: 1.6rem; }
.hero .btn-row { margin-bottom: 1.5rem; }

.hero__facts { display: grid; gap: .55rem; font-size: .97rem; }
.hero__facts div { display: flex; gap: .6rem; align-items: baseline; color: rgba(255,255,255,.9); }
.hero__facts a { color: #fff; font-weight: 650; text-decoration: none; }
.hero__facts .label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); min-width: 82px; }

/* Statusscheibe: Ring mit zwölf Marken, Mitte zeigt den Öffnungsstatus.
   Bewusst eigenständig gestaltet – keine Nachbildung einer amtlichen Plakette. */
.status-disc {
  --disc: clamp(150px, 42vw, 210px);
  width: var(--disc); height: var(--disc); margin-inline: auto;
  position: relative; display: grid; place-items: center;
  background: #fff; border-radius: 50%;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
}
.status-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.status-disc__center { position: relative; text-align: center; padding: 0 1.6rem; }
.status-disc__state {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--closed);
}
.status-disc.is-open .status-disc__state { color: var(--open); }
.status-disc__label { font-size: 1.06rem; font-weight: 750; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; margin-top: .2rem; }
.status-disc__detail { font-size: .8rem; color: var(--ink-soft); margin-top: .35rem; line-height: 1.35; }

/* ------------------------------------------------------------- Bausteine */

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid { gap: 1.4rem; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.card--link { text-decoration: none; color: inherit; display: block; transition: border-color .15s ease, transform .15s ease; }
.card--link:hover { border-color: var(--primary); transform: translateY(-2px); color: inherit; }
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }
.card__more { display: inline-block; margin-top: .9rem; font-weight: 650; font-size: .93rem; color: var(--button); }

.service-card { display: flex; flex-direction: column; gap: .2rem; }
.service-card__mark {
  width: 38px; height: 38px; border-radius: 9px; background: var(--steel);
  display: grid; place-items: center; margin-bottom: .9rem; color: var(--primary);
}
.service-card__price { margin-top: .7rem; font-weight: 700; color: var(--ink); }

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  font-size: .82rem; font-weight: 600;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f5b942; }
.pill.is-open::before { background: #58d69a; }

.notice {
  border-left: 3px solid var(--button);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: .95rem;
}

/* --------------------------------------------------------- Öffnungszeiten */

.hours { width: 100%; border-collapse: collapse; }
.hours th { text-align: left; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: .5rem; font-weight: 700; }
.hours td { padding: .72rem 0; border-top: 1px solid var(--line); font-size: 1rem; }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today td { font-weight: 700; color: var(--primary); }
.hours tr.is-today td:first-child::before { content: "▸ "; color: var(--button); }
.hours td.closed { color: var(--ink-soft); }

/* ------------------------------------------------------------------ FAQ -- */

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; padding: 1.05rem 2.2rem 1.05rem 0; font-weight: 650; position: relative;
  list-style: none; font-size: 1.03rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--button); line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item__body { padding: 0 0 1.15rem; color: var(--ink-soft); max-width: 72ch; }

/* -------------------------------------------------------------- Ablauf --- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.1rem; }
.steps li { counter-increment: step; padding-left: 3rem; position: relative; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700;
}
.steps strong { display: block; }

/* ------------------------------------------------------------ Kontakte --- */

.contact-grid { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
/* Steht die Karte auf der Seite bereits weiter oben, entfaellt die zweite
   Spalte – sonst bliebe hier eine leere Flaeche stehen. */
/* Einspaltig, wenn die zweite Spalte (Karte oder Galerie) entfaellt.
   Wichtig: hier kein margin-inline setzen – die Klasse sitzt auf demselben
   Element wie .wrap, das mit margin-inline:auto zentriert. Ein eigener Wert
   wuerde den ganzen Block aus der Flucht der uebrigen Abschnitte schieben.
   Nur der Fliesstext wird begrenzt; ueber die volle Breite laufende Zeilen
   sind schwer zu lesen. */
@media (min-width: 900px) {
  .contact-grid--single { grid-template-columns: 1fr; }
  .contact-grid--single .prose { max-width: 80ch; }
}

.data-list { display: grid; gap: .9rem; margin: 0; }
.data-list div { display: grid; gap: .1rem; }
.data-list dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.data-list dd { margin: 0; font-size: 1.05rem; font-weight: 600; }
.data-list a { text-decoration: none; }

.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; }
.form-field input, .form-field textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-hp { position: absolute; left: -9999px; }

.alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: .95rem; }
.alert--ok { background: #e7f5ee; border: 1px solid #b6e0c9; color: #0e5c39; }
.alert--error { background: #fdecea; border: 1px solid #f5c6c2; color: #7a1b16; }

/* --------------------------------------------------------------- Karte --- */

.map-box { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.map-consent { padding: 2rem 1.5rem; text-align: center; }
.map-consent p { color: var(--ink-soft); font-size: .95rem; max-width: 46ch; margin-inline: auto; }
.map-box iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ------------------------------------------------------------- Footer ---- */

.site-footer {
  background: var(--primary);
  color: rgba(255,255,255,.76);
  padding-block: 3.4rem 1.8rem;
  font-size: .95rem;
  /* Schmale Akzentkante als Abschluss der Seite. Greift die Farbe der
     Handlungsknoepfe auf, damit der Fuss zum Rest gehoert. */
  border-top: 3px solid var(--button);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--button); }
.site-footer a:focus-visible { outline: 2px solid var(--button); outline-offset: 3px; border-radius: 3px; }

/* Zahlen im Fuss mit gleicher Zeichenbreite: Uhrzeiten stehen dadurch
   sauber untereinander statt leicht versetzt. */
.site-footer .num { font-variant-numeric: tabular-nums; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
  /* Ohne die Oeffnungszeiten-Spalte bleiben zwei Spalten. */
  .footer-grid--two { grid-template-columns: 1.5fr 1fr; }
}
@media (min-width: 1100px) { .footer-grid { gap: 4rem; } }

.footer-grid h3 {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.1rem; padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
  position: relative;
}
/* Kurzer Akzent unter der Ueberschrift – dasselbe Mittel wie bei den
   Abschnitten oben auf der Seite. */
.footer-grid h3::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 26px; height: 2px; background: var(--button);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

/* Erste Spalte: Firmenname und Rufnummer duerfen mehr Gewicht haben. */
.footer-grid > div:first-child p { line-height: 1.7; }
.footer-grid .footer-phone {
  display: inline-block; margin-top: .2rem;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em;
}

/* Oeffnungszeiten als zwei Spalten, damit Tag und Zeit ausgerichtet stehen. */
.footer-hours li {
  display: grid; grid-template-columns: 5.6rem 1fr; gap: .6rem;
  align-items: baseline;
}
.footer-hours li span:first-child { color: rgba(255,255,255,.6); }

.footer-links a { display: inline-block; padding-block: .1rem; transition: color .15s; }

/* Seitenliste auf schmalen Geraeten mehrspaltig. Diese Regel muss NACH
   ".footer-grid ul" stehen: bei gleicher Spezifitaet gewinnt sonst die
   spaetere Angabe und der Spaltenabstand waere wirkungslos. */
@media (max-width: 799px) {
  .footer-links {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .55rem .9rem;
  }
}
.footer-bottom {
  margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
/* Auf schmalen Geraeten untereinander statt gequetscht nebeneinander. */
@media (max-width: 620px) {
  .footer-bottom { flex-direction: column; gap: .4rem; }
}

/* ------------------------------------------------------- Aktionsleiste --- */

.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px -12px rgba(16,24,34,.5);
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
  padding: .55rem .3rem; text-decoration: none; color: var(--ink);
  font-size: .72rem; font-weight: 650; min-height: 60px;
}
.mobile-bar a + a { border-left: 1px solid var(--line); }
.mobile-bar svg { width: 21px; height: 21px; }
.mobile-bar a:first-child { color: var(--button); }
@media (min-width: 860px) { .mobile-bar { display: none; } }

/* --------------------------------------------------------- Breadcrumbs --- */

.breadcrumbs { font-size: .84rem; color: var(--ink-soft); padding-block: .9rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "›"; margin-left: .4rem; color: var(--line); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }

/* ----------------------------------------------------------- Demo-Band --- */

.demo-band {
  background: #2b2b2b; color: #fff; text-align: center;
  font-size: .8rem; letter-spacing: .05em; padding: .45rem 1rem;
}

/* ----------------------------------------------------------- Textseite --- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .45rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.prose th, .prose td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }

.tag {
  font-size: .85rem; padding: .35rem .8rem; border-radius: 999px;
  background: var(--steel); color: var(--ink-soft);
}


.team-grid img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; margin-bottom: .8rem; }
.team-grid h3 { margin-bottom: .1rem; }
.team-grid .role { color: var(--secondary-text, var(--secondary)); font-weight: 650; font-size: .92rem; }

.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ------------------------------------------------------- Terminbuchung -- */

.booking__step { margin-bottom: 2.2rem; }
.booking__step h2 { display: flex; align-items: center; gap: .7rem; font-size: 1.25rem; }
.booking__num {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: .9rem; font-weight: 700;
}

/* Tageswahl: waagerecht scrollbar, damit auch zwei Wochen auf ein Handy passen */
.daypicker {
  display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.daypicker__item {
  flex: none; scroll-snap-align: start; cursor: pointer;
  min-width: 92px; padding: .8rem .7rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; gap: .15rem; transition: border-color .12s, box-shadow .12s;
}
.daypicker__item:hover { border-color: var(--primary); }
.daypicker__item input { position: absolute; opacity: 0; pointer-events: none; }
.daypicker__item.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.daypicker__item:focus-within { outline: 3px solid var(--button); outline-offset: 2px; }
.daypicker__day { font-weight: 700; font-size: .9rem; }
.daypicker__date { font-size: .82rem; color: var(--ink-soft); }
.daypicker__free { font-size: .72rem; color: var(--open); font-weight: 650; }

/* Zeitfenster */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.slot { position: relative; cursor: pointer; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot span {
  display: block; padding: .7rem .4rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 650; font-size: .95rem; font-variant-numeric: tabular-nums;
  min-height: 44px; display: grid; place-items: center;
}
.slot:hover span { border-color: var(--primary); }
.slot input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.slot input:focus-visible + span { outline: 3px solid var(--button); outline-offset: 2px; }
.slot.is-taken { cursor: not-allowed; }
.slot.is-taken span { background: var(--steel); color: #9aa5b1; text-decoration: line-through; border-style: dashed; }

/* Bestaetigung nach der Buchung.
   Der Termin ist die Information, auf die es ankommt – er steht deshalb
   gross und abgesetzt, nicht als Fliesstext zwischen den Absaetzen. */
.booking-done {
  margin: 0 auto;
  max-width: 40rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--open) 35%, var(--line));
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.booking-done__check {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--open) 15%, var(--surface));
  color: var(--open);
}
.booking-done__check svg { width: 30px; height: 30px; }
.booking-done h2 {
  margin: 0 0 .4rem;
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  letter-spacing: -.025em;
}
.booking-done__sub { color: var(--ink-soft); margin: 0 0 1.6rem; }

/* Die Terminangabe selbst. */
.booking-confirm {
  display: grid;
  gap: .25rem;
  margin: 0 0 1.5rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--line));
  background: var(--steel);
}
.booking-confirm__when {
  font-size: clamp(1.2rem, 3.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.booking-confirm__what { color: var(--ink-soft); font-size: .97rem; }

/* Hinweis darunter: ruhig, aber klar abgesetzt. */
.booking-done__note {
  margin: 0 0 1.6rem;
  padding: .95rem 1.1rem;
  border-left: 3px solid var(--secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--secondary) 7%, var(--surface));
  font-size: .96rem;
  line-height: 1.65;
  text-align: left;
  color: var(--ink);
}
.booking-done__note strong { color: var(--primary); }
.booking-done .btn-row { justify-content: center; }

@media (max-width: 560px) {
  .booking-done { text-align: left; }
  .booking-done__check { margin-inline: 0; }
  .booking-done .btn-row { justify-content: flex-start; }
  .booking-done .btn { width: 100%; }
}

/* Zweispaltiges Formularraster fuer die Terminbuchung */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-field--wide { grid-column: 1 / -1; }
.form-field select {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.form-field .opt { font-weight: 500; color: var(--ink-soft); }
.card--pad { padding: 1.6rem; }
.note { font-size: .85rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- Preise -- */

.pricetable { width: 100%; border-collapse: collapse; margin-top: 1.4rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pricetable th, .pricetable td { padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; }
.pricetable tr:last-child th, .pricetable tr:last-child td { border-bottom: 0; }
.pricetable th { font-weight: 650; font-size: .98rem; }
.pricetable th a { color: var(--ink); text-decoration: none; }
.pricetable th a:hover { color: var(--primary); text-decoration: underline; }
.pricetable td { text-align: right; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.pricetable__note { display: block; font-size: .84rem; font-weight: 400; color: var(--ink-soft); margin-top: .15rem; }
@media (max-width: 480px) {
  .pricetable th, .pricetable td { padding: .8rem .85rem; }
  .pricetable th { font-size: .93rem; }
}

/* Kompakte Leistungsauswahl auf der Startseite: nur die Bezeichnung,
   als anklickbares Feld. Mindesthoehe 52px, damit sie auf dem Smartphone
   sicher mit dem Finger zu treffen sind. */
.service-chips {
  display: grid; gap: .7rem; margin-top: 1.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .service-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .service-chips { grid-template-columns: repeat(3, 1fr); } }

.service-chip {
  display: flex; align-items: center; gap: .75rem;
  min-height: 52px; padding: .85rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: .97rem; line-height: 1.3;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.service-chip__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  /* Ersatzwert zuerst: aeltere Browser kennen color-mix nicht. */
  background: rgba(18, 58, 90, .10);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}
.service-chip__name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.service-chip__arrow { flex: none; color: var(--primary); opacity: .55; font-size: 1.05rem; }

.service-chip--link:hover,
.service-chip--link:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(18, 58, 90, .12);
}
.service-chip--link:hover .service-chip__arrow { opacity: 1; }

/* ------------------------------------------------ freie Inhaltsbloecke -- */
/* Text und Bild nebeneinander. Unter 900px immer untereinander, damit der
   Text nicht in eine schmale Spalte gequetscht wird. */
.block-split { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 900px) {
  /* Oben ausrichten statt mittig: bei ungleich langen Spalten sieht
     zentriert schnell verrutscht aus. */
  .block-split { grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: start; }
  /* Bild links: Reihenfolge im Quelltext bleibt Text zuerst, damit
     Screenreader und Suchmaschinen die Ueberschrift zuerst lesen. */
  .block-split--flip .block-split__text { order: 2; }
  .block-split--flip .block-split__media { order: 1; }
}
.block-split__media { display: grid; gap: .8rem; }
.block-split__media img,
.block-split__media picture { width: 100%; height: auto; border-radius: var(--radius); display: block; }

.block-gallery { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .block-gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.block-gallery img,
.block-gallery picture { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.block-gallery picture img { border-radius: inherit; }

/* Inhaltsboxen sollen als Kasten erkennbar sein – gleiche Anmutung wie der
   Oeffnungszeiten-Kasten. Innen mehr Luft, damit laengere Texte nicht
   gedraengt wirken. */
/* Inhaltsboxen als aufklappbare Abschnitte.
   Der vollstaendige Text steht im HTML und wird nur optisch verborgen –
   Suchmaschinen lesen ihn unveraendert. Ohne JavaScript funktioniert das
   Auf- und Zuklappen ebenfalls, weil <details> reines HTML ist. */
.block-list { display: grid; gap: .7rem; }

.block-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.block-item[open] {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  box-shadow: var(--shadow);
}

/* Kopfzeile: die ganze Zeile ist anklickbar. */
.block-item__head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.1rem clamp(1.1rem, 3vw, 1.8rem);
}
.block-item__head::-webkit-details-marker { display: none; }
.block-item__head:hover h2 { color: var(--primary); }
.block-item__head h2 {
  margin: 0;
  font-size: clamp(1.08rem, 2.4vw, 1.32rem);
  letter-spacing: -.015em;
  line-height: 1.3;
  transition: color .15s ease;
}

/* Plus- und Minuszeichen aus zwei Strichen: skaliert sauber mit und
   braucht keine Schriftzeichen, die je nach System anders aussehen. */
.block-item__sign {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.block-item__sign::before,
.block-item__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink-soft);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: opacity .18s ease, transform .18s ease;
}
.block-item__sign::before { width: 16px; height: 2px; }
.block-item__sign::after  { width: 2px; height: 16px; }
.block-item[open] .block-item__sign::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
.block-item[open] .block-item__sign::before { background: var(--primary); }

.block-item__body {
  padding: 0 clamp(1.1rem, 3vw, 1.8rem) clamp(1.3rem, 3vw, 1.9rem);
}
/* Boxen ohne Ueberschrift haben keine Kopfzeile und brauchen oben Luft. */
.block-item--plain .block-item__body { padding-top: clamp(1.3rem, 3vw, 1.9rem); }

.block-item__body .prose {
  max-width: 72ch;
  font-size: 1.03rem;
  line-height: 1.72;
  color: var(--ink);
}
.block-item__body .prose p { margin-bottom: 1.05em; }
.block-item__body .prose p:last-child { margin-bottom: 0; }

/* Die Boxentexte bestehen groesstenteils aus Aufzaehlungen. Eigene Punkte
   wirken ruhiger als die Standardmarker. */
.block-item__body .prose ul { list-style: none; padding-left: 0; margin: 1em 0; }
.block-item__body .prose ul > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
}
.block-item__body .prose ul > li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--secondary-text, var(--secondary));
}

/* Bilder: gleiches Format, sonst entsteht eine unruhige Treppe. */
.block-item__body .block-gallery { margin-top: 1.4rem; }
.block-item__body .block-gallery img,
.block-item__body .block-gallery picture img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Abschnitt insgesamt etwas enger als ein normaler Seitenabschnitt:
   die Boxen sind eine zusammenhaengende Strecke, kein eigenes Kapitel. */
.section--blocks { padding-block: clamp(1.8rem, 4vw, 3rem); }

/* Das frühere Einklappen langer Boxentexte auf dem Smartphone entfällt:
   Die Boxen sind jetzt insgesamt aufklappbar, ein zweiter Klappmechanismus
   darin waere verwirrend. Die Regeln bleiben als leerer Platzhalter nicht
   stehen – main.js darf .box-collapse weiterhin suchen und findet nichts. */


/* ============================================================
   PREISLISTE
   Der Preistext im Adminbereich darf HTML mit Klassen enthalten
   (siehe templates/prices.php). style-Attribute werden gefiltert –
   das Aussehen kommt deshalb von hier.
   ============================================================ */

.pricetext { max-width: none; }

/* Hinweisstreifen ueber der Liste: Gueltigkeit, Steuer, Bundesland. */
.pricetext .price-facts {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 2rem; padding: 0; list-style: none;
}
.pricetext .price-facts li {
  margin: 0; padding: .45rem .85rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  font-size: .84rem; font-weight: 650; color: var(--ink-soft);
}
.pricetext .price-facts li::before { content: none; }

/* Hervorgehobener Einstiegspreis. */
.pricetext .price-lead {
  display: grid; gap: .3rem;
  margin: 0 0 2.4rem; padding: 1.6rem 1.8rem;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--button-strong);
  background: var(--surface); box-shadow: var(--shadow);
}
.pricetext .price-lead .price-lead__label {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--secondary-text, var(--secondary));
}
.pricetext .price-lead .price-lead__value {
  font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05; color: var(--primary);
}
.pricetext .price-lead .price-lead__note { color: var(--ink-soft); font-size: .95rem; }

/* Abschnittsueberschriften mit Paragraphenangabe darueber. */
.pricetext h2 {
  margin: 2.8rem 0 .3rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -.025em;
}
.pricetext h2:first-child { margin-top: 0; }
.pricetext .price-law {
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--secondary-text, var(--secondary));
}
.pricetext h3 { margin: 1.8rem 0 .8rem; font-size: clamp(1.05rem, 2.2vw, 1.2rem); }

/* Preistabellen. */
.pricetext table {
  width: 100%; margin: 0 0 1.6rem;
  border-collapse: collapse; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
}
.pricetext caption {
  caption-side: top; padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--line); background: var(--steel);
  font-weight: 700; text-align: left; color: var(--primary);
}
.pricetext thead th {
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  background: var(--steel);
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); text-align: left;
}
.pricetext thead th:last-child,
.pricetext tbody td:last-child { text-align: right; }
.pricetext tbody td {
  padding: .85rem 1.1rem; border-top: 1px solid var(--line); vertical-align: middle;
}
.pricetext tbody tr:first-child td { border-top: 0; }
.pricetext tbody tr:hover { background: color-mix(in srgb, var(--steel) 55%, transparent); }
.pricetext tbody td:first-child { font-weight: 650; }
.pricetext tbody td:last-child {
  font-size: 1.12rem; font-weight: 700; color: var(--primary);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Auf schmalen Bildschirmen wird jede Zeile zu einem Block. */
@media (max-width: 620px) {
  .pricetext thead { position: absolute; left: -9999px; }
  .pricetext tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem;
    padding: .9rem 1.1rem; border-top: 1px solid var(--line);
  }
  .pricetext tbody td { padding: 0; border: 0; }
  .pricetext tbody td:first-child { grid-column: 1; grid-row: 1; }
  .pricetext tbody td:nth-child(2) {
    grid-column: 1; grid-row: 2; color: var(--ink-soft); font-size: .9rem;
  }
  .pricetext tbody td:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Hinweiskasten. */
.pricetext .price-note {
  margin: 0 0 1.8rem; padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--secondary) 7%, var(--surface));
  font-size: .96rem; line-height: 1.65;
}
.pricetext .price-note strong { color: var(--primary); }

/* Dunkler Kasten fuer die wichtigen Hinweise am Ende. */
.pricetext .price-important {
  margin: 2.6rem 0 0; padding: 1.8rem 2rem;
  border-radius: var(--radius-lg); background: var(--primary); color: #fff;
}
.pricetext .price-important h2,
.pricetext .price-important h3 { color: #fff; }
.pricetext .price-important h2 { margin-top: 0; font-size: 1.4rem; }
.pricetext .price-important h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.pricetext .price-important p { color: rgba(255,255,255,.82); }
.pricetext .price-important a { color: #fff; }

/* Fortschrittslinie an Kopfbereich und Schnellaktionsleiste.
   Sie zeigt, wie weit die Seite gelesen ist, und trennt die klebenden
   Leisten sichtbar vom Inhalt dazwischen. */
.scroll-line {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--line);
  overflow: hidden;
  pointer-events: none;
}
/* An der unteren Leiste sitzt sie oben statt unten. */
.scroll-line--top { top: -1px; bottom: auto; }
.scroll-line span {
  display: block; height: 100%; width: 0;
  background: var(--primary);
  transform-origin: left center;
  transition: width .08s linear;
}
/* Kein position-Wert noetig: Der Kopfbereich ist bereits "sticky", die
   Schnellaktionsleiste "fixed". Beide sind damit Bezugspunkt fuer die
   absolut gesetzte Linie. Ein eigener Wert wuerde die untere Leiste aus
   ihrer Verankerung loesen. */