/*
Theme Name: Mr.Finanzfakten
Theme URI: https://mrfinanzfakten.de
Author: GUMU Werbeagentur
Description: Schlankes Custom-Theme für mrfinanzfakten.de — pixelgenauer Nachbau des Impreza-Looks ohne Page-Builder. Montserrat self-hosted, Fokus Core Web Vitals.
Version: 0.2.0
Requires PHP: 8.3
Text Domain: mff
*/

/* ============================================================
   GRUNDREGEL
   ============================================================ */

/* Das hidden-Attribut heißt „gehört gerade nicht auf die Seite". Der Browser
   setzt dafür display:none — allerdings in seinem eigenen Stylesheet, und
   jede Regel von uns schlägt das, egal wie unspezifisch. Ein einziges
   display:flex auf einer Klasse reicht, damit ein per JavaScript
   ausgeblendetes Element sichtbar bleibt. Genau das ist beim
   Förderrechner passiert: der Berufseinsteigerbonus stand in der
   Aufstellung, obwohl „unter 25" nicht angehakt war.
   Deshalb hier einmal verbindlich für die ganze Seite. */
[hidden] { display: none !important; }

/* ============================================================
   TOKENS — gemessen am Live-Original (Impreza), 2026-08-28
   ============================================================ */
:root {
  --navy-hero: #063560;
  --navy: #18375d;
  --orange: #f69f0e;
  --orange-dark: #eb7d00;
  --orange-text: #b05c00; /* Orange als Schrift auf Hell (4,8:1) */
  --orange-band: #ffa826;
  --link: #ffa826;
  --gruen: #21ad34;
  --text: #000000;
  --grau: #f6f6f6;
  --container: 1140px;
  --header-h: 80px;
  --font: 'Montserrat', sans-serif;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8125;
  color: var(--text);
  background: #fff;
  /* clip statt hidden: verhindert seitliches Scrollen, ohne position:sticky zu brechen */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font); margin: 0 0 0.6em; }
h1 { font-size: 30.4px; font-weight: 600; line-height: 1.12; color: #fff; }
h2 { font-size: 27.2px; font-weight: 700; line-height: 1.14; color: var(--navy); }
h3 { font-size: 19px;   font-weight: 700; color: var(--navy); }
h4 { font-size: 17px;   font-weight: 700; color: var(--navy); }
p { margin: 0 0 1em; }
a { color: var(--orange-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.sec { padding: 40px 0; background: #fff; }
.sec--navy { background: var(--navy); color: #fff; }
.sec h2 { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff !important;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  border: none;
  border-radius: 28px;
  padding: 12px 26px;
  cursor: pointer;
  text-decoration: none !important;
  transition: filter 0.2s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn--outline {
  background: #fff;
  color: var(--orange-text) !important; /* #ef9000 erreichte nur 2,4:1 */
  border: 2px solid #e08a12;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn--outline:hover { filter: none; background: #fff7ea; }
.pulse { animation: mff-pulse 2s infinite; }
@keyframes mff-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(246, 159, 14, 0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(246, 159, 14, 0); }
  100% { box-shadow: 0 0 0 0 rgba(246, 159, 14, 0); }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.site-header__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: 20px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__logo img { width: 107px; height: 60px; object-fit: contain; display: block; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.main-nav a {
  font-size: 17px; font-weight: 700; color: var(--navy);
  padding: 8px 0;
}
.main-nav a:hover { color: var(--orange-text); text-decoration: none; }
/* Dropdown (WP-Menü, 2. Ebene) */
.main-nav li { position: relative; }
.main-nav li.menu-item-has-children > a::after {
  content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
.main-nav .sub-menu {
  display: block; /* hebt das flex der Hauptliste auf */
  position: absolute; top: 100%; left: -18px; z-index: 60;
  min-width: 290px; padding: 10px 0; margin: 0; list-style: none;
  background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(6, 53, 96, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: 0.2s ease;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { display: block; padding: 9px 20px; font-size: 15px; white-space: nowrap; }
.main-nav .sub-menu a:hover { background: var(--grau); }
.burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 26px; height: 3px; background: var(--navy); margin: 5px auto; border-radius: 2px; transition: 0.25s; }
.site-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: #fff;
  transform: translateY(-110%);
  transition: transform 0.3s ease;
  overflow: auto; padding: 30px 20px;
}
.site-nav.open { transform: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-nav a { display: block; padding: 12px 0; font-size: 20px; font-weight: 600; color: var(--navy); }
.site-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 4px 18px; border-left: 3px solid var(--orange); }
.site-nav .sub-menu a { font-size: 16px; font-weight: 500; padding: 8px 0; }
body.nav-open { overflow: hidden; }
body.nav-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO — Bühne mit Tiefe, rotierendem Schlüsselwort und Vertrauensleiste
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  background-color: var(--navy-hero);
  padding: var(--header-h) 0 0;
  color: #fff; overflow: hidden;
}
/* Foto als eigene Ebene, damit es sich langsam heranzoomen kann */
/* Äußere Ebene: nur die Parallaxe des Skripts. */
.hero__parallax { position: absolute; inset: 0; z-index: -2; will-change: transform; }
/* Innere Ebene: Bild und Zoom. Beim Laden blendet sie mit auf. */
.hero__bg {
  position: absolute; inset: 0; will-change: transform;
  /* Tim sitzt im Quellbild rechts der Mitte; 60 % rückt ihn aus dem Textbereich
     heraus, ohne die Siegel rechts zu berühren. Etwas größer als „contain",
     damit er präsenter wirkt — oben wird nur leerer Hintergrund abgeschnitten. */
  background-position: 60% 100%; background-size: auto 108%; background-repeat: no-repeat;
  animation: hero-zoom 22s ease-out forwards;
}
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Das Foto blendet gleich beim Laden auf — hinter der Ladefläche, also
   unsichtbar. Das ist Absicht: Zurückgehalten wurde es vorher bis zum Weichen
   der Fläche, wodurch der größte Bildinhalt der Seite erst nach 2 Sekunden
   entstand (LCP). Der sichtbare Ablauf ändert sich nicht — die Fläche deckt
   das Foto in dieser Zeit ohnehin ab; nur der Text darüber staffelt sich
   weiterhin erst nach dem Weichen ein. */
html.js-an .hero__bg { animation: hero-auf 0.9s ease forwards; }
@keyframes hero-auf { from { opacity: 0; } to { opacity: 1; } }
/* Farbiger Lichtschein plus Leseschutz: hält den Text vom Foto frei */
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 120% at 8% 40%, rgba(246,159,14,0.18), transparent 62%),
    /* Der Schleier schützt den Text (Ink endet bei 56 %) und gibt Tim danach
       zügig frei — vorher lag er mit 0,55 noch über seinem Gesicht. */
    linear-gradient(95deg, var(--navy-hero) 0%, rgba(6,53,96,0.93) 36%, rgba(6,53,96,0.6) 50%, rgba(6,53,96,0.16) 62%, rgba(6,53,96,0) 70%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 24px; align-items: center;
  min-height: 475px; padding-block: 30px;
}
.hero__copy { padding-bottom: 8px; max-width: 640px; }
.hero__eyebrow {
  display: inline-block; margin-bottom: 16px; padding: 6px 16px;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--link); backdrop-filter: blur(6px);
}
.hero h1 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }

/* Rotierendes Schlüsselwort */
.hero__wechsler { position: relative; display: inline-grid; vertical-align: bottom; }
.hero__wort {
  grid-area: 1 / 1; color: var(--link); white-space: nowrap;
  opacity: 0; transform: translateY(0.35em) rotateX(-45deg);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__wort.ist-aktiv { opacity: 1; transform: none; }
.hero__wort.geht {
  opacity: 0; transform: translateY(-0.35em) rotateX(45deg);
  transition-duration: 0.4s;
}

.checks { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 16px; }
.checks li { display: flex; gap: 12px; align-items: center; font-weight: 600; line-height: 1.15; color: #fff; }
.checks svg { flex: none; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* Zweiter Button als ruhige Geist-Variante statt zweitem Orange */
.btn--geist {
  background: rgba(255,255,255,0.08); color: #fff !important;
  border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(6px);
}
.btn--geist:hover { background: rgba(255,255,255,0.16); filter: none; }
.hero__seals { display: grid; gap: 14px; justify-items: end; align-self: center; }
.hero__seals img { width: 200px; height: auto; display: block; }

/* Vertrauensleiste */
.hero__trust {
  border-top: 1px solid rgba(255,255,255,0.13);
  background: rgba(3, 22, 42, 0.4); backdrop-filter: blur(8px);
}
.hero__trust-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; padding-block: 20px;
}
.hero__trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__trust-item strong {
  font-size: 26px; font-weight: 700; color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero__trust-item span { font-size: 13px; color: rgba(255,255,255,0.66); margin-top: 2px; }

/* ============================================================
   BEKANNT AUS — endlos laufendes Logoband
   ============================================================ */
.bekannt { text-align: center; padding: 52px 0 44px; overflow: hidden; }
.bekannt__titel {
  font-size: 14px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: #6b6b6b; margin-bottom: 30px; /* #8b8b8b erreichte den Kontrastwert nicht */
}
.laufband {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.laufband__spur {
  display: flex; align-items: center; gap: 64px; width: max-content;
  animation: laufband 34s linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
@keyframes laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.laufband__logo {
  height: 92px; width: auto; max-width: none; object-fit: contain; flex: none;
  filter: grayscale(100%); opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.laufband__logo:hover { filter: grayscale(0%); opacity: 1; }
.laufband__logo.bekannt__svg { height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 34px; }
  .laufband__logo { filter: none; opacity: 1; }
}
@media (max-width: 900px) {
  .laufband__spur { gap: 40px; }
  .laufband__logo { height: 68px; }
  .laufband__logo.bekannt__svg { height: 26px; }
}

/* Hero unterhalb von 900 px: Der Text steht nicht mehr neben, sondern über dem
   Bild. Auf dem Tablet reicht die Breite noch für einen seitlichen Schleier —
   auf dem Handy nicht, dort muss von oben abgedunkelt werden. */
@media (min-width: 561px) and (max-width: 900px) {
  .hero__bg { background-position: 88% 100%; background-size: auto 96%; }
  .hero__glow {
    background:
      radial-gradient(ellipse 90% 90% at 6% 30%, rgba(246,159,14,0.16), transparent 64%),
      linear-gradient(95deg, var(--navy-hero) 0%, rgba(6,53,96,0.93) 40%, rgba(6,53,96,0.66) 58%, rgba(6,53,96,0.2) 74%, rgba(6,53,96,0) 86%);
  }
}

@media (max-width: 560px) {
  /* Volle Textbreite — hier gewinnt die Lesbarkeit, Tim bleibt Atmosphäre. */
  .hero__bg { background-position: 74% 100%; background-size: auto 84%; }
  .hero__glow {
    background:
      radial-gradient(ellipse 110% 55% at 12% 18%, rgba(246,159,14,0.14), transparent 70%),
      linear-gradient(180deg, rgba(6,53,96,0.95) 0%, rgba(6,53,96,0.9) 44%, rgba(6,53,96,0.55) 76%, rgba(6,53,96,0.22) 100%);
  }
}

/* ============================================================
   LEISTUNGEN — nummerierte Karten mit Farbumschlag beim Überfahren
   ============================================================ */
.leistungen { padding: 72px 0 78px; }
.leistungen__kopf { text-align: center; margin-bottom: 40px; }
/* Wiederverwendbares Label über Überschriften */
.mff-label {
  display: inline-block; margin-bottom: 12px; padding: 5px 14px;
  border: 1px solid rgba(24,55,93,0.2); border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--orange-text);
}
.leistungen__kopf h2 { text-align: center; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -0.02em; text-wrap: balance; }
.leistungen__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.karte {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 26px 26px; border-radius: 16px;
  background: #fff; border: 1px solid #e6e1d6;
  text-decoration: none !important; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Farbfläche wächst beim Überfahren von unten hoch */
.karte::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-hero) 100%);
  transform: translateY(101%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.karte:hover, .karte:focus-visible {
  transform: translateY(-6px); border-color: transparent;
  box-shadow: 0 18px 40px rgba(6,53,96,0.22);
}
.karte:hover::before, .karte:focus-visible::before { transform: translateY(0); }
.karte > * { position: relative; z-index: 1; }

.karte__nr {
  position: absolute; top: 18px; right: 22px; z-index: 1;
  font-size: 13px; font-weight: 700; color: #c9c2b4; letter-spacing: 1px;
  transition: color 0.35s ease;
}
.karte__icon { color: var(--orange); margin-bottom: 16px; transition: transform 0.35s ease; }
.karte:hover .karte__icon { transform: scale(1.08) translateY(-2px); }
.karte__titel {
  font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px;
  transition: color 0.3s ease; text-wrap: balance;
}
.karte__text {
  font-size: 14.5px; line-height: 1.55; color: #5a5a5a; flex: 1; margin-bottom: 18px;
  transition: color 0.3s ease;
}
.karte__mehr {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--orange-text);
  transition: color 0.3s ease, gap 0.3s ease;
}
.karte:hover .karte__mehr { gap: 12px; }
/* Textfarben auf der eingefahrenen Fläche */
.karte:hover .karte__titel, .karte:focus-visible .karte__titel,
.karte:hover .karte__mehr,  .karte:focus-visible .karte__mehr { color: #fff; }
.karte:hover .karte__text,  .karte:focus-visible .karte__text { color: rgba(255,255,255,0.78); }
.karte:hover .karte__nr,    .karte:focus-visible .karte__nr { color: rgba(255,255,255,0.4); }
.karte:hover .karte__icon,  .karte:focus-visible .karte__icon { color: var(--link); }

@media (max-width: 1024px) { .leistungen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .leistungen__grid { grid-template-columns: 1fr; } }

/* ============================================================
   STATEMENT + KENNZAHLEN (ersetzt Intro-Text und Zähler-Band)
   ============================================================ */
.statement {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
  padding: 76px 0 68px;
}
.statement__glanz {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 90% at 82% 20%, rgba(246,159,14,0.14), transparent 60%);
}
.statement .container { position: relative; z-index: 1; }
/* Text links, Social-Kacheln rechts — der Platz rechts stand vorher leer. */
.statement__raster {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
.statement__text { max-width: 800px; }
.mff-label--hell { border-color: rgba(255,255,255,0.28); color: var(--link); }
.statement__gross {
  font-size: clamp(21px, 2.5vw, 29px); line-height: 1.42; font-weight: 500;
  color: #fff; margin: 0 0 20px; letter-spacing: -0.01em;
  position: relative; z-index: 0;
}
/* Schlüsselwörter mit weicher Unterlegung statt fettem Text */
.statement__gross em {
  font-style: normal; font-weight: 700; color: var(--link);
  position: relative; white-space: nowrap;
}
.statement__gross em::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 2px; height: 6px;
  background: rgba(246,159,14,0.22); border-radius: 3px; z-index: -1;
}
.statement__text > p { color: rgba(255,255,255,0.8); }
.statement__text strong { color: #fff; }
.intro__more p { color: rgba(255,255,255,0.8); }
.intro__toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--link); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px;
}
.intro__toggle::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.intro__toggle:hover { text-decoration: underline; }

/* Kennzahlen: Die nackte Zahl allein sagt zu wenig — „351" verrät nichts über
   die Qualität, „+265.000" bleibt abstrakt. Jede bekommt deshalb ein Icon als
   Anker und eine Zeile Beleg darunter. Haarlinien fassen die drei zusammen. */
.kennzahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin-top: 52px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.kennzahl {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 34px 34px 30px 0;
}
.kennzahl + .kennzahl {
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 34px;
}
.kennzahl__wert {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1;
  color: var(--link); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.kennzahl__text {
  margin: 8px 0 16px; font-size: 14.5px; line-height: 1.45;
  color: rgba(255,255,255,0.78); max-width: 22ch;
}
/* Der Beleg: was die Zahl konkret bedeutet. */
.kennzahl__zusatz {
  /* über die volle Spaltenbreite, sonst richtet sich die Trennlinie nach der
     Textlänge und die drei Spalten wirken ausgefranst */
  align-self: stretch;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.kennzahl__sterne { color: var(--orange-band); letter-spacing: 1px; font-size: 12px; }
.kennzahl__text--oben { margin-bottom: 4px; }

@media (max-width: 860px) {
  .kennzahlen { grid-template-columns: 1fr; }
  .kennzahl { padding: 26px 0 24px; }
  .kennzahl + .kennzahl {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .kennzahl__text { max-width: none; }
}
.statement__socials { display: flex; gap: 12px; }
.statement__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.statement__socials a:hover {
  background: var(--orange); border-color: transparent; transform: translateY(-3px);
}
@media (max-width: 900px) {
  .statement { padding: 56px 0 52px; }
}

/* ============================================================
   PRODUKTPARTNER — Text links, Logo-Felder rechts
   ============================================================ */
.partner { background: #fff; padding: 78px 0 70px; }
.partner__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px; align-items: center;
}
/* .sec h2 zentriert global — hier soll die Überschrift zum Text passen */
.partner__text h2 {
  text-align: left; font-size: clamp(27px, 3.1vw, 37px);
  letter-spacing: -0.02em; margin-bottom: 16px; text-wrap: balance;
}
.partner__text p { font-size: 16.5px; line-height: 1.7; color: #4f4f4f; }
.partner__siegel { display: flex; gap: 18px; margin-top: 30px; }
.partner__siegel img { width: 132px; height: auto; }

.partner__logos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.partner__feld {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; padding: 16px; border-radius: 12px;
  background: #faf8f3; border: 1px solid #eee8dc;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.partner__feld:hover { transform: translateY(-4px); background: #fff; border-color: var(--orange); }
.partner__feld img {
  max-width: 100%; max-height: 46px; width: auto; object-fit: contain;
  filter: grayscale(100%); opacity: 0.88; transition: filter 0.3s ease, opacity 0.3s ease;
}
.partner__feld:hover img { filter: grayscale(0%); opacity: 1; }
.partner__note {
  grid-column: 1 / -1; /* sonst wird der Hinweis als weitere Logo-Kachel gesetzt */
  text-align: center; margin: 16px 0 0; font-size: 14px; color: #6b6b6b;
}

@media (max-width: 1024px) {
  .partner__grid { grid-template-columns: 1fr; gap: 34px; }
  .partner__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .partner { padding: 56px 0 52px; }
  .partner__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner__siegel img { width: 96px; }
}

/* ============================================================
   KUNDENSTIMMEN
   ============================================================ */
.reviews { padding: 72px 0 66px; background: #f8f5ee; }
.reviews__kopf {
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 34px;
}
.reviews__kopf h2 { text-align: left; margin: 0; font-size: clamp(27px, 3.1vw, 37px); letter-spacing: -0.02em; }
.reviews__note {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 30px;
  background: #fff; border: 1px solid #e6e1d6;
  font-size: 14px; color: #4f4f4f !important; text-decoration: none !important;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.reviews__note:hover { border-color: var(--orange); transform: translateY(-2px); }
.reviews__note strong { color: var(--navy); }
.reviews__sterne { color: var(--orange); letter-spacing: 2px; font-size: 15px; }
@media (max-width: 700px) {
  .reviews { padding: 54px 0 50px; }
  .reviews__kopf { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   VORTEILE — vier Zusagen mit laufender Markierung
   ============================================================ */
.versprechen { background: #f8f5ee; padding: 76px 0 86px; }
.versprechen__kopf { text-align: center; margin-bottom: 38px; }
.versprechen__kopf h2 { text-align: center; font-size: clamp(27px, 3.1vw, 37px); letter-spacing: -0.02em; }

/* Eine zusammenhängende Tafel statt vier einzelner Kärtchen: Die Sektionen
   davor und danach tragen denselben Creme-Ton, deshalb braucht der Block
   einen eigenen Körper — sonst schwimmt er im Nichts. */
.versprechen__tafel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: linear-gradient(158deg, #0a2c50 0%, var(--navy-hero) 46%, #04203c 100%);
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(6,32,60,0.28), 0 3px 10px rgba(6,32,60,0.12);
}
/* Warmer Lichtschein, damit die Fläche nicht flach wirkt */
.versprechen__schein {
  position: absolute; z-index: -1; inset: auto auto -30% -12%;
  width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(246,159,14,0.22) 0%, rgba(246,159,14,0) 68%);
}

.zusage {
  position: relative;
  padding: 40px 42px 42px;
  transition: background 0.35s ease;
}
/* Haarlinien statt Abstände — so bleiben die vier Zusagen ein Objekt.
   Im 2x2-Raster: rechte Spalte bekommt links eine Linie, obere Zeile unten. */
/* nth-of-type, nicht nth-child: Der Schein-Span ist das erste Kind der Tafel
   und würde die Zählung um eins verschieben. */
.zusage:nth-of-type(2n)     { border-left: 1px solid rgba(255,255,255,0.13); }
.zusage:nth-of-type(-n + 2) { border-bottom: 1px solid rgba(255,255,255,0.13); }
.zusage:hover { background: rgba(255,255,255,0.04); }

.zusage__icon {
  /* flex statt inline-flex — sonst hängt unter dem Icon noch der Platz
     für Unterlängen der Textzeile. */
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 15px;
  color: var(--orange-band);
  background: rgba(246,159,14,0.12);
  border: 1px solid rgba(246,159,14,0.28);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}
.zusage:hover .zusage__icon { transform: translateY(-3px) scale(1.05); background: rgba(246,159,14,0.2); }

.zusage__titel {
  font-size: 20px; color: #fff; margin: 0 0 10px;
  letter-spacing: -0.01em; text-wrap: balance;
}
.zusage__text {
  margin: 0; font-size: 15px; line-height: 1.66;
  color: rgba(255,255,255,0.82); /* 8,6:1 auf dem Navy — deutlich über der Vorgabe */
}
.zusage__text strong { color: #fff; font-weight: 700; }

@media (max-width: 860px) {
  .versprechen__tafel { grid-template-columns: 1fr; }
  .zusage { padding: 32px 28px; border-left: 0 !important; }
  .zusage:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.13); }
  .zusage:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .versprechen { padding: 56px 0 62px; }
  .versprechen__tafel { border-radius: 20px; }
  .zusage { padding: 28px 22px; }
  .zusage__titel { font-size: 18.5px; }
}

/* ============================================================
   ABLAUF — Spalte bleibt stehen, Schritte scrollen durch
   ============================================================ */
.ablauf {
  background: linear-gradient(180deg, #f8f5ee 0%, #fff 100%);
  padding: 84px 0 90px;
}
.ablauf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; align-items: start; }
/* Die Spalte muss die volle Zeilenhöhe einnehmen, sonst hat sticky keinen Weg */
.ablauf__spalte { align-self: stretch; }
.ablauf__sticky { position: sticky; top: calc(var(--header-h) + 36px); }
.ablauf__sticky h2 { font-size: clamp(27px, 3.1vw, 37px); letter-spacing: -0.02em; margin-bottom: 24px; }

.ablauf__visual {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 3 / 2; box-shadow: 0 18px 44px rgba(6,53,96,0.16);
}
.ablauf__bild { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ablauf__visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(6,53,96,0) 35%, rgba(4,24,43,0.86) 100%);
}
/* Große Ziffer zählt beim Scrollen mit */
.ablauf__grossnr {
  position: absolute; left: 24px; bottom: 12px; z-index: 1;
  font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.ablauf__balken {
  height: 4px; border-radius: 2px; background: #e3ded2; margin: 22px 0 24px; overflow: hidden;
}
.ablauf__balken-fuell {
  display: block; height: 100%; width: 20%; border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-dark));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ablauf__cta { margin: 0; }

.ablauf__liste ol { list-style: none; margin: 0; padding: 0; }
.ablauf__schritt {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px;
  padding: 38px 0 42px; border-bottom: 1px solid #e6e1d6;
}
.ablauf__schritt:last-child { border-bottom: 0; }
/* Zurückgenommene Schritte werden über eigene FARBEN gedämpft, nicht über
   opacity. Mit opacity: 0.45 fiel die Ziffer auf 1,9:1 gegen Weiß — jede
   Farbe wird durch die Transparenz mit dem Hintergrund verrechnet, und bei
   0,45 ist kein Wert dunkel genug. Einzeln gesetzte Farben lassen sich dagegen
   auf lesbare Werte bringen. */
.ablauf__inhalt h3 { color: #5f6e82; transition: color 0.45s ease; }   /* 5,2:1 */
.ablauf__inhalt p  { color: #6b6b6b; transition: color 0.45s ease; }   /* 5,3:1 */
.ablauf__schritt.ist-aktiv .ablauf__inhalt h3 { color: var(--navy); }
.ablauf__schritt.ist-aktiv .ablauf__inhalt p  { color: #4f4f4f; }
.ablauf__nr {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  border: 2px solid #ddd6c8; background: #fff;
  font-size: 15px; font-weight: 800; color: #6f6857;
  font-variant-numeric: tabular-nums;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.ablauf__schritt.ist-aktiv .ablauf__nr {
  background: var(--orange); border-color: var(--orange); color: var(--navy);
  transform: scale(1.06);
}
.ablauf__inhalt h3 { font-size: 20px; margin: 12px 0 8px; letter-spacing: -0.01em; }
.ablauf__inhalt p { margin: 0; font-size: 15.5px; line-height: 1.62; }

/* Der Klebeweg ist Containerhöhe minus Höhe der klebenden Spalte. Ohne diesen
   Nachlauf war er aufgebraucht, bevor Schritt 5 überhaupt aktiv wurde — die
   linke Spalte lief dann schon wieder aus dem Bild. */
@media (min-width: 1025px) {
  .ablauf__liste { padding-bottom: clamp(340px, 44vh, 430px); }
}

/* Auf flachen Fenstern füllte die klebende Spalte (592 px) fast die gesamte
   Höhe — dann bleibt für den letzten Schritt kein Klebeweg übrig. Das Bild
   wird dort niedriger, der Rest der Spalte bleibt unverändert. */
@media (min-width: 1025px) and (max-height: 860px) {
  .ablauf__visual { aspect-ratio: auto; height: clamp(190px, 30vh, 300px); }
  .ablauf__sticky { top: calc(var(--header-h) + 20px); }
  .ablauf__grossnr { font-size: 76px; }
}

@media (max-width: 1024px) {
  .ablauf__grid { grid-template-columns: 1fr; gap: 34px; }
  .ablauf__sticky { position: static; }
  .ablauf__visual { max-height: 320px; }
}
@media (max-width: 560px) {
  .ablauf { padding: 58px 0 62px; }
  .ablauf__schritt { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .ablauf__nr { width: 42px; height: 42px; font-size: 13px; }
  .ablauf__grossnr { font-size: 68px; }
}

/* ============================================================
   TEAM
   ============================================================ */
/* Dunkle Bühne: hebt das Team vom Rest ab und lässt die Fotos wirken */
.team {
  padding: 84px 0 90px;
  /* Deutlich tiefer als die Navy-Sektion davor, sonst verschmelzen beide */
  background: #04182b;
  position: relative; overflow: hidden;
}
/* Weicher Lichtschein hinter dem Raster */
.team::before {
  content: ""; position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(246,159,14,0.16), transparent 70%);
}
.team .container { position: relative; z-index: 1; }

.team__kopf { max-width: 620px; margin-bottom: 44px; }
.team__label {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--link);
}
.team h2 {
  color: #fff; text-align: left; font-size: 44px; line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 14px;
}
.team__intro { color: rgba(255,255,255,0.72); font-size: 17px; margin: 0; }

/* Bento: Tim doppelt so groß, die anderen gleichwertig, CTA schließt ab */
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.team__karte {
  position: relative; overflow: hidden; border-radius: 16px;
  aspect-ratio: 4 / 5; background: #0a2036;
  text-decoration: none; display: block;
  transform: translateZ(0);
}
.team__karte--gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.team__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  /* Vereinheitlicht die sehr verschiedenen Foto-Hintergründe */
  filter: grayscale(100%) contrast(1.04);
  transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.team__karte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,18,34,0) 32%, rgba(3,18,34,0.42) 64%, rgba(2,14,26,0.93) 100%);
  transition: background 0.4s ease;
}
.team__karte:hover .team__foto,
.team__karte:focus-within .team__foto { filter: grayscale(0%) contrast(1) brightness(1); transform: scale(1.06); }
.team__karte:hover::after,
.team__karte:focus-within::after {
  background: linear-gradient(180deg, rgba(3,18,34,0) 40%, rgba(3,18,34,0.28) 70%, rgba(2,14,26,0.88) 100%);
}

.team__inhalt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; }
.team__name {
  color: #fff; font-size: 21px; font-weight: 700; margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.team__karte--gross .team__name { font-size: 34px; }
.team__rolle {
  color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.35; margin: 0;
  /* Rolle fährt beim Überfahren auf */
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}
.team__karte--gross .team__rolle { max-height: none; opacity: 1; font-size: 15px; }
.team__karte:hover .team__rolle,
.team__karte:focus-within .team__rolle { max-height: 60px; opacity: 1; }
/* Akzentlinie, die beim Überfahren einläuft */
.team__inhalt::before {
  content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--orange); margin-bottom: 12px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.team__karte:hover .team__inhalt::before,
.team__karte:focus-within .team__inhalt::before,
.team__karte--gross .team__inhalt::before { transform: scaleX(1); }

.team__insta {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 22px;
  background: rgba(10, 30, 52, 0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
  transition: background 0.25s ease;
}
.team__insta:hover { background: var(--orange); border-color: transparent; }

/* Abschlusskachel */
.team__karte--cta {
  grid-column: span 2; aspect-ratio: auto; /* füllt die letzte Reihe */
  background: linear-gradient(150deg, var(--orange) 0%, var(--orange-dark) 100%);
  display: flex; align-items: center;
}
.team__karte--cta::after { content: none; }
.team__cta-inhalt { padding: 28px 32px; display: block; max-width: 340px; }
.team__cta-titel { display: block; color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.team__cta-text { display: block; color: rgba(255,255,255,0.92); font-size: 14px; line-height: 1.45; margin-bottom: 16px; }
.team__cta-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--orange-text);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.team__karte--cta:hover .team__cta-pfeil { transform: translateX(6px); }

/* Tablet: drei Spalten, sonst werden die Kacheln unnötig hoch */
@media (max-width: 1024px) {
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team__karte--gross { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  .team__karte--cta { grid-column: span 2; }
}
@media (max-width: 900px) {
  .team { padding: 60px 0 64px; }
  .team h2 { font-size: 32px; }
  .team__grid { gap: 12px; }
  .team__karte--gross .team__name { font-size: 26px; }
  /* Auf Touch gibt es kein Hover — Rollen dauerhaft zeigen */
  .team__rolle { max-height: 60px; opacity: 1; }
  .team__inhalt::before { transform: scaleX(1); }
}
@media (max-width: 700px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .team__grid { gap: 10px; }
  .team__inhalt { padding: 14px; }
  .team__name { font-size: 17px; }
  .team__rolle { font-size: 12px; }
}

/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
/* ============================================================
   NEWSLETTER
   Das Formular ist ein Iframe von GetResponse mit fester Größe (Desktop
   962x185, mobil 320x348) — von außen nicht zu gestalten. Also übernimmt der
   Rahmen die Arbeit: Er schmiegt sich per width:fit-content an das Formular,
   statt es in einer zu großen Fläche schwimmen zu lassen.
   ============================================================ */
.newsletter {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #0a2743 0%, #143453 55%, #102c4a 100%);
  color: #fff; text-align: center;
  padding: 74px 20px 78px;
}
.newsletter__schein {
  position: absolute; z-index: -1; inset: -40% -10% auto auto;
  width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(246,159,14,0.16) 0%, rgba(246,159,14,0) 70%);
}
.newsletter__inhalt { display: flex; flex-direction: column; align-items: center; }

.newsletter__icon {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px;
  color: var(--orange-band);
  background: rgba(246,159,14,0.12);
  border: 1px solid rgba(246,159,14,0.3);
}
.newsletter__titel {
  color: #fff; margin: 12px 0 10px;
  font-size: clamp(25px, 3vw, 34px); letter-spacing: -0.02em; text-wrap: balance;
}
.newsletter__text {
  margin: 0 0 28px; max-width: 52ch;
  font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.8);
}

/* Der Rahmen ist so breit wie das Formular — nicht breiter. */
.newsletter__rahmen {
  width: fit-content; max-width: 100%;
  padding: 22px 26px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 22px 50px rgba(3,18,33,0.3);
}
.newsletter__form { min-height: 185px; }
.newsletter__form iframe { display: block; max-width: 100%; border: 0; }

.newsletter__zusagen {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  font-size: 14px; color: rgba(255,255,255,0.72);
}
.newsletter__zusagen li { display: flex; align-items: center; gap: 8px; }
.newsletter__zusagen li::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(33,173,52,0.9) center/9px 9px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  /* Mobil liefert GetResponse eine 320x348 große Fassung — der Rahmen zieht
     sich entsprechend zusammen, sonst schwömme das Formular in der Fläche. */
  .newsletter { padding: 56px 20px 60px; }
  .newsletter__form { min-height: 348px; }
  .newsletter__rahmen { padding: 18px 18px 14px; }
}

@media (max-width: 560px) {
  /* Das Formular ist starre 320 px breit. Sektion (20 px) und Container
     (20 px) nehmen zusammen 80 px weg — auf einem 390er Gerät blieben nur
     274 px Innenmaß, das Formular ragte rechts heraus. Der Rahmen bricht
     deshalb aus dem Container aus; der Text behält seinen Abstand. */
  .newsletter { padding-inline: 0; }
  .newsletter__rahmen {
    /* Der negative Rand allein reicht nicht — max-width:100% aus der
       Grundregel zieht den Rahmen sonst wieder auf die Containerbreite
       zurück und das Formular ragt erneut heraus. */
    margin-inline: -10px; max-width: calc(100% + 20px);
    padding: 16px 10px 12px; border-radius: 16px;
  }
}
/* ============================================================
   FOOTER
   Vorher ein zentrierter Stapel auf hellem Grau — auf 1140 px Breite wirkte
   das wie eine unfertige Handy-Ansicht. Jetzt vier Spalten auf dunklem Grund,
   der den Newsletter-Streifen darüber weiterführt und die Seite abschließt.
   ============================================================ */
.site-footer {
  background: linear-gradient(180deg, #143050 0%, #06203a 55%, #04182b 100%);
  color: rgba(255,255,255,0.78);
}
.site-footer__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px; padding-block: 62px 52px;
}

/* Marke */
.fuss-marke__logo { display: inline-block; color: #fff; }
.fuss-marke__logo .fusslogo { display: block; height: auto; width: 156px; }
.fuss-marke__claim {
  margin: 16px 0 20px; max-width: 34ch;
  font-size: 14.5px; line-height: 1.66; color: rgba(255,255,255,0.72);
}

/* Spaltenüberschriften und Links */
.fuss-spalte__titel {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin: 0 0 16px;
}
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.fuss-spalte a {
  font-size: 15px; color: rgba(255,255,255,0.82);
  transition: color 0.22s ease, transform 0.22s ease;
  display: inline-block;
}
.fuss-spalte a:hover { color: #fff; transform: translateX(3px); }

/* Vertrauensspalte.
   Beide ProvenExpert-Bausteine bringen ihr eigenes CSS mit und lassen sich
   nur von außen bändigen: Das Siegel ist ein fest 200x200 großes Konstrukt aus
   Spans (kein Bild, Breite also nicht setzbar) — deshalb herunterskaliert.
   Die Bewertungszeile zentriert sich selbst — deshalb !important. */
.fuss-vertrauen .pe-siegel { justify-content: flex-start; margin: 0 0 14px; }
.fuss-vertrauen .pe-siegel img { width: 152px; height: auto; border-radius: 8px; }
.fuss-vertrauen__cta {
  margin-top: 10px;
  /* Ohne das bricht „Termin vereinbaren" in der schmalen Spalte um */
  white-space: nowrap; padding-inline: 20px; font-size: 13px;
}

/* Eigene Bewertungszeile — vorher lieferte ProvenExpert sie per Skript mit
   fest eingebauter Farbe (#726542 inline, !important), die auf dem dunklen
   Footer unlesbar war und nur per JavaScript zu entfernen ging. */
.pe-wertung {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 13.5px;
}
.pe-wertung__sterne { color: var(--orange-band); letter-spacing: 1px; font-size: 13px; }
.pe-wertung a { color: rgba(255,255,255,0.74); }
.pe-wertung a:hover { color: #fff; }

/* Soziale Netzwerke */
.site-footer__socials { display: flex; gap: 12px; }
.site-footer__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.24s ease, color 0.24s ease, transform 0.24s ease;
}
.site-footer__socials a:hover {
  background: var(--orange-dark); border-color: transparent; color: #fff;
  transform: translateY(-3px);
}

/* Abschlusszeile */
.site-footer__unten { border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer__unten-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 28px; padding-block: 20px 24px;
}
.site-footer__copy { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.6); }
.site-footer__copy a { color: rgba(255,255,255,0.8); }
.site-footer__copy a:hover { color: #fff; }
.site-footer__recht {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.site-footer__recht a { font-size: 13.5px; color: rgba(255,255,255,0.6); }
.site-footer__recht a:hover { color: #fff; }
.site-footer__recht button { font: inherit; }

@media (max-width: 1024px) {
  .site-footer__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__oben { grid-template-columns: 1fr; gap: 32px; padding-block: 46px 38px; }
  .site-footer__unten-inner { flex-direction: column; align-items: flex-start; }
  .fuss-marke__claim { max-width: none; }
}

/* ============================================================
   INHALTSSEITEN (Standard)
   ============================================================ */
.content-page { background: #fff; padding: calc(var(--header-h) + 40px) 0 60px; }
.content-page h1 { color: var(--navy); }
.content-page--gradient { background: linear-gradient(180deg, #fff 0%, #fff 55%, #f0ece2 100%); }
.content-narrow { max-width: 800px; }
.content-page h2, .content-page h3, .content-page h4 { color: var(--navy); margin: 28px 0 14px; }
.content-page p { margin: 0 0 16px; }
.content-page a:not(.btn) { color: var(--orange-text); } /* #ef9000 war als Schrift zu blass */
.seitentitel { text-align: center; font-size: 40px; margin-bottom: 26px; }

/* ============================================================
   LEISTUNGSSEITEN (BU / PKV / Vermögensaufbau)
   ============================================================ */
.leistungsseite__cta-top { text-align: center; margin: 0 0 30px; }
.leistungsseite__cta-bottom { text-align: center; margin: 26px 0 10px; }
.leistungsseite h4 { text-transform: none; }
.pe-landing { margin: 30px 0; }
.leistungsseite__intro { font-size: 18px; line-height: 1.65; }
.leistungsseite__kapitel { margin-bottom: 8px; }
.leistungsseite__kapitel h2 { margin-top: 34px; }
.leistungsseite__kapitel h3 { margin-top: 24px; font-size: 20px; }
.leistungsseite__kapitel ul { margin: 0 0 16px; padding-left: 22px; }
.leistungsseite__kapitel li { margin-bottom: 8px; }
.leistungsseite__kapitel table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px;
}
.leistungsseite__kapitel th, .leistungsseite__kapitel td {
  border-bottom: 1px solid #e3ded2; padding: 10px 12px; text-align: left; vertical-align: top;
}
.leistungsseite__kapitel th { background: var(--grau); color: var(--navy); font-weight: 700; }
.leistungsseite__quelle,
.artikel__inhalt .leistungsseite__quelle { font-size: 13px; color: #6b6b6b; margin: -8px 0 20px; }
.leistungsseite__hinweis, .artikel__inhalt .hinweis, .avd-lp__inhalt .hinweis {
  background: #fff; border-left: 4px solid var(--orange); border-radius: 0 6px 6px 0;
  padding: 16px 20px; margin: 0 0 20px;
}
.leistungsseite__hinweis p:last-child,
.artikel__inhalt .hinweis p:last-child,
.avd-lp__inhalt .hinweis p:last-child { margin-bottom: 0; }
/* Tabellen und Listen in Artikeln wie auf den Leistungsseiten */
.artikel__inhalt table, .avd-lp__inhalt table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px;
}
.artikel__inhalt th, .artikel__inhalt td,
.avd-lp__inhalt th, .avd-lp__inhalt td {
  border-bottom: 1px solid #e3ded2; padding: 10px 12px; text-align: left; vertical-align: top;
}
.artikel__inhalt th, .avd-lp__inhalt th { background: var(--grau); color: var(--navy); font-weight: 700; }
.artikel__inhalt ul, .artikel__inhalt ol { margin: 0 0 16px; padding-left: 22px; }
.artikel__inhalt li { margin-bottom: 8px; }
.leistungsseite__ablauf h2, .leistungsseite__termin h2 { margin-top: 34px; }
.leistungsseite__ratgeber { margin-top: 40px; }
.leistungsseite__ratgeber ul { list-style: none; margin: 0; padding: 0; }
.leistungsseite__ratgeber li { margin-bottom: 10px; }
.leistungsseite__ratgeber a { font-weight: 600; }
.leistungsseite__ratgeber a::before { content: "→ "; color: var(--orange); }

/* ============================================================
   ÜBER MICH (Tim Hunger)
   ============================================================ */
.ueber { padding-top: var(--header-h); }
.ueber__split { display: grid; grid-template-columns: 1fr 1fr; }
.ueber__bild { min-height: 540px; background-size: cover; background-position: top center; background-repeat: no-repeat; }
.ueber__bild--hoch { min-height: 750px; }
.ueber__inhalt { background: #fff; display: flex; flex-direction: column; justify-content: center; }
.ueber__block { padding: 44px 150px 44px 44px; }
.ueber__split--reverse .ueber__block { padding: 44px 44px 44px 60px; }
/* Erste Überschrift ist eine H1, die folgenden H2 — optisch alle gleich.
   (Vorher H3: Die Gliederung sprang von H1 direkt auf H3.) */
.ueber__block h1, .ueber__block h2, .ueber__block h3 { font-size: 19px; color: var(--navy); font-weight: 700; margin: 0 0 16px; line-height: 1.3; }
.ueber__block p { margin: 0 0 16px; }
.ueber__block p:last-child { margin-bottom: 0; }
.ueber__block a { color: var(--orange-text); } /* Hintergrund ist weiß — #ef9000 war zu blass */
/* Im Original unsichtbar (Builder-Bug: weißer Text auf weißem Grund) —
   hier mit dem beabsichtigten Navy-Hintergrund des Tokens _header_middle_bg */
.ueber__block--navy { background: var(--navy); color: #fff; }
.ueber__block--navy h3 { color: #fff; }
.ueber__neutral { background: var(--navy); color: #fff; padding: 44px 0; }
.ueber__neutral-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ueber__neutral h3 { color: var(--link); font-weight: 700; margin: 0; }
.ueber__neutral p { margin: 0; }

/* ============================================================
   VERTRAGSANALYSE — Vollbild-Foto, Textspalte links, Navy-Box
   ============================================================ */
.vertragsanalyse {
  min-height: 100vh; padding: calc(var(--header-h) + 60px) 0 60px;
  background-size: cover; background-position: top left; background-repeat: no-repeat;
  display: flex; flex-direction: column; justify-content: center;
}
/* Flex-Elternteil: auto-Margins würden den Container auf Inhaltsbreite schrumpfen */
.vertragsanalyse .container { width: 100%; }
.vertragsanalyse__kopf { max-width: 360px; margin-bottom: 40px; }
.vertragsanalyse__kopf h1 { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0 0 16px; line-height: 1.3; }
.vertragsanalyse__box { background: rgba(6, 65, 118, 0.9); border-radius: 5px; padding: 20px; }
.vertragsanalyse__box h4 { color: var(--link); margin: 0 0 16px 20px; }
.vertragsanalyse__banner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 5px 10px 10px; }
.vbanner {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
  text-decoration: none; box-shadow: 1px 1px 10px 1px #333;
}
.vbanner__bild {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 0.35s ease;
}
.vbanner:hover .vbanner__bild { transform: scale(1.06); }
.vbanner__text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  display: flex; flex-direction: column;
}
.vbanner__titel {
  color: #fff; font-weight: 700; font-size: 20px; line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}
.vbanner__sub {
  color: #fff; font-weight: 600; font-size: 14px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s ease;
}
.vbanner:hover .vbanner__sub { max-height: 30px; opacity: 1; margin-top: 4px; }

/* ============================================================
   FINANZPLANUNG
   ============================================================ */
.finanzplanung { padding-bottom: 0; }
.finanzplanung__inhalt { padding-bottom: 54px; }
.finanzplanung__inhalt .content-narrow { margin-inline: auto; }
.finanzplanung__titel { text-align: center; margin-top: 0; font-size: 27.2px; font-weight: 700; color: var(--navy); line-height: 1.14; }
.finanzplanung__video { position: relative; aspect-ratio: 16 / 9; max-width: 560px; margin: 26px auto; }
.finanzplanung__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.finanzplanung__cta { text-align: center; margin: 24px 0 34px; }
.kundenstimmen { margin: 10px 0 20px; padding: 10px; text-align: center; }
.kundenstimme { display: none; margin: 0; padding: 10px; }
.kundenstimme.is-active { display: block; }
.kundenstimme__sterne { color: var(--orange); font-size: 22px; letter-spacing: 4px; margin-bottom: 10px; }
.kundenstimme blockquote { margin: 0; font-style: normal; }
.kundenstimme figcaption { margin-top: 10px; font-weight: 600; color: var(--navy); }
.kundenstimmen__dots { display: flex; justify-content: center; gap: 2px; margin-top: 14px; }
/* Der sichtbare Punkt bleibt 10 px, die Schaltfläche misst aber 24 px — sonst
   ist sie mit dem Finger kaum zu treffen (Lighthouse: mindestens 24×24). */
.kundenstimmen__dots button {
  width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kundenstimmen__dots button::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--navy); background: transparent;
  transition: background 0.2s ease;
}
.kundenstimmen__dots button.is-active::before { background: var(--navy); }
.kundenstimmen__dots button:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; border-radius: 50%; }
.finanzplanung__termin { background: var(--navy-hero); padding: 48px 0 56px; text-align: center; }
.finanzplanung__termin h4 { color: #fff; margin: 0 0 22px; }

/* ============================================================
   DANKE
   ============================================================ */
.danke { background-size: cover; background-position: top center; background-repeat: no-repeat; }
.danke__overlay { background: rgba(255, 255, 255, 0.75); min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header-h) + 40px) 0 60px; }
.danke__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.danke__text h1 { color: var(--navy); font-weight: 700; margin: 0 0 18px; }
.danke__text p { margin: 0 0 16px; max-width: 75%; }
.danke__team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 1.5rem; }
.danke__mitglied { margin: 0; text-align: center; }
.danke__mitglied img { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; }
.danke__name { display: block; font-weight: 700; color: var(--navy); font-size: 18px; margin-top: 8px; }
.danke__rolle { display: block; font-size: 14px; color: #333; margin-top: 2px; }

/* ============================================================
   FAQ-BLOCK ([mff_faq] / [mff_frage])
   ============================================================ */
.mff-faq { margin: 34px 0; }
.mff-faq__titel { margin-bottom: 16px; }
.mff-faq__item {
  border: 1px solid #e3ded2; border-radius: 8px; background: #fff;
  margin-bottom: 10px; overflow: hidden;
}
.mff-faq__item summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative;
  font-weight: 600; color: var(--navy); font-size: 17px;
}
.mff-faq__item summary::-webkit-details-marker { display: none; }
.mff-faq__item summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg); transition: transform 0.2s;
}
.mff-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.mff-faq__item summary:hover { background: var(--grau); }
.mff-faq__antwort { padding: 0 20px 6px; }
.mff-faq__antwort p { margin: 0 0 14px; }

/* ============================================================
   AVD-FÖRDERRECHNER ([mff_avd_rechner])
   ============================================================ */
.avdr {
  background: var(--navy-hero); color: #fff; border-radius: 8px;
  padding: 34px 30px 26px; margin: 34px 0;
}
.avdr__titel { color: #fff !important; margin: 0 0 6px !important; }
.avdr__untertitel { color: rgba(255, 255, 255, 0.85); margin: 0 0 24px; font-size: 15px; }
.avdr__feld { margin-bottom: 18px; }
.avdr__feld label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.avdr__rate { display: flex; align-items: center; gap: 18px; }
.avdr__rate input[type="range"] { flex: 1; accent-color: var(--orange); }
.avdr__rate-wert { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.avdr__rate-wert input {
  width: 84px; padding: 8px 10px; border: 0; border-radius: 6px;
  font: inherit; font-weight: 700; text-align: right; color: var(--navy);
}
.avdr__skala { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-top: 4px; }
.avdr__zeile { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; }
.avdr__zeile .avdr__feld { flex: 1; min-width: 180px; }
.avdr__feld select {
  width: 100%; padding: 9px 10px; border: 0; border-radius: 6px;
  font: inherit; color: var(--navy);
}
.avdr__feld--check label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; }
.avdr__feld--check input { width: 18px; height: 18px; accent-color: var(--orange); }
.avdr__ergebnis { background: rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 22px 22px 18px; margin-top: 10px; }
.avdr__summe { text-align: center; margin-bottom: 16px; }
.avdr__summe-zahl { display: block; font-size: 46px; font-weight: 800; color: var(--link); line-height: 1.1; }
.avdr__summe-text { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.avdr__detail { list-style: none; margin: 0 0 14px; padding: 0; }
.avdr__detail li {
  display: flex; justify-content: space-between; gap: 14px; font-size: 15px;
  padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.avdr__detail li:last-child { border-bottom: 0; }
.avdr__quote strong { color: var(--link); }
.avdr__hinweis { font-size: 14px; color: #ffd9a0; margin: 0 0 10px; }
.avdr__steuer { font-size: 13px; color: rgba(255, 255, 255, 0.75); margin: 0 0 18px; }
.avdr__cta { text-align: center; margin: 0; }
.avdr__disclaimer { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin: 18px 0 0; }
@media (max-width: 560px) {
  .avdr { padding: 24px 18px 20px; }
  .avdr__summe-zahl { font-size: 36px; }
}

/* ============================================================
   RATGEBER + ARTIKEL
   ============================================================ */
.ratgeber__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.ratgeber__filter a {
  padding: 8px 18px; border-radius: 20px; border: 2px solid var(--navy); color: var(--navy);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.ratgeber__filter a.is-active, .ratgeber__filter a:hover { background: var(--navy); color: #fff; }
.ratgeber__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ratgeber__karte { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; }
.ratgeber__bild img { display: block; width: 100%; height: 190px; object-fit: cover; }
.ratgeber__karte-inhalt { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.content-page a.ratgeber__kategorie,
.ratgeber__kategorie {
  display: inline-block; align-self: flex-start; background: var(--orange); color: var(--navy);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 12px; margin-bottom: 10px; text-decoration: none;
}
.ratgeber__karte h2 { font-size: 20px; margin: 0 0 10px; }
.ratgeber__karte h2 a { color: var(--navy); text-decoration: none; }
.ratgeber__karte p { font-size: 15px; margin: 0 0 14px; flex: 1; }
.ratgeber__mehr { color: var(--orange-text) !important; font-weight: 600; font-size: 14px; text-decoration: none; }
.artikel__kopf { text-align: center; margin-bottom: 26px; }
.artikel__kopf h1 { margin: 14px 0 8px; }
.artikel__meta { color: #777; font-size: 14px; }
.artikel__bild img { width: 100%; height: auto; border-radius: 8px; }
.artikel__inhalt { margin-top: 26px; }
.artikel__cta {
  margin-top: 44px; background: var(--navy-hero); color: #fff; border-radius: 8px;
  padding: 34px 30px; text-align: center;
}
.artikel__cta h4 { color: #fff; margin: 0 0 8px; }
.artikel__cta p { margin: 0 0 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .burger { display: block; }
  .ueber__block { padding: 40px 40px; }
  .ueber__split--reverse .ueber__block { padding: 40px 40px; }
  .ratgeber__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__seals { display: none; }
  .hero__trust-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero__trust-item strong { font-size: 21px; }
  .leistungen__grid { grid-template-columns: 1fr; }
  .tour { grid-template-columns: 1fr; }
  .interessen__grid { grid-template-columns: 1fr; }
  .beratung { grid-template-columns: 1fr; }
  .beratung__bild { min-height: 260px; }
  .beratung__inhalt { padding: 32px 22px; }
  .ueber__split { grid-template-columns: 1fr; }
  .ueber__bild { min-height: 320px; }
  .ueber__bild--hoch { min-height: 420px; order: -1; }
  .ueber__neutral-grid { grid-template-columns: 1fr; gap: 14px; }
  .vertragsanalyse__banner { grid-template-columns: 1fr; }
  .vbanner__sub { max-height: 30px; opacity: 1; margin-top: 6px; }
  .danke__grid { grid-template-columns: 1fr; }
  .danke__text p { max-width: none; }
  .seitentitel { font-size: 30px; }
}
@media (max-width: 560px) {
  .ratgeber__grid { grid-template-columns: 1fr; }
  .danke__team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .danke__fotos img { width: 130px; }
}

/* ============================================================
   LANDINGPAGE ALTERSVORSORGEDEPOT
   ============================================================ */
.avd-lp { padding-top: var(--header-h); }
.avd-lp__hero {
  background: var(--navy-hero); color: #fff;
  padding: 56px 0 50px; margin-bottom: 46px; text-align: center;
}
.avd-lp__badge {
  display: inline-block; background: var(--orange); color: var(--navy);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 18px;
}
.avd-lp__hero h1 { color: #fff; font-size: 40px; font-weight: 700; margin: 0 0 18px; }
.avd-lp__claim {
  max-width: 720px; margin: 0 auto 28px; font-size: 18px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.avd-lp__claim strong { color: var(--link); }
.avd-lp__hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 30px; }
.avd-lp__usp {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center;
  font-size: 15px; color: rgba(255, 255, 255, 0.9);
}
.avd-lp__usp li { position: relative; padding-left: 24px; }
.avd-lp__usp li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 6px; height: 11px; border-right: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen);
  transform: rotate(45deg);
}
.avd-lp__inhalt { margin-inline: auto; }
.avd-lp__inhalt > h2:first-child { margin-top: 0; }
.avd-lp__abschluss {
  background: #fff; border-top: 1px solid #e3ded2; border-bottom: 1px solid #e3ded2;
  text-align: center; padding: 46px 0; margin: 46px 0 0;
}
.avd-lp__abschluss h2 { margin-top: 0; }
.avd-lp__abschluss p { max-width: 660px; margin: 0 auto 24px; }
.avd-lp__pe { max-width: 780px; margin: 34px auto 0; }
@media (max-width: 900px) {
  .avd-lp__hero { padding: 40px 0 36px; }
  .avd-lp__hero h1 { font-size: 30px; }
  .avd-lp__claim { font-size: 16px; }
  .avd-lp__usp { flex-direction: column; align-items: flex-start; text-align: left; max-width: 340px; margin-inline: auto; }
}

/* ============================================================
   BROTKRUMEN
   ============================================================ */
.brotkrumen { margin: 0 0 18px; font-size: 14px; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.brotkrumen li + li::before { content: "›"; margin-right: 6px; color: #9a9a9a; }
.brotkrumen a { color: #6b6b6b; }
.brotkrumen a:hover { color: var(--orange-text); }
.brotkrumen span { color: #9a9a9a; }

/* ============================================================
   INHALTSVERZEICHNIS — schlanke Randspalte statt Kasten
   ============================================================ */
.mit-toc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 52px; align-items: start; }
.mit-toc__inhalt { min-width: 0; }
.toc {
  position: sticky; top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.toc__box { border: 0; background: none; padding: 0; box-shadow: none; }
.toc__titel {
  cursor: default; list-style: none;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: #6f6857; margin-bottom: 14px; /* #a9a293 erreichte nur 2,3:1 */
}
.toc__titel::-webkit-details-marker { display: none; }
.toc__titel::after { content: none; } /* Pfeil nur auf Mobil nötig */

/* Durchgehende Feinlinie, an der der aktive Abschnitt markiert wird */
.toc__liste {
  list-style: none; margin: 0; padding: 0;
  border-left: 2px solid #e9e4d9;
}
.toc__liste li { margin: 0; }
/* Höhere Spezifität nötig: .content-page a faerbt sonst alles orange */
.content-page .toc__liste a,
.toc__liste a {
  display: block; position: relative;
  padding: 8px 4px 8px 18px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.45; color: #5f5949;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.toc__liste a::before { content: none; } /* keine Nummern mehr */
.content-page .toc__liste a:hover,
.toc__liste a:hover { color: var(--navy); text-decoration: none; }
.content-page .toc__liste a.ist-aktiv,
.toc__liste a.ist-aktiv {
  color: var(--navy); font-weight: 600;
  border-left-color: var(--orange);
}
/* Sprungziele nicht unter dem festen Header verstecken */
.mit-toc__inhalt h2, .avd-lp__inhalt h2, .artikel__inhalt h2 { scroll-margin-top: calc(var(--header-h) + 16px); }

@media (max-width: 1024px) {
  /* Auf schmalen Geräten wieder als aufklappbarer Kasten */
  .mit-toc { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; max-height: none; margin-bottom: 28px; }
  .toc__box {
    background: var(--grau); border: 1px solid #e9e4d9; border-radius: 10px; padding: 14px 18px;
  }
  .toc__titel { cursor: pointer; margin-bottom: 10px; position: relative; padding-right: 22px; }
  .toc__titel::after {
    content: ""; position: absolute; right: 2px; top: 3px;
    width: 7px; height: 7px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
    transform: rotate(45deg); transition: transform 0.2s;
  }
  .toc__box[open] .toc__titel::after { transform: rotate(-135deg); top: 6px; }
}

/* ============================================================
   AUTORENBOX (E-E-A-T)
   ============================================================ */
.autorenbox {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff; border: 1px solid #e3ded2; border-radius: 8px;
  padding: 22px 24px; margin: 40px 0 0;
}
.autorenbox__bild { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.autorenbox__label {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #8a8a8a; font-weight: 700; margin-bottom: 2px;
}
.autorenbox__name { margin: 0 0 4px; font-size: 20px; }
.autorenbox__rolle { font-size: 14px; color: #6b6b6b; margin: 0 0 10px; }
.autorenbox__text p { font-size: 15px; margin: 0 0 10px; }
.autorenbox__links { display: flex; gap: 18px; margin: 0 !important; font-size: 14px; font-weight: 600; }
@media (max-width: 560px) {
  .autorenbox { flex-direction: column; gap: 14px; }
  .autorenbox__bild { width: 72px; height: 72px; }
}
.artikel__meta a { color: #6b6b6b; text-decoration: underline; }
.artikel__cta h2 { color: #fff; margin: 0 0 8px; font-size: 22px; }

/* ============================================================
   PROVENEXPERT-SIEGEL
   ============================================================ */
.pe-siegel { margin-top: 18px; display: flex; justify-content: center; }
.pe-siegel img { max-width: 100%; height: auto; }
/* In der Verzeichnis-Spalte mitkleben, im Footer nur zentriert stehen */
.toc .pe-siegel { margin-top: 16px; }

@media (max-width: 1024px) {
  .toc .pe-siegel { display: none; } /* mobil hängt es schon im Footer */
}

/* ============================================================
   SCROLL-ANIMATIONEN (Grundsystem)
   Elemente mit data-reveal starten unsichtbar und fahren beim
   Hereinscrollen ein. Ohne JS bleiben sie sichtbar (Fallback über .js-an).
   ============================================================ */
.js-an [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  /* Kein Verzug beim Zurücksetzen — der Wert steht unten an .ist-da und gilt
     dadurch nur für den Weg HIN. Sonst blendete es beim Verlassen gestaffelt
     aus, was niemand sieht und nur Rechenzeit kostet. */
  transition-delay: 0ms;
}

/* Bewegungsarten. Welcher Block welche bekommt, entscheidet die Zuordnung
   in js/main.js — kurz gesagt: Überschriften und Text steigen auf, Etiketten
   kommen von oben, Bilder fahren heran, Knöpfe und Logos ploppen auf,
   Tabellen blenden nur ein (Bewegung stört beim Lesen von Zahlen). */
.js-an [data-reveal="oben"]   { transform: translateY(-22px); }
.js-an [data-reveal="links"]  { transform: translateX(-30px); }
.js-an [data-reveal="rechts"] { transform: translateX(30px); }
.js-an [data-reveal="zoom"]   { transform: scale(0.94); }
.js-an [data-reveal="kippen"] { transform: translateY(24px) rotate(-1.4deg); }
.js-an [data-reveal="blende"] { transform: none; }
.js-an [data-reveal="pop"] {
  transform: scale(0.84);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js-an [data-reveal].ist-da {
  opacity: 1;
  transform: none;
  transition-delay: var(--verzug, 0ms);
}
/* Wer Bewegung reduziert haben will, bekommt sie nicht */
@media (prefers-reduced-motion: reduce) {
  .js-an [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   FEHLERSEITE + SUCHE
   ============================================================ */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.fehlerseite__inhalt { max-width: 700px; margin: 0 auto; text-align: center; padding: 20px 0 40px; }
.fehlerseite__code {
  display: block; font-size: clamp(80px, 13vw, 150px); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: #e6e1d6; margin-bottom: 4px;
}
.fehlerseite__inhalt h1 { margin-bottom: 12px; }
.fehlerseite__suche { display: flex; gap: 10px; margin: 28px 0; }
.fehlerseite__suche input {
  flex: 1; min-width: 0; padding: 13px 18px; font: inherit; font-size: 15px;
  border: 1px solid #ddd6c8; border-radius: 28px; background: #fff; color: var(--text);
}
.fehlerseite__suche input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.fehlerseite__suche .btn { border: 0; flex: none; }
.fehlerseite__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fehlerseite__links a {
  padding: 9px 16px; border-radius: 20px; border: 1px solid #ddd6c8;
  font-size: 14px; font-weight: 600; color: var(--navy) !important; text-decoration: none !important;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.fehlerseite__links a:hover { border-color: var(--orange); background: #fff; }
.suche__zusammenfassung { text-align: center; color: #6b6b6b; margin-top: -12px; }
.suche__form { max-width: 560px; margin: 24px auto 38px; }
.suche__leer { text-align: center; padding: 10px 0 40px; }
.suche__leer p { margin-bottom: 18px; }

/* ============================================================
   BEWERTUNGSWAND — drei Spalten laufen langsam durch
   ============================================================ */
.bwand {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  height: 520px; overflow: hidden; position: relative;
  /* Oben und unten weich ausblenden */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 11%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 11%, #000 86%, transparent);
}
.bwand__spalte { overflow: hidden; }
.bwand__lauf {
  display: flex; flex-direction: column; gap: 18px;
  animation: bwand-lauf var(--tempo, 60s) linear infinite;
}
/* Zweite Spalte in die Gegenrichtung — wirkt lebendiger */
.bwand__spalte:nth-child(2) .bwand__lauf { animation-direction: reverse; }
@keyframes bwand-lauf {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* Beim Lesen anhalten */
.bwand:hover .bwand__lauf,
.bwand:focus-within .bwand__lauf { animation-play-state: paused; }

.bkarte {
  margin: 0; background: #fff; border: 1px solid #eee8dc; border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 2px 10px rgba(6,53,96,0.04);
}
.bkarte__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bkarte__avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(140deg, var(--orange), var(--orange-dark));
  color: #fff; font-weight: 700; font-size: 16px;
}
.bkarte__name { display: block; font-weight: 700; color: var(--navy); font-size: 15px; line-height: 1.2; }
.bkarte__sterne { display: block; color: var(--orange); font-size: 13px; letter-spacing: 1px; }
.bkarte__text {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: #4f4f4f;
  /* Lange Stimmen sauber abschneiden statt die Karte sprengen */
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .bwand { height: auto; mask-image: none; -webkit-mask-image: none; }
  .bwand__lauf { animation: none; }
  /* Ohne Bewegung nur die erste Hälfte zeigen, sonst doppelt sich alles */
  .bwand__lauf .bkarte[aria-hidden="true"] { display: none; }
  /* und nur drei je Spalte, damit die Sektion nicht ausufert */
  .bwand__lauf .bkarte:nth-of-type(n + 4) { display: none; }
}
@media (max-width: 900px) {
  .bwand { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 460px; gap: 12px; }
  .bwand__lauf { gap: 12px; }
}

/* ---------- Bewertungen auf schmalen Geräten ----------
   Die senkrecht laufende Wand lebt von drei Spalten. Auf einer Spalte kämpft
   sie gegen das Seitenscrollen: Karten werden oben und unten abgeschnitten,
   Texte überlagern sich, keine Bewertung ist vollständig zu lesen.
   Deshalb hier eine andere Mechanik — waagerecht wischen mit Einrastpunkten.
   `display: contents` löst die Spaltenstruktur auf, ohne das Markup zu ändern. */
@media (max-width: 700px) {
  .bwand {
    display: flex; height: auto; gap: 14px;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Der Rand darf ausbrechen, damit die Karten am Bildschirmrand anschneiden */
    margin-inline: -20px; padding: 4px 20px 6px;
    mask-image: none; -webkit-mask-image: none;
  }
  .bwand::-webkit-scrollbar { display: none; }

  .bwand__spalte, .bwand__lauf { display: contents; }
  .bwand__lauf { animation: none; }
  /* Die Dubletten braucht nur die Endlosschleife */
  .bkarte[aria-hidden="true"] { display: none; }

  .bkarte {
    flex: 0 0 82%;              /* die nächste Karte lugt hervor */
    scroll-snap-align: center;
    display: flex; flex-direction: column;
  }
  .bkarte__text { -webkit-line-clamp: 8; }

  /* Fortschritt statt achtzehn Punkte */
  .bwand-fortschritt {
    display: block; height: 3px; margin: 16px auto 0; width: 120px;
    border-radius: 2px; background: #e3ded2; overflow: hidden;
  }
  .bwand-fortschritt span {
    display: block; height: 100%; width: 30%; border-radius: 2px;
    background: var(--orange-dark);
    transform-origin: left; transition: transform .18s linear;
  }
}
@media (min-width: 701px) { .bwand-fortschritt { display: none; } }

/* ============================================================
   SCROLL-VERHALTEN: Header, Lesefortschritt
   ============================================================ */
.site-header { transition: height 0.28s ease, box-shadow 0.28s ease, background 0.28s ease; }
body.gescrollt .site-header {
  height: 64px;
  box-shadow: 0 4px 20px rgba(6, 53, 96, 0.12);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}
body.gescrollt .site-header__logo img { width: 88px; height: 50px; transition: width 0.28s ease, height 0.28s ease; }
.site-header__logo img { transition: width 0.28s ease, height 0.28s ease; }

.lesebalken {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  pointer-events: none; background: transparent;
}
.lesebalken span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-dark));
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__logo img { transition: none; }
  .lesebalken { display: none; }
}

/* ============================================================
   EINWILLIGUNG — Banner statt Complianz
   ============================================================ */
/* Das Banner steht immer im Quelltext (Seiten kommen aus dem Cache, der Server
   kennt die Entscheidung also nicht). Sichtbar wird es erst über das Skript. */
.einwilligung[hidden] { display: none; }
.einwilligung {
  position: fixed; z-index: 9000;
  left: 50%; bottom: 0;
  width: min(720px, calc(100% - 24px));
  transform: translate(-50%, 24px);
  opacity: 0;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.einwilligung.ist-da { opacity: 1; transform: translate(-50%, -18px); }

.einwilligung__karte {
  background: #fff;
  border: 1px solid #e6e2d8;
  border-radius: 18px;
  padding: 26px 28px 20px;
  box-shadow: 0 24px 60px rgba(6, 24, 43, 0.22), 0 2px 8px rgba(6, 24, 43, 0.08);
}
.einwilligung__titel {
  font-size: 19px; line-height: 1.25; margin: 0 0 8px; color: var(--navy);
}
.einwilligung__text {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: #3d3d3d;
}

/* Ausklappbare Einzelauswahl */
.einwilligung__wahl[hidden] { display: none; }
.einwilligung__wahl {
  margin-top: 18px; border-top: 1px solid #eee9dd; padding-top: 6px;
}
.einwilligung__zeile {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid #f1ede4;
}
.einwilligung__zeile:last-child { border-bottom: none; }
.einwilligung__zeile strong {
  display: block; font-size: 14px; color: var(--navy); margin-bottom: 2px;
}
.einwilligung__zeile span {
  display: block; font-size: 13px; line-height: 1.5; color: #5a5a5a;
}
.einwilligung__fest {
  flex: none; font-size: 12px; font-weight: 700; color: #6b6b6b;
  text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px;
}
.einwilligung__schalter {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--orange-dark); cursor: pointer;
}

/* Zustimmen und Ablehnen sind bewusst gleich groß — Vorgabe der
   Datenschutzkonferenz, Ablehnen darf nicht schwerer fallen. */
.einwilligung__aktionen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px;
}
.einwilligung__btn {
  font-family: var(--font);
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  padding: 14px 18px; border-radius: 28px; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.einwilligung__btn:hover { transform: translateY(-2px); }
.einwilligung__btn--ab {
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
}
.einwilligung__btn--ab:hover { background: #f4f6f9; }
.einwilligung__btn--zu {
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff; border: 2px solid transparent;
  box-shadow: 0 6px 18px rgba(235, 125, 0, 0.32);
}
.einwilligung__btn--zu:hover { box-shadow: 0 10px 24px rgba(235, 125, 0, 0.4); }

.einwilligung__fuss {
  margin: 14px 0 0; text-align: center;
  font-size: 12.5px; color: #6b6b6b;
}
.einwilligung__fuss a, .einwilligung__mehr {
  color: #6b6b6b; text-decoration: underline; text-underline-offset: 2px;
}
.einwilligung__mehr {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px;
}
.einwilligung__fuss a:hover, .einwilligung__mehr:hover { color: var(--navy); }

@media (max-width: 560px) {
  .einwilligung__karte { padding: 22px 20px 18px; border-radius: 16px; }
  .einwilligung__aktionen { grid-template-columns: 1fr; }
  .einwilligung__titel { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .einwilligung { transition: none; }
  .einwilligung.ist-da { transform: translate(-50%, -18px); }
  .einwilligung__btn:hover { transform: none; }
}

/* Tabellen auf den Rechtsseiten (Cookie-Richtlinie) */
.content-page .tabelle { overflow-x: auto; margin: 0 0 24px; }
.content-page table {
  width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px;
}
.content-page th, .content-page td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid #e9e4d8; vertical-align: top;
}
.content-page thead th {
  background: #f7f4ec; color: var(--navy); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e2dccc;
}
.content-page tbody tr:last-child td { border-bottom: none; }
.content-page td code {
  font-size: 13px; background: #f4f1e9; padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ============================================================
   SOCIAL-KACHELN IN 3D
   Nachgebaut statt als Bild eingebunden: bleibt auf jedem Display scharf,
   wiegt ein paar Kilobyte statt hunderter und lässt sich animieren.

   ZWEI EBENEN mit Absicht — außen schwebt die Kachel (Keyframes), innen
   kippt sie zum Mauszeiger (JavaScript). Auf einem Element würden sich
   beide dasselbe transform streitig machen und ruckeln.
   ============================================================ */
.statement__sozial { display: flex; flex-direction: column; align-items: center; gap: 0; }
.statement__sozial-titel {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.kacheln3d {
  display: grid; grid-template-columns: repeat(3, auto);
  justify-items: center; align-items: center;
  gap: 4px 2px;
  /* Die Kacheln stehen versetzt und schweben — ohne diesen Rand schöben sie
     sich über die Überschrift und unter die Trennlinie. */
  padding: 46px 0 62px;
}
/* Untere Reihe: beide über je zwei Spalten zentrieren, dann sitzen sie
   versetzt in den Lücken der oberen Reihe. */
.kachel3d:nth-child(4) { grid-column: 1 / 3; justify-self: center; }
.kachel3d:nth-child(5) { grid-column: 2 / 4; justify-self: center; }

/* --- Äußere Ebene: Lage und Schweben --- */
.kachel3d {
  --kante: 118px;
  position: relative; z-index: var(--ebene, 1);
  width: calc(var(--kante) * var(--gr, 1));
  aspect-ratio: 1;
  border-radius: 27%;
  display: block;
}
.kachel3d:hover { z-index: 9; }
/* DRITTE Ebene. Jede Ebene besitzt genau ein transform, sonst überschreiben
   sie sich gegenseitig: außen der Auftritt beim Hereinscrollen, hier die Lage
   und das Schweben, innen das Kippen zum Zeiger. */
.kachel3d__schweben {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dreh, 0deg));
  animation: kachel-schweben 6s ease-in-out infinite;
  animation-delay: var(--takt, 0s);
  will-change: transform;
}
.kachel3d:hover .kachel3d__schweben { animation-play-state: paused; }

@keyframes kachel-schweben {
  0%, 100% { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dreh, 0deg)); }
  50%      { transform: translate(var(--dx, 0), calc(var(--dy, 0px) - 10px)) rotate(calc(var(--dreh, 0deg) * 0.35)); }
}

/* --- Innere Ebene: Körper, Kippen zum Zeiger --- */
.kachel3d__koerper {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%; border-radius: inherit;
  background: var(--flaeche, #333);
  color: #fff;
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--zoom, 1));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.55),
    inset 0 -9px 16px rgba(0,0,0,0.28),
    0 12px 0 -4px rgba(0,0,0,0.3),
    0 30px 40px -16px rgba(2,14,28,0.75);
}
/* Während der Zeiger darüberfährt darf die Kachel nicht nachhinken. */
.kachel3d--folgt .kachel3d__koerper { transition: transform 0.09s linear, box-shadow 0.35s ease; }

/* Die Symbole wachsen mit der Kachel. Bemessen wird die HÖHE, nicht die
   Breite: Die fünf Zeichen haben verschiedene Seitenverhältnisse (Facebooks
   „f" ist schmal, YouTubes Button breit) — über die Breite geregelt wirkten
   sie unterschiedlich groß. Die Feinwerte darunter gleichen aus, wie viel
   Fläche das jeweilige Zeichen in seiner Zeichenfläche einnimmt. */
.kachel3d svg {
  position: relative; z-index: 2;
  width: auto; height: 48%;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.32));
}
/* Gemessen, wie viel Fläche jedes Zeichen in seiner Zeichenfläche wirklich
   bemalt (getBBox gegen viewBox) — daraus die Höhe je Marke so gesetzt, dass
   alle fünf gleich groß WIRKEN. YouTubes Knopf füllte nur 74 % seiner Fläche,
   TikToks Note und Facebooks „f" füllen sie ganz. */
.kachel3d--tiktok svg   { height: 43%; }
.kachel3d--facebook svg { height: 46%; }
.kachel3d--youtube svg  { height: 54%; }
.kachel3d--linkedin svg { height: 48%; }
.kachel3d__glanz {
  position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background: linear-gradient(148deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.1) 34%, rgba(255,255,255,0) 56%);
}

/* Beim Hovern: anheben, vergrößern, Markenfarbe glimmt dahinter auf. */
.kachel3d::after {
  content: ""; position: absolute; inset: 8%; border-radius: inherit; z-index: -1;
  background: var(--schein, transparent);
  opacity: 0; filter: blur(22px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: scale(0.85);
}
.kachel3d:hover::after, .kachel3d:focus-visible::after { opacity: 0.85; transform: scale(1.25); }

.kachel3d:hover .kachel3d__koerper,
.kachel3d:focus-visible .kachel3d__koerper {
  --zoom: 1.18;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.62),
    inset 0 -9px 16px rgba(0,0,0,0.26),
    0 18px 0 -4px rgba(0,0,0,0.32),
    0 44px 56px -18px rgba(2,14,28,0.85);
}
/* Die übrigen Kacheln treten leicht zurück. */
.kacheln3d:hover .kachel3d:not(:hover) .kachel3d__koerper { --zoom: 0.94; filter: saturate(0.7) brightness(0.82); }
.kachel3d__koerper { filter: saturate(1) brightness(1); transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, filter 0.35s ease; }

.kachel3d--instagram { --flaeche: radial-gradient(circle at 28% 108%, #fdf497 0%, #fd5949 44%, #d6249f 62%, #285aeb 92%); --schein: #d6249f; }
.kachel3d--tiktok    { --flaeche: linear-gradient(160deg, #2b2b33 0%, #0d0d12 60%); --schein: #25f4ee; }
.kachel3d--linkedin  { --flaeche: linear-gradient(160deg, #1583d6 0%, #0a66c2 55%, #08508f 100%); --schein: #0a66c2; }
.kachel3d--youtube   { --flaeche: linear-gradient(160deg, #ff3b3b 0%, #f00 55%, #c40000 100%); --schein: #ff0000; }
.kachel3d--facebook  { --flaeche: linear-gradient(160deg, #3b8dff 0%, #1877f2 55%, #0d5bc0 100%); --schein: #1877f2; }

.kachel3d:focus-visible { outline: 3px solid var(--orange-band); outline-offset: 8px; }

@media (max-width: 1100px) { .kachel3d { --kante: 100px; } }
@media (max-width: 900px)  { .statement__raster { grid-template-columns: 1fr; gap: 40px; } .kachel3d { --kante: 96px; } }
@media (max-width: 560px)  { .kachel3d { --kante: 78px; } .kacheln3d { padding: 36px 0 48px; } }
@media (prefers-reduced-motion: reduce) {
  .kachel3d { animation: none; }
  .kachel3d__koerper { transition: none; }
}


/* --- Auftritt der Social-Kacheln beim Hereinscrollen ---
   Jede kommt aus einer anderen Richtung mit eigener Drehung und eigenem
   Versatz, damit die Gruppe nicht wie ein Block erscheint. Liegt auf der
   ÄUSSEREN Ebene; Schweben und Kippen bleiben davon unberührt. */
.js-an .kachel3d[data-reveal="kachel"] {
  transition: opacity 0.62s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0ms;
}
.js-an .kachel3d[data-reveal="kachel"].ist-da {
  transform: none;
  transition-delay: var(--auftritt, 0ms);
}
.js-an .kachel3d--tiktok[data-reveal]    { transform: translate(-46px, -30px) rotate(-18deg) scale(0.55); }
.js-an .kachel3d--instagram[data-reveal] { transform: translateY(52px) rotate(6deg) scale(0.5); }
.js-an .kachel3d--youtube[data-reveal]   { transform: translate(48px, -26px) rotate(16deg) scale(0.55); }
.js-an .kachel3d--facebook[data-reveal]  { transform: translate(-40px, 40px) rotate(13deg) scale(0.55); }
.js-an .kachel3d--linkedin[data-reveal]  { transform: translate(44px, 38px) rotate(-15deg) scale(0.55); }

@media (prefers-reduced-motion: reduce) {
  .js-an .kachel3d[data-reveal] { transform: none !important; }
}

/* Klick-zum-Laden für das Newsletter-Formular */
.newsletter__laden {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; min-width: min(420px, 74vw);
  padding: 26px 30px; border-radius: 14px; cursor: pointer;
  font-family: var(--font); text-align: center;
  color: #fff;
  background: rgba(255,255,255,0.07);
  border: 1px dashed rgba(255,255,255,0.3);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.newsletter__laden:hover { background: rgba(255,255,255,0.12); border-color: rgba(246,159,14,0.55); transform: translateY(-2px); }
.newsletter__laden-titel { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.newsletter__laden-hinweis { font-size: 13px; color: rgba(255,255,255,0.66); }
.newsletter__laden.ist-am-laden { opacity: 0.6; cursor: progress; }
.newsletter__laden.ist-am-laden .newsletter__laden-titel::after { content: " …"; }
/* Ohne geladenes Formular braucht der Rahmen keine feste Höhe */
.newsletter__form:has(.newsletter__laden) { min-height: 0; }

/* ============================================================
   WEITERLESEN — Themenseite und verwandte Ratgeber unter dem Artikel
   Schließt die Lücke, dass Ratgeber bisher fast nur auf /anmeldung/
   verwiesen und der Weg zurück zur Säulenseite fehlte.
   ============================================================ */
.weiterlesen { margin: 44px 0 8px; }
.weiterlesen__titel { font-size: 21px; margin: 0 0 18px; }
.weiterlesen__raster {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px;
}
.weiterlesen__marke {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px;
}

/* Die Themenseite als hervorgehobene Kachel */
.weiterlesen__saeule {
  position: relative; display: block;
  padding: 24px 26px 26px; border-radius: 16px;
  background: linear-gradient(158deg, #0d2b4c 0%, var(--navy) 60%, #061f38 100%);
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.weiterlesen__saeule:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(6,32,60,0.26); }
.weiterlesen__saeule .weiterlesen__marke { color: var(--orange-band); }
.weiterlesen__kopf {
  display: block; font-size: 19px; font-weight: 700; line-height: 1.25;
  color: #fff; margin-bottom: 8px; letter-spacing: -0.01em;
}
.weiterlesen__text { display: block; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.8); }
.weiterlesen__pfeil {
  position: absolute; right: 22px; bottom: 20px; font-size: 20px;
  color: var(--orange-band); transition: transform 0.3s ease;
}
.weiterlesen__saeule:hover .weiterlesen__pfeil { transform: translateX(4px); }

/* Verwandte Beiträge als schlichte Liste */
.weiterlesen__mehr {
  padding: 24px 24px 22px; border-radius: 16px;
  background: #faf8f3; border: 1px solid #ece6d9;
}
.weiterlesen__mehr .weiterlesen__marke { color: #6b6b6b; }
.weiterlesen__mehr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.weiterlesen__mehr li { padding-left: 20px; position: relative; line-height: 1.45; }
.weiterlesen__mehr li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--orange-text); font-weight: 700;
}
/* Höhere Spezifität nötig: die globale a-Regel färbt sonst alles orange */
.weiterlesen .weiterlesen__mehr a { font-size: 15px; color: var(--navy); }
.weiterlesen .weiterlesen__mehr a:hover { color: var(--orange-text); }
/* Ohne Themenseite (Kategorie „Beratung") füllt die Liste die volle Breite */
.weiterlesen__mehr:only-child { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .weiterlesen__raster { grid-template-columns: 1fr; }
}


/* Kategorieseiten: Einleitung und Verweis auf die Themenseite */
.ratgeber__einleitung {
  max-width: 74ch; margin: 0 auto 22px; text-align: center;
  font-size: 16.5px; line-height: 1.62; color: #4a4a4a;
}
.ratgeber__saeule {
  text-align: center; margin: 0 0 26px; font-size: 15px; color: #5a5a5a;
}
.ratgeber__saeule a { font-weight: 700; }
.ratgeber .brotkrumen { justify-content: center; }

/* Einleitung auf der Themenwahl-Seite (war mit 46 Wörtern zu dünn) */
.vertragsanalyse__hinweis {
  max-width: 62ch; margin-top: 12px;
  font-size: 15.5px; line-height: 1.6; opacity: 0.9;
}

/* Kundenstimmen auf den Säulenseiten (ersetzt das ProvenExpert-Fremdwidget) */
.leistungsseite__stimmen { margin: 40px 0 10px; }
.leistungsseite__stimmen h2 { margin-bottom: 18px; }


/* Brotkrumen auf dunklem Grund (AVD-Landingpage).
   Die Grundfarben sind für helle Seiten gedacht — auf dem Navy-Hero fielen
   Link (#b05c00) und aktuelle Seite (#9a9a9a) auf 2,6:1 bzw. 4,4:1. */
.avd-lp__hero .brotkrumen a { color: rgba(255,255,255,0.82); }
.avd-lp__hero .brotkrumen a:hover { color: #fff; }
.avd-lp__hero .brotkrumen span { color: rgba(255,255,255,0.72); }
.avd-lp__hero .brotkrumen li + li::before { color: rgba(255,255,255,0.5); }

/* Klick-zum-Laden für das Video auf der Finanzplanungs-Seite */
.videoladen {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; aspect-ratio: 16 / 9; cursor: pointer;
  border-radius: 14px; border: 1px dashed rgba(255,255,255,0.28);
  background: linear-gradient(158deg, #0d2b4c 0%, var(--navy) 60%, #061f38 100%);
  color: #fff; font-family: var(--font); text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.videoladen:hover { border-color: rgba(246,159,14,0.6); transform: translateY(-2px); }
.videoladen__knopf {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%; margin-bottom: 4px;
  background: var(--orange); color: var(--navy);
  box-shadow: 0 10px 26px rgba(246,159,14,0.32);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.videoladen:hover .videoladen__knopf { transform: scale(1.08); }
.videoladen__titel { font-size: 17px; font-weight: 700; }
.videoladen__hinweis { font-size: 13px; color: rgba(255,255,255,0.7); }
.finanzplanung__video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; }

/* Anmeldeseite: Das Formular-Plugin rendert seinen ersten Schritt erst per
   JavaScript — der Bereich wuchs dabei von 209 auf 629 px und schob den
   Newsletter-Streifen nach unten (CLS 0,24). Der Platz wird deshalb vorab
   reserviert. */
.anmeldung-page { min-height: 640px; }
@media (max-width: 900px) { .anmeldung-page { min-height: 700px; } }
@media (max-width: 560px) { .anmeldung-page { min-height: 760px; } }

/* ============================================================
   MOBIL — Korrekturen aus dem Geräte-Durchgang
   ============================================================ */

/* Tabellen seitlich scrollbar. Sie sind rund 520 px breit; auf dem Handy
   ragten sie 150 px über den Rand und wurden abgeschnitten. */
.tabelle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 20px;
  /* Zarter Schatten am rechten Rand als Hinweis, dass es weitergeht */
  background:
    linear-gradient(90deg, var(--flaeche, #fff) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
    linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(6,32,60,.14), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(6,32,60,.14), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tabelle > table { margin-bottom: 0; }

/* Tippziele: WCAG verlangt mindestens 24×24 px. Fußzeilen- und Brotkrumen-
   Links waren 16–19 px hoch, die Seitenblätterung sogar nur 9×19 px — mit dem
   Finger kaum zu treffen. Die zusätzliche Höhe steckt im Innenabstand, das
   Schriftbild bleibt unverändert. */
.site-footer__recht a,
.fuss-spalte a,
.site-footer__copy a,
.brotkrumen a,
.brotkrumen span[aria-current] {
  display: inline-block; padding-block: 4px;
}
.intro__toggle { padding-block: 5px; }

/* Seitenblätterung der Ratgeber-Übersicht */
.nav-links, .pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 34px;
}
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid #e0dbcf; border-radius: 10px;
  background: #fff; color: var(--navy); font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.page-numbers:hover { border-color: var(--orange); color: var(--orange-text); }
.page-numbers.current {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.page-numbers.dots { border-color: transparent; background: none; }

/* Der Bewertungshinweis ragte auf schmalen Geräten 10 px über den Rand */
@media (max-width: 560px) {
  .reviews__note {
    display: flex; max-width: 100%; padding: 12px 14px;
    text-align: left; font-size: 13.5px;
  }
}

/* Lange deutsche Komposita. „Berufsunfähigkeitsversicherung" ist als kleinste
   unteilbare Einheit rund 368 px breit — breiter als ein 360-px-Gerät. Ohne
   Trennung sprengt ein einziges Wort jedes Raster (gemessen: Weiterlesen-Kachel
   368 px in einem 320-px-Container, Kartentitel 20 px über den Rand).
   Der Browser trennt nur, wenn die Sprache ausgezeichnet ist — das ist sie. */
/* Überschriften brechen notfalls im Wort um — aber sie werden NICHT
   getrennt. Mit `hyphens: auto` zerlegte der Browser auch dort, wo Platz war
   („Gute Entscheidun-gen" im Hero). */
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Getrennt wird nur in schmalen Kacheln, wo ein einzelnes Kompositum sonst
   das Raster sprengt. */
.ratgeber__karte h2 a,
.weiterlesen__kopf,
.weiterlesen__mehr a,
.zusage__titel,
.ablauf__inhalt h3,
.leistungsseite__ratgeber a {
  overflow-wrap: break-word;
  hyphens: auto;
  /* Nur lange Wörter trennen. Ohne das zerlegte der Browser auch „deiner"
     zu „dei-ner" — technisch richtig, sieht aber schlecht aus. Erst ab acht
     Zeichen, mindestens vier davor und drei danach. */
  hyphenate-limit-chars: 8 4 3;
}
/* In Rastern muss die Spur unter die Wortbreite schrumpfen dürfen —
   „1fr" allein hat als Minimum die kleinste Inhaltsbreite. */
.weiterlesen__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 720px) {
  .weiterlesen__raster { grid-template-columns: minmax(0, 1fr); }
}

/* Der Bewertungshinweis wurde von seinem Elternteil zentriert und rutschte
   dabei über den rechten Rand. */
@media (max-width: 560px) {
  .reviews__note { width: 100%; margin-inline: 0; justify-content: flex-start; }
}

/* Verbliebene kleine Tippziele */
.ratgeber__saeule a,
.artikel__meta a,
.ueber__block a,
.autorenbox__links a,
.leistungsseite__ratgeber a,
.weiterlesen__mehr a { display: inline-block; padding-block: 3px; }

/* Waagerechte Einblendungen passen nicht auf schmale Geräte: Dort sind die
   Elemente volle Breite, und der seitliche Startversatz schiebt sie sichtbar
   über den Rand (gemessen: 10 px bei 360 px Fensterbreite). Sie steigen
   stattdessen auf wie alles andere. */
@media (max-width: 700px) {
  .js-an [data-reveal="links"],
  .js-an [data-reveal="rechts"] { transform: translateY(26px); }
}

/* ---------- Ablauf auf schmalen Geräten straffen ----------
   Ohne die klebende Spalte ist der Fortschrittsbalken bedeutungslos: Er
   gehört zur mitlaufenden Ziffer, die man auf Mobil nie in Bewegung sieht.
   Die Schritte trugen je 80 px Innenabstand — bei fünf Schritten allein
   400 px, fast ein halber Bildschirm. */
@media (max-width: 1024px) {
  .ablauf { padding: 52px 0 56px; }
  .ablauf__balken { display: none; }
  .ablauf__visual { max-height: 260px; }
  .ablauf__grossnr { font-size: 58px; left: 18px; bottom: 8px; }
  .ablauf__cta { margin-top: 20px; }
  .ablauf__schritt { padding: 26px 0 28px; }
  .ablauf__inhalt h3 { margin: 6px 0 8px; }
  .ablauf__liste { margin-top: 8px; }
}

/* ---------- FAQ auf der Startseite ----------
   Helle Fläche zwischen der dunklen Team-Sektion und dem Footer. Das ist ein
   bewusster Bruch: Der Abschnitt setzt einen Absatz, bevor der Footer
   beginnt, und lange Fließtexte lesen sich auf Hell ruhiger. Karten in Weiß
   auf dem Seitengrau, damit sie sich abheben — dieselbe Sprache wie auf den
   Leistungsseiten. */
.start-faq {
  background: var(--grau);
  padding: 76px 0 84px;
}
.start-faq__inhalt { max-width: 780px; }
.start-faq .mff-faq { margin: 0; }
.start-faq .mff-faq__titel {
  text-align: center; margin-bottom: 28px;
}
.start-faq .mff-faq__item {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(6,32,58,.04);
}

@media (max-width: 700px) {
  .start-faq { padding: 54px 0 60px; }
}


/* ---------- Footer: zwei kurze Listen nebeneinander ----------
   Vier gestapelte Spalten ergaben 1,7 Bildschirme. Die beiden Linklisten
   sind kurz genug, um sich die Breite zu teilen. */
@media (max-width: 1024px) and (min-width: 421px) {
  .site-footer__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
  .fuss-vertrauen { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .site-footer__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .fuss-marke, .fuss-vertrauen { grid-column: 1 / -1; }
  .fuss-spalte a { font-size: 14.5px; }
}


/* Schrittüberschriften standen auf Mobil zu locker (Grundwert 1,45 aus h3) */
@media (max-width: 1024px) {
  .ablauf__inhalt h3 { line-height: 1.28; font-size: 18.5px; }
}

/* ============================================================
   HERO AUF DEM HANDY — eigenes Bildband statt Hintergrund
   Auf schmalen Geräten läuft der Text über die volle Breite. Ein Porträt
   dahinter muss dann so weit abgedunkelt werden, dass von Tim nichts mehr
   übrig bleibt — das ist keine Frage der Justierung, sondern der Anordnung.
   Deshalb hier gestapelt: Text auf Navy, darunter das Foto in voller
   Helligkeit. `order` verschiebt die Bildebene hinter den Text, ohne dass
   sich am Markup etwas ändert.
   ============================================================ */
@media (max-width: 700px) {
  .hero {
    display: flex; flex-direction: column;
    padding-bottom: 0;
  }
  .hero__grid { order: 1; min-height: 0; padding-block: 26px 30px; }

  /* Aus der absoluten Hintergrundebene wird ein Band im Fluss */
  .hero__parallax {
    order: 2; position: relative; inset: auto;
    /* Das Band muss mit der Breite mitwachsen: Bei fester Höhe skaliert das
       Bild zwar mit, man sieht aber anteilig immer weniger Bildhöhe — auf
       einem 640er Gerät wurde Tims Kopf dadurch riesig. */
    width: 100%; height: auto; aspect-ratio: 13 / 10; max-height: 380px;
    transform: none !important;      /* keine Parallaxe auf Touch */
  }
  .hero__bg {
    /* Enger auf Tim gezogen: Mit „cover" stand über seinem Kopf ein Drittel
       leeres Navy. Die Werte sind an vier Varianten abgelesen. */
    background-size: 155% auto;
    background-position: 80% 50%;
    animation: hero-auf 0.9s ease forwards;   /* Zoom entfällt im Band */
  }
  /* Weicher Übergang vom Navy ins Foto und zurück in die Vertrauensleiste */
  .hero__parallax::before,
  .hero__parallax::after {
    content: ""; position: absolute; left: 0; right: 0; height: 40px; z-index: 1;
    pointer-events: none;
  }
  .hero__parallax::before { top: 0; background: linear-gradient(180deg, var(--navy-hero), transparent); }
  .hero__parallax::after  { bottom: 0; background: linear-gradient(0deg, var(--navy-hero), transparent); }

  /* Der Leseschutz wird nicht mehr gebraucht — der Text steht auf Navy */
  .hero__glow {
    background: radial-gradient(ellipse 120% 70% at 20% 10%, rgba(246,159,14,0.16), transparent 70%);
  }

  .hero__trust { order: 3; }
}

/* Auf breiteren Handys greift die Höhenbegrenzung — dort etwas weiter
   herauszoomen, damit der Ausschnitt gleich wirkt wie auf 390 px. */
@media (min-width: 481px) and (max-width: 700px) {
  .hero__bg { background-size: 132% auto; background-position: 77% 48%; }
}