/* ==========================================================================
   Fahrschule Selim - Stylesheet der oeffentlichen Seite.

   Aufbau:
   1. Design-Tokens        - nur fuer neu geschriebenes CSS, siehe Hinweis
   2. Basis                - uebernommen aus dem <helmet> des Prototyps
   3. Keyframes            - unveraendert
   4. Bewegung reduzieren  - neu
   5. Hover- und Fokus-Klassen - Ersatz fuer style-hover/style-focus
   6. Bildflaechen         - Ersatz fuer den 10x wiederholten Inline-Block
   7. Formular             - Klassenwahl ohne JavaScript
   ========================================================================== */

/* --- 1. Design-Tokens ----------------------------------------------------
   Uebernommen aus _ds/modernist-.../styles.css. Bewusst NICHT auf die
   bestehenden Inline-Styles angewandt: das Designsystem war von keiner
   Prototyp-Seite je verlinkt, und es nachtraeglich einzuhaengen wuerde
   jedes Element ohne Inline-Override verschieben. Die Tokens gelten fuer
   das hier neu geschriebene CSS und schaffen einen Weg fuer eine spaetere,
   abschnittsweise Migration.
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;

  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-500: #ff563c;
  --color-accent-100: #fff2ef;
  --color-accent-300: #ffc4b8;

  --color-neutral-300: #d7d3d3;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-ink-soft: #bab6b6;
  --color-placeholder: #e2e0e0;

  /* Schrift auf rotem oder dunklem Grund. Fehlte bisher als Token,
     obwohl #fff siebenmal im Markup stand. */
  --color-on-accent: #fff;

  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --radius-md: 0px;

  /* Breite des Inhaltsbandes und sein seitlicher Abstand - an zwoelf
     Stellen identisch. */
  --wrap-max: 1560px;
  --wrap-pad: clamp(16px, 4vw, 32px);

  /* Staerke der durchgehenden Trennlinien. */
  --rule-width: 2px;
}

/* --- 2. Basis (aus dem <helmet> des Prototyps) --------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #f3f2f2;
  color: #201e1d;
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: #ae1800; text-decoration: none; }
a:hover { color: #ec3013; }

/* Das Browser-Stylesheet setzt fuer [hidden] nur display:none ohne
   Gewicht. Das Mobilmenue traegt seine Anzeigeart inzwischen ueber die
   Klasse .mobile-menu - bei gleicher Spezifitaet entschiede sonst die
   Reihenfolge, und die Klasse steht weiter unten. Deshalb bleibt hier
   !important: es ist die Ausnahme, die [hidden] verlaesslich macht. */
[hidden] { display: none !important; }

::selection { background: #ffc4b8; }
:focus-visible { outline: 2px solid #ec3013; outline-offset: 2px; }

/* Sichtbar erst bei Tastaturfokus - im Prototyp gab es das nicht. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #201e1d;
  color: #f3f2f2;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 16px 20px;
}
.skip-link:focus {
  left: 0;
  color: #f3f2f2;
}

/* --- 3. Keyframes -------------------------------------------------------
   selimRise war im Prototyp definiert, aber nirgends benutzt - entfaellt.
   -------------------------------------------------------------------------- */
@keyframes selimDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-80px,0,0); }
}
@keyframes selimMarquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@keyframes selimSweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes selimBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: .15; }
}

/* Der Umschaltpunkt steht jetzt bei der Kopfzeile, auf Klassen statt auf
   data-Attributen und ohne !important - siehe Abschnitt 12. */

/* --- 4. Bewegung reduzieren ---------------------------------------------
   Der Prototyp laesst drei Endlos-Animationen dauerhaft laufen. Wer in
   seinem System reduzierte Bewegung eingestellt hat, bekommt sie hier
   abgeschaltet - Layout und Farben bleiben unveraendert.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Das Laufband haelt sichtbar an, statt auf halber Strecke zu springen. */
  [data-marquee] { animation: none !important; transform: none !important; }
}

/* --- 5. Hover- und Fokus-Zustaende ---------------------------------------
   ENTFAELLT SEIT P11.

   Hier standen elf Klassen mit Namen wie .hv-cta, die aus den
   style-hover-Attributen der dc-runtime stammten. Jede ihrer
   Deklarationen trug !important, weil sie sonst gegen das Inline-style
   des Elements verloren haette.

   Seit die Grundzustaende in Klassen stehen, sind daraus gewoehnliche
   :hover-Regeln geworden, die bei ihrer jeweiligen Komponente stehen -
   .btn--primary:hover, .nav-link:hover, .link-on-dark:hover und so
   weiter. Siehe die Abschnitte 10 und 12.
   -------------------------------------------------------------------------- */

/* --- 6. Bildflaechen -----------------------------------------------------
   Im Prototyp stand dieser Block zehnmal wortgleich als Inline-Style. Da
   die Flaeche kuenftig vom image-Partial erzeugt wird, gehoert sie in eine
   Klasse - sonst wuerde PHP Style-Strings zusammenbauen.

   Das Rautenmuster ist der Platzhalter. Liegt ein Bild vor, setzt das
   Partial background-image per Inline-Style und ueberschreibt es damit.
   -------------------------------------------------------------------------- */
.photo {
  /* Als Variable, damit das Titelbild seinen zusaetzlichen Kontrast
     behaelt und die farbige Fassung trotzdem an einer Stelle
     umgeschaltet wird. Der Grundzustand rechnet weiterhin auf exakt
     grayscale(1) - die bestehende Seite aendert sich dadurch nicht. */
  --photo-filter: grayscale(1);

  background-color: #eae9e9;
  background-size: cover;
  background-position: center;
  filter: var(--photo-filter);
  display: flex;
  align-items: flex-end;
}

.photo--placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    #e2e0e0 0 12px,
    #eae9e9 12px 24px
  );
}

/*
 * Die sechs Verwendungen. Frueher stand die Groesse als $box-Parameter im
 * Aufruf und landete inline im Markup; jetzt sagt der Aufrufer nur noch,
 * um welche Art Bild es sich handelt.
 *
 * Der Innenabstand gilt der Platzhalter-Beschriftung und weicht je
 * Verwendung ab - deshalb steht er hier und nicht in .photo.
 */
.photo--hero {
  flex: 1;
  min-height: clamp(300px, 46vh, 560px);
  padding: 24px;
  /* Das Titelbild hat zusaetzlich leichten Kontrast. */
  --photo-filter: grayscale(1) contrast(1.05);
}
.photo--room     { margin-top: 36px; height: 280px; padding: 18px; }
.photo--portrait { height: 340px; }
.photo--spot     { margin-top: 32px; height: 240px; padding: 16px; }
.photo--map      { flex: 1; min-height: 360px; padding: 16px; }

/*
 * Der Fuhrpark faellt aus der Reihe: feste Hoehe, aber ein Seitenverhaeltnis.
 *
 * Grund sind die Bilder selbst. Fahrzeugfotos sind quer - die der
 * Fahrschule liegen zwischen 4:3 und 2,3:1, die Haelfte davon genau bei
 * 16:9. Der Rahmen war mit 300px Hoehe bei rund 335px Spaltenbreite
 * nahezu quadratisch, und weil .photo mit background-size:cover
 * formatfuellend zuschneidet, verschwanden links und rechts bis zu 50%
 * des Bildes. Vom Golf blieb ein Streifen Tuer uebrig.
 *
 * 3:2 ist der Mittelweg zwischen den vorkommenden Formaten: die
 * Motorraeder verlieren noch rund ein Sechstel der Breite statt gut ein
 * Drittel, die breiten Aufnahmen bleiben als Fahrzeug erkennbar.
 *
 * Als Verhaeltnis statt als Hoehe, damit der Zuschnitt in jeder
 * Spaltenbreite derselbe bleibt - bei einer Spalte auf dem Telefon
 * genauso wie bei vieren am Schreibtisch.
 *
 * 3:2 ist nur noch die Vorgabe. Im Fuhrpark setzt jede Gruppe
 * --card-ratio nach ihrem breitesten Foto (siehe fahrzeuge.php), damit
 * die Golf-Panoramen nicht mehr Front und Heck verlieren.
 */
.photo--card {
  aspect-ratio: var(--card-ratio, 3 / 2);
  padding: 16px;
}

/*
 * Farbig. Der Kontrast des Titelbilds bleibt erhalten - er ist eine
 * eigene Behandlung, nicht Teil der Entsaettigung.
 *
 * Die zweite Regel wiegt (0,2,0) und schlaegt .photo--hero damit
 * unabhaengig von der Reihenfolge im Stylesheet.
 */
.photo--color { --photo-filter: none; }
.photo--color.photo--hero { --photo-filter: contrast(1.05); }

.photo__caption {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: #605d5d;
  background: #f3f2f2;
  padding: 6px 10px;
}
.photo__caption--hero { letter-spacing: .1em; }

/* --- 7. Formular ---------------------------------------------------------
   Die Klassenwahl war im Prototyp eine Reihe von Schaltflaechen mit
   React-State. Hier sind es echte Radiobuttons: die Auswahl funktioniert
   damit ohne JavaScript und wird beim Absenden mitgeschickt.
   -------------------------------------------------------------------------- */
.class-option {
  border: 2px solid #201e1d;
  background: transparent;
  color: #201e1d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
}
.class-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.class-option:hover { border-color: #ec3013; }
.class-option:has(input:checked),
.class-option.is-selected {
  border-color: #ec3013;
  background: #ec3013;
  color: #fff;
}
.class-option:has(input:focus-visible) {
  outline: 2px solid #ec3013;
  outline-offset: 2px;
}

/* Fehlerzustaende des Formulars */
.field-error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #ae1800;
}

/* Honigtopf gegen Spam-Roboter: fuer Menschen unsichtbar, aber nicht per
   display:none - manche Roboter ignorieren ausgeblendete Felder. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   8. Layout-Grundformen
   Ab hier beginnt die Trennung von CSS und Markup. Die Klassen ersetzen
   Inline-Styles, die im Markup mehrfach wortgleich vorkamen.
   ========================================================================== */

/* Das Inhaltsband - zwoelfmal identisch im Markup. */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* Die Kopfzeile hat einen eigenen, engeren Seitenabstand. */
.wrap--tight { padding: 10px clamp(14px, 3vw, 24px); }

/* Fusszeile: eigener Abstand oben und unten. */
.wrap--footer { padding: clamp(44px, 6vw, 64px) var(--wrap-pad) 40px; }
.wrap--footer-bar { padding: 20px var(--wrap-pad); }

/* Die durchgehenden 2px-Linien. Dreissig Fundstellen, drei Farben. */
.rule-b { border-bottom: var(--rule-width) solid var(--color-text); }
.rule-t { border-top: var(--rule-width) solid var(--color-text); }
.rule-b--soft { border-bottom: var(--rule-width) solid var(--color-neutral-300); }
.rule-t--soft { border-top: var(--rule-width) solid var(--color-neutral-300); }
.rule-b--dark { border-bottom: var(--rule-width) solid var(--color-neutral-800); }
.rule-t--dark { border-top: var(--rule-width) solid var(--color-neutral-800); }
.rule-t--dim  { border-top: var(--rule-width) solid var(--color-neutral-700); }

/* ==========================================================================
   9. Typografie
   ========================================================================== */

/* Die rote Abschnittsnummer ueber jeder Ueberschrift. */
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
}
/* Auf dunklem Grund - der Kalender. */
.kicker--light { color: var(--color-accent-500); }
/* Im Hero, wo die Zeile nur den Ort nennt. */
.kicker--muted { color: var(--color-neutral-700); margin-bottom: 0; }
/* Auf dem roten MPU-Block: keine Farbe, nur zurueckgenommen. */
.kicker--on-accent { color: inherit; opacity: .85; margin-bottom: 20px; }

/*
 * Die grossen Ueberschriften.
 *
 * Acht Groessenstufen, weil das Markup acht verschiedene clamp()-Werte
 * fuehrt. Ein Teil davon sieht nach Fluechtigkeit aus - siehe die Notiz
 * am Ende dieser Datei. Sie werden hier bewusst 1:1 uebernommen, damit
 * dieser Umbau nichts am Aussehen aendert.
 */
.display {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: clamp(26px, 5.2vw, 62px);
  line-height: .97;
  letter-spacing: -0.04em;
}
.display--hero    { font-size: clamp(34px, 6.4vw, 112px); line-height: .92; letter-spacing: -0.045em; }
.display--mpu     { font-size: clamp(26px, 4.4vw, 86px);  line-height: .94; letter-spacing: -0.045em; }
.display--error   { font-size: clamp(32px, 6vw, 86px);    line-height: .94; letter-spacing: -0.045em; }
.display--classes { font-size: clamp(27px, 5.6vw, 68px);  line-height: .97; }
.display--legal   { font-size: clamp(30px, 5.6vw, 68px);  line-height: .97; }
.display--signup  { font-size: clamp(26px, 5vw, 58px);    line-height: .98; }
.display--process { font-size: clamp(26px, 5vw, 58px);    line-height: 1; }

/* Fliesstext in den Sektionen. */
.copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}
.copy--lead   { font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.copy--sm     { font-size: 15px; line-height: 1.6; }
.copy--on-dark { color: var(--color-ink-soft); font-size: 15px; line-height: 1.6; }
.copy--on-accent { color: inherit; font-size: 18px; line-height: 1.55; }

/* Die Wortmarke, dreimal in verschiedenen Groessen. */
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 22px;
  height: 22px;
  background: var(--color-accent);
  display: block;
}
.brand__name {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* ==========================================================================
   10. Schaltflaechen
   Elf Fundstellen, drei Familien. Die Hover-Zustaende stehen hier direkt
   bei der Grundform, statt wie bisher in einer eigenen .hv-*-Klasse.
   ========================================================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 18px 26px;
  cursor: pointer;
  font-family: inherit;
}

/* Rot gefuellt - die Hauptaktion. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-600);
  color: var(--color-on-accent);
}

/* Umrandet auf hellem Grund, kehrt sich beim Ueberfahren um. */
.btn--outline {
  border: var(--rule-width) solid var(--color-text);
  color: var(--color-text);
  background: transparent;
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Umrandet auf dunklem Grund. */
.btn--ghost-dark {
  border: var(--rule-width) solid var(--color-neutral-700);
  color: var(--color-bg);
  background: transparent;
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-500);
}

/* Dunkel gefuellt auf rotem Grund - nur im MPU-Block. */
.btn--on-accent {
  background: var(--color-text);
  color: var(--color-on-accent);
  border: none;
}
.btn--on-accent:hover,
.btn--on-accent:focus-visible {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Groessenabweichungen einzelner Fundstellen. */
/* Ein Textknopf, kein Flex-Container - deshalb die Flex-Eigenschaften
   der Sammelklasse zuruecknehmen statt sie mitzuschleppen. */
.btn--sm     { font-size: 12px; letter-spacing: .16em; padding: 12px 18px;
               display: inline-block; gap: normal; justify-content: normal;
               align-items: normal; background: transparent; }
/* Die Kopfzeilen-Schaltflaeche verteilt nicht, sie reiht nur auf -
   deshalb justify-content zuruecknehmen statt ueberschreiben. */
.btn--header { font-size: 13px; padding: 14px 20px; gap: 10px; justify-content: normal; white-space: nowrap; }
.btn--menu   { font-size: 15px; padding: 20px 22px; }
/* Absenden: volle Breite, kein gap - das Original hat keins. */
.btn--block  { width: 100%; padding: 20px 26px; margin-top: 28px; gap: normal; }
.btn--w260   { min-width: 260px; }
.btn--w240   { min-width: 240px; }
.btn--w220   { min-width: 220px; }
.btn--w320   { max-width: 320px; }

/* Reihe aus zwei Schaltflaechen, im Hero und auf der Fehlerseite. */
.btn-row {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ==========================================================================
   11. Kachelraster
   Die Karten liegen auf einem grauen Grund, den 2px Luecke durchscheinen
   lassen - so entstehen die Haarlinien zwischen den Kacheln.
   ========================================================================== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tile-min, 280px)), 1fr));
  gap: 2px;
  background: var(--color-neutral-300);
}
.tile { background: var(--color-bg); padding: 32px 24px; }
.tile--flush { padding: 0 0 24px; }
.tile--person { padding: 28px 24px; }
.tile--location { padding: 32px clamp(20px, 3vw, 36px); }

/* Zweispalter ohne Haarlinien. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 400px)), 1fr));
}

/*
 * Zwei Arten von Sektionskopf. Bewusst getrennt statt einer Klasse mit
 * Ausnahme: wer .section-head nimmt und display:block nachschiebt, laesst
 * align-items, gap und flex-wrap im berechneten Stil stehen. Ohne
 * sichtbare Wirkung, aber es beschreibt das Element falsch.
 */

/* Zweispaltig: Ueberschrift links, Erlaeuterung rechts. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(48px, 6vw, 80px) 0 36px;
}
.section-head--wide { padding-bottom: 40px; }

/* Einspaltig: nur Kicker und Ueberschrift untereinander. */
.section-intro { padding: clamp(48px, 6vw, 80px) 0 36px; }

/* ==========================================================================
   12. Sektionen
   Ab hier steht je Sektion ein Block mit ihren eigenen Regeln. Was nur an
   einer Stelle vorkommt, gehoert hierher statt in eine Komponentenklasse -
   139 der 158 Style-Werte im Markup waren Einzelfaelle.
   ========================================================================== */

/* --- Zahlenband ---------------------------------------------------------- */
.stats { background: var(--color-bg); }
.stats__grid { --tile-min: 200px; }
.stats__value {
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stats__suffix { color: var(--color-accent); }
.stats__label {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  overflow-wrap: break-word;
}

/* --- Laufband ------------------------------------------------------------ */
.marquee {
  background: var(--color-text);
  color: var(--color-bg);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: selimMarquee 26s linear infinite;
  padding: 14px 0;
}
.marquee__group {
  display: flex;
  gap: 48px;
  padding-right: 48px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__sep { color: var(--color-accent); }

/* --- Ausbildungsklassen (01) --------------------------------------------- */
.classes__sub { max-width: 420px; }
.classes__grid { --tile-min: 230px; }
.classes__code {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.classes__kicker {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.classes__body {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Fuhrpark (04) ------------------------------------------------------- */
.fleet__grid { --tile-min: 280px; }

/*
 * Beim Ueberfahren wird das Bild groesser - und vollstaendig gezeigt.
 *
 * Zwei Dinge auf einmal, und das zweite ist das wichtigere:
 *
 * 1. background-size: contain statt cover. Im Ruhezustand fuellt das
 *    Bild seine Flaeche formatfuellend aus und wird dabei beschnitten -
 *    beim Golf-Panorama faellt knapp ein Drittel der Breite weg. Beim
 *    Ueberfahren ist stattdessen das ganze Bild zu sehen, in voller
 *    Breite. no-repeat ist dann Pflicht: .photo setzt kein
 *    background-repeat, und was nicht mehr formatfuellend ist, kachelt
 *    sonst.
 *
 * 2. 130 Prozent - deutlich groesser, nicht nur eine Spur.
 *
 * Der Grund bleibt durchsichtig. Bei contain bleibt oben und unten (bei
 * hochkanten Bildern links und rechts) ein Streifen der Flaeche ohne
 * Bild. Deckend gefuellt legte der sich als grauer Balken ueber den
 * Fahrzeugnamen und die Nachbarkacheln; durchsichtig schwebt allein das
 * Foto, und was daneben liegt, bleibt lesbar.
 *
 * transform-origin: center 65% ist der Wert, der das Ganze
 * zusammenhaelt. Unter dem Bild stehen nur 22px bis zum Fahrzeugnamen,
 * darueber 26px leerer Kachelrand. Waechst das Bild um seine Mitte,
 * deckt es bei 130 Prozent seinen eigenen Namen zu. Mit dem Drehpunkt
 * unterhalb der Mitte geht der groessere Teil des Zuwachses nach oben,
 * wo Platz ist - unten bleibt der Name frei.
 *
 * transform statt Breite und Hoehe: transform loest kein neues Layout
 * aus. Waechst dagegen die Kachel selbst, rueckt das ganze Raster nach
 * und die Seite zuckt unter dem Mauszeiger.
 *
 * z-index bleibt unter der Kopfzeile (80 in der Staffel am Ende dieser
 * Datei), damit sich nie ein Bild ueber sie schiebt. Ohne ihn verdeckte
 * der Hintergrund der Nachbarkachel das herausragende Bild - spaetere
 * Geschwister werden zuletzt gezeichnet.
 *
 * .fleet klemmt waagerecht ab: in der aeusseren Spalte tritt das
 * vergroesserte Bild weiter heraus, als der Seitenabstand hergibt, und
 * zoege sonst einen waagerechten Rollbalken nach sich. "clip" und nicht
 * "hidden", weil hidden auch die senkrechte Achse zum Rollbereich
 * machte.
 *
 * Nur fuer Zeigergeraete und erst ab 880px: auf dem Telefon bleibt ein
 * :hover nach dem Antippen haengen, und in einem schmalen Fenster wird
 * die Kachel so breit, dass vom Bild mehr abgeklemmt wuerde als zu sehen
 * bliebe. Die Dauer schaltet bei Bedarf der Abschnitt "Bewegung
 * reduzieren" weiter oben ab, der alle Elemente erfasst.
 *
 * Nicht fuer den Platzhalter: dort gibt es kein Bild zu vergroessern,
 * sondern ein Rautenmuster und eine Beschriftung - mitwachsende Schrift
 * sieht nach Versehen aus.
 */
.fleet { overflow-x: clip; }

@media (hover: hover) and (min-width: 881px) {
  .photo--card:not(.photo--placeholder) {
    position: relative;
    transform-origin: center 65%;
    transition: transform .35s ease;
  }
  .photo--card:not(.photo--placeholder):hover {
    transform: scale(1.3);
    z-index: 10;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
  }
}

.fleet__text { padding: 22px 24px 0; }
.fleet__title { font-size: 22px; font-weight: 800; }
.fleet__body {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Team (05) ----------------------------------------------------------- */
.team__grid { --tile-min: 280px; }
.team__name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 20px;
}
.team__role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 8px;
}
.team__phone {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  color: var(--color-neutral-800);
}

/* --- MPU-Block ----------------------------------------------------------- */
.mpu {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.mpu__inner {
  --split-min: 470px;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: 360px;
}
.mpu__col { padding: clamp(44px, 6vw, 72px) 0; }
.mpu__body { max-width: 460px; }
/* Weicht als einzige Schaltflaeche im Innenabstand ab: 24px statt 26px. */
.mpu__cta { margin-top: 32px; padding: 18px 24px; }

/* --- Ablauf (02) --------------------------------------------------------- */
.process__inner {
  --split-min: 400px;
  gap: 0 clamp(24px, 4vw, 48px);
}
.process__intro { padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 80px); }
.process__sub { margin: 24px 0 0; max-width: 420px; line-height: 1.6; }
.process__steps {
  padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
}
.process__step {
  display: flex;
  gap: 28px;
  padding: 26px 0;
}
.process__num {
  font-size: 14px;
  font-weight: 900;
  color: var(--color-accent);
  min-width: 44px;
}
.process__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.process__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Theoriekalender (03) ------------------------------------------------ */
.calendar {
  background: var(--color-text);
  color: var(--color-bg);
}
.calendar__note { max-width: 400px; }
.calendar__list { padding-bottom: 80px; }
.calendar__empty {
  margin: 0;
  padding: 24px 0;
  font-size: 16px;
  color: var(--color-ink-soft);
}
.calendar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
  padding: 20px 0;
}
.calendar__row:hover { background: var(--color-neutral-900); }
.calendar__date {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  flex: 0 0 130px;
}
.calendar__time {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent-500);
  flex: 0 0 70px;
}
.calendar__topic {
  font-size: 17px;
  font-weight: 600;
  flex: 1 1 240px;
  min-width: 0;
}
.calendar__place {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  flex: 0 0 auto;
}

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(243, 242, 242, .92);
  backdrop-filter: blur(10px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 72px;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  flex: 0 0 auto;
}
.site-header__tag {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  padding-left: 10px;
  border-left: var(--rule-width) solid var(--color-neutral-300);
}
.site-header__nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex: 1 1 620px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-link {
  color: var(--color-text);
  padding: 6px 0;
  border-bottom: var(--rule-width) solid transparent;
  flex: 0 0 auto;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.site-header__burger {
  display: none;
  margin-left: auto;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  background: var(--color-text);
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.site-header__burger:hover,
.site-header__burger:focus-visible { background: var(--color-accent); }
.site-header__burger-bar {
  width: 22px;
  height: 2px;
  background: var(--color-bg);
  display: block;
}
.site-header__cta { flex: 0 0 auto; }
.site-header__arrow { font-size: 15px; }

/*
 * Der Umschaltpunkt. Die Regeln zielen jetzt auf Klassen statt auf
 * data-Attribute - die bleiben dem JavaScript vorbehalten. Und sie
 * brauchen kein !important mehr, weil die Grundzustaende nicht mehr
 * inline stehen.
 */
@media (max-width: 880px) {
  .site-header__nav,
  .site-header__cta { display: none; }
  .site-header__burger { display: flex; }
}

/* --- Fusszeile ----------------------------------------------------------- */
.site-footer {
  background: var(--color-text);
  color: var(--color-bg);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 36px;
}
.site-footer__brand-name { font-size: 22px; }
.site-footer__claim {
  margin: 18px 0 0;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.site-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 6px;
}
.site-footer__copy {
  font-size: 12px;
  color: var(--color-neutral-600);
  letter-spacing: .08em;
}

/* Links auf dunklem Grund - Fusszeile und Mobilmenue. */
.link-on-dark { color: var(--color-bg); }
.link-on-dark:hover,
.link-on-dark:focus-visible { color: var(--color-accent-500); }

/* --- Mobilmenue ---------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 14px clamp(16px, 4vw, 32px) 32px;
  overflow-y: auto;
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
}
.mobile-menu__mark { width: 20px; height: 20px; }
.mobile-menu__name { font-size: 19px; }
.mobile-menu__close {
  width: 52px;
  height: 52px;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  gap: normal;
  justify-content: center;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: 20px 0;
}
.mobile-menu__cta { margin-top: 28px; }
.mobile-menu__phone { margin-top: 16px; }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }

/* Zwei Rasterbaender hinter dem Inhalt. Das senkrechte driftet. */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__grid--drift {
  opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(32,30,29,.12) 0 1px, transparent 1px 80px);
  animation: selimDrift 6s linear infinite;
}
.hero__grid--static {
  background-image: repeating-linear-gradient(180deg, rgba(32,30,29,.06) 0 1px, transparent 1px 80px);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 clamp(24px, 4vw, 56px);
}
.hero__copy {
  flex: 2.5 1 620px;
  min-width: 0;
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.hero__pulse {
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  display: block;
  animation: selimBlink 1.4s steps(1, end) infinite;
}
.hero__sub {
  margin: 32px 0 0;
  max-width: 560px;
  color: var(--color-neutral-800);
}
.hero__media {
  position: relative;
  flex: 1 1 330px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Bezugsrahmen fuer den Stoerer. Uebernimmt das flex:1, das vorher am
   Foto selbst hing - die Hoehe der Spalte bleibt damit unveraendert. */
.hero__figure {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}

.hero__badge {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hero__badge-text,
.hero__badge-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__badge-link { color: var(--color-accent-700); }

/* Der rote Balken unter der Ueberschrift. */
.sweep {
  height: 6px;
  background: var(--color-accent);
  width: 100%;
}
.sweep--hero {
  max-width: 520px;
  margin: 36px 0 0;
  animation: selimSweep 4.5s ease-in-out infinite;
}
/* Auf der Fehlerseite ohne Animation und schmaler. */
.sweep--error { max-width: 340px; margin: 32px 0 0; }

/* --- Fehlerseite --------------------------------------------------------- */
.error-page__inner { padding: clamp(64px, 9vw, 140px) 0; max-width: 640px; }
.error-page__text {
  margin: 32px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Rechtstexte --------------------------------------------------------- */
.legal-page__head { padding: clamp(48px, 6vw, 80px) 0 36px; }
.legal-body {
  padding: 40px 0 clamp(56px, 7vw, 96px);
  max-width: 720px;
}

/* --- Rahmen -------------------------------------------------------------- */
.page {
  min-height: 100vh;
  background: var(--color-bg);
  overflow-x: hidden;
}

/*
 * Die Elemente, die render_markdown() aus dem Rechtstext erzeugt.
 * Standen bis P11 als eigener <style>-Block in legal.php - jetzt hier,
 * wo das uebrige CSS auch steht.
 */
.legal-body h2 {
  margin: 40px 0 14px;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.legal-body p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-800);
}
.legal-body ul { margin: 0 0 18px; padding-left: 22px; }
.legal-body li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-800);
  margin-bottom: 8px;
}
.legal-body strong { color: var(--color-text); }

/* --- Preise (06) ---------------------------------------------------------
   Die einzige Stelle, an der PHP frueher Style-Strings zusammengebaut hat
   (leere Zelle, hervorgehobene Spalte, letzte Spalte). Daraus sind
   Zustandsklassen geworden.
   -------------------------------------------------------------------------- */
.pricing { background: var(--color-surface); }
.pricing__note { max-width: 420px; }

.pricing__scroll {
  overflow-x: auto;
  background: var(--color-bg);
}
.pricing__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 900px;
}
.pricing__th-label {
  text-align: left;
  padding: 16px 18px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  font-weight: 700;
}
.pricing__th {
  text-align: right;
  padding: 16px 14px;
  font-weight: 900;
  font-size: 16px;
}
/* padding:16px 18px im Original - beide Seiten, nicht nur rechts.
   Ein 4px-Unterschied links verschiebt die automatische
   Spaltenverteilung der gesamten Tabelle. */
.pricing__th--last { padding: 16px 18px; }
.pricing__th--highlight { color: var(--color-accent); }

.pricing__row:hover { background: var(--color-accent-100); }

.pricing__row-label {
  text-align: left;
  padding: 14px 18px;
  font-weight: 700;
}
.pricing__cell {
  padding: 14px;
  text-align: right;
}
.pricing__cell--last { padding: 14px 18px; }
.pricing__cell--empty { color: var(--color-neutral-500); }
.pricing__cell--highlight { font-weight: 700; }

.pricing__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
  padding: 28px 0 clamp(48px, 6vw, 80px);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-neutral-700);
}
.pricing__marker { color: var(--color-text); }

/* --- Standorte (07) ------------------------------------------------------ */
.locations__grid { --tile-min: 380px; }
.locations__city {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.locations__address {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  font-style: normal;
}
.locations__facts {
  margin-top: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  font-size: 16px;
}
.locations__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  padding-top: 4px;
}
.locations__map-col { display: flex; flex-direction: column; }
.locations__note {
  margin-top: 24px;
  padding-top: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-800);
  max-width: 420px;
}

/* --- Anmeldung (08) ------------------------------------------------------ */
.signup__inner {
  --split-min: 360px;
  gap: 0 clamp(24px, 4vw, 48px);
}
.signup__intro { padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 80px); }
.signup__sub { margin: 24px 0 0; max-width: 400px; line-height: 1.6; }
.signup__direct {
  margin-top: 36px;
  padding-top: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-800);
}
.signup__form-col { padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 80px); }

/* Dankeschoen nach dem Absenden. */
.signup__thanks {
  border: var(--rule-width) solid var(--color-accent);
  padding: 40px;
  background: var(--color-accent-100);
}
.signup__thanks-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.signup__thanks-text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}
.signup__again { margin-top: 24px; }

.signup__alert {
  margin: 0 0 20px;
  border: var(--rule-width) solid var(--color-accent-700);
  background: var(--color-accent-100);
  padding: 16px;
  font-size: 15px;
  color: var(--color-accent-700);
  font-weight: 700;
}

.signup__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 20px;
}

/* Feld und Beschriftung. Die beiden Werte standen bis P11 als
   PHP-Variablen im Partial und wurden elfmal ausgegeben. */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field--spaced { margin-top: 28px; }
.field__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.input {
  border: var(--rule-width) solid var(--color-text);
  background: var(--color-bg);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text);
}
.input:focus {
  border-color: var(--color-accent);
  outline: none;
}
.input--area { resize: vertical; }

/* Steht bewusst NACH .input: beide haben dieselbe Spezifitaet, also
   entscheidet die Reihenfolge - und damit braucht es kein !important. */
[aria-invalid="true"] { border-color: var(--color-accent-700); }

/* Die Klassenwahl. */
.signup__classes { margin: 28px 0 0; padding: 0; border: 0; }
.signup__legend { margin-bottom: 12px; padding: 0; }
.signup__class-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signup__consent {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--color-neutral-700);
}

/* ==========================================================================
   Anhang: uneinheitliche Werte aus dem Prototyp

   Beim Umbau in P11 aufgefallen und BEWUSST 1:1 uebernommen, damit dieser
   Umbau nichts am Aussehen aendert. Sie zu glaetten waere eine eigene
   Entscheidung mit sichtbarer Wirkung.

   1. Ueberschriften: acht clamp()-Stufen statt drei oder vier.
      .display--classes hat clamp(27px,...), sonst ueberall 26px.
      .display--signup hat line-height .98, .display--process hat 1,
      alle uebrigen .97. Vermutlich Tippfehler beim Bauen des Prototyps.

   2. Fliesstext: fuenfzehn Kombinationen aus font-size 15/16/17/18/19px
      und line-height 1.5/1.55/1.6/1.65/1.7 fuer denselben Zweck.
      Zusammengefasst in .copy und vier Varianten, aber die Streuung
      selbst ist geblieben.

   3. Schaltflaechen: der Innenabstand ist fast ueberall 18px 26px -
      ausser im MPU-Block, wo er 24px betraegt (.mpu__cta).

   Wer das vereinheitlichen will: die Werte in den genannten Klassen
   angleichen und den Fingerabdruck-Vergleich aus P11 laufen lassen. Er
   zeigt dann genau, welche Elemente sich bewegen.
   ========================================================================== */

/* --- Hinweis (Urlaub, kurzfristige Schliessung) ---------------------------
   Zwei Formen desselben Inhalts. Das Band steht im Fluss und ist immer
   da, sobald der Hinweis aktiv ist; das Modal legt allein app.js
   darueber. Faellt das Skript aus, bleibt das Band - die Seite kann
   sich also nie selbst aussperren.
   -------------------------------------------------------------------------- */

.notice-band {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-bottom: var(--rule-width) solid var(--color-text);
}

/* Der Text steht mittig, die Schaltflaeche rechts aussen - auf einer
   Linie mit der Schaltflaeche der Kopfzeile darueber.

   Drei Spalten statt flex, weil nur das wirklich mittig setzt: die
   beiden 1fr-Spalten aussen sind immer gleich breit, die mittlere liegt
   damit zwangslaeufig in der Mitte des Bandes. Flex zentriert dagegen
   die Gruppe aus Text UND Schaltflaeche - der Text rutscht dann um
   deren halbe Breite nach links, hier gut hundert Pixel.

   Nur oben und unten gepolstert, nicht seitlich: den Seitenabstand
   liefert bereits .wrap--tight, und zwar denselben wie der Kopfzeile.
   Die kurze Schreibweise "padding: 14px 0" stand hier vorher und setzte
   ihn unbeabsichtigt auf null - der Hinweis klebte dann als einziger
   Abschnitt der Seite am linken Rand. */
.notice-band__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* max-width, weil mittig gesetzter Text ueber die volle Bandbreite nicht
   mehr zu lesen waere - das Auge findet den Anfang der naechsten Zeile
   nicht wieder. min-width:0 laesst den Textblock unter seine inhaltliche
   Mindestbreite schrumpfen; ohne das sprengt eine lange Adresse die
   Zeile. */
.notice-band__text {
  grid-column: 2;
  min-width: 0;
  max-width: 70ch;
  text-align: center;
  overflow-wrap: break-word;
}

.notice-band__title {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}

.notice-band__body { font-size: 15px; line-height: 1.5; }
.notice-band__body p { margin: 4px 0 0; }
.notice-band__body p:first-child { margin-top: 2px; }
.notice-band__body a { color: var(--color-on-accent); text-decoration: underline; }

/* .btn--sm ist durchsichtig - auf dem roten Band braucht sie eigene
   Farben, sonst steht dunkler Text auf dunklem Rot. */
.notice-band__more {
  grid-column: 3;
  justify-self: end;
  border: var(--rule-width) solid var(--color-on-accent);
  color: var(--color-on-accent);
}
.notice-band__more:hover {
  background: var(--color-on-accent);
  color: var(--color-accent);
}

/* Derselbe Umschaltpunkt wie in der Kopfzeile. Das ist kein Zufall,
   sondern der Grund: dort verschwindet ab hier die Schaltflaeche rechts
   und der Burger tritt an ihre Stelle. Das Band hat damit nichts mehr,
   woran es sich rechts ausrichten koennte - und drei Spalten passten
   ohnehin nicht mehr nebeneinander. Also untereinander, beides mittig. */
@media (max-width: 880px) {
  .notice-band__inner { grid-template-columns: 1fr; }
  .notice-band__text,
  .notice-band__more {
    grid-column: 1;
    justify-self: center;
  }
}

/* --- Das Modal --- */

.notice-modal {
  position: fixed;
  inset: 0;
  /* Kopfzeile 80, Mobilmenue 120, hier 140, Sprunglink 200. */
  z-index: 140;
  background: rgba(32, 30, 29, .72);
  padding: clamp(16px, 4vw, 40px);

  /* Spalten-Flexbox mit margin:auto am Kind.
     flex-direction: column ist hier nicht Geschmack, sondern der Kern:
     nur so liegt die senkrechte Achse auf der HAUPTachse, und dort
     loest ein auto-Rand bei Platzmangel zu null auf - die Karte wird
     oben buendig und bleibt vollstaendig scrollbar. In der
     voreingestellten Zeilenrichtung waere es ein Rand auf der
     QUERachse; der laeuft nach beiden Seiten ueber und schneidet den
     Anfang eines langen Textes unerreichbar ab. Nachgemessen bei
     320 x 568. */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.notice-modal__card {
  margin: auto;
  width: min(100%, 560px);
  background: var(--color-bg);
  border: var(--rule-width) solid var(--color-text);
  padding: clamp(24px, 5vw, 40px);
  animation: noticeIn .22s ease-out;
}

.notice-modal__title {
  margin: 0 0 16px;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

.notice-modal__body { font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
.notice-modal__body p { margin: 0 0 12px; }
.notice-modal__body p:last-child { margin-bottom: 0; }
.notice-modal__body ul { margin: 0 0 12px; padding-left: 20px; }
.notice-modal__close { margin-top: 28px; }

@keyframes noticeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Stoerer im Titelbild -------------------------------------------------
   Die Vorlage war eine gruene Ellipse mit Verlauf und Schlagschatten.
   Uebernommen ist davon die Aussage und die leichte Drehung; alles
   Uebrige folgt der Seite: rechtwinklig, flach, Akzentrot, Versalien,
   2px-Rahmen wie jede andere Kante hier auch.

   Er liegt ueber dem Titelbild, damit er ohne Scrollen zu sehen ist.
   .hero__media ist bereits position:relative - der Bezugsrahmen stand
   also schon.
   -------------------------------------------------------------------------- */
.promo {
  position: absolute;

  /* Unten links, nicht oben rechts.
     Auf Fotos von Menschen liegt der Kopf fast immer im oberen Drittel;
     oben rechts verdeckte der Stoerer im Titelbild genau das Gesicht -
     auf dem Telefon vollstaendig. Der untere Bildrand ist der Bereich,
     der am ehesten Strasse, Asphalt oder Hintergrund zeigt. Die
     Bildunterschrift steht dort nicht im Weg: sie erscheint nur, wenn
     gar kein Foto hinterlegt ist. */
  bottom: clamp(14px, 2.4vw, 26px);
  left: clamp(14px, 2.4vw, 26px);
  z-index: 3;
  margin: 0;

  /* Die Drehung ist das einzige Zitat der Vorlage. Vier Grad reichen:
     genug, um aufzufallen, wenig genug, um neben lauter rechten Winkeln
     nicht wie ein Versehen zu wirken. */
  transform: rotate(-4deg);
  transform-origin: bottom left;

  background: var(--color-accent);
  color: var(--color-on-accent);
  border: var(--rule-width) solid var(--color-text);
  padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.8vw, 22px);

  /* Nie breiter als knapp zwei Drittel des Bildes - sonst verdeckt er
     das Motiv, statt es zu ergaenzen. */
  max-width: min(66%, 250px);
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

.promo__line {
  display: block;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.promo__word {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: var(--rule-width) solid var(--color-on-accent);
  font-size: clamp(17px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}

/* Ohne Schlagwort braucht es auch keine Trennlinie darueber. */
.promo__line:only-child { font-size: clamp(12px, 1.3vw, 15px); }

/* Zwei Plaetze, nie beide sichtbar.
   1080px ist die Schwelle, ab der Text und Bild nebeneinander stehen -
   nachgemessen: bei 1100px zweispaltig, bei 1050px gestapelt. */
@media (min-width: 1080px) {
  .promo--flow { display: none; }
}

@media (max-width: 1079px) {
  .promo--pin { display: none; }

  /* Im Textfluss statt ueber dem Bild: aus der absoluten Lage heraus,
     mit eigenem Abstand. Die Drehung bleibt - sie ist das Erkennbare
     an diesem Stoerer. */
  .promo--flow {
    position: static;
    transform: rotate(-3deg);
    transform-origin: center;
    margin: 32px 0 4px;
    max-width: min(100%, 320px);
    align-self: flex-start;
  }
}

/* Gruppenueberschrift im Fuhrpark ("Motorräder", "Autos").
   In der Anmutung der Abschnittsnummer, aber in Schwarz statt Rot: Rot
   ist auf dieser Seite die Farbe der Abschnittsmarken, und eine Gruppe
   innerhalb eines Abschnitts steht eine Ebene tiefer. */
.fleet__group {
  margin: 0;
  padding: 26px 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-text);
}