/* ═══ FahrDex.Website — das eine eigene Stilblatt ══════════════════════════════════════════
   P26 (11.09.2026): der Stil des Mockups (docs/design/fahrdex-startseite-mockup.html) ist
   HIER übersetzt, nicht als zweites Stilblatt danebengelegt. Bootstrap 5.3 bleibt die
   Grundlage (Raster, Hilfsklassen); was darüber hinaus zu sehen ist, sind die Klassen unten.
   Systemschrift, kein Webfont (DSGVO: keine Anfragen an fremde Server — Websites.md § 1). */

/* ── Farben ──────────────────────────────────────────────────────────────────────────────
   ⚠ DIE MARKENFARBEN BLEIBEN, UND SIE SIND ALS SCHRIFTFARBE ZU HELL — gemessen am
   11.09.2026 (WCAG 2.x, Kontrastverhältnis):
     weiss auf #E77817 (Markenorange)  2,96 : 1   — unter 4,5, und sogar unter 3,0
     weiss auf #C9650F (Auftrag § 3.4)  3,92 : 1   — die dort vorgeschlagene Stufe reicht NICHT
     weiss auf #0093DD (Markenblau)    3,38 : 1   — dasselbe für jeden blauen Knopf mit weisser Schrift
   Entscheidung (P26-Handoff § 2): die Marke bleibt die FLÄCHE, die Schrift bekommt je eine
   Stufe, die trägt:
     * Orange-Knopf: Fläche #E77817 bleibt, Schrift DUNKEL (--ink)       6,03 : 1
     * Orange als Schrift auf Weiss: --accent-text #A25410                5,51 : 1
     * Blau als Schrift / Verweis, und blaue Flächen mit weisser Schrift:
       --primary-dark #006FA8 (gab es schon, bisher nur für :hover)       5,47 : 1
   Das Blau #0093DD bleibt für Logo, Rahmen, Symbole und theme-color, das Orange für Logo
   und Knopffläche. Wer lieber weiss auf Orange will: #B05C12 (4,79 : 1, gleicher Farbton) in
   --accent und --ink in .btn-accent durch #fff ersetzen — eine Zeile je Stelle.

   ── P26b (11.09.2026, nach der Livekontrolle): der Orange-KNOPF trägt WEISSE Schrift ──
   Die Zeile „Orange-Knopf: Fläche #E77817 bleibt, Schrift DUNKEL" oben ist damit für den
   Knopf überholt — sie steht, weil eine Berichtigung nicht still gelöscht wird (C11-C).
   Entscheidung des Betreibers: der Hauptknopf („Pilotplatz anfragen", .btn-accent) bekommt
   eine eigene, dunklere Fläche --cta #B85A0A mit weisser Schrift (4,66 : 1 — über 4,5, also
   AA auch für normalen Text), :hover --cta-tief #A65108 (5,52 : 1). Das Logo-Orange #E77817
   (--accent) bleibt überall sonst: Augenbraue im dunklen Umstieg-Abschnitt, Rahmen der
   „Nein"-Kachel, Tönung der Einführungspreis-Badges.

   ── Und noch am selben Tag umgekehrt (Betreiberentscheidung 11.09.2026, zweiter Teil) ──
   Der Hauptknopf trägt jetzt doch das Logo-Orange #E77817 als Fläche, weisse Schrift bleibt.
   ⚠ DAS UNTERSCHREITET WCAG AA, UND ZWAR BEWUSST: weiss auf #E77817 misst 2,96 : 1 — unter
   4,5 (normaler Text) und auch unter 3,0 (grosser Text). Die Entscheidung ist die des
   Betreibers (Markenfarbe vor Kontrast); sie steht im P26-Handoff § 2 mit der gemessenen
   Folge für Lighthouse. :hover ist #B85A0A (4,66 : 1). Wer zurück will: --cta auf #B85A0A. */
:root {
  --primary:      #0093DD;   /* Markenblau — Flächen, Rahmen, Symbole */
  --primary-dark: #006FA8;   /* Blau als Schrift, und blaue Flächen mit weisser Schrift */
  --primary-tief: #00518A;
  --accent:       #E77817;   /* Markenorange — Knopffläche (Schrift darauf: --ink) */
  --accent-hell:  #F08A2E;   /* :hover des Orange-Knopfs, --ink darauf 7,12 : 1 */
  --accent-text:  #A25410;   /* Orange als Schrift auf hellem Grund */
  --cta:          #E77817;   /* P26b: Fläche des Hauptknopfs = Logo-Orange, weiss darauf NUR 2,96 : 1 */
  --cta-tief:     #B85A0A;   /* P26b: :hover des Hauptknopfs, weiss darauf 4,66 : 1 */
  --ink:          #0F172A;
  --mute:         #5B6B7F;   /* 5,45 : 1 auf Weiss */
  --bg-light:     #F6F9FC;
  --linie:        #E6EDF3;

  /* Frühere Namen — /Funktionen, /Preise und die Teilansichten lesen sie. */
  --accent-dark:  var(--accent-text);
  --text-main:    var(--ink);
  --text-muted:   var(--mute);

  /* Bootstrap: das Markenblau für Rahmen und Flächen, das dunklere für Verweise. */
  --bs-primary:              #0093DD;
  --bs-primary-rgb:          0, 147, 221;
  --bs-link-color:           #006FA8;
  --bs-link-color-rgb:       0, 111, 168;
  --bs-link-hover-color:     #00518A;
  --bs-link-hover-color-rgb: 0, 81, 138;
}

/* ---------- Typography ----------
   System font stack (no Google Fonts — DSGVO: keine Requests an Drittserver) */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.7;
}

h1, .h1 { font-size: 3rem; font-weight: 700; line-height: 1.15; }
h2, .h2 { font-size: 2.25rem; font-weight: 600; line-height: 1.2; }
h3, .h3 { font-weight: 600; }

.lead { font-size: 1.25rem; line-height: 1.7; }

@media (max-width: 576px) {
  h1, .h1 { font-size: 2.25rem; }
  h2, .h2 { font-size: 1.75rem; }
  .display-4 { font-size: 2.5rem; }
}

/* Anker und klebender Kopf: wohin ein Sprung landet. Ohne diese Zeile läge die Überschrift
   eines angesprungenen Abschnitts unter dem Kopf. Mit Pilotbalken ist der Kopf höher. */
html { scroll-padding-top: 5.5rem; }
html:has(.pilot-banner) { scroll-padding-top: 8.5rem; }
@media (max-width: 575.98px) {
  html:has(.pilot-banner) { scroll-padding-top: 10rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Colors / utilities ---------- */
.text-primary { color: var(--primary-dark) !important; }
.text-accent  { color: var(--accent-text) !important; }
.bg-primary   {
  background-color: var(--primary-dark) !important;
  background-image: linear-gradient(135deg, var(--primary-dark), var(--primary-tief));
}
.bg-light     { background-color: var(--bg-light) !important; }
.text-muted   { color: var(--text-muted) !important; }

a { color: var(--primary-dark); }
a:hover { color: var(--primary-tief); }

/* ---------- Buttons ----------
   Die Pillenform des Mockups gilt für jeden Knopf der Site. */
.btn { border-radius: 999px; font-weight: 600; }

.btn-primary {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-tief);
  border-color: var(--primary-tief);
}
.btn-outline-primary {
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
/* Der Hauptknopf („Pilotplatz anfragen"). Seit P26b weiss auf --cta — siehe Farben oben;
   bis dahin stand hier --accent mit --ink als Schrift und --accent-hell als :hover. */
.btn-accent {
  background-color: var(--cta);
  border-color: var(--cta);
  color: #fff;
  font-weight: 700;
}
.btn-accent:hover, .btn-accent:focus, .btn-accent:active {
  background-color: var(--cta-tief);
  border-color: var(--cta-tief);
  color: #fff;
}
/* Der helle Knopf auf blauem Grund („2 Minuten ansehen"). */
.btn-hell {
  background-color: #fff;
  border-color: #fff;
  color: var(--primary-dark);
  font-weight: 700;
}
.btn-hell:hover, .btn-hell:focus {
  background-color: #E8F5FC;
  border-color: #E8F5FC;
  color: var(--primary-tief);
}

/* ---------- Sprung zum Inhalt (W-26) ---------- */
.skip-link:focus {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: #fff;
  color: var(--primary-dark);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .2);
}
.site-main:focus { outline: none; }

/* ---------- Pilot-phase disclosure banner ---------- */
.pilot-banner {
  background-color: #FEF3C7;
  color: #78350F;
  border-bottom: 1px solid #FDE68A;
  line-height: 1.5;
}
.pilot-banner strong { font-weight: 700; }

/* ---------- Kopf: klebend, halbtransparent (P26) ---------- */
.site-header { z-index: 1030; }
.site-nav {
  background-color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--linie);
  padding-block: .6rem;
}
#mainNav {
  transition: box-shadow 0.2s ease;
}
#mainNav.navbar-scrolled {
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
}
#mainNav .nav-link {
  color: var(--mute);
  font-weight: 600;
  font-size: .95rem;
}
#mainNav .nav-link:hover,
#mainNav .nav-link:focus-visible {
  color: var(--primary-dark);
}
.navbar-brand img { display: block; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--linie);
  border-radius: 1rem;
}
.feature-icon {
  font-size: 2rem;
  color: var(--primary);
}

/* ---------- Abschnittsaugenbraue (Mockup: .k) ----------
   Orange als SCHRIFT braucht die dunklere Stufe (siehe Farben oben). */
.section-eyebrow {
  color: var(--accent-text);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  margin-bottom: .25rem;
}

/* ═══ Startseite (P26) ═══════════════════════════════════════════════════════════════════ */

/* ---------- Hero ----------
   Der Verlauf ist gegenüber dem Mockup um eine Stufe dunkler: dort begann er bei #1CB0FF,
   und weisse Schrift darauf misst 2,41 : 1. Hier beginnt er beim Markenblau. */
.hero {
  background: radial-gradient(1200px 600px at 20% -10%, #0093DD 0%, #0077B6 45%, #00457A 100%);
  color: #fff;
  padding-top: 5rem;
  overflow: hidden;
}
.hero__raster {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.5rem;
  align-items: end;
}
.hero__text { padding-bottom: 3.5rem; }
.hero__tag {
  display: inline-block;
  background: rgba(0, 40, 80, .35);
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
/* P26b: die Überschrift ist länger geworden („Die Fahrschulsoftware aus Bremen — bereit für die
   Reform 2027.") — bis dahin clamp(2.125rem, 5vw, 3.625rem) für „Die Fahrschule in einer Hand." */
.hero h1 {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 1.1rem;
  color: #fff;
}
.hero__lead {
  font-size: 1.1875rem;
  line-height: 1.55;
  max-width: 32.5rem;
  margin-bottom: 0;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.6rem 0 1rem;
}
.hero__klein {
  font-size: .875rem;
  line-height: 1.5;
  max-width: 32rem;
  margin: 0;
}
.hero__bild { margin: 0; }
.hero__bild figcaption {
  font-size: .8rem;
  text-align: right;
  margin-bottom: .5rem;
}
.hero__bild img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

/* ---------- Vertrauensstreifen ---------- */
.strip {
  background: var(--bg-light);
  border-bottom: 1px solid var(--linie);
}
.strip__liste {
  list-style: none;
  margin: 0 auto;
  padding-block: 1.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--mute);
}
.strip__liste strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

/* ---------- Video ---------- */
.video-abschnitt {
  background: #fff;
  padding-block: 5rem;
}
.video-rahmen {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
}
/* Kein festes aspect-ratio: das Seitenverhältnis kommt aus width/height am <video>, also aus
   der Datei selbst. */
.video-player {
  display: block;
  width: 100%;
  height: auto;
}
.video-stand {
  text-align: center;
  color: var(--mute);
  font-size: .875rem;
  margin: .75rem 0 0;
}
/* Die Untertitel — P26b (11.09.2026, nach der Livekontrolle): dunkle Schrift auf hellem,
   fast deckendem Kasten statt weisser Schrift mit Kontur. Die Aufnahmen zeigen überwiegend
   WEISSE Programmseiten; eine weisse Schrift mit 1-px-Kontur darauf war im Betrieb schwer zu
   lesen. #111827 auf rgba(255,255,255,.88) misst über schwarzem Bild 13,4 : 1, über weissem
   17,7 : 1.
   ⚠ font-size in PROZENT, nicht in rem: der Browser bemisst die Grundgrösse eines cue nach
   der Höhe des Videos — 85 % davon wirken im Hoch- und im
   Querformat gleich gross, eine rem-Angabe wäre auf dem Telefon riesig und am Bildschirm klein.
   ⚠ padding ist für ::cue in der WebVTT-Spezifikation nicht vorgesehen; ein Browser, der es
   nicht kennt, übergeht die Zeile und zeichnet den Kasten ohne Innenabstand.
   ⚠ Edge unter Windows überstimmt ::cue mit der Untertitel-Einstellung des Systems
   (gemessen, P26-Handoff § 1.4) — das ist die Einstellung des Betrachters.
   Bis P26b stand hier: weiss, text-shadow in acht Richtungen, kein Kasten, 1,35rem, 400. */
video::cue {
  color: #111827;
  background-color: rgba(255, 255, 255, .88);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 85%;
  font-weight: 500;
  line-height: 1.3;
  padding: .15em .4em;
}

/* ---------- Erzählabschnitte (.story, .story--alt) ---------- */
.story {
  background: #fff;
  padding-block: 6rem;
}
.story--alt { background: var(--bg-light); }
.story__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
/* Jeder zweite Abschnitt tauscht die Seiten — Bild links, Text rechts. In der Quellreihenfolge
   steht der Text immer zuerst, damit ein Bildschirmleser ihn zuerst liest. */
.story--alt .story__text { order: 2; }
.story h2,
.umstieg__kopf h2,
.preise h2,
.video-abschnitt h2,
.schluss h2 {
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
}
.story h2 { margin: .25rem 0 .9rem; }
.story__text p:not(.section-eyebrow) {
  color: var(--mute);
  font-size: 1.0625rem;
  max-width: 30rem;
}
.story__bild { margin: 0; }
.story__bild img { width: 100%; height: auto; }
.story__bild figcaption {
  font-size: .8rem;
  color: var(--mute);
  text-align: center;
  margin-top: .6rem;
}

/* ---------- Umstieg (dunkel) ---------- */
.umstieg {
  background: var(--ink);
  color: #fff;
  padding-block: 6rem;
}
.umstieg .section-eyebrow { color: var(--accent); }   /* 6,03 : 1 auf --ink */
.umstieg__kopf h2 { color: #fff; margin-bottom: 0; }
.umstieg__kopf {
  text-align: center;
  margin-bottom: 2rem;
}
.umstieg__liste {
  list-style: none;
  padding: 0;
  margin: 0 auto 2.5rem;
  max-width: 62rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.umstieg__liste li {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: .9rem 1rem;
  color: #C7D2E0;
  line-height: 1.5;
}
.umstieg__liste li strong { color: #fff; }
.umstieg__liste li.umstieg__nein { border-color: rgba(231, 120, 23, .6); }

/* ---------- Preise ---------- */
.preise {
  background: #fff;
  padding-block: 6rem;
}
.pricing-card {
  display: flex;
  flex-direction: column;
}
/* Die Karten tragen Bootstraps `shadow`/`shadow-lg` — die setzen !important, also hier auch. */
.pricing-card.shadow { box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .06) !important; }
.pricing-card.shadow-lg { box-shadow: 0 20px 50px rgba(0, 147, 221, .15) !important; }

.badge-intro {
  background-color: rgba(231, 120, 23, 0.12);
  color: var(--accent-text);
  font-weight: 600;
}

/* ---------- Häufige Fragen (Startseite, P26b) ---------- */
.faq-kurz {
  background: var(--bg-light);
  padding-block: 5rem;
}
.faq-kurz h2 {
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
}

/* ---------- Schluss ---------- */
.schluss {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-tief));
  color: #fff;
  padding-block: 5rem;
}
.schluss h2 { color: #fff; margin-bottom: .75rem; }
.schluss p {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  font-size: 1.0625rem;
}

/* ---------- Einblenden beim Scrollen (.reveal) ----------
   ⚠ OHNE JAVASCRIPT IST ALLES SICHTBAR (P26 § 2.4). Unsichtbar ist nur `.is-wartend`, und die
   Klasse setzt allein wwwroot/js/site.js — und auch das nur an Elementen, die beim Laden noch
   unter dem sichtbaren Bereich liegen. Eine Regel `.reveal { opacity: 0 }` wäre W-07 der
   devdex-Seite: ohne Skript bliebe die halbe Seite leer (WebsiteStartseiteTests verbietet sie). */
.reveal {
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-wartend {
  opacity: 0;
  transform: translateY(18px);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #C7D2E0;
}
.footer-titel {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .75rem;
}
.footer-link {
  color: #C7D2E0;
  text-decoration: none;
}
.footer-link:hover, .footer-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.footer-linie {
  border-color: rgba(255, 255, 255, .18);
  opacity: 1;
}

/* ---------- Tarif picker (Registrierung) ---------- */
.tarif-card {
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tarif-card:has(input:checked) {
  border-color: var(--primary) !important;
  background-color: var(--bg-light);
}
.tarif-card:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.accordion-button:not(.collapsed) {
  color: var(--primary-dark);
  background-color: rgba(0, 147, 221, 0.06);
}
.accordion-button:focus {
  box-shadow: none;
}

.article-body p { margin-bottom: 1.25rem; }
.article-body h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.article-body ul { margin-bottom: 1.5rem; }

/* ---------- Produktabbildungen (Screenshots) ---------- */
/* Der Rahmen ist bewusst hell: die Abbildungen haben selbst einen hellen Hintergrund und
   verschwaemmen sonst mit der Seite. Radius und Schatten seit P26 wie im Mockup. */
.app-shot img {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
  background: #fff;
}
.app-shot figcaption {
  font-size: 0.8rem;
}
/* Das Hochformat des Portals wuerde in einer halben Spalte sonst die Zeile sprengen. */
.app-shot-phone { text-align: center; }
.app-shot-phone img {
  max-width: 280px;
  border-radius: 1.5rem;
}

/* ---------- Schmale Schirme (Startseite) ---------- */
@media (max-width: 991.98px) {
  .hero { padding-top: 3rem; }
  .hero__raster { grid-template-columns: 1fr; gap: 0; }
  .hero__text { padding-bottom: 2.5rem; }
  .strip__liste { grid-template-columns: repeat(2, 1fr); }
  .story { padding-block: 4rem; }
  .story__raster { grid-template-columns: 1fr; gap: 2rem; }
  .story--alt .story__text { order: 0; }
  .story__text p:not(.section-eyebrow) { max-width: none; }
  .umstieg, .preise { padding-block: 4rem; }
  .video-abschnitt, .schluss { padding-block: 3.5rem; }
}
@media (max-width: 767.98px) {
  .umstieg__liste { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .strip__liste { grid-template-columns: 1fr; gap: .8rem; }
}

/* ---------- Weniger Bewegung ----------
   `prefers-reduced-motion: reduce` schaltet JEDEN eigenen Übergang ab — und site.js setzt
   in diesem Fall `is-wartend` gar nicht erst. Beide Hälften, damit keine allein die Zusage
   trägt. Bootstraps eigene Übergänge (Schublade) achten selbst auf dieselbe Abfrage. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-wartend {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #mainNav,
  .tarif-card { transition: none; }
}
@media print {
  .reveal.is-wartend { opacity: 1; transform: none; }
}

/* ---------- Lange deutsche Komposita auf schmalen Geraeten ---------- */
/* GEMESSEN am 28.08.2026 bei 390 px Viewport, nicht vermutet: „Datenschutzerklaerung"
   brauchte 451 px in einer 366 px breiten Spalte, „Fahrausbildungsreform" 474 px,
   „Verbraucherstreitbeilegung" 438 px, und „Fahrschulsoftware," in der display-4-
   Schlagzeile 432 px. Ergebnis: das Dokument war auf vier Seiten 444-486 px breit,
   die Seite liess sich seitlich schieben, und rechts stand ein leerer Streifen.
   Das ist kein Schoenheitsfehler: Google indexiert die mobile Fassung zuerst, und
   „Inhalt breiter als der Bildschirm" ist dort ein gemeldeter Mangel.
   `hyphens: auto` trennt nach deutschen Regeln, weil <html lang="de"> gesetzt ist;
   `overflow-wrap` ist der Notnagel, wenn keine Trennstelle gefunden wird. Beide
   greifen NUR, wenn das Wort sonst ueberliefe — an einer Zeile, die passt, aendert
   sich nichts. */
h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Die weichen Trennstriche (`&shy;`) in den vier langen Ueberschriften gehoeren
   dazu und sind kein Zierrat: ohne sie bricht der Browser mitten im Wort
   („Fahrschulsoftwa|re,"), weil `overflow-wrap` nur trennt und nicht weiss, wo.
   Mit ihnen steht der Trennstrich an der richtigen Stelle — auf dem Rechner
   ebenso wie auf dem Telefon; auf breiten Schirmen greift ohnehin keine der
   beiden Regeln, solange das Wort in seine Spalte passt. Gemessen mit einem
   Browser OHNE deutsche Trennmuster, damit die Zusage nicht an einer
   Woerterbuchdatei haengt. */

/* Und die zweiten 12 px: eine `.row.g-5` ist breiter als ihr `.container`.
   Bootstrap zieht bei `g-5` links und rechts 24 px negativen Rand (halbe
   Rinne), die Polsterung des Containers betraegt aber nur 12 px — auf breiten
   Schirmen faellt der Ueberstand in den freien Rand, bei 390 px schob er das
   Dokument auf 402 px. Auf schmalen Schirmen stehen die Spalten ohnehin
   untereinander, eine WAAGERECHTE Rinne von 48 px hat dort keine Aufgabe; der
   senkrechte Abstand (`--bs-gutter-y`) bleibt unangetastet. Gemessen: 402 -> 390. */
@media (max-width: 575.98px) {
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }
}