/* =========================================================
   Ersoy Muhtaroğlu, Landingpage (Entwurf)
   Designsprache aus der bestehenden Empfehlungsseite
   uebernommen: Montserrat, Gold/Bronze auf Sand/Weiss/Ink.
   Karten-Radius 1.75rem, Pill-Buttons in flaechigem Gold.
   Gold ist #c8aa22, derselbe Wert wie auf der Empfehlungsseite.
   Am 17.09.2026 auf Ersoys ausdrueckliche Ansage vom frueheren
   #ccba24 zurueckgestellt, er hat die Abwaegung selbst getroffen.
   Logo und Hausschrift der DVAG kommen weiterhin nirgends vor.
   ========================================================= */

/* ---------- Montserrat, selbstgehostet ----------
   Bewusst nicht ueber Google Fonts eingebunden: das wuerde bei
   jedem Besuch die IP-Adresse an Google uebertragen.
   Dateien liegen in fonts/, Schnitte 400 / 700 / 800,
   jeweils latin und latin-ext (latin-ext wird fuer das
   ğ in Muhtaroğlu gebraucht).
   --------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/montserrat-400.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: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/montserrat-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700.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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/montserrat-800.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: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/montserrat-800-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* --- Design-Tokens --- */
  --gold: #c8aa22;
  --gold-deep: #96780f;
  --gold-soft: #e3c95f;
  --bronze: #b29450;

  --ink: #1a1a18;
  --ink-soft: #353535;
  --muted: #6f6c64;
  --paper: #ffffff;
  --sand: #faf8f3;
  --line: #e8e4d9;

  --radius-card: 1.75rem;
  --radius-pill: 999px;

  --container-w: 72rem;   /* max-w-6xl */
  --container-pad: 1.5rem;
  --container-pad-md: 2.5rem;

  --shadow-card: 0 24px 60px -45px rgba(26, 26, 24, 0.5);
  --shadow-card-lift: 0 24px 60px -40px rgba(26, 26, 24, 0.45);
  --shadow-panel: 0 12px 40px -14px rgba(26, 26, 24, 0.3);
  --shadow-bar: 0 20px 50px -25px rgba(26, 26, 24, 0.45);
  --shadow-btn: 0 10px 28px -12px rgba(200, 170, 34, 0.85);
  --shadow-btn-hover: 0 14px 34px -12px rgba(200, 170, 34, 0.95);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Montserrat", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

::selection {
  background: rgba(200, 170, 34, 0.28);
  color: var(--ink);
}

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

/* Sprungziele liegen nicht mehr nur an Sektionen: die zweite Bewegung des
   Kapitels ("der-weg") ist ein Container innerhalb der Sektion. Ohne den
   Abstand landet ein Link von aussen genau unter der fixierten Kopfzeile. */
section[id],
.intro-grid[id] {
  scroll-margin-top: 6rem;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-pad-md);
  }
}

.section {
  padding-block: 6rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 8rem;
  }
}

.section--paper {
  background: var(--paper);
}

.section--sand {
  background: var(--sand);
}

.section--ink {
  background: var(--ink);
  color: #fff;
}

.section--line-top {
  border-top: 1px solid var(--line);
}

.section--line-bottom {
  border-bottom: 1px solid var(--line);
}

/* ---------- Typografie ---------- */
.display {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.display-lg {
  /* Untergrenze 1.875rem statt 2rem: bei 32 px riss die FAQ-Ueberschrift das
     Goldwort auseinander ("wahrscheinlich" / "fragst." auf zwei Zeilen). Bei
     30 px steht sie zweizeilig, alle anderen H2 bleiben unveraendert. */
  font-size: clamp(1.875rem, 4.4vw, 3.1rem);
}

.display-md {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1,
h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

.eyebrow {
  display: block;
  text-wrap: balance;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Eigener, dunklerer Wert statt --gold-deep (#96780f, nur 4,21:1 auf Weiss):
     12 px gesperrte Versalien zaehlen nicht als grosse Schrift, noetig sind
     4,5:1. #7d6a15 ergibt gemessen 5,32:1 auf Weiss und 5,02:1 auf Sand. Der Markenwert
     --gold-deep bleibt unveraendert, er wird an groesseren Stellen gebraucht.
     Am 17.09.2026 vom frueheren #7d6d0c auf den Farbton von #c8aa22 gedreht. */
  color: #7d6a15;
}

.eyebrow--on-ink {
  color: var(--gold-soft);
}

.gold-text {
  color: transparent;
  /* Seit 17.09.2026 Zeichen fuer Zeichen der Verlauf der Empfehlungsseite,
     auf Ersoys Ansage, ihm gefaellt der dort. Die Enden sind dunkel und
     kontraststark (#8a6f0d 4,82:1 auf Weiss, #9c7f11 3,85:1), die Mitte ist
     das volle Marken-Gold #c8aa22 und liegt bei 2,28:1 auf Weiss und 2,14:1
     auf Sand. Verlangt waeren 3:1 fuer grosse Schrift, die Mitte des Wortes
     bleibt also unter der Schwelle. Ersoy weiss das und will es so, weil die
     Seite damit aussieht wie sein Empfehlungsprogramm.
     Falls es doch stoeren sollte, ist die geprueffte Alternative #a88f1c in
     der Mitte (3,18:1 auf Weiss). Nur auf Ansage aendern.
     Auf Tinte (.gold-text-on-ink) bleibt der helle Verlauf, dort stimmt er. */
  background-image: linear-gradient(96deg, #8a6f0d 0%, #c8aa22 52%, #9c7f11 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.14em;
  padding-right: 0.06em;
}

.gold-text-on-ink {
  color: transparent;
  background-image: linear-gradient(96deg, #b29450 0%, #e3c95f 48%, #c8aa22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.14em;
  padding-right: 0.06em;
}

p + p {
  margin-top: 1.15rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 0.95rem;
  box-shadow: var(--shadow-btn);
}

.btn--sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.82rem;
}

.btn:hover {
  background: var(--gold-soft);
}

.btn--lg:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

/* Fokusring folgt der Pillenform, sonst liegt das globale 4px-Eck
   sichtbar schief auf dem runden Knopf. */
.btn:focus-visible {
  border-radius: var(--radius-pill);
  outline-offset: 4px;
}

/* Telefonhoerer im Knopf. Sagt vor dem Lesen, worum es geht,
   und nutzt den Zwischenraum, der in .btn schon vorgesehen ist.
   Breite und Hoehe stehen im Markup und hier, sonst rechnet
   Safari die Flaeche falsch aus. */
.btn-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  /* Der Hoerer sitzt optisch etwas hoch, ein halbes Pixel runter. */
  transform: translateY(0.5px);
}

.btn--sm .btn-icon {
  width: 15px;
  height: 15px;
}

/* Auf schmalen Screens: Button ueber die volle Breite, Text darf umbrechen. */
@media (max-width: 559px) {
  .cta-group .btn,
  .sticky-cta .btn {
    width: 100%;
    padding-inline: 1.25rem;
  }
}

/* ---------- CTA-Gruppe (Button + identische Mikro-Zeile) ---------- */
.cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.cta-group--center {
  align-items: center;
  text-align: center;
}

.cta-micro {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 200;
  background: #fff;
  color: var(--ink);
  padding: 0.8rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: var(--shadow-bar);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* Sprungziel des Skip-Links. <main> hat dafuer tabindex="-1", sonst bewegt
   WebKit den Tastaturfokus nicht mit und der naechste Tabdruck landet wieder
   in der Kopfzeile. Der Rahmen um die halbe Seite bleibt dabei aus. */
#main-content:focus {
  outline: none;
}

/* =========================================================
   Kopfzeile
   Eine einzige Leiste, fixiert, von Anfang an sichtbar.
   Ausgangszustand: durchsichtig, nur das Logo links.
   Gescrollt: heller Balken mit Linie, CTA rechts.
   ========================================================= */
/* Die Leiste steht von Anfang an, damit das Logo beim Scrollen an seinem Platz
   bleibt. Im Ausgangszustand ist sie durchsichtig und traegt nur das Logo, es
   sieht aus wie ein Logo im Seitenkopf. Beim Runterscrollen faehrt der helle
   Balken darunter ein: Untergrund, Linie und Schatten blenden auf, das Logo
   ruehrt sich nicht. Ganz am Seitenende faehrt die ganze Leiste hoch, sonst
   verdeckt sie auf dem Handy den letzten Knopf (siehe .is-weg). */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  box-shadow: 0 10px 30px -24px rgba(26, 26, 24, 0);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease), transform 0.35s var(--ease);
}

.site-header.is-visible {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(26, 26, 24, 0.5);
}

.site-header.is-weg {
  transform: translateY(-100%);
}

/* Die Haarlinie unter dem Logo. Uebernommen von der Empfehlungsseite, dort
   heisst sie .gold-rule und steht dauerhaft, weil jene Kopfzeile nie einen
   Untergrund bekommt. Hier bekommt sie einen, deshalb blendet die Linie aus,
   sobald der helle Balken da ist.

   Absolut gesetzt und nicht als vierte Zeile im Fluss: So bleibt die Kopfzeile
   genau 78 px hoch. Der Hero rechnet mit diesem Wert (.hero-content), eine
   zusaetzliche Zeile wuerde ihn um einen Pixel verschieben.

   Der Verlauf laeuft von durchsichtig ueber Bronze nach durchsichtig, die
   Linie hat also keine harten Enden an den Bildschirmkanten. */
.header-rule {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  transition: opacity 0.3s var(--ease);
}

.site-header.is-visible .header-rule {
  opacity: 0;
}

.header-inner {
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 0.875rem var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .header-inner {
    padding-inline: var(--container-pad-md);
  }
}

/* Marke: Ersoys Logo 03, waagerecht, an allen drei Stellen.
   Die Datei ist auf das Motiv zugeschnitten und als CSS-Maske
   eingebunden: die Form steckt im Alphakanal, die Farbe kommt aus
   currentColor. Deshalb genuegt eine Datei fuer hellen und dunklen
   Grund, die Fusszeile faerbt sich ueber .wordmark--light selbst.
   Gleiche Technik wie bei den Icons weiter unten.

   Gesteuert wird ueber die Hoehe, weil die Hoehe an allen drei
   Stellen die knappe Groesse ist. Die Breite folgt aus dem
   Seitenverhaeltnis 3041 zu 452, also rund 6,7 zu 1.

   Die senkrechte Fassung (logo/em-01-versal.png) ist nicht mehr
   eingebunden. Sie bleibt fuer Briefkopf, Unterlagen und Druck. */
.wordmark {
  display: block;
  color: var(--ink);
  text-decoration: none;
  /* verhindert die Zeilenhoehe unter dem Bildkasten */
  line-height: 0;
}

.wordmark-img {
  /* Die Marke hat zwei Farben, schwarzer Schriftzug und goldener Punkt.
     Deshalb ein echtes Hintergrundbild und keine Maske: eine Maske kann
     nur eine Farbe malen, der Punkt waere verschwunden.

     WICHTIG: immer Breite UND Hoehe setzen, niemals nur eine Achse.
     Die Marke steht in einem Elternelement, dessen Breite sich nach dem
     Kind bemisst. Ohne eigene Breite entsteht ein Ringschluss: Chrome
     loest ihn auf, Safari setzt die Breite auf Null und malt nichts.

     Seitenverhaeltnis der Vorlage 3453 zu 883, also Hoehe mal 3,9105. */
  display: block;
  width: 196px;
  height: 50px;
  background-image: url("logo/em-vb-dunkel.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* Auf dunklem Grund die weisse Fassung, ebenfalls mit goldenem Punkt. */
.wordmark--light .wordmark-img {
  background-image: url("logo/em-vb-hell.png");
}

/* Der CTA in der Kopfzeile erscheint erst ab Tablet-Breite.
   Auf Mobil uebernimmt der Sticky-Button unten diese Aufgabe,
   damit nicht zwei identische Buttons gleichzeitig sichtbar sind. */
.header-cta {
  display: none;
}

@media (min-width: 860px) {
  .header-cta {
    display: inline-flex;
    /* Ganz oben steht der grosse Knopf im Hero, ein zweiter daneben waere
       doppelt. Er blendet mit dem hellen Balken auf. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }

  .site-header.is-visible .header-cta {
    opacity: 1;
    pointer-events: auto;
  }
}

/* =========================================================
   1, Hero (dunkler Seitenanfang)
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  /* Weiss, nicht Sand. Auf Sand plus Goldschimmer wirkte der Kopfbereich
     zu gelb. Die Empfehlungsseite steht ebenfalls auf Weiss. */
  background: var(--paper);
  color: var(--ink);
  /* Kein Innenabstand unten: das freigestellte Portrait sitzt buendig
     auf der Kante. Der Textteil bringt seinen eigenen Abstand mit. */
  padding-bottom: 0;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 78% 22%, rgba(200, 170, 34, 0.13) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(46% 50% at 8% 0%, rgba(178, 148, 80, 0.09) 0%, rgba(255, 255, 255, 0) 60%);
}

.hero > .container {
  position: relative;
  z-index: 1;
}


/* Hero: Text links, freigestelltes Portrait rechts. Auf schmalen
   Schirmen stapelt es, Text zuerst, Bild darunter. Das Bild steht
   in beiden Faellen unten buendig, damit die Figur nicht schwebt. */
.hero-content {
  display: grid;
  gap: 1.5rem;
  /* Die fixierte Kopfzeile liegt ueber dem Hero und nimmt im Fluss keinen
     Platz ein. 78px sind ihre Hoehe (zweimal 0.875rem Innenabstand plus 50px
     Logo), der Rest ist die Luft zwischen Logo und Rubrikzeile.
     Am 17.09.2026 von 2.25rem auf 1.5rem verkleinert, auf Ersoys Ansage: Die
     Luecke zwischen Logo und Rubrikzeile war ihm zu gross. Gemessen auf 390px
     sind es damit 38px statt 50px vom Fuss des Logos bis zur Rubrikzeile. */
  padding-top: calc(78px + 1.5rem);
  text-align: left;
  align-items: end;
}

.hero-text {
  padding-bottom: 3rem;
}

.hero-photo {
  margin: 0;
  max-width: 20rem;
  justify-self: center;
  align-self: end;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* deckt eine moegliche Haarlinie zwischen Bild und naechstem Abschnitt ab */
  margin-bottom: -1px;
}

@media (min-width: 900px) {
  .hero-content {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 2rem;
    /* Wie oben: Hoehe der Leiste plus die Luft darunter.
       Achtung, der Wert wirkt hier anders als auf dem Handy: .hero-text steht
       ab dieser Breite mittig in seiner Zeile (align-self: center), der
       Abstand ueber der Rubrikzeile ist also nicht dieser Wert, sondern eine
       Folge davon. Weniger Innenabstand macht den Hero niedriger und zieht den
       mittigen Textblock mit nach oben, eins zu eins.
       Am 17.09.2026 von 4rem auf 1rem gesetzt, dieselbe Ansage wie oben.
       Gemessen auf 1440px sind es damit 111px statt 159px vom Fuss des Logos
       bis zur Rubrikzeile. Nicht weiter verkleinern, ohne nachzumessen. */
    padding-top: calc(78px + 1rem);
  }

  /* Der Textblock sitzt mittig zwischen Logoleiste und Unterkante, statt
     unten angeschlagen zu sein. Vorher war der Abstand nach oben nur ein
     Rest und fiel je nach Bildschirmbreite anders aus. */
  .hero-text {
    align-self: center;
    padding-bottom: 0;
    padding-top: 1rem;
  }

  /* Die Figur darf nach rechts aus dem Inhaltsrahmen laufen, sonst
     wirkt sie auf breiten Schirmen verloren. Der Abschnitt schneidet
     sauber ab, weil .hero overflow: hidden hat. */
  .hero-photo {
    max-width: none;
    justify-self: stretch;
    margin-right: -3rem;
  }

  .hero-photo img {
    max-width: 530px;
    margin-left: auto;
  }
}

@media (min-width: 1400px) {
  .hero-photo {
    margin-right: -8rem;
  }

  /* Die Textspalte hat Vorrang, damit die Ueberschrift gross bleiben kann.
     Damit die Figur davon nicht kleiner wird, behaelt sie ihre Groesse und
     rueckt stattdessen weiter nach rechts. Der Abschnitt schneidet sauber ab. */
  .hero-photo img {
    width: 530px;
    max-width: none;
  }
}

.hero-title {
  margin-top: 1.25rem;
  max-width: 22ch;
}

/* Die Ueberschrift steht in drei festen Zeilen, so wie Ersoy sie gesetzt hat.
   Jede Zeile ist ein eigener Block: auf dem Handy darf eine zu lange Zeile
   umbrechen, statt aus dem Bild zu laufen, die Gruppierung bleibt erhalten. */
.hero-title .zeile {
  display: block;
}

/* Damit die drei Zeilen auf jeder Breite einzeilig bleiben, richtet sich die
   Schriftgroesse nach der Breite der Textspalte, nicht nach dem Fenster.
   Der Faktor ist unveraendert von der frueheren, laengeren Ueberschrift
   ("Vermoegen, das waechst.") uebernommen, damit die Schriftgroesse dieselbe
   bleibt. Die laengste Zeile heisst jetzt "mit deinem Geld?" und hat damit
   reichlich Luft. */
.hero-text {
  container-type: inline-size;
}

.hero-title {
  /* Untergrenze 1.5rem statt 1.7rem: ab 390 px rechnet ohnehin der cqi-Wert,
     darunter griff die Untergrenze und die damals laengste Zeile passte nicht
     mehr in die Spalte. Auf 360 px, der haeufigsten Android-Breite, stehen
     damit alle Zeilen einzeilig. */
  font-size: clamp(1.5rem, 8.05cqi, 4rem);
}

/* Namenszeile im Hero: sagt, wer dahintersteht, bevor jemand auf
   WhatsApp klickt. Bewusst leise, sie soll die Unterzeile nicht
   ueberstimmen. */
.hero-sub {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.625;
  color: var(--muted);
}

@media (min-width: 768px) {
  .hero-sub {
    font-size: 1.125rem;
  }
}

.hero .cta-group {
  margin-top: 2.5rem;
}

/* =========================================================
   2, Kennzahlen-Streifen
   ========================================================= */
.stats {
  /* Sand, damit der Streifen sich als eigener Balken absetzt und danach
     wieder Weiss beginnt. Genauso auf der Empfehlungsseite. */
  background: var(--sand);
  border-block: 1px solid var(--line);
}

.stats-list {
  display: grid;
  gap: 1.5rem;
  padding-block: 2rem;
}

@media (min-width: 640px) {
  .stats-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .stat {
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--line);
  }

  .stat:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

.stat dt {
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--gold-deep);
}

.stat dd {
  font-size: 0.9rem;
  line-height: 1.375;
  color: var(--ink-soft);
}

/* =========================================================
   3, Am Einkommen liegt es fast nie (Kapitel in zwei Bewegungen)
   Behauptung oben, Beleg direkt darunter, eine helle Flaeche,
   keine Linie dazwischen. Beide Bewegungen benutzen dasselbe
   Gitter, die zweite gespiegelt. Siehe Kommentar im HTML.
   ========================================================= */
.intro-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 860px) {
  /* Haelfte/Haelfte statt 5fr 7fr: bei 420 px Kopfspalte blieb in
     "Das Geld ist meistens schon da." ein einzelnes Wort auf der
     letzten Zeile stehen. Die Textspalte
     verliert dabei nichts, sie geht von 50 auf 44 Zeichen pro Zeile. */
  .intro-grid {
    grid-template-columns: 6fr 6fr;
    gap: 4rem;
  }
}

/* Zweite Bewegung, direkt unter der ersten statt in einer eigenen
   Sektion. Das gespiegelte Gitter (Ueberschrift rechts statt links)
   sorgt dafuer, dass beide Bewegungen ineinandergreifen statt sich zu
   wiederholen: die Antwort kommt sichtbar von der anderen Seite.

   4.5rem ist bewusst gewaehlt und liegt zwischen beiden Maszstaeben der
   Seite: ein Sektionsabstand sind 6rem, ab 768 px 8rem, ein Absatz
   1.15rem. 72 px lesen sich als Kapitelabsatz, nicht als Schnitt, der
   Leser bleibt im selben Gedanken. Groesser faellt das Kapitel
   auseinander, kleiner kleben Zahl und Behauptung aneinander. */
.intro-grid--mirror {
  margin-top: 4.5rem;
}

/* grid-row: 1 an beiden Kindern ist noetig, nicht schmueckend: die
   automatische Platzierung arbeitet nur vorwaerts. Steht das erste Kind in
   Spalte 2, findet das zweite in Zeile 1 keinen Platz mehr und rutscht in
   Zeile 2. Das Ergebnis waere ein leeres Viertel links oben und eines
   rechts unten, die Ueberschrift stuende ueber statt neben ihrem Text. */
@media (min-width: 860px) {
  .intro-grid--mirror > :first-child {
    grid-column: 2;
    grid-row: 1;
  }

  .intro-grid--mirror > :last-child {
    grid-column: 1;
    grid-row: 1;
  }
}

.intro h2 {
  max-width: 22ch;
}

.intro-copy p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.intro-question {
  font-weight: 700;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: 1.4rem;
  margin-block: 1.75rem !important;
}

/* In der ersten Bewegung ist der Zitatabsatz das letzte Element. Sein
   unterer Abstand faellt nicht mit dem Abstand zur zweiten Bewegung
   zusammen, sondern addiert sich darauf: aus 4.5rem Kapitelabsatz
   wuerden 6.25rem und damit fast ein Sektionsbruch. Nur hier, in
   "Deine Zahlen" folgt nach dem Zitat noch der Knopf. */
.intro .intro-copy > .intro-question:last-child {
  margin-block-end: 0 !important;
}

/* ---------- Aus der Praxis, die zweite Bewegung desselben Kapitels ----------
   Grid, Ueberschrift und Absatztypografie kommen bewusst von
   .intro-grid / .intro-copy, wie in der ersten Bewegung. Genau das
   haelt die beiden als ein Kapitel zusammen. Neu sind hier nur die
   Zeile ueber der Ueberschrift und der engere Absatzabstand.
   --------------------------------------------------------------------- */
.weg-head h2 {
  margin-top: 0.75rem;
  max-width: 22ch;
}

/* Fuenf kurze Absaetze statt zwei langen: der Abstand zwischen den
   normalen Absaetzen wird enger, damit der Block als ein Text liest
   und der Absatz mit der Zahl staerker heraussticht. Gilt nur hier,
   .intro-copy selbst bleibt unveraendert, sonst kippt die erste
   Bewegung mit. */
.weg .intro-copy p + p {
  margin-top: 0.85rem;
}

/* =========================================================
   4, Deine Zahlen (Sand, erster Knopf im Inhalt)
   Das Werkzeug, direkt hinter der Wende. Eine mittige Spalte
   statt des zweispaltigen Rasters, der Abschnitt soll ruhiger
   stehen als das Kapitel davor und der Knopf mittig darunter
   sitzen koennen.
   ========================================================= */
.zahlen-inner {
  max-width: 42rem;
  margin-inline: auto;
}

.zahlen-inner h2 {
  /* Abstand zur Rubrikzeile darueber, gleiche Luft wie im Kapitel. */
  margin-top: 0.75rem;
  max-width: 20ch;
}

.zahlen-inner .intro-copy {
  margin-top: 2rem;
}

/* Gilt fuer beide Abschnitte mit mittiger Spalte, "Deine Zahlen" und
   "Nach der Entscheidung". Der Abstand haengt am Bauteil, nicht an der
   Sektion, sonst braucht jeder neue Abschnitt eine eigene Regel. */
.zahlen-inner .cta-group {
  margin-top: 3rem;
}

/* =========================================================
   5, So arbeite ich (dunkler Bereich, grosse Ziffern)
   ========================================================= */
.process-head {
  max-width: none;
}

.process-head h2 {
  max-width: 26ch;
}

/* Der eine Absatz unter der Ueberschrift, der das Gespraech erklaert.
   Breit genug, dass er zweizeilig steht und rechts kein leeres Feld bleibt. */
.process-intro {
  margin-top: 1.5rem;
  max-width: 88ch;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.625;
}

.steps {
  margin-top: 3rem;
}

.step {
  display: grid;
  gap: 0.75rem;
  padding-block: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Das Raster der Schritte startet bei 860 wie der Rest der Seite, nicht schon
   bei 768: dort war die Titelspalte nur 203 px breit und "Ansprechpartner" lief
   aus der Spalte heraus. Zwischen 768 und 859 bleibt die gestapelte Fassung. */
@media (min-width: 860px) {
  .step {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* Schritt 04 ist die Weggabelung: davor bekommt der Leser seine Datei
   geschenkt, ab hier geht er den Weg mit Ersoy. Der Text sagt das, aber wer
   ueberfliegt, sieht auf der dunklen Flaeche nur Ziffern und Titel, und dort
   sieht 04 aus wie 01 bis 05. Deshalb traegt diese eine Trennlinie Gold statt
   Weiss und bekommt mehr Luft: 72 px darueber (40 plus die 32 des Schrittes
   davor) und 48 px darunter, gegen 32 zu 32 ueberall sonst. Nicht mit dem
   .step:nth-child(4) weiter unten zusammenlegen, das ist die Einblendung. */
.step:nth-child(4) {
  margin-top: 2.5rem;
  padding-top: 3rem;
  border-top-color: var(--gold);
}

.step-num {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--gold);
}

@media (min-width: 860px) {
  .step-num {
    grid-column: span 2;
    font-size: 3rem;
  }
}

.step-title {
  color: #fff;
}

@media (min-width: 860px) {
  .step-title {
    grid-column: span 4;
  }
}

.step-text {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.625;
}

@media (min-width: 860px) {
  .step-text {
    grid-column: span 6;
  }
}

/* Abstand zwischen Rubrikzeile und Ueberschrift, gleiche Luft wie in
   "Aus der Praxis". Eigene Regel, weil die Breite weiter oben steht. */
.process-head h2 {
  margin-top: 0.75rem;
}

/* =========================================================
   Textlinks im Fliesstext
   Bisher gab es dafuer keine Regel, der Browser hat seine
   eigene Unterstreichung gesetzt. Betrifft zurzeit nur die
   Mailadresse in der FAQ, gilt aber fuer jeden kuenftigen Link
   im Fliesstext mit.
   ========================================================= */
.intro-copy a,
.faq-answer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}

.intro-copy a:hover,
.faq-answer a:hover {
  color: var(--gold-deep);
}

/* =========================================================
   6, Kurz zu mir (helle Flaeche, rundes Portrait)
   Steht zwischen dem dunklen Ablauf und den Bewertungen.
   Auf dem Handy eine Spalte, das Portrait ueber dem Text,
   ab 860 zwei Spalten mit dem Bild links.
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 860px) {
  .about-grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: center;
  }
}

.about-photo {
  max-width: 340px;
  width: 100%;
}

/* Einspaltig steht das Bild ueber dem Text. Ohne diese Zeile klebt der
   Kreis links und laesst auf dem Tablet rechts ein leeres Feld. */
@media (max-width: 859px) {
  .about-photo {
    justify-self: center;
  }
}

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

.about-copy p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 58ch;
}

.about-copy h2 + p {
  margin-top: 1.5rem;
}

/* =========================================================
   7, Bewertungen
   ========================================================= */
/* Ueberschrift ueber dem Zitat, woertlich vom Bewertungsprofil */
.review-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink);
  /* "Vermoegensberatung" in Karte 4 ist breiter als die Karte und lief im
     Tabletbereich ueber das Polster hinaus. Der Browser trennt jetzt
     (lang="de" steht am Element), im Notfall bricht er das Wort um. */
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (min-width: 700px) {
  .review-title {
    font-size: 1.75rem;
  }
}

.review-stars {
  /* --gold liegt auf Weiss bei 1,98:1, fuer grafische Elemente sind 3:1
     gefordert. --gold-deep ergibt 3,75:1. */
  color: var(--gold-deep);
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  line-height: 1;
}

.review-grid {
  margin-top: 3rem;
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst zieht die laengste Ueberschrift die
     Spalte breiter als den Bildschirm, unter 360 px entstand dadurch
     waagerechtes Scrollen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

/* Zwei Karten pro Reihe, wie auf der Empfehlungsseite. Bei drei Spalten
   wurden die Zitate zu schmal und die Ueberschriften brachen staendig um. */
@media (min-width: 700px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}

@media (min-width: 700px) {
  .review {
    padding: 2rem;
  }
}

/* Ab 980px drei Spalten. Die Ueberschrift wird dafuer kleiner gesetzt,
   das war urspruenglich der Grund gegen drei Spalten. Es stehen fuenf
   Bewertungen: drei oben, zwei unten, rechts unten bleibt ein Feld frei.
   Sauber aufgehen wuerde es mit vier oder sechs Karten. */
@media (min-width: 980px) {
  .review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .review-title {
    font-size: 1.375rem;
  }
}

.review blockquote p {
  font-size: 0.9875rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.review-name {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--muted);
}

/* Der Weg zu allen Bewertungen, wie auf der Empfehlungsseite: eine Zeile,
   zentriert, gold und unterstrichen. Nicht --gold-deep (#96780f), das ergibt
   auf Sand nur 3,96:1. #7d6a15 ist derselbe geprueffte Wert wie bei den
   Rubrikzeilen und liegt auf Sand bei 5,02:1. */
.review-alle {
  margin-top: 3rem;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.review-alle a {
  color: #7d6a15;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
  transition: color 0.15s ease;
}

.review-alle a:hover {
  color: var(--ink);
}

/* =========================================================
   8, FAQ
   ========================================================= */
.faq-list {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  list-style: none;
  cursor: pointer;
  padding-block: 1.25rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.15s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--gold-deep);
}

/* Plus-Indikator, aus zwei Linien gezeichnet */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.35rem;
  /* Im geoeffneten Zustand ist das Quadrat um 45 Grad gedreht und misst dann
     rund 25 px. Ohne diesen Abstand ragt es aus der summary heraus und macht
     das Dokument breiter als das Fenster. */
  margin-right: 4px;
  background:
    linear-gradient(var(--gold-deep), var(--gold-deep)) center / 72% 2px no-repeat,
    linear-gradient(var(--gold-deep), var(--gold-deep)) center / 2px 72% no-repeat;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding-bottom: 1.5rem;
  padding-right: 2.5rem;
  max-width: 85ch;
}

.faq-answer p {
  color: var(--ink-soft);
  line-height: 1.625;
}

/* =========================================================
   9, Abschluss-CTA
   ========================================================= */
/* Abschluss: zentriert, ohne Bild. Das runde Portraet steht
   weiter oben bei "Kurz zu mir". */
.cta-band-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-band h2 {
  max-width: 24ch;
}

/* Hier stand eine Regel, die "15 Minuten" per white-space: nowrap
   zusammenhalten sollte. Sie zeigte auf .gold-text-on-ink, das Goldwort im
   Abschluss traegt aber .gold-text, sie hat also nie gewirkt. Mit dem
   richtigen Selektor bricht die Zeile auf dem Handy schlechter um
   ("Fangen wir / mit 15 Minuten an" statt "Fangen wir mit / 15 Minuten an"),
   deshalb ist sie raus. text-wrap: balance haelt das Goldwort ohnehin
   zusammen, auf allen gemessenen Breiten von 320 bis 1440. */

.cta-band p {
  margin-top: 1.5rem;
  max-width: 54ch;
  color: var(--muted);
  line-height: 1.625;
}

.cta-band .cta-group {
  align-items: center;
  margin-top: 2.5rem;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 3.5rem;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 700px) {
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
}

.footer-adresse {
  margin-top: 2.5rem;
  font-style: normal;
  line-height: 1.7;
  text-align: center;
}

.footer-kontakt {
  margin-top: 1.25rem;
  line-height: 1.7;
  text-align: center;
}

.footer-kontakt a {
  color: inherit;
  text-decoration: none;
}

.footer-kontakt a:hover,
.footer-kontakt a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 700px) {
  .footer-adresse,
  .footer-kontakt {
    text-align: left;
  }
}

.footer-copy {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

@media (min-width: 700px) {
  .footer-copy {
    text-align: left;
  }
}


.footer-copy {
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--gold-soft);
}

/* =========================================================
   Sticky-CTA (nur Mobil)
   ========================================================= */
.sticky-cta {
  display: none;
}

@media (max-width: 859px) {
  /* Platz fuer den Sticky-Knopf. Liegt bewusst auf der Fusszeile und nicht
     auf <body>: sonst bleibt unter der dunklen Flaeche ein weisser Streifen
     stehen, genau dort, wo der Knopf schon ausgeblendet ist. Nur auf Seiten
     mit Sticky-Knopf, Impressum und Datenschutz haben keinen. */
  body:has(.sticky-cta) .site-footer {
    padding-bottom: calc(3.5rem + 5.5rem);
  }

  .sticky-cta {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0.3s linear;
  }

  .sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
  }

  .sticky-cta .btn {
    width: 100%;
    padding-block: 0.9rem;
  }
}

/* =========================================================
   Einblenden beim Scrollen (wie auf der Empfehlungsseite)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

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

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

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

/* Leichter Versatz beim Einblenden, wie auf der bestehenden Seite */
.review:nth-child(3n + 2) {
  transition-delay: 80ms;
}

.review:nth-child(3n) {
  transition-delay: 160ms;
}

.step:nth-child(2) {
  transition-delay: 80ms;
}
.step:nth-child(3) {
  transition-delay: 160ms;
}
.step:nth-child(4) {
  transition-delay: 240ms;
}
.step:nth-child(5) {
  transition-delay: 320ms;
}


/* =========================================================
   Rechtliche Seiten (Impressum, Datenschutzerklaerung)
   Eigene, ruhige Textseiten. Kein Hero, kein Sticky-Knopf,
   keine Aufmerksamkeitselemente. Nur lesbarer Fliesstext.
   ========================================================= */
.legal-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.legal-header-inner {
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 1.125rem var(--container-pad);
}

@media (min-width: 768px) {
  .legal-header-inner {
    padding-inline: var(--container-pad-md);
  }
}

.legal {
  background: var(--paper);
  padding-block: 3rem 4.5rem;
}

@media (min-width: 768px) {
  .legal {
    padding-block: 4rem 6rem;
  }
}

/* Rund 70 Zeichen Zeilenlaenge, das liest sich am ruhigsten. */
.legal-inner {
  max-width: 42rem;
}

.legal h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.legal .legal-date {
  margin: 0 0 2.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.legal h2 {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.legal h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}

.legal p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}

.legal li {
  margin-bottom: 0.4rem;
}

.legal address {
  font-style: normal;
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal a:hover {
  color: var(--gold-deep);
}

/* Angaben, die vor dem Livegang noch bestaetigt werden muessen.
   Bewusst auffaellig, damit nichts davon unbemerkt online geht.
   Vor der Veroeffentlichung muessen alle .legal-todo verschwinden. */
.legal-todo {
  display: block;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--bronze);
  background: var(--sand);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.legal-todo strong {
  color: var(--ink);
}