/* ==========================================================================
   MHO Real Estate — Stylesheet
   Farben und Typografie nach 03-marke-und-design.md
   Mobil zuerst. Keine Bibliotheken.
   ========================================================================== */

/* --- Schrift: selbst gehostet, kein Request an Google -------------------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Marken-Token ------------------------------------------------------- */
:root {
  --navy: #062249;
  --navy-tief: #041832;
  --navy-hell: #0d3468;
  --gold: #f5a623;
  --gold-tief: #96640a;
  --cyan: #1db6e8;
  --koralle: #f26554;
  /* Silber für die Wortmarke ReLease — aufgenommen aus der Logokontur. */
  --silber: #c9ced6;
  --silber-dunkel: #656c76;
  --anthrazit: #272a2f;
  --text: #333333;
  --grau: #656a71;
  --grau-linie: #e2e5ea;
  --flaeche: #f7f7f7;
  --weiss: #ffffff;

  --schrift: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --breite: 68rem;
  --breite-eng: 42rem;

  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2.5rem;
  --raum-5: 4rem;
  --raum-6: 6rem;

  --radius: 4px;
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -0.02em;
  color: var(--anthrazit);
  margin: 0 0 var(--raum-2);
  text-wrap: balance;
  /* Deutsche Komposita wie „Diagnoseversprechen" sind breiter als eine
     schmale Spalte. Ohne Trennung schieben sie die ganze Seite auf.
     Wo die Trennstelle stimmen muss, steht im HTML ein weiches Trennzeichen
     (­) — darauf ist Verlass, auf die Silbentrennung des Browsers nicht:
     ohne deutsches Trennwörterbuch tut sie nichts. overflow-wrap ist nur das
     Netz darunter, damit nichts aus der Spalte läuft. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 6.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--raum-2); max-width: 40rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--gold-tief); }

strong, b { font-weight: 600; color: var(--anthrazit); }

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

::selection { background: var(--gold); color: var(--navy); }

.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  top: -100px;
  left: var(--raum-2);
  z-index: 100;
  background: var(--gold);
  color: var(--navy);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 160ms var(--ease);
}
.sprungmarke:focus { top: var(--raum-2); }

/* --- Layout ------------------------------------------------------------- */
.bahn { width: 100%; padding-inline: var(--raum-3); }
@media (min-width: 48em) {
  .bahn { padding-inline: var(--raum-4); }
}

.mitte { width: 100%; max-width: var(--breite); margin-inline: auto; }
.mitte-eng { width: 100%; max-width: var(--breite-eng); margin-inline: auto; }

section { padding-block: var(--raum-5); }
@media (min-width: 48em) {
  section { padding-block: var(--raum-6); }
}

.flaeche-hell { background: var(--flaeche); }
.flaeche-navy { background: var(--navy); color: rgba(255, 255, 255, 0.86); }
.flaeche-navy h2,
.flaeche-navy h3,
.flaeche-navy h4 { color: var(--weiss); }
.flaeche-navy a { color: var(--gold); }
/* Dasselbe für den Kopfbereich. Der Grund ist dort ebenfalls Navy, und ein
   Link in der Standardfarbe wäre Navy auf Navy — unsichtbar. Aufgefallen an
   der Telefonnummer auf /danke/. */
.spitze a { color: var(--gold); }
.flaeche-navy strong { color: var(--weiss); }

/* Goldbalken als Trennelement (76 x 6 in der Bildsprache) */
.balken {
  display: block;
  width: 76px;
  height: 6px;
  background: var(--gold);
  border: 0;
  margin: 0 0 var(--raum-3);
}

/* Textmarker: nur die zweite Zeile eines Aussagenpaars */
.marker {
  background: var(--gold);
  color: var(--navy);
  padding: 0.06em 0.3em 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dachzeile {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: var(--raum-2);
}
.flaeche-navy .dachzeile { color: var(--gold); }

/* --- Wortmarke ReLease ---------------------------------------------------
   Das Programm heißt ReLease: „Re" in Silber, „Lease" in Gold. Deshalb
   weder Versalien noch gesperrte Laufweite — sonst geht das Wortspiel
   verloren.
   ------------------------------------------------------------------------ */
.wortmarke {
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 600;
  white-space: nowrap;
}
.wortmarke .re { color: var(--silber); }
.wortmarke .lease { color: var(--gold); }
.flaeche-hell .wortmarke .re,
.wortmarke-hell .re { color: var(--silber-dunkel); }
.flaeche-hell .wortmarke .lease,
.wortmarke-hell .lease { color: var(--gold-tief); }

/* Als Dachzeile über einem Abschnitt etwas größer als die normale. */
.dachzeile.wortmarke { font-size: 1.15rem; }

.vorspann {
  font-size: clamp(1.05rem, 2.3vw, 1.24rem);
  line-height: 1.6;
  max-width: 36rem;
}
.flaeche-navy .vorspann { color: rgba(255, 255, 255, 0.9); }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: var(--weiss);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kopf-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  min-height: 84px;
}
@media (min-width: 48em) {
  .kopf-inhalt { min-height: 98px; }
}

/* Im Kopf steht das vollständige Logo mit Slogan. Nur wenn der Bildschirm
   dafür zu schmal wird, springt es auf die kurze Wortmarke um. */
.logo {
  display: inline-flex;
  align-items: center;
  padding-block: 0.5rem;
  text-decoration: none;
}
.logo img {
  width: auto;
  display: block;
}
.logo img.logo-voll { height: 60px; }
.logo img.logo-kurz { height: 30px; display: none; }

@media (min-width: 48em) {
  .logo img.logo-voll { height: 70px; }
}
@media (max-width: 23em) {
  .logo img.logo-voll { display: none; }
  .logo img.logo-kurz { display: block; }
}

.kopf-nav { display: none; }
@media (min-width: 58em) {
  .kopf-nav {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
  }
}
.kopf-nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.94rem;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.kopf-nav a:hover { color: var(--weiss); border-bottom-color: var(--gold); }
.kopf-nav a[aria-current="page"] { color: var(--weiss); border-bottom-color: var(--gold); }
.kopf-nav .knopf { padding: 0.55rem 1rem; font-size: 0.92rem; border-bottom: 0; }
.kopf-nav .knopf:hover { border-bottom: 0; }
/* `.kopf-nav a` färbt sonst auch den Knopf weiß — auf Gold unlesbar. */
.kopf-nav a.knopf-gold,
.kopf-nav a.knopf-gold:hover { color: var(--navy); }

/* Klappmenü als <details>: funktioniert auch ohne JavaScript. */
.nav-klapper { position: relative; }
@media (min-width: 58em) {
  .nav-klapper { display: none; }
}

.nav-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  color: var(--weiss);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  user-select: none;
}
.nav-schalter::-webkit-details-marker { display: none; }
.nav-schalter::marker { content: ""; }
.nav-schalter:hover { border-color: var(--gold); }
.nav-schalter-strich {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--weiss);
  position: relative;
}
.nav-schalter-strich::before,
.nav-schalter-strich::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--weiss);
}
.nav-schalter-strich::before { top: -6px; }
.nav-schalter-strich::after { top: 6px; }

.nav-klapp {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 60;
  min-width: min(20rem, calc(100vw - 3rem));
  background: var(--navy-tief);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding-inline: var(--raum-3);
}
.nav-klapp ul { list-style: none; margin: 0; padding: var(--raum-1) 0; }
.nav-klapp a {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-klapp li:last-child a { border-bottom: 0; }
.nav-klapp a:hover { color: var(--gold); }

/* --- Schaltflächen ------------------------------------------------------ */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease),
    border-color 160ms var(--ease), transform 160ms var(--ease);
}
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }

.knopf-gold { background: var(--gold); color: var(--navy); }
.knopf-gold:hover { background: #ffb945; color: var(--navy); }

/* Der Handlungsknopf auf dunklem Grund: weiß mit Navy-Schrift. Ruhiger als
   eine goldene Fläche und mit 15:1 trotzdem der auffälligste Punkt im Bild.
   Das Gold sitzt nur noch im Pfeil. */
.knopf-hell {
  background: var(--weiss);
  color: var(--navy);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}
.knopf-hell:hover { background: var(--weiss); color: var(--navy); }
.knopf-hell .pfeil { fill: var(--gold-tief); }
.flaeche-navy a.knopf-hell,
.flaeche-navy a.knopf-hell:hover,
.spitze a.knopf-hell,
.spitze a.knopf-hell:hover,
.kopf-nav a.knopf-hell,
.kopf-nav a.knopf-hell:hover { color: var(--navy); }

.knopf .pfeil {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform 220ms var(--ease);
}
.knopf:hover .pfeil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .knopf:hover .pfeil { transform: none; }
}

.knopf-navy { background: var(--navy); color: var(--weiss); }
.knopf-navy:hover { background: var(--navy-hell); color: var(--weiss); }

.knopf-linie {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.knopf-linie:hover { background: var(--navy); color: var(--weiss); }
/* Steht die Wortmarke in einem Knopf, wechselt sie beim Überfahren auf die
   hellen Töne — die dunklen wären auf Navy nicht mehr zu lesen. */
.knopf-linie:hover .wortmarke .re { color: var(--silber); }
.knopf-linie:hover .wortmarke .lease { color: var(--gold); }
.flaeche-navy .knopf-linie,
.spitze .knopf-linie { color: var(--weiss); border-color: rgba(255, 255, 255, 0.5); }
.flaeche-navy .knopf-linie:hover,
.spitze .knopf-linie:hover { background: var(--weiss); color: var(--navy); border-color: var(--weiss); }

/* Auf Navy-Flächen färbt `.flaeche-navy a` jeden Link gold — Knöpfe behalten
   ihre eigene Schriftfarbe, sonst steht Gold auf Gold. */
.flaeche-navy a.knopf-gold,
.flaeche-navy a.knopf-gold:hover,
.spitze a.knopf-gold,
.spitze a.knopf-gold:hover { color: var(--navy); }
.flaeche-navy a.knopf-navy,
.flaeche-navy a.knopf-navy:hover,
.spitze a.knopf-navy,
.spitze a.knopf-navy:hover { color: var(--weiss); }
/* Der Textlink führt seine eigene helle Farbe (siehe .spitze .textlink) und
   darf von der Goldregel nicht überschrieben werden. */
.spitze a.textlink { color: rgba(255, 255, 255, 0.92); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  margin-top: var(--raum-3);
}

.textlink {
  font-size: 0.98rem;
  color: inherit;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.flaeche-navy .textlink,
.spitze .textlink { color: rgba(255, 255, 255, 0.92); }
.flaeche-navy .textlink:hover,
.spitze .textlink:hover { color: var(--gold); }

/* --- Spitze ------------------------------------------------------------- */
.spitze {
  position: relative;
  background: var(--navy);
  color: var(--weiss);
  overflow: hidden;
  isolation: isolate;
}
/* Objektfoto liegt darunter, Navy-Ebene und Verlauf darüber.
   Ohne Foto bleibt die Fläche ruhig Navy. */
.spitze-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 52em) {
  /* Auf breiten Bildschirmen das Motiv nach rechts rücken — dort liegt die
     freie Bildhälfte neben dem Text. */
  .spitze-bild { background-position: 72% center; }
}

/* ---------------------------------------------------------------------------
   DIE KOPFBILDER — hier stehen sie alle an einer Stelle.

   Ein anderes Motiv? In tools\bilder-aufbereiten.ps1 unter $kopf die Nummer
   des Fotos tauschen und das Skript laufen lassen — die Dateinamen hier
   bleiben gleich. Es gibt je zwei Größen: die kleine für normale Bildschirme,
   die große für scharfe Displays — der Browser wählt selbst.

   Wichtig: Die Navy-Ebene darüber deckt links fast ganz. Wer links im Foto
   steht, verschwindet darunter — dafür ist „zoom" im Skript da.
   --------------------------------------------------------------------------- */
.bild-start {
  background-image: url('../img/kopf-start-1100.jpg');
  background-image: -webkit-image-set(url('../img/kopf-start-1100.jpg') 1x, url('../img/kopf-start-1800.jpg') 2x);
  background-image: image-set(url('../img/kopf-start-1100.jpg') 1x, url('../img/kopf-start-1800.jpg') 2x);
}
.bild-objektaufnahme {
  background-image: url('../img/kopf-objektaufnahme-1100.jpg');
  background-image: -webkit-image-set(url('../img/kopf-objektaufnahme-1100.jpg') 1x, url('../img/kopf-objektaufnahme-1800.jpg') 2x);
  background-image: image-set(url('../img/kopf-objektaufnahme-1100.jpg') 1x, url('../img/kopf-objektaufnahme-1800.jpg') 2x);
}
.bild-interim {
  background-image: url('../img/kopf-interim-1100.jpg');
  background-image: -webkit-image-set(url('../img/kopf-interim-1100.jpg') 1x, url('../img/kopf-interim-1800.jpg') 2x);
  background-image: image-set(url('../img/kopf-interim-1100.jpg') 1x, url('../img/kopf-interim-1800.jpg') 2x);
}
.bild-band {
  background-image: url('../img/band-begehung-1100.jpg');
  background-image: -webkit-image-set(url('../img/band-begehung-1100.jpg') 1x, url('../img/band-begehung-1800.jpg') 2x);
  background-image: image-set(url('../img/band-begehung-1100.jpg') 1x, url('../img/band-begehung-1800.jpg') 2x);
}
/* Navy-Ebene über dem Foto. Links, wo der Text steht, deckt sie fast ganz;
   nach rechts wird sie durchsichtiger, damit das Bild sichtbar bleibt.
   Auf schmalen Bildschirmen läuft der Verlauf von oben nach unten. */
.spitze-ebene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 24, 50, 0.82) 0%, rgba(4, 24, 50, 0.93) 55%, rgba(4, 24, 50, 0.97) 100%),
    radial-gradient(120% 80% at 82% 6%, rgba(29, 182, 232, 0.16) 0%, rgba(6, 34, 73, 0) 60%);
}
@media (min-width: 52em) {
  .spitze-ebene {
    background:
      linear-gradient(100deg, rgba(6, 34, 73, 0.98) 0%, rgba(6, 34, 73, 0.95) 40%, rgba(6, 34, 73, 0.72) 70%, rgba(4, 24, 50, 0.58) 100%),
      linear-gradient(180deg, rgba(4, 24, 50, 0.25) 0%, rgba(4, 24, 50, 0) 45%, rgba(4, 24, 50, 0.75) 100%),
      radial-gradient(90% 70% at 88% 4%, rgba(29, 182, 232, 0.2) 0%, rgba(6, 34, 73, 0) 60%);
  }
}

.spitze-inhalt { padding-block: var(--raum-5); }
@media (min-width: 48em) {
  .spitze-inhalt { padding-block: 6rem 5rem; }
}
@media (min-width: 52em) {
  /* Text bleibt in der linken Hälfte, damit das Foto rechts frei bleibt. */
  .spitze h1,
  .spitze .vorspann,
  .spitze .knopf-reihe,
  .spitze .dachzeile,
  .spitze .preisfahne { max-width: 32rem; }
  .spitze h1 { max-width: 15ch; }
}
/* Leichter Schatten, damit der Text auch über einem hellen Foto steht —
   unabhängig davon, welches Motiv später im Kopf liegt. */
.spitze h1,
.spitze .vorspann,
.spitze .dachzeile,
.spitze .textlink,
.spitze-leiste li {
  text-shadow: 0 1px 14px rgba(4, 24, 50, 0.75);
}
.spitze .marker,
.spitze .preisfahne { text-shadow: none; }

.spitze h1 {
  color: var(--weiss);
  max-width: 18ch;
  margin-bottom: var(--raum-3);
}
.spitze .vorspann {
  color: rgba(255, 255, 255, 0.88);
  max-width: 34rem;
}

/* Im Kopfbereich trägt die zweite Zeile das Gold als Schriftfarbe, nicht als
   Fläche — der Textmarker bleibt den kleineren Auszeichnungen vorbehalten,
   sonst erschlägt das Gold den Einstieg. */
.spitze-marke {
  display: block;
  margin-top: 0.14em;
  color: var(--gold);
}

/* Feine goldene Linie links am Textblock als ruhiger Anker. */
.spitze-inhalt > .mitte,
.spitze-inhalt {
  position: relative;
}
/* Die Linie liegt im Seitenrand, nicht im Textblock — so fluchtet die
   Überschrift mit der Kennzahlenleiste darunter und mit allen anderen
   Abschnitten der Seite. */
.spitze-anker {
  position: absolute;
  left: -0.9rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(245, 166, 35, 0.15) 100%);
  border-radius: 2px;
}
@media (min-width: 48em) {
  .spitze-anker { left: -1.6rem; }
}
.spitze-satz { position: relative; }

/* ---------------------------------------------------------------------------
   EINSTIEG MIT VIDEO — nur die Startseite (.spitze-mit-film)

   Das Tür-Video läuft einmal. Gegen Ende erscheint darüber groß und in Gold
   der Slogan und bleibt stehen (main.js setzt dann .spitze-offen): Das Video
   endet nur mit dem Slogan. Überschrift, Absatz und Knöpfe stehen im
   Textband darunter.

   Handy:   Das Video füllt die Bühne.
   Desktop: Das Video steht hochkant in der Mitte und läuft an den Rändern
            weich ins Navy aus — dasselbe Navy wie das Textband darunter.
   Immer:   Ohne JavaScript, bei „Bewegung reduzieren", im Datensparmodus
            und wenn der Browser das Abspielen blockt, gibt es gleich das
            Schlussbild mit dem Slogan.
   --------------------------------------------------------------------------- */
.spitze-buehne {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 88vh;
  min-height: calc(100svh - 6rem);
  overflow: hidden;
}
.spitze-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--navy);
}
.spitze-film-kern {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.spitze-film-kern img,
.spitze-film-kern video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Das Schlussbild liegt über dem Video: unsichtbar, solange der Film
   läuft, am Ende sichtbar. Es ist genau das letzte Bild — so bleibt das Ende
   auch dort stehen, wo ein Browser nach dem Abspielen wieder das
   Vorschaubild zeigen würde. */
.spitze-schlussbild { z-index: 1; }
.spitze-video { display: none; }
.js .film-laeuft .spitze-video { display: block; }
.js .film-laeuft .spitze-schlussbild {
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.js .film-laeuft.film-zu-ende .spitze-schlussbild { opacity: 1; }

/* Die Abdunklung. Während der Film läuft, nur ein Hauch an den Rändern. Mit
   dem Slogan kommt sie kräftig dazu — sonst verschwindet das Gold vor den
   hellen Fenstern der Halle.
   Gemessen am Schlussbild, Pixel für Pixel hinter der Schrift, ohne den
   Schatten mitzurechnen — jeweils der schlechteste Punkt:
     Handy 375 px:     5,30 : 1
     Desktop 1280 px:  5,23 : 1 über dem Video, 7,77 : 1 über dem Navy daneben
   Pflicht für so große Schrift sind 3 : 1, für normale 4,5 : 1. Wer die
   Werte unten senkt, misst bitte neu. */
.spitze-mit-film .spitze-ebene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 24, 50, 0.3) 0%, rgba(4, 24, 50, 0) 18%, rgba(4, 24, 50, 0) 72%, rgba(4, 24, 50, 0.5) 100%);
}
.spitze-mit-film .spitze-ebene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 62% at 50% 48%, rgba(4, 24, 50, 0.86) 0%, rgba(4, 24, 50, 0.76) 55%, rgba(4, 24, 50, 0.62) 100%);
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}
.spitze-mit-film.spitze-offen .spitze-ebene::after,
html:not(.js) .spitze-mit-film .spitze-ebene::after { opacity: 1; }

/* Anhalten-Knopf. Pflicht, sobald sich etwas länger als fünf Sekunden von
   selbst bewegt (WCAG 2.2.2). Erscheint erst, wenn das Video wirklich läuft. */
.film-halt {
  position: absolute;
  z-index: 3;
  top: var(--raum-2);
  right: var(--raum-2);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(4, 24, 50, 0.55);
  color: var(--weiss);
  cursor: pointer;
}
.film-halt[hidden] { display: none; }
.film-halt svg { width: 18px; height: 18px; fill: currentColor; }
.film-halt .zeichen-weiter { display: none; }
.film-halt.ist-pausiert .zeichen-pause { display: none; }
.film-halt.ist-pausiert .zeichen-weiter { display: inline; }
.film-halt:hover { background: rgba(4, 24, 50, 0.8); }
.film-halt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Der Slogan — das Letzte, was das Video zeigt, und das, was stehen bleibt. */
.slogan {
  position: relative;
  z-index: 2;
  margin: 0;
  /* Die 40rem aus der Grundregel für Absätze gelten hier nicht — sonst
     bricht der Slogan auf dem Desktop in drei statt zwei Zeilen. */
  max-width: none;
  padding: var(--raum-4) var(--raum-3);
  text-align: center;
  font-weight: 600;
  font-size: clamp(2.6rem, 12.5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--gold);
  text-shadow: 0 2px 28px rgba(4, 24, 50, 0.65);
  text-wrap: balance;
  pointer-events: none;
}
/* Goldener Balken darüber — dasselbe Zeichen wie über jeder Überschrift. */
.slogan::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin: 0 auto var(--raum-3);
  background: var(--gold);
}
.slogan-zeile { display: block; }

/* Erst unsichtbar, dann Zeile für Zeile. Notbremse: Lädt main.js nicht,
   erscheint der Slogan nach 16 Sekunden trotzdem. */
.js .spitze-mit-film .slogan-zeile {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  animation: spitze-notfall 1ms 16s forwards;
}
.js .spitze-mit-film .slogan::before {
  transform: scaleX(0);
  animation: spitze-notfall 1ms 16s forwards;
}
.js .spitze-mit-film.spitze-offen .slogan-zeile {
  opacity: 1;
  transform: none;
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.js .spitze-mit-film.spitze-offen .slogan-zeile-2 { transition-delay: 380ms; }
.js .spitze-mit-film.spitze-offen .slogan::before {
  transform: none;
  transition: transform 900ms var(--ease) 700ms;
}
@keyframes spitze-notfall {
  to { opacity: 1; transform: none; }
}

/* Kleiner Pfeil nach unten: Da geht es weiter. Er wippt dreimal und bleibt
   dann ruhig — was sich endlos bewegt, wäre wieder ein Fall für WCAG 2.2.2. */
.spitze-mit-film .weiter-hinweis {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--raum-2);
  width: 48px;
  height: 48px;
  margin-left: -24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--weiss);
}
.weiter-hinweis svg { width: 30px; height: 30px; fill: currentColor; }
.spitze-mit-film .weiter-hinweis:hover { color: var(--gold); }
.weiter-hinweis:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.js .spitze-mit-film .weiter-hinweis { opacity: 0; }
.js .spitze-mit-film.spitze-offen .weiter-hinweis {
  opacity: 0.9;
  transition: opacity 600ms var(--ease) 1600ms;
}
@media (prefers-reduced-motion: no-preference) {
  .spitze-offen .weiter-hinweis svg { animation: weiter-wippen 1.6s ease-in-out 2.4s 3; }
}
@keyframes weiter-wippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Das Textband unter dem Video. Der Pfeil springt hierher — der Abstand oben
   hält die Überschrift unter dem mitlaufenden Kopf. */
.spitze-textband { scroll-margin-top: 6.5rem; }
@media (min-width: 60em) {
  .spitze-mit-film .spitze-satz {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .spitze-mit-film .spitze-satz h1 { margin-bottom: 0; }
}

@media (min-width: 52em) {
  .spitze-mit-film .spitze-buehne {
    --buehne-h: clamp(34rem, calc(100vh - 7rem), 52rem);
    min-height: var(--buehne-h);
    height: var(--buehne-h);
  }
  /* Die Seiten bleiben reines Navy wie das Textband darunter. Das Video
     läuft links, rechts und unten weich darin aus — keine Kante, kein
     Balken. Die Abdunklung sitzt im Video und läuft mit aus, sonst wären
     die Seiten dunkler als das Navy darunter. */
  .spitze-film-kern {
    inset: 0 auto 0 50%;
    aspect-ratio: 9 / 16;
    transform: translateX(-50%);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
    mask-composite: intersect;
  }
  /* Unten rechts im Video, etwas eingerückt, damit er nicht im Auslauf
     sitzt — die Videobreite ergibt sich aus der Bühnenhöhe. */
  .spitze-mit-film .film-halt {
    top: auto;
    bottom: var(--raum-5);
    right: calc(50% - var(--buehne-h) * 9 / 32 + var(--raum-5));
  }
  .slogan { font-size: clamp(3.4rem, 6.2vw, 6.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js .spitze-mit-film .slogan-zeile,
  .js .spitze-mit-film.spitze-offen .slogan-zeile,
  .js .spitze-mit-film .slogan::before,
  .js .spitze-mit-film.spitze-offen .slogan::before { transition: none; transform: none; }
  .spitze-mit-film .spitze-ebene::after,
  .js .spitze-mit-film.spitze-offen .weiter-hinweis { transition: none; }
}

.spitze-leiste {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 24, 50, 0.45);
}
.spitze-leiste ul {
  list-style: none;
  /* "0 auto", nicht "0" — sonst verliert die Leiste die Zentrierung aus
     .mitte und rutscht auf breiten Bildschirmen aus der Flucht. */
  margin: 0 auto;
  padding: var(--raum-3) 0;
  display: grid;
  gap: var(--raum-2) var(--raum-4);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) {
  .spitze-leiste ul { grid-template-columns: repeat(3, 1fr); }
}
.spitze-leiste li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}
.spitze-leiste b {
  color: var(--gold);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

/* --- Preisfahne --------------------------------------------------------- */
/* Der Festpreis muss ohne Scrollen ins Auge fallen — aber als hochwertige
   Auszeichnung, nicht als Preisschild. Goldener Rahmen, goldene Zahl,
   dunkler Grund. */
.preisfahne {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  background: rgba(4, 24, 50, 0.55);
  border: 1px solid rgba(245, 166, 35, 0.55);
  border-left: 4px solid var(--gold);
  color: var(--weiss);
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius);
  margin-bottom: var(--raum-3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.preisfahne .preis {
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--gold);
}
.preisfahne .preis-zusatz {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

/* --- Raster ------------------------------------------------------------- */
.zwei-spalten {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: 1fr;
}
@media (min-width: 52em) {
  .zwei-spalten { grid-template-columns: 1fr 1fr; gap: var(--raum-5); }
}

/* --- Symptome ------------------------------------------------------------
   Die drei Folgen des Leerstands, die im Text stehen — als Kacheln, damit
   der Abschnitt nicht nur aus Fließtext besteht. Koralle als Warnfarbe,
   sparsam, wie in der Markenregel vorgesehen.
   ------------------------------------------------------------------------ */
.symptome {
  list-style: none;
  margin: var(--raum-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2);
  grid-template-columns: 1fr;
}
@media (min-width: 50em) {
  .symptome { grid-template-columns: repeat(3, 1fr); gap: var(--raum-3); }
}
.symptom {
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-left: 3px solid var(--koralle);
  border-radius: var(--radius);
  padding: var(--raum-3);
}
.symptom b {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--anthrazit);
  margin-bottom: 0.35rem;
}
.symptom svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.32em;
  fill: var(--koralle);
}
.symptom span { font-size: 0.93rem; color: var(--grau); line-height: 1.5; }

.kernsatz {
  margin-top: var(--raum-4);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--anthrazit);
  max-width: 26ch;
}
.kernsatz .marker { display: inline-block; margin-top: 0.2em; }

/* --- Gegenüberstellung -------------------------------------------------- */
.tabelle-rollt { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--raum-3); }

.gegenueber {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}
@media (max-width: 38em) {
  .gegenueber { min-width: 34rem; }
}
.gegenueber th,
.gegenueber td {
  text-align: left;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--grau-linie);
  vertical-align: top;
}
.gegenueber thead th {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grau);
  font-weight: 600;
  border-bottom: 2px solid var(--anthrazit);
}
.gegenueber thead th:last-child {
  color: var(--navy);
  border-bottom-color: var(--gold);
}
.gegenueber tbody th {
  font-weight: 500;
  color: var(--grau);
  width: 20%;
}
.gegenueber td:last-child {
  color: var(--anthrazit);
  font-weight: 600;
  background: rgba(245, 166, 35, 0.13);
  box-shadow: inset 3px 0 0 var(--gold);
}
.gegenueber thead th:last-child {
  background: rgba(245, 166, 35, 0.22);
  color: var(--navy);
  box-shadow: inset 3px 0 0 var(--gold);
}
.gegenueber td:nth-child(2) { color: var(--grau); }
.gegenueber tbody tr:last-child th,
.gegenueber tbody tr:last-child td { border-bottom: 0; }

/* --- Treppe ------------------------------------------------------------- */
.treppe {
  list-style: none;
  margin: var(--raum-4) 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
/* Die Stufe ist eine helle Karte auf Navy-Grund: Textfarben ausdrücklich
   zurücksetzen, sonst erbt sie das Weiß der Sektion. */
.stufe {
  background: var(--weiss);
  color: var(--text);
  border-left: 6px solid var(--gold);
  padding: var(--raum-3);
  display: grid;
  gap: 0.3rem;
  grid-template-columns: 1fr;
}
.flaeche-navy .stufe h3,
.stufe h3 { color: var(--anthrazit); }
.flaeche-navy .stufe a,
.stufe a { color: var(--navy); }
.flaeche-navy .stufe a:hover,
.stufe a:hover { color: var(--gold-tief); }
.flaeche-navy .stufe strong,
.stufe strong { color: var(--anthrazit); }

@media (min-width: 46em) {
  .stufe {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0.35rem var(--raum-3);
    padding-inline: var(--raum-4);
    align-items: center;
  }
}
/* Treppenwirkung erst, wenn genug Breite da ist */
@media (min-width: 62em) {
  .stufe-2 { margin-left: 2.5rem; }
  .stufe-3 { margin-left: 5rem; }
  .stufe-4 { margin-left: 7.5rem; }
  .stufe-5 { margin-left: 10rem; }
}
.stufe-nr {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gold-tief);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stufe-text h3 { margin-bottom: 0.15rem; }
.stufe-text p { color: var(--text); font-size: 0.97rem; margin: 0; }
.stufe-marke {
  justify-self: start;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  background: var(--gold);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  white-space: nowrap;
  margin-top: 0.5rem;
}
@media (min-width: 46em) {
  .stufe-nr { grid-column: 1; grid-row: 1; font-size: 1.5rem; align-self: center; }
  .stufe-text { grid-column: 2; grid-row: 1; }
  .stufe-marke { grid-column: 3; grid-row: 1; margin-top: 0; }
}
.stufe-frei {
  color: var(--grau);
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--grau-linie);
}
.treppe-schluss {
  margin-top: var(--raum-3);
  color: var(--grau);
  font-size: 0.97rem;
}
.flaeche-navy .treppe-schluss { color: rgba(255, 255, 255, 0.7); }

/* Abschluss der Schrittstrecke: kurzer Satz, dann zurück zum ersten Schritt. */
.schritte-schluss {
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.schritte-schluss .treppe-schluss { margin-top: 0; }
.schritte-schluss .knopf-reihe { margin-top: var(--raum-3); }

/* ========================================================================
   Die fünf Schritte

   Je Schritt eine Bahn: auf einer Seite der Text mit großer Ziffer, auf der
   anderen das Video. Die Seiten wechseln von Schritt zu Schritt, damit die
   Treppe in Bewegung bleibt.

   Das Video steckt in einem <details>: Der Deckel ist das Standbild mit
   Abspielknopf, beim Öffnen tritt das Video exakt an dessen Stelle. Das
   sieht aus wie ein Videoplayer, funktioniert aber ohne eine Zeile
   JavaScript — und lädt erst, wenn jemand wirklich abspielen will.
   ======================================================================== */
.schritte {
  list-style: none;
  margin: var(--raum-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raum-5);
}
@media (min-width: 52em) {
  .schritte { gap: var(--raum-6); }
}

.schritt {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 46em) {
  .schritt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--raum-4);
    align-items: center;
  }
  /* Bei jedem zweiten Schritt die Seiten tauschen. */
  .schritt:nth-child(even) .schritt-film { order: -1; }
}
@media (min-width: 62em) {
  .schritt { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--raum-5); }
  .schritt:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.schritt-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.6rem;
}
.schritt-nr {
  font-size: clamp(2.8rem, 7.4vw, 3.9rem);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--gold);
  font-variant-numeric: tabular-nums;
  flex: none;
  /* Feste Breite, damit die Titel aller fünf Schritte bündig stehen. */
  min-width: 1.15em;
  text-align: center;
}
/* Ohne text-stroke (ältere Browser) wenigstens goldene Ziffern. */
@supports not (-webkit-text-stroke: 1px red) {
  .schritt-nr { color: var(--gold); }
}
.schritt-text h3 {
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  margin: 0;
  /* Ohne min-width bleibt die Überschrift so breit wie ihr längstes Wort —
     „90-Tage-Repositionierungskonzept" schiebt dann die Seite auf. */
  min-width: 0;
}
.schritt-text p { font-size: 1rem; }
.flaeche-navy .schritt-text p { color: rgba(255, 255, 255, 0.84); }

.schritt-marke {
  display: inline-block;
  margin-top: var(--raum-2);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  background: var(--gold);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
}
.schritt-marke-still {
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Der Videodeckel ---------------------------------------------------- */
.schritt-film { position: relative; }

.film-deckel {
  display: block;
  position: relative;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--navy-tief);
  line-height: 0;
}
.film-deckel::-webkit-details-marker { display: none; }
.film-deckel::marker { content: ""; }

.film-deckel img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}
.film-deckel:hover img { transform: scale(1.02); opacity: 0.88; }

/* Der Knopf sitzt unten rechts, nicht in der Mitte: Die Standbilder tragen
   selbst eine Aussage, die nicht verdeckt werden soll. */
.film-knopf {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
  transition: transform 220ms var(--ease);
  z-index: 2;
}
.film-deckel:hover .film-knopf { transform: scale(1.09); }
.film-knopf svg {
  width: 26px;
  height: 26px;
  fill: var(--navy);
  margin-left: 3px;
}

.film-hinweis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 5.6rem 1.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--weiss);
  background: linear-gradient(180deg, rgba(4, 24, 50, 0) 0%, rgba(4, 24, 50, 0.55) 45%, rgba(4, 24, 50, 0.9) 100%);
}
.film-hinweis span { font-weight: 400; color: rgba(255, 255, 255, 0.72); }

/* Beim Öffnen verschwindet der Deckel und das Video steht an seiner Stelle. */
.schritt-film[open] .film-deckel { display: none; }

.schritt-film video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--navy-tief);
}
.film-zu {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
}
.film-zu:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .film-deckel img,
  .film-knopf { transition: none; }
  .film-deckel:hover img { transform: none; }
  .film-deckel:hover .film-knopf { transform: translate(-50%, -50%); }
}

/* --- Karten ------------------------------------------------------------- */
.karten {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
  margin-top: var(--raum-4);
}
@media (min-width: 46em) {
  .karten-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 54em) {
  .karten-3 { grid-template-columns: repeat(3, 1fr); }
}

.karte {
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--raum-3);
  display: flex;
  flex-direction: column;
}
.flaeche-navy .karte {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: var(--gold);
  color: rgba(255, 255, 255, 0.86);
}
.karte h3 { margin-bottom: 0.6rem; }
.karte p { font-size: 0.97rem; }
.karte-ergebnis {
  margin-top: auto;
  padding-top: var(--raum-2);
  border-top: 1px solid var(--grau-linie);
  font-size: 0.92rem;
  color: var(--navy);
  font-weight: 500;
}
.flaeche-navy .karte-ergebnis {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: var(--gold);
}

/* --- Listen ------------------------------------------------------------- */
.haken-liste,
.strich-liste {
  list-style: none;
  margin: 0 0 var(--raum-2);
  padding: 0;
  max-width: 40rem;
}
.haken-liste li,
.strich-liste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.98rem;
}
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 11px;
  height: 3px;
  background: var(--gold);
}
.strich-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 11px;
  height: 0;
  border-top: 2px solid var(--grau);
}

/* --- Objektkarte -------------------------------------------------------- */
.objektkarte-raster {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: var(--raum-4);
}
@media (min-width: 58em) {
  .objektkarte-raster {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: var(--raum-5);
  }
  /* Das Objektbild bleibt beim Scrollen durch die Liste stehen. */
  .objekt-spalte {
    position: sticky;
    top: 7rem;
  }
}
.karte-buehne {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: var(--raum-3);
}
.karte-buehne svg { width: 100%; height: auto; }

.land-form {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.marker-punkt { fill: var(--gold); }
.marker-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.marker-label {
  fill: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
}
.marker-gruppe { cursor: pointer; }
.marker-gruppe:hover .marker-ring,
.marker-gruppe:focus-visible .marker-ring,
.marker-gruppe.ist-aktiv .marker-ring { opacity: 1; }
.marker-gruppe:hover .marker-label,
.marker-gruppe:focus-visible .marker-label,
.marker-gruppe.ist-aktiv .marker-label { fill: var(--weiss); }
.karte-legende {
  margin-top: var(--raum-2);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Objektliste: die Auswahl -------------------------------------------- */
.objektliste { list-style: none; margin: var(--raum-3) 0 0; padding: 0; }
.objektliste li { margin: 0; }
.objektliste button {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem var(--raum-2);
  text-align: left;
  font: inherit;
  padding: 0.7rem 0.7rem;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-left-color 160ms var(--ease);
}
.objektliste li:first-child button { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.objektliste button:hover,
.objektliste button.ist-aktiv {
  background: rgba(245, 166, 35, 0.1);
  border-left-color: var(--gold);
}
.objektliste button.ist-aktiv .objekt-name { color: var(--gold); }

/* Feiner Balken am aktiven Eintrag: zeigt, wie lange dieses Projekt noch
   steht, bevor die Karte weiterschaltet. Er läuft nur, solange die Automatik
   läuft, und hält an, sobald jemand mit Maus oder Tastatur im Bereich ist. */
.objektliste button { position: relative; overflow: hidden; }
.objektliste button.ist-aktiv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.automatik-an .objektliste button.ist-aktiv::after {
  animation: takt-balken var(--takt, 4500ms) linear forwards;
}
.automatik-pause .objektliste button.ist-aktiv::after {
  animation-play-state: paused;
}
@keyframes takt-balken {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Der Wechsel selbst: kurzes Aufblenden statt hartem Sprung. */
@keyframes tafel-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.js .objekt-tafel:not([hidden]) {
  animation: tafel-ein 320ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .objekt-tafel:not([hidden]) { animation: none; }
  .automatik-an .objektliste button.ist-aktiv::after { animation: none; }
}

.objekt-name { font-weight: 600; color: var(--weiss); font-size: 1rem; grid-column: 1; }
.objekt-stadt { color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; grid-column: 1; }
.objekt-flaeche {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.objektkarte-summe {
  margin-top: var(--raum-3);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}

/* --- Die Objekttafel: Foto und Eckdaten ---------------------------------
   Ohne JavaScript stehen alle Objekte untereinander — die Seite ist dann
   länger, aber vollständig. Mit JavaScript zeigt die Tafel immer nur das
   ausgewählte Objekt.
   ------------------------------------------------------------------------ */
.objekt-tafel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}
.js .objekt-tafel[hidden] { display: none; }
.objekt-tafel + .objekt-tafel { margin-top: var(--raum-3); }
.js .objekt-tafel + .objekt-tafel { margin-top: 0; }

.objekt-bild {
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--navy-tief);
}
.objekt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.objekt-inhalt { padding: var(--raum-3); }
.objekt-inhalt h3 {
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  margin-bottom: 0.2rem;
}
.objekt-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: var(--raum-2);
}
.objekt-zeile .stadt { color: var(--gold); font-weight: 600; }
.objekt-daten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.objekt-daten li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.2rem var(--raum-2);
  font-size: 0.93rem;
  line-height: 1.5;
}
@media (max-width: 30em) {
  .objekt-daten li { grid-template-columns: 1fr; }
}
.objekt-daten dt,
.objekt-daten .feld-name {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.12em;
}
.objekt-daten .feld-wert { color: rgba(255, 255, 255, 0.88); }
.objekt-daten .feld-wert b { color: var(--weiss); }

/* --- Bildband -----------------------------------------------------------
   Ein Foto über die volle Breite mit einer Aussage darauf. Trennt zwei
   Abschnitte und gibt der Seite Luft. Der Text liegt auf der Navy-Ebene,
   nie direkt auf dem Foto.
   ------------------------------------------------------------------------ */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  padding-block: var(--raum-5);
}
@media (min-width: 48em) {
  .band { padding-block: var(--raum-6); }
}
.band-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.band-ebene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 24, 50, 0.86) 0%, rgba(6, 34, 73, 0.9) 100%),
    radial-gradient(80% 90% at 20% 50%, rgba(4, 24, 50, 0.5) 0%, rgba(4, 24, 50, 0) 70%);
}
.band-satz {
  font-size: clamp(1.9rem, 5.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--weiss);
  margin: 0;
  max-width: 20ch;
}
.band-satz .marker { display: inline-block; margin-top: 0.28em; }
.band-nach {
  margin-top: var(--raum-3);
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  max-width: 34rem;
}

/* --- Bildblöcke ---------------------------------------------------------
   Fotos stehen für sich, nie als Hintergrund unter Text (Bildsprache aus
   03-marke-und-design.md). Der Goldbalken bindet sie an die Marke an.
   ------------------------------------------------------------------------ */
.bild {
  margin: 0;
  position: relative;
}
.bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--flaeche);
}
.bild::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 6px;
  background: var(--gold);
}
.bild figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--grau);
  line-height: 1.45;
}
.flaeche-navy .bild figcaption { color: rgba(255, 255, 255, 0.62); }
.bild-quadrat img { aspect-ratio: 1 / 1; object-fit: cover; }
.bild-hoch img { aspect-ratio: 4 / 5; object-fit: cover; }
/* Für Aufnahmen, die in der Breite leben — zwei Personen nebeneinander etwa
   verlieren im Quadrat die Hälfte. */
.bild-quer img { aspect-ratio: 3 / 2; object-fit: cover; }
/* Steht ein Bild allein zwischen zwei Textblöcken, darf es breiter werden
   als die Textspalte — aber nicht so breit, dass es die Bahn sprengt. */
.bild-breit { margin-top: var(--raum-5); max-width: 46rem; }

/* Bild und Text nebeneinander, Bild wahlweise rechts. */
.bild-text {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 52em) {
  .bild-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--raum-5);
  }
  .bild-text-gedreht .bild { order: 2; }
}

/* --- Empfehlungen ------------------------------------------------------- */
.empfehlungen {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
  margin-top: var(--raum-4);
}
@media (min-width: 54em) {
  .empfehlungen { grid-template-columns: repeat(2, 1fr); gap: var(--raum-4); }
}
@media (min-width: 72em) {
  .empfehlungen { grid-template-columns: repeat(3, 1fr); }
}

.empfehlung {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  padding: var(--raum-3);
  margin: 0;
  overflow: hidden;
}
.empfehlung::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  background: var(--gold);
  margin-bottom: var(--raum-2);
}
/* Großes Anführungszeichen als ruhiges Ornament. */
.empfehlung::after {
  content: "\201C";
  position: absolute;
  top: 0.7rem;
  right: 1.1rem;
  font-size: 6rem;
  line-height: 0.8;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.2;
  pointer-events: none;
}
.empfehlung blockquote { margin: 0; }
.empfehlung blockquote p + p { margin-top: var(--raum-2); }

/* Die ausführlichste Empfehlung ist genauso groß wie die anderen. Der Text
   bekommt einen eigenen Rollbereich, damit die Karte die Reihe nicht
   auseinanderzieht. tabindex im HTML macht ihn auch mit der Tastatur
   erreichbar — ein Rollbereich ohne Tastaturzugang wäre eine Barriere. */
.empfehlung-lang blockquote {
  overflow-y: auto;
  min-height: 0;
  max-height: 24rem;
  padding-right: var(--raum-2);
  scrollbar-width: thin;
  scrollbar-color: var(--silber) transparent;
  /* Der letzte Zeilenrest verläuft weich — das zeigt, dass es weitergeht. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent);
}
.empfehlung-lang blockquote::-webkit-scrollbar { width: 6px; }
.empfehlung-lang blockquote::-webkit-scrollbar-thumb {
  background: var(--silber);
  border-radius: 3px;
}
.empfehlung-lang blockquote:focus-visible {
  outline: 2px solid var(--gold-tief);
  outline-offset: 4px;
  border-radius: 2px;
}
/* Erst in der Dreierreihe wird das Fenster kleiner — dort muss die Karte
   neben die beiden kurzen passen. */
@media (min-width: 72em) {
  .empfehlung-lang blockquote { max-height: 17rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .empfehlung-lang blockquote { scroll-behavior: smooth; }
}
.empfehlung p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text);
  max-width: none;
}
/* Die Namen stehen in allen Karten auf gleicher Höhe unten. */
.empfehlung figcaption { margin-top: auto; }
.empfehlung footer {
  margin-top: var(--raum-2);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--grau-linie);
  font-size: 0.88rem;
  color: var(--grau);
}
.empfehlung cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--anthrazit);
  font-size: 0.98rem;
}

/* --- Person ------------------------------------------------------------- */
.person {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 50em) {
  .person {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--raum-5);
  }
}
.person-bild {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--grau-linie);
  aspect-ratio: 4 / 5;
  max-width: 17rem;
}
.person-bild img { width: 100%; height: 100%; object-fit: cover; }
.bild-platzhalter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--raum-2);
  font-size: 0.82rem;
  color: var(--grau);
  background: repeating-linear-gradient(
    -45deg,
    #f0f2f5,
    #f0f2f5 10px,
    #e8ebef 10px,
    #e8ebef 20px
  );
}

.merkmale {
  list-style: none;
  margin: var(--raum-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2);
  grid-template-columns: 1fr;
}
@media (min-width: 36em) {
  .merkmale { grid-template-columns: repeat(2, 1fr); }
}
.merkmale li {
  border-left: 3px solid var(--gold);
  padding-left: var(--raum-2);
}
.merkmale b { display: block; color: var(--anthrazit); font-size: 1.02rem; }
.merkmale span { font-size: 0.9rem; color: var(--grau); }
/* Auf Navy-Grund müssen beide Zeilen hell sein, sonst steht Dunkel auf Dunkel. */
.flaeche-navy .merkmale b { color: var(--weiss); }
.flaeche-navy .merkmale span { color: rgba(255, 255, 255, 0.78); }

/* --- Abschluss / Kontakt ------------------------------------------------ */
.abschluss h2 { max-width: 22ch; }

.kontaktwege {
  list-style: none;
  margin: var(--raum-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2) var(--raum-4);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) {
  .kontaktwege { grid-template-columns: repeat(2, auto); justify-content: start; }
}
@media (min-width: 62em) {
  .kontaktwege { grid-template-columns: repeat(4, auto); }
}
.kontaktwege a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.98rem;
}
.kontaktwege a:hover { color: var(--gold); }
.kontaktwege svg { flex: none; width: 20px; height: 20px; fill: var(--gold); }

/* --- Formular ----------------------------------------------------------- */
.formular {
  display: grid;
  gap: var(--raum-3);
  max-width: 36rem;
  margin-top: var(--raum-4);
}
.feld { display: grid; gap: 0.35rem; }
.feld label { font-weight: 500; font-size: 0.94rem; color: var(--anthrazit); }
.feld-hinweis { font-size: 0.84rem; color: var(--grau); }
.feld input,
.feld textarea,
.feld select {
  font: inherit;
  font-size: 1rem;
  color: var(--anthrazit);
  background: var(--weiss);
  border: 1px solid #c8ccd3;
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  width: 100%;
}
.feld input:focus,
.feld textarea:focus,
.feld select:focus { border-color: var(--navy); }
.feld textarea { min-height: 8rem; resize: vertical; }
.pflicht { color: #c0392b; }

/* Formular auf Navy-Grund: Beschriftungen und Hinweise aufhellen. */
.flaeche-navy .feld label { color: var(--weiss); }
.flaeche-navy .feld-hinweis { color: rgba(255, 255, 255, 0.68); }
.flaeche-navy .feld-hinweis a { color: var(--gold); }
.flaeche-navy .pflicht { color: var(--koralle); }
.flaeche-navy .feld input,
.flaeche-navy .feld textarea,
.flaeche-navy .feld select { border-color: rgba(255, 255, 255, 0.35); }
.flaeche-navy .feld input:focus,
.flaeche-navy .feld textarea:focus,
.flaeche-navy .feld select:focus { border-color: var(--gold); }
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Hinweiskasten ------------------------------------------------------ */
.hinweis {
  border-left: 4px solid var(--cyan);
  background: rgba(29, 182, 232, 0.08);
  padding: var(--raum-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: var(--raum-3);
}
.hinweis h3 { font-size: 1.08rem; }
.hinweis p { font-size: 0.96rem; }
.hinweis-warn { border-left-color: var(--koralle); background: rgba(242, 101, 84, 0.08); }
.flaeche-navy .hinweis { background: rgba(29, 182, 232, 0.12); }

/* --- Fließtextseiten ---------------------------------------------------- */
.fliesstext { max-width: var(--breite-eng); }
.fliesstext h2 { margin-top: var(--raum-4); font-size: 1.38rem; }
.fliesstext > h2:first-child { margin-top: 0; }
.fliesstext h3 { margin-top: var(--raum-3); font-size: 1.06rem; }
.fliesstext p,
.fliesstext li { font-size: 0.98rem; }
.fliesstext ul { padding-left: 1.2rem; }
.fliesstext li { margin-bottom: 0.4rem; }
.fliesstext dl { margin: 0 0 var(--raum-3); }
.fliesstext dt { font-weight: 600; color: var(--anthrazit); margin-top: var(--raum-2); }
.fliesstext dd { margin: 0; }

/* Datum unter dem letzten Abschnitt einer Rechtsseite. */
.stand {
  margin-top: var(--raum-4);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--grau-linie);
  font-size: 0.9rem;
  color: var(--grau);
}

/* --- Coffee Talk --------------------------------------------------------
   Steht am Ende der Seiten, auf denen es gerade nicht ums Buchen des
   Sparrings geht: Interim, Lebenslauf, Impressum, Datenschutz. Ein zweites,
   niedrigschwelliges Angebot — nicht auf der Startseite und nicht auf
   /objektaufnahme/, dort bleibt es bei einer Handlung.
   ---------------------------------------------------------------------- */
.kaffee {
  margin-top: var(--raum-5);
  padding: var(--raum-3);
  background: var(--flaeche);
  border: 1px solid var(--grau-linie);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.kaffee h2 { margin-top: 0; }
.fliesstext .kaffee h2 { margin-top: 0; font-size: 1.28rem; }
.kaffee p { max-width: 34rem; }
.kaffee .knopf-reihe { margin-top: var(--raum-3); }
@media (min-width: 48em) {
  .kaffee { padding: var(--raum-4); }
}
/* Auf hellgrauem Grund braucht der Kasten eine eigene, weiße Fläche. */
.flaeche-hell .kaffee { background: var(--weiss); }

.seitenkopf {
  background: var(--navy);
  color: var(--weiss);
  padding-block: var(--raum-4) var(--raum-4);
}
@media (min-width: 48em) {
  .seitenkopf { padding-block: var(--raum-5); }
}
.seitenkopf h1 { color: var(--weiss); margin-bottom: var(--raum-2); }
.seitenkopf p { color: rgba(255, 255, 255, 0.85); }
/* Auch hier ist der Grund Navy — die Dachzeile braucht das helle Gold. */
.seitenkopf .dachzeile { color: var(--gold); }

.lauf {
  list-style: none;
  margin: var(--raum-4) 0 0;
  padding: 0;
  border-left: 2px solid var(--grau-linie);
}
.lauf li {
  position: relative;
  padding: 0 0 var(--raum-4) var(--raum-3);
}
.lauf li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  background: var(--gold);
  border-radius: 50%;
}
.lauf li:last-child { padding-bottom: 0; }
.lauf-zeit {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: 0.2rem;
}
.lauf h3 { margin-bottom: 0.1rem; font-size: 1.1rem; }
.lauf-ort {
  display: block;
  color: var(--grau);
  font-size: 0.92rem;
  margin-bottom: 0.6rem;
}
/* Stationen mit mehreren Absätzen: gleichmäßiger Abstand, ruhige Zeilen. */
.lauf li p { margin-bottom: 0.85rem; font-size: 0.98rem; }
.lauf li p:last-child { margin-bottom: 0; }

/* --- Ausbildung ---------------------------------------------------------- */
.abschluesse {
  list-style: none;
  margin: var(--raum-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2);
}
.abschluesse li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--raum-3);
}
@media (min-width: 44em) {
  .abschluesse li {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.15rem var(--raum-3);
    align-items: baseline;
  }
  .abschluesse .abschluss-zeit { grid-row: 1 / span 2; }
}
.abschluss-zeit {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-tief);
  font-variant-numeric: tabular-nums;
}
.abschluesse b { color: var(--anthrazit); font-size: 1.02rem; line-height: 1.35; }
.abschluesse span:not(.abschluss-zeit) { color: var(--grau); font-size: 0.92rem; }

/* --- Fuß ---------------------------------------------------------------- */
.fuss {
  background: var(--navy-tief);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--raum-4);
  font-size: 0.92rem;
}
.fuss a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.fuss a:hover { color: var(--gold); text-decoration: underline; }
.fuss-raster {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
}
@media (min-width: 46em) {
  .fuss-raster { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--raum-4); }
}
.fuss h2 {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--raum-2);
}
/* Das große Logo mit Slogan — der weiße Schriftzug braucht dunklen Grund. */
.fuss-logo {
  display: block;
  width: auto;
  height: 76px;
  margin-bottom: var(--raum-3);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.45rem; }
.fuss p { color: rgba(255, 255, 255, 0.7); }
.fuss-schluss {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-3);
  justify-content: space-between;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.52);
}

/* --- Bewegung: 16 px von unten, 320 ms, 90 ms Versatz -------------------
   Der Startzustand gilt nur, wenn JavaScript läuft (Klasse .js am <html>).
   Ohne JavaScript steht der Inhalt sofort da. */
.js .tritt-ein {
  opacity: 0;
  transform: translateY(16px);
}
.js .tritt-ein.ist-da {
  opacity: 1;
  transform: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  transition-delay: var(--versatz, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .tritt-ein,
  .js .tritt-ein.ist-da {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .knopf,
  .sprungmarke { transition: none; }
  .knopf:hover { transform: none; }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .kopf,
  .nav-klapp,
  .knopf-reihe,
  .fuss,
  .sprungmarke { display: none !important; }
  body { color: #000; background: #fff; }
  .flaeche-navy,
  .spitze,
  .seitenkopf { background: #fff !important; color: #000 !important; }
  .flaeche-navy h2,
  .flaeche-navy h3,
  .spitze h1,
  .seitenkopf h1 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}