/* kfz-gutachterbottrop.de — Design v12 "Marktplatz"
   Vorbild: Struktur und Anmutung von Fahrzeug-Marktplaetzen.
   Fullscreen-Hero mit abgedunkeltem Foto und heller Schrift,
   darunter ein sehr helles, sachliches Theme: weisse Karten mit
   duennen Raendern, Pill-Buttons, Fakten-Chips, kompakte Datenzeilen.
   Klassen und IDs bleiben kompatibel zu js/home.js. */

/* —— Manrope lokal gehostet (DSGVO: keine Anfrage an Google) ——
   Variable Schrift: eine Datei deckt die Gewichte 400 bis 700 ab. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f4f7fa;
  --bg-tint: #eef3f8;
  --surface: #ffffff;
  --ink: #16212e;
  --ink-soft: #43505e;
  --muted: #6b7784;
  --line: #e7ecf1;
  --line-strong: #d3dae2;

  --brand: #0e3a5c;
  --brand-lift: #17537f;
  --brand-deep: #0a2338;

  --accent: #0148c3;
  --accent-deep: #013a9f;
  --accent-soft: #e9eff9;
  --accent-ice: #8fb4ee;

  --chip: #eef2f6;
  --ok: #1f8a5b;
  --ok-soft: #e6f4ec;
  --star: #f5a623;

  /* Alias fuer Alt-Verweise */
  --accent-hot: var(--accent);
  --navy: var(--brand);
  --navy-lift: var(--brand-lift);
  --navy-deep: var(--brand-deep);
  --paper: var(--bg);
  --paper-bright: var(--surface);
  --dark: var(--brand);
  --dark-lift: var(--brand-lift);
  --bronze: var(--accent);

  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Manrope", system-ui, sans-serif;
  --font-mono: "Manrope", system-ui, sans-serif;
  /* Manrope-Gewichte (Groessen bleiben wie bisher) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --radius: 8px;
  --radius-lg: 14px;
  --pill: 9999px;
  /* Buttons: eckig mit leicht abgerundeten Ecken */
  --btn-radius: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 33, 54, 0.06);
  --shadow-md: 0 6px 22px -10px rgba(16, 33, 54, 0.18);
  --shadow-lg: 0 22px 50px -20px rgba(16, 33, 54, 0.28);

  --wrap: min(1600px, calc(100% - 3rem));
  --header-h: 128px;
  /* linker Einzug ab Desktop: Logo, Hero-Text und Statistik-Leiste teilen ihn */
  --content-left: 15rem;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
  /* clip statt hidden: kappt seitliches Pannen auf Touch-Geraeten,
     ohne einen Scroll-Container zu erzeugen (position: sticky bleibt intakt) */
  overflow-x: clip;
}

@media (min-width: 960px) {
  html {
    scroll-padding-top: calc(var(--header-h) + 2.5rem);
  }
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typo-Rollen: nur Gewicht, keine Groessen */
h1, h2, h3,
.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.hero__eyebrow {
  font-weight: var(--fw-medium);
}
.hero__lead,
.hero__payout-body > span:not(.hero__payout-title):not(.hero__payout-link),
.hero__about-role,
.card-dark p,
.section p,
.faq p,
.payout p {
  font-weight: var(--fw-regular);
}
.hero__trust span {
  font-weight: var(--fw-semibold);
}
.hero__payout-body .hero__payout-title,
.hero__payout-body strong,
.hero__about-name,
.card-dark h3 {
  font-weight: var(--fw-bold);
}
.btn,
.hero .btn,
.hero__payout-link,
.hero__about-text {
  font-weight: var(--fw-semibold);
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
}

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

a:hover {
  color: var(--accent-deep);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: rgba(0, 122, 197, 0.16);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* sanftes Einblenden beim Scrollen (JS setzt .reveal / .is-inview) */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  }
  .reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

/* —— layout —— */
.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

/* Hero füllt ab Desktop die Bildschirmhöhe, Bild schließt unten ab.
   Ab 900px = direkt nach dem Mobil-Breakpoint, damit keine Zwischenbreite
   mit horizontalen CTAs + alter Auszahlungskarte entsteht. */
@media (min-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    /* Gedeckelt, sonst waechst der Hero auf hohen Schirmen weit ueber seinen
       Inhalt hinaus und der Ueberschuss landet als Loch ueber der Leiste. */
    min-height: min(calc(100svh - 172px), 54rem);
    overflow-x: clip;
    overflow-y: visible;
  }
  .hero__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .hero__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
}

/* Mobil: Header-Hoehe wird im Mobil-Layout-Block gesetzt */

.skip {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--pill);
}
.skip:focus {
  left: 0.5rem;
}

/* —— utility bar —— */
.site-utility {
  display: none;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 0.82rem;
  border-bottom: 1px solid var(--line);
}
.site-utility__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.4rem;
}
.site-utility__info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.site-utility a {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-utility a:hover {
  text-decoration: underline;
}

@media (min-width: 960px) {
  .site-utility {
    display: block;
  }
}

/* —— top bar —— */
.site-top {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* Startseite: Header liegt im Fluss ueber dem Bildband (sticky) */
body:not(.legal-page) .site-top {
  position: sticky;
}

/* nach dem Hero wird der Header weiss */
.site-top.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}
.site-top.is-scrolled .site-utility {
  background: var(--bg-soft);
  color: var(--muted);
  border-bottom-color: var(--line);
}
.site-top.is-scrolled .site-utility a {
  color: var(--ink-soft);
}
.site-top.is-scrolled .site-logo img {
  filter: none;
}
.site-top.is-scrolled .site-nav a {
  color: var(--ink-soft);
}
.site-top.is-scrolled .site-nav a:hover,
.site-top.is-scrolled .site-nav a.is-active {
  color: var(--accent);
}
.site-top.is-scrolled .site-burger {
  border-color: var(--line-strong);
  background: var(--surface);
}
.site-top.is-scrolled .site-burger span,
.site-top.is-scrolled .site-burger span::before,
.site-top.is-scrolled .site-burger span::after {
  background: var(--ink);
}

.site-top__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: 0.85rem;
}

.site-logo img {
  height: clamp(52px, 7vw, 76px);
  width: auto;
  filter: none;
  transition: filter 0.25s;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 0.7rem;
}

.site-nav a {
  position: relative;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.55rem 0.85rem;
  border-radius: var(--pill);
  transition: color 0.2s, background 0.2s;
}
.site-nav a:hover,
.site-nav a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}
.site-top.is-scrolled .site-nav a:hover,
.site-top.is-scrolled .site-nav a.is-active {
  background: var(--accent-soft);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.site-tel {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 0.85rem 1.9rem;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s var(--ease);
}
.site-tel svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.site-tel:hover {
  background: var(--accent-deep);
  color: #fff;
  transform: translateY(-1px);
}

.site-wa,
.site-chat {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.15rem;
  border-radius: var(--btn-radius);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s var(--ease);
}
.site-wa svg,
.site-chat svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.site-wa {
  background: #1f8a5b;
  color: #fff;
}
.site-wa:hover {
  background: #18734c;
  color: #fff;
  transform: translateY(-1px);
}
.site-chat {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--line-strong);
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.55rem 1.05rem 0.5rem;
}
.site-chat > svg {
  display: none;
}
.site-chat__hint {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
}
.site-chat:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.site-chat:hover .site-chat__hint {
  color: var(--accent);
}

.site-burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--btn-radius);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
}
.site-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  position: relative;
  transition: background 0.2s;
}
.site-burger span::before,
.site-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: background 0.2s;
}
.site-burger span::before {
  top: -6px;
}
.site-burger span::after {
  top: 6px;
}

@media (min-width: 960px) {
  .site-nav {
    display: flex;
  }
  .site-tel {
    display: inline-flex;
  }
  .site-burger {
    display: none;
  }
}

/* mobile drawer */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  /* Panel liegt per translateX ausserhalb — ohne Clip entsteht
     auf iOS/Android horizontaler Seiten-Scroll mit weissem Rand */
  overflow: hidden;
}
.site-drawer.is-open {
  pointer-events: auto;
}
.site-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s;
}
.site-drawer.is-open .site-drawer__backdrop {
  opacity: 1;
}
.site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 360px);
  height: 100%;
  background: var(--surface);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.2);
  padding: 1.25rem 1.5rem;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.site-drawer.is-open .site-drawer__panel {
  transform: translateX(0);
}
.site-drawer nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.site-drawer nav a {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.7rem 0.9rem;
  border-radius: var(--pill);
}
.site-drawer nav a:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.site-drawer__close {
  align-self: flex-end;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  background: var(--surface);
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
}
.site-drawer__contact {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 1.1rem 1.2rem;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.site-drawer__contact a {
  display: block;
  font-weight: 600;
  color: var(--accent);
  margin-top: 0.35rem;
  text-decoration: none;
}
.site-drawer__chat {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.site-drawer__chat:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

body.drawer-open {
  overflow: hidden;
}

/* —— hero: vollbreites Bildband · solide Markenbox unten links (DEKRA-Stil) —— */
.hero {
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: clamp(0.55rem, 1.4vw, 1.15rem) 0 0;
  overflow: hidden;
}
/* Hintergrundbild rechts, gerade Kante + halbtransparent, rechts über den Rand hinaus */
.hero__media {
  position: absolute;
  top: 0;
  right: -8%;
  bottom: 0;
  width: 78%;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
  /* kraeftigerer Kontrast + Fokus, Foto wirkt praesenter hinter dem Verlauf */
  filter: saturate(1.28) contrast(1.18) brightness(1.04);
}
/* linke Kante weich in Weiß auslaufen lassen (weniger Schleier rechts) */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* leichter Schleier nur hinter der Textspalte, Rest bleibt kraeftig */
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0) 58%),
    /* linke Kante weich ausblenden */
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.96) 10%, rgba(255, 255, 255, 0.78) 18%, rgba(255, 255, 255, 0.48) 28%, rgba(255, 255, 255, 0.22) 38%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 58%);
}
/* Desktop: das Foto bleibt das vollflaechige Hintergrundband aus den
   Basisregeln. Hier stehen nur die Masse fuer die Textspalte daneben. */
@media (min-width: 900px) {
  :root {
    /* Linker Einzug von Logo und Hero-Text. Fluid, weil ein fester Einzug von
       15rem bei 1000px Fensterbreite ein Viertel des Platzes verbraucht. */
    --content-left: clamp(3rem, 6.5vw, 9.5rem);
    /* Spalte rechts, die dem Foto gehoert. Der Hero-Text endet davor. */
    --hero-media-space: clamp(26rem, 38vw, 40rem);
  }
  /* Textspalte endet vor dem Foto, sonst laeuft der Lead darueber */
  .hero__content {
    width: auto;
    max-width: none;
    margin-inline: var(--content-left) var(--hero-media-space);
  }
  /* Foto sitzt buendig an der rechten Fensterkante. isolate haelt den
     Blaustich unten im Bild und laesst ihn nicht auf die weisse Flaeche
     dahinter durchschlagen. */
  .hero__media {
    right: 0;
    width: 66%;
    isolation: isolate;
  }
  /* Kraeftiger als die Eigenfarbe: der Blauton darueber nimmt Sattheit weg,
     das Aufhellen kam noch dazu. Deshalb Saettigung und Kontrast hoch und
     die Aufhellung raus. */
  .hero__media img {
    filter: saturate(1.55) contrast(1.22) brightness(0.86);
  }
  /* Leichter Blauton auf dem Foto. mix-blend-mode: color faerbt nur den
     Farbton und laesst die Helligkeit des Bildes stehen, dadurch saufen
     weder Gesicht noch Fahrzeug ab.
     z-index ist noetig: das img traegt einen filter und bildet damit einen
     eigenen Stacking-Kontext, der ohne Angabe nach dem ::before gemalt wird
     und die Toenung verdecken wuerde. */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--accent-ice);
    mix-blend-mode: color;
    opacity: 0.22;
    pointer-events: none;
  }
  /* Schraege statt senkrechter Kante: der weisse Keil waechst nach unten.
     Liegt ueber der Toenung. */
  .hero__media::after {
    z-index: 2;
    background: linear-gradient(
      74deg,
      #ffffff 0%,
      #ffffff 24%,
      rgba(255, 255, 255, 0.94) 31%,
      rgba(255, 255, 255, 0.74) 38%,
      rgba(255, 255, 255, 0.44) 46%,
      rgba(255, 255, 255, 0.18) 54%,
      rgba(255, 255, 255, 0) 64%
    );
  }
}
.hero__content {
  position: relative;
  z-index: 1;
  width: var(--wrap);
  margin-inline: auto;
}
.hero__text {
  max-width: 780px;
  padding: clamp(0.35rem, 1.2vw, 1.15rem) 0 clamp(1.5rem, 3vw, 2.75rem);
}

/* Eyebrow: Linie + Label */
/* Kein Flex-Container: die Beschriftung besteht aus mehreren Textabschnitten
   (der Zusatz ist mobil ausgeblendet). Als Flex-Items wuerden die Leerzeichen
   dazwischen verschluckt, deshalb normaler Textfluss mit inline-block-Strich. */
.hero__eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
.hero__eyebrow-line {
  display: inline-block;
  width: 34px;
  height: 3px;
  margin-right: 0.7rem;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--accent);
}

.hero h1 {
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 5.8vw, 4.7rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 1.2rem;
  color: var(--ink);
}
.hero__accent {
  color: var(--accent);
}

.hero__lead {
  margin: 0 0 1.4rem;
  max-width: min(920px, 100%);
  color: var(--ink-soft);
  font-size: 1.14rem;
  line-height: 1.52;
  text-wrap: pretty;
}
/* Desktop: langer Lead; Mobil: kurze Zeile */
.hero__lead-mobile {
  display: none;
}
.hero__lead-desk {
  display: inline;
}
.hero__lead-mark {
  color: inherit;
  font-weight: 700;
}
a.hero__lead-mark {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: opacity 0.15s ease;
}
a.hero__lead-mark:hover {
  color: inherit;
  opacity: 0.85;
  text-decoration-color: currentColor;
}

/* Bausteine, die es nur in der Mobilansicht gibt: Vertrauensleiste, Badge
   auf dem Foto, Zweitzeile und Pfeil in den Buttons. Der Desktop sieht sie
   nie, dort fallen sie ganz aus dem Layout. */
.hero__trust,
.hero__media-badge,
.btn__sub,
.btn__chev {
  display: none;
}
/* Zweitzeile der Vertrauenspunkte: nur Desktop. Mobil bleibt die Leiste
   einzeilig wie bisher. */
.hero__trust-desc {
  display: none;
}
/* Auszahlungs-Badge: nur Desktop. Mobil steht dafuer das Band unter dem Foto. */
.hero__badge {
  display: none;
}
/* Kurzprofil auf dem Foto: erst ab 1000px, weil die Textspalte darunter noch
   die volle Breite nutzt und die Karte dort ueber den Inhalt laufen wuerde. */
.hero__card {
  display: none;
}
/* Name in der mobilen Lead-Zeile. Steht in .hero__lead-mobile und erscheint
   dadurch nur auf dem Handy, der Desktop zeigt dort den langen Fliesstext. */
.hero__lead-name {
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* Feature-Leiste: nur Desktop (weisse Schiene unter CTAs + Notiz) */
.hero__features {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__features-text {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}
.hero__feat-title {
  font-weight: var(--fw-bold);
  color: var(--ink);
}
/* Zusaetze, die nur der Desktop zeigt. Mobil wird die Zeile sonst zu lang. */
.hero__eyebrow-extra,
.hero__payout-title-extra {
  display: inline;
}
.hero__payout-title-mobile,
.hero__payout-desc,
.hero__payout-link-icon,
.hero__payout-link-note,
.hero__payout-options {
  display: none;
}
.hero__payout-title-desk,
.hero__payout-desc-desk,
.hero__payout-link-desk {
  display: inline;
}

/* Über-mich + CTAs: Desktop loest den Wrapper auf; About nur mobil */
.hero__bottom {
  display: contents;
}
.hero__after-media {
  display: contents;
}
.hero__about {
  display: none;
}

/* Auszahlung/Rechenbeispiel: dezentes Infopanel (CTAs bleiben dominant) */
a.hero__payout-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 920px;
  margin: 0 0 2.6rem;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #f7f9fc 0%, var(--accent-soft) 100%);
  border: none;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 16px -4px rgba(15, 23, 42, 0.1),
    0 14px 28px -12px rgba(15, 40, 90, 0.12);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.22s var(--ease);
}
.hero__payout-row::before {
  content: none;
}
.hero__payout-row:hover {
  transform: none;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 10px 22px -6px rgba(15, 23, 42, 0.12),
    0 18px 32px -14px rgba(15, 40, 90, 0.14);
}

.hero__payout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 340px;
  max-width: 460px;
  margin: 0;
  padding: 1.05rem 1.2rem 1.1rem;
  font: inherit;
  text-align: left;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  overflow: visible;
}
.hero__payout-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.hero__payout-icon svg {
  width: 18px;
  height: 18px;
}

.hero__payout-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.hero__payout-body .hero__payout-title, .hero__payout-body strong {
  font-weight: var(--fw-bold);
  font-size: 1.02rem;
  line-height: 1.28;
  color: var(--ink);
  white-space: normal;
}
.hero__payout-body > span {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.hero__payout-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding: 0;
  font-size: 0.9rem;
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: gap 0.15s var(--ease), color 0.15s;
}
.hero__payout-link:hover {
  color: var(--accent-deep);
  gap: 0.55rem;
}

/* Rechenbeispiel auf dem Infopanel */
.hero__calc {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 360px;
  border-left: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--line));
}
.hero__calc-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.25rem 1.1rem;
  background: transparent;
}
.hero__calc-formula {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
}
.hero__calc-item {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.hero__calc-item dd {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero__calc-item dt {
  font-size: 0.74rem;
  line-height: 1.2;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hero__calc-item--total dd {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.hero__calc-item--total dt {
  font-weight: 600;
  color: var(--ink-soft);
}
.hero__calc-op {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--ink-soft) 70%, #fff);
}
.hero__calc-note {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--line));
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
/* Schmale Schirme: Bloecke untereinander, Formel bleibt lesbar */
@media (max-width: 719.98px) {
  .hero__payout,
  .hero__calc {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .hero__calc {
    border-left: 0;
    border-top: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--line));
  }
  .hero__payout-body .hero__payout-title, .hero__payout-body strong {
    white-space: normal;
  }
  .hero__calc-formula {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
  }
  .hero__calc-op {
    display: none;
  }
}
/* Hero-Attribute: eine lange weiße Card, horizontal */
@media (min-width: 900px) {
  .hero__text {
    max-width: none;
  }
}
.payout__cta-text .profile-quote__name {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
.payout__cta-text .profile-quote__line {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
.profile-chip__name {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

/* ab Desktop: Hero-Textbereich haengt am linken Rand, Menueleiste bleibt bündig dazu.
   Muss nach den Basisregeln stehen. */
@media (min-width: 1000px) {
  /* width:auto + max-width verhindert horizontales Scrollen,
     wenn der linke Rand breit ist */
  .hero__content {
    width: auto;
    max-width: none;
    margin-inline: var(--content-left) var(--hero-media-space);
  }
  /* Menüleiste (inkl. Telefon) links + rechts bündig mit dem Hero-Inhalt.
     Rechts so viel Luft, wie die Navigation hergibt; ab sehr breiten Schirmen
     zieht der Abstand mit dem linken Einzug des Logos gleich. */
  .site-top .wrap {
    width: auto;
    max-width: none;
    margin-inline: var(--content-left) 4rem;
  }
  /* Navigation etwas kompakter, damit rechts Platz fuer den Abstand bleibt */
  .site-nav {
    gap: 0.5rem;
  }
  .site-nav a {
    padding: 0.55rem 0.65rem;
  }
}
@media (min-width: 1560px) {
  .site-top .wrap {
    margin-inline: var(--content-left);
  }
  .site-nav {
    gap: 0.7rem;
  }
  .site-nav a {
    padding: 0.55rem 0.85rem;
  }
  /* Der rechte Rand bleibt die Fotospalte, nur der linke Einzug waechst mit. */
  .hero__content {
    max-width: none;
    margin-inline: var(--content-left) var(--hero-media-space);
  }
}

/* Klammer um CTAs und Notiz. Ausserhalb der Desktopansicht loest sie sich auf,
   damit beide Bloecke ihre eigene Reihenfolge im Hero-Text behalten. */
.hero__actions {
  display: contents;
}

.hero__cta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  max-width: 920px;
  margin: 0.35rem 0 2.1rem;
}

/* Desktop: Buttons untereinander, rechts daneben die Notiz zur Auszahlung.
   CTAs stehen im Markup am Hero-Ende (Mobil); hier holt sie das Grid nach oben. */
@media (min-width: 900px) {
  .hero__actions {
    display: contents;
  }
  /* Eine Spalte von oben nach unten: Eyebrow, Ueberschrift, Fliesstext,
     Vertrauenspunkte, Buttons. Die Attribut-Leiste sitzt als letztes Element
     am Fuss des Heros. */
  .hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: none;
    /* Luft nach oben zum Header und nach unten zum naechsten Abschnitt. Das
       Foto laeuft weiter randlos durch, nur der Inhalt rueckt ein.
       Steht hier statt weiter oben, weil die Basisregel padding als Kurzform
       setzt und sonst gewinnt. */
    padding-top: clamp(1.5rem, 2.5vw, 2.6rem);
    padding-bottom: clamp(1.75rem, 3.2vw, 3.4rem);
  }
  /* Groessenverhaeltnisse nach Entwurf: Ueberschrift etwas ruhiger, damit
     Leiste und Buttons ohne Scrollen in den Bildschirm passen. */
  .hero h1 {
    font-size: clamp(2.5rem, 4.6vw, 4.1rem);
    margin: 0 0 1rem;
  }
  .hero__lead {
    max-width: 52rem;
    margin: 0 0 1.25rem;
    font-size: 1.06rem;
    line-height: 1.5;
  }
  /* Auszahlungs-Badge: flache Pille in Akzentton, traegt die Kernaussage
     zwischen Fliesstext und Vertrauenspunkten. */
  .hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    align-self: flex-start;
    margin: 0;
    padding: 0.6rem 1.3rem 0.6rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: var(--pill);
    background: color-mix(in srgb, var(--accent-soft) 55%, #fff);
    color: var(--accent-deep);
    text-decoration: none;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  }
  .hero__badge:hover {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    background: var(--accent-soft);
    color: var(--accent-deep);
  }
  /* Kartensymbol im gefuellten Kreis, gleiche Sprache wie das Badge in der
     Attribut-Leiste darunter */
  .hero__badge-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
  }
  .hero__badge-icon svg {
    width: 17px;
    height: 17px;
  }
  .hero__badge-text {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -0.012em;
  }
  /* Zweiter Teil ist der Hinweis auf das Ziel, der Pfeil macht den Link klar */
  .hero__badge-note {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding-left: 0.85rem;
    border-left: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    font-size: 0.9rem;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    color: var(--accent);
  }
  .hero__badge-note::after {
    content: "→";
    font-size: 0.95em;
    line-height: 1;
    transition: transform 0.2s var(--ease);
  }
  .hero__badge:hover .hero__badge-note::after {
    transform: translateX(3px);
  }
  /* Das Auszahlungs-Panel gehoert zur Mobilansicht. Auf dem Desktop fuehrt der
     Menuepunkt Auszahlung zum selben Ziel. Elementname im Selektor, sonst
     gewinnt die Basisregel a.hero__payout-row mit ihrem display: flex. */
  a.hero__payout-row {
    display: none;
  }
  /* Vier Vertrauenspunkte in einer Reihe, Icon links neben zwei Textzeilen.
     Der Trennstrich oben setzt sie vom Badge ab. */
  .hero__trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.35rem 1.9rem;
    width: 100%;
    max-width: 66rem;
    margin: 1.5rem 0 2.1rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
  }
  .hero__trust li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.72rem;
    row-gap: 0.24rem;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  .hero__trust li::before {
    content: none;
  }
  .hero__trust svg {
    grid-row: 1 / span 2;
    align-self: start;
    width: 28px;
    height: 28px;
    margin-top: 0.05rem;
  }
  .hero__trust li > span {
    grid-column: 2;
    font-size: 0.92rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: pretty;
  }
  .hero__trust .hero__trust-desc {
    display: block;
    font-size: 0.84rem;
    font-weight: var(--fw-regular);
    line-height: 1.42;
    letter-spacing: 0;
    color: var(--muted);
  }
  /* Buttons nebeneinander statt gestapelt, Breite richtet sich nach dem Text */
  .hero__cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.85rem;
    width: auto;
    max-width: none;
    margin: 0 0 3.1rem;
  }
  /* Attribut-Leiste als ruhige weisse Karte am Fuss des Heros. Duenne
     senkrechte Linien trennen die Felder, der Schatten bleibt sehr flach.
     margin-top: auto schiebt sie an das untere Ende der Textspalte.
     Der negative Rand rechts kommt erst ab 1000px dazu, weil die Textspalte
     erst dort vor dem Foto endet. */
  .hero__features {
    display: grid;
    /* Erste Spalte ist das Auszahlungs-Badge und darf breiter sein */
    grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
    align-items: stretch;
    max-width: none;
    width: auto;
    align-self: stretch;
    gap: 0;
    margin: auto 0 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.04),
      0 18px 40px -30px rgba(16, 50, 110, 0.35);
  }
  /* Icon links, daneben Wert und Beschriftung untereinander */
  .hero__features .hero__feat--soft {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 1.65rem 1.3rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  /* Gleiche Stufe wie die Regel darueber, sonst gewinnt deren border: none */
  .hero__features .hero__feat--soft + .hero__feat--soft {
    border-left: 1px solid var(--line);
  }
  .hero__features .hero__feat--soft svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    color: var(--accent);
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hero__features .hero__feat--soft .hero__features-text {
    gap: 0.16rem;
  }
  .hero__features .hero__feat--soft .hero__feat-title {
    font-size: 0.95rem;
    line-height: 1.25;
    letter-spacing: -0.014em;
    color: var(--ink);
  }
  .hero__features .hero__feat--soft .hero__features-text > span:not(.hero__feat-title) {
    font-size: 0.79rem;
    line-height: 1.35;
    color: var(--muted);
  }
  /* Erstes Feld als Badge: Akzentflaeche, Haken im gefuellten Kreis. Flach,
     ohne Verlauf und ohne Leuchtkante. */
  .hero__features .hero__feat--lead {
    background: color-mix(in srgb, var(--accent-soft) 72%, #fff);
  }
  .hero__features .hero__feat--lead::before {
    content: none;
  }
  .hero__features .hero__feat--lead svg {
    width: 14px;
    height: 14px;
    padding: 0.42rem;
    box-sizing: content-box;
    color: #fff;
    background: var(--accent);
    border-radius: var(--pill);
  }
  .hero__features .hero__feat--lead .hero__feat-title {
    color: var(--accent-deep);
  }
  /* Die Erfahrung steht schon bei den Vertrauenspunkten, hier waere sie eine
     woertliche Dopplung. */
  .hero__features .hero__feat:nth-child(4) {
    display: none;
  }
  /* Zwei Buttons nebeneinander: blau gefuellt und weiss umrandet. Das Icon
     steht ohne Chip direkt vor der Beschriftung.
     .hero .btn steht spaeter im Stylesheet, deshalb hier eine Stufe hoeher. */
  .hero .hero__cta .btn {
    width: auto;
    justify-content: center;
    gap: 0.6rem;
    min-height: 0;
    padding: 0.82rem 1.5rem;
    font-size: 0.98rem;
    letter-spacing: -0.008em;
    text-align: left;
    border-radius: 10px;
  }
  .hero .hero__cta .btn svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    box-sizing: content-box;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* Flaches Blau statt Verlauf, Glanzkante und Tiefenschatten */
  .hero .hero__cta .btn--primary {
    background: var(--accent);
    border-color: transparent;
    box-shadow: none;
  }
  .hero .hero__cta .btn--primary::before {
    content: none;
  }
  .hero .hero__cta .btn--primary:hover {
    background: var(--accent-deep);
    border-color: transparent;
    box-shadow: none;
  }
  .hero .hero__cta .btn--primary svg {
    background: none;
    box-shadow: none;
  }
  /* Sekundaerer Button: weisse Flaeche mit Haarlinie statt Glas und Schatten */
  .hero .hero__cta .btn--wa {
    color: var(--ink);
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line-strong);
    box-shadow: none;
  }
  .hero .hero__cta .btn--wa svg {
    color: var(--ink);
    background: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn--wa:hover {
    color: var(--ink);
    background: #fff;
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line-strong));
    box-shadow: none;
  }
  /* Der Direktchat gehoert zur Mobilansicht, im Entwurf stehen zwei Buttons */
  .hero .hero__cta .btn--chat {
    display: none;
  }
}

/* Mittlere Desktopbreiten: die Textspalte ist schmaler, deshalb stehen die
   Vertrauenspunkte in zwei statt vier Spalten und die Leiste rueckt enger. */
@media (min-width: 900px) and (max-width: 1499.98px) {
  .hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.7rem;
    max-width: 40rem;
  }
  /* Fuenf Felder nebeneinander werden hier zu schmal: das Badge nimmt die
     erste Reihe allein, die vier Kennzahlen stehen darunter. */
  .hero__features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hero__features .hero__feat--lead {
    grid-column: 1 / -1;
  }
  .hero__features .hero__feat--soft + .hero__feat--soft {
    border-top: 1px solid var(--line);
  }
  .hero__features .hero__feat--soft:nth-child(2) {
    border-left: none;
  }
  .hero__features .hero__feat--soft {
    gap: 0.65rem;
    padding: 1.3rem 1.05rem;
  }
  .hero__features .hero__feat--soft svg {
    width: 23px;
    height: 23px;
  }
  .hero__features .hero__feat--soft .hero__feat-title {
    font-size: 0.9rem;
  }
  .hero__features .hero__feat--soft .hero__features-text > span:not(.hero__feat-title) {
    font-size: 0.76rem;
  }
}

/* Ab hier endet die Textspalte vor dem Foto. Der negative Rand holt die Breite
   zurueck, die fuer das Foto freigehalten wird, laesst rechts aber denselben
   Abstand stehen wie links. Muss nach dem 900px-Block stehen. */
@media (min-width: 1000px) {
  .hero__features {
    margin-right: calc(-1 * (var(--hero-media-space) - var(--content-left)));
  }

  /* —— Kurzprofil auf dem Foto ——
     Dunkle, halbtransparente Karte mittig rechts. Das Foto scheint durch,
     der leichte Weichzeichner haelt die Schrift trotzdem lesbar. */
  .hero__card {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: var(--content-left);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(20.5rem, 27vw);
    padding: 1.6rem 1.5rem 1.4rem;
    border: 1px solid rgba(150, 185, 240, 0.2);
    border-radius: 18px;
    /* Dunkelblau statt Schwarz. Etwas dichter als zuvor, sonst mischt sich
       das Foto durch und der Blauton verliert sich. */
    background: rgba(9, 28, 62, 0.76);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    color: #fff;
  }
  .hero__card-photo {
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 0.95rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    object-fit: cover;
    object-position: center;
  }
  .hero__card-name {
    font-size: 1.12rem;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -0.014em;
  }
  .hero__card-role {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    font-weight: var(--fw-regular);
    line-height: 1.35;
    color: rgba(232, 240, 248, 0.78);
    text-wrap: pretty;
  }
  /* Fakten mit Haken statt Punkten */
  .hero__card-facts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin: 1.05rem 0 0;
    padding: 1.05rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    list-style: none;
  }
  .hero__card-facts li {
    position: relative;
    padding-left: 1.35rem;
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    line-height: 1.35;
    color: rgba(240, 246, 252, 0.92);
    text-wrap: pretty;
  }
  .hero__card-facts li::before {
    content: "";
    position: absolute;
    top: 0.36em;
    left: 0;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 2px solid var(--accent-ice);
    border-bottom: 2px solid var(--accent-ice);
    transform: rotate(-45deg);
  }
  .hero__card-link {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.8rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s var(--ease);
  }
  .hero__card-link::after {
    content: " →";
    opacity: 0.85;
  }
  .hero__card-link:hover {
    color: var(--accent-ice);
  }
}

/* Hero-Buttons: kräftiger, mit Tiefe und Glanzkante */
.hero .btn {
  position: relative;
  isolation: isolate;
  justify-content: center;
  width: 100%;
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  padding: 1.05rem 1.2rem;
  border-radius: 10px;
  transition:
    transform 0.15s var(--ease),
    box-shadow 0.2s var(--ease),
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
/* Lichtkante über der oberen Hälfte */
.hero .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
.hero .btn svg {
  width: 21px;
  height: 21px;
}
.hero .btn:hover {
  transform: translateY(-2px);
}
.hero .btn:active {
  transform: translateY(0);
}

/* Telefon: plastischer Verlauf mit farbigem Schlagschatten */
.hero .btn--primary {
  background: linear-gradient(180deg, #3272d9 0%, var(--accent) 52%, var(--accent-deep) 100%);
  color: #fff;
  border-color: rgba(11, 46, 102, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 10px 20px -10px rgba(22, 72, 156, 0.7),
    0 2px 4px rgba(16, 33, 54, 0.18);
}
.hero .btn--primary:hover {
  background: linear-gradient(180deg, #3d7ce4 0%, var(--accent) 52%, var(--accent-deep) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 16px 28px -12px rgba(22, 72, 156, 0.75),
    0 3px 6px rgba(16, 33, 54, 0.2);
}
.hero .btn--primary:active {
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.28),
    0 2px 6px -3px rgba(22, 72, 156, 0.5);
}

/* WhatsApp und Direktchat: Glas-Optik */
.hero .btn__text-short {
  display: none;
}

.hero .btn--wa,
.hero .btn--chat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.74) 100%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(16, 33, 54, 0.07),
    0 8px 18px -10px rgba(16, 33, 54, 0.38),
    0 1px 2px rgba(16, 33, 54, 0.06);
}
.hero .btn--wa {
  color: var(--ok);
}
.hero .btn--wa:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(230, 244, 236, 0.82) 100%);
  color: var(--ok);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(31, 138, 91, 0.32),
    0 14px 24px -12px rgba(20, 80, 55, 0.42),
    0 2px 4px rgba(16, 33, 54, 0.08);
}
.hero .btn--chat {
  color: var(--brand);
}
.hero .btn--chat:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(233, 239, 249, 0.82) 100%);
  color: var(--accent-deep);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(27, 92, 197, 0.32),
    0 14px 24px -12px rgba(16, 50, 110, 0.42),
    0 2px 4px rgba(16, 33, 54, 0.08);
}
.hero .btn--wa:active,
.hero .btn--chat:active {
  box-shadow:
    inset 0 2px 5px rgba(16, 33, 54, 0.16),
    0 0 0 1px rgba(16, 33, 54, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .hero .btn:hover,
  .hero .btn:active {
    transform: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  padding: 0.72rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-deep);
  color: #fff;
}
.btn--wa {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--wa:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.btn--chat {
  background: #fff;
  color: var(--brand);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn--chat:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: #fff;
}
/* auf hellem Grund braucht der WhatsApp-Button eigene Farben */
.band .btn--wa,
.faq .btn--wa {
  background: var(--surface);
  color: var(--ok);
  border-color: var(--line-strong);
}
.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.hero__assurance {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.7rem;
  max-width: 52ch;
}
.hero__assurance img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  /* Person sitzt im Querformat-Foto links; Ausschnitt auf das Gesicht statt aufs Auto */
  object-position: 16% 30%;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.hero__assurance p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero__assurance strong {
  color: var(--ink);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hero__stats strong {
  display: block;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero__stats strong .star {
  color: var(--star);
  font-size: 1.25rem;
}
.hero__stats > div > span {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
}
.hero__stats a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.hero__stats a:hover {
  color: #fff;
}

/* trust strip: Chips-Zeile direkt unter dem Hero */
.strip {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.strip ul {
  list-style: none;
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.strip li {
  font-size: 0.92rem;
  line-height: 1.4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 0.45rem 1rem 0.45rem 2.1rem;
  position: relative;
}
.strip li::before {
  content: "✓";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ok);
}

/* sections generic */
section.band {
  padding: clamp(3.5rem, 6.5vw, 6rem) 0;
}

.section-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.section-head p {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

main {
  counter-reset: sec;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--pill);
  padding: 0.22rem 0.75rem;
  margin-bottom: 0.85rem;
}
.kicker::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  opacity: 0.65;
}

/* Ablauf: vier kompakte Karten */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: step;
}

@media (min-width: 640px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .timeline {
    grid-template-columns: repeat(4, 1fr);
  }
}

.timeline li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.timeline li:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.timeline__num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  line-height: 1;
  margin-bottom: 0.9rem;
}

.timeline h3 {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.timeline p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.band--tone {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}


/* —— Profil: blaue Textkarte neben einer Bildsaeule —— */
.profile {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 980px) {
  .profile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: stretch;
  }
}

/* blaue Karte */
.profile__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  color: #fff;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 45%, var(--brand-deep) 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -26px rgba(9, 32, 53, 0.65);
  overflow: hidden;
  isolation: isolate;
}
/* weicher Lichtschimmer oben rechts */
.profile__card::before {
  content: "";
  position: absolute;
  top: -35%;
  right: -20%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.kicker--light {
  align-self: flex-start;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
.profile__card h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}
.profile__role {
  margin: 0.35rem 0 1.1rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent-ice);
}
.profile__lead {
  margin: 0 0 0.9rem;
  font-size: 1.06rem;
  line-height: 1.55;
  color: #fff;
}
.profile__text {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.profile__text:last-of-type {
  margin-bottom: 0;
}
.profile__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  gap: 0.65rem;
}
.profile__list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.9);
}
.profile__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
}
.profile__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.8rem;
}
.profile__link {
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}
.profile__link:hover {
  color: #fff;
}

/* Bildsaeule */
.profile__media {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
}
@media (min-width: 720px) {
  .profile__media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: stretch;
  }
}
.profile__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.profile__photo > picture img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 15% 50%;
}
.profile__stamp {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.profile__stamp img {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 45% 30%;
}
.profile__stamp span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--muted);
}
.profile__stamp .profile-chip__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.profile__side {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
}
.profile__shots {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  /* zwei gleich hohe Kacheln, die zusammen die Hoehe des Portraets fuellen */
  grid-auto-rows: minmax(0, 1fr);
}
.profile__shots picture {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.profile__shots img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}

/* Band "Warum unabhaengig": hell mit weissen Karten */
.band--dark {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
  color: var(--ink);
}

.grid-3 {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card-dark {
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card-dark:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.card-dark svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.card-dark h3 {
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.card-dark p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.note-important {
  margin-top: 1.75rem;
  padding: 1.1rem 1.3rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.98rem;
  max-width: 72ch;
}
.note-important strong {
  color: var(--ink);
}

.card-dark__link {
  display: inline-block;
  margin-top: 0.8rem;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--accent);
  text-decoration: none;
}
.card-dark__link:hover {
  text-decoration: underline;
}

/* Auszahlung + Rechenbeispiel */
.band--payout {
  background: var(--bg);
}

.payout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .payout {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.payout__text .section-head {
  margin-bottom: 1.25rem;
}

.payout__points {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.payout__points li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.99rem;
  color: var(--ink-soft);
}
.payout__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok-soft);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ok);
}
.payout__points .payout-label {
  color: var(--ink);
}

/* Anruf-Karte mit Foto unter den Auszahlungs-Punkten */
.payout__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.payout__cta-photo {
  flex: 0 0 auto;
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-md);
}
.payout__cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 30%;
}
.payout__cta-text {
  flex: 1 1 220px;
  margin: 0;
  min-width: 0;
}
.payout__cta-text .profile-quote__name {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.payout__cta-text .profile-quote__line {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.payout__cta-text > span:last-child {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.payout__cta .btn {
  flex: 0 0 auto;
}

.payout__calcs {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 900px) {
  .payout {
    align-items: start;
  }
}

.calc-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.calc-switch__btn {
  appearance: none;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.calc-switch__btn:hover {
  color: var(--ink);
}
.calc-switch__btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px -6px rgba(15, 40, 90, 0.18);
}
.calc-switch__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.calc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.calc-card[hidden] {
  display: none !important;
}

.calc-card__head {
  padding: 1.1rem 1.5rem 1rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.calc-card__head .calc-card__label {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.calc-card__head > span:not(.calc-card__label) {
  font-size: 0.86rem;
  color: var(--muted);
}

.calc-card__rows {
  margin: 0;
  padding: 0.4rem 1.5rem;
}
.calc-card__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.calc-card__rows dt {
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.calc-card__rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.calc-card__total {
  border-bottom: none !important;
  align-items: center !important;
  margin-inline: -1.5rem;
  padding-inline: 1.5rem !important;
  padding-block: 1rem !important;
  background: var(--bg-soft);
}
.calc-card__total dt {
  font-weight: 700;
  font-size: 1rem !important;
  color: var(--ink) !important;
}
.calc-card__total dd {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  /* wie im Hero-Rechenbeispiel: Betrag in Akzentblau statt gelber Markierung */
  color: var(--accent) !important;
  background: var(--accent-soft);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
}

.calc-card__hints {
  list-style: none;
  margin: 0;
  padding: 0.15rem 1.5rem 0.35rem;
  display: grid;
  gap: 0.55rem;
}
.calc-card__hints li {
  position: relative;
  padding: 0.65rem 0.8rem 0.65rem 2rem;
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.calc-card__hints li::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 1.05rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
.calc-card__hints strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.calc-card--repair .calc-card__head {
  background: color-mix(in srgb, var(--ok-soft) 55%, var(--bg-soft));
}
.calc-card__note {
  margin: 0;
  padding: 0.9rem 1.5rem 1.3rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

/* fleet grid: Bildkachel mit Chip-Zeile */
.fleet-head {
  max-width: 640px;
  margin-bottom: 2rem;
}

.fleet-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 560px) {
  .fleet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .fleet-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fleet-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.fleet-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fleet-card picture {
  display: block;
  overflow: hidden;
}
.fleet-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.fleet-card:hover img {
  transform: scale(1.04);
}
.fleet-card__cap {
  padding: 0.9rem 1.1rem 1.1rem;
}
.fleet-card__cap .fleet-card__name {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.fleet-card__cap span {
  display: inline-block;
  font-size: 0.84rem;
  color: var(--ink-soft);
  background: var(--chip);
  border-radius: var(--pill);
  padding: 0.15rem 0.65rem;
}

/* reviews */
.band--reviews {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}

.reviews-layout {
  display: grid;
  /* minmax(0, 1fr) statt auto: sonst wachsen Bildspalte und Karussell auf ihre
     Inhaltsbreite an und ragen aus dem Layout heraus, weil Grid-Elemente von
     Haus aus min-width: auto haben. Das Karussell scrollt stattdessen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 900px) {
  .reviews-layout {
    /* minmax(0, …) verhindert, dass das Karussell die Bildspalte zusammendrueckt */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

.reviews-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.reviews-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.reviews-badge {
  position: absolute;
  bottom: 0.9rem;
  left: 0.9rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  padding: 0.4rem 0.9rem;
  font-weight: 700;
  font-size: 0.86rem;
  border-radius: var(--pill);
}

.reviews-carousel {
  position: relative;
}

.reviews-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

#reviews-track {
  display: flex;
  gap: 1rem;
  min-width: min-content;
}

.reviews-viewport::-webkit-scrollbar {
  height: 6px;
}
.reviews-viewport::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
}

.reviews-card {
  position: relative;
  flex: 0 0 min(100%, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reviews-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  color: inherit;
}

.reviews-card__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.reviews-card__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 1rem;
  flex: 0 0 auto;
}

.reviews-card p {
  margin: 0.55rem 0 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.reviews-card__stars {
  color: var(--star);
  letter-spacing: 0.06em;
  font-size: 0.92rem;
}

.reviews-card__author {
  font-weight: 700;
  display: block;
  line-height: 1.3;
  color: var(--ink);
}
.reviews-card__when {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.reviews-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.reviews-controls button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.reviews-controls button:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.reviews-controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.reviews-err {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
}

.reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
}
.reviews-link:hover {
  text-decoration: underline;
}

/* FAQ */
/* Ueberschrift buendig mit den anderen Abschnitten, Fragenliste bleibt schmal */
.faq .section-head,
.faq details,
.faq-more {
  max-width: 820px;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.2rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.2s;
}
.faq details:hover,
.faq details[open] {
  border-color: var(--line-strong);
}

.faq summary {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.4rem;
  transition: color 0.2s;
}
.faq summary:hover {
  color: var(--accent);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--chip);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: background 0.2s, color 0.2s;
}
.faq details[open] summary::after {
  content: "−";
  background: var(--accent);
  color: #fff;
}

.faq details p {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
}

.faq-more {
  margin: 1.8rem 0 0;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
}
.faq-more a {
  font-weight: 600;
  color: var(--accent);
}

/* CTA block */
.cta {
  position: relative;
  background: var(--brand-deep);
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.cta__grid {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .cta__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.cta .kicker {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.cta h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.9rem;
}

.cta p {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.82);
}

.cta__card {
  /* helle Kontrast-Karte auf dunkler Flaeche: lokale Farb-Neuzuordnung */
  --ink: #16212e;
  --ink-soft: #43505e;
  --muted: #6b7784;
  --line: #e7ecf1;
  --accent: #0148c3;
  --accent-deep: #013a9f;
  --accent-soft: #e9eff9;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 64px -22px rgba(4, 14, 26, 0.6);
  padding: 0.75rem 1.5rem;
}

.cta__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
}
.cta__row:hover strong {
  color: var(--accent);
}

.cta__row-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  flex: 0 0 auto;
}
.cta__row-icon svg {
  width: 18px;
  height: 18px;
}
.cta__row-icon--wa {
  background: var(--ok-soft);
  color: var(--ok);
}

.cta__row-text .cta__row-label {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.2s;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.cta__row-text > span {
  font-size: 0.86rem;
  color: var(--muted);
}

.cta__hours {
  margin: 0;
  padding: 0.9rem 0 0.7rem;
  font-size: 0.84rem;
  color: var(--muted);
  text-align: center;
}

/* footer */
.site-footer {
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.75rem;
  font-size: 0.94rem;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.footer-claim {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.btn--light,
.site-footer a.btn--light {
  background: var(--accent);
  color: #fff;
}
.btn--light:hover,
.site-footer a.btn--light:hover {
  background: var(--accent-deep);
  color: #fff;
  text-decoration: none;
}

.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.site-footer h3,
.site-footer h4 {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 0;
  margin: 0 0 0.7rem;
}

/* Zweite Ueberschrift in derselben Spalte braucht Luft nach oben. Selektor
   eine Stufe hoeher, weil .site-footer h4 die Kurzform margin setzt und den
   oberen Abstand sonst wieder auf 0 zieht. */
.site-footer .footer-partner-head {
  margin-top: 1.5rem;
}

.site-footer .brand-tag {
  color: var(--muted);
  margin-top: 0.7rem;
  max-width: 30ch;
}

.site-footer .footer-grid img {
  filter: none;
}

.footer-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.4rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: 0.87rem;
  font-weight: 600;
  text-decoration: none !important;
}
.footer-rating__stars {
  color: var(--star);
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}
.footer-rating:hover {
  border-color: var(--line-strong);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li {
  margin-bottom: 0.4rem;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.87rem;
  color: var(--muted);
}

.footer-bottom ul {
  display: flex;
  gap: 1.25rem;
}

.back-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 150;
  width: 44px;
  height: 44px;
  border-radius: var(--btn-radius);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, background 0.2s, border-color 0.2s, color 0.2s;
}
.back-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* —— Desktop Live-Chat (clean blue) —— */
.wa-chat {
  display: none;
}
@media (min-width: 960px) {
  .wa-chat {
    display: block;
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 160;
  }
  .back-top {
    right: 5.75rem;
    bottom: 1.55rem;
  }
}
/* Mobile: Chat nur wenn über Header/Drawer geöffnet */
@media (max-width: 959.98px) {
  .wa-chat.is-forced.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 320;
    padding: 0.75rem;
    background: rgba(10, 28, 46, 0.45);
  }
  .wa-chat.is-forced.is-open .wa-chat__launcher {
    display: none;
  }
  .wa-chat.is-forced.is-open .wa-chat__panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 440px;
    height: min(640px, calc(100dvh - 1.5rem));
    margin: 0 auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}

.wa-chat__launcher {
  position: relative;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--accent) 0%, var(--brand) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(14, 58, 92, 0.32);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wa-chat__launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(14, 58, 92, 0.4);
}
.wa-chat__launcher svg {
  width: 28px;
  height: 28px;
}
.wa-chat__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35);
}

.wa-chat__toast {
  position: absolute;
  right: 0;
  bottom: calc(64px + 0.95rem);
  display: block;
  /* Parent .wa-chat ist nur so breit wie der Launcher (~64px) —
     ohne feste width schrumpft die absolute Blase mit. */
  width: min(320px, calc(100vw - 2.5rem));
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  z-index: 2;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.wa-chat__toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wa-chat__toast.is-leaving {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
}
.wa-chat__toast-bubble {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.95rem 0.8rem 0.75rem;
  border-radius: 18px 18px 6px 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow:
    0 16px 36px -14px rgba(14, 58, 92, 0.35),
    0 0 0 1px rgba(27, 92, 197, 0.04);
}
.wa-chat__toast-face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 56px;
  border: 2px solid rgba(27, 92, 197, 0.12);
  background: var(--brand);
}
.wa-chat__toast-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 0.1rem;
}
.wa-chat__toast-copy .wa-chat__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-chat__toast-text {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}
.wa-chat.is-open .wa-chat__toast {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .wa-chat__toast {
    transition: opacity 0.15s linear;
    transform: none;
  }
  .wa-chat__toast.is-visible,
  .wa-chat__toast.is-leaving {
    transform: none;
  }
}

.wa-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(64px + 0.85rem);
  width: min(420px, calc(100vw - 2rem));
  height: min(640px, calc(100vh - 6.5rem));
  display: flex;
  flex-direction: column;
  /* randlose Glasflaeche, Tiefe kommt allein aus gestapelten Schatten */
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: none;
  border-radius: 22px;
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow:
    0 2px 6px rgba(14, 58, 92, 0.1),
    0 18px 40px -18px rgba(14, 58, 92, 0.35),
    0 52px 90px -40px rgba(14, 58, 92, 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.wa-chat.is-open .wa-chat__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wa-chat__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1rem 1.05rem 1.05rem;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 58%),
    linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  color: #fff;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 24px -18px rgba(14, 58, 92, 0.8);
}
.wa-chat__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.22);
}
.wa-chat__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.25;
}
.wa-chat__meta .wa-chat__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wa-chat__meta span {
  font-size: 0.78rem;
  opacity: 0.88;
  font-weight: 500;
}
.wa-chat__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.wa-chat__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.wa-chat__thread {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(27, 92, 197, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(247, 249, 252, 0.5) 0%, rgba(236, 242, 249, 0.62) 100%);
}

.wa-chat__row {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  max-width: 100%;
}
.wa-chat__row--visitor {
  justify-content: flex-end;
}
.wa-chat__row--owner,
.wa-chat__row--system {
  justify-content: flex-start;
}

.wa-chat__face {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(16, 33, 54, 0.06),
    0 6px 14px -6px rgba(16, 33, 54, 0.18);
}
.wa-chat__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.wa-chat__bubble {
  max-width: calc(100% - 60px);
  padding: 0.7rem 0.85rem 0.45rem;
  border-radius: 14px;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
  word-wrap: break-word;
}
.wa-chat__bubble--owner,
.wa-chat__bubble--system {
  background: rgba(255, 255, 255, 0.94);
  border: none;
  border-bottom-left-radius: 5px;
  box-shadow:
    0 1px 2px rgba(16, 33, 54, 0.05),
    0 10px 22px -14px rgba(16, 33, 54, 0.35);
}
.wa-chat__bubble--visitor {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 8px 18px rgba(27, 92, 197, 0.22);
}
.wa-chat__bubble--visitor time {
  color: rgba(255, 255, 255, 0.72);
}
.wa-chat__bubble time {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.35rem;
}
.wa-chat__bubble img {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 0.4rem;
}

/* —— Bildnachrichten ——
   Bilder fuellen die Blase randlos, wie im Messenger. Die farbige Flaeche
   entfaellt, sonst rahmt ein blauer Rand jedes Foto ein. Die Uhrzeit legt
   sich als Chip auf das Bild. */
.wa-chat__bubble--media {
  padding: 0;
  overflow: hidden;
  background: none;
  box-shadow: 0 6px 16px -8px rgba(16, 33, 54, 0.4);
}
.wa-chat__bubble--media img {
  margin-bottom: 0;
  border-radius: 0;
}
.wa-chat__bubble--media time {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  margin: 0;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(12, 20, 32, 0.55);
  color: #fff;
}
/* Bildunterschrift unter dem Foto, dort bleibt die Blasenfarbe */
.wa-chat__bubble--media .wa-chat__caption {
  display: block;
  padding: 0.5rem 0.75rem 0.6rem;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
}
.wa-chat__bubble--media:has(.wa-chat__caption) time {
  position: static;
  padding: 0 0.75rem 0.5rem;
  background: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.72);
}
.wa-chat__bubble--media:has(.wa-chat__caption) {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
}

/* Mehrere gleichzeitig gesendete Bilder als Raster */
.wa-chat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: min(260px, 100%);
}
.wa-chat__grid--single {
  grid-template-columns: 1fr;
  width: auto;
}
.wa-chat__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.wa-chat__grid--single img {
  width: auto;
  aspect-ratio: auto;
  max-height: 260px;
}
.wa-chat__grid-more {
  position: relative;
}
.wa-chat__grid-more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 20, 32, 0.55);
  color: #fff;
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
}

/* Ladehinweis waehrend mehrere Bilder rausgehen */
.wa-chat__uploading {
  align-self: center;
  width: min(240px, 80%);
  margin: 0.2rem 0 0.4rem;
  padding: 0.45rem 0.7rem 0.55rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(16, 33, 54, 0.06);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
.wa-chat__uploading-bar {
  height: 4px;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: rgba(16, 33, 54, 0.12);
  overflow: hidden;
}
.wa-chat__uploading-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}

.wa-chat__status {
  align-self: center;
  margin: 0.2rem 0 0.4rem;
  padding: 0.35rem 0.7rem;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(16, 33, 54, 0.06);
}
.wa-chat__status-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 0.15rem;
  align-items: flex-end;
  min-width: 1.1rem;
}
.wa-chat__status-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
  animation: wa-status-dots 1.2s infinite ease-in-out;
}
.wa-chat__status-dots i:nth-child(2) {
  animation-delay: 0.2s;
}
.wa-chat__status-dots i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes wa-status-dots {
  0%,
  80%,
  100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-chat__status-dots i {
    animation: none;
    opacity: 0.7;
  }
}

.wa-chat__composer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 0.85rem 0.5rem;
  background: rgba(255, 255, 255, 0.82);
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(16, 33, 54, 0.07);
  flex: 0 0 auto;
}
.wa-chat__attach {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s;
}
.wa-chat__attach:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.wa-chat__attach svg {
  width: 22px;
  height: 22px;
}
/* —— Bildvorschau wie im Messenger ——
   Legt sich ueber den gesamten Chat, der Verlauf dahinter wird unscharf.
   Kein blauer Fond, das Bild steht mittig auf dunklem Grund. */
.wa-chat__preview {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  background: rgba(12, 20, 32, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}
.wa-chat__preview[hidden] {
  display: none !important;
}
.wa-chat__preview-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3rem 0.9rem 0.9rem;
}
.wa-chat__preview-close {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.wa-chat__preview-close:hover {
  background: rgba(255, 255, 255, 0.28);
}
/* Buehne: ein Bild gross und mittig, mehrere als Raster */
.wa-chat__preview-stage {
  flex: 1 1 auto;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 0.4rem;
  min-height: 0;
  overflow: hidden;
}
.wa-chat__preview-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
.wa-chat__preview-stage--grid {
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  width: min(320px, 100%);
  margin-inline: auto;
}
.wa-chat__preview-stage--grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.wa-chat__preview-more {
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.92);
}
.wa-chat__preview-more[hidden] {
  display: none;
}
.wa-chat__preview-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  flex: 0 0 auto;
}
.wa-chat__preview-add {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.wa-chat__preview-add:hover {
  background: rgba(255, 255, 255, 0.28);
}
.wa-chat__preview-bar input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 14px;
  padding: 0.7rem 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  outline: none;
}
.wa-chat__preview-bar input[type="text"]:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.wa-chat__preview-send {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.wa-chat__preview-send:hover {
  background: var(--accent-deep);
}
.wa-chat__preview-send svg {
  width: 20px;
  height: 20px;
}
.wa-chat__composer input {
  flex: 1 1 auto;
  border: none;
  border-radius: 14px;
  padding: 0.82rem 1rem;
  font: inherit;
  font-size: 0.97rem;
  background: rgba(240, 244, 249, 0.9);
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(16, 33, 54, 0.07);
  transition: box-shadow 0.15s, background 0.15s;
}
.wa-chat__composer input:focus {
  background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--accent-ice),
    0 0 0 3px rgba(27, 92, 197, 0.15);
}
.wa-chat__send {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(27, 92, 197, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.wa-chat__send:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(27, 92, 197, 0.34);
}
.wa-chat__send:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.wa-chat__send svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.wa-chat__privacy {
  margin: 0;
  padding: 0 1rem 0.8rem;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}
.wa-chat__privacy a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.wa-chat__privacy a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .wa-chat__panel,
  .wa-chat__launcher {
    transition: none;
  }
}

/* mobile Schnellkontakt-Leiste: erst nach Scroll sichtbar */
/* Freistehende Leiste im Stil der Hero-Buttons: zwei einzelne Karten mit
   Abstand zum Rand statt einer randlosen Schiene. Die Flaeche dahinter
   blendet nach unten weiss aus, sonst laeuft Text sichtbar dahinter durch. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 180;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 42%, #ffffff 100%);
  border-top: none;
  padding: 1.15rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  box-shadow: none;
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.32s var(--ease),
    opacity 0.28s var(--ease),
    visibility 0.32s;
}
.action-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.action-bar svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
/* Zweizeilige Beschriftung wie im Entwurf */
.action-bar__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.action-bar__sub {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.88;
}
/* Blau flach wie .hero .btn--primary */
.action-bar__call {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 33, 54, 0.08), 0 8px 20px -10px rgba(1, 72, 195, 0.5);
}
.action-bar__call:active {
  background: var(--accent-deep);
}
/* Weisse Karte mit gruenem Icon-Chip wie .hero .btn--wa */
.action-bar__wa {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 33, 54, 0.08), 0 8px 20px -10px rgba(16, 50, 110, 0.32);
}
.action-bar__wa svg {
  padding: 0.3rem;
  box-sizing: content-box;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: 50%;
}
.action-bar__wa .action-bar__sub {
  color: var(--muted);
}

@media (min-width: 960px) {
  .action-bar {
    display: none;
  }
}
@media (max-width: 959.98px) {
  body {
    padding-bottom: 0;
    transition: padding-bottom 0.28s var(--ease);
  }
  body.action-bar-visible {
    /* Freistehende Karten mit Polster ringsum: 82px hoch, davon oben ein
       transparenter Verlauf. 76px reichen, damit nichts dahinter verschwindet. */
    padding-bottom: 76px;
  }
  .back-top {
    bottom: 1.25rem;
  }
  body.action-bar-visible .back-top {
    bottom: 5.6rem;
  }
}

/* —— Einwilligungs-Banner (Statistik) —— */
.consent {
  position: fixed;
  left: 0.9rem;
  right: 0.9rem;
  bottom: calc(0.9rem + env(safe-area-inset-bottom));
  z-index: 240;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 2px 6px rgba(16, 33, 54, 0.08),
    0 24px 48px -24px rgba(16, 50, 110, 0.4);
}
.consent__text {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.consent__text a {
  color: var(--accent);
}
.consent__actions {
  display: flex;
  gap: 0.6rem;
}
/* Beide Knoepfe gleich gross: Ablehnen ist genauso leicht wie Akzeptieren */
.consent__btn {
  flex: 1 1 0;
  padding: 0.65rem 1rem;
  border-radius: 9px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.consent__btn--accept {
  background: var(--accent);
  border: 1px solid transparent;
  color: #fff;
}
.consent__btn--accept:hover {
  background: var(--accent-deep);
}
.consent__btn--decline {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.consent__btn--decline:hover {
  border-color: var(--ink-soft);
}

/* legal pages (shared) */
body.legal-page {
  background: var(--bg-soft);
}
/* Rechtstexte haben keinen Hero: Header dort hell */
body.legal-page .site-top {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--line);
}
body.legal-page .site-logo img {
  filter: none;
}
body.legal-page .site-nav a {
  color: var(--ink-soft);
}
body.legal-page .site-nav a:hover,
body.legal-page .site-nav a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.legal-main {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 8vw, 5rem);
}
.legal-head {
  margin-bottom: 2rem;
}
.legal-head h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: clamp(1.75rem, 3.5vw, 2.3rem);
  margin: 0 0 0.4rem;
}
.legal-head p {
  margin: 0;
  color: var(--muted);
}
.legal-card {
  margin-bottom: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.legal-card h2 {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
}
.legal-card p {
  margin: 0;
  color: var(--ink-soft);
}
.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Rechtstexte: Navigation immer sichtbar, Telefon auch mobil */
body.legal-page .site-nav {
  display: flex;
  gap: 0.25rem;
}
body.legal-page .site-tel {
  display: inline-flex;
}
body.legal-page .site-burger {
  display: none;
}

/* ==========================================================================
   MOBIL-LAYOUT (komplett): kein horizontaler Scroll, eigenes Stack-Layout.
   Desktop-Regeln bleiben unangetastet (alles unter max-width).
   ========================================================================== */
@media (max-width: 899.98px) {
  :root {
    --wrap: min(100%, calc(100% - 2rem));
    --header-h: 72px;
  }

  img,
  picture,
  video,
  svg,
  iframe {
    max-width: 100%;
  }

  .wrap,
  .hero__content {
    width: var(--wrap);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* —— Header —— */
  .site-top__row {
    min-height: var(--header-h);
    padding-block: 0.65rem;
    gap: 0.75rem;
  }
  .site-logo img {
    height: 52px;
  }
  .site-burger {
    width: 50px;
    height: 50px;
  }
  .site-burger span,
  .site-burger span::before,
  .site-burger span::after {
    width: 20px;
  }
  .site-drawer nav a {
    font-size: 1.14rem;
  }
  .site-drawer__contact {
    font-size: 1rem;
  }

  /* —— Hero zweigeteilt: links Eyebrow und Ueberschrift, rechts das Foto ——
     Das Foto ist rechts ausgerichtet und laeuft bis zur Fensterkante. Als
     Float umfliesst es nur die Ueberschrift; Buttons, Notiz und Attribute
     bilden eigene Formatierungskontexte und ruecken automatisch darunter,
     ohne dass eine Hoehe geraten werden muss. */
  .hero {
    padding: 0.9rem 0 1.25rem;
    overflow-x: hidden;
  }
  .hero__media {
    position: relative;
    float: right;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: clamp(13.5rem, min(64vw, 100vw - 7.5rem), 25.5rem);
    height: auto;
    margin: 0 0 0.75rem 0.35rem;
    border-radius: 0;
    overflow: visible;
    /* Wie zuvor: Text folgt der Schraege mit sicherem Abstand */
    shape-outside: polygon(34% 0%, 100% 0%, 100% 100%, 0% 100%);
    shape-margin: 0.5rem;
  }
  /* vollstaendig sichtbar statt formatfuellend beschnitten */
  .hero__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    /* drop-shadow folgt der PNG-Kontur statt einer Rechteck-Box */
    filter:
      drop-shadow(0 4px 10px rgba(15, 23, 42, 0.12))
      drop-shadow(0 14px 28px rgba(15, 40, 90, 0.16));
  }
  /* kein weisser Verlauf mehr, die Kachel hat eine klare Kante */
  .hero__media::after {
    background: none;
  }
  /* Badge deaktiviert: auf dem unbeschnittenen Motiv ist zu wenig Flaeche,
     es wuerde das halbe Bild verdecken */
  .hero__media-badge {
    position: absolute;
    z-index: 2;
    left: 0.9rem;
    bottom: 1rem;
    display: none;
    align-items: center;
    gap: 0.32rem;
    max-width: calc(100% - 0.9rem);
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(16, 33, 54, 0.1), 0 8px 18px -10px rgba(16, 50, 110, 0.4);
  }
  .hero__media-badge svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--accent);
  }
  .hero__media-badge span {
    font-size: 0.57rem;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink);
  }
  /* Block statt Flex: nur so umfliesst der Text das Foto. Die Reihenfolge
     entspricht der im Markup, deshalb braucht es kein order mehr. */
  .hero__text {
    display: block;
    max-width: none;
    padding: 0 0 0.25rem;
  }
  /* Block statt inline-flex: ein inline-flex waere ein unteilbarer Kasten und
     wuerde als Ganzes unter das Foto rutschen. Als Block umfliessen die
     Zeilen das Foto. Ohne Strich und ohne Zusatz passt das Label in eine
     Zeile neben das Foto. */
  .hero__eyebrow {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    white-space: normal;
  }
  .hero__eyebrow .hero__eyebrow-line,
  .hero__eyebrow-extra,
  .hero__payout-title-extra {
    display: none;
  }
  /* Mobil: zweiter Umbruch weg, damit "Ich kuemmere mich um den Rest."
     die Trapezflaeche neben der Schraege mitnutzt. */
  .hero h1 .hero__br--desk {
    display: none;
  }
  .hero h1 {
    font-size: clamp(1.42rem, 6vw, 2.05rem);
    line-height: 1.12;
    margin-bottom: 0.65rem;
    letter-spacing: -0.02em;
  }
  /* BFC: Text bleibt in der Spalte neben dem Foto und rutscht
     nicht zeilenweise darunter durch. */
  /* Steht direkt unter der Ueberschrift und laeuft wie diese am Foto entlang:
     die ersten Zeilen enden vor dem Bild, die restlichen nutzen die volle
     Breite. Bewusst KEIN overflow und kein clear, beides wuerde einen eigenen
     Formatierungskontext erzeugen und den Text entweder in eine gut 110 Pixel
     schmale Spalte zwingen oder unter das Bild schieben. */
  .hero__lead {
    display: block;
    margin: 0 0 0.55rem;
    max-width: none;
    font-size: 0.82rem;
    line-height: 1.4;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
  .hero__lead-mobile {
    display: inline;
  }
  .hero__lead-desk {
    display: none;
  }
  .hero__features {
    display: none;
  }

  /* Auszahlung + Trust als Block unter dem Float, eng beieinander.
     padding statt margin: durch clear: both wird ein oberer Rand von der
     Clearance verrechnet und bleibt wirkungslos. Das Polster setzt alles ab
     dem Auszahlungsband tiefer, also auch Vertrauenspunkte und Buttons. */
  .hero__after-media {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0.15rem 0 0.55rem;
    padding-top: 1.5rem;
  }
  /* Vertrauensleiste: Icons/Text gleich gross; nur Luft zur Box oben weg */
  .hero__trust {
    clear: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    width: 100vw;
    margin: -0.35rem calc(50% - 50vw) 0;
    padding: 0 0.45rem 0.65rem;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hero__trust li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
    padding: 0 0.2rem;
    text-align: center;
  }
  .hero__trust li + li::before {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 0;
    width: 1px;
    background: var(--line);
  }
  .hero__trust svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }
  .hero__trust span {
    max-width: 9.5em;
    font-size: 0.52rem;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--ink-soft);
    text-wrap: balance;
  }

  /* Quadratisches Profil links, CTAs rechts übereinander */
  .hero__bottom {
    clear: both;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
    margin: 0.55rem 0 0.35rem;
    /* Luft zwischen Trennstrich und dem Block darunter */
    padding-top: 1.4rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 88%, #c5ced8);
  }
  .hero__about {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1;
    width: 100%;
    max-height: none;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--brand-deep);
    border: none;
    border-radius: 14px;
    box-shadow:
      0 1px 2px rgba(10, 35, 56, 0.08),
      0 10px 22px -14px rgba(10, 35, 56, 0.4);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .hero__about:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(10, 35, 56, 0.1),
      0 18px 32px -14px rgba(10, 35, 56, 0.5);
  }
  .hero__about:hover .hero__about-photo {
    transform: scale(1.04);
  }
  .hero__about:hover .hero__about-text {
    letter-spacing: 0.06em;
  }
  .hero__about-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 20%;
    transition: transform 0.55s var(--ease);
  }
  /* Elegant und vertrauensvoll: weiches Navy, ruhig abgedunkelt */
  .hero__about::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(
        180deg,
        rgba(14, 58, 92, 0.38) 0%,
        rgba(14, 58, 92, 0.12) 32%,
        rgba(10, 35, 56, 0.45) 58%,
        rgba(6, 20, 34, 0.88) 82%,
        rgba(4, 14, 26, 0.96) 100%
      ),
      linear-gradient(
        155deg,
        rgba(23, 83, 127, 0.22) 0%,
        transparent 45%
      );
  }
  .hero__about::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    pointer-events: none;
  }
  .hero__about-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    padding: 0.55rem 0.65rem 0.5rem;
    box-sizing: border-box;
  }
  .hero__about-name {
    font-size: 0.88rem;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(4, 14, 26, 0.35);
  }
  .hero__about-role {
    font-size: 0.5rem;
    font-weight: var(--fw-regular);
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: rgba(232, 240, 248, 0.82);
    text-wrap: pretty;
  }
  .hero__about-text {
    margin-top: 0.12rem;
    padding-top: 0.28rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.58rem;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    transition: letter-spacing 0.3s var(--ease);
  }
  .hero__about-text::after {
    content: " →";
    opacity: 0.85;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__about,
    .hero__about-photo,
    .hero__about-text {
      transition: none;
    }
    .hero__about:hover,
    .hero__about:hover .hero__about-photo {
      transform: none;
    }
  }
  /* —— Auszahlung mobil: schmales Band ——
     Eine Zeile mit der Aussage, darunter der Hinweis auf mehr Infos, rechts
     der Pfeil. Die Auswahlkacheln bleiben im Markup, sind mobil aber aus. */
  .hero__payout-row {
    position: relative;
    clear: none;
    float: none;
    display: flex;
    width: calc(100% - 0.5rem);
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0 auto;
    font-family: var(--font-body);
    overflow: hidden;
    isolation: isolate;
  }
  /* Elementname im Selektor, sonst gewinnt die Basisregel a.hero__payout-row
     mit ihrem Verlauf und den drei Schlagschatten.
     Flache Flaeche statt Verlauf und Schatten: die Karte liegt in der Seite
     statt darueber, die Abgrenzung uebernimmt allein die Haarlinie. */
  a.hero__payout-row {
    background: #f7f9fc;
    border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--line));
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease);
  }
  a.hero__payout-row:hover,
  a.hero__payout-row:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
    background: #f3f6fc;
    box-shadow: none;
  }
  .hero__payout-row::before {
    content: none;
  }
  .hero__calc {
    display: none;
  }
  .hero__payout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0.08rem;
    width: 100%;
    height: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    /* rechts Platz fuer den Pfeilkreis */
    padding: 0.6rem 2.5rem 0.6rem 0.6rem;
    box-sizing: border-box;
  }
  /* Kartensymbol auf heller Akzentflaeche, flach ohne Kante und Schatten */
  .hero__payout-icon {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
  }
  .hero__payout-icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  .hero__payout-body {
    position: relative;
    display: contents;
  }
  .hero__payout-title {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-weight: var(--fw-bold);
    letter-spacing: -0.016em;
    text-wrap: balance;
  }
  /* gleiche Spezifitaet wie die Basisregel weiter oben, sonst bleiben Farbe
     und Groesse der Ueberschrift auf den Desktopwerten */
  .hero__payout-body .hero__payout-title {
    font-size: clamp(0.75rem, 3.3vw, 0.83rem);
    line-height: 1.2;
    color: var(--ink);
  }
  /* mobil die kurze Fassung; der lange Text gehoert zur Desktop-Notiz */
  .hero__payout-title-mobile {
    display: inline;
  }
  .hero__payout-title-desk,
  .hero__payout-desc,
  .hero__payout-desc-desk {
    display: none;
  }
  /* zweite Zeile des Bands */
  .hero__payout-link {
    position: static;
    z-index: 1;
    display: block;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: clamp(0.63rem, 2.8vw, 0.7rem);
    font-weight: var(--fw-regular);
    line-height: 1.3;
    letter-spacing: -0.006em;
    white-space: nowrap;
    text-align: left;
    color: var(--muted);
    background: transparent;
    text-decoration: none;
    transition: color 0.22s var(--ease);
  }
  .hero__payout-link-icon,
  .hero__payout-link-desk {
    display: none;
  }
  .hero__payout-link-text {
    display: inline;
  }
  .hero__payout-link-note {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
  }
  /* Pfeil im Kreis, rechts mittig ueber beide Zeilen. Kein eigener Fond, damit
     er auf der Karte liegt statt darauf zu schweben. */
  .hero__payout-link::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 0.6rem;
    inset-inline-start: auto;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    font-size: 0.85rem;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
  }
  .hero__payout-link:hover,
  .hero__payout-row:hover .hero__payout-link {
    color: var(--ink-soft);
    background: transparent;
  }
  .hero__payout-link:hover::after,
  .hero__payout-row:hover .hero__payout-link::after {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    transform: translateY(-50%) translateX(2px);
  }
  .hero__payout-link:active {
    transform: none;
  }

  /* CTAs rechts neben Über-mich, untereinander */
  .hero__cta {
    clear: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .hero__cta .btn--wa,
  .hero__cta .btn--primary {
    flex: 1 1 0;
    min-height: 0;
  }
  /* Buttons wie im Entwurf: Icon vorn, zweizeilige Beschriftung, Pfeil rechts.
     Die Schriftgroesse ist so gewaehlt, dass die Titelzeile in der schmalen
     Spalte einzeilig bleibt. */
  .hero .btn {
    width: 100%;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0.8rem 0.55rem;
    text-align: center;
  }
  .hero .btn > svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }
  .hero .btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.06rem;
    min-width: 0;
    font-size: 0.86rem;
    white-space: nowrap;
  }
  .hero .btn--wa .btn__text {
    font-size: 0.9rem;
  }
  .hero .btn__text-long {
    display: none;
  }
  .hero .btn__text-short {
    display: inline;
  }
  .hero .btn__sub {
    display: none;
  }
  .hero .btn__chev {
    display: none;
  }
  /* Flache Buttons: kein Verlauf, kein Glanzrand, kein farbiger Schlagschatten
     und kein Anheben. Die Plastik-Optik bleibt dem Desktop. */
  .hero .btn {
    box-shadow: none;
    transition:
      background-color 0.2s var(--ease),
      border-color 0.2s var(--ease),
      color 0.2s var(--ease);
  }
  .hero .btn::before {
    content: none;
  }
  .hero .btn:hover,
  .hero .btn:active {
    transform: none;
    box-shadow: none;
  }
  .hero .btn--primary,
  .hero .btn--primary:hover {
    background: var(--accent);
    border-color: transparent;
    box-shadow: none;
  }
  .hero .btn--primary:active {
    background: var(--accent-deep);
  }
  /* kein Rahmen, die Karte hebt sich ueber einen weichen Schatten ab */
  .hero .btn--wa,
  .hero .btn--chat,
  .hero .btn--wa:hover,
  .hero .btn--chat:hover {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 6px 16px -8px rgba(16, 50, 110, 0.22);
  }
  .hero .btn--wa:active,
  .hero .btn--chat:active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 33, 54, 0.08);
  }
  /* Icon im hellgruenen Chip wie in der Vorlage */
  .hero .btn--wa > svg {
    padding: 0.3rem;
    box-sizing: content-box;
    color: var(--ok);
    background: var(--ok-soft);
    border-radius: 50%;
  }
  /* Der Chat steckt im Entwurf nicht im Hero. Er bleibt ueber den runden
     Button unten rechts und die Kontaktleiste erreichbar. */
  .hero .btn--chat {
    display: none;
  }

  /* Band-Abstaende */
  .band {
    padding-block: clamp(2.25rem, 8vw, 3rem);
  }
  .section-head {
    margin-bottom: 1.35rem;
  }
  .section-head h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  }

  /* Reviews: Karten volle Breite, kein Seiten-Ueberhang */
  .reviews-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #reviews-track {
    min-width: 0;
  }
  .reviews-card {
    flex: 0 0 min(100%, 100%);
    max-width: 100%;
  }

  /* CTA-Kontakt */
  .cta__card {
    max-width: 100%;
  }
  .cta__row-text .cta__row-label {
    word-break: break-word;
  }

  /* FAQ: ganze Frage-Zeile als komfortable Tap-Flaeche */
  .faq summary {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .faq summary::after {
    top: 50%;
    transform: translateY(-50%);
  }

  /* Footer */
  .footer-grid ul li a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.15rem;
  }
  .footer-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .site-utility a {
    display: inline-block;
    padding: 0.5rem 0;
  }

  .card-dark__link,
  .faq-more a {
    display: inline-block;
    padding: 0.4rem 0;
  }
}

/* Sehr schmale Geraete: neben dem Foto bleibt zu wenig Platz. Buttons ruecken
   unter das Foto, die beiden Karten stehen wieder untereinander. */
@media (max-width: 359.98px) {
  .hero__eyebrow {
    white-space: normal;
  }
  .hero__media {
    height: clamp(10rem, 50vw, 13rem);
  }
  /* auf dem kleinen Foto braeuchte das Badge drei Zeilen */
  .hero__media-badge {
    display: none;
  }
  .hero__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 0.4rem;
  }
  .hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.5rem;
  }
  .hero__trust li:nth-child(odd) {
    border-left: none;
  }
  .hero__payout-row {
    float: none;
    width: 100%;
  }
}

/* Tabletbreite: die Textspalte braucht hier weniger Zeilen als auf dem Handy,
   weil die Ueberschrift in zwei statt drei Zeilen passt. Ohne flacheres Foto
   klafft unter den Buttons eine Luecke daneben. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero__media {
    width: clamp(13rem, 36vw, 17.5rem);
    height: 18.5rem;
  }
}

/* Zwischen Mobil und Desktop: Drawer bleibt geclippt (Overflow-Schutz) */