/* ==========================================================================
   COMPONENTS — Header, Footer, Buttons, Cards, Module
   Referenz: design/DESIGN-SYSTEM.md § 5
   ========================================================================== */

/* ---- Buttons v2: eckig (keine Rundung). Füllung + separate Outline im VORDERGRUND,
   andersfarbig (primär: weiß), beide leicht & ASYMMETRISCH verdreht. Hover: die Füllung
   folgt der Maus (Magnet) und skaliert leicht (auch nach Maus-Beschleunigung); die Outline
   bleibt stehen. main.js steuert --mx / --my / --fs. ---- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .95em 1.9em;
  font-weight: 700; font-size: 1rem; line-height: 1.15;
  text-decoration: none; color: var(--c-tanne-950);
  --mx: 0px; --my: 0px; --fs: 1;
  --fill-rot: -3deg; --outline-rot: 2.4deg;
  transition: color var(--t-fast);
}
/* Füllung (Magnet + Skalierung) */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--btn-fill, var(--c-brand));
  box-shadow: var(--shadow-1);
  transform: translate(var(--mx), var(--my)) rotate(var(--fill-rot)) scale(var(--fs));
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1);
}
/* Outline im Vordergrund (vor der Füllung), andersfarbig, asymmetrisch verdreht, bleibt stehen */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--btn-outline, var(--c-tanne-950));
  transform: rotate(var(--outline-rot));
  transition: border-color var(--t-fast);
}
@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; transform: rotate(var(--fill-rot)); }
}

/* Primär: Markengrün-Fläche, weiße Outline */
.btn--primary { --btn-fill: var(--c-brand); --btn-outline: var(--c-weiss); color: var(--c-tanne-950); }
/* Sekundär (ghost): offene Fläche (leichte Tönung als Magnet-Träger), dunkle Outline */
/* Secondary = dezent gefüllte Fläche (schlichter als Primär) + EINE Outline (kein Doppel-Rahmen) */
.btn--ghost { --btn-fill: var(--c-stein-200); --btn-outline: var(--c-tanne-900); color: var(--c-tanne-900); }
.btn--ghost::before { box-shadow: none; }

/* Ghost auf Dunkel / Hero: weiße Outline + Text, dezente Glas-Hinterlegung als Magnet-Fläche */
.section--dark .btn--ghost, .hero__actions .btn--ghost, .cta-block .btn--ghost { color: var(--c-weiss); --btn-outline: var(--c-weiss); }
/* auf solider dunkler Fläche: dezent aufhellende Füllung; auf dem Hero-Foto: dunkle Glas-Füllung (Lesbarkeit) */
.section--dark .btn--ghost, .cta-block .btn--ghost { --btn-fill: rgb(255 255 255 / .1); }
.hero__actions .btn--ghost { --btn-fill: rgb(21 29 19 / .4); }
.section--dark .btn--ghost:hover, .hero__actions .btn--ghost:hover, .cta-block .btn--ghost:hover { color: var(--c-weiss); }

/* Kompakte CTA in der fixen Aktions-Insel: gleiche Verdrehung wie alle Buttons */
.action-island__cta { padding: .62em 1.15em; font-size: .95rem; }

.btn--tel { font-variant-numeric: tabular-nums; }
.btn .icon { width: 1.1em; height: 1.1em; }

/* Text-Link mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: .4em;
  padding-block: .3em;
  font-weight: 600; text-decoration: none; color: var(--c-brand-deep);
}
.arrow-link::after { content: '→'; transition: transform var(--t-fast); }
.arrow-link:hover::after { transform: translateX(4px); }

/* ==========================================================================
   NAVIGATION (überarbeitet): Topbar (nicht fix) · Logo fix links · Aktions-Insel
   fix rechts · Gesamt-Navi im Offcanvas
   ========================================================================== */
:root { --logo-w: clamp(150px, 17vw, 226px); --island-safe: 420px; }

/* Topbar — im Fluss, scrollt weg */
.topbar { background: var(--c-tanne-950); color: var(--c-stein-200); font-size: var(--fs-small); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 42px;
  padding-left: calc(var(--logo-w) + 1.5rem);
  padding-right: clamp(1.25rem, 5vw, 6rem);
}
.topbar__claim { color: var(--c-stein-200); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__links { display: flex; gap: var(--sp-5); padding-right: var(--island-safe); }
.topbar__links a { color: var(--c-stein-200); text-decoration: none; padding-block: 11px; }
.topbar__links a:hover { color: var(--c-brand); }
@media (max-width: 860px) {
  .topbar__claim, .topbar__links { display: none; }
  .topbar__inner { min-height: 0; padding: 0; }
}

/* Logo — fix, bündig oben links, groß */
.brandmark { position: fixed; top: 0; left: 0; z-index: 120; line-height: 0; display: block; }
.brandmark img { width: var(--logo-w); height: auto; display: block; filter: drop-shadow(0 8px 20px rgb(21 29 19 / .22)); }

/* Aktions-Insel — fix oben rechts, farbig, organische Kante */
.action-island {
  position: fixed; top: 0; right: 0; z-index: 120;
  display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.25rem);
  background: var(--c-tanne-950); color: var(--c-weiss);
  padding: 11px clamp(1rem, 3vw, 2rem) 11px clamp(1rem, 2.5vw, 1.75rem);
  border-radius: 0 0 0 24px; box-shadow: var(--shadow-2);
}
.action-island__tel { display: inline-flex; align-items: center; gap: .5em; color: var(--c-weiss); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.action-island__tel:hover { color: var(--c-brand); }
.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 48px; height: 48px; color: var(--c-weiss);
}
.nav-toggle span { display: block; width: 25px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle em { font-style: normal; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.nav-toggle:hover { color: var(--c-brand); }
@media (max-width: 720px) {
  .action-island__tel span { display: none; }
  .action-island__cta { display: none; }
  .nav-toggle em { display: none; }
}

/* Content klar von den fixen Ecken halten (Seiten ohne Hero-Bühne) */
main:not(:has(.hero)) { padding-top: clamp(44px, 5vw, 66px); }

/* Offcanvas — gesamte Navigation, alle Breakpoints */
.offcanvas {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--c-tanne-950); color: var(--c-stein-100);
  overflow-y: auto;
  clip-path: circle(0% at 7% 93%);
  opacity: 0; pointer-events: none;
  transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), opacity .35s ease;
}
.offcanvas.is-open { clip-path: circle(142% at 7% 93%); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .offcanvas { transition: none; } }
.offcanvas__inner {
  min-height: 100%; display: grid; gap: var(--sp-6);
  padding: 5.75rem clamp(1.5rem, 6vw, 6rem) clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .offcanvas__inner {
    grid-template-columns: 1.35fr 1fr; gap: clamp(3rem, 6vw, 7rem); align-items: start;
    padding-top: clamp(3.5rem, 7vw, 6rem);
  }
}
.offcanvas__close {
  position: fixed; top: clamp(1rem, 3vw, 1.75rem); right: clamp(1.25rem, 5vw, 3.5rem); z-index: 1;
  width: 54px; height: 54px; border-radius: 50%; background: var(--c-tanne-700); color: var(--c-weiss);
  display: grid; place-items: center;
  --mx: 0px; --my: 0px; --fs: 1;
  transform: translate(var(--mx), var(--my)) scale(var(--fs));
  transition: background var(--t-fast), color var(--t-fast), transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.offcanvas__close svg { transition: transform var(--t-fast); }
.offcanvas__close:hover { background: var(--c-brand); color: var(--c-tanne-950); }
.offcanvas__close:hover svg { transform: rotate(90deg); }

/* Offcanvas: große Nav-Liste + Akkordeons */
.ocnav { display: grid; }
.ocnav__item { border-bottom: 1px solid rgb(255 255 255 / .1); }
.ocnav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.ocnav__row > a {
  font-family: var(--font-display); font-variation-settings: 'opsz' 20;
  font-size: clamp(1.85rem, 1.1rem + 2.9vw, 3rem); color: var(--c-weiss); text-decoration: none;
  letter-spacing: -0.02em; padding: clamp(.45rem, 1.3vw, .85rem) 0; flex: 1;
  transition: color var(--t-fast), transform var(--t-fast);
}
.ocnav__row > a:hover, .ocnav__row > a[aria-current="page"] { color: var(--c-brand); transform: translateX(8px); }
.ocnav__item--muted .ocnav__row > a { font-size: clamp(1.35rem, 1rem + 1.5vw, 1.9rem); color: var(--c-stein-200); }
.ocnav__toggle { position: relative; width: 52px; height: 52px; flex-shrink: 0; color: var(--c-stein-100); }
.ocnav__toggle:hover { color: var(--c-brand); }
.ocnav__toggle span { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.ocnav__toggle span::after { content: ''; position: absolute; left: 8px; top: -8px; width: 2px; height: 18px; background: currentColor; transition: opacity var(--t-fast); }
.ocnav__toggle[aria-expanded="true"] span::after { opacity: 0; }
.ocnav__sub { display: none; padding: 0 0 var(--sp-4); }
.ocnav__sub.is-open { display: block; animation: ocSubIn var(--t-med); }
@keyframes ocSubIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ocnav__group { font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: .12em; color: var(--c-brand); margin: var(--sp-3) 0 var(--sp-2); }
.ocnav__sub ul { display: grid; gap: 2px; margin-bottom: var(--sp-2); }
.ocnav__sub a { color: var(--c-stein-200); text-decoration: none; font-size: 1.12rem; padding: .28em 0; display: inline-block; }
.ocnav__sub a:hover { color: var(--c-brand); }

/* Offcanvas: Feature-Spalte */
.offcanvas__feature { display: grid; gap: var(--sp-5); align-content: start; }
.oc-feature { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 6px 30px 6px 30px; }
.oc-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.oc-feature:hover img { transform: scale(1.05); }
.oc-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(21 29 19 / .82), transparent 62%); }
.oc-feature__label { position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 1; color: var(--c-weiss); font-weight: 800; font-size: 1.45rem; line-height: 1.1; display: grid; gap: 3px; }
.oc-feature__label small { color: var(--c-brand); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.oc-projects__head { font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: .12em; color: var(--c-stein-200); margin-bottom: var(--sp-3); }
.oc-carousel { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.oc-chip { flex: 0 0 160px; scroll-snap-align: start; text-decoration: none; color: var(--c-stein-100); }
.oc-chip img { width: 160px; height: 108px; object-fit: cover; border-radius: 6px 16px 6px 16px; }
.oc-chip span { display: block; margin-top: 7px; font-size: var(--fs-small); font-weight: 600; }
.oc-chip:hover span { color: var(--c-brand); }
.oc-contact { display: grid; gap: 5px; border-top: 1px solid rgb(255 255 255 / .12); padding-top: var(--sp-4); font-size: var(--fs-small); }
.oc-contact a { color: var(--c-weiss); text-decoration: none; }
.oc-contact a:hover { color: var(--c-brand); }
.oc-contact span { color: var(--c-stein-200); }

/* ---- Hero ---- */
.hero { position: relative; display: grid; min-height: min(78vh, 780px); }
.hero--sub { min-height: min(56vh, 560px); }
.hero__media, .hero__media img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Parallax-Spielraum: Medien-Container clippt, Bild ist etwas höher (motion.js bewegt es beim Scrollen) */
.hero__media { overflow: hidden; }
.hero__media img { height: 118%; top: -9%; bottom: auto; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(12deg, rgb(21 29 19 / .82) 0%, rgb(21 29 19 / .45) 55%, rgb(21 29 19 / .12) 100%),
    linear-gradient(0deg, rgb(21 29 19 / .35) 0%, transparent 45%);
}
.hero__content {
  position: relative; align-self: end;
  padding-block: var(--sp-7);
  color: var(--c-weiss); max-width: 54rem;
}
.hero__content .kicker { color: var(--c-brand); }
.hero__content h1 { color: var(--c-weiss); font-size: var(--fs-hero); max-width: none; text-shadow: 0 2px 24px rgb(21 29 19 / .5); }
.hero__content .lead { color: var(--c-stein-100); margin-top: var(--sp-4); max-width: 38ch; font-weight: 500; text-shadow: 0 1px 10px rgb(21 29 19 / .5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); align-items: center; }

/* Titelkarte (Unterseiten) ragt in Bühne */
.hero-card {
  position: relative; margin-top: calc(-1 * var(--sp-7));
  background: var(--c-stein-50);
  padding: var(--sp-5) var(--sp-5) 0;
  max-width: 52rem;
  border-radius: var(--r-m) var(--r-m) 0 0;
}

/* Vertrauens-/KPI-Band — hohes weißes Band, große Bleistift-Icons über der Aussage */
.trustbar { border-block: var(--border); background: var(--c-weiss); }
.trustbar__list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  padding-block: var(--sp-6);
}
@media (min-width: 800px) { .trustbar__list { grid-template-columns: repeat(4, 1fr); } }
.trustbar__list li {
  display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start;
  gap: var(--sp-3); padding: var(--sp-4) clamp(var(--sp-3), 2vw, var(--sp-5));
  font-weight: 800; color: var(--c-tanne-900); font-size: 1.2rem; line-height: 1.2;
  border-right: 1px solid var(--c-stein-200);
}
.trustbar__list li:last-child { border-right: 0; }
.trustbar__list .ico { width: 76px; height: 76px; flex-shrink: 0; }
.trustbar__list small { display: block; font-weight: 500; color: var(--c-ink-soft); font-size: var(--fs-small); margin-top: 3px; }
.trustbar a { color: inherit; text-decoration: none; }
.trustbar a:hover { color: var(--c-brand-deep); }
@media (max-width: 799px) {
  .trustbar__list li:nth-child(2n) { border-right: 0; }
  .trustbar__list li:nth-child(-n+2) { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-stein-200); }
  .trustbar__list li:nth-child(n+3) { padding-top: var(--sp-5); }
  .trustbar__list .ico { width: 64px; height: 64px; }
}

/* Partner-Leiste (Startseite): vereinheitlichte Logos (grau → Original bei Hover), zentriert */
.partners {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.partners__item {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  background: var(--c-weiss); border: var(--border); border-radius: 4px 18px 4px 18px;
  padding: var(--sp-5) var(--sp-4);
}
.partners__logo { height: 48px; display: flex; align-items: center; justify-content: center; }
.partners__logo img {
  max-height: 48px; width: auto;
  filter: grayscale(1) opacity(.6);
  transition: filter var(--t-med), transform var(--t-med);
}
.partners__item:hover .partners__logo img { filter: grayscale(0) opacity(1); transform: scale(1.05); }
.partners__item p { font-size: var(--fs-small); color: var(--c-ink-soft); max-width: 30ch; margin-inline: auto; }

/* ---- Cards ---- */
.card {
  background: var(--c-weiss); border: var(--border); border-radius: 4px 20px 4px 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--t-fast);
}
.card:hover { border-color: var(--c-tanne-700); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__body h3 a { color: var(--c-tanne-900); text-decoration: none; }
.card__body h3 a::after { content: ''; position: absolute; inset: 0; } /* Card klickbar */
.card { position: relative; }
.card__meta { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-small); color: var(--c-ink-soft); }
.card__meta .icon { width: 1em; height: 1em; color: var(--c-brand-deep); }

/* Versetztes Card-Raster (2-1-2, kein 3er-Serien-Grid) */
.cards-offset { display: grid; gap: var(--sp-5); }
@media (min-width: 760px) {
  .cards-offset { grid-template-columns: repeat(2, 1fr); }
  .cards-offset > :nth-child(3n) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .cards-offset > :nth-child(3n) .card__media { aspect-ratio: auto; height: 100%; }
  /* Verwaiste Schlusskarte (Kind 1, 4, 7 … als letztes) → volle Breite statt halbleerer Reihe */
  .cards-offset > :nth-child(3n+1):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .cards-offset > :nth-child(3n+1):last-child .card__media { aspect-ratio: auto; height: 100%; }
}

/* Referenz-Kartenraster (gleichmäßig, Karten nicht zu hoch) */
.ref-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .ref-grid { grid-template-columns: repeat(4, 1fr); } }

/* Leistungs-Verteiler (Startseite) */
.services-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-tile {
  position: relative; border-radius: 6px 28px 6px 28px; overflow: hidden;
  min-height: 300px; display: flex; align-items: flex-end;
  text-decoration: none;
}
.service-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.service-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(8deg, rgb(21 29 19 / .78) 0%, rgb(21 29 19 / .18) 60%, transparent 100%);
  transition: background var(--t-fast);
}
.service-tile:hover img { transform: scale(1.04); }
.service-tile__label {
  position: relative; z-index: 1; padding: var(--sp-5);
  color: var(--c-weiss); font-weight: 800; font-size: 1.45rem; line-height: 1.1;
  letter-spacing: -0.01em;
  display: flex; flex-direction: column; gap: 6px;
}
.service-tile__label small { color: var(--c-stein-100); font-weight: 400; font-size: 1rem; line-height: 1.4; }
.service-tile--wasser .service-tile__label::before {
  content: 'Unsere Spezialität';
  font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-brand);
}

@media (min-width: 900px) {
  .process::before {
    content: ''; position: absolute; top: 12px; left: 0; right: 0; height: 1px;
    background: var(--c-tanne-700); opacity: .5;
  }
}

/* ---- Ablauf-Timeline (.flow) — Ersatz für den engen Prozess-Strip -----------
   Nummerierte Marken-Nodes mit durchgehender Verbindungslinie, großes Icon,
   Überschrift, Text. Vertikal, viel Luft. Auf Dunkel invertiert. ------------- */
.flow { display: grid; gap: 0; max-width: 62rem; margin-inline: auto; counter-reset: flowstep; }
.flow__step { display: grid; grid-template-columns: 72px 1fr; column-gap: clamp(var(--sp-4), 3vw, var(--sp-6)); }
.flow__marker { display: flex; flex-direction: column; align-items: center; }
.flow__num {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
  background: var(--c-brand); color: var(--c-tanne-950);
  display: grid; place-items: center;
  font-family: var(--font-display); font-variation-settings: 'opsz' 20; font-weight: 900; font-size: 2.1rem;
  box-shadow: var(--shadow-1);
}
.flow__step:not(:last-child) .flow__marker::after {
  content: ''; width: 2px; flex: 1 1 auto; min-height: var(--sp-5);
  background: linear-gradient(var(--c-brand) 0%, var(--c-stein-200) 40%);
}
.flow__content { padding: var(--sp-2) 0 var(--sp-7); display: grid; gap: var(--sp-2); align-content: start; }
.flow__step:last-child .flow__content { padding-bottom: 0; }
.flow__content .ico { width: 54px; height: 54px; margin-bottom: var(--sp-1); }
.flow__content h3 { font-size: var(--fs-h3); color: var(--c-tanne-900); }
.flow__content p { color: var(--c-ink-soft); font-size: 1.0625rem; }
.flow__content p a { color: var(--c-brand-deep); }
@media (max-width: 560px) {
  .flow__step { grid-template-columns: 56px 1fr; column-gap: var(--sp-4); }
  .flow__num { width: 56px; height: 56px; font-size: 1.7rem; }
}
.section--dark .flow__num { background: var(--c-brand); color: var(--c-tanne-950); }
.section--dark .flow__content h3 { color: var(--c-weiss); }
.section--dark .flow__content p { color: var(--c-stein-200); }
.section--dark .flow__step:not(:last-child) .flow__marker::after { background: linear-gradient(var(--c-brand) 0%, var(--c-tanne-700) 40%); }
.section--wasser .flow__num { background: var(--c-wasser); color: var(--c-weiss); }

/* ---- Vergleichstabelle ---- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%; min-width: 640px; border-collapse: collapse;
  background: var(--c-weiss); border: var(--border); border-radius: var(--r-m);
  font-size: var(--fs-small);
}
.compare th, .compare td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-stein-200); }
.compare thead th { background: var(--c-tanne-900); color: var(--c-weiss); font-weight: 600; position: sticky; top: 0; }
.compare tbody th { font-weight: 600; color: var(--c-tanne-900); background: var(--c-stein-100); width: 11em; }
.compare tbody tr:nth-child(even) td { background: var(--c-stein-50); }
.compare .hl { box-shadow: inset 3px 0 0 var(--c-wasser); }

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--sp-2); }
.faq details {
  background: var(--c-weiss); border: var(--border); border-radius: var(--r-m);
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  font-weight: 600; color: var(--c-tanne-900); font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 1.5rem; line-height: 1; color: var(--c-brand-deep);
  transition: transform var(--t-fast); flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-ink); }
.faq .faq__a > * + * { margin-top: var(--sp-3); }

/* ---- Galerie + Lightbox ---- */
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery a { display: block; border-radius: var(--r-s); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform var(--t-med), opacity var(--t-fast); }
.gallery a:hover img { transform: scale(1.03); }
.gallery .gallery__wide { grid-column: span 2; }
.gallery .gallery__wide img { aspect-ratio: 8 / 3; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgb(21 29 19 / .94);
  display: none; align-items: center; justify-content: center;
  padding: var(--sp-5);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox__caption { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); color: var(--c-stein-200); font-size: var(--fs-small); text-align: center; max-width: 80vw; }
.lightbox button { position: absolute; color: var(--c-weiss); font-size: 2rem; width: 48px; height: 48px; display: grid; place-items: center; }
.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__prev { left: var(--sp-3); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--sp-3); top: 50%; transform: translateY(-50%); }

/* ---- Zitat/Manifest (Dark Break) ---- */
.manifest {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.08; color: var(--c-weiss); max-width: 16em;
  letter-spacing: -0.015em; overflow-wrap: break-word;
  font-variation-settings: 'opsz' 20;
}
.manifest em { color: var(--c-brand); font-style: normal; }

/* ---- CTA-Block (Seitenende) ---- */
.cta-block { position: relative; overflow: hidden; }
.cta-block__inner {
  display: grid; gap: var(--sp-5); align-items: center;
  padding-block: var(--sp-7);
}
@media (min-width: 900px) { .cta-block__inner { grid-template-columns: 3fr 2fr; } }
.cta-block h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.75rem); color: var(--c-weiss); }
.cta-block .lead { color: var(--c-stein-200); }
.cta-block__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cta-block__contactline { color: var(--c-stein-200); font-size: var(--fs-small); margin-top: var(--sp-3); }
.cta-block__contactline a { color: var(--c-weiss); }
/* CTA mit Wasser-Hintergrundfoto */
.cta-block { isolation: isolate; }
.cta-block .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-block:has(.cta-bg)::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(21 29 19 / .92) 0%, rgb(21 29 19 / .72) 55%, rgb(40 90 102 / .5) 100%);
}
.cta-block:has(.cta-bg) .cta-block__inner { grid-template-columns: 1fr; }
.cta-block:has(.cta-bg) .cta-block__inner > div { max-width: 44rem; }

/* ---- Formulare ---- */
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .form-grid--2col { grid-template-columns: 1fr 1fr; } .form-grid--2col .form-field--full { grid-column: 1 / -1; } }
.form-field { display: grid; gap: 6px; }
.form-field label { font-weight: 600; font-size: var(--fs-small); color: var(--c-tanne-900); }
.form-field .hint { font-size: var(--fs-small); color: var(--c-ink-soft); }
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"],
.form-field input[type="file"], .form-field select, .form-field textarea {
  background: var(--c-weiss); border: 1px solid var(--c-stein-200); border-radius: var(--r-s);
  padding: .7em .85em; width: 100%;
}
.form-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--c-brand-deep); outline-offset: 0; border-color: var(--c-brand-deep); }
.form-field.has-error :is(input, select, textarea) { border-color: var(--c-fehler); }
.form-field .error-msg { color: var(--c-fehler); font-size: var(--fs-small); font-weight: 600; }
.form-check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); }
.form-check input { width: 1.15em; height: 1.15em; margin-top: .15em; accent-color: var(--c-brand-deep); flex-shrink: 0; }

/* Auswahl-Kacheln (Projektart) */
.choice-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.choice-tile { position: relative; }
.choice-tile input { position: absolute; opacity: 0; inset: 0; }
.choice-tile label {
  display: flex; flex-direction: column; gap: .4em; align-items: flex-start;
  border: 1px solid var(--c-stein-200); border-radius: var(--r-m);
  padding: var(--sp-4); background: var(--c-weiss);
  cursor: pointer; height: 100%; font-weight: 600; transition: border-color var(--t-fast), background var(--t-fast);
}
.choice-tile input:checked + label { border-color: var(--c-brand-deep); background: color-mix(in srgb, var(--c-brand) 12%, var(--c-weiss)); }
.choice-tile input:focus-visible + label { outline: 2px solid var(--c-brand-deep); outline-offset: 2px; }

/* Mehrstufigkeit */
.form-steps { counter-reset: fstep; display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.form-steps li {
  counter-increment: fstep;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-soft);
}
.form-steps li::before {
  content: counter(fstep);
  display: grid; place-items: center; width: 1.7em; height: 1.7em;
  border-radius: 50%; background: var(--c-stein-200); color: var(--c-ink);
  font-size: .85em;
}
.form-steps li.is-active { color: var(--c-tanne-900); }
.form-steps li.is-active::before { background: var(--c-brand); color: var(--c-tanne-950); }
.form-steps li.is-done::before { background: var(--c-tanne-700); color: var(--c-weiss); content: '✓'; }
.form-step[hidden] { display: none; }
.form-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); }

.form-status { padding: var(--sp-4); border-radius: var(--r-m); font-weight: 600; }
.form-status--ok { background: color-mix(in srgb, var(--c-ok) 12%, var(--c-weiss)); color: var(--c-ok); border: 1px solid var(--c-ok); }
.form-status--error { background: color-mix(in srgb, var(--c-fehler) 10%, var(--c-weiss)); color: var(--c-fehler); border: 1px solid var(--c-fehler); }

/* ---- Breadcrumbs ---- */
.breadcrumbs { font-size: var(--fs-small); color: var(--c-ink-soft); padding-block: var(--sp-3); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; list-style: none; padding: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .55em; }
/* Chevron-Trenner: gedrehtes Quadrat mit oberer+rechter Kante = klares ›-Zeichen */
.breadcrumbs li + li::before {
  content: ''; flex-shrink: 0;
  width: .42em; height: .42em; margin-top: -.02em;
  border-top: 2px solid var(--c-ink-soft); border-right: 2px solid var(--c-ink-soft);
  transform: rotate(45deg); opacity: .55;
}
.breadcrumbs a { color: var(--c-ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-tanne-900); }

/* ---- Footer ---- */
.site-footer { background-color: var(--c-tanne-950); color: var(--c-stein-200); font-size: var(--fs-small); }
.site-footer a { color: var(--c-stein-200); text-decoration: none; }
.site-footer a:hover { color: var(--c-brand); }
.site-footer__grid {
  display: grid; gap: var(--sp-6); padding-block: var(--sp-7);
}
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.site-footer h2 { color: var(--c-weiss); font-family: var(--font-text); font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-3); }
.site-footer li { padding-block: 3px; }
.site-footer address { font-style: normal; line-height: 1.8; }
/* Region-Block im Footer: bewusst reduziert (kleiner, gedämpft, kompakte Inline-Liste) */
.site-footer__region-title { margin-top: var(--sp-4); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--c-stein-200); opacity: .75; }
.site-footer__region { display: flex; flex-wrap: wrap; gap: .15em .35em; margin-top: var(--sp-1); }
.site-footer__region li { display: inline; }
.site-footer__region li:not(:last-child)::after { content: '·'; margin-left: .35em; color: var(--c-tanne-700); }
.site-footer__region a { font-size: 0.8125rem; color: var(--c-stein-200); opacity: .8; text-decoration: none; }
.site-footer__region a:hover { color: var(--c-brand); opacity: 1; }
.site-footer__legal {
  border-top: 1px solid var(--c-tanne-700);
  padding-block: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between;
}

/* ---- Vorher/Nachher ---- */
.ba { position: relative; border-radius: var(--r-m); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; container-type: inline-size; }
.ba img { width: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* Vollbreite Variante (Vorher/Nachher über die ganze Bildschirmbreite, feste Höhe) */
.ba-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); }
.ba--wide { border-radius: 0; height: clamp(340px, 56vh, 620px); }
.ba--wide > img, .ba--wide .ba__after img { height: 100%; object-fit: cover; }
.ba__after { position: absolute; inset: 0; overflow: hidden; width: 50%; }
/* Klipp-Bild an die volle .ba-Breite koppeln (100cqw), sonst wird es beim Ziehen skaliert statt freigelegt */
.ba__after img { width: 100cqw; height: 100%; max-width: none; object-fit: cover; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-weiss); left: 50%;
  cursor: ew-resize;
}
.ba__handle::after {
  content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--c-weiss); color: var(--c-tanne-950);
  display: grid; place-items: center; font-weight: 700; box-shadow: var(--shadow-2);
}
.ba__label { position: absolute; top: var(--sp-3); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-weiss); background: rgb(21 29 19 / .55); padding: .3em .7em; border-radius: var(--r-s); }
.ba__label--before { left: var(--sp-3); }
.ba__label--after { right: var(--sp-3); }

/* ---- Saison-Timeline (Gartenpflege) ---- */
.timeline { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline__item { border-top: 3px solid var(--c-brand); padding-top: var(--sp-3); }
.timeline__item h3 { font-size: 1rem; }
.timeline__item ul { font-size: var(--fs-small); color: var(--c-ink-soft); display: grid; gap: 4px; margin-top: var(--sp-2); }

/* ---- Sticky-Mobile-CTA ---- */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-header);
  display: flex; background: var(--c-tanne-950); box-shadow: var(--shadow-2);
}
.sticky-cta a {
  flex: 1; text-align: center; padding: .9em; font-weight: 600; text-decoration: none; color: var(--c-weiss);
}
.sticky-cta a + a { border-left: 1px solid var(--c-tanne-700); }
.sticky-cta .primary { background: var(--c-brand); color: var(--c-tanne-950); }
@media (min-width: 1100px) { .sticky-cta { display: none; } }
body:has(.sticky-cta) { padding-bottom: 52px; }
@media (min-width: 1100px) { body:has(.sticky-cta) { padding-bottom: 0; } }

/* Hero-Video (JS-injiziert, ≥720px): sanft einblenden über dem Standbild */
.hero__video { opacity: 0; transition: opacity .7s ease; }
.hero__video.is-ready { opacity: 1; }

/* ==========================================================================
   FILMGRAIN — dezenter, bewegter Kornfilm über allen Fotos (kein Video).
   main.js taggt Medien-Container (.is-grain) bzw. wickelt freistehende Bilder
   in .grain-wrap. Offscreen wird die Animation pausiert (.grain-paused).
   ========================================================================== */
:root { --grain-svg: url("../img/ui/grain.svg"); }
/* KEINE pauschale position: relative — würde absolut positionierte Container (.hero__media) brechen.
   Nur die noch statischen Container verankern; bereits positionierte (hero/tiles/matrix) bleiben. */
.is-grain { overflow: hidden; }
.grain-wrap { display: block; position: relative; }
.card__media.is-grain, .gallery a.is-grain, .article-hero.is-grain { position: relative; }
.is-grain::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grain-svg) center / cover no-repeat;
  opacity: .95; mix-blend-mode: soft-light; pointer-events: none; z-index: 1;
}
/* Hero-Bühne: Grain deutlich dezenter (auf Video/hellen Fotos sonst zu stark) */
.hero__media.is-grain::before { opacity: .3; }
.grain-paused::before { animation-play-state: paused; }

/* ---- Bleistift-Icons (Higgsfield): weißer Hintergrund verschwindet per multiply auf hellen
   Flächen; auf dunklen Flächen .ico--dark (invertiert + screen). Kein Grain (main.js überspringt). ---- */
/* Bleistift-Icons: transparenter Hintergrund (kein Blend nötig). Auf dunklen
   Flächen invertiert (dunkle Striche → hell). Default deutlich größer als Text. */
.ico { display: inline-block; width: 1.8em; height: 1.8em; object-fit: contain; vertical-align: -0.42em; }
.ico--dark { filter: invert(1); }
.section--dark .ico:not(.ico--keep) { filter: invert(1); }

/* ---- Kundenstimmen (echte Google-Rezensionen; ohne Profilbilder) ---- */
.testimonials { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 820px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: var(--c-weiss); border: var(--border); border-radius: 4px 22px 4px 22px;
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
}
.testimonial .ico { width: 34px; height: 34px; opacity: .85; }
.testimonial blockquote {
  font-family: var(--font-display); font-variation-settings: 'opsz' 20;
  font-size: var(--fs-h3); line-height: 1.3; color: var(--c-tanne-900); letter-spacing: -0.01em;
}
.testimonial figcaption { margin-top: auto; font-weight: 700; color: var(--c-tanne-900); font-size: var(--fs-small); }
.testimonial figcaption a { color: var(--c-ink-soft); font-weight: 600; text-decoration: none; }
.testimonial figcaption a:hover { color: var(--c-brand-deep); text-decoration: underline; }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4%, -5%); }
  20% { transform: translate(-8%, 4%); }
  30% { transform: translate(5%, -7%); }
  40% { transform: translate(-4%, 9%); }
  50% { transform: translate(-8%, 4%); }
  60% { transform: translate(9%, -2%); }
  70% { transform: translate(-2%, 7%); }
  80% { transform: translate(-9%, -2%); }
  90% { transform: translate(7%, 3%); }
}
@media (prefers-reduced-motion: reduce) { .is-grain::before { animation: none; } }

/* ==========================================================================
   INTERAKTIVE SEKTIONSTYPEN (Redesign 2026-07 — handgebaute Seiten)
   Progressive Enhancement: ohne JS bleibt jeder Inhalt sichtbar & bedienbar
   (Tabs zeigen alle Panels, Accordion/Disclose = native <details>, Hotspots =
   Klapp-Liste, In-Page-Anker = normale Anker). main.js schaltet die Interaktion.
   ========================================================================== */

/* ---- Tabs / Segmented Control ------------------------------------------- */
.tabs { display: grid; gap: var(--sp-5); }
.tabs__list {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  border-bottom: 1px solid var(--c-stein-200);
}
.tabs__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .7em .2em; margin-bottom: -1px;
  font-family: var(--font-text); font-weight: 700; font-size: 1.05rem;
  color: var(--c-ink-soft); border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.tabs__tab + .tabs__tab { margin-left: clamp(var(--sp-3), 3vw, var(--sp-6)); }
.tabs__tab .ico { width: 34px; height: 34px; transition: filter var(--t-fast); }
/* Aktives Switch-Tab mit dunkler Füllung (Wasser/Dark) → Icon rein weiß, sonst nicht erkennbar */
.section--wasser .tabs--switch .tabs__tab[aria-selected="true"] .ico,
.section--dark .tabs--switch .tabs__tab[aria-selected="true"] .ico { filter: brightness(0) invert(1); }
.tabs__tab:hover { color: var(--c-tanne-900); }
.tabs__tab[aria-selected="true"] { color: var(--c-tanne-900); border-color: var(--c-brand); }
.tabs__tab:focus-visible { outline: 2px solid var(--c-brand-deep); outline-offset: 3px; }
.tabs__panel { animation: tabIn var(--t-med); }
.js .tabs__panel[hidden] { display: none; }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabs__panel { animation: none; } }
/* Overflow auf Mobil: horizontal scrollbar Tab-Leiste */
@media (max-width: 620px) {
  .tabs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tabs__tab + .tabs__tab { margin-left: var(--sp-4); }
}
/* Switch-Variante: 2–3 Optionen als Pille (z. B. Schwimmteich ⇄ Naturpool) */
.tabs--switch .tabs__list {
  display: inline-flex; gap: 4px; border: 0; padding: 5px;
  background: var(--c-stein-100); border-radius: 999px; width: max-content; max-width: 100%;
}
.tabs--switch .tabs__tab {
  margin: 0; padding: .6em 1.35em; border: 0; border-radius: 999px;
  font-size: 1rem; color: var(--c-ink-soft);
}
.tabs--switch .tabs__tab + .tabs__tab { margin-left: 0; }
.tabs--switch .tabs__tab[aria-selected="true"] {
  color: var(--c-tanne-950); background: var(--c-brand); box-shadow: var(--shadow-1);
}
.section--dark .tabs__list { border-color: var(--c-tanne-700); }
.section--dark .tabs__tab { color: var(--c-stein-200); }
.section--dark .tabs__tab[aria-selected="true"] { color: var(--c-weiss); border-color: var(--c-brand); }
.section--wasser .tabs__tab[aria-selected="true"] { border-color: var(--c-wasser); }
.section--wasser .tabs--switch .tabs__tab[aria-selected="true"] { background: var(--c-wasser); color: var(--c-weiss); }

/* ---- Rich-Accordion (native <details>, optional JS single-open) ---------- */
.accordion { display: grid; gap: var(--sp-3); }
.accordion__item {
  background: var(--c-weiss); border: var(--border); border-radius: 4px 16px 4px 16px;
  overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-med);
}
.accordion__item[open] { border-color: var(--c-tanne-700); box-shadow: var(--shadow-2); }
.accordion__head {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-text); font-weight: 700; color: var(--c-tanne-900);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head .ico { width: 40px; height: 40px; flex-shrink: 0; }
.accordion__head .accordion__hx { flex: 1; }
.accordion__head::after {
  content: ''; flex-shrink: 0; width: 15px; height: 15px;
  background:
    linear-gradient(var(--c-brand-deep), var(--c-brand-deep)) center/100% 2px no-repeat,
    linear-gradient(var(--c-brand-deep), var(--c-brand-deep)) center/2px 100% no-repeat;
  transition: transform var(--t-med);
}
.accordion__item[open] .accordion__head::after { transform: rotate(135deg); }
.accordion__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-ink); }
.accordion__body > * + * { margin-top: var(--sp-3); }
.accordion__body .lead { font-size: var(--fs-body); }
@media (min-width: 620px) { .accordion__body--pad { padding-left: calc(var(--sp-5) + 40px + var(--sp-4)); } }

/* ---- Feature-Grid (Icon-Karten statt Textblock) ------------------------- */
.features { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.features--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .features--3 { grid-template-columns: repeat(3, 1fr); } }
.feature {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--c-weiss); border: var(--border); border-radius: 4px 18px 4px 18px;
  padding: var(--sp-5);
  transition: border-color var(--t-fast), transform var(--t-med), box-shadow var(--t-med);
}
.feature:hover { border-color: var(--c-tanne-700); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.feature .ico { width: 52px; height: 52px; }
.feature h3 { font-size: 1.25rem; }
.feature p { font-size: var(--fs-small); color: var(--c-ink-soft); max-width: none; }
.feature__link { margin-top: auto; }
.feature__link::after { content: ''; position: absolute; inset: 0; } /* ganze Karte klickbar wenn Link vorhanden */
.section--tinted .feature { background: var(--c-weiss); }
.section--dark .feature { background: rgb(255 255 255 / .04); border-color: var(--c-tanne-700); }
.section--dark .feature .ico { filter: invert(1); }
.section--dark .feature p { color: var(--c-stein-200); }

/* ---- Aufklapp-Karten (Disclosure-Grid, native <details>) ---------------- */
.disc { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.disc__item {
  background: var(--c-weiss); border: var(--border); border-radius: 4px 18px 4px 18px;
  overflow: hidden; height: max-content;
  transition: border-color var(--t-fast), box-shadow var(--t-med);
}
.disc__item[open] { border-color: var(--c-brand-deep); box-shadow: var(--shadow-2); grid-row: span 2; }
.disc__head {
  list-style: none; cursor: pointer; display: grid; gap: var(--sp-2);
  padding: var(--sp-5);
}
.disc__head::-webkit-details-marker { display: none; }
.disc__head .ico { width: 46px; height: 46px; }
.disc__head h3 { font-size: 1.2rem; }
.disc__more {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-small); font-weight: 700; color: var(--c-brand-deep); margin-top: var(--sp-1);
}
.disc__more::before { content: 'Mehr erfahren'; }
.disc__item[open] .disc__more::before { content: 'Weniger'; }
.disc__more::after { content: '+'; font-size: 1.2em; line-height: 1; transition: transform var(--t-fast); }
.disc__item[open] .disc__more::after { transform: rotate(45deg); }
.disc__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-ink); }
.disc__body > * + * { margin-top: var(--sp-3); }

/* ---- Spec-/Preis-Karten (statt nackter Tabelle) ------------------------- */
.speccards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.speccard {
  background: var(--c-weiss); border: var(--border); border-radius: 4px 18px 4px 18px;
  padding: var(--sp-5); display: grid; gap: var(--sp-2); align-content: start;
}
.speccard__label { font-weight: 700; color: var(--c-tanne-900); }
.speccard__value {
  font-family: var(--font-display); font-variation-settings: 'opsz' 20; font-weight: 900;
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; color: var(--c-brand-deep);
  letter-spacing: -0.02em;
}
.speccard__note { font-size: var(--fs-small); color: var(--c-ink-soft); }
.section--wasser .speccard__value { color: var(--c-wasser-deep); }
.section--dark .speccard { background: rgb(255 255 255 / .04); border-color: var(--c-tanne-700); }
.section--dark .speccard__value { color: var(--c-brand); }

/* ---- Pillars: nummerierte/ikonisierte Aussagenreihe --------------------- */
.pillars { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: pil; }
.pillar { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 3px solid var(--c-brand); }
.pillar h3 { font-size: 1.2rem; }
.pillar p { font-size: var(--fs-small); color: var(--c-ink-soft); max-width: none; }
.section--dark .pillar p { color: var(--c-stein-200); }

/* ---- Bild-Hotspots (klickbare Punkte → Popover) ------------------------- */
.hotspot { position: relative; border-radius: var(--r-m); overflow: hidden; }
.hotspot > img { width: 100%; display: block; }
.hotspot__pin {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-brand); color: var(--c-tanne-950); box-shadow: 0 0 0 6px rgb(145 192 33 / .25), var(--shadow-2);
  display: grid; place-items: center; font-weight: 900; font-family: var(--font-display);
  z-index: 2; transition: transform var(--t-fast), background var(--t-fast);
  animation: pinPulse 2.6s ease-out infinite;
}
.section--wasser .hotspot__pin, .hotspot--wasser .hotspot__pin { background: var(--c-wasser); color: var(--c-weiss); box-shadow: 0 0 0 6px rgb(51 112 126 / .25), var(--shadow-2); }
.hotspot__pin:hover, .hotspot__pin[aria-expanded="true"] { transform: translate(-50%, -50%) scale(1.12); animation: none; }
@keyframes pinPulse { 0% { box-shadow: 0 0 0 0 rgb(145 192 33 / .5), var(--shadow-2); } 70%, 100% { box-shadow: 0 0 0 14px rgb(145 192 33 / 0), var(--shadow-2); } }
@media (prefers-reduced-motion: reduce) { .hotspot__pin { animation: none; } }
.hotspot__pop {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 3;
  transform: translate(-50%, calc(-100% - 28px));
  width: min(280px, 72vw); background: var(--c-weiss); color: var(--c-ink);
  border-radius: 4px 14px 4px 14px; box-shadow: var(--shadow-2); padding: var(--sp-4);
  font-size: var(--fs-small);
}
.hotspot__pop h4 { font-size: 1.05rem; margin-bottom: 4px; }
.hotspot__pop[hidden] { display: none; }
.hotspot__pop::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--c-weiss); border-bottom: 0; }
/* Ohne JS: Bildunterschrift-Liste sichtbar, Pins als Anker-Marker */
.hotspot__legend { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.js .hotspot__legend { display: none; }
.hotspot__legend li { display: flex; gap: .6em; font-size: var(--fs-small); }
.hotspot__legend b { color: var(--c-brand-deep); }

/* ---- In-Page-Anker-Leiste (lange Seiten) -------------------------------- */
.pagenav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--c-stein-50) 92%, transparent); backdrop-filter: blur(8px); border-bottom: var(--border); }
.pagenav__inner { display: flex; gap: var(--sp-5); overflow-x: auto; scrollbar-width: none; padding-block: var(--sp-3); padding-inline: clamp(1.25rem, 5vw, 6rem); }
/* Links an den fixen Ecken (Logo links, Aktions-Insel rechts) vorbeiführen */
@media (min-width: 1100px) { .pagenav__inner { padding-left: calc(var(--logo-w) + 1.5rem); padding-right: var(--island-safe); } }
.pagenav__inner::-webkit-scrollbar { display: none; }
.pagenav a {
  white-space: nowrap; text-decoration: none; color: var(--c-ink-soft); font-weight: 600; font-size: var(--fs-small);
  padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.pagenav a:hover { color: var(--c-tanne-900); }
.pagenav a.is-current { color: var(--c-tanne-900); border-color: var(--c-brand); }

/* ---- Media-Split mit Beschriftung (Bild + kompakter Textkasten) --------- */
.showcase { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) { .showcase { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } .showcase--rev > :first-child { order: 2; } }
.showcase__media { border-radius: 6px 30px 6px 30px; overflow: hidden; box-shadow: var(--shadow-2); }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Bento-Sprungnavigation (unter Hero + Einleitung) — Fotos in den Kacheln,
   Icons bleiben (weiß per invert), wichtigste Kachel breit + Video-fähig. ---- */
.bento-nav { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .bento-nav { grid-template-columns: repeat(4, 1fr); } }
.bento-nav a {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5);
  min-height: 340px; padding: var(--sp-5) var(--sp-5) var(--sp-5);
  border-radius: 4px 20px 4px 20px; overflow: hidden;
  text-decoration: none; color: var(--c-weiss); font-weight: 800; font-size: 1.22rem; line-height: 1.15;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.bento-nav a .bento__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform var(--t-med);
}
.bento-nav a::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(200deg, rgb(21 29 19 / .35) 0%, rgb(21 29 19 / .62) 55%, rgb(21 29 19 / .82) 100%);
  transition: background var(--t-fast);
}
.bento-nav a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.bento-nav a:hover .bento__bg { transform: scale(1.06); }
.bento-nav a:hover::after { background: linear-gradient(200deg, rgb(21 29 19 / .25) 0%, rgb(51 112 126 / .5) 55%, rgb(21 29 19 / .82) 100%); }
/* Icons rein weiß (brightness(0) invert(1) macht jedes Bild pur weiß) + deutlich größer */
.bento-nav .ico { width: 84px; height: 84px; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgb(21 29 19 / .85)); transition: transform var(--t-med); }
.bento-nav a:hover .ico { transform: scale(1.06) rotate(-3deg); }
.bento-nav a span { display: inline-flex; align-items: center; gap: .45em; text-shadow: 0 1px 10px rgb(21 29 19 / .6); }
.bento-nav a span::after { content: '→'; color: var(--c-brand); transition: transform var(--t-fast); }
.bento-nav a:hover span::after { transform: translateX(4px); }
.bento-nav a.bento--wide { grid-column: span 2; }
.bento-nav a.bento--wide { font-size: 1.5rem; }
.bento-nav a.bento--accent::after { background: linear-gradient(200deg, rgb(40 90 102 / .35) 0%, rgb(21 29 19 / .55) 60%, rgb(21 29 19 / .85) 100%); }
.bento-nav a .bento__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/* ---- Full-Width-Bildband (großflächige Foto-Sektion mit Text darüber) ---- */
.imgband { position: relative; isolation: isolate; display: grid; align-items: center; overflow: hidden; min-height: min(72vh, 660px); }
.imgband > img, .imgband__bg img, .imgband > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.imgband::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(21 29 19 / .82) 0%, rgb(21 29 19 / .5) 45%, rgb(21 29 19 / .12) 100%),
              linear-gradient(0deg, rgb(21 29 19 / .5) 0%, transparent 40%);
}
.imgband__inner { color: var(--c-weiss); padding-block: clamp(3.5rem, 3rem + 6vw, 8rem); max-width: 42rem; }
.imgband .kicker { color: var(--c-brand); }
.imgband :is(h2, h3) { color: var(--c-weiss); text-shadow: 0 2px 22px rgb(21 29 19 / .5); }
.imgband p { color: var(--c-stein-100); text-shadow: 0 1px 10px rgb(21 29 19 / .5); }
.imgband--center { text-align: center; }
.imgband--center .imgband__inner { max-width: 52rem; margin-inline: auto; }
.imgband--center::after { background: linear-gradient(0deg, rgb(21 29 19 / .6), rgb(21 29 19 / .35) 55%, rgb(21 29 19 / .55)); }

/* ---- Buß-Zitat (O-Ton der Inhaber, emotional + fachlich) ---------------- */
.founder-quote { max-width: 56rem; margin-inline: auto; text-align: center; display: grid; gap: var(--sp-4); justify-items: center; }
.founder-quote > .ico { width: 56px; height: 56px; opacity: .9; }
.founder-quote blockquote {
  font-family: var(--font-display); font-variation-settings: 'opsz' 20; font-weight: 900;
  font-size: clamp(1.55rem, 1.05rem + 2.2vw, 2.7rem); line-height: 1.2; color: var(--c-tanne-900);
  letter-spacing: -0.015em; text-wrap: balance; max-width: 22ch;
}
.founder-quote blockquote::before { content: '„'; } .founder-quote blockquote::after { content: '\201C'; }
.founder-quote__cite { display: inline-flex; align-items: center; gap: var(--sp-3); font-style: normal; margin-top: var(--sp-1); }
.founder-quote__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-brand); color: var(--c-tanne-950);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 1.35rem;
  box-shadow: var(--shadow-1);
}
.founder-quote__who { text-align: left; line-height: 1.25; }
.founder-quote__who b { color: var(--c-tanne-900); font-weight: 800; }
.founder-quote__who small { display: block; color: var(--c-ink-soft); font-size: var(--fs-small); }
.section--dark .founder-quote blockquote { color: var(--c-weiss); }
.section--dark .founder-quote__who b { color: var(--c-weiss); }
.section--dark .founder-quote__who small { color: var(--c-stein-200); }
.section--wasser .founder-quote__avatar { background: var(--c-wasser); color: var(--c-weiss); }
/* Zitat als Overlay auf einem Bildband */
.imgband .founder-quote blockquote, .imgband .founder-quote__who b { color: var(--c-weiss); }
.imgband .founder-quote__who small { color: var(--c-stein-100); }

/* ---- Scroll-Scrub-Videohintergrund (Frame-by-Frame auf Canvas, KEIN Pin) --
   Poster = LCP/Fallback (ohne JS, reduced-motion, bis Frames geladen). main.js
   lädt die Frame-Sequenz lazy und zeichnet den zur Scrollposition passenden Frame. */
.scrollvideo__poster, .scrollvideo__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.scrollvideo__canvas { display: none; }
.scrollvideo-ready .scrollvideo__canvas { display: block; }
.scrollvideo-ready .scrollvideo__poster { opacity: 0; transition: opacity .4s ease; }
/* Autoplay-Video im CTA-Hintergrund verhält sich wie .cta-bg (cover) */
video.cta-bg { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .scrollvideo__canvas { display: none !important; } .scrollvideo__poster { opacity: 1 !important; } }

/* ---- Full-Width-Schema/Infografik (edge-to-edge, tap-to-zoom) ----------- */
.schema-full { width: 100vw; margin-left: calc(50% - 50vw); display: block; }
.schema-full a { display: block; cursor: zoom-in; }
.schema-full img { width: 100%; height: auto; display: block; }

/* ---- Checkliste mit Icon-Häkchen (Leistungsumfang) ---------------------- */
.checklist { display: grid; gap: var(--sp-3); }
.checklist--2 { grid-template-columns: 1fr; }
@media (min-width: 680px) { .checklist--2 { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-6); } }
.checklist li { display: flex; gap: .7em; align-items: flex-start; max-width: none; }
.checklist li::before {
  content: ''; flex-shrink: 0; width: 1.4em; height: 1.4em; margin-top: .05em; border-radius: 50%;
  background:
    var(--c-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23151d13' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/70% no-repeat;
}
.section--dark .checklist li { color: var(--c-stein-100); }

/* =========================================================================
   Redesign-Runde 9 (2026-07-16) — neue/überarbeitete Komponenten
   ========================================================================= */

/* ---- Vergleichsgrafik mit Text-/Pfeil-Overlay (Full-Bleed, OHNE Band) ----
   Die PNG bringt ihren dunklen Sockel eingebacken mit; oben ist sie
   freigestellt → Pflanzen/Objekte ragen in den hellen Seitengrund.
   Overlay (SVG-Ebene) faded beim Scrollen gestaffelt ein (.reveal-Hook).
   Titel oben liegen im transparenten Bereich → dunkle Schrift mit hellem
   Halo; Labels unten liegen im eingebackenen Dunkel → weiß mit dunklem Halo. */
.schema-cutaway { width: 100vw; margin-left: calc(50% - 50vw); padding-top: clamp(var(--sp-6), 5vw, var(--sp-8)); }
.schema-cutaway__head { text-align: center; max-width: 60rem; margin: 0 auto var(--sp-6); padding-inline: 5vw; }
.schema-cutaway__head p { color: var(--c-ink-soft); margin-top: var(--sp-2); max-width: 54ch; margin-inline: auto; }
.schema-cutaway__frame { position: relative; width: 100%; }
.schema-cutaway__frame > a { display: block; cursor: zoom-in; }
.schema-cutaway__frame img { width: 100%; height: auto; display: block; }
.schema-cutaway__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* Fade-in: Observer (main.js) setzt .is-visible; nur die Kinder faden gestaffelt */
.js .schema-cutaway__svg.reveal { opacity: 1; transform: none; }
.js .schema-cutaway__svg > * { opacity: 0; transition: opacity .8s ease, transform .8s ease; transform: translateY(10px); }
.js .schema-cutaway__svg.is-visible > * { opacity: 1; transform: none; }
.js .schema-cutaway__svg.is-visible > :nth-child(2) { transition-delay: .05s }
.js .schema-cutaway__svg.is-visible > :nth-child(3) { transition-delay: .1s }
.js .schema-cutaway__svg.is-visible > :nth-child(4) { transition-delay: .15s }
.js .schema-cutaway__svg.is-visible > :nth-child(5) { transition-delay: .2s }
.js .schema-cutaway__svg.is-visible > :nth-child(6) { transition-delay: .35s }
.js .schema-cutaway__svg.is-visible > :nth-child(7) { transition-delay: .4s }
.js .schema-cutaway__svg.is-visible > :nth-child(8) { transition-delay: .5s }
.js .schema-cutaway__svg.is-visible > :nth-child(9) { transition-delay: .55s }
.js .schema-cutaway__svg.is-visible > :nth-child(10) { transition-delay: .65s }
.js .schema-cutaway__svg.is-visible > :nth-child(11) { transition-delay: .7s }
.js .schema-cutaway__svg.is-visible > :nth-child(12) { transition-delay: .8s }
.js .schema-cutaway__svg.is-visible > :nth-child(13) { transition-delay: .85s }
.js .schema-cutaway__svg.is-visible > :nth-child(14) { transition-delay: .95s }
.js .schema-cutaway__svg.is-visible > :nth-child(15) { transition-delay: 1s }
@media (prefers-reduced-motion: reduce) { .js .schema-cutaway__svg > * { opacity: 1; transform: none; transition: none; } }
/* Labels unten: weiß + dunkler Halo (liegen im eingebackenen dunklen Sockel) */
.schema-cutaway__svg text { font-family: var(--font-text); fill: #fff; paint-order: stroke; stroke: rgb(8 12 7 / .82); stroke-width: 6; stroke-linejoin: round; }
/* Titel oben: dunkle Schrift + heller Halo (transparenter Bereich → Seitengrund) */
.schema-cutaway__svg .sc-title { font-family: var(--font-display); font-weight: 900; font-size: 52px; letter-spacing: -.01em; fill: var(--c-tanne-900); stroke: rgb(247 246 241 / .85); }
.schema-cutaway__svg .sc-sub { font-size: 22px; font-weight: 700; fill: var(--c-brand-deep); stroke: rgb(247 246 241 / .85); stroke-width: 5; }
.schema-cutaway__svg .sc-label { font-size: 27px; font-weight: 800; }
.schema-cutaway__svg .sc-line { stroke: #fff; stroke-width: 2.5; opacity: .95; fill: none; }
.schema-cutaway__svg .sc-dot { fill: var(--c-brand); stroke: #fff; stroke-width: 2.5; }
.schema-cutaway__legend { display: none; }
@media (max-width: 767px) {
  .schema-cutaway__svg { display: none; }
  .schema-cutaway__legend { display: grid; gap: var(--sp-5); width: 90%; margin: var(--sp-5) auto 0; }
  .schema-cutaway__legend h4 { color: var(--c-brand-deep); font-family: var(--font-text); font-weight: 800; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-2); }
  .schema-cutaway__legend ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
  .schema-cutaway__legend li { color: var(--c-ink-soft); font-size: var(--fs-small); }
  .schema-cutaway__legend b { color: var(--c-tanne-900); }
}

/* ---- Medien-Overlay-Panel (Bild vollflächig, Text als Overlay) -----------
   Ersetzt das nebeneinander stehende showcase in Umschalt-Panels; beide
   Tabs gleiches Layout (kein Ausrichtungswechsel). ------------------------- */
.mediaover { position: relative; isolation: isolate; border-radius: 4px 26px 4px 26px; overflow: hidden; min-height: clamp(340px, 42vw, 520px); display: grid; align-items: end; }
.mediaover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mediaover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(21 29 19 / .92) 0%, rgb(21 29 19 / .55) 45%, rgb(21 29 19 / .1) 100%); }
.mediaover__inner { padding: clamp(var(--sp-4), 3vw, var(--sp-6)); max-width: 46rem; color: var(--c-weiss); }
.mediaover__inner h3 { color: var(--c-weiss); text-shadow: 0 2px 22px rgb(21 29 19 / .6); }
.mediaover__inner p { color: var(--c-stein-100); text-shadow: 0 1px 12px rgb(21 29 19 / .7); }
.mediaover__inner p + p { margin-top: var(--sp-3); }

/* ---- Vergleichsraster: schmaler, 4 pro Zeile, letzte Kachel = dunkle CTA -- */
.features--cmp { max-width: 74rem; margin-inline: auto; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
@media (min-width: 520px) { .features--cmp { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .features--cmp { grid-template-columns: repeat(4, 1fr); } }
.features--cmp .feature { padding: var(--sp-4); }
.features--cmp .feature h3 { font-size: 1.1rem; }
.features--cmp .feature .ico { width: 44px; height: 44px; }
/* CTA-Kachel: hohe Spezifität nötig, sonst gewinnt `.section--tinted .feature { background: weiß }` */
.feature.feature--cta, .section--tinted .feature.feature--cta, .section--dark .feature.feature--cta {
  background: var(--c-tanne-950); border-color: var(--c-tanne-900);
  justify-content: center; align-items: flex-start; gap: var(--sp-2);
  text-decoration: none;
}
.feature--cta:hover { border-color: var(--c-brand); }
.feature--cta .ico { width: 40px; height: 40px; filter: brightness(0) invert(1); }
.feature--cta h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: var(--c-weiss); text-decoration: none; }
.feature--cta p { color: var(--c-stein-200); text-decoration: none; }
.feature--cta .btn { margin-top: var(--sp-2); align-self: stretch; text-align: center; }
.section--wasser .feature--cta:hover { border-color: var(--c-wasser); }

/* ---- Partner-Verweis (zentriert, Text unter Logo, ausgegraut bis Hover) --- */
.trust-partner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.trust-partner img { max-height: 54px; width: auto; filter: grayscale(1) opacity(.5); transition: filter var(--t-med), transform var(--t-med); }
.trust-partner:hover img, .trust-partner:focus-within img { filter: grayscale(0) opacity(1); transform: scale(1.05); }
.trust-partner span { font-size: var(--fs-small); color: var(--c-ink-soft); max-width: 36ch; }

/* ---- Zwei-Themen-Karten: Bild als Card-Hintergrund + Gradient-Overlay ----- */
.duo { display: grid; gap: var(--sp-5); }
@media (min-width: 820px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.duo__card {
  position: relative; isolation: isolate; display: grid; align-items: end;
  min-height: clamp(320px, 34vw, 440px);
  border-radius: 4px 26px 4px 26px; overflow: hidden;
}
.duo__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--t-slow); }
.duo__card:hover > img { transform: scale(1.05); }
.duo__card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(21 29 19 / .92) 0%, rgb(21 29 19 / .55) 45%, rgb(21 29 19 / .08) 100%);
}
.duo__body { padding: clamp(var(--sp-4), 3vw, var(--sp-5)); display: grid; gap: var(--sp-2); align-content: end; }
.duo__body .kicker { color: var(--c-brand); }
.duo__body h2, .duo__body h3 { font-size: var(--fs-h3); color: var(--c-weiss); text-shadow: 0 2px 18px rgb(21 29 19 / .6); }
.duo__body p { color: var(--c-stein-100); text-shadow: 0 1px 10px rgb(21 29 19 / .65); font-size: var(--fs-small); }
.duo__body p a { color: var(--c-brand); }

/* ---- Ablauf als horizontale Karten-Schiene (nativer Horizontal-Scroll) ----
   Cards ~35vw, mit Bild; letzte Card = schmalere dunkle CTA-Card. Drag-Scroll
   via main.js (.flowrail__track). Full-bleed Schiene. ---------------------- */
.flowrail { margin-top: var(--sp-6); width: 100vw; margin-left: calc(50% - 50vw); }
.flowrail__track {
  display: flex; gap: var(--sp-4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 5vw;
  padding: var(--sp-2) 5vw var(--sp-3); cursor: grab;
  scrollbar-width: none; /* Pfeil-Navigation statt Scrollbar */
}
.flowrail__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.flowrail__track::-webkit-scrollbar { display: none; }
.flowrail__track img { -webkit-user-drag: none; user-select: none; }
/* Pfeil-Navigation (per JS injiziert), rechtsbündig */
.flowrail__nav { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-2) 5vw 0; }
.flowrail__btn {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-brand); border: 0; cursor: pointer;
  transition: background var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
.flowrail__btn::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px;
  border-top: 3px solid var(--c-tanne-950); border-right: 3px solid var(--c-tanne-950);
}
.flowrail__btn--prev::before { transform: translate(-32%, -50%) rotate(-135deg); }
.flowrail__btn--next::before { transform: translate(-68%, -50%) rotate(45deg); }
.flowrail__btn:hover:not(:disabled) { background: var(--c-brand-deep); transform: scale(1.06); }
.flowrail__btn:hover:not(:disabled)::before { border-color: var(--c-weiss); }
.flowrail__btn:disabled { opacity: .3; cursor: default; }
.flowrail__btn:focus-visible { outline: 2px solid var(--c-brand-deep); outline-offset: 3px; }
.flowrail__card {
  flex: 0 0 82%; scroll-snap-align: start; position: relative;
  display: grid; grid-template-rows: auto 1fr; background: var(--c-weiss);
  border: var(--border); border-radius: 4px 26px 4px 26px; overflow: hidden;
}
@media (min-width: 720px) { .flowrail__card { flex-basis: min(35vw, 470px); } }
.flowrail__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-stein-100); }
.flowrail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flowrail__num {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-brand); color: var(--c-tanne-950);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
  box-shadow: var(--shadow-2);
}
.flowrail__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
.flowrail__body h3 { font-size: var(--fs-h3); color: var(--c-tanne-900); }
.flowrail__body p { color: var(--c-ink-soft); font-size: 1.0625rem; }
.flowrail__body p a { color: var(--c-brand-deep); }
.flowrail__card--cta { background: var(--c-tanne-950); border-color: var(--c-tanne-900); grid-template-rows: 1fr; }
@media (min-width: 720px) { .flowrail__card--cta { flex-basis: min(25vw, 330px); } }
.flowrail__card--cta .flowrail__body { place-content: center; gap: var(--sp-4); }
.flowrail__card--cta h3 { color: var(--c-weiss); font-family: var(--font-display); font-weight: 900; }
.flowrail__card--cta p { color: var(--c-stein-200); }
.flowrail__card--cta .ico { width: 48px; height: 48px; filter: brightness(0) invert(1); }
.section--wasser .flowrail__num { background: var(--c-wasser); color: var(--c-weiss); }

/* ---- Bild-Karte (Foto als Card-Hintergrund + Gradient, Content unten) ----
   Kompakte Alternative zu .card, wenn Karten sonst zu hoch werden. --------- */
.imgcards { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .imgcards { grid-template-columns: repeat(3, 1fr); } }
.imgcard {
  position: relative; isolation: isolate; display: grid; align-items: end;
  min-height: clamp(280px, 30vw, 400px);
  border-radius: 4px 22px 4px 22px; overflow: hidden; text-decoration: none;
}
.imgcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--t-slow); }
.imgcard:hover > img { transform: scale(1.05); }
.imgcard::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(21 29 19 / .9) 0%, rgb(21 29 19 / .45) 45%, rgb(21 29 19 / .05) 100%);
}
.imgcard__body { padding: var(--sp-4); display: grid; gap: var(--sp-1); }
.imgcard__meta { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-small); font-weight: 700; color: var(--c-brand); }
.imgcard__meta .icon { width: 1em; height: 1em; }
.imgcard__body h3 { font-size: 1.3rem; line-height: 1.2; color: var(--c-weiss); text-shadow: 0 2px 16px rgb(21 29 19 / .6); }
.imgcard__body h3 a { color: var(--c-weiss); text-decoration: none; }
.imgcard__body h3 a::after { content: ''; position: absolute; inset: 0; } /* ganze Karte klickbar */
.imgcard__body p { color: var(--c-stein-100); font-size: var(--fs-small); text-shadow: 0 1px 8px rgb(21 29 19 / .65); }

/* ---- Artikel-Info-Band (Ratgeber): Breadcrumbs + Datum + Autor in EINEM
   weißen Band unterm Hero, mit Separatoren — Muster Trustbar --------------- */
.article-bar { background: var(--c-weiss); border-bottom: var(--border); }
.article-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.1em;
  padding-block: var(--sp-3); font-size: var(--fs-small); color: var(--c-ink-soft);
}
.article-bar .breadcrumbs { padding-block: 0; }
.article-bar__item { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.article-bar__item .ico { width: 1.25em; height: 1.25em; }
.article-bar__item b { color: var(--c-tanne-900); font-weight: 700; }
/* vertikale Trenner zwischen den Blöcken (nur wenn nebeneinander) */
@media (min-width: 720px) {
  .article-bar__inner > * + *::before {
    content: ''; display: inline-block; width: 1px; height: 1.1em;
    background: var(--c-stein-200); margin-right: 1.1em; vertical-align: -.2em;
  }
  .article-bar__inner > .breadcrumbs + *::before { margin-right: 1.1em; }
}

/* ---- Text + Tabelle nebeneinander (Tabellen nicht mehr full-width) ------- */
.tablesplit { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 940px) { .tablesplit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-7); } }
.tablesplit__text > * + * { margin-top: var(--sp-4); }
.tablesplit__table table { width: 100%; }
/* Tabellen allein (ohne Textpartner): auf Lesebreite begrenzen statt 90 % */
.table-solo { max-width: 62rem; margin-inline: auto; }

/* ---- Ratgeber-Übersichtskarten: gestapelt, begrenzte Breite, Bild links --- */
.rg-list { display: grid; gap: var(--sp-5); max-width: 62rem; margin-inline: auto; }
.rg-card {
  display: grid; background: var(--c-weiss); border: var(--border);
  border-radius: 4px 26px 4px 26px; overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med);
}
.rg-card:hover { border-color: var(--c-tanne-700); box-shadow: var(--shadow-2); transform: translateY(-3px); }
@media (min-width: 760px) { .rg-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rg-card__media { position: relative; overflow: hidden; min-height: 220px; }
@media (max-width: 759px) { .rg-card__media { aspect-ratio: 16 / 9; } }
.rg-card__media img {
  position: absolute; left: 0; top: -9%; width: 100%; height: 118%;
  object-fit: cover; display: block; will-change: transform;
}
.rg-card__body { padding: clamp(var(--sp-4), 3vw, var(--sp-5)); display: grid; gap: var(--sp-3); align-content: start; }
.rg-card__body h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); line-height: 1.18; color: var(--c-tanne-900); }
.rg-card__topics { display: grid; gap: var(--sp-2); }
.rg-card__topics li { display: flex; align-items: flex-start; gap: .55em; font-size: var(--fs-small); color: var(--c-ink-soft); max-width: none; }
.rg-card__topics .ico { width: 1.35em; height: 1.35em; flex-shrink: 0; margin-top: .05em; }
.rg-card__body .btn { justify-self: start; margin-top: var(--sp-1); }

/* ---- Footer-Partner: kein Kasten, Karussell (1 Logo, Autoplay-Crossfade) -- */
.partner-carousel { position: relative; height: 64px; margin-top: var(--sp-2); }
.partner-carousel__item {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.partner-carousel__item.is-active { opacity: 1; pointer-events: auto; }
.partner-carousel__item img {
  max-height: 44px; max-width: 200px; width: auto;
  filter: grayscale(1) brightness(1.6) opacity(.65);
  transition: filter var(--t-med);
}
.partner-carousel__item:hover img { filter: grayscale(0) brightness(1) opacity(1); }
@media (prefers-reduced-motion: reduce) { .partner-carousel__item { transition: none; } }
.site-footer__partner-note { font-size: 0.8125rem; color: var(--c-stein-200); opacity: .8; margin-top: var(--sp-3); max-width: 26ch; }

/* ---- Referenz-Übersichtsraster (Karten, gruppiert nach Kategorie) -------- */
.refgrid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .refgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .refgrid { grid-template-columns: repeat(3, 1fr); } }
.refgrid__group { grid-column: 1 / -1; margin: var(--sp-4) 0 0; font-size: var(--fs-h3); color: var(--c-tanne-900); }
.refgrid__group:first-child { margin-top: 0; }
.refgrid .card__meta { color: var(--c-brand-deep); font-weight: 600; }
.refgrid .card__meta .ico { width: 1.15em; height: 1.15em; margin-right: .15em; }
.refgrid .card__body h3 { font-size: 1.22rem; line-height: 1.2; hyphens: auto; overflow-wrap: break-word; }