/* Plus Jakarta Sans - variable Schrift, lokal ausgeliefert (kein Google-Aufruf) */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-var.woff2") format("woff2");
}

/* ============================================================
   Pontico – Design-Tokens (aus Figma: Pontico_Share)
   ============================================================ */
:root {
  --green-900: #081b15;
  --green-800: #162822;
  --green-700: #29443b;
  --ink: #1a2823;
  --grey-bg: #f4f4f4;
  --grey-text: #969696;
  --track: #dbdbdb;
  --mint: #abedd2;
  --white: #fff;

  --shadow-card: 0 1px 2px rgba(8, 27, 21, 0.025), 0 5px 16px rgba(8, 27, 21, 0.035);
  --shadow-card-hover: 0 2px 4px rgba(8, 27, 21, 0.035), 0 10px 24px rgba(8, 27, 21, 0.055);

  --page: 1280px;
  --container: 996px;
  --gutter: 142px;

  --radius-card: 14px;
  --radius-band: 27px;
  --radius-pill: 22px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.33, 0, 0.2, 1);
  /* kritisch gedaempft (kein Ueberschwingen) – Standard fuer alles Antippbare */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  /* leichter Ueberschwinger – nur wo eine Bewegung Schwung hatte */
  --spring-soft: cubic-bezier(0.32, 0.94, 0.26, 1.02);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--green-900);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }

.container {
  width: min(var(--container), calc(100% - 64px));
  margin-inline: auto;
}
.container--wide { width: min(1140px, calc(100% - 64px)); }

.section { padding-block: 96px; }
.section--tight { padding-block: 72px; }
.bg-grey { background: var(--grey-bg); }
.bg-dark { background: var(--green-900); color: var(--white); }

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

/* ============================================================
   Typografie-Skala
   ============================================================ */
/* Tracking wird mit wachsender Schrift enger, Leading proportional knapper.
   Ein fester letter-spacing-Wert waere bei mindestens einer Groesse falsch. */
.h-hero { font-size: 61px; line-height: 1.115; font-weight: 800; letter-spacing: -0.026em; }
.h-xl   { font-size: 40px; line-height: 1.125; font-weight: 800; letter-spacing: -0.021em; }
.h-lg   { font-size: 36px; line-height: 1.085; font-weight: 800; letter-spacing: -0.019em; }
.h-md   { font-size: 30px; line-height: 1.30;  font-weight: 700; letter-spacing: -0.014em; }
.h-card { font-size: 20px; line-height: 1.10;  font-weight: 700; letter-spacing: -0.006em; }

.lead      { font-size: 23px; line-height: 1.30; font-weight: 600; letter-spacing: -0.009em; color: var(--ink); }
.lead-sm   { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.006em; color: var(--ink); }
.body      { font-size: 15px; line-height: 1.47; font-weight: 600; letter-spacing: 0; }
.body-16   { font-size: 16px; line-height: 1.44; font-weight: 600; letter-spacing: 0; }
.eyebrow   { font-size: 20px; line-height: 1.10; font-weight: 700; letter-spacing: -0.004em; }

/* ============================================================
   Buttons – wachsen beim Hover leicht an
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 29px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.985); transition-duration: 90ms; }
.btn:focus-visible { outline: 2px solid var(--green-900); outline-offset: 3px; }

.btn--dark,
.btn--deep { background: var(--green-900); color: var(--white); }
.btn--dark:hover,
.btn--deep:hover { box-shadow: 0 8px 22px rgba(8, 27, 21, 0.28); }

.btn--light { background: var(--white); color: var(--green-900); }
.btn--light:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }

.btn--muted { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.btn--muted:hover { background: rgba(255, 255, 255, 0.2); }

.btn--outline {
  background: transparent;
  color: var(--green-900);
  border: 1.5px solid var(--green-900);
}
.btn--outline:hover { background: var(--green-900); color: var(--white); }

.btn--outline-deep {
  background: transparent;
  color: var(--green-900);
  border: 1.5px solid var(--green-900);
}
.btn--outline-deep:hover { background: var(--green-900); color: var(--white); }

.btn-row { display: flex; gap: 25px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

/* ============================================================
   Header / Navigation
   ============================================================ */
/* Kopfzeile. Oben liegt sie absolut am Seitenanfang und scrollt ganz
   normal mit weg. Erst wenn man hochscrollt, kommt sie fixiert und schmal
   (76px, reinweiss) von oben herein; beim Runterscrollen faehrt sie
   wieder hinaus. Ganz oben angekommen faellt sie in den Fluss zurueck.
   Der Body bekommt ihre Ruhe-Hoehe als Innenabstand (setzt das Skript). */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: transparent;
  transition: transform 0.32s var(--ease-out);
}
.site-header.is-fixed { position: fixed; background: #fff; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-fixed .site-header__inner { height: 76px; }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Tastatur: Sprung zum Inhalt und sichtbarer Fokus */
.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--green-900);
  color: var(--white);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; outline: 2px solid var(--white); outline-offset: 2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--green-900);
  outline-offset: 3px;
}
picture { display: contents; }

.site-header__inner {
  width: min(1186px, calc(100% - 64px));
  margin-inline: auto;
  height: 120px;
  display: flex;
  align-items: center;
  gap: 24px;
}


.brand { display: inline-flex; align-items: center; transition: opacity 0.2s var(--ease-out); }
.brand:hover { opacity: 0.72; }
.brand img { width: 175px; height: auto; }

.nav { display: flex; align-items: center; gap: 38px; margin-inline: auto; }
.nav__link {
  position: relative;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  color: var(--green-900);
  padding-block: 6px;
  transition: opacity 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.nav__link:hover { opacity: 0.7; }
.nav__link[aria-current="page"]::after { opacity: 1; }

/* Dropdown */
.nav__item { position: relative; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  color: var(--green-900);
  padding-block: 6px;
}
.nav__caret { width: 10px; height: 6px; transition: transform 0.25s var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  /* genauso breit wie der Menuepunkt darueber */
  width: max(100%, max-content);
  padding: 8px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(8, 27, 21, 0.14);
  opacity: 0;
  visibility: hidden;
  transform-origin: top left;
  transform: translateY(-6px) scale(0.97);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.nav__item.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav__menu a {
  display: block;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.18s var(--ease-out);
}
.nav__menu a:hover { background: var(--grey-bg); }

/* ============================================================
   Hero
   ============================================================ */
.hero { text-align: center; padding-top: 40px; }
.hero:has(.hero__media) { padding-bottom: 96px; }
.hero__title { margin-bottom: 32px; }
.hero__sub { margin-bottom: 56px; }
.hero__media { margin-top: 56px; }

.hero-watermark { position: relative; overflow: hidden; }
.hero-watermark::before {
  content: "";
  position: absolute;
  top: 120px;
  left: 50%;
  width: 1281px;
  height: 1281px;
  translate: -50% 0;
  background: url("../svg/watermark-logo-lg.svg") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

.figure-rounded { border-radius: 26px; overflow: hidden; aspect-ratio: 996 / 495; }
.figure-rounded img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Bildband über volle Breite (Startseite) */

/* ============================================================
   Kennzahlen-Karten (Startseite)
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin-top: 60px;
}
/* Karten buendig mit Logo und Nachfolge-Check-Knopf - aber nur auf breiten
   Bildschirmen. Auf Laptop-Breite (unter 1440 px) waere der Rand zur Seite
   zu knapp, dort bleibt die normale Containerbreite.
   Zum Zuruecknehmen die Klasse "stats--wide" in index.html entfernen. */
@media (min-width: 1440px) {
  .stats--wide {
    width: min(1186px, calc(100vw - 64px));
    margin-inline: calc((min(1186px, 100vw - 64px) - 100%) / -2);
  }
}
.stat-card {
  position: relative;
  perspective: 1400px;
  outline: none;
}
.stat-card:focus-visible .stat-card__front { box-shadow: 0 0 0 2px var(--green-900); }
.stat-card__inner {
  position: relative;
  aspect-ratio: 290 / 256;
  transform-style: preserve-3d;
  transition: transform 0.75s var(--spring);
}
/* Umdrehen: mit Zeiger beim Zeigen, ohne Zeiger per Tipp */
@media (hover: hover) {
  .stat-card:hover .stat-card__inner { transform: rotateY(180deg); }
}
.stat-card.is-flipped .stat-card__inner { transform: rotateY(180deg); }
/* Die animierten Grafiken der Vorderseite liegen in eigenen Ebenen und
   schimmern beim Umdrehen gespiegelt durch die Rueckseite. Deshalb werden
   sie ausgeblendet, sobald die Karte auf der Kante steht (ca. 0,3 s), und
   erst beim Zurueckdrehen an derselben Stelle wieder eingeblendet. */
.stat-scene {
  transition: opacity 0.14s linear 0.3s, visibility 0s linear 0.3s;
}
.stat-card.is-flipped .stat-scene {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s linear 0s, visibility 0s linear 0.1s;
}
@media (hover: hover) {
  .stat-card:hover .stat-scene {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s linear 0s, visibility 0s linear 0.1s;
  }
}
/* ausserhalb des Bildes stehen die Endlos-Animationen still */
.stat-card.is-paused .stat-scene *,
.stat-card.is-paused .stat-scene { animation-play-state: paused !important; }
.stat-card__face {
  position: absolute;
  inset: 0;
  background: var(--white);
  border-radius: 13px;
  box-shadow: 0 22px 23px rgba(100, 100, 100, 0.02);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.stat-card__back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 12% 15%;
}
.stat-card__title {
  position: absolute;
  left: 15%;
  right: 24%;
  top: 14%;
  margin: 0;
  font-size: 19px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.stat-card__icon {
  position: absolute;
  right: 15%;
  top: 15.5%;
  width: 17px;
  height: 17px;
}
.stat-card__icon svg { display: block; width: 100%; height: 100%; }
.stat-card__back-title { font-size: 18px; line-height: 1.2; font-weight: 700; color: var(--green-900); }
.stat-card__back-text { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--ink); }

/* Buehne fuer die Grafik - alle Masse in Prozent der 290x256-Karte aus dem Figma */
.stat-scene { position: absolute; }
.stat-scene svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Karte 1: Kurve --- */
.stat-scene--chart { left: 15%; top: 52.3%; width: 70%; }
.chart-axis { stroke: #e2e2e2; stroke-width: 0.943; }
.chart-axis--h { transform-origin: 0 20.7px; transform: scaleX(0); transition: transform 0.7s var(--ease-out); }
.chart-axis--v { transform-origin: 133.7px 2.8px; transform: scaleY(0); transition: transform 0.7s var(--ease-out) 0.25s; }
.chart-line {
  stroke-dasharray: var(--len, 260);
  stroke-dashoffset: var(--len, 260);
  transition: stroke-dashoffset 1.6s var(--ease-out) 0.2s;
}
.chart-fill {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s var(--ease-out) 0.2s;
}
.chart-dot, .chart-halo {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
.chart-dot { transition: transform 0.5s var(--spring) 1.15s, opacity 0.2s linear 1.15s; }
.chart-halo { fill: rgba(8, 27, 21, 0.28); }
.stat-card.is-live .chart-axis--h { transform: scaleX(1); }
.stat-card.is-live .chart-axis--v { transform: scaleY(1); }
.stat-card.is-live .chart-line { stroke-dashoffset: 0; }
.stat-card.is-live .chart-fill { clip-path: inset(0 0 0 0); }
.stat-card.is-live .chart-dot { transform: scale(1); opacity: 1; }
.stat-card.is-live .chart-halo { animation: halo-pulse 2.2s ease-out 1.35s infinite; }
@keyframes halo-pulse {
  0%   { transform: scale(0.55); opacity: 0.55; }
  70%  { transform: scale(1.9);  opacity: 0; }
  100% { transform: scale(1.9);  opacity: 0; }
}

/* --- Karte 2: Plan A und Plan B --- */
.stat-scene--docs { inset: 0; }
.doc {
  position: absolute;
  top: 69.5%;
  left: 49%;
  translate: -50% -50%;
  transform: rotate(0deg);
  border-radius: 11.3px;
  transition: left 0.9s var(--spring) 0.35s, transform 0.9s var(--spring) 0.35s, top 0.9s var(--spring) 0.35s;
}
.doc--b { width: 27.1%; aspect-ratio: 78.7 / 96.5; background: #e2e2e2; color: #aeaeae; z-index: 1; }
.doc--a { width: 30.2%; aspect-ratio: 87.7 / 107.5; z-index: 2; color: var(--white);
  background: linear-gradient(150deg, #081b15 6%, #268164 93%); }
.stat-card.is-live .doc--b { left: 37.2%; top: 69%; transform: rotate(-7.87deg); }
.stat-card.is-live .doc--a { left: 60.2%; top: 70%; transform: rotate(8.17deg); }
.doc__float { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; }
.stat-card.is-live .doc--a .doc__float { animation: doc-float 6.5s ease-in-out 1.3s infinite alternate; }
.stat-card.is-live .doc--b .doc__float { animation: doc-float-b 7.5s ease-in-out 1.3s infinite alternate; }
@keyframes doc-float {
  from { transform: translateY(0)      rotate(0deg); }
  to   { transform: translateY(-2.5px) rotate(0.9deg); }
}
@keyframes doc-float-b {
  from { transform: translateY(0)     rotate(0deg); }
  to   { transform: translateY(2px)   rotate(-0.8deg); }
}
.doc__dot {
  position: absolute;
  left: 14%; top: 14%;
  width: 20.5%; aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}
.doc--a .doc__dot { background: var(--white); }
.doc__label {
  position: absolute;
  left: 14%; top: 37%;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.doc--b .doc__label { font-size: 11.8px; }
.doc__line {
  position: absolute;
  left: 14%;
  width: var(--w, 60%);
  height: 1.9px;
  border-radius: 2px;
  background: currentColor;
}
.doc--a .doc__line { background: var(--white); }
.doc__line:nth-of-type(3) { top: 64%; }
.doc__line:nth-of-type(4) { top: 70%; }
.doc__line:nth-of-type(5) { top: 76%; }
.doc__line:nth-of-type(6) { top: 82%; }

/* --- Karte 3: Bogen aus Bloecken --- */
.stat-scene--arc { left: 21.1%; top: 53.7%; width: 57.9%; }
.arc-blk { fill: #e5e5e5; transition: fill 0.28s var(--ease-out); }
.stat-card.is-live .arc-blk.is-on {
  fill: var(--c, #268164);
  transition-delay: calc(var(--i, 0) * 60ms + 300ms);
}
.arc-value {
  position: absolute;
  left: 0; right: 0;
  top: 58%;
  margin: 0;
  text-align: center;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--green-900);
}

@media (prefers-reduced-motion: reduce) {
  .stat-card__inner { transition: none; }
  .chart-axis--h, .chart-axis--v, .chart-line, .chart-fill, .chart-dot, .doc, .arc-blk { transition: none; }
  .chart-axis--h { transform: none; }
  .chart-axis--v { transform: none; }
  .chart-line { stroke-dashoffset: 0; }
  .chart-fill { clip-path: inset(0 0 0 0); }
  .chart-dot { transform: scale(1); opacity: 1; }
  .chart-halo { animation: none; opacity: 0.35; transform: scale(1); }
  .doc--b { left: 37.2%; transform: rotate(-7.87deg); }
  .doc--a { left: 60.2%; transform: rotate(8.17deg); }
  .doc__float { animation: none !important; }
  .arc-blk.is-on { fill: var(--c, #268164); }
}


/* Halbkreis-Gauge */

/* ============================================================
   Split-Sektion (Text + Bild)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 363px;
  gap: 84px;
  align-items: start;
}
.split--reverse { grid-template-columns: 363px 1fr; }
.split__media { border-radius: 9px; overflow: hidden; align-self: stretch; min-height: 613px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }

.feature-list { display: grid; gap: 38px; margin-top: 42px; }
.feature {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
}
.feature__icon { width: 18px; margin-top: 4px; }
.feature__icon svg { width: 100%; height: auto; }
.feature__title { margin-bottom: 8px; }
.feature__text { font-size: 15px; line-height: 22px; font-weight: 600; }
.feature__text ul { margin-top: 2px; }
.feature__text li::before { content: "• "; }

.bg-dark .feature__icon svg [stroke] { stroke: #fff; }

/* ============================================================
   Zitat-Band
   ============================================================ */
.quote { text-align: center; padding-block: 84px 90px; }
.quote__text {
  max-width: 798px;
  margin-inline: auto;
  font-size: 25px;
  line-height: 1.56;
  font-weight: 700;
  letter-spacing: -0.011em;
}
.quote__name { margin-top: 42px; font-size: 18px; line-height: 1.5; font-weight: 700; }
.quote__role { margin-top: 4px; font-size: 16px; line-height: 1.5; font-weight: 600; }

/* ============================================================
   Logo-Scroller (Endlos-Karussell)
   ============================================================ */
.logo-strip { background: var(--green-900); padding-block: 46px; overflow: hidden; }
.logo-strip__mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  overflow: hidden;
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 110px;
  width: max-content;
  padding-right: 110px;
  animation: logo-marquee var(--marquee-dur, 32s) linear infinite;
  will-change: transform;
}
.logo-strip:hover .logo-track { animation-play-state: paused; }
.logo-track img { height: 30px; width: auto; opacity: 0.7; }
.logo-track img.is-small { height: 24px; }
.logo-track img.is-mark { height: 30px; }
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

/* ============================================================
   News-Karten (Startseite)
   ============================================================ */
.news-section { position: relative; overflow: hidden; }
.news-section::after {
  content: "";
  position: absolute;
  right: -80px;
  top: 50%;
  translate: 0 -50%;
  width: 533px;
  height: 533px;
  background: url("../svg/watermark-logo.svg") center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.news-list { display: grid; gap: 49px; max-width: 481px; position: relative; z-index: 1; }
.news-card {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 225px;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.news-card__media { position: relative; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__media--gradient { background: linear-gradient(160deg, #d8efe4, #eef6f1); }
.news-card__badge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-align: center;
}
.news-card__badge-inner span { font-size: 12px; font-weight: 800; letter-spacing: -0.336px; }
.news-card__badge-inner img { width: 50px; height: 50px; }
.news-card__body { padding: 14px 24px 20px; display: flex; flex-direction: column; }
.news-card__tag {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 15px;
  border-radius: 999px;
  background: var(--grey-bg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.336px;
  color: var(--ink);
}
.news-card__title { margin-top: 30px; font-size: 25px; line-height: 1.08; font-weight: 800; letter-spacing: -0.012em; }
.news-card__text { margin-top: 16px; font-size: 11px; line-height: 1.30; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); max-width: 160px; }

/* ============================================================
   FAQ-Akkordeon
   ============================================================ */
.faq { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: start; }
.faq__intro-text { margin-top: 34px; font-size: 20px; line-height: 22px; font-weight: 600; color: var(--ink); max-width: 244px; }

.faq__list { display: grid; }
.faq-item { border-bottom: 1px solid rgba(8, 27, 21, 0.08); }
.faq-item:first-child { border-top: 1px solid rgba(8, 27, 21, 0.08); }
.faq-item__button {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: 23px;
  line-height: 1.30;
  letter-spacing: -0.009em;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.faq-item__button:hover { color: var(--green-900); }
.faq-item__button:active .faq-item__plus { transform: scale(0.88); }
.faq-item__plus { transition: transform 90ms var(--ease-out); }
/* Plus/Minus aus der Icon-Bibliothek (Edit / Add_Plus, Edit / Remove_Minus),
   als Maske in der jeweiligen Textfarbe */
.faq-item__plus {
  flex: 0 0 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("../svg/ic-plus.svg") center / 24px 24px no-repeat;
  mask: url("../svg/ic-plus.svg") center / 24px 24px no-repeat;
}
.faq-item.is-open .faq-item__plus {
  -webkit-mask-image: url("../svg/ic-minus.svg");
  mask-image: url("../svg/ic-minus.svg");
}
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--spring);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel > div { overflow: hidden; }
.faq-item__panel p {
  padding: 0 0 22px 52px;   /* 24px Icon + 28px Abstand = buendig mit dem Fragetext */
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
  max-width: 620px;
}

/* ============================================================
   CTA-Band + Footer
   ============================================================ */
.cta-band {
  background: var(--green-900);
  color: var(--white);
  border-radius: var(--radius-band);
  padding: 45px 62px 55px;
}
.cta-band__text { max-width: 875px; margin-bottom: 38px; }
.cta-band .btn--muted { background: var(--green-800); }

.site-footer { padding-block: 88px 60px; }
.footer__top { display: grid; grid-template-columns: 1fr repeat(3, minmax(0, 170px)); gap: 40px; }
.footer__brand img { width: 175px; }
.footer__col { display: grid; gap: 7px; align-content: start; }
.footer__heading { display: none; }
.nav__cta { display: none; }
.hero__sub--mobile { display: none; }
.only-mobile { display: none; }
.only-desktop-block { display: block; }
.footer__col a { font-size: 15px; line-height: 18px; font-weight: 600; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.footer__col a:hover { opacity: 0.62; transform: translateX(2px); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 52px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
}
.footer__social { display: flex; gap: 18px; }
.footer__social a:hover { opacity: 0.62; }

/* ============================================================
   Sektionskopf mit Fließtext rechts
   ============================================================ */
.section-head {
  display: grid;
  grid-template-columns: 1fr 434px;
  gap: 60px;
  align-items: start;
  margin-bottom: 70px;
}
.section-head__text {
  text-align: right;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
  max-width: var(--head-text-w, 434px);
  margin-left: auto;
}
.section-head--narrow { --head-text-w: 268px; }
.bg-dark .section-head__text { color: var(--white); }

/* ============================================================
   Herausforderungs-Karten (Unternehmer)
   ============================================================ */
.challenge {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 82px;
  align-items: stretch;
}
/* die Schaltfläche sitzt unten auf einer Linie mit den Karten */
.challenge > div:first-child { display: flex; flex-direction: column; }
.challenge__cta { margin-top: auto; }
.challenge__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; padding-block: 2px; }
/* die Klone fuer den Endlos-Lauf gibt es nur in der Wisch-Ansicht */
[data-autoscroll] > .is-clone { display: none; }
.challenge-card {
  padding: 36px 29px 30px;
  min-height: 258px;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.challenge-card__icon {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--green-900);
  margin-bottom: 45px;
  transition: background-color 0.35s var(--ease);
}
.challenge-card__icon svg { width: 18px; height: auto; }
.challenge-card__icon svg [stroke] { stroke: #fff; }
.challenge-card__title { margin-bottom: 14px; }
.challenge-card__text { font-size: 15px; line-height: 22px; font-weight: 600; }

.challenge-card.is-active {
  background: var(--green-900);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(8, 27, 21, 0.16);
}
.challenge-card.is-active .challenge-card__icon { background: rgba(255, 255, 255, 0.1); }

/* ============================================================
   Horizontales Akkordeon (Ablauf)
   ============================================================ */
.steps-accordion {
  display: flex;
  gap: 52px;
  align-items: stretch;
  height: 477px;
}
.step-panel {
  color: var(--green-900);
  flex: 0 0 222px;
  will-change: flex-basis;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  transition: flex-basis 0.5s var(--spring), box-shadow 0.3s var(--ease-out);
}
.step-panel.is-open { flex: 0 0 446px; cursor: default; }
.step-panel:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); }
.step-panel:active { transform: scale(0.995); }
.step-panel__media {
  height: 298px;
  background: linear-gradient(160deg, #eef2f0, #dfe7e3);
  position: relative;
  flex: none;
}
.step-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.step-panel__body { padding: 30px 16px 24px; }
.step-panel__title { font-size: 20px; line-height: 22px; font-weight: 700; }
.step-panel__text {
  margin-top: 14px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s var(--ease), max-height 0.45s var(--ease);
}
.step-panel.is-open .step-panel__text { opacity: 1; max-height: 140px; }
.step-panel:not(.is-open) .step-panel__title { max-width: 175px; }

/* ============================================================
   Karussell (Kernfragen / Ansatz / Team / Berater-Karten)
   ============================================================ */
.carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}
.carousel__nav { display: flex; align-items: center; gap: 18px; flex: none; }
.carousel__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.carousel__btn svg { width: 8px; height: auto; }
/* Trefferflaeche auf 44px erweitern, ohne das Layout zu veraendern */
.carousel__btn::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.news-nav button { position: relative; }
.nav__link, .nav__toggle { position: relative; }
.nav__link::before, .nav__toggle::before { content: ""; position: absolute; inset: -11px -8px; }
.carousel__btn:hover { background: currentColor; }
.carousel__btn:active { transform: scale(0.92); transition-duration: 90ms; }
.carousel__btn:hover svg path { stroke: var(--white); }
.bg-dark .carousel__btn:hover svg path { stroke: var(--green-900); }
.carousel__btn[disabled] { opacity: 0.35; pointer-events: none; }

.carousel__progress-wrap { position: relative; width: 152px; height: 3px; }
.carousel__progress-wrap::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.28;
}
.carousel__progress-wrap span {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
  transform-origin: left;
}

.carousel__viewport { overflow: hidden; padding-block: 8px; margin-block: -8px; }

/* Karussell nutzt die volle Header-Breite (Logo links bis Button rechts) */
.carousel--bleed .carousel__viewport { padding-block: 8px; }
/* drei ganze Karten, die vierte wird an der Spaltenkante angeschnitten */
.carousel--bleed .carousel__slide { --slide-w: calc((100% - 90px) / 3.5) !important; }
/* zwischen Tablet und Desktop passen drei Karten nicht mehr sauber nebeneinander */
@media (min-width: 781px) and (max-width: 1150px) {
  .carousel--bleed .section-head { grid-template-columns: 1fr; gap: 20px; }
  .carousel--bleed .section-head__text { text-align: left; margin-left: 0; max-width: 480px; }
  .carousel--bleed .carousel__slide { --slide-w: 46% !important; flex: 0 0 46% !important; }
  .benefit-card { min-height: 320px; }
}
.carousel__track {
  display: flex;
  gap: var(--slide-gap, 40px);
  transition: transform 0.52s var(--spring);
  will-change: transform;
}
.carousel__slide { flex: 0 0 var(--slide-w, 288px); }

/* Kernfragen-Slides */
.keyq { text-align: center; }
.keyq__media {
  height: 190px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
}
.keyq__media img { max-height: 145px; width: auto; }
.keyq__title { font-size: 20px; line-height: 22px; font-weight: 700; }
.keyq__text { margin-top: 12px; font-size: 15px; line-height: 20px; font-weight: 600; }
.keyq-rail { position: relative; }
.keyq-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 100vw;
  top: 95px;
  border-top: 2px dashed #dcdfdd;
  z-index: 0;
}
.keyq-rail .carousel__viewport { position: relative; z-index: 1; background: transparent; }
.keyq__media { position: relative; }

/* Info-Karten (Warum es Pontico braucht) */
.info-card {
  background: var(--white);
  color: var(--green-900);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 39px 30px 34px;
  min-height: 308px;
}
.info-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green-900);
  margin-bottom: 30px;
}
.info-card__icon svg { width: 18px; }
.info-card__icon svg [stroke] { stroke: #fff; }
.info-card__title { margin-bottom: 16px; }
.info-card__text { font-size: 16px; line-height: 22px; font-weight: 600; }
.card-more { display: none; }

/* Ansatz-Karten */
.approach-title { margin-bottom: 56px; }
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.approach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px 32px 38px;
  text-align: left;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.approach-card__num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--grey-text);
  margin-bottom: 26px;
}
.approach-card__rule {
  display: block;
  height: 1px;
  background: rgba(8, 27, 21, 0.12);
  margin: 22px 0;
}
.approach-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.approach-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 26px;
  border-radius: 50%;
  background: var(--green-900);
}
.approach-card__icon svg { width: 19px; }
.approach-card__icon svg [stroke] { stroke: #fff; }
.approach-card__title { margin-bottom: 14px; }
.approach-card__text { font-size: 16px; line-height: 22px; font-weight: 600; }

/* Team */
.team-slide { display: grid; grid-template-columns: 389px 1fr; gap: 109px; align-items: start; }
.team__photo { position: relative; border-radius: 23px; overflow: hidden; height: 515px; }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__linkedin {
  position: absolute;
  left: 24px; bottom: 24px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--white);
  transition: background-color 0.25s var(--ease-out);
}
.team__linkedin:hover { background: #fff; }
.team__linkedin svg { width: 24px; }
.team__linkedin svg path { fill: var(--green-900); }
.team__name { margin-bottom: 14px; }
.team__bio { font-size: 16px; line-height: 22px; font-weight: 600; margin-bottom: 34px; }
.team__expertise-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
  text-align: left;
  cursor: default;
}
.team__chevron { display: none; }
.team__expertise { display: block; }
.team__points { display: grid; gap: 22px; margin-top: 26px; }
.team__point { display: grid; grid-template-columns: 16px 1fr; gap: 30px; align-items: start; }
.team__point svg { width: 16px; margin-top: 4px; }
.team__point p { font-size: 16px; line-height: 22px; font-weight: 600; }

/* Berater-Vorteilskarten */
.benefit-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 30px 28px 32px;
  min-height: 386px;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.benefit-card__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  background: var(--green-900);
  transition: background-color 0.4s var(--ease-out);
}
.benefit-card__icon svg { width: 17px; height: auto; }
.benefit-card__icon svg [stroke] { stroke: #fff; }
/* zwei Zeilen Mindesthoehe und Grundlinie unten, damit einzeilige Titel
   auf derselben Linie sitzen wie zweizeilige */
.benefit-card__title {
  display: flex;
  align-items: flex-end;
  min-height: 2.2em;
  margin-bottom: 14px;
}
.benefit-card__text { font-size: 15px; line-height: 1.47; font-weight: 600; }
/* nur die hervorgehobene Karte ist ein dunkler Block */
.benefit-card.is-active {
  background: var(--green-900);
  color: var(--white);
}
.benefit-card.is-active .benefit-card__icon { background: rgba(255, 255, 255, 0.12); }

/* ============================================================
   Prozess-Timeline (Lösungen, 01–05)
   ============================================================ */
.timeline__steps { display: grid; }
.timeline-step {
  display: grid;
  grid-template-columns: 1fr 48px 268px;
  gap: 0;
  align-items: start;
  padding-block: 42px;
}
.timeline-step__label {
  font-size: 30px;
  line-height: 1.30;
  letter-spacing: -0.014em;
  font-weight: 800;
  color: var(--grey-text);
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}
.timeline-step__label span { display: inline-block; min-width: 56px; }
.timeline-step__rail { position: relative; justify-self: center; width: 18px; }
.timeline-step__dot {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grey-text);
  margin-top: 8px;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.timeline-step__line {
  display: block;
  position: absolute;
  left: 50%;
  /* gleicher Abstand nach oben wie nach unten zum jeweiligen Punkt */
  top: 40px;
  height: calc(100% + 38px);
  width: 2px;
  translate: -50% 0;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.timeline-step__line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--white);
  transition: height 0.5s var(--ease-out);
}
.timeline-step.is-done .timeline-step__line::after { height: 100%; }
.timeline-step:last-child .timeline-step__line { display: none; }
.timeline-step__rail { position: relative; height: 100%; }
.timeline-step__text {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--grey-text);
  transition: color 0.4s var(--ease);
}

.timeline-step__text .tl-word {
  color: var(--grey-text);
  transition: color 0.35s var(--ease-out);
}
.timeline-step__text .tl-word.is-lit { color: var(--white); }
.timeline-step.is-lit .timeline-step__label { color: var(--white); }
.timeline-step.is-lit .timeline-step__dot { background: var(--white); transform: scale(1.06); }


.timeline__cta { display: flex; justify-content: center; margin-top: 72px; }

/* ============================================================
   Cockpit-Tabs
   ============================================================ */
/* Tabs mit durchlaufendem Indikator */
.tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-block: 70px 46px;
}
.tabs__indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 47px;
  border-radius: 999px;
  background: var(--green-900);
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
  pointer-events: none;
}
.tab {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  height: 47px;
  padding-inline: 28px;
  border-radius: 999px;
  background: var(--grey-bg);
  color: var(--green-900);
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.tab:hover { background: #e8ebe9; }
.tab:active { transform: scale(0.985); transition-duration: 90ms; }
.tab.is-active { background: transparent; color: var(--white); }
/* der aktive Reiter laeuft in einem helleren Gruen von links nach rechts voll */
.tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #081b15 0%, #2e6b52 55%, #9fe3c7 100%);
  clip-path: inset(0 100% 0 0);
}
.tab.is-active.is-running::after { animation: tab-fill 4s linear forwards; }
@keyframes tab-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .tab::after { display: none; }
}
.tab-panels { position: relative; }
/* Bildunterschrift am Desktop: links der Reitername, rechts die Beschreibung,
   so breit wie das Bild */
.tab-caption {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
  width: min(950px, 100%);
  margin: 46px auto 0;
  text-align: left;
}
.tab-caption h3 { margin: 0; }
.tab-caption p { margin: 0; font-size: 16px; line-height: 1.44; font-weight: 600; color: var(--ink); }
.tabs.is-paused .tab::after { animation-play-state: paused; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade-in 0.4s var(--ease); }
.tab-panel img { display: block; width: 950px; max-width: 100%; height: auto; margin-inline: auto; border-radius: 26px; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Pläne
   ============================================================ */
/* Plaene: Ueberschrift links buendig mit "Das Pontico Cockpit", die beiden
   Karten rechts an der Spaltenkante angedockt */
/* Plaene gehoeren zum Cockpit: dicht darunter, Ueberschrift und Karten mittig */
.plans-section { padding-top: 0; }
#cockpit.section { padding-bottom: 90px; }
.plans-row { display: grid; grid-template-columns: 1fr; gap: 56px; }
.plans__title { text-align: left; }   /* buendig mit "Das Pontico Cockpit" */
.plans {
  display: grid;
  grid-template-columns: 347px 347px;
  gap: 80px;
  justify-content: center;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .plans { gap: 40px; justify-content: center; }
}
.plan {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  padding: 30px 30px 40px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.plan__body { flex: 1; }
.plan:hover { transform: translateY(-4px); }
.plan--premium { background: var(--green-900); color: var(--white); }
.plan--free { background: var(--grey-bg); color: var(--green-900); }
.plan__badge {
  letter-spacing: 0.008em;
  display: block;
  height: 27px;
  line-height: 27px;
  border-radius: 999px;
  background: var(--white);
  color: var(--green-900);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 28px;
  max-width: 100%;
  text-align: center;
}
.plan__title { font-size: 31px; line-height: 1.13; font-weight: 800; letter-spacing: -0.016em; text-align: center; margin-bottom: 30px; }
.plan__body { font-size: 16px; line-height: 26px; font-weight: 600; }
.plan__body ul { list-style: disc; padding-left: 24px; margin-top: 4px; }
.plan__cta { display: flex; justify-content: center; margin-top: 38px; }
.plan .btn { height: 47px; font-size: 13px; padding-inline: 40px; }

/* ============================================================
   Scroll-Reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  /* Bewegung ersetzen, Rueckmeldung erhalten: Farbe und Deckkraft bleiben */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.14s !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .stat-card:hover, .news-card:hover,
  .approach-card:hover, .plan:hover, .challenge-card:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .team__linkedin { background: var(--white); backdrop-filter: none; }
  .stat-card::after { background: var(--white); }
  .hero--media::after { background: rgba(0, 0, 0, 0.58); }
}

@media (prefers-contrast: more) {
  .site-header { background: var(--white); border-bottom: 1px solid var(--green-900); }
  .stat-card__face, .news-card, .approach-card, .info-card,
  .benefit-card, .challenge-card, .step-panel { border: 1px solid rgba(8, 27, 21, 0.35); }
  .field { border-color: var(--green-900); }
  .btn--outline, .btn--outline-deep { border-width: 2px; }
  .timeline-step__text .tl-word { color: #c8c8c8; }
  .nav__link[aria-current="page"]::after { height: 2px; }
}

/* Mobile News-Navigation ist auf dem Desktop unsichtbar */
.news-nav { display: none; }
.approach__spacer { display: none; }

/* Kontaktseite: Titel mittig und mit Luft */
.kontakt-hero { text-align: center; padding-block: 64px 44px; }
@media (max-width: 780px) {
  .kontakt-hero { padding-block: 30px 34px; }
}
.kontakt-hero .h-hero { line-height: 1.14; padding-bottom: 6px; }

/* Zurueck nach oben (Desktop) */
.to-top {
  position: fixed;
  /* buendig mit der rechten Inhaltskante (Kopfzeile), mindestens 28px */
  right: 28px;
  bottom: 28px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(8, 27, 21, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s, background-color 0.2s var(--ease-out);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--green-700); }
.to-top:active { transform: scale(0.92); transition-duration: 90ms; }
.to-top svg { width: 15px; height: auto; }

/* ============================================================
   Landing-Hero: Bild mit aufliegenden Schaltflaechen (Figma 762:1385)
   Bild 958 x 490, oben 25px gerundet, Schaltflaechen 36px darunter
   ============================================================ */
.hero--landing { padding-top: 56px; padding-bottom: 0; text-align: center; }
.hero--landing .hero__title { margin-bottom: 40px; }
.hero--landing .hero__sub { margin-bottom: 0; max-width: 720px; margin-inline: auto; }

.hero-stage {
  position: relative;
  width: min(958px, calc(100% - 64px));
  height: 490px;
  margin: 76px auto 0;
  border-radius: 25px 25px 0 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-stage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-stage__veil {
  position: absolute;
  inset: 0 0 82px 0;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 25px 25px 0 0;
  pointer-events: none;
}
.hero-stage__actions {
  position: absolute;
  top: 36px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 25px;
}

/* ============================================================
   Ergänzende Layout-Klassen
   ============================================================ */
.section--cta { padding-block: 40px 0; }
.news-section__title { margin-bottom: 44px; }
.steps__title { margin-bottom: 48px; }
.challenge__intro { margin-top: 36px; color: var(--ink); max-width: 268px; }
.challenge__cta { padding-top: 48px; }
/* Nachfolge-Check-Block */
.check-head { margin-bottom: 74px; }
.check-media { text-align: center; }
.check-media img { margin-inline: auto; width: min(734px, 100%); }
.check-cta { margin-top: 52px; }

/* Lösungen: Mockup grosszuegig */
/* Grundfassung: etwas kleiner und freistehend, mit Luft nach oben und unten */
.loesungen__mockup { margin-top: 68px; margin-bottom: 110px; text-align: center; }
.loesungen__mockup img { margin-inline: auto; width: min(880px, 100%); max-width: none; }
/* Variante "eintauchen" (Figma 748-1144): groesser, taucht unten in den dunklen
   Abschnitt ein, der Laptop wird angeschnitten. Zum Zuruecknehmen die Klasse
   loesungen__mockup--eintauchen in loesungen.html entfernen. */
@media (min-width: 781px) {
  .loesungen__mockup--eintauchen { margin-top: 48px; margin-bottom: -150px; }
  .loesungen__mockup--eintauchen img { width: min(1080px, 100%); }
  .nachfolgecheck { position: relative; z-index: 1; }
}
.carousel__nav--end { justify-content: flex-end; margin-bottom: 34px; }
.quote__mark {
  display: block;
  font-size: 96px;
  line-height: 0.42;
  font-weight: 400;
  margin-bottom: 4px;
}
.plan__badge--ghost { visibility: hidden; }

/* Karussell ohne dauerhaft hervorgehobene Karte */
[data-hover-none] .benefit-card.is-active { transform: none; }

@media (min-width: 781px) {
  .hero .btn--outline {
    background: transparent;
    color: var(--green-900);
    border: 2px solid var(--green-900);
  }
  .hero .btn--outline:hover { background: var(--green-900); color: var(--white); }
  .hero .btn--outline:hover { box-shadow: 0 8px 22px rgba(8, 27, 21, 0.28); }
}

/* ============================================================
   Mobile Navigation
   ============================================================ */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green-900);
  transition: transform 0.3s var(--ease-out), background-color 0.2s var(--ease-out);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--green-900);
  transition: transform 0.3s var(--ease-out), top 0.25s var(--ease-out);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .site-header__inner { height: 96px; }
  .nav { gap: 24px; }
}

@media (max-width: 1060px) {
  .h-hero { font-size: 46px; line-height: 52px; }
  .h-xl { font-size: 32px; line-height: 38px; }
  .h-lg { font-size: 30px; line-height: 34px; }
  .split, .split--reverse, .faq, .challenge, .timeline, .section-head, .team-slide {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .split--reverse .split__media { order: -1; }
  .split__media { min-height: 380px; }
  .section-head__text { text-align: left; max-width: none; margin-left: 0; }
  .stats, .approach { grid-template-columns: 1fr; }
  .challenge__grid { grid-template-columns: 1fr; }
  .steps-accordion { flex-direction: column; height: auto; }
  .step-panel, .step-panel.is-open { flex: none; }
  .step-panel__text { opacity: 1; max-height: none; }
  .step-panel:not(.is-open) .step-panel__title { max-width: none; }
  .plans { grid-template-columns: 1fr; justify-content: stretch; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .timeline-step { grid-template-columns: 1fr; gap: 12px; }
  .timeline-step__rail { display: none; }
  .cta-band { padding: 36px 28px 40px; }
}

/* ---------------- Mobil – 1:1 nach Figma (402 px Frame) ----------------
   Seitenrand 29 px, Inhaltsbreite 344 px
   ---------------------------------------------------------------------- */
@media (max-width: 780px) {
  :root { --header-h: 76px; }

  .container, .container--wide { width: calc(100% - 58px); }
  h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; hyphens: manual; }
  .section { padding-block: 72px; }
  .section--tight { padding-block: 52px; }
  .section--cta { padding-block: 28px 0; }

  /* ---- Header: kein backdrop-filter - er wuerde einen Bezugsrahmen
     bilden und das fixed positionierte Menue auf die Header-Hoehe einsperren. */
  /* solange das Menue offen ist, bleibt sie stehen. Der Header faellt dabei
     aus dem Fluss, deshalb bekommt der Body seine Hoehe als Innenabstand
     zurueck - sonst springt die Seite beim Oeffnen um 76px nach oben. */
  body.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--white); }
  body.nav-open:not(.has-hero-media) { padding-top: 76px; }
  .site-header__inner { height: 76px; width: calc(100% - 58px); gap: 0; }
  .to-top { display: none !important; }
  .brand img { width: 118px; }
  .nav-toggle { display: flex; }
  .site-header__inner > .btn { display: none; }

  .nav {
    position: fixed;
    inset: 76px 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 22px 29px 40px;
    background: var(--white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }

  .nav__link, .nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 0;
    gap: 0;
    text-align: left;
    font-size: 20px;
    border-bottom: 1px solid rgba(8, 27, 21, 0.1);
  }
  .nav__link::after { display: none; }
  .nav__item { border-bottom: 1px solid rgba(8, 27, 21, 0.1); }
  .nav__toggle { border-bottom: 0; }
  .nav__menu {
    position: static; translate: none; transform: none;
    min-width: 0; padding: 0 0 12px 14px;
    background: none; box-shadow: none;
    opacity: 1; visibility: visible; display: none;
  }
  .nav__item.is-open .nav__menu { display: block; }
  .nav__menu a { padding: 11px 0; font-size: 17px; font-weight: 600; }
  .nav__cta { display: flex; margin-top: 26px; }
  .nav__cta .btn { width: 100%; }

  /* ---- Typografie (Figma-Werte) ---- */
  .h-hero { font-size: 40px; line-height: 46px; }
  .h-xl, .h-lg { font-size: 31px; line-height: 35px; }
  .h-md { font-size: 22px; line-height: 30px; }
  .lead { font-size: 16px; line-height: 22px; }
  .lead-sm { font-size: 16px; line-height: 22px; }
  .eyebrow { font-size: 16px; line-height: 22px; }
  .h-card { font-size: 20px; line-height: 26px; }
  .body, .feature__text { font-size: 16px; line-height: 26px; }
  .body-16, .info-card__text, .approach-card__text, .team__bio, .section-head__text { font-size: 16px; line-height: 26px; }

  /* ---- Buttons: untereinander, zentriert, 47 px hoch ---- */
  .btn { height: 47px; font-size: 13px; padding-inline: 26px; }
  .btn-row { flex-direction: column; align-items: center; gap: 13px; }
  .btn-row .btn { width: auto; min-width: 170px; }

  /* ---- Hero: der Header scrollt mit, also braucht der Inhalt seine Hoehe ---- */
  .hero { padding-top: 26px; text-align: center; }
  .hero__title { margin-bottom: 34px; }
  .hero__sub { margin-bottom: 30px; }
  .hero--landing {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 76px);
    min-height: calc(100lvh - 76px);
    padding-top: 34px;
    padding-bottom: 0;
  }
  .hero--landing .hero__title { margin-bottom: 26px; }
  .hero--landing .hero__sub { margin-bottom: 0; }
  /* die Buehne nimmt den Rest der Hoehe ein und schliesst damit buendig
     mit dem unteren Bildschirmrand ab */
  .hero-stage {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 280px;
    margin-top: 46px;
    border-radius: 18px 18px 0 0;
  }
  /* die Buehne hat keine feste Hoehe mehr, das Bild fuellt sie absolut aus */
  .hero-stage__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-stage__veil { border-radius: 18px 18px 0 0; }
  .hero-stage__actions { top: 20px; flex-direction: column; gap: 12px; align-items: center; }

  /* Nachfolge-Report grosszuegiger */
  .check-head { margin-bottom: 30px; }
  .check-media { margin-top: 0; }
  .check-cta { margin-top: 42px; }
  .hero__media { margin-top: 40px; }
  .figure-rounded { aspect-ratio: 344 / 261; border-radius: 15px; }

  /* ---- Hero der Unterseiten: Bild fuellt den ganzen Bereich ---- */
  .hero--media {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* die Kopfzeile liegt absolut darueber, der Hero beginnt also bei 0
       und reicht bis exakt zum unteren Bildschirmrand */
    min-height: 100svh;
    min-height: 100lvh;
    padding: 76px 0 40px;
    padding-bottom: calc(40px + (100lvh - 100svh));
    color: var(--white);
    overflow: hidden;
  }
  .hero--media .hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: -2;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .hero--media .hero__media img { width: 100%; height: 100%; object-fit: cover; }
  .hero--media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.34);
  }
  .hero--media .hero__title,
  .hero--media .hero__sub,
  .hero--media .lead { color: var(--white); }
  .hero--media .hero__title { margin-bottom: 26px; }
  .hero--media .hero__sub { display: none; }
  .hero--media .hero__sub--mobile { display: block; margin-bottom: 42px; max-width: 320px; margin-inline: auto; }
  .hero--media .btn-row { margin-top: 0; }
  .hero--media .btn--dark,
  .hero--media .btn--deep { background: var(--white); color: var(--green-900); }
  .hero--media .btn--outline,
  .hero--media .btn--outline-deep { background: transparent; color: var(--white); border-color: var(--white); }
  .hero--media .reveal { opacity: 1; transform: none; }
  .hero--media.hero-watermark::before { display: none; }

  /* Header liegt transparent ueber dem Bild-Hero */
  .has-hero-media .site-header { background: transparent; }
  .has-hero-media .site-header .brand img { filter: brightness(0) invert(1); }
  .has-hero-media .nav-toggle span,
  .has-hero-media .nav-toggle span::before,
  .has-hero-media .nav-toggle span::after { background: var(--white); }
  .has-hero-media .site-header.is-stuck { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .has-hero-media .site-header.is-stuck .brand img { filter: none; }
  .has-hero-media .site-header.is-stuck .nav-toggle span,
  .has-hero-media .site-header.is-stuck .nav-toggle span::before,
  .has-hero-media .site-header.is-stuck .nav-toggle span::after { background: var(--green-900); }

  body.nav-open .site-header { background: var(--white) !important; }
  body.nav-open .site-header .brand img { filter: none !important; }
  body.nav-open .nav-toggle span::before,
  body.nav-open .nav-toggle span::after { background: var(--green-900) !important; }

  /* Logo-Scroller mobil: heller Grund, dunkle Logos */
  .logo-strip { background: var(--white); padding-block: 30px; }
  .logo-track { gap: 60px; }
  .logo-track img { filter: brightness(0); opacity: 0.72; height: 24px; }
  .logo-track img.is-small { height: 20px; }
  .logo-track img.is-mark { height: 24px; }

  /* ---- Abschnittsköpfe zentriert ---- */
  .section-head { text-align: center; gap: 18px; margin-bottom: 40px; }
  .section-head__text { text-align: center; max-width: none; margin-left: 0; }
  .split > div:not(.split__media), .challenge > div:first-child { text-align: center; }
  .split .feature-list { text-align: left; }
  .split .btn-row, .challenge .btn-row { justify-content: center; }
  .challenge__intro { max-width: none; margin-inline: auto; margin-top: 0; }
  .carousel__nav--end { justify-content: center; }

  /* ---- Split: Bild oben, Text darunter ---- */
  .split, .split--reverse { grid-template-columns: 1fr; gap: 34px; }
  .split__media, .split--reverse .split__media { order: -1; min-height: 0; aspect-ratio: 344 / 261; border-radius: 15px; }
  .feature { grid-template-columns: 1fr; gap: 6px; text-align: left; }
  .feature__icon { display: none; }
  .feature__title { text-align: left; margin-bottom: 12px; }
  .feature-list { gap: 38px; margin-top: 44px; }
  .feature__text ul { margin-top: 6px; padding-left: 20px; list-style: disc; }
  .feature__text li::before { content: none; }

  /* ---- Kennzahlen: Karten stapeln sich beim Scrollen ---- */
  .stats { display: block; margin-top: 48px; }
  /* Die Ueberschrift wandert mit nach oben und bleibt erst in dem Moment
     stehen, in dem auch die erste Karte stehen bleibt (top kommt aus dem
     Skript, weil es von der Hoehe der Ueberschrift abhaengt). */
  .stat-head {
    position: sticky;
    top: 48px;               /* mittig im oberen Drittel, Karten darunter */
    z-index: 3;
    padding-block: 10px 18px;
    background: var(--grey-bg);
  }
  .stat-stack .stat-card {
    position: sticky;
    margin-inline: auto;
    max-width: none;
    margin-bottom: 22px;
  }
  .stat-stack .stat-card__face { box-shadow: 0 -2px 18px rgba(8, 27, 21, 0.07); }
  .stat-stack .stat-card:nth-child(1) { top: 222px; }
  .stat-stack .stat-card:nth-child(2) { top: 254px; }
  .stat-stack .stat-card:nth-child(3) { top: 286px; }
  .stat-stack__spacer { height: 200px; }
  /* Ueberschrift und Karten teilen sich einen Bezugsrahmen (.stat-block),
     damit sie sich im selben Moment loesen. Die Zwischenboxen werden
     aufgeloest, der Block uebernimmt die Spaltenbreite. */
  .stat-block { width: calc(100% - 58px); margin-inline: auto; }
  .stat-block > .container:not(.stat-head), .stat-block .stat-stack { display: contents; }
  .stat-block > .stat-head { width: 100%; }

  /* ---- Zitat mit grossem Anführungszeichen ---- */
  .quote { padding-block: 62px 70px; }
  .quote__mark { font-size: 84px; margin-bottom: 2px; }
  .quote__text { font-size: 20px; line-height: 26px; max-width: 320px; }
  .quote__name { margin-top: 32px; font-size: 18px; line-height: 1.55; }
  .quote__role { font-size: 18px; line-height: 28px; font-weight: 600; }

  /* ---- Herausforderungen: horizontal wischbar ---- */
  .challenge { grid-template-columns: 1fr; gap: 26px; }
  .challenge > div:first-child { display: contents; }
  .challenge .eyebrow { display: none; }
  .challenge__grid { order: 3; margin-top: 0; }
  .challenge__cta { order: 4; margin-top: 18px; padding-top: 0; padding-bottom: 18px; }
  .challenge__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 67%;
    gap: 22px;
    padding-inline: 26px;
    margin-inline: -26px;
    scroll-padding-inline: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .challenge__grid::-webkit-scrollbar { display: none; }
  .challenge-card { scroll-snap-align: start; scroll-snap-stop: always; min-height: 285px; padding: 26px 22px 30px; box-shadow: none; }
  [data-autoscroll] > .is-clone { display: block; }
  .challenge-card__icon { margin-bottom: 26px; }
  .challenge-card:hover { transform: none; }

  /* ---- Ablauf mobil: Akkordeon untereinander (wie im Figma) ---- */
  .steps-accordion { flex-direction: column; height: auto; gap: 20px; }
  .step-panel, .step-panel.is-open { flex: none; }
  .step-panel__media { height: 0; transition: height 0.45s var(--ease-out); }
  .step-panel.is-open .step-panel__media { height: 190px; }
  .step-panel__text { opacity: 0; max-height: 0; }
  .step-panel.is-open .step-panel__text { opacity: 1; max-height: 320px; }
  .step-panel:not(.is-open) .step-panel__title { max-width: none; }
  .step-panel__body { padding: 24px 22px 26px; }
  .steps__title { text-align: center; margin-bottom: 34px; }

  /* ---- Vorteilskarten mobil: horizontal wischbar wie im Figma ---- */
  .carousel--bleed .carousel__nav { display: none; }
  .carousel--bleed .carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .carousel--bleed .carousel__viewport::-webkit-scrollbar { display: none; }
  .carousel--bleed .carousel__track { transform: none !important; }
  .carousel--bleed .benefit-card:first-child { background: var(--green-900); color: var(--white); }
  .carousel--bleed .benefit-card:first-child .benefit-card__icon { background: rgba(255,255,255,0.1); }
  .carousel--bleed .benefit-card.is-active { transform: none; box-shadow: var(--shadow-card); }
  .carousel--bleed .benefit-card:first-child.is-active { background: var(--green-900); color: var(--white); }

  /* ---- Karussells mobil: frei wischbar statt Pfeil-Navigation ---- */
  .carousel__head { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .carousel__nav { display: none !important; }
  /* einzelne Karussells behalten mobil ihre beiden Pfeile - unter den
     Karten, mittig, ohne Fortschrittsbalken (wie im Figma) */
  [data-carousel-arrows] > .container { display: flex; flex-direction: column; gap: 56px; }
  [data-carousel-arrows] .carousel__head { display: contents; }
  [data-carousel-arrows] .carousel__head > :not(.carousel__nav) { order: 1; }
  [data-carousel-arrows] .carousel__viewport { order: 2; }
  [data-carousel-arrows] .carousel__nav {
    display: flex !important;
    order: 3;
    justify-content: center;
    gap: 34px;
    margin-top: 0;
  }
  [data-carousel-arrows] .carousel__progress-wrap { display: none; }
  [data-carousel-arrows] .carousel__btn { border: 0; width: 44px; height: 44px; }
  [data-carousel-arrows] .carousel__btn svg { width: 15px; }
  [data-carousel-arrows] .carousel__btn:hover { background: transparent; }
  [data-carousel-arrows] .carousel__btn:hover svg path { stroke: currentColor; }
  [data-carousel] .carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding-inline: 0;
    margin-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  [data-carousel] .carousel__viewport::-webkit-scrollbar { display: none; }
  [data-carousel] .carousel__track { transform: none !important; transition: none; gap: 18px; }
  /* volle Spaltenbreite: jede Karte bekommt denselben Rand wie der Rest der Seite */
  [data-carousel] .carousel__slide {
    --slide-w: 100% !important;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  [data-carousel]:not([data-carousel-loop]) .carousel__slide.is-clone { display: none; }
  /* die Beraterkarten behalten ihren Anschnitt wie im Figma (ca. zwei Drittel) */
  .carousel--bleed .carousel__viewport {
    width: auto;
    margin-inline: -26px;
    padding-inline: 26px;
    scroll-padding-inline: 26px;
  }
  [data-carousel].carousel--bleed .carousel__slide {
    --slide-w: 67% !important;
    flex: 0 0 67% !important;
    scroll-snap-align: start;
  }
  .carousel--bleed .carousel__track { gap: 22px; }
  .carousel--bleed .benefit-card {
    min-height: 340px;
    justify-content: flex-start;
    padding: 34px 26px 34px;
  }
  .carousel--bleed .benefit-card__icon { width: 50px; height: 50px; margin-bottom: 44px; }
  .info-card { min-height: 0; padding: 28px 24px 32px; }
  .keyq-rail::before { top: 80px; }
  .keyq__media { height: 160px; }
  .keyq__media img { max-height: 120px; }

  /* ---- Ansatz: die Ueberschrift bleibt stehen, waehrend sich die
     Karten darunter uebereinanderlegen ---- */
  .approach { display: block; }
  .approach-title {
    position: sticky;
    top: 18px;
    z-index: 3;
    margin-bottom: 26px;
    padding-block: 8px 16px;
    background: var(--grey-bg);
  }
  .approach-card {
    position: sticky;
    margin-bottom: 20px;
    box-shadow: 0 -2px 14px rgba(8, 27, 21, 0.05);
  }
  .approach-card:nth-of-type(1) { top: 176px; }
  .approach-card:nth-of-type(2) { top: 208px; }
  .approach-card:nth-of-type(3) { top: 240px; }
  .approach__spacer { display: block; height: 170px; }
  .approach-card__num { display: none; }
  .approach-card { padding: 30px 24px 30px; }

  /* ---- Team: untereinander, Expertise klappt auf (wie im Figma) ---- */
  [data-carousel="team"] .carousel__viewport { overflow: visible; scroll-snap-type: none; }
  [data-carousel="team"] .carousel__track { display: block; }
  [data-carousel="team"] .carousel__slide { flex: none; margin-bottom: 62px; }
  [data-carousel="team"] .carousel__slide:last-child { margin-bottom: 30px; }
  [data-carousel="team"] .carousel__nav { display: none; }
  .team-slide { grid-template-columns: 1fr; gap: 46px; }
  .team__expertise-toggle {
    cursor: pointer;
    padding-block: 14px;
    border-top: 1px solid rgba(8, 27, 21, 0.12);
    margin-bottom: 0;
  }
  .team__chevron {
    display: block;
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
  }
  .team__chevron::before, .team__chevron::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    border-radius: 2px;
    background: var(--green-900);
    translate: 0 -50%;
    transition: transform 0.3s var(--spring), opacity 0.3s var(--ease-out);
  }
  .team__chevron::after { transform: rotate(90deg); }
  .team__expertise-toggle[aria-expanded="true"] .team__chevron::after { transform: rotate(0); opacity: 0; }
  .team__expertise {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s var(--spring);
  }
  .team__expertise > .team__expertise-inner {
    min-height: 0;
    overflow: hidden;
  }
  .team__expertise-toggle[aria-expanded="true"] + .team__expertise { grid-template-rows: 1fr; }
  /* Lange Karten kuerzen, "mehr" klappt sie auf */
  .info-card__text[data-clamp] {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .info-card__text[data-clamp].is-open { -webkit-line-clamp: unset; }
  .card-more {
    display: inline-flex;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--green-900);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* ---- Team mobil: zurueckhaltender, Masse aus dem Figma ---- */
  .team__photo {
    width: 222px;
    height: auto;
    margin-inline: auto;
    aspect-ratio: 222 / 295;
    border-radius: 18px;
  }
  .team__linkedin { left: 14px; bottom: 14px; width: 38px; height: 38px; }
  .team__linkedin svg { width: 20px; }
  .team__name { font-size: 22px; line-height: 28px; margin-bottom: 18px; }
  .team__bio { font-size: 16px; line-height: 22px; margin-bottom: 32px; }
  .team__expertise-toggle { padding-block: 0; border-top: 0; }
  .team__expertise-toggle .h-card { font-size: 16px; line-height: 22px; }
  .team__expertise-inner { padding-top: 20px; }
  .team__points { gap: 14px; }
  .team__point { gap: 12px; }
  .team__point p { font-size: 15px; line-height: 21px; }

  /* ---- News: Karussell mit Pfeilen ---- */
  .news-section__title { text-align: center; margin-bottom: 34px; }
  .news-list {
    max-width: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .news-list::-webkit-scrollbar { display: none; }
  .news-card { grid-template-columns: 1fr; scroll-snap-align: start; scroll-snap-stop: always; }
  .news-card__media { height: 213px; }
  .news-card__body { padding: 22px 30px 28px; }
  .news-card__tag { align-self: flex-start; }
  .news-card__title { margin-top: 14px; font-size: 24px; line-height: 27px; }
  .news-card__text { margin-top: 14px; font-size: 16px; line-height: 18px; max-width: none; }
  .news-card:hover { transform: none; }
  .news-section::after { display: none; }
  .news-nav { display: flex; justify-content: center; gap: 30px; margin-top: 30px; }
  .news-nav button { display: grid; place-items: center; width: 44px; height: 44px; }
  .news-nav svg { width: 15px; height: auto; color: var(--green-900); }

  /* ---- FAQ ---- */
  .faq { grid-template-columns: 1fr; gap: 44px; }
  .faq__intro { text-align: center; }
  .faq__intro-text { margin: 18px auto 0; max-width: 244px; font-size: 16px; line-height: 22px; font-weight: 700; }
  .faq__list { padding-inline: 26px 14px; }   /* optisch gleicher Rand: links Icon, rechts Flattersatz */
  .faq-item { border: 0; }
  .faq-item:first-child { border-top: 0; }
  .faq-item__button { gap: 18px; font-size: 20px; line-height: 27px; letter-spacing: 0; text-align: left; align-items: flex-start; padding: 15px 0; }
  .faq-item__plus { margin-top: 1px; }
  .faq-item__panel p { padding: 0 0 16px 42px; font-size: 16px; line-height: 24px; max-width: 306px; }

  /* ---- Timeline ---- */
  .timeline__steps { gap: 0; }
  .timeline-step { grid-template-columns: 1fr; gap: 16px; padding-block: 26px; }
  .timeline-step__rail { display: none; }
  .timeline-step__label { font-size: 15px; line-height: 22px; font-weight: 800; }
  .timeline-step__label span { min-width: 30px; }
  .timeline-step__text { font-size: 21px; line-height: 31px; letter-spacing: -0.006em; }
  .timeline__cta { margin-top: 40px; }

  /* ---- Tabs: waagerecht wischbar, aktiver Tab faerbt sich selbst ---- */
  .tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    margin-block: 42px 30px;
    padding-inline: 26px;
    margin-inline: -26px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; height: 46px; padding-inline: 24px; font-size: 14px; }
  .tab.is-active { background: var(--green-900); color: var(--white); }
  .tabs__indicator { display: none; }
  .tab-panel img { border-radius: 16px; }
  .tab-caption {
    display: block;
    width: auto;
    margin-top: 26px;
    text-align: left;
  }
  .tab-caption h3 { margin-bottom: 10px; }
  .tab-caption p { font-size: 15px; line-height: 1.47; font-weight: 600; color: var(--ink); }

  /* ---- Pläne ---- */
  .plans { grid-template-columns: 1fr; gap: 20px; justify-content: stretch; }
  .plans-row { gap: 28px; }
  .plans__title { text-align: center; }
  .plan { padding: 26px 22px 32px; }
  .plan__title { font-size: 26px; line-height: 32px; }
  .plan:hover { transform: none; }

  /* ---- CTA ---- */
  .cta-band { padding: 32px 24px 36px; border-radius: 20px; text-align: center; }
  .cta-band__text { margin-bottom: 26px; }
  .cta-band .btn-row { align-items: center; }

  /* ---- Footer: zwei Spalten mit Überschriften (wie Figma) ---- */
  .site-footer { padding-block: 56px 44px; }
  .site-footer .container { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer__top { display: contents; }
  .footer__heading { display: block; font-size: 17px; font-weight: 800; margin-bottom: 12px; }
  .footer__col { gap: 4px; }
  .footer__col a { font-size: 16px; line-height: 25px; }
  .footer__col:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .footer__col--legal { grid-column: 1; grid-row: 2; }
  .footer__col:nth-last-of-type(1) { grid-column: 2; grid-row: 1; }
  .footer__bottom {
    grid-column: 2; grid-row: 2;
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 16px; margin-top: 0;
  }
  .footer__bottom p { text-align: right; font-size: 15px; line-height: 18px; }
  .footer__social { flex-direction: column; align-items: flex-end; gap: 6px; }
  .footer__brand { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .footer__brand img { width: 135px; }

  /* ---- Kontaktformular ---- */
  .lead-form { padding: 26px 22px 32px; border-radius: 20px; }
  .lead-form__actions { flex-direction: column-reverse; }
  .lead-form__actions .btn { width: 100%; }

  /* ---- Sonstiges ---- */
  .hero-watermark::before { width: 700px; height: 700px; top: 60px; }
  .only-desktop { display: none; }
  .only-mobile { display: block; }
  .only-desktop-block { display: none; }
  /* Mockup laeuft rechts aus dem Bild heraus (Spezifitaet schlaegt die Desktop-Regel) */
  .check-media .mockup-bleed,
  .loesungen__mockup .mockup-bleed {
    width: 131vw;
    max-width: none;
    margin-left: 15vw;
    margin-right: 0;
  }
  .check-media, .loesungen__mockup { overflow: hidden; margin-inline: -29px; }
  .loesungen__mockup { margin-top: 48px; margin-bottom: 56px; }
}

/* ============================================================
   Kontakt / Kennenlernen-Formular
   ============================================================ */
.lead-form {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  padding: 44px 48px 52px;
  background: var(--grey-bg);
  border-radius: 26px;
  transform-style: preserve-3d;
  transition: transform 0.62s var(--spring);
}
.lead-form.is-flipped { transform: rotateY(180deg); }
.lead-form__face { backface-visibility: hidden; }
.lead-form__back {
  position: absolute;
  inset: 44px 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  text-align: center;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.lead-form__back h2 { font-size: 26px; line-height: 32px; font-weight: 800; }
.lead-form__back p { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.lead-form__back p + p { margin-top: 12px; }
.lead-form__back a { color: var(--green-900); text-decoration: underline; text-underline-offset: 3px; }
.lead-form__intro { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--green-900); }
.lead-form__progress {
  position: relative;
  height: 3px;
  margin-top: 28px;
  border-radius: 2px;
  background: #d6d9d7;
  overflow: hidden;
}
.lead-form__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.333%;
  border-radius: 2px;
  background: var(--green-900);
  transition: width 0.4s var(--ease-out);
}
.lead-form__step { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--green-900); }

.lead-form__form { margin-top: 30px; }
.lead-form__panel { display: none; gap: 14px; flex-direction: column; }
.lead-form__panel.is-active { display: flex; }

.field {
  width: 100%;
  height: 48px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--green-900);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field::placeholder { color: #8c948f; }
.field:focus {
  outline: none;
  border-color: var(--green-900);
  box-shadow: 0 0 0 3px rgba(8, 27, 21, 0.08);
}
.field--area { height: auto; padding-block: 16px; border-radius: 18px; resize: vertical; line-height: 22px; }
.field[aria-invalid="true"] { border-color: #b4483c; }
.field-error {
  margin: -4px 0 2px 22px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: #a33e33;
}

.lead-form__actions { display: flex; gap: 12px; margin-top: 24px; }
.lead-form__actions .btn--ghost { flex: 0 0 auto; padding-inline: 26px; }
.lead-form__submit { flex: 1 1 auto; min-width: 0; height: 54px; font-size: 15px; padding-inline: 34px; }
.btn--ghost { background: transparent; color: var(--green-900); border: 1px solid rgba(8, 27, 21, 0.25); height: 52px; }
.btn--ghost:hover { background: rgba(8, 27, 21, 0.06); }

@media (max-width: 700px) {
  .lead-form { padding: 30px 24px 36px; }
}


/* ============================================================
   Rechtsseiten (Impressum, Datenschutz): Ueberschrift linksbuendig in
   der normalen Ueberschriftgroesse, Text 16px halbfett.
   ============================================================ */
.legal { padding-block: 64px 120px; }
.legal__title { margin-bottom: 44px; }
.legal__body { max-width: 760px; font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--ink); }
.legal__body h2 { margin: 40px 0 12px; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--green-900); }
.legal__body p { margin: 0 0 16px; }
.legal__body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal__body li { margin-bottom: 6px; }
.legal__body a { color: var(--green-900); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 780px) {
  .legal { padding-block: 30px 72px; }
  .legal__title { margin-bottom: 30px; }
  .legal__body h2 { margin-top: 32px; font-size: 18px; }
}

@media (max-width: 780px) {
  /* Ablauf-Kaesten ohne Bild bekommen keinen leeren 190px-Block */
  .step-panel__media:empty { display: none; }
}

/* Kontakt: Hinweis auf die Mailadresse unter dem Formular */
.lead-form__alt { margin-top: 22px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--grey-text); }
.lead-form__alt a { color: var(--green-900); text-decoration: underline; text-underline-offset: 3px; }