/* ==========================================================================
   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);
}

/* padding-block statt der Kurzschreibweise `padding: X 0`: die setzte links und
   rechts auf null und hat damit bei jedem `class="section container"` den
   seitlichen Container-Abstand geloescht. Auf dem Desktop unsichtbar (der
   Container ist mittig begrenzt), auf dem Handy lief dadurch der komplette
   Inhalt bis an die Bildschirmkante — Karten, Text, alles ohne Rand.
   Befund Adrian, 17.08.2026. */
.section { padding-block: var(--section-gap); }
.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);
  /* 19px statt 17px: Ab 18,66px fett gilt Text als "gross", dann genuegen 3:1 Kontrast
     statt 4,5:1. Weiss auf dem Marken-Gruen #43963c liegt bei 3,71:1 — damit bestanden,
     ohne die CI-Farbe anzutasten. */
  font: 700 19px/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);
  /* 15px ist zu klein fuer die Grosstext-Regel, hier gelten 4,5:1. Mit --ink-900 (#212121)
     auf dem Marken-Gruen sind es nur 4,34:1. #1a1a1a hebt es auf 4,70:1, ohne dass der
     Unterschied sichtbar waere. CI-Gruen bleibt unangetastet. */
  color: #1a1a1a;
}
.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;
  /* Das "+" wird beim Oeffnen um 45 Grad gedreht (Zeile ~350). Ein gedrehtes Quadrat
     braucht das 1,41-fache an Breite, bei 26px also rund 9px mehr. Die ragten zwischen
     768 und 1200px ueber den Container und erzeugten 5px horizontalen Seiten-Scroll.
     clip kappt nur die Scroll-Region, das Zeichen bleibt vollstaendig sichtbar. */
  overflow-x: clip;
}
.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);
}
/* Buttons ausnehmen: sonst faerbt die Link-Regel den Knopftext gruen auf gruen. */
.article__body a:not(.btn) { color: var(--green-700); font-weight: 600; }

/* Fussnoten in Rechtstexten (AGB) */
.article__body .footnote-ref { font-size: .8em; vertical-align: super; text-decoration: none; }
.article__body .footnote {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-700);
}

.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: min(320px, 100%); }

/* ── 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-row { margin: 0 0 14px; }
.timeline-row:last-child { margin-bottom: 0; }
.timeline-label {
  margin: 0 0 6px;
  font: 600 13px/1.35 var(--font-body); color: var(--ink-500);
}
.timeline-label strong { font: 800 14px/1.35 var(--font-display); color: var(--ink-900); }
.timeline-track { display: grid; grid-template-columns: repeat(6, 1fr); }
.timeline-bar {
  height: 40px; border-radius: var(--radius-pill);
  display: flex; align-items: center;
  padding: 0 18px; min-width: 0;
  font: 700 12.5px/1.2 var(--font-body);
}
.timeline-bar--green { grid-column: 1 / 7; background: var(--green-700); color: #fff; }
.timeline-bar--orange { grid-column: 1 / 3; width: 70%; background: var(--orange-500); color: var(--text-on-accent); }
.timeline-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-cream);
  font: 500 13.5px/1.5 var(--font-body); color: var(--ink-500);
}

.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; }

/* Grosses, alleinstehendes Kundenzitat — Vertrauensanker auf der Kontaktseite */
.quote-feature {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line-cream);
  border-radius: 20px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
}
.quote-feature__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; }
.quote-feature blockquote {
  margin: 0 0 18px;
  font: 500 21px/1.55 var(--font-body);
  color: var(--ink-900);
}
.quote-feature figcaption { font: 700 15.5px/1.4 var(--font-display); color: var(--ink-900); }
.quote-feature figcaption span { display: block; font: 500 14px/1.45 var(--font-body); color: var(--ink-500); margin-top: 3px; }
@media (max-width: 720px) {
  .quote-feature { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; }
  .quote-feature__avatar { width: 72px; height: 72px; }
  .quote-feature blockquote { font-size: 18px; }
}

.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; }

/* ── Bewertungs-Karten: Fusszeile mit Profilbild ─────────────────────────
   Der Kreis hat immer dieselbe Groesse, egal ob Foto oder Initialen — sonst
   springt die Karte, sobald das Bild nachlaedt.                            */
.review-card__foot { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-100); color: var(--green-700);
  font: 800 14px/1 var(--font-display);
  background-size: cover; background-position: center;
}
.review-avatar--foto { color: transparent; }

/* Weiche Ueberblendung beim Wechsel im Rotator. Nur Deckkraft und Verschiebung,
   damit nichts umbricht und die Karte ihre Hoehe behaelt. */
.review-strip[data-review-rotator] .review-card {
  transition: opacity 380ms ease, transform 380ms ease;
}
.review-strip[data-review-rotator] .review-card.is-wechselnd {
  opacity: 0; transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) {
  .review-strip[data-review-rotator] .review-card { transition: none; }
  .review-strip[data-review-rotator] .review-card.is-wechselnd { opacity: 1; transform: none; }
}

/* ── 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; }

/* Siegel und Partner-Chips sind seit 19.08.2026 verlinkt (ausgehende Links auf
   die Organisationen). Die Anker duerfen optisch nichts veraendern: kein
   Unterstrich, keine Linkfarbe - nur ein dezenter Hover als Klick-Hinweis. */
a.partner-chip { text-decoration: none; color: var(--ink-700); }
@media (hover: hover) {
  a.partner-chip:hover { border-color: var(--green-700); transform: translateY(-2px); }
}
.seals-panel a { display: inline-flex; line-height: 0; text-decoration: none; }
@media (hover: hover) {
  .seals-panel a { transition: opacity var(--dur-med) var(--ease-out); }
  .seals-panel a:hover { opacity: .82; }
}

/* ── 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; height: 30px; }
  .timeline-bar__t { display: none; }
  .timeline-months { font-size: 10.5px; }
  .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; }
}

/* Kontakt- und Newsletterformular: 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],
.newsletter-form button[disabled] { opacity: .6; cursor: not-allowed; }
/* Die Meldung sitzt zwischen Formular und Einwilligungshinweis — der Abstand
   des Formulars nach unten muss dann an sie uebergehen, sonst klebt sie. */
.newsletter-form:has(+ .form-status:not([hidden])) { margin-bottom: 0; }
.newsletter-panel .form-status { margin: 10px 0 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   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: var(--hero-size, cover);
  background-position: var(--hero-pos, center 30%);
  background-repeat: no-repeat;
  filter: saturate(1.06) contrast(1.06);   /* haelt das Motiv frisch, seit der
                                              Schleier neutral abdunkelt */
}
/* Der Schleier FAERBT NICHT EIN, sondern dunkelt neutral ab (#0d1a0b = fast
   schwarz mit Gruen-Hauch) — Hauttoene und Bildfarben bleiben echt, kein
   Gruenstich. Er liegt links dicht (Text lesbar), laeuft nach rechts wirklich
   auf null aus, und darunter liegt ein gleichmaessiger flacher Grundschleier
   ueber der ganzen Flaeche. Der macht das Bild homogen, statt es in „links
   Vollton, rechts Foto" zu spalten. Kein Kasten um den Text. */
.hero-media::after {
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(13, 26, 11, .86) 0%,
      rgba(13, 26, 11, .80) 30%,
      rgba(13, 26, 11, .70) 46%,
      rgba(13, 26, 11, .34) 62%,
      rgba(13, 26, 11, .10) 80%,
      rgba(13, 26, 11, 0) 96%),
    linear-gradient(180deg, rgba(10, 20, 9, .16) 0%, rgba(10, 20, 9, .24) 100%);
}
.hero-media__inner { padding-top: 76px; padding-bottom: 76px; position: relative; }

/* Text steht direkt auf dem Foto; der Schatten faengt die Textkante ab, damit
   die Ueberschrift nicht in den offenen Bildbereich ausblutet. */
.hero-media__copy { max-width: 660px; }
.hero-media__inner { text-shadow: 0 2px 18px rgba(8, 16, 7, .55); }
.hero-media .btn,
.hero-media .rating-pill,
.hero-media .hero-seals__chip,
.hero-media .badge-chip { text-shadow: none; }

.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); }

/* RAL-Siegel als dezentes Trust-Badge, unten-rechts in der Hero-Ecke */
.hero-seal-float {
  position: absolute;
  z-index: 1;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 26px);
  height: clamp(148px, 20vw, 190px);
  width: auto;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .32);
}
@media (max-width: 720px) {
  .hero-seal-float { display: none; }
}

/* 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) {
  /* Auf Tablets laeuft der Text ueber die ganze Breite, deshalb hier von oben
     nach unten abdunkeln statt von links nach rechts — weiterhin neutral. */
  .hero-media::after {
    background: linear-gradient(172deg,
      rgba(13, 26, 11, .84) 0%,
      rgba(13, 26, 11, .78) 45%,
      rgba(13, 26, 11, .72) 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; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILER HERO — vier Muster, nicht eines (umgebaut 17.08.2026)

   Erster Versuch war EIN Muster fuer alle sechs Seiten: Motiv vollflaechig
   hinter dem Text, neutraler Schleier darueber. Gemessen ergab das ein
   Problem, das man beim Draufschauen nur ahnt: vom Motiv ueberlebten je nach
   Seite nur 21-34 % der Bildzeichnung (Standardabweichung der Luminanz
   gegenueber demselben Hero ohne Schleier). Man ahnt ein Foto, man sieht
   keins. Ein Motiv ist entweder Textur, dann darf es dezent sein, oder es ist
   ein Bild, dann braucht es eigene Flaeche.

   Deshalb jetzt vier Muster aus references/mobil-auftritte.md, je Seite mit
   einem Grund. Die Desktop-Bauart bleibt fuer alle dieselbe (Wiedererkennung),
   nur der mobile Auftritt wechselt - das erlaubt der Katalog ausdruecklich.

     --m1  Motiv hinter dem Text, HELLER Schleier   Team, Blog
           Wenig Text im Hero, also braucht die Schrift wenig Abdunklung und
           das Motiv bleibt erkennbar.
     --m2  Foto-Band im Fluss, unter der H1          Faire Anwerbung
           Die Seite handelt vom Guetesiegel; Text und Siegel tragen, das Foto
           ist Beleg und sitzt mittendrin.
     --m3  Halb und halb, Foto oben randlos          Startseite, Kontakt
           Das Gruppenfoto ist Kaam-ins staerkstes Motiv und bekommt die
           Buehne. Kontakt genauso, seit der lange Absatz aus dem Hero raus ist.
     --m4  Motiv-Anschnitt unten                     Vermittlung
           Laengster Hero (Siegel-Reihe, Notiz, Schluss-Absatz). Text und CTA
           zuerst, das Motiv zieht als Anschnitt nach unten weiter.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-mobile-photo { display: none; }

@media (max-width: 767px) {

  /* ── Gemeinsame Grundlage aller vier Muster ─────────────────────────────── */
  .hero-media__inner { padding-top: 34px; padding-bottom: 34px; }
  .hero-media .rating-pill { background: #fff; }
  .hero-media .btn,
  .hero-media .rating-pill,
  .hero-media .hero-seals__chip,
  .hero-media .badge-chip,
  .hero-media .hero-mobile-seal { text-shadow: none; }

  /* Das Band: randlos bis zur Viewportkante, Ausschnitt je Seite ueber
     --hero-band-pos. WICHTIG: nur der HORIZONTALE Wert wirkt - bei `cover`
     auf 390 px skaliert ein Querformat auf die Hoehe, vertikal bleibt kein
     Spielraum. (Genau daran waren die alten Werte wirkungslos.) */
  .hero-mobile-photo {
    display: block;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    background-image: var(--hero-img);
    background-position: var(--hero-band-pos, center 38%);
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* ── m1 — Motiv hinter dem Text, heller Schleier ────────────────────────── */
  .hero-media--m1::before,
  .hero-media--m1::after { display: block; }
  .hero-media--m1::before { background-position: var(--hero-pos-mobile, center 22%); }
  .hero-media--m1::after {
    background:
      linear-gradient(180deg,
        rgba(13, 26, 11, .62) 0%,
        rgba(13, 26, 11, .58) 42%,
        rgba(13, 26, 11, .46) 70%,
        rgba(13, 26, 11, .34) 100%),
      linear-gradient(0deg, rgba(10, 20, 9, .10) 0%, rgba(10, 20, 9, .14) 100%);
  }
  .hero-media--m1 .hero-media__inner {
    padding-top: 38px; padding-bottom: 42px;
    text-shadow: 0 2px 16px rgba(8, 16, 7, .70);
  }
  .hero-media--m1 .hero-mobile-photo { display: none; }

  /* ── m2/m3/m4 — Text auf Markenflaeche, Foto als echtes Bild ───────────── */
  .hero-media--m2,
  .hero-media--m3,
  .hero-media--m4 { background: var(--footer-bg); }
  .hero-media--m2::before, .hero-media--m2::after,
  .hero-media--m3::before, .hero-media--m3::after,
  .hero-media--m4::before, .hero-media--m4::after { display: none; }
  .hero-media--m2 .hero-media__inner,
  .hero-media--m3 .hero-media__inner,
  .hero-media--m4 .hero-media__inner { text-shadow: none; }

  /* m2 — Band im Fluss, dort wo es im DOM steht */
  .hero-media--m2 .hero-mobile-photo { height: 172px; margin: 18px -20px; }

  /* m3 — Halb und halb: Foto oben, randbuendig an die Hero-Oberkante */
  .hero-media--m3 .hero-mobile-photo {
    height: 268px; margin: -34px -20px 24px;
  }

  /* m4 — Anschnitt: Foto unten, randbuendig an die Hero-Unterkante.
     Bewusst niedriger als bei m3: es soll angeschnitten wirken und nach
     unten weiterziehen, nicht als eigenes Bildkapitel stehen. */
  .hero-media--m4 .hero-mobile-photo {
    height: 176px; margin: 26px -20px -34px;
  }

  /* Siegel-Reihe auf Markenflaeche: die weissen Chips tragen sich selbst */
  .hero-media--m2 .hero-seals__note,
  .hero-media--m3 .hero-seals__note,
  .hero-media--m4 .hero-seals__note { color: rgba(255, 255, 255, .86); }

  /* Badge-Chip lesbar halten, egal auf welchem Grund */
  .hero-media .badge-chip {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(7px);
    font-weight: 600;
  }

  /* RAL-Siegel als weisser Block (Faire Anwerbung, nur mobil) */
  .hero-mobile-seal {
    display: inline-flex !important; align-items: center; gap: 14px;
    margin-top: 16px; background: #fff; border-radius: 14px;
    padding: 12px 16px 12px 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
  }
  .hero-mobile-seal img { height: 70px; width: auto; }
  .hero-mobile-seal b { display: block; font: 800 13px/1.3 var(--font-display); color: var(--ink-900); }
  .hero-mobile-seal span { font: 500 12px/1.4 var(--font-body); color: var(--ink-500); }
}

.hero-mobile-seal { display: none; }

/* ── Citation-Kapsel auf dem Handy einklappen ──────────────────────────
   Der lange „Was ist Kaam-in"-Absatz wird auf 4 Zeilen gekuerzt, „mehr
   anzeigen" blendet den Rest samt Quellen ein. Der Text bleibt komplett im
   HTML (nur visuell geclippt), Crawler und KI lesen also weiterhin alles. */
.cap-toggle { display: none; }
@media (max-width: 767px) {
  .capsule-band.cap-collapsible .capsule-band__inner p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
  .capsule-band.cap-collapsible .quelle { display: none; }
  .capsule-band.cap-open .capsule-band__inner p { -webkit-line-clamp: unset; overflow: visible; }
  .capsule-band.cap-open .quelle { display: block; }
  .cap-toggle {
    display: inline-block; margin-top: 10px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font: 700 13.5px/1.3 var(--font-body); color: var(--green-700);
    text-decoration: underline; text-underline-offset: 2px;
  }
  .cap-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
}

/* 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; }

/* Etwas kraeftigere Fassung fuer Motive mit sehr hellem Hintergrund — gleiche
   Logik, nur dichter: neutral abdunkeln, nach rechts auf null auslaufen. */
.hero-media--shaded::after {
  background:
    linear-gradient(100deg,
      rgba(13, 26, 11, .90) 0%,
      rgba(13, 26, 11, .86) 30%,
      rgba(13, 26, 11, .76) 46%,
      rgba(13, 26, 11, .44) 62%,
      rgba(13, 26, 11, .16) 80%,
      rgba(13, 26, 11, .04) 96%),
    linear-gradient(180deg, rgba(10, 20, 9, .18) 0%, rgba(10, 20, 9, .26) 100%);
}
/* Mobil gilt --shaded NICHT. Die dichtere Fassung ist fuer helle Motive im
   DESKTOP-Ausschnitt gemacht; auf 390 px zeigt derselbe Zuschnitt (Kontakt)
   dunkle Oberkoerper statt hellem Waldhintergrund — dort verdoppelt --shaded
   nur die Duesternis und das Motiv wird matschig. Diese Regel muss NACH der
   obigen stehen: gleiche Spezifitaet, es gewinnt die spaetere. */
@media (max-width: 767px) {
  .hero-media--shaded::after {
    background:
      linear-gradient(180deg,
        rgba(13, 26, 11, .78) 0%,
        rgba(13, 26, 11, .74) 40%,
        rgba(13, 26, 11, .64) 66%,
        rgba(13, 26, 11, .48) 86%,
        rgba(13, 26, 11, .42) 100%),
      linear-gradient(0deg, rgba(10, 20, 9, .20) 0%, rgba(10, 20, 9, .24) 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;
  object-position: center 30%;
}
/* Auf dem Handy sind die Karten voll breit; 16:9 quetscht ein quadratisches
   Foto zu flach und schneidet Gesichter oben ab. Hoeheres Verhaeltnis. */
@media (max-width: 720px) {
  .feature-card__img { aspect-ratio: 3 / 2; }
}

/* 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);
}
/* Google-Profilbild an der Stelle der Initialen. Gleiche Groesse und Form, damit
   gemischte Karten (mit und ohne Foto) in einer Reihe nicht springen. */
.avatar--foto {
  display: block;
  background: var(--green-100);
  object-position: center;
}
.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: min(280px, 100%); }
.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);
}
/* FOCUS-Badge sichtbar groesser (Baicys Punkt A7). Die Bildquelle allein reicht nicht —
   diese Hoehe bestimmt die Anzeige, size=m liefert 300x429 nativ und traegt 180px scharf. */
.capsule-band__focus img { height: 180px; 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: 134px; }   /* waechst proportional zu den 180px auf Desktop mit */
  .capsule-band__focus span { text-align: left; max-width: 200px; }
  .check-list--inline { gap: 8px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VERWEISKARTE IM FLIESSTEXT (.post-link)
   Ersatz fuer die Wix-Linkvorschau, die beim Umzug als eine Textwurst
   ankam (Domain + Titel + Beschreibung ohne Trennung, alles im Link).
   Bewusst horizontal statt .blog-card-Kachel: die Karte sitzt mitten im
   Lesefluss und soll ihn nicht wie ein Grid-Element unterbrechen.
   ══════════════════════════════════════════════════════════════════════════ */
.post-link {
  display: block;
  margin: 34px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  .post-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
}
.post-link__media { aspect-ratio: 16 / 9; overflow: hidden; }
.post-link__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-link__body { padding: 18px 22px 22px; }
.post-link__kicker {
  display: block;
  font: 600 12px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-600, var(--ink-500));
  margin-bottom: 8px;
}
.post-link__title {
  font: 600 19px/1.35 var(--font-head, var(--font-body));
  margin: 0 0 8px;
  color: var(--ink-900, inherit);
}
.post-link__text { font: 400 15.5px/1.55 var(--font-body); color: var(--ink-500); margin: 0; }

@media (min-width: 640px) {
  .post-link { display: grid; grid-template-columns: 240px 1fr; align-items: stretch; }
  .post-link__media { aspect-ratio: auto; height: 100%; min-height: 160px; }
  .post-link__body { padding: 22px 26px; align-self: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOGKORB — Übersichtsseite /blog
   Themenfilter, Suche, Top-Beitrag, Raster + Sidebar, Instagram-Fenster,
   Bewertungs-Kopf. Bewusst NUR hier verwendet, damit die bestehenden
   Kartenraster der anderen Seiten unberuehrt bleiben.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar: Themen-Chips + Suche ───────────────────────────────────── */
.blog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 18px 0; margin-bottom: 36px;
  border-top: 1px solid var(--line-cream);
  border-bottom: 1px solid var(--line-cream);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font-body); color: var(--ink-700);
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--radius-pill); padding: 11px 16px; min-height: 44px;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast), background-color var(--dur-fast),
              color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip__count { font: 700 12px/1 var(--font-body); color: var(--ink-400); }
@media (hover: hover) { .chip:hover { border-color: var(--green-500); color: var(--green-700); transform: translateY(-1px); } }
.chip.is-active {
  background: var(--green-700); border-color: var(--green-700); color: #fff;
}
.chip.is-active .chip__count { color: rgba(255, 255, 255, .75); }

.blog-search { position: relative; display: flex; align-items: center; margin-left: auto; }
.blog-search svg {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--ink-400); pointer-events: none;
}
.blog-search input {
  font: 400 16px/1 var(--font-body); color: var(--ink-900);
  padding: 13px 16px 13px 42px; min-width: 250px;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast);
}
.blog-search input:focus { outline: none; border-color: var(--green-600); }

/* ── Layout: Inhalt + Sidebar ────────────────────────────────────────── */
.blog-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 44px; align-items: start;
}
.blog-main { min-width: 0; }
.blog-main .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.results-label { font: 400 14.5px/1.5 var(--font-body); color: var(--ink-500); margin: 0 0 20px; }
.results-label strong { color: var(--ink-900); font-weight: 700; }

/* ── Top-Beitrag ─────────────────────────────────────────────────────── */
.featured-card {
  display: block;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: inherit; margin-bottom: 32px;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) { .featured-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } }
.featured-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-100); }
.featured-card__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-card__body { padding: 30px 36px 34px; display: flex; flex-direction: column; }
.featured-card__body > p { max-width: 68ch; }
.featured-card__flag {
  align-self: flex-start;
  font: 700 12px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-on-accent); background: var(--orange-500);
  border-radius: var(--radius-pill); padding: 7px 13px; margin-bottom: 16px;
}
.featured-card__body h3 { font: 800 clamp(22px, 2.2vw, 28px)/1.2 var(--font-display); margin: 0 0 12px; }
.featured-card__body > p { font: 400 16px/1.6 var(--font-body); color: var(--ink-500); margin: 0 0 16px; }
.featured-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 15px/1 var(--font-body); color: var(--green-700); margin-top: 18px;
}
.featured-card__more svg { width: 18px; height: 18px; transition: transform var(--dur-med) var(--ease-out); }
@media (hover: hover) { .featured-card:hover .featured-card__more svg { transform: translateX(4px); } }

/* ── Karten-Zusaetze: Themen-Zeile und Meta-Zeile ────────────────────────
   Die Themen-Marke sitzt bewusst IM Karten-Body, nicht auf dem Bild: die
   Motive tragen ein eingebranntes kaam:in-Logo oben links, ein Overlay wuerde
   es verdecken. */
.blog-card__topic {
  margin: 0 0 8px;
  font: 700 11.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-700);
}
.blog-card__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 0; font: 500 13px/1.4 var(--font-body); color: var(--ink-400);
}
.blog-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.blog-card__read { display: inline-flex; align-items: center; gap: 5px; }
.blog-card__read svg { width: 14px; height: 14px; }
.featured-card .blog-card__meta { margin: 0; }

/* ── Leer-Zustand und Ausblick ───────────────────────────────────────── */
.blog-empty {
  margin-top: 8px; padding: 40px 28px; text-align: center;
  border: 1.5px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
}
.blog-empty h3 { margin: 0 0 8px; }
.blog-empty p { margin: 0; color: var(--ink-500); font-size: 15.5px; }
.blog-more {
  margin-top: 28px; padding: 20px 24px;
  border-left: 4px solid var(--green-500); background: var(--paper);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.blog-more p { margin: 0; font: 400 15px/1.65 var(--font-body); color: var(--ink-500); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.blog-sidebar { display: flex; flex-direction: column; gap: 20px; }
/* Die Spalte ist kuerzer als der Inhalt daneben. Statt einer leeren Flaeche
   bleibt die letzte Karte (der CTA) beim Scrollen stehen. */
@media (min-width: 1081px) {
  .blog-layout { align-items: stretch; }
  .blog-sidebar > .side-card:last-child { position: sticky; top: 96px; }
}
.side-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 24px 26px;
}
.side-card--cream { background: var(--green-50); border-color: var(--green-100); }
.side-card--dark { background: var(--footer-bg); border-color: var(--footer-bg); color: #fff; }
.side-card--dark h3 { color: #fff; font-size: 21px; margin: 0 0 10px; }
.side-card--dark p { color: rgba(255, 255, 255, .86); font: 400 15px/1.6 var(--font-body); margin: 0 0 18px; }
.side-card__eyebrow {
  display: block; margin-bottom: 16px;
  font: 700 11.5px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-700);
}
.side-card--dark .side-card__eyebrow { color: var(--orange-500); }
.side-card__note { margin: 12px 0 0 !important; font-size: 12.5px !important; opacity: .7; }

.side-list { display: flex; flex-direction: column; }
.side-list__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit;
}
.side-list__item:first-child { border-top: 0; padding-top: 0; }
.side-list__rank { font: 800 20px/1 var(--font-display); color: var(--green-500); flex: none; width: 1.3ch; }
.side-list__title { display: block; font: 600 14.5px/1.4 var(--font-body); color: var(--ink-900); margin-bottom: 4px; }
.side-list__meta { display: block; font: 400 12.5px/1.3 var(--font-body); color: var(--ink-400); }
@media (hover: hover) { .side-list__item:hover .side-list__title { color: var(--green-700); } }

.side-topic {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 0; background: none; border: 0; border-top: 1px solid var(--line);
  font: 600 14.5px/1.3 var(--font-body); color: var(--ink-700); text-align: left; cursor: pointer;
}
.side-topic:first-of-type { border-top: 0; }
.side-topic__count { font: 700 13px/1 var(--font-body); color: var(--ink-400); }
@media (hover: hover) { .side-topic:hover { color: var(--green-700); } }

/* ── Instagram-Fenster ───────────────────────────────────────────────── */
.ig-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 32px;
}
.ig-head__cta { flex: none; }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ig-tile {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) { .ig-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } }
.ig-tile__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--green-100); }
.ig-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.ig-tile__type {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
}
.ig-tile__type svg { width: 13px; height: 13px; margin-left: 2px; }
.ig-tile__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ig-tile__text { margin: 0 0 14px; font: 400 15px/1.55 var(--font-body); color: var(--ink-700); flex: 1; }
.ig-tile__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0; font: 500 13px/1.3 var(--font-body); color: var(--ink-500);
}
.ig-tile__go { font-weight: 700; color: var(--green-700); }
.ig-note { margin: 22px 0 0; font: 400 13.5px/1.6 var(--font-body); color: var(--ink-500); max-width: 720px; }

/* ── Bewertungs-Kopf auf der Blogseite ───────────────────────────────── */
.reviews-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 32px;
}
.reviews-hint { margin: 8px 0 0; font: 400 13.5px/1.6 var(--font-body); color: var(--ink-500); }

/* ── Responsiv ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .blog-sidebar { flex-direction: row; flex-wrap: wrap; }
  .blog-sidebar .side-card { flex: 1 1 260px; }
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .featured-card__body { padding: 24px 22px 28px; }
}
@media (max-width: 700px) {
  .blog-main .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ig-tile__body { padding: 14px 15px 16px; }
  .ig-tile__text { font-size: 14px; margin-bottom: 10px; }
  .ig-head__cta { width: 100%; justify-content: center; }
}
@media (max-width: 620px) {
  .blog-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
  .blog-search { margin-left: 0; }
  .blog-search input { min-width: 0; width: 100%; }
  .filter-chips { gap: 8px; }
  .chip { font-size: 13px; padding: 10px 13px; }
  .blog-sidebar { flex-direction: column; }
  .ig-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════════════
   TAP-ZIELE IM FOOTER
   Gemessen auf dem Handy waren die Footer-Links 26 px hoch (Navigation),
   21 px (Rechtliches) und 19 px (Telefon, E-Mail) — die letzten beiden
   reissen sogar die harte WCAG-2.2-Untergrenze von 24 px. Die Kopf-Navi
   ist mit 44 px in Ordnung und bleibt unangetastet.
   Auf dem Desktop reicht eine massvolle Vergroesserung, auf dem Handy
   gehen alle Ziele auf 44 px.
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer__links a { display: block; padding: 4px 0; }
.site-footer__legal a { display: inline-block; padding: 6px 0; }
.site-footer p a { display: inline-block; padding: 4px 0; }

@media (max-width: 900px) {
  .site-footer__links { gap: 0; }
  .site-footer__links a { padding: 9px 0; }
  .site-footer p a { padding: 12px 0; }
  .site-footer__legal { gap: 24px; }
  .site-footer__legal a { padding: 11px 0; }
}

/* Kopf-Navigation auf dem Desktop: die Links waren nur 15 px hoch und damit
   unter der WCAG-2.2-Untergrenze von 24 px. Der Kopf ist 88 px hoch, die
   groesseren Klickflaechen passen also hinein, ohne dass sich etwas
   verschiebt. Die mobile Navi hat ihre 44 px bereits. */
@media (min-width: 901px) {
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Lange URLs im Fliesstext (Datenschutz) schoben die Seite auf dem Handy
   17 px in die Breite. Sie duerfen jetzt umbrechen. */
p a, li a, td a { overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL-DURCHGANG 17.08.2026 — Lesbarkeit und Bedienbarkeit auf dem Handy
   Befunde aus dem blockierenden Mobil-Gate (scripts/mobile-check.py, 390/768/
   320 px). Auf dem Desktop aendert sich nichts: alles steht in der Media-Query.

   Warum ueberhaupt: auf dem Desktop liest man aus 60 cm auf einem grossen
   Schirm, auf dem Handy aus 30 cm auf 390 px — dieselbe Punktgroesse ist dort
   nicht dieselbe Lesbarkeit. Norm: Fliesstext >= 16 px, Bedienelemente >= 14 px,
   Tap-Ziele >= 44 px (oder >= 8 px Abstand zum Nachbarn).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {   /* nicht 767: das Gate misst auch 768 px, und
                                 auf dem Tablet gilt dieselbe Lesbarkeitsnorm */
  /* ── Fliesstext auf 16 px ────────────────────────────────────────────── */
  .hero-seals__note        { font-size: 16px; line-height: 1.5; }
  .check-list li,
  .capsule-band .check-list li,
  .after-send__list li     { font-size: 16px; }
  .review-card__name,
  .review-card__name span  { font-size: 16px; }
  .team-card__role         { font-size: 16px; }
  .team-card p             { font-size: 16px; }
  .timeline-note           { font-size: 16px; line-height: 1.55; }
  .consent-note            { font-size: 16px; line-height: 1.55; }
  .side-card__note         { font-size: 16px !important; }   /* Basisregel hat !important */
  .ig-tile__text           { font-size: 16px; }
  .ig-note                 { font-size: 16px; }
  .reviews-hint            { font-size: 16px; }
  .video-card p            { font-size: 16px; }
  .press__note             { font-size: 16px; line-height: 1.55; }

  /* ── Bedienelemente auf mind. 14 px ──────────────────────────────────── */
  .cap-toggle              { font-size: 14.5px; }
  .chip                    { font-size: 14px; }

  /* ── Tap-Ziele: Kontaktdaten im Footer standen 19 px hoch mit 6 px Luft.
        Vertikales Padding statt Zeilenhoehe — die Zeile soll nicht auseinander-
        fallen, nur die antippbare Flaeche wachsen. ─────────────────────── */
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn) {
    display: inline-block;
    padding: 11px 0;
    min-height: 44px;
    box-sizing: border-box;
  }
  /* Quellen-/Belegverweise standen mit 4 px Abstand untereinander */
  .quelle a, .capsule-band .quelle a { display: inline-block; padding: 6px 0; }
  .quelle, .capsule-band .quelle { line-height: 1.6; }
}

/* ── Kontakt-Hero ──────────────────────────────────────────────────────────
   Die H1 war das Wort „Kontakt": als Seitenlabel richtig, als Blickfang zu
   duenn (das Falz-Budget verlangt >= 26 px an einem Element mit echtem Inhalt,
   ein Sieben-Zeichen-Wort traegt das nicht). Seit 17.08.2026 steht dort
   „Wir hoeren zu, bevor wir vermitteln" — damit ist die H1 selbst der
   Blickfang und der Label-/Lead-Behelf von vorher ist entfallen.
   Der lange Erklaerabsatz steht seitdem als eigene Sektion UNTER dem Hero
   (Wortlaut unveraendert), er hatte hier den CTA auf 827 px gedrueckt. */
@media (max-width: 767px) {
  .hero-media--shaded .hero-media__copy > h1 {
    font: 700 clamp(26px, 7.6vw, 31px)/1.2 var(--font-display);
    color: #fff; margin: 0 0 12px;
  }
  .hero-media--shaded .hero__cta-row { margin-top: 18px !important; }
}

/* Header-Logo: auf 320 px klemmte `max-width: 100%` die Breite auf 212 px,
   waehrend `height: 52px` fix blieb — das Logo wurde um 4,4 % gestaucht
   (gemessen: Verhaeltnis 4,077 statt nativ 4,264). Auf sehr schmalen Geraeten
   darf die Hoehe mitgehen, dann bleibt das Seitenverhaeltnis echt. */
@media (max-width: 360px) {
  .site-header__logo img { height: 46px; }
}

/* Faire Anwerbung riss auf 320 px die Falz (CTA bei 789, erlaubt 760): das Band
   sitzt dort im Fluss ueber dem Knopf, und die dreizeilige H1 wird auf schmalen
   Geraeten vierzeilig. Das Band gibt die Hoehe her, nicht der Text. */
@media (max-width: 360px) {
  .hero-media--m2 .hero-mobile-photo { height: 138px; }
  .hero-media--m3 .hero-mobile-photo { height: 224px; }
}

/* ── Einklapper fuer lange FAQ-Listen und Textwaende (nur Mobil) ───────────
   Gegenstueck zu Abschnitt 8 in js/animations.js. Der Text ist NICHT entfernt,
   nur zugeklappt: `display:none` bzw. Zeilen-Clipping. Crawler und KI-Systeme
   lesen weiterhin den vollstaendigen Wortlaut aus dem HTML. */
.ek-verborgen { display: none; }
.ek-mehr {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding: 12px 20px; min-height: 44px;
  background: #fff; border: 2px solid var(--green-700); border-radius: 999px;
  font: 700 16px/1.2 var(--font-body); color: var(--green-700);
  cursor: pointer;
}
.ek-mehr:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
@media (max-width: 767px) {
  .ek-text { display: -webkit-box; -webkit-box-orient: vertical;
             -webkit-line-clamp: 6; overflow: hidden; }
  .ek-text.ek-offen { -webkit-line-clamp: unset; overflow: visible; }
}

/* Wasserzeichen-Icon auf den GRUENEN Karten: dort ist --card-accent weiss, das
   Symbol zeichnet sich also hell auf dunklem Grund ab und wird auf 390 px so
   gross, dass es wie angeschnittener Inhalt aussieht statt wie Textur (Adrians
   Befund vom 17.08.2026 an der Haekchen-Karte auf /vermittlung). Auf schmalen
   Screens weiter aus dem Kasten schieben und zuruecknehmen. */
@media (max-width: 767px) {
  .v-card.has-bg-icon .card-bg-icon,
  .panel-dark .card-bg-icon {
    bottom: -52px; right: -46px;
    width: 132px; height: 132px;
    opacity: .045;
  }
}

/* ── Schritt-Liste auf sehr schmalen Geraeten ──────────────────────────────
   Auf 320 px war /vermittlung 31 px zu breit. Ursache: `.step` ist ein Grid
   mit `64px 1fr`, und `1fr` heisst in Wahrheit `minmax(auto, 1fr)` — die
   Spalte schrumpft also nie unter ihre min-content-Breite. Ein langes Wort
   wie „Aufenthaltsgenehmigung" in der flex-Ueberschrift setzt diese Breite
   auf 267 px, zusammen mit 64+20 ergibt das exakt die gemessenen 351 px.
   `min-width: 0` hebt die Sperre auf, dann darf umbrochen werden. */
@media (max-width: 767px) {
  .step { grid-template-columns: 52px 1fr; gap: 14px; }
  .step > * { min-width: 0; }
  .step__head { flex-wrap: wrap; }
  .step__head h3 { min-width: 0; overflow-wrap: break-word; }
  .step.has-bg-icon { padding-right: 12px; }
}

/* Das Wasserzeichen ragte 20–26 px ueber den Viewport hinaus. Sichtbar war es
   nicht (die Karte clippt), aber jede Ueberlauf-Pruefung schlaegt darauf an
   und verdeckt echte Befunde. Innerhalb der Karte halten. */
@media (max-width: 767px) {
  .card-bg-icon { right: -14px; bottom: -18px; width: 118px; height: 118px; }
}

/* ── Rest der 320-px-Enge ──────────────────────────────────────────────────
   Seit der Container seinen seitlichen Abstand zurueckhat, stehen auf 320 px
   nur noch 280 px Inhalt zur Verfuegung. Zwei Dinge passten da nicht mehr:
   ein langes Kompositum in der Schritt-Ueberschrift und ein CTA, dessen
   Beschriftung breiter ist als der Bildschirm. */
@media (max-width: 400px) {
  .step__head h3 { hyphens: auto; }
  .btn { max-width: 100%; }
}

/* Die Garantie-Karte hat 44 px Innenabstand links und rechts. Auf 320 px
   bleiben nach Container-Rand und Kartenpolster nur 192 px Textbreite, und
   die Ueberschrift „Nachbesetzungsgarantie" allein ist breiter. Polster auf
   schmalen Geraeten zuruecknehmen. */
@media (max-width: 767px) {
  .guarantee-card { padding: 30px 22px; }
  .guarantee-card h2 { hyphens: auto; overflow-wrap: break-word; }
}

/* ── Kontakt: Anruf-Zeile unter dem Hero ───────────────────────────────────
   Seit 19.08.2026 fuehrt der Hero-CTA der Kontaktseite aufs Formular
   (#anfrage). Damit der Telefonweg nicht verschwindet, steht er als eigene
   Zeile direkt unter dem Hero — dort, wo bis dahin der Fokus-Absatz stand. */
.callbar {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 820px;
  padding: 22px 26px;
  background: var(--cream);
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-lg);
}
.callbar__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--green-600);
}
.callbar__body { min-width: 0; }
.callbar__title {
  margin: 0 0 8px;
  font: 700 19px/1.35 var(--font-display);
  color: var(--ink-900);
}
/* Die Nummer ist der Blickfang, nicht der Vorsatz: gross, fett, in Markengruen.
   Ab 18,66 px fett genuegen 3:1 — #367a30 auf #f3f9f2 liegt darueber. */
.callbar__title a {
  display: inline-block;
  font: 800 27px/1.2 var(--font-display);
  color: var(--green-700);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
}
.callbar__title a:hover { text-decoration: underline; }
.callbar__note {
  margin: 0;
  font: 500 15px/1.65 var(--font-body);
  color: var(--ink-500);
}
/* Sprungziel des Hero-CTA: der Sticky-Header darf die Ueberschrift nicht
   verdecken, wenn das Formular angesprungen wird. */
#anfrage { scroll-margin-top: 96px; }

@media (max-width: 560px) {
  .callbar { flex-direction: column; gap: 14px; padding: 20px; }
  .callbar__icon { width: 44px; height: 44px; }
  .callbar__title { font-size: 18px; margin-bottom: 4px; }
  /* Eigene Zeile und 44 px hoch: die Nummer bleibt ein sicheres Touch-Target. */
  .callbar__title a {
    display: block;
    margin-top: 6px;
    font-size: 25px;
    min-height: 44px;
    line-height: 44px;
  }
}

/* ── Einwilligungs-Banner ────────────────────────────────────────────────
   Eingebaut 19.08.2026. Vorher stand Consent Mode zwar korrekt auf "denied",
   es gab aber nichts, was ihn je hochschalten konnte: GA4 und Google Ads
   liefen dauerhaft cookielos, Ads-Conversions waren keinem Klick zuzuordnen.
   Bewusst ohne Fremd-Tool (kein zusaetzlicher Request, keine Datenweitergabe
   an einen weiteren Anbieter) und mit gleich grossen Schaltflaechen fuer
   Annehmen und Ablehnen. */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: #fff;
  border-top: 1px solid var(--line-cream);
  box-shadow: 0 -6px 22px rgba(43, 42, 38, .10);
  padding: 20px 24px;
}
.consent-bar__inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.consent-bar__text {
  flex: 1 1 420px; margin: 0;
  font: 400 14.5px/1.55 var(--font-body); color: var(--ink-700);
}
.consent-bar__text strong { color: var(--ink-900); }
.consent-bar__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.consent-bar__actions button {
  font: 700 14.5px/1 var(--font-body);
  padding: 14px 26px; border-radius: var(--radius-md);
  cursor: pointer; min-width: 148px;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.consent-bar__ja { background: var(--green-700); color: #fff; border: 1px solid var(--green-700); }
.consent-bar__nein { background: #fff; color: var(--ink-900); border: 1px solid var(--line-cream); }
@media (hover: hover) {
  .consent-bar__ja:hover { background: #2c6528; }
  .consent-bar__nein:hover { border-color: var(--ink-700); }
}
@media (max-width: 760px) {
  .consent-bar { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .consent-bar__inner { gap: 16px; }
  .consent-bar__actions { width: 100%; }
  .consent-bar__actions button { flex: 1 1 0; min-width: 0; padding: 15px 12px; }
}