/* ==========================================================================
   Kaam-in — Design-System
   Grundlage: Design-Handoff "Startseite B – Warm & Editorial" (2026-07-20).
   Headlines Josefin Sans · Body Montserrat.

   WICHTIG: Bei JEDER Aenderung an dieser Datei die Version im ?v=-Parameter
   in ALLEN HTML-Dateien hochzaehlen. Sonst sehen wiederkehrende Besucher
   altes CSS.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700;800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Marke */
  --green-700: #367a30;
  --green-600: #43963c;
  --green-500: #55a84d;
  --green-100: #e0efdd;
  --green-50:  #f3f9f2;

  --orange-600: #db9210;
  --orange-500: #f7a824;
  --orange-100: #fdeecb;
  --orange-50:  #fef7e7;

  /* Neutrals */
  --cream:   #f3f9f2;
  --paper:   #ffffff;
  --ink-900: #212121;
  --ink-700: #333333;
  --ink-500: #646464;
  --ink-400: #8f8f8f;
  --line:    #e4e6e2;
  --line-cream: #ede7da;
  --footer-bg: #1e4a1a;   /* bewusst dunkler als green-700 */
  --danger:  #c0442c;

  /* Semantisch */
  --text-on-accent: #3c2c07;
  --link: var(--green-600);
  --link-hover: var(--green-700);
  --focus-ring: rgba(67, 150, 60, .45);

  /* Schrift */
  --font-display: "Josefin Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, sans-serif;

  /* Raster */
  --container: 1240px;
  --container-pad: 40px;
  --section-gap: 76px;

  /* Radien */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-card: 0 2px 10px rgba(43, 42, 38, .06);
  --shadow-card-hover: 0 6px 22px rgba(43, 42, 38, .10);
  --shadow-pop: 0 12px 36px rgba(43, 42, 38, .14);

  /* Bewegung */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;
  --dur-med: 260ms;
}

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

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

body {
  margin: 0;
  font: 400 17px/1.6 var(--font-body);
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* nie horizontal scrollen */
}

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

a { color: var(--link); }
a:hover { color: var(--link-hover); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0 0 16px;
}

h1 { font: 800 clamp(40px, 4.6vw, 58px)/1.06 var(--font-display); letter-spacing: -.015em; }
h2 { font: 800 clamp(28px, 3.2vw, 40px)/1.16 var(--font-display); }
h3 { font: 800 clamp(18px, 1.6vw, 21px)/1.3 var(--font-display); }
h4 { font: 600 19px/1.35 var(--font-display); }

p { margin: 0 0 1rem; }

/* Sprungmarke fuer Screenreader/Tastatur */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--green-600); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
  font: 600 15px/1 var(--font-body); text-decoration: none; z-index: 200;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section { padding: var(--section-gap) 0; }
.section--cream { background: var(--cream); }
.section--tight { padding-top: 0; }

/* Dunkelgruene Akzentflaeche — max. zwei pro Seite */
.panel-dark {
  background: var(--green-700);
  color: #fff;
  border-radius: 24px;
  padding: 56px 48px;
}
.panel-dark h2, .panel-dark h3 { color: #fff; }
.panel-dark p { color: rgba(255, 255, 255, .94); }

.eyebrow {
  font: 700 14px/1.3 var(--font-body);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 2px;
  background: var(--orange-500);
  display: inline-block;
  flex: none;
}

.lead { font: 500 20px/1.45 var(--font-body); color: var(--ink-700); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Farbregel: auf HELL gruen, auf DUNKELGRUEN orange. */
.btn {
  display: inline-block;
  padding: 17px 36px;
  border-radius: var(--radius-pill);
  font: 700 17px/1 var(--font-display);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn--primary { background: var(--green-600); color: #fff; }
.btn--primary:hover { background: var(--green-700); color: #fff; }

.btn--accent { background: var(--orange-500); color: var(--text-on-accent); }
.btn--accent:hover { background: var(--orange-600); color: var(--text-on-accent); }

.btn--ghost {
  background: transparent;
  border-color: var(--green-600);
  color: var(--green-700);
}
.btn--ghost:hover { background: var(--cream); color: var(--green-700); }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line-cream);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-header__logo img { height: 52px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 600 15px/1 var(--font-body);
}
.site-nav a {
  color: var(--ink-900);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--green-600); }
.site-nav a[aria-current="page"] { color: var(--green-600); }

.site-nav .btn {
  padding: 13px 26px;
  font: 700 15px/1 var(--font-display);
}
.site-nav .btn:hover { color: #fff; }

/* Mobile-Umschalter — auf Desktop ausgeblendet */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink-900);
  margin: 5px 0;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, .82);
  padding: 60px 0 32px;
  font: 400 15px/1.7 var(--font-body);
  margin-top: var(--section-gap);
}
.site-footer a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: #fff; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.site-footer__wordmark {
  font: 800 28px/1 var(--font-display);
  color: #fff;
  margin: 0 0 16px;
}
.site-footer__blurb { color: rgba(255, 255, 255, .78); max-width: 320px; margin: 0; }

.footer-label {
  font: 700 13px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 12px;
}
.site-footer__links { display: grid; gap: 6px; }

/* Siegel als einheitliche weisse Chips — bewusst gruppiert, kein Sticker-Look */
.seals {
  margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 28px;
}
.seals__row { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.seal {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 22px;
  height: 96px;
}
.seal img { max-height: 100%; width: auto; }
.seal--placeholder {
  background: rgba(255, 255, 255, .08);
  border: 1.5px dashed rgba(255, 255, 255, .4);
  text-align: center;
  font: 600 12px/1.35 var(--font-body);
  color: rgba(255, 255, 255, .7);
  max-width: 150px;
}

.site-footer__bottom {
  margin-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font: 400 14px/1.5 var(--font-body);
  color: rgba(255, 255, 255, .6);
}
.site-footer__legal { display: flex; gap: 20px; }

/* ── Karten ──────────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.card--cream { background: var(--cream); border-color: var(--line-cream); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq summary {
  font: 800 clamp(17px, 1.5vw, 20px)/1.35 var(--font-display);
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font: 400 26px/1 var(--font-display);
  color: var(--green-600);
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { margin-top: 14px; }
.faq details p:last-child { margin-bottom: 0; }

/* ── Blog ────────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.blog-card a { text-decoration: none; color: inherit; display: block; }
.blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 22px 24px 26px; }
.blog-card__title {
  font: 800 20px/1.3 var(--font-display);
  color: var(--ink-900);
  margin: 0 0 10px;
}
.blog-card__excerpt { font: 400 15.5px/1.55 var(--font-body); color: var(--ink-500); margin: 0; }

/* Artikel-Typografie — gilt fuer alle Blog-Beitraege */
.article { max-width: 760px; margin: 0 auto; }
.article__header { margin-bottom: 40px; }
.article__meta {
  font: 400 15px/1.5 var(--font-body);
  color: var(--ink-500);
  margin: 0 0 12px;
}
.article__hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 40px;
}

.article__body > h2 { margin: 48px 0 16px; }
.article__body > h3 { margin: 36px 0 12px; }
.article__body > p { margin: 0 0 20px; }
.article__body ul,
.article__body ol { margin: 0 0 20px; padding-left: 24px; }
.article__body li { margin-bottom: 10px; }
.article__body img { border-radius: var(--radius-md); margin: 32px 0; }
.article__body blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  background: var(--cream);
  border-left: 4px solid var(--orange-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font: italic 400 18px/1.6 var(--font-body);
}
.article__body a { color: var(--green-700); font-weight: 600; }
.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 16px;
}
.article__body th,
.article__body td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; }
.article__body th { background: var(--green-700); color: #fff; font-family: var(--font-display); }

/* Breite Inhalte duerfen nie die Seite sprengen */
.table-scroll { overflow-x: auto; margin: 0 0 24px; }
.table-scroll table { margin: 0; }

/* ── Responsiv ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --container-pad: 20px; --section-gap: 52px; }

  .split, .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .blog-grid { grid-template-columns: 1fr; }
  .panel-dark { padding: 36px 24px; }

  /* Mobile-Navigation */
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line-cream);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    z-index: 100;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 14px 0;                    /* Touch-Ziel >= 44px */
    border-bottom: 1px solid var(--line-cream);
  }
  .site-nav .btn {
    margin-top: 14px;
    text-align: center;
    border-bottom: 0;
    padding: 15px 26px;
  }
  .site-header__inner { position: relative; }
}

@media (max-width: 560px) {
  h1 { font-size: 32px; }
  .lead { font-size: 18px; }
  .seal { height: 76px; padding: 12px 16px; }
  .site-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Seiten-Komponenten — 1:1 nach Design-Handoff "Startseite B – Warm & Editorial"
   (design_handoff_website, 2026-07-20). Klassen statt Inline-Styles.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero (Startseite) ───────────────────────────────────────────────── */
.hero { background: var(--cream); }
.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 68px;
  padding-bottom: 84px;
}
.hero__copy { max-width: 640px; }

.hero__capsule {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 0 0 28px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.hero__capsule::before {
  content: "";
  position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 4px; background: var(--orange-500);
  border-radius: 0 4px 4px 0;
}
.hero__capsule p { margin: 0; font: 400 16px/1.65 var(--font-body); padding-left: 14px; }

.hero__cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 30px; }

.rating-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--radius-pill);
  padding: 12px 20px 12px 14px;
  box-shadow: var(--shadow-card);
}
.rating-pill__score { font: 800 16px/1 var(--font-display); color: var(--ink-900); }
.rating-pill__stars, .g-stars { color: var(--orange-500); font: 400 15px/1 var(--font-body); letter-spacing: 1px; }
.rating-pill__label { font: 500 13px/1.2 var(--font-body); color: var(--ink-500); }

.ral-line { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; }
.ral-line img { height: 76px; width: auto; }
.ral-line span { font: 500 14px/1.5 var(--font-body); color: var(--ink-500); max-width: 280px; }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font: 600 15.5px/1.4 var(--font-body); color: var(--ink-900);
}
.check-list svg { flex: none; margin-top: 1px; }
.check-list--roomy li { font: 500 16px/1.55 var(--font-body); gap: 10px; }

.hero__quote {
  font: 800 22px/1.32 var(--font-display);
  color: var(--ink-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.hero__media { margin-top: 24px; }

.video-frame { position: relative; }
.video-frame video {
  width: 100%; border-radius: 20px; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--ink-900);
  box-shadow: var(--shadow-pop);
}
.play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.play-overlay span {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop);
}
.video-frame.is-playing .play-overlay { display: none; }
.video-caption { margin: 14px 0 0; font: 600 14.5px/1.4 var(--font-body); color: var(--ink-500); }

/* ── Unterseiten-Hero (Text) ─────────────────────────────────────────── */
.page-hero { background: var(--cream); }
.page-hero__inner { padding-top: 64px; padding-bottom: 64px; max-width: 880px; }
.page-hero .hero__capsule { margin-top: 28px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line-cream);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font: 600 13.5px/1.3 var(--font-body); color: var(--ink-700);
}
.badge-chip svg { flex: none; }

/* ── Zweispalter H2 + Intro ──────────────────────────────────────────── */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.split-2--end { align-items: end; }
.split-2 h2 { margin: 0; text-wrap: balance; }
.split-2 > p { margin: 0; }

/* ── Leistungs-Karten (Bild + Text) ──────────────────────────────────── */
.service-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-card {
  background: var(--cream);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
}
.service-card img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: 26px 28px; }
.service-card__body h3 { font: 800 21px/1.25 var(--font-display); color: var(--green-700); margin: 0 0 10px; }
.service-card__body p { margin: 0; font: 400 15.5px/1.6 var(--font-body); }

.fullservice-row { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; margin-top: 40px; }
.fullservice-row p { margin: 0; flex: 1; min-width: 320px; }

/* ── 4 V's (dunkles Panel) ───────────────────────────────────────────── */
.panel-dark--roomy { padding: 64px 60px; }
.v-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.v-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  padding: 28px 30px;
}
.v-card h3 {
  font: 800 22px/1.2 var(--font-display); color: #fff;
  margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 12px;
}
.v-card h3 .v-num { font: 800 15px/1 var(--font-display); color: var(--orange-500); }
.v-card p { margin: 0; font: 400 15.5px/1.6 var(--font-body); color: rgba(255, 255, 255, .88); }
.v-card a { color: #fff; font-weight: 700; }

/* ── Prozess mit Zeitstrahl + Sticky-Sidebar ─────────────────────────── */
.process-grid { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; }

.timeline-box {
  border: 1px solid var(--line-cream);
  border-radius: 20px;
  padding: 24px 28px 20px;
  margin: 0 0 22px;
}
.timeline-months {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin: 0 0 12px;
  font: 700 12px/1 var(--font-body); color: var(--ink-400);
}
.timeline-track { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 0 10px; }
.timeline-track:last-child { margin-bottom: 0; }
.timeline-bar {
  height: 46px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; gap: 10px; min-width: 0;
}
.timeline-bar strong { font: 800 14px/1.2 var(--font-display); white-space: nowrap; }
.timeline-bar small { font: 600 12.5px/1.2 var(--font-body); opacity: .92; }
.timeline-bar--green { grid-column: 1 / 7; background: var(--green-600); color: #fff; }
.timeline-bar--orange { grid-column: 4 / 7; background: var(--orange-500); color: var(--text-on-accent); }

.steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: none; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 0 0 26px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: 31px; top: 52px; bottom: 0;
  width: 2px; background: var(--line-cream);
}
.step:last-child::before { display: none; }
.step__num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream); color: var(--green-700);
  font: 800 19px/52px var(--font-display); text-align: center;
  position: relative;
}
.step--final .step__num { background: var(--green-600); color: #fff; }
.step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 4px; }
.step__head h3 { font: 800 18px/1.3 var(--font-display); color: var(--ink-900); margin: 0; }
.step__badge {
  flex-shrink: 0; font: 700 12.5px/1 var(--font-body);
  color: var(--green-700); background: var(--cream);
  border-radius: var(--radius-pill); padding: 6px 12px; white-space: nowrap;
}
.step__badge--accent { color: var(--orange-600); background: #fbe9d9; }
.step p { margin: 0; font: 400 15.5px/1.55 var(--font-body); color: var(--ink-500); }

.sidebar-sticky { position: sticky; top: 24px; }
.video-card { background: var(--cream); border-radius: 18px; padding: 14px; }
.video-card video { width: 100%; border-radius: 12px; display: block; aspect-ratio: 16/10; object-fit: cover; background: var(--ink-900); }
.video-card p { margin: 10px 6px 4px; font: 500 13.5px/1.4 var(--font-body); color: var(--ink-400); }

.review-card {
  background: #fff;
  border: 1px solid var(--line-cream);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
.review-card--cream { background: var(--cream); border: 0; box-shadow: none; }
.review-card__head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.review-card__text { margin: 0 0 12px; font: 400 15px/1.6 var(--font-body); color: var(--ink-500); font-style: italic; }
.review-card__name { margin: 0; font: 700 14px/1.3 var(--font-display); color: var(--ink-900); }
.review-card__name span { font: 400 13px/1.3 var(--font-body); color: var(--ink-400); }
.sidebar-sticky .review-card { margin-top: 20px; }

/* ── Über Kaam-in ────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.about-grid figure { margin: 0; }
.about-grid figure img { width: 100%; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.about-grid figcaption { font: 500 14px/1.4 var(--font-body); color: var(--ink-500); margin-top: 10px; }
.founder-quote { margin: 0 0 8px; font: 400 18px/1.65 var(--font-body); font-style: italic; color: var(--ink-700); }
.founder-name { margin: 0 0 22px; font: 700 15px/1.3 var(--font-display); color: var(--green-700); }

/* ── Zahlen & Beweise ────────────────────────────────────────────────── */
.kicker {
  font: 700 14px/1.2 var(--font-body);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-400); margin: 0 0 16px;
}
.kicker--icon { display: flex; align-items: center; gap: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 44px; }
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-card {
  background: var(--cream);
  border: 2.5px solid var(--orange-500);
  border-radius: 16px;
  padding: 26px 22px;
}
.stat-card__value { font: 800 46px/1 var(--font-display); color: var(--green-700); margin: 0 0 8px; }
.stat-card__value--sm { font-size: 30px; line-height: 1.1; }
.stat-card__label { font: 500 14.5px/1.45 var(--font-body); color: var(--ink-500); margin: 0; }

.fact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 44px; }
.fact-card { background: #fff; border: 1.5px solid var(--green-600); border-radius: 16px; padding: 26px 28px; }
.fact-card p { margin: 0; }
.fact-card__strong { font: 600 17px/1.55 var(--font-body); color: var(--ink-900); }
.fact-card__value { font: 800 30px/1.1 var(--font-display); color: var(--green-700); margin: 0 0 4px !important; }
.fact-card__label { font: 500 15px/1.5 var(--font-body); color: var(--ink-700); }

.proof-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }

.quote-figure { margin: 0; background: var(--cream); border-radius: 18px; padding: 30px 34px; }
.quote-figure blockquote { margin: 0 0 14px; font: 400 17.5px/1.6 var(--font-body); font-style: italic; color: var(--ink-700); }
.quote-figure figcaption { display: flex; align-items: center; gap: 14px; }
.quote-figure .avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-figure__who { font: 700 15px/1.4 var(--font-display); color: var(--ink-900); }
.quote-figure__who span { display: block; font: 500 13.5px/1.4 var(--font-body); color: var(--ink-500); }

.review-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 44px; }

/* ── Nachbesetzungsgarantie ──────────────────────────────────────────── */
.guarantee-card {
  background: var(--cream);
  border: 2.5px solid var(--orange-500);
  border-radius: 24px;
  padding: 52px 56px;
  display: grid; grid-template-columns: 72px 1fr; gap: 30px; align-items: start;
}
.guarantee-card__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green-600);
  display: flex; align-items: center; justify-content: center;
}
.guarantee-card h2 { font: 800 clamp(26px, 2.8vw, 34px)/1.2 var(--font-display); margin: 0 0 14px; }
.guarantee-card p { margin: 0 0 24px; font: 400 16.5px/1.65 var(--font-body); }

/* ── Gütesiegel-Sektion ──────────────────────────────────────────────── */
.seals-panel {
  display: flex; align-items: center; justify-content: center;
  gap: 64px; flex-wrap: wrap;
  background: var(--cream);
  border-radius: 24px;
  padding: 56px 48px;
}
.seals-panel img { width: auto; }
.seals-panel .seal-ral { height: 190px; }
.seals-panel .seal-gapa { height: 118px; border-radius: 10px; }
.seals-panel .seal-bvifg { height: 78px; }

/* ── FAQ-Layout ──────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.faq details { padding: 20px 4px; }
.faq summary { align-items: center; }
.faq summary::after { content: "+"; font: 400 26px/1 var(--font-body); }

/* ── Blog-Teaser (Startseite) ────────────────────────────────────────── */
.blog-card--cream { background: var(--cream); border: 0; }
.blog-card__media--169 { aspect-ratio: 16 / 9; }

/* ── Newsletter ──────────────────────────────────────────────────────── */
.newsletter-panel {
  background: var(--cream);
  border-radius: 24px;
  padding: 56px 60px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center;
}
.newsletter-panel h2 { font: 800 clamp(26px, 2.8vw, 34px)/1.2 var(--font-display); margin: 0 0 14px; text-wrap: balance; }
.newsletter-panel .lead-text { margin: 0; font: 400 16px/1.65 var(--font-body); }
.newsletter-form { display: flex; gap: 10px; margin-bottom: 14px; }
.newsletter-form input[type="email"] {
  flex: 1; min-width: 0;
  padding: 15px 18px;
  border: 1.5px solid #e0d9c8;
  border-radius: var(--radius-pill);
  font: 400 16px/1.2 var(--font-body); color: var(--ink-900);
  background: #fff; outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.newsletter-form input[type="email"]:focus { border-color: var(--green-600); }
.newsletter-form button {
  background: var(--green-600); color: #fff; border: 0;
  padding: 15px 26px; border-radius: var(--radius-pill);
  font: 700 16px/1 var(--font-display); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.newsletter-form button:hover { background: var(--green-700); }
.consent-note { margin: 0; font: 400 13.5px/1.55 var(--font-body); color: var(--ink-400); }
.consent-note a { color: var(--ink-500); }

/* ── Partnernetzwerk ─────────────────────────────────────────────────── */
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.partner-chip {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font: 600 14.5px/1.35 var(--font-body); color: var(--ink-700);
}
.partner-chip img { width: auto; flex: none; }

/* ── Closing-CTA-Band ────────────────────────────────────────────────── */
.closing { background: var(--green-700); }
.closing__inner { max-width: 880px; margin: 0 auto; padding: 84px 40px; text-align: center; color: #fff; }
.closing h2 { font: 800 clamp(30px, 3.4vw, 44px)/1.15 var(--font-display); color: #fff; margin: 0 0 18px; }
.closing p { margin: 0 0 32px; font: 400 17px/1.65 var(--font-body); color: rgba(255, 255, 255, .94); }
.closing a:not(.btn) { color: #fff; font-weight: 700; }
.closing .btn { font-size: 18px; padding: 19px 42px; }

/* ── Team-Seite ──────────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.team-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; display: block; }
.team-card__body { padding: 18px 20px 22px; }
.team-card__body h3 { font: 800 17px/1.3 var(--font-display); margin: 0 0 2px; }
.team-card__role { font: 600 13px/1.4 var(--font-body); color: var(--green-700); margin: 0 0 10px; }
.team-card__body p { margin: 0; font: 400 14.5px/1.55 var(--font-body); color: var(--ink-500); }

/* ── Pain-Point-/Inhalts-Karten (Vermittlung) ────────────────────────── */
.pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pain-card { background: var(--cream); border-radius: 18px; padding: 28px 30px; }
.pain-card h3 { font: 800 19px/1.3 var(--font-display); margin: 0 0 14px; }
.pain-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pain-card li { display: flex; gap: 10px; font: 400 15px/1.55 var(--font-body); color: var(--ink-700); }
.pain-card li::before { content: "•"; color: var(--orange-500); font-weight: 800; flex: none; }

.benefit-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.benefit-list li { display: flex; align-items: flex-start; gap: 10px; font: 400 16px/1.6 var(--font-body); }
.benefit-list svg { flex: none; margin-top: 3px; }

.pull-quote {
  margin: 0; background: var(--cream);
  border-left: 4px solid var(--orange-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 28px 34px;
  font: italic 400 19px/1.6 var(--font-body); color: var(--ink-700);
}
.pull-quote cite { display: block; margin-top: 12px; font: 700 15px/1.3 var(--font-display); font-style: normal; color: var(--green-700); }

.feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature-card { background: var(--cream); border-radius: 18px; padding: 28px 30px; }
.feature-card h3 { font: 800 19px/1.3 var(--font-display); color: var(--green-700); margin: 0 0 10px; }
.feature-card p { margin: 0; font: 400 15.5px/1.6 var(--font-body); }

/* ── Aufklapp-Karten mit Icon + Watermark ─────────────────────────────
   Karte zeigt Icon + Headline, der Fliesstext klappt auf: auf dem Desktop
   beim Ueberfahren mit der Maus, auf Touch beim Tippen auf den Button.
   OHNE JavaScript bleibt alles offen und sichtbar (auch fuer Crawler) —
   erst .is-collapsible (per JS gesetzt) klappt zu. */
.card-expand, .has-bg-icon { position: relative; overflow: hidden; }
.card-expand, .has-bg-icon, .card-icon { --card-accent: var(--green-700); }
.pain-card.card-expand { --card-accent: var(--orange-600); }

/* Top-Icon (kraeftig) — auch ohne Aufklappen einsetzbar */
.card-icon, .card-expand__icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: #fff; color: var(--card-accent);
  margin: 0 0 16px;
  box-shadow: 0 2px 10px rgba(33, 33, 33, .07);
  transition: transform var(--dur-med) var(--ease-out);
}
.card-icon svg, .card-expand__icon svg { width: 25px; height: 25px; }
.card-icon--sm { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 0; }
.card-icon--sm svg { width: 20px; height: 20px; }

/* Watermark (gleiches Symbol, zart, angeschnitten) */
.card-bg-icon {
  position: absolute; bottom: -30px; right: -26px;
  width: 158px; height: 158px;
  color: var(--card-accent); opacity: .07;
  pointer-events: none; z-index: 0;
  transition: opacity .3s ease, transform .4s ease;
}
.card-bg-icon svg { width: 100%; height: 100%; }

/* Content ueber dem Watermark — bewusst KEIN `> *`, sonst zieht es das
   Watermark mit nach vorne. */
.card-expand .card-expand__icon,
.card-expand h3,
.card-expand .card-more,
.card-expand .card-toggle,
.has-bg-icon .card-icon,
.has-bg-icon h3,
.has-bg-icon p,
.has-bg-icon ul,
.has-bg-icon .v-num,
.has-bg-icon .stat-card__value,
.has-bg-icon .stat-card__label { position: relative; z-index: 1; }

@media (hover: hover) {
  .card-expand:hover .card-bg-icon,
  .has-bg-icon:hover .card-bg-icon { opacity: .13; transform: scale(1.06) rotate(-4deg); }
  .card-expand:hover .card-expand__icon,
  .has-bg-icon:hover .card-icon { transform: translateY(-2px); }
}

/* Aufklapp-Mechanik: 0fr → 1fr animiert die Hoehe sauber mit. */
.card-expand.is-collapsible .card-more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.16, 1, .3, 1);
}
.card-expand.is-collapsible .card-more > div { overflow: hidden; }
.card-expand.is-open .card-more { grid-template-rows: 1fr; }

.card-toggle {
  display: none;
  margin-top: 14px;
  align-items: center; gap: 8px;
  background: none; border: 0; padding: 0;
  font: 700 14.5px/1.3 var(--font-body); color: var(--card-accent);
  cursor: pointer;
}
.card-expand.is-collapsible .card-toggle { display: inline-flex; }
.card-toggle svg { transition: transform .3s var(--ease-out); }
.card-expand.is-open .card-toggle svg { transform: rotate(180deg); }
.card-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* Karten wachsen nach unten, statt die Nachbarkarte mitzudehnen. */
.pain-grid,
.feature-block:not(.feature-block--3),
.feature-block--3:has(.card-expand) { align-items: start; }

@media (max-width: 560px) {
  .card-bg-icon { width: 120px; height: 120px; bottom: -22px; right: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-expand.is-collapsible .card-more { transition: none; }
  .card-bg-icon, .card-icon, .card-expand__icon, .card-toggle svg { transition: none; }
}

/* ── Icon-Varianten je Karten-Typ ─────────────────────────────────────
   Dasselbe Symbol-Muster (Top-Icon + Watermark), angepasst an den
   Untergrund der jeweiligen Sektion. */

/* Auf dem dunkelgruenen Panel (4 V's): heller Kachel-Look statt weiss. */
.v-card.has-bg-icon { --card-accent: #fff; }
.v-card .card-icon {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; box-shadow: none;
  margin-bottom: 14px;
}
.v-card .card-bg-icon { color: #fff; opacity: .08; }
@media (hover: hover) { .v-card.has-bg-icon:hover .card-bg-icon { opacity: .14; } }

/* Prozess-Schritte: Icon rechts neben der Ueberschrift, Watermark im Block. */
.step__head h3 { display: flex; align-items: center; gap: 12px; }
.step__head .card-icon { margin: 0; flex: none; }
.step.has-bg-icon { border-radius: var(--radius-md); padding-right: 18px; }
.step .card-bg-icon { bottom: -34px; right: -24px; width: 130px; height: 130px; opacity: .06; }

/* Kennzahlen-Kacheln: kleines Icon oben rechts, Zahl bleibt der Held. */
.stat-card.has-bg-icon { --card-accent: var(--green-700); }
.stat-card .card-icon {
  position: absolute; top: 18px; right: 18px;
  margin: 0; background: rgba(54, 122, 48, .09); box-shadow: none;
}
.stat-card.has-bg-icon .stat-card__value { padding-right: 46px; }
.stat-card .card-bg-icon { display: none; }

/* FAQ: Fragezeichen-Kachel vor der Frage. */
.faq summary .card-icon {
  margin: 0; flex: none;
  background: var(--cream); box-shadow: none;
  color: var(--green-700);
}
.faq summary .faq__q { display: flex; align-items: center; gap: 14px; }
/* Die Frage ist eine echte H3 (Gliederung + Keyword-Position), sieht aber
   aus wie vorher — Schrift wird vom summary geerbt. */
.faq summary .faq__q-text { font: inherit; color: inherit; margin: 0; }
.faq details[open] summary .card-icon { background: var(--green-100); }
.faq details > *:not(summary) { padding-left: 52px; }

/* Blog-Karten ohne Beitrag: Icon-Kachel statt Foto, damit die Grid nicht
   halbfertig wirkt und trotzdem klar ist, dass es den Text noch nicht gibt. */
.blog-card__media--icon {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%);
  color: var(--green-700);
}
.blog-card__media--icon svg { width: 72px; height: 72px; opacity: .8; }
.blog-card__soon {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12.5px/1 var(--font-body); color: var(--green-700);
  background: var(--green-100); border-radius: var(--radius-pill);
  padding: 7px 13px; margin-top: 12px;
}

/* Quellenangaben — bewusst klein und zurueckhaltend. Sie belegen die Aussage
   fuer Leser und KI-Systeme, sollen aber optisch nichts dominieren. */
.quelle {
  display: block;
  margin-top: 10px;
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--ink-400);
}
.quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.quelle a:hover { color: var(--green-700); }
/* Im Capsule-Band (heller Creme-Grund) etwas enger an den Absatz ruecken. */
.capsule-band .quelle { margin-top: 8px; }

/* Bild neben den Prozess-Schritten (Teamseite), damit die rechte
   Bildschirmhaelfte nicht leer bleibt. */
.steps-aside { margin: 0; position: sticky; top: 24px; }
.steps-aside img {
  width: 100%; height: auto; display: block;
  border-radius: 18px; box-shadow: var(--shadow-card);
}
.steps-aside figcaption {
  margin-top: 12px;
  font: 400 14.5px/1.5 var(--font-body); color: var(--ink-500);
}
@media (max-width: 1080px) { .steps-aside { position: static; max-width: 520px; } }

/* „Was nach dem Absenden passiert" — nimmt dem Formular die Unsicherheit,
   bevor der Nutzer entscheidet. */
.after-send {
  background: var(--cream); border-radius: var(--radius-md);
  padding: 20px 24px; margin-top: 4px;
}
.after-send__head { font: 800 15px/1.3 var(--font-display); color: var(--green-700); margin: 0 0 10px; }
.after-send__list { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.after-send__list li { font: 400 14.5px/1.55 var(--font-body); color: var(--ink-700); }

/* Kontakt-Aside: Icon-Zeile in den Info-Karten. */
.contact-aside h3 { display: flex; align-items: center; gap: 12px; }
.contact-aside h3 .card-icon { margin: 0; flex: none; background: var(--cream); box-shadow: none; }

@media (max-width: 560px) {
  .stat-card .card-icon { top: 14px; right: 14px; }
  .faq summary .faq__q { gap: 10px; }
  .faq details > *:not(summary) { padding-left: 0; }
}

/* ── Kontakt ─────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
.contact-form { display: grid; gap: 16px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { font: 600 14px/1.3 var(--font-body); color: var(--ink-900); display: grid; gap: 6px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: 400 16px/1.4 var(--font-body); color: var(--ink-900);
  background: #fff; outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--green-600); }
/* Eigener Pfeil — sonst rendert jedes System sein eigenes Steuerelement. */
.contact-form select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646464' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.contact-form .checkbox-row { display: flex; gap: 10px; align-items: flex-start; font: 400 14.5px/1.5 var(--font-body); color: var(--ink-700); }
.contact-form .checkbox-row input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.contact-aside .card + .card { margin-top: 20px; }
.contact-aside h3 { font: 800 17px/1.3 var(--font-display); margin: 0 0 10px; }
.contact-aside p { margin: 0 0 6px; font: 400 15.5px/1.6 var(--font-body); }
.contact-aside a { font-weight: 600; text-decoration: none; }

/* ── Animations-Layer (Scroll-Reveal · Hover · Parallax) ─────────────── */
/* Grundzustand NICHT im CSS verstecken — .reveal wird erst per JS gesetzt,
   damit die Seite ohne JavaScript vollständig sichtbar bleibt. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.card, .stat-card, .fact-card, .service-card, .v-card, .feature-card, .pain-card, .partner-chip, .review-card {
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  .stat-card:hover, .service-card:hover, .feature-card:hover, .pain-card:hover, .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
  .v-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .12); }
}

/* Maus-Parallax fürs Hero-Video (JS setzt --tilt-x/--tilt-y, Desktop only) */
.tilt { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease-out; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tilt { transform: none !important; }
}

/* ── Responsiv (Komponenten) ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .review-strip { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .sidebar-sticky { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .sidebar-sticky .review-card { margin-top: 0; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-grid .sidebar-sticky { position: static; }
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; padding-bottom: 56px; }
  .hero__media { margin-top: 0; }
  .split-2 { grid-template-columns: 1fr; gap: 20px; }
  .service-cards, .fact-cards, .v-grid, .pain-grid, .feature-block { grid-template-columns: 1fr; }
  .service-card { grid-template-columns: 1fr; }
  .service-card img { aspect-ratio: 16 / 7; height: auto; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
  .about-grid figure { max-width: 420px; }
  .proof-grid { grid-template-columns: 1fr; gap: 32px; }
  .panel-dark--roomy { padding: 40px 24px; }
  .guarantee-card { grid-template-columns: 1fr; padding: 32px 24px; gap: 20px; }
  .seals-panel { gap: 32px; padding: 40px 24px; }
  .seals-panel .seal-ral { height: 140px; }
  .seals-panel .seal-gapa { height: 92px; }
  .seals-panel .seal-bvifg { height: 62px; }
  .newsletter-panel { grid-template-columns: 1fr; padding: 36px 24px; gap: 24px; }
  .partner-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .sidebar-sticky { grid-template-columns: 1fr; }
  .timeline-bar { padding: 0 12px; }
  .timeline-bar small { display: none; }
  .step__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card__value { font-size: 36px; }
  .team-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { width: 100%; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .hero__cta-row { align-items: stretch; }
}

/* Kontaktformular: Honeypot + Statusmeldung */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font: 500 14.5px/1.5 var(--font-body); padding: 12px 14px; border-radius: 8px; margin: 0; }
.form-status--ok { color: var(--green-600); background: rgba(27, 122, 74, .08); }
.form-status--error { color: #b03030; background: rgba(176, 48, 48, .08); }
.contact-form button[disabled] { opacity: .6; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   Hero mit Bild — Vollflaechiges Motiv + Farbverlauf, wie auf der Live-Site.
   Bild wird per --hero-img/--hero-pos je Seite gesetzt.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-media {
  position: relative;
  background: var(--footer-bg);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media::before,
.hero-media::after { content: ""; position: absolute; inset: 0; }
.hero-media::before {
  z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, center 30%);
  background-repeat: no-repeat;
}
/* Links dunkel (Text lesbar), rechts offen (Menschen sichtbar) */
.hero-media::after {
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(20, 52, 16, .95) 0%,
    rgba(20, 52, 16, .90) 34%,
    rgba(20, 52, 16, .66) 56%,
    rgba(20, 52, 16, .34) 78%,
    rgba(20, 52, 16, .18) 100%);
}
.hero-media__inner { padding-top: 76px; padding-bottom: 76px; position: relative; }
.hero-media__copy { max-width: 620px; }

.hero-media h1 { color: #fff; text-wrap: balance; }
.hero-media .lead { color: rgba(255, 255, 255, .93); }
.hero-media p { color: rgba(255, 255, 255, .90); }
.hero-media .eyebrow { color: #fff; }
.hero-media .eyebrow::before { background: var(--orange-500); }
.hero-media a:not(.btn) { color: #fff; font-weight: 700; }

/* Trust-Bullets auf dunklem Grund */
.hero-media .check-list li { color: #fff; }

/* Kompakte Trust-Chips im Bild-Hero */
.hero-media .badge-chip {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(2px);
}
.hero-media .rating-pill { background: rgba(255, 255, 255, .96); }

/* Siegel-Reihe im Hero — weisse Chips, damit die Logos lesbar bleiben */
/* Siegel-Reihe im Hero — gleich hohe weisse Chips, Logos vertikal zentriert.
   Das FOCUS-Badge ist hochformatig und nutzt die volle Chiphoehe. */
.hero-seals { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 26px 0 0; }
.hero-seals__chip {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px;
  height: 96px; padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.hero-seals__chip img { max-height: 100%; width: auto; display: block; }
.hero-seals__chip--focus { padding: 6px 10px; }
.hero-seals__chip--focus img { max-height: 100%; }
.hero-seals__note {
  flex-basis: 100%;
  font: 500 13px/1.45 var(--font-body);
  color: rgba(255, 255, 255, .82);
  margin: 10px 0 0;
  max-width: 560px;
}
/* Alte Einzelbild-Variante bleibt kompatibel */
.hero-seals > img {
  height: 62px; width: auto;
  background: #fff; border-radius: 10px; padding: 6px 10px;
}
.hero-seals > span {
  font: 500 13.5px/1.45 var(--font-body);
  color: rgba(255, 255, 255, .88);
  max-width: 260px;
}

/* Citation-Capsule direkt unter dem Hero (GEO-Element, bewusst hell) */
.capsule-band { background: var(--cream); border-bottom: 1px solid var(--line-cream); }
.capsule-band__inner {
  padding-top: 26px;
  padding-bottom: 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
}
.capsule-band p { margin: 0; font: 400 16px/1.65 var(--font-body); max-width: 900px; }
.capsule-band .check-list { gap: 8px; }
.capsule-band .check-list li { font-size: 14.5px; white-space: nowrap; }

/* ── Bild-Zuschnitte: Gesichter nicht anschneiden ───────────────────────── */
.quote-figure .avatar { object-position: center top; }
.service-card img { object-position: center 45%; }
.blog-card__media img { object-position: center 32%; }

/* ── Kompaktere Abstaende in langen Sektionen ───────────────────────────── */
.stat-grid { margin-bottom: 32px; }
.fact-cards { margin-bottom: 32px; }
.review-strip { margin-bottom: 32px; }
.panel-dark--roomy { padding: 52px 48px; }
.about-grid { padding-top: 72px; padding-bottom: 72px; }
.newsletter-panel { padding: 44px 48px; }
.guarantee-card { padding: 40px 44px; }
.seals-panel { padding: 44px 40px; gap: 52px; }

@media (max-width: 900px) {
  .hero-media::after {
    background: linear-gradient(170deg,
      rgba(20, 52, 16, .90) 0%,
      rgba(20, 52, 16, .86) 45%,
      rgba(20, 52, 16, .80) 100%);
  }
  .hero-media::before { background-position: var(--hero-pos-mobile, center 22%); }
  .hero-media__inner { padding-top: 48px; padding-bottom: 48px; }
  .hero-media__copy { max-width: 100%; }
  .capsule-band__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 22px; padding-bottom: 22px; }
  .capsule-band .check-list li { white-space: normal; }
  .hero-seals__chip { height: 66px; padding: 6px 10px; }
  .hero-seals { gap: 8px; }
  .hero-seals > img { height: 52px; }
}

/* Video in der Prozess-Sidebar: 16:9 wie die Quelldatei, nichts abschneiden */
.video-card .video-frame video { aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: none; }
.video-card .play-overlay span { width: 58px; height: 58px; }


/* Fix: Hero-Inhalt der Unterseiten begrenzen, damit rechts das Motiv sichtbar bleibt */
.hero-media__inner > *:not(.hero-media__copy) { max-width: 780px; }
@media (max-width: 900px) {
  .hero-media__inner > *:not(.hero-media__copy) { max-width: 100%; }
}

/* Fix: aktiver Kontakt-Button in der Nav wurde gruen auf gruen (unlesbar) */
.site-nav .btn[aria-current="page"] { color: #fff; }

/* Stärkerer Schleier für Motive mit hellem Hintergrund */
.hero-media--shaded::after {
  background: linear-gradient(100deg,
    rgba(20, 52, 16, .96) 0%,
    rgba(20, 52, 16, .93) 40%,
    rgba(20, 52, 16, .80) 62%,
    rgba(20, 52, 16, .58) 82%,
    rgba(20, 52, 16, .42) 100%);
}

/* ── Raster-Varianten als Klassen (NICHT inline) ────────────────────────────
   Inline-Styles schlagen jede Media-Query. Wer grid-template-columns inline
   setzt, hat auf dem Handy drei Spalten auf 390 px — genau der Fehler, der
   die Karten aus dem Bild geschoben hat. Deshalb hier als Klassen. */
.feature-block--3 { grid-template-columns: repeat(3, 1fr); }
.blog-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.academy-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 24px; }

@media (max-width: 1080px) {
  .feature-block--3 { grid-template-columns: repeat(2, 1fr); }
  .academy-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .feature-block--3,
  .blog-grid--2,
  .academy-grid { grid-template-columns: 1fr; }
}

/* ── Grid-Haerte: 1fr hat als Minimum min-content ──────────────────────────
   Lange deutsche Komposita (z. B. "Pflegevermittlung") schieben eine
   1fr-Spalte ueber ihren Anteil hinaus — die Karte laeuft aus dem Bild.
   minmax(0, 1fr) erlaubt der Spalte zu schrumpfen, der Text bricht dann um. */
.stat-grid,
.stat-grid--3,
.fact-cards,
.service-cards,
.v-grid,
.feature-block,
.feature-block--3,
.pain-grid,
.partner-grid,
.review-strip,
.team-grid,
.blog-grid,
.blog-grid--2,
.academy-grid,
.split-2,
.proof-grid,
.contact-grid,
.newsletter-panel,
.process-grid,
.faq-grid,
.about-grid {
  grid-template-columns: none;                 /* Platzhalter, wird unten je Raster gesetzt */
}
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-block--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.academy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.split-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.newsletter-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.process-grid { grid-template-columns: minmax(0, 1fr) 420px; }
.faq-grid { grid-template-columns: 380px minmax(0, 1fr); }
.about-grid { grid-template-columns: 420px minmax(0, 1fr); }

/* Lange Woerter duerfen umbrechen statt die Karte zu sprengen */
.stat-card__label,
.blog-card__excerpt,
.team-card__body p,
.feature-card p,
.pain-card li,
.partner-chip { overflow-wrap: anywhere; hyphens: auto; }

@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-strip { grid-template-columns: minmax(0, 1fr); }
  .process-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-block--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split-2, .service-cards, .fact-cards, .v-grid, .pain-grid, .feature-block,
  .feature-block--3, .blog-grid, .blog-grid--2, .academy-grid, .partner-grid,
  .proof-grid, .contact-grid, .newsletter-panel, .about-grid,
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .stat-grid, .stat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bild-Bausteine — Video-Sektion, Bild/Text-Split, breites Bildband
   ══════════════════════════════════════════════════════════════════════════ */

/* Film-Sektion: Video gross, Text daneben */
.film { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.film__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-pop); }
.film__media video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-900); }
.film h2 { margin-bottom: 14px; }
.film p { margin-bottom: 14px; }
.film__meta { font: 600 14px/1.4 var(--font-body); color: var(--ink-400); margin: 0; }

/* Bild/Text nebeneinander, abwechselnd */
.media-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.media-split--narrow { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.media-split__img { margin: 0; }
.media-split__img img {
  width: 100%; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.media-split__img figcaption { font: 500 13.5px/1.45 var(--font-body); color: var(--ink-400); margin-top: 10px; }
.media-split--flip .media-split__img { order: 2; }
.media-split h2, .media-split h3 { margin-top: 0; }
.media-split p:last-child { margin-bottom: 0; }

/* Breites Bildband ueber die volle Containerbreite.
   max-width kappt auf die echte Quellaufloesung (--img-w): ein Bild ueber
   seine natuerliche Breite zu strecken macht es sichtbar weich. */
.image-band { margin: 0; }
.image-band img {
  width: 100%; display: block;
  max-width: min(100%, var(--img-w, 100%));
  margin: 0 auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}
.image-band figcaption {
  font: 500 14px/1.5 var(--font-body); color: var(--ink-500);
  margin-top: 12px; text-align: center;
}

/* Bild in einer Karte (Leistungs-/Feature-Karten mit Motiv) */
.feature-card__img {
  width: calc(100% + 60px);
  margin: -28px -30px 20px;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Focus-Siegel im Footer und in Trust-Reihen */
.seal--focus img { max-height: 100%; width: auto; display: block; }
.focus-badge { display: inline-block; line-height: 0; }
.focus-badge img { display: block; height: auto; }

@media (max-width: 900px) {
  .film { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .media-split, .media-split--narrow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .media-split--flip .media-split__img { order: 0; }
  .image-band img { border-radius: var(--radius-md); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Trust-Bausteine — Kundenstimmen, Film-Band, Siegel-Leiste
   ══════════════════════════════════════════════════════════════════════════ */

/* Kundenstimmen: bewusst auffaellig, oranger Rahmen in der Marken-Farbe */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.testimonial {
  margin: 0;
  background: #fff;
  border: 2.5px solid var(--orange-500);
  border-radius: 18px;
  padding: 28px 30px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  .testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
}
.testimonial__stars {
  color: var(--orange-500);
  font: 400 19px/1 var(--font-body);
  letter-spacing: 2px;
  margin: 0 0 14px;
}
.testimonial blockquote {
  margin: 0 0 20px;
  font: 400 16px/1.62 var(--font-body);
  color: var(--ink-700);
  flex: 1;
}
.testimonial figcaption { display: flex; align-items: center; gap: 14px; }
.testimonial .avatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; object-position: center top; flex: none;
}
.avatar--initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-100); color: var(--green-700);
  font: 800 17px/1 var(--font-display);
}
.testimonial__who { font: 700 15px/1.35 var(--font-display); color: var(--ink-900); }
.testimonial__who span {
  display: block;
  font: 500 13px/1.4 var(--font-body);
  color: var(--ink-500);
}

/* Film direkt unter dem Hero */
.film-band { border-bottom: 1px solid var(--line-cream); }
.film-band .film__media { position: relative; }

/* Siegel-Leiste im Footer.
   Alle Siegel sitzen in gleich hohen, gleich breiten weissen Chips und
   werden per object-fit eingepasst — egal ob Hoch- oder Querformat. Sonst
   steht ein schmales Hochformat-Logo (RAL) verloren neben einem breiten. */
.seals__row { align-items: stretch; gap: 14px; flex-wrap: wrap; }
.seal {
  height: 104px;
  min-width: 148px;
  padding: 14px 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-md);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.seal img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (hover: hover) {
  .seal:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
}
/* Das Focus-Badge bringt eigenes Weiss und eigene Kanten mit — gleiche
   Innenabstaende wie die anderen Chips, damit es nicht eingequetscht wirkt. */
.seal--focus .focus-badge { display: flex; height: 100%; align-items: center; }
.seal--focus .focus-badge img { max-height: 100%; width: auto; border-radius: 4px; }

@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: minmax(0, 1fr); }
  .testimonial { padding: 22px 22px 20px; }
}
@media (max-width: 560px) {
  .seals__row { gap: 10px; }
  .seal { height: 82px; min-width: 116px; padding: 10px 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS-Beitraege
   Bewusst NICHT .blog-card: Der Leser muss auf einen Blick sehen, dass das
   nicht unser eigener Ratgeber ist, sondern ein Beitrag auf focus.de.
   Traeger der Unterscheidung sind der rote Balken oben, die rote Quellzeile
   und das Medienpartner-Siegel im Kopf.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --focus-red: #e2001a; }

.press__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.press__badge {
  flex: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-card);
  line-height: 0;
}
.press__badge img { height: 88px; width: auto; }
.press__intro { flex: 1; min-width: 280px; }
.press__intro h2 { margin: 0 0 8px; }
.press__intro p { margin: 0; color: var(--ink-500); font-size: 15.5px; max-width: 620px; }

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.press-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--focus-red);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  .press-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
}
.press-card > a {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; height: 100%;
}
.press-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.press-card__media img { width: 100%; height: 100%; object-fit: cover; }
.press-card__body {
  padding: 18px 22px 22px;
  display: flex; flex-direction: column; flex: 1;
}

.press-card__meta {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.press-card__source { color: var(--focus-red); }
.press-card__meta .dot { color: var(--line); }
.press-card__label { color: var(--ink-400); font-weight: 600; letter-spacing: .06em; }

.press-card__title {
  font: 800 18px/1.32 var(--font-display);
  color: var(--ink-900);
  margin: 0 0 10px;
}
.press-card__text {
  font: 400 15px/1.55 var(--font-body);
  color: var(--ink-500);
  margin: 0 0 16px;
  flex: 1;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.press-card__more {
  font: 700 14.5px/1 var(--font-display);
  color: var(--green-700);
}
.press-card:hover .press-card__more { color: var(--green-600); }

.press__note {
  margin: 22px 0 0;
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--ink-400);
}
.press__note a { color: var(--ink-500); }

@media (max-width: 900px) {
  .press-grid { grid-template-columns: minmax(0, 1fr); }
  .press__badge img { height: 68px; }
  .press__head { gap: 18px; margin-bottom: 24px; }
}

/* Zwei Kundenstimmen nebeneinander (statt drei) */
.testimonial-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .testimonial-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* ── Zitat-Banner ─────────────────────────────────────────────────────────
   Vollflaechiges Motiv ueber die ganze Breite mit einer Aussage darauf,
   wie auf der bisherigen Vermittlungsseite. Der Verlauf von unten haelt den
   Text lesbar, ohne das Bild zuzudecken. */
.quote-banner {
  position: relative;
  background-color: var(--footer-bg);
  background-image: var(--banner-img);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  isolation: isolate;
}
.quote-banner::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg,
    rgba(20, 52, 16, .92) 0%,
    rgba(20, 52, 16, .74) 32%,
    rgba(20, 52, 16, .28) 62%,
    rgba(20, 52, 16, .12) 100%);
}
.quote-banner__inner {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 72px;
  padding-bottom: 44px;
  text-align: center;
}
.quote-banner blockquote {
  margin: 0 auto 12px;
  max-width: 940px;
  font: 800 clamp(20px, 2.4vw, 30px)/1.34 var(--font-display);
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.quote-banner cite {
  font: 700 15px/1.4 var(--font-body);
  font-style: normal;
  color: var(--orange-500);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

@media (max-width: 900px) {
  .quote-banner__inner { min-height: 300px; padding-top: 48px; padding-bottom: 32px; }
  .quote-banner { background-position: 62% 38%; }
}

/* ── FOCUS-Badge im Band unter dem Hero ─────────────────────────────────
   Bewusst NICHT im Hero: Das Badge ist eine Medienpartnerschaft, kein
   Guetesiegel — es soll frueh sichtbar sein, aber die Zertifizierungen
   im Hero nicht verwaessern. */
.capsule-band__focus {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; flex: none;
  transition: transform var(--dur-med) var(--ease-out);
}
.capsule-band__focus img { height: 107px; width: auto; display: block; }
.capsule-band__focus span {
  font: 600 12.5px/1.35 var(--font-body);
  color: var(--ink-500); text-align: center; max-width: 130px;
}
@media (hover: hover) {
  .capsule-band__focus:hover { transform: translateY(-2px); }
  .capsule-band__focus:hover span { color: var(--green-700); }
}

/* Check-Punkte unter dem Capsule-Text in eine Zeile statt untereinander */
.check-list--inline {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 14px;
}
.check-list--inline li { font-size: 14.5px; }

@media (max-width: 900px) {
  .capsule-band__focus { flex-direction: row; align-items: center; gap: 12px; align-self: flex-start; }
  .capsule-band__focus img { height: 84px; }
  .capsule-band__focus span { text-align: left; max-width: 200px; }
  .check-list--inline { gap: 8px 16px; }
}