/* ==========================================================================
   AUTOHAUS WIEGMANN — Autohaus mit angeschlossener Meisterwerkstatt
   Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt,
   Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler.

   Herkunft
   --------
   Uebersetzt aus dem Claude-Design-Entwurf "Autohaus Wiegmann.dc.html".
   Der Entwurf lag als Leinwand-Format vor (x-dc, sc-for, style-hover) und
   konnte so in keinem Browser laufen. Uebernommen sind Aufbau, Farben und
   Text; neu gebaut sind Raster, Handy-Ansicht, Hover als echtes CSS und
   die selbst gehosteten Schriften.

   Abgrenzung zu WERKHOF 21
   ------------------------
   Beide sind KFZ. WERKHOF ist die reine Werkstatt: Annahme, Reparatur,
   Termin. Diese hier ist der Handel mit Werkstatt dahinter — der
   Fahrzeugbestand fuehrt, die Werkstatt stuetzt. Deshalb liegt der
   Fahrzeugblock direkt hinter den Leistungen und nicht am Ende.

   Farblogik
   ---------
   Marineblau #0f2d52 fuehrt: Ueberschriften, Baender, Fuss, Zahlen.
   Rot #c8102e ist ausschliesslich Handlungssignal: Termin, Anfragen,
   Absenden, Wortmarke, Akzentstrich. Es steht nie als Text auf Marineblau
   (2,4:1) und nie im Fliesstext.

   Gemessene Kontraste (relative Luminanz nach WCAG 2.1):
     --ink    #4a4f54 auf Weiss        8,3:1
     --muted  #6b7178 auf Weiss        4,9:1   auf --wash 4,6:1
     --navy   #0f2d52 auf Weiss       13,8:1
     Weiss    auf --navy              13,8:1
     Weiss    auf --red                5,9:1
     --on-navy-soft #a9bacd auf navy   7,0:1
     --rose   #f08c9b auf navy         5,9:1

   Der Entwurf hatte fuer Kleintext #8b9199 vorgesehen. Das sind 3,2:1 auf
   Weiss und faellt damit unter die Lesbarkeitsgrenze — die Farbe ist
   deshalb auf #6b7178 abgedunkelt. Das ist die einzige Farbabweichung
   gegenueber dem Entwurf.

   Fokusring
   ---------
   Keine eigene Signalfarbe, sondern zwei Ringe: --focus (Marineblau auf
   hell, Weiss auf dunkel) plus ein gegenlaeufiger Halo. So ist der Ring
   auf Papier, auf Marineblau und auf Fotos gleich gut sichtbar, ohne dass
   eine dritte Farbe erfunden werden muss.

   Aufbau der Datei
   ----------------
   Mobil zuerst. Alle Media Queries sind min-width; die schmale Ansicht ist
   der Ausgangszustand, breitere Fenster bekommen Spalten dazu.
   ========================================================================== */

/* ── Schriften (selbst gehostet, latin-Teilmenge, 84 KB) ───────────────────
   Der Entwurf ruft Montserrat und Open Sans vom Google-CDN ab. Beide liegen
   im Projekt bereits als variable Datei vor (halm), deshalb werden sie von
   hier ausgeliefert. Budget der Basis-Stufe: 120 KB.                      */

@font-face {
  font-family: "Montserrat";
  src: url("../vendor/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 400 800;          /* Datei traegt wght 100–900 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../vendor/fonts/open-sans-var.woff2") format("woff2");
  font-weight: 400 700;          /* Datei traegt wght 300–800 */
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --font-title: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Leitfarbe */
  --navy: #0f2d52;
  --navy-2: #1a4172;
  --navy-deep: #0a2140;

  /* Handlungssignal */
  --red: #c8102e;
  --red-dark: #a10d25;
  --rose: #f08c9b;      /* nur auf Marineblau, nie auf hell */

  /* Helle Flaechen */
  --paper: #ffffff;
  --wash: #f4f6f8;
  --wash-2: #e9edf1;

  /* Linien */
  --line: #e3e6ea;
  --line-strong: #ccd3da;

  /* Text auf hell */
  --ink: #4a4f54;
  --muted: #6b7178;

  /* Text auf Marineblau */
  --on-navy: #eef3f9;
  --on-navy-soft: #a9bacd;

  /* Fokus */
  --focus: #0f2d52;
  --focus-halo: #ffffff;

  --wrap: 1170px;
  --pad: clamp(1rem, 4vw, 1.75rem);
  --notice: 26px;    /* Hoehe der Demo-Hinweisleiste, fix im Markup */
  --quickbar: 58px;  /* Hoehe der Handy-Leiste am unteren Bildrand */
  --shadow: 0 1px 2px rgb(15 45 82 / .05), 0 12px 30px -22px rgb(15 45 82 / .55);
}

/* Auf dunklen Flaechen kehren sich Fokusring und Halo um. */
.is-dark {
  --focus: #ffffff;
  --focus-halo: #0a2140;
}

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

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

html {
  scroll-behavior: smooth;
  /* Die Hinweisleiste liegt fest ueber der Seite: Sprungziele duerfen nicht
     darunter rutschen. Der Header kommt ab 1000px dazu. */
  scroll-padding-top: calc(var(--notice) + 1rem);
}

body {
  margin: 0;
  padding-top: var(--notice);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 6.2vw, 3.25rem); line-height: 1.13; }
h2 { font-size: clamp(1.45rem, 4.4vw, 2.25rem); }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); text-decoration: underline; }

::selection { background: var(--red); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-family: var(--font-title);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 .9rem;
}

.rule {
  width: 60px;
  height: 3px;
  background: var(--red);
  border: 0;
  margin: 0 0 1.4rem;
}

.rule--center { margin-inline: auto; }

.lead { font-size: 1.05rem; }

.icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: -.15em; }

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

.skip {
  position: absolute;
  left: 50%;
  top: calc(var(--notice) + .5rem);
  transform: translate(-50%, -250%);
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1.2rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .85rem;
}

.skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; }

/* Ein Fokusring fuer alles, was bedienbar ist. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 2px;
}

/* ── Einblenden: genau ein Effekt pro Abschnitt ────────────────────────────
   Der verborgene Ausgangszustand haengt an .has-reveal, und diese Klasse
   setzt js/reveal.js. Ohne Javascript sowie bei prefers-reduced-motion ist
   nie etwas verborgen; ein haengendes opacity:0 kann es nicht geben.
   Hero und <h1> tragen bewusst kein [data-reveal] (LCP).                  */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.has-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 380ms ease-out, transform 380ms ease-out;
}

/* ── Knoepfe ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 1.05rem 2rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn:hover { text-decoration: none; }

.btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--red); border-color: var(--red); color: #fff; }

.btn--ghost { background: transparent; border-color: rgb(255 255 255 / .65); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }

.btn--outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }

.btn--sm { padding: .8rem 1.3rem; font-size: .74rem; }

/* ── Kopfzeile mit Adresse und Zeiten ───────────────────────────────────── */

.topbar {
  background: var(--navy);
  color: var(--on-navy-soft);
  font-size: .8rem;
  line-height: 1.5;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem 1.4rem;
  padding-block: .55rem;
}

.topbar__set { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; }
.topbar__sep { color: #5d7c9e; }
.topbar a { color: var(--on-navy-soft); }
.topbar a:hover { color: #fff; }
.topbar__tel { color: #fff; font-weight: 700; }

/* Auf dem Handy traegt die Kopfzeile nur die Anschrift; Telefon und Mail
   stehen ohnehin in der Leiste am unteren Bildrand. */
.topbar__contact { display: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 6px rgb(0 0 0 / .06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
  padding-block: .7rem;
}

.brand { display: flex; align-items: center; gap: .75rem; }
.brand:hover { text-decoration: none; }

.brand__mark {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.04em;
}

.brand__name {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.brand__sub {
  display: block;
  font-size: .65rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .15rem;
}

.nav { display: none; }

.header__cta { display: none; }

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(180deg, rgb(15 45 82 / .90) 0%, rgb(15 45 82 / .78) 100%),
    var(--ew-kopfbild, url("../img/halle.jpg"));
  background-size: cover;
  background-position: center;
  color: #fff;
}

.hero__inner { padding-block: clamp(3.5rem, 12vw, 7rem); }
.hero__body { max-width: 660px; }

.hero__badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-title);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  margin-bottom: 1.5rem;
}

.hero h1 { color: #fff; margin-bottom: 1.1rem; }

.hero__sub {
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.75;
  color: #dbe3ec;
  max-width: 560px;
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ── Zahlenleiste ───────────────────────────────────────────────────────── */

.facts {
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}

.fact {
  background: var(--wash);
  padding: 1.4rem 1rem;
  text-align: center;
}

.fact__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--navy);
  line-height: 1.1;
}

.fact__txt {
  display: block;
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .35rem;
}

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

.section { padding-block: clamp(3rem, 9vw, 5.5rem); }
.section--wash { background: var(--wash); border-block: 1px solid var(--line); }

.section__head { max-width: 720px; margin-bottom: 2.5rem; }
.section__head--center { text-align: center; margin-inline: auto; }
.section__head p:last-child { margin-bottom: 0; }

/* ── Leistungskarten ────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2rem 1.75rem;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.card:hover {
  box-shadow: 0 12px 30px rgb(15 45 82 / .12);
  transform: translateY(-4px);
}

.card__no {
  width: 52px; height: 52px;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
}

.card__no .icon { width: 24px; height: 24px; }

.card__meta {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.9;
  margin: 0;
}

/* ── Fahrzeuge ──────────────────────────────────────────────────────────── */

/* Der ganze Block ist ein fieldset — die vier Radios muessen Geschwister von
   Leiste UND Raster bleiben, weil der Geschwister-Selektor den Zustand traegt.
   Deshalb hier die Vorgabewerte des Browsers zuruecknehmen. */
.fleet {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fleet__radio { position: absolute; opacity: 0; pointer-events: none; }

.fleet__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Die Filterleiste ist reines CSS: Radios steuern ueber :checked, welche
   Karten sichtbar sind. Ohne Javascript funktioniert sie deshalb genauso,
   und es entsteht kein Scroll-Skript, das die Basis-Stufe verletzen wuerde. */
.filter { display: flex; flex-wrap: wrap; gap: 2px; background: var(--line); padding: 2px; }

.filter label {
  font-family: var(--font-title);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .8rem 1.1rem;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.filter label:hover { background: var(--wash-2); }

#f-alle:checked      ~ .fleet__head .filter label[for="f-alle"],
#f-gebraucht:checked ~ .fleet__head .filter label[for="f-gebraucht"],
#f-jahres:checked    ~ .fleet__head .filter label[for="f-jahres"],
#f-elektro:checked   ~ .fleet__head .filter label[for="f-elektro"] {
  background: var(--navy);
  color: #fff;
}

/* Der Ring gehoert sichtbar an die Beschriftung, nicht an das versteckte
   Eingabefeld — sonst tastet sich niemand durch die Leiste. */
#f-alle:focus-visible      ~ .fleet__head .filter label[for="f-alle"],
#f-gebraucht:focus-visible ~ .fleet__head .filter label[for="f-gebraucht"],
#f-jahres:focus-visible    ~ .fleet__head .filter label[for="f-jahres"],
#f-elektro:focus-visible   ~ .fleet__head .filter label[for="f-elektro"] {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.fleet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.car { background: var(--paper); border: 1px solid var(--line); }

.car__media { position: relative; height: 190px; }

/* Feste Kachelhoehe, das Foto fuellt sie. Ohne object-fit zieht das globale
   height: auto das Bild aus der Kachel heraus. */
.car__media img { width: 100%; height: 100%; object-fit: cover; }

.car__badge {
  position: absolute;
  top: 0; left: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-title);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .85rem;
  z-index: 2;
}

.car__body { padding: 1.35rem 1.5rem 1.5rem; }
.car__model { margin: 0 0 .2rem; font-size: 1.02rem; }
.car__trim { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; }

.car__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .9rem;
  font-size: .83rem;
  line-height: 1.6;
  border-block: 1px solid var(--wash-2);
  padding-block: .85rem;
  margin: 0 0 1rem;
}

.car__specs dt { color: var(--muted); }
.car__specs dd { margin: 0; }

.car__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}

.car__price {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--red);
  line-height: 1;
}

.car__vat { display: block; font-size: .68rem; color: var(--muted); margin-top: .35rem; }

/* CSS-Filter: alles an, dann je Auswahl abschalten. */
#f-gebraucht:checked ~ .fleet__grid .car:not(.car--gebraucht),
#f-jahres:checked   ~ .fleet__grid .car:not(.car--jahres),
#f-elektro:checked  ~ .fleet__grid .car:not(.car--elektro) { display: none; }

.fleet__more { text-align: center; margin-top: 2.5rem; }
.fleet__note { font-size: .85rem; color: var(--muted); margin: 1rem 0 0; }

/* ── Platzhalter fuer noch fehlende Fotos ──────────────────────────────────
   Bewusst als Platzhalter erkennbar: gestreifte Flaeche, Symbol, Beschriftung.
   Ein graues Rechteck sieht aus wie ein Fehler, das hier sieht aus wie eine
   Stelle, die noch gefuellt wird.                                          */

.ph {
  position: relative;
  display: grid;
  place-content: center;
  gap: .5rem;
  justify-items: center;
  height: 100%;
  color: #7d8794;
  background-color: var(--wash-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(15 45 82 / .045) 0 10px,
    transparent 10px 20px
  );
  text-align: center;
  padding: 1rem;
}

.ph .icon { width: 34px; height: 34px; opacity: .8; }

.ph__txt {
  font-family: var(--font-title);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ── Werkstatt ──────────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr; }

.split__media {
  min-height: 260px;
  background-image: url("../img/annahme.jpg");
  background-size: cover;
  background-position: center;
}

.split__body { padding: clamp(2.5rem, 8vw, 5rem) var(--pad); }
.split__inner { max-width: 640px; }

.checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.checks li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; }
.checks .icon { width: 18px; height: 18px; color: var(--red); margin-top: .35rem; }

.notebox {
  background: var(--wash);
  border-left: 4px solid var(--red);
  padding: 1.3rem 1.5rem;
}

.notebox__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  margin: 0 0 .35rem;
}

.notebox p { font-size: .9rem; margin: 0; }

/* ── Kundenstimme ───────────────────────────────────────────────────────── */

/* Standbild, kein background-attachment: fixed — Parallaxe ist der
   Premium-Stufe vorbehalten (docs/VORLAGEN-STUFEN.md). */
.quote {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgb(15 45 82 / .93), rgb(15 45 82 / .93)),
    url("../img/diagnose.jpg");
  background-size: cover;
  background-position: center;
  padding-block: clamp(3.5rem, 10vw, 6rem);
  text-align: center;
  color: #fff;
}

.quote .eyebrow { color: var(--rose); }

.quote blockquote {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  line-height: 1.6;
  font-style: italic;
  color: #fff;
  margin: 0 0 1.4rem;
  max-width: 900px;
  margin-inline: auto;
}

.quote figcaption {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}

/* ── Ueber uns ──────────────────────────────────────────────────────────── */

.about { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }

.about__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: 1.75rem;
}

.about__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy);
}

.about__lbl { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }

.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.collage__img {
  height: 165px;
  background-color: var(--wash-2);
  background-size: cover;
  background-position: center;
}

.collage__img--1 { background-image: url("../img/bremsen.jpg"); }
.collage__img--2 { background-image: url("../img/klima.jpg"); margin-top: 1.5rem; }
.collage__img--3 { background-image: url("../img/reifen.jpg"); }

.collage__tile {
  height: 165px;
  margin-top: 1.5rem;
  background: var(--navy);
  color: var(--on-navy-soft);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.collage__year {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1;
}

.collage__txt { font-size: .8rem; line-height: 1.6; margin-top: .6rem; }

/* ── Team ───────────────────────────────────────────────────────────────── */

.team { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }

.person { background: var(--paper); border: 1px solid var(--line); }
.person__media { height: 230px; }
.person__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.person__body { padding: 1.25rem 1.35rem 1.4rem; }
.person__name { font-family: var(--font-title); font-weight: 700; font-size: 1rem; color: var(--navy); }
.person__role { font-size: .82rem; color: var(--red); margin: .2rem 0 .7rem; }
.person__contact { font-size: .82rem; line-height: 1.8; color: var(--muted); margin: 0; }
.person__contact a { color: var(--muted); }
.person__contact a:hover { color: var(--red); }

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

.contact { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

.contact__address { font-size: 1rem; line-height: 1.9; margin-bottom: 1.5rem; }
.contact__address strong { color: var(--navy); }

.hours { border-top: 1px solid var(--line); padding-top: 1.35rem; margin-bottom: 1.5rem; }

.hours__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .82rem;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 .8rem;
}

.hours__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.4rem;
  font-size: .92rem;
  margin: 0;
}

.hours__list dt { color: var(--muted); }
.hours__list dd { margin: 0; }

/* Gezeichnete Umgebungskarte statt eines Kartendienstes (V12), uebernommen
   aus der Vorlage lindenhof und auf Marineblau und Rot umgefaerbt.
   Gemessene Kontraste:
     --map-ink    #33506f auf --map-bg     7,4:1   auf --map-block  6,6:1
     --map-accent #c8102e auf --map-bg     5,2:1   auf --map-block  4,6:1
     --map-bg     #edf1f6 auf --map-ink   7,4:1  (Schrift im gefuellten Kaestchen)
   Ecken bleiben scharf: die ganze Vorlage kennt keinen Radius.          */
.map {
  --map-bg: #edf1f6;
  --map-block: #dde5ee;
  --map-road: #ffffff;
  --map-frame: #ccd3da;
  --map-ink: #33506f;
  --map-accent: #c8102e;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 320 / 220;
  border: 1px solid var(--line);
}

.map__note { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: .7rem 0 0; }

.form {
  background: var(--wash);
  border: 1px solid var(--line);
  padding: 1.75rem 1.5rem;
}

.form h3 { margin-bottom: .4rem; }
.form__intro { font-size: .9rem; color: var(--muted); margin-bottom: 1.5rem; }

.field { margin-bottom: 1rem; }
.field--pair { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
.field--pair .field { margin-bottom: 0; }

.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: .8rem .9rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
}

.field textarea { resize: vertical; min-height: 120px; }

.consent {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 1.35rem;
}

.consent input { margin-top: .3rem; flex: 0 0 auto; }

.form__req { font-size: .72rem; color: var(--muted); margin: .9rem 0 0; }

/* ── Fuss ───────────────────────────────────────────────────────────────── */

.footer {
  background: var(--navy);
  color: var(--on-navy-soft);
  padding-top: clamp(2.5rem, 8vw, 3.75rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.footer h2 {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}

.footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer__brandname { font-family: var(--font-title); font-weight: 800; font-size: 1rem; color: #fff; text-transform: uppercase; }
.footer p, .footer address { font-size: .88rem; line-height: 1.8; font-style: normal; }

.footer__list { display: flex; flex-direction: column; gap: .6rem; font-size: .88rem; list-style: none; padding: 0; margin: 0; }
.footer a { color: var(--on-navy-soft); }
.footer a:hover { color: #fff; }
.footer__tel { color: #fff; font-weight: 700; }

.footer__legal { border-top: 1px solid rgb(255 255 255 / .12); }

.footer__legalinner {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-block: 1.25rem;
  font-size: .8rem;
}

.footer__links { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }

/* ── Handy-Leiste am unteren Bildrand ───────────────────────────────────── */

.quickbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--quickbar);
  background: var(--navy);
  border-top: 1px solid var(--navy-2);
}

.quickbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.quickbar a:hover { text-decoration: none; background: var(--navy-2); }
.quickbar a + a { background: var(--red); }
.quickbar a + a:hover { background: var(--red-dark); }

/* Platz, damit die Leiste nichts verdeckt. */
body { padding-bottom: var(--quickbar); }

/* ══ Ab 700px: zwei Spalten ══════════════════════════════════════════════ */

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .fleet__grid { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: 1fr 1fr; }
  .facts__grid { grid-template-columns: repeat(4, 1fr); }
  .field--pair { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .topbar__contact { display: flex; }

  .fleet__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .fleet__head .section__head { margin-bottom: 0; }

  .footer__legalinner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ══ Ab 1000px: volle Ansicht ════════════════════════════════════════════ */

@media (min-width: 1000px) {
  html { scroll-padding-top: calc(var(--notice) + 86px + 1rem); }

  /* Der Header klebt erst hier oben — auf dem Handy kostet er zu viel Hoehe,
     dort uebernimmt die Leiste am unteren Bildrand seine Aufgabe. */
  .header {
    position: sticky;
    top: var(--notice);
    z-index: 60;
  }

  .header__inner { min-height: 86px; }
  .brand__mark { width: 46px; height: 46px; }
  .brand__name { font-size: 1.25rem; }
  .brand__sub { font-size: .68rem; }

  .nav { display: flex; align-items: center; gap: .1rem; }

  .nav a {
    font-family: var(--font-title);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    padding: .65rem .75rem;
  }

  .nav a:hover { color: var(--red); text-decoration: none; }

  .header__cta { display: inline-flex; }

  .hero { min-height: 620px; }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 1.85rem; }
  .fleet__grid { grid-template-columns: repeat(3, 1fr); gap: 1.85rem; }
  .team { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }

  .split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split__media { min-height: 520px; }
  .split__body { padding-inline: clamp(2.5rem, 5vw, 3.75rem); }

  .about { grid-template-columns: 1.05fr 1fr; gap: 4.4rem; }
  .contact { grid-template-columns: 1fr 1.1fr; gap: 3.75rem; }

  .form { padding: 2.6rem 2.75rem; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.75rem; }

  /* Auf dem Rechner braucht es die Leiste am unteren Bildrand nicht. */
  .quickbar { display: none; }
  body { padding-bottom: 0; }
}

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

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

  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .card:hover { transform: none; }
}

/* ── Druck ──────────────────────────────────────────────────────────────── */

@media print {
  #ew-demo-notice, .quickbar, .header, .hero__actions { display: none; }
  body { padding: 0; color: #000; }
  .hero { background: none; color: #000; min-height: 0; }
  .hero h1, .hero__sub { color: #000; }
}

/* ── Rechtliches ───────────────────────────────────────────────────────────
   Sprungziel fuer Impressum, Datenschutz und Verwandtes. Die Fusszeile
   verweist darauf; ohne dieses Ziel waeren das Verweise ins Leere (V12). */

.legalnote {
  max-width: 1170px;
  margin-inline: auto;
  padding: 1.75rem clamp(1rem, 4vw, 1.75rem) 2.5rem;
  font-size: .85rem;
  line-height: 1.7;
  color: #5b6570;
  background: #ffffff;
}

.legalnote h2 {
  font-size: 1rem;
  margin: 0 0 .35rem;
  color: #22252a;
}

.legalnote p { margin: 0; max-width: 62ch; }