@charset "UTF-8";
/* =========================================================================
   Ihr Maklerpilot
   Formregeln, damit die Seite zusammenhaelt:
     Radien   Schaltflaechen = Pille, Karten = 16px, Eingabefelder = 10px
     Akzent   genau ein Blau, ueber die ganze Seite dasselbe
     Bewegung nur transform und opacity, 90 bis 420ms, eine Kurve
   ========================================================================= */

/* --- Schrift, selbst gehostet. Kein Aufruf an Google. -------------------- */
@font-face {
  font-family: 'Jakarta';
  src: url('fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: 'Jakarta';
  src: url('fonts/jakarta-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}

/* --- Farben und Masse --------------------------------------------------- */
:root {
  --navy-1000:#04101f;
  --navy-950: #061729;
  --navy-900: #0a2136;
  --navy-850: #0e2b44;
  --navy-700: #1a415f;

  --blau:      #1a6cc0;   /* Flaechen, weisse Schrift darauf: 5.3:1 */
  --blau-hell: #2a7fd8;
  --blau-hoch: #56a9f0;   /* Schrift auf Navy: 7.3:1 */

  --creme:   #f6f1e6;
  --creme-2: #fbf8f1;
  --tinte:      #08192b;
  --tinte-weich:#4d5b6a;

  --text:     #c8d5e2;
  --text-leise:#93a4b6;

  --rot: #e0605a;

  --r-karte: 16px;
  --r-feld: 10px;
  --r-pille: 999px;

  --breite: 1200px;
  --rand: clamp(1.25rem, 5vw, 2.5rem);
  --luft: clamp(4.5rem, 9vw, 8rem);

  --kurve: cubic-bezier(.32, .72, 0, 1);
  --t-schnell: 90ms;
  --t-hover: 180ms;
  --t-auftritt: 420ms;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--text);
  font-family: 'Jakarta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.9vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); letter-spacing: -0.018em; }

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

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

.zum-inhalt {
  position: absolute; top: -100px; left: var(--rand);
  z-index: 100; background: var(--blau); color: #fff;
  padding: .8rem 1.4rem; border-radius: var(--r-pille);
  font-weight: 700; text-decoration: none;
  transition: top var(--t-hover) var(--kurve);
}
.zum-inhalt:focus { top: 1rem; }

/* --- Bausteine ---------------------------------------------------------- */
.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--luft); position: relative; }

.abschnitt--creme {
  background: var(--creme);
  color: var(--tinte-weich);
}
.abschnitt--creme h2,
.abschnitt--creme h3 { color: var(--tinte); }

.oberzeile {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blau-hoch);
  margin: 0 0 1.1rem;
}
.abschnitt--creme .oberzeile { color: var(--blau); }

.lead {
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  line-height: 1.65;
  color: var(--text);
}
.abschnitt--creme .lead { color: var(--tinte-weich); }

/* --- Schaltflaechen ----------------------------------------------------- */
.taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  white-space: nowrap;
  padding: 1rem 1.9rem;
  border: 0;
  border-radius: var(--r-pille);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--kurve),
              transform var(--t-schnell) var(--kurve),
              box-shadow var(--t-hover) var(--kurve);
}
.taste--voll {
  background: var(--blau);
  color: #fff;
  box-shadow: 0 6px 22px rgba(26, 108, 192, .28);
}
.taste--voll:hover { background: var(--blau-hell); box-shadow: 0 10px 30px rgba(26, 108, 192, .38); }
.taste--leer {
  background: rgba(255, 255, 255, .05);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.taste--leer:hover { background: rgba(255, 255, 255, .1); }
.taste:active { transform: scale(.975); }
.taste--breit { width: 100%; }

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

.textlink {
  color: var(--blau-hoch);
  text-decoration: none;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(86, 169, 240, .45);
  transition: box-shadow var(--t-hover) var(--kurve);
}
.textlink:hover { box-shadow: inset 0 -2px 0 var(--blau-hoch); }
.abschnitt--creme .textlink,
.rechtstext .textlink { color: var(--blau); box-shadow: inset 0 -1px 0 rgba(26, 108, 192, .4); }

/* --- Kopfzeile ---------------------------------------------------------- */
.wache { position: absolute; top: 0; height: 1px; width: 100%; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background-color var(--t-auftritt) var(--kurve),
              box-shadow var(--t-auftritt) var(--kurve);
}
.kopf.kopf--fest {
  background: rgba(6, 23, 41, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}
.kopf__bahn {
  width: 100%; max-width: var(--breite);
  margin-inline: auto; padding-inline: var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kopf__taste { padding: .68rem 1.35rem; font-size: .95rem; }

/* Auf schmalen Geraeten passen Marke und Taste sonst nicht nebeneinander.
   Gemessen: bei 320px braucht die volle Fassung 341px. */
@media (max-width: 430px) {
  .kopf__bahn .marke__rose { width: 32px; height: 32px; }
  .kopf__bahn .marke__strich { height: 26px; }
  .kopf__bahn .marke__gross { font-size: .98rem; }
  .kopf__bahn .marke__klein { font-size: .55rem; }
  .kopf__bahn .marke { gap: .55rem; }
  .kopf__taste { padding: .6rem 1rem; font-size: .88rem; }
}

/* --- Wortmarke ---------------------------------------------------------- */
.marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex-shrink: 0; }
.marke__rose { width: 40px; height: 40px; flex-shrink: 0; }
.marke__strich { width: 2px; height: 34px; background: var(--blau); border-radius: 2px; opacity: .85; }
.marke__wort { display: flex; flex-direction: column; line-height: 1; }
.marke__klein {
  font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  color: var(--blau-hoch); margin-bottom: .16em;
}
.marke__gross { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.marke__gross span { color: var(--text-leise); }
.marke--tinte .marke__gross { color: var(--tinte); }
.marke--tinte .marke__gross span { color: var(--tinte-weich); }
.marke--tinte .marke__klein { color: var(--blau); }
.marke--gross .marke__rose { width: 52px; height: 52px; }
.marke--gross .marke__gross { font-size: 1.5rem; }
.marke--gross .marke__klein { font-size: .74rem; }
.marke--gross .marke__strich { height: 44px; }

/* --- Held --------------------------------------------------------------- */
/* overflow:hidden haelt den Lichtschein unten drin. Ohne das ragt er
   rechts ueber den Rand und die ganze Seite laesst sich seitlich schieben. */
.held {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--luft);
  position: relative;
  overflow: hidden;
}
.held::before {
  content: '';
  position: absolute; inset: -20% -10% auto -30%;
  height: 90%;
  background: radial-gradient(ellipse at 25% 30%, rgba(26, 108, 192, .3), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.held__raster {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.4rem, 4.5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .held__raster { grid-template-columns: 1.16fr .84fr; } }

/* Bewusst kleiner als die freie h1-Groesse und die Textspalte bewusst
   breiter: die Ueberschrift darf am Schreibtisch nicht ueber zwei
   Zeilen hinauslaufen. Gemessen, nicht geschaetzt. */
.held h1 { font-size: clamp(2rem, 3.55vw, 2.85rem); margin-bottom: .55em; }

.held__text p { color: var(--text); }
.held__text .tasten { margin-top: 2rem; }
/* Leise Unterschrift unter den Schaltflaechen. Argument, das nicht mitreden will. */
.held__text .held__unterschrift {
  margin: 1.5rem 0 0;
  font-size: .95rem;
  font-style: italic;
  color: var(--text-leise);
}

.held__bild {
  position: relative;
  border-radius: var(--r-karte);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
  aspect-ratio: 3 / 2;
}
.held__bild img { width: 100%; height: 100%; object-fit: cover; }
.held__bild::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(6, 23, 41, .1) 0%, rgba(6, 23, 41, .72) 100%);
}

/* --- Video -------------------------------------------------------------- */
.video { padding-block: 0 var(--luft); }
.video__kopf { max-width: 46rem; margin-bottom: 2.2rem; }
.video__kopf p { color: var(--text-leise); }

.buehne {
  position: relative;
  border-radius: var(--r-karte);
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
  aspect-ratio: 16 / 9;
}
.buehne__standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.buehne__mitte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: var(--rand);
  background: linear-gradient(180deg, rgba(6, 23, 41, .35), rgba(6, 23, 41, .78));
}
.buehne__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%; border: 0;
  background: var(--blau); color: #fff; cursor: pointer;
  box-shadow: 0 10px 34px rgba(26, 108, 192, .5);
  transition: transform var(--t-hover) var(--kurve), background-color var(--t-hover) var(--kurve);
}
.buehne__knopf:hover { background: var(--blau-hell); transform: scale(1.06); }
.buehne__knopf:active { transform: scale(.97); }
.buehne__knopf svg { width: 26px; height: 26px; margin-left: 4px; }
.buehne__hinweis { font-size: .9rem; color: var(--text-leise); max-width: 34ch; margin: 0; }
.buehne__hinweis strong { color: var(--text); font-weight: 600; }
.buehne wistia-player, .buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Bento -------------------------------------------------------------- */
.bento { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 3rem; }
@media (min-width: 860px) {
  .bento {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(0, auto);
  }
  .bento__a { grid-column: 1 / 8;  grid-row: 1 / 3; }
  .bento__b { grid-column: 8 / 13; grid-row: 1 / 2; }
  .bento__c { grid-column: 8 / 13; grid-row: 2 / 3; }
  .bento__d { grid-column: 1 / 6;  grid-row: 3 / 4; }
  .bento__e { grid-column: 6 / 13; grid-row: 3 / 4; }
}

.kachel {
  position: relative;
  border-radius: var(--r-karte);
  background: var(--navy-900);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.kachel p { color: var(--text-leise); font-size: 1rem; margin: 0; }
.kachel h3 { margin-bottom: .5rem; }

.kachel--bild { padding: 0; min-height: 22rem; }
.kachel--bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kachel--bild::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(175deg, rgba(6, 23, 41, .35) 0%, rgba(6, 23, 41, .95) 68%);
}
.kachel__inhalt {
  position: relative; z-index: 1; margin-top: auto;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
}
.kachel--getoent {
  background:
    radial-gradient(ellipse at 88% 8%, rgba(42, 127, 216, .34), transparent 58%),
    var(--navy-850);
}

/* --- Feststellung ------------------------------------------------------- */
.feststellung { background: var(--navy-1000); }
.feststellung__satz {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #fff;
  max-width: 20ch;
  margin: 0 0 1.8rem;
}
.feststellung__satz b { color: var(--blau-hoch); font-weight: 800; }
.feststellung__text { max-width: 54ch; color: var(--text-leise); font-size: 1.08rem; }

/* --- Redaktioneller Block ----------------------------------------------- */
.redaktion__zitat {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.16;
  color: var(--tinte);
  max-width: 22ch;
  margin: 0 0 2.6rem;
}
.redaktion__spalten { column-gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 800px) { .redaktion__spalten { column-count: 2; } }
.redaktion__spalten p { max-width: none; break-inside: avoid; }
.redaktion__fuss {
  margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(8, 25, 43, .14);
  font-size: .95rem; color: var(--tinte-weich);
}

/* --- Formular ----------------------------------------------------------- */
.eintrag--creme { background: var(--creme); }
.eintrag--dunkel { background: var(--navy-900); }

.eintrag__raster { display: grid; gap: clamp(2.2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .eintrag__raster { grid-template-columns: .9fr 1.1fr; } }

.eintrag--dunkel .eintrag__mitte { max-width: 40rem; margin-inline: auto; text-align: center; }
.eintrag--dunkel .eintrag__mitte p { margin-inline: auto; }

.formular {
  position: relative;   /* haelt den Honigtopf im Formular */
  --f-flaeche: #fff;
  --f-text: var(--tinte);
  --f-etikett: var(--tinte);
  --f-hilfe: var(--tinte-weich);
  --f-rahmen: rgba(8, 25, 43, .18);
  --f-feld: #fff;
  --f-platzhalter: #5f6b78;   /* auf Weiss 5.5:1, #737f8c waeren nur 4.1:1 */

  background: var(--f-flaeche);
  color: var(--f-text);
  border-radius: var(--r-karte);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 20px 50px rgba(4, 16, 31, .1), inset 0 0 0 1px rgba(8, 25, 43, .08);
  text-align: left;
}
.formular--dunkel {
  --f-flaeche: var(--navy-850);
  --f-text: var(--text);
  --f-etikett: #fff;
  --f-hilfe: var(--text-leise);
  --f-rahmen: rgba(255, 255, 255, .17);
  --f-feld: rgba(4, 16, 31, .5);
  --f-platzhalter: #7f8fa1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.feld { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.feld > label {
  font-size: .9rem; font-weight: 700; color: var(--f-etikett); letter-spacing: -0.005em;
}
.feld__optional { font-weight: 500; color: var(--f-hilfe); }

.feld input[type=text],
.feld input[type=email],
.feld input[type=tel],
.feld textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--f-text);
  background: var(--f-feld);
  border: 1px solid var(--f-rahmen);
  border-radius: var(--r-feld);
  transition: border-color var(--t-hover) var(--kurve), box-shadow var(--t-hover) var(--kurve);
}
.feld textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--f-platzhalter); opacity: 1; }
.feld input:hover, .feld textarea:hover { border-color: var(--blau); }
.feld input:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(26, 108, 192, .26);
}
.feld--fehler input, .feld--fehler textarea { border-color: var(--rot); }
.feld--fehler input:focus, .feld--fehler textarea:focus { box-shadow: 0 0 0 3px rgba(224, 96, 90, .26); }

.feld__fehler { font-size: .87rem; font-weight: 600; color: var(--rot); }

.feld__zwei { display: grid; gap: 0 1rem; }
@media (min-width: 520px) { .feld__zwei { grid-template-columns: 1fr 1fr; } }

/* Auswahl: Informationen oder Vorbestellung */
.wahl { display: grid; gap: .6rem; margin-bottom: 1.3rem; }
@media (min-width: 520px) { .wahl { grid-template-columns: 1fr 1fr; } }
.wahl > legend {
  font-size: .9rem; font-weight: 700; color: var(--f-etikett);
  padding: 0; margin-bottom: .45rem; grid-column: 1 / -1;
}
.wahl__feld { border: 0; padding: 0; margin: 0 0 1.3rem; }
.wahl__option { position: relative; display: block; cursor: pointer; }
.wahl__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl__kasten {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid var(--f-rahmen);
  border-radius: var(--r-feld);
  background: var(--f-feld);
  font-size: .97rem; font-weight: 600;
  transition: border-color var(--t-hover) var(--kurve),
              background-color var(--t-hover) var(--kurve),
              transform var(--t-schnell) var(--kurve);
}
.wahl__kasten small { display: block; font-weight: 500; font-size: .82rem; color: var(--f-hilfe); margin-top: .1rem; }
.wahl__option:hover .wahl__kasten { border-color: var(--blau); }
.wahl__option:active .wahl__kasten { transform: scale(.985); }
.wahl__option input:checked + .wahl__kasten {
  border-color: var(--blau);
  background: rgba(26, 108, 192, .1);
  box-shadow: inset 0 0 0 1px var(--blau);
}
.wahl__option input:focus-visible + .wahl__kasten { outline: 3px solid var(--blau-hoch); outline-offset: 2px; }

/* Einwilligung */
.haken { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.4rem; }
.haken input {
  flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin: .15rem 0 0;
  accent-color: var(--blau); cursor: pointer;
}
.haken label { font-size: .9rem; line-height: 1.55; color: var(--f-hilfe); }
.haken--fehler label { color: var(--rot); }

.formular__fuss { font-size: .84rem; color: var(--f-hilfe); margin: 1rem 0 0; text-align: center; }

/* Honigtopf. Fuer Menschen unsichtbar, fuer Bots verlockend.
   Bewusst NICHT mit left:-9999px versteckt: das schiebt die Seitenbreite
   auf und erzeugt waagerechtes Scrollen. Wegschneiden statt wegschieben. */
.honigtopf {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Rueckmeldungen */
.meldung {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.3rem; border-radius: var(--r-feld);
  margin-bottom: 1.4rem; font-size: .97rem; line-height: 1.6;
}
.meldung svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }
.meldung--gut {
  background: rgba(26, 108, 192, .1);
  box-shadow: inset 0 0 0 1px rgba(26, 108, 192, .34);
  color: var(--f-text);
}
.meldung--gut strong { display: block; color: var(--f-etikett); font-size: 1.05rem; }
.meldung--schlecht {
  background: rgba(224, 96, 90, .1);
  box-shadow: inset 0 0 0 1px rgba(224, 96, 90, .36);
  color: var(--rot);
}

/* --- Fusszeile ---------------------------------------------------------- */
.fuss { background: var(--navy-1000); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.fuss__raster { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h4 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-leise); font-weight: 700; margin-bottom: 1rem;
}
.fuss address { font-style: normal; color: var(--text-leise); font-size: .97rem; line-height: 1.8; }
.fuss__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
/* Genug Flaeche zum Treffen mit dem Daumen, auch wenn die Schrift klein ist. */
.fuss__liste a {
  display: inline-block; padding: .5rem 0;
  color: var(--text-leise); text-decoration: none;
  transition: color var(--t-hover) var(--kurve);
}
.fuss__liste a:hover { color: #fff; }
.fuss__marke p { color: var(--text-leise); font-size: .95rem; margin: 1.2rem 0 0; max-width: 32ch; }
.fuss__unten {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .87rem; color: #7c8b9c;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
}

/* --- Rechtstexte -------------------------------------------------------- */
.rechtstext { background: var(--creme); color: var(--tinte-weich); padding-block: clamp(3rem, 6vw, 5rem) var(--luft); }
.rechtstext .bahn { max-width: 48rem; }
.rechtstext h1 { color: var(--tinte); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 2.5rem; }
.rechtstext h2 {
  color: var(--tinte); font-size: 1.3rem; letter-spacing: -0.02em;
  margin-top: 2.8rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(8, 25, 43, .12);
}
.rechtstext h3 { color: var(--tinte); font-size: 1.05rem; margin-top: 1.8rem; }
.rechtstext p, .rechtstext li { font-size: 1rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .5rem; }
.rechtstext address { font-style: normal; line-height: 1.9; }
.rechtstext .zurueck { display: inline-block; margin-bottom: 2rem; font-size: .95rem; }

mark.fehlt {
  background: rgba(224, 96, 90, .18);
  color: #a8322c;
  padding: .1em .45em;
  border-radius: 4px;
  font-weight: 700;
  font-size: .92em;
}

/* --- Auftritt beim Scrollen --------------------------------------------- */
/* Gesteuert per IntersectionObserver, nicht per Scroll-Ereignis.
   Wichtig: der unsichtbare Ausgangszustand gilt NUR, wenn JavaScript laeuft.
   Sonst waere bei abgeschaltetem Skript die ganze Seite leer. Die Klasse
   "mit-js" setzt ein Einzeiler im Kopf, bevor irgendetwas gezeichnet wird. */
.mit-js .auftritt {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--t-auftritt) var(--kurve),
              transform var(--t-auftritt) var(--kurve);
  transition-delay: var(--verzug, 0ms);
  will-change: transform, opacity;
}
.mit-js .auftritt.ist-da { opacity: 1; transform: none; will-change: auto; }

/* --- Wer weniger Bewegung will, bekommt keine. -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mit-js .auftritt { opacity: 1 !important; transform: none !important; }
}