/* ==================================================================
   OPTIMIERUNGSDURCHLAUF 1 — Overrides zu site.css
   (site.css bleibt unverändert; hier nur Responsive/Conversion-Feinschliff)
   ================================================================== */

/* ---------- 1) Header / Navigation ---------- */
/* Desktop-Nav erst ab 1024px, darunter kompakter Header mit Menü-Button */
@media (max-width: 63.99rem) {
  .main-nav { display: none !important; }
  .chip-nav { display: none !important; }
}
@media (min-width: 64rem) {
  .nav-toggle { display: none !important; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .site-header .bar { gap: 10px; }
}

.site-header .bar { flex-wrap: nowrap; min-width: 0; }
.brand-lockup { flex: 0 1 auto; }
.brand-lockup .brand { flex: none; }
.brand-lockup .brand img { flex: none; }
.brand-partner { max-width: 100%; object-fit: contain; }
@media (max-width: 25rem) {
  .brand img { width: 68px; }
  .brand-lockup { gap: 6px; }
  .brand-partner { height: clamp(18px, 6vw, 24px); }
  .site-header .bar { gap: 8px; }
}
/* Sehr schmale Viewports: CTA kompakter, damit DMF- und Partnerlogo,
   CTA und Menü-Button ohne Überlappung nebeneinander passen. */
@media (max-width: 29.99rem) {
  .brand img { width: 64px; }
  .brand-lockup { gap: 6px; }
  .brand-partner { height: 20px; }
  .site-header .bar { gap: 8px; }
  .header-cta .btn { font-size: .74rem; padding: .5rem .7rem; gap: .3rem; }
  .header-cta .btn .btn-ico,
  .header-cta .btn .btn-arrow { display: none; }
}
@media (max-width: 24rem) {
  .brand img { width: 56px; }
  .brand-partner { height: 17px; }
  .site-header .bar { gap: 6px; }
  .header-cta .btn { font-size: .68rem; padding: .45rem .55rem; }
}
.header-cta { flex: 0 0 auto; }
.header-cta .btn { white-space: nowrap; }

.nav-toggle {
  flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--c-gray-soft); }
.nav-toggle-ico { display: grid; gap: 4px; width: 20px; }
.nav-toggle-ico span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--c-heading);
  transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.nav-toggle-ico.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle-ico.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle-ico.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: grid; gap: 4px;
  margin-top: 8px; padding: 10px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(40,60,20,.16);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  display: flex; align-items: center;
  min-height: 48px; padding: 10px 14px;
  border-radius: 12px;
  font-size: var(--t-body); font-weight: 700; text-decoration: none;
  color: var(--c-text-soft);
}
.mobile-nav a:hover { background: var(--c-gray-soft); color: var(--c-heading); }
.mobile-nav a.active { background: var(--c-accent); color: var(--c-accent-deep); }

/* Kein horizontaler Overflow 320–1023px */
html, body { overflow-x: hidden; max-width: 100%; }

/* Anker-Offset zum Sticky-Header (Chip-Nav entfällt) */
section, [id] { scroll-margin-top: 88px; }
@media (min-width: 64rem) { section, [id] { scroll-margin-top: 80px; } }

/* ---------- 2) Hero-Reihenfolge: Text → Funnel → Sparten ---------- */
.hero-sparten-wrap { min-width: 0; }
@media (min-width: 66rem) {
  .hero-grid { grid-template-areas: "copy funnel" "cards funnel"; grid-template-rows: auto 1fr; align-items: stretch; }
  .hero-grid .hero-copy { grid-area: copy; min-width: 0; align-self: start; }
  .hero-grid .hero-sparten-wrap { grid-area: cards; align-self: start; }
  .hero-grid .bezel { grid-area: funnel; position: static; align-self: end; }
}

/* ---------- 3) Funnel kompakter, Schritt 1 zweispaltig ---------- */
@media (min-width: 64rem) {
  .funnel-card { padding: 20px 22px; }
  .funnel-card .funnel-head { margin-bottom: 10px; }
  .funnel-card .field { margin-bottom: 12px; }
  .funnel-card .multi-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .funnel-card .multi-inline-option { min-height: 44px; padding: 9px 12px; font-size: 14.5px; }
  .funnel-card .funnel-steps { min-height: 0; }
  .funnel-card h3 { font-size: var(--t-lg); }
}
.multi-inline-option { min-width: 0; }
.multi-inline-option span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* Aktionszone innerhalb der Karte sticky (lange Listen) */
.funnel-card .funnel-nav {
  position: sticky; bottom: -2px; z-index: 2;
  margin-top: 12px; padding-top: 10px;
  background: linear-gradient(180deg, rgba(30,30,30,0), #1e1e1e 34%);
}
.funnel.is-done .funnel-nav { position: static; }

/* Inline-Validierung */
.funnel-card .funnel-msg { margin-top: 10px; }
.field-error {
  display: block; margin-top: 6px;
  font-size: var(--t-sm); font-weight: 700; color: #ffb4b3;
}

/* ---------- 5) Karten-Responsive ---------- */
.prod-bento { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .prod-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .prod-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prod-card { min-width: 0; height: auto; }
.prod-card h3, .prod-card p { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.prod-price { min-height: 48px; }

.hero-sparten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 22.5rem) {
  .hero-sparten { grid-template-columns: minmax(0, 1fr); }
}
.sparte-card { min-height: 44px; }
.sparte-card b, .sparte-card span { min-width: 0; overflow-wrap: break-word; }

/* Hover ist nur Ergänzung: Fokuszustand immer sichtbar */
.sparte-card:focus-visible,
.prod-price:focus-visible,
.mobile-nav a:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
}

/* ==================================================================
   OPTIMIERUNGSDURCHLAUF 2 — visuelle Politur (rein additiv)
   ================================================================== */

/* ---------- Hero-Lesbarkeit: heller Scrim links über dem Foto ---------- */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(252, 253, 249, 0.94) 0%,
    rgba(252, 253, 249, 0.86) 34%,
    rgba(252, 253, 249, 0.52) 58%,
    rgba(252, 253, 249, 0) 82%
  );
}
@media (max-width: 65.99rem) {
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(252, 253, 249, 0.94) 0%,
      rgba(252, 253, 249, 0.86) 45%,
      rgba(252, 253, 249, 0.62) 100%
    );
  }
}
.hero > .shell { position: relative; z-index: 1; }

/* ---------- Konsistentes Radien-/Schatten-System ---------- */
:root {
  --o-r-sm: 10px;
  --o-r-md: 14px;
  --o-r-lg: 18px;
  --o-shadow-1: 0 1px 2px rgba(20, 30, 10, .05), 0 8px 20px -12px rgba(20, 30, 10, .18);
  --o-shadow-2: 0 2px 6px rgba(20, 30, 10, .06), 0 18px 36px -20px rgba(20, 30, 10, .22);
}
.prod-card, .feat-card, .b-card, .sparte-card, .quote, .mobile-nav, .bezel {
  border-radius: var(--o-r-lg);
}
.prod-card, .feat-card, .b-card, .sparte-card, .quote { box-shadow: var(--o-shadow-1); }
.prod-card:hover, .feat-card:hover, .b-card:hover, .sparte-card:hover {
  box-shadow: var(--o-shadow-2);
  transform: translateY(-3px);
}
.mobile-nav { border-radius: var(--o-r-lg); box-shadow: var(--o-shadow-2); }
.prod-price, .nav-toggle, .btn { border-radius: 999px; }

/* ---------- Funnel ruhiger: Muster, Kante und Schatten dezenter ---------- */
.bezel { box-shadow: var(--o-shadow-2); border-color: rgba(255, 255, 255, .5); }
.funnel-card {
  background-image:
    linear-gradient(135deg, #212121 25%, transparent 25%),
    linear-gradient(225deg, #212121 25%, transparent 25%),
    linear-gradient(45deg, #212121 25%, transparent 25%),
    linear-gradient(315deg, #212121 25%, transparent 25%);
  border-color: rgba(255, 255, 255, .09);
  border-radius: var(--o-r-lg);
  box-shadow: none;
}
/* Box-in-Box: eine einheitliche Innenkante */
.funnel-card .field input,
.funnel-card .field select,
.funnel-card .field textarea,
.funnel-card .multi-dropdown-toggle,
.funnel-card .multi-inline-option,
.funnel-card .aud-toggle,
.funnel-card .funnel-chip {
  border-color: rgba(255, 255, 255, .14);
  border-radius: var(--o-r-md);
}
.funnel-card .aud-toggle { border-radius: 999px; }
/* Sekundärtexte gut lesbar halten */
.funnel-card .funnel-head .meta,
.funnel-card .step-sub,
.funnel-card .field-hint,
.funnel-card .consent,
.funnel-card .progress-label { color: #fff; }
/* Fokus- und Fehlerzustände bleiben unverändert kräftig */
.funnel-card .field input:focus,
.funnel-card .field select:focus,
.funnel-card .field textarea:focus,
.funnel-card .multi-dropdown-toggle:focus-visible,
.funnel-card .multi-inline-option:focus-within {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 1px;
}
.funnel-card .is-invalid { border-color: #ffb4b3 !important; }

/* ---------- Sparten-Icons (Inline-SVG statt Emoji-PNG) ---------- */
.sparte-ico { width: 40px; height: 40px; }
.sparte-svg {
  width: 40px; height: 40px; display: block;
  fill: none;
  stroke: var(--c-accent-strong, #79970f);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparte-card:hover .sparte-svg { stroke: var(--c-heading); }

/* ---------- Hinweis unter dem Produktraster ---------- */
.prod-note {
  max-width: 68ch;
  margin: 14px auto 0;
  text-align: center;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-text-soft);
}

/* Lange Produkttitel sauber trennen statt hart abbrechen */
.prod-card h3 { overflow-wrap: break-word; hyphens: auto; min-width: 0; }

/* ===== Compliance-Überarbeitung: entfallene Blöcke & neue Elemente ===== */
.prod-cta { justify-content: center; gap: .5rem; }
.prod-cta strong { font-size: 1rem; }
.funnel-legal {
  margin: 0 0 .9rem;
  padding: .75rem .85rem;
  border: 1px solid var(--o-border, rgba(255,255,255,.14));
  border-radius: 12px;
  font-size: .82rem;
  line-height: 1.45;
  color: #fff;
}
.funnel-legal p { margin: 0 0 .5rem; }
.funnel-legal p:last-child { margin-bottom: 0; }
.funnel-legal p, .funnel-legal a { color: #fff; }
/* Kontaktabschnitt ohne Karte: einspaltig zentriert */
.praesenz .praesenz-copy { max-width: 720px; margin-inline: auto; }

/* Hero-H1 nicht mitten im Wort brechen */
.hero h1 { hyphens: auto; word-break: normal; }
@media (min-width: 1024px) { .hero h1 { font-size: clamp(2.2rem, 3.3vw, 3rem); } }
.prod-card h3 { word-break: normal; overflow-wrap: normal; hyphens: auto; }

/* ==================================================================
   Fix: Hero-Clipping auf schmalen Viewports (320–767px)
   Ursache: min-content-Breite der Hero-Trust-Bullets (nowrap) blähte
   die Grid-Spalte über die Shell-Breite hinaus auf.
   ================================================================== */
.hero-grid > * { min-width: 0; width: 100%; max-width: 100%; }
.hero-copy,
.hero-sparten-wrap,
.bezel,
.funnel-card,
.aud-toggle { min-width: 0; max-width: 100%; }
.funnel-card .funnel,
.funnel-card .funnel-steps,
.funnel-card .funnel-step { min-width: 0; max-width: 100%; }
.aud-toggle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.aud-toggle button { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 65.99rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 39.99rem) {
  .hero-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-trust span { white-space: normal; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
}
@media (max-width: 24rem) {
  .hero-trust { grid-template-columns: minmax(0, 1fr); }
  .aud-toggle button { font-size: .78rem; }
}

/* ==================================================================
   OPTIMIERUNGSDURCHLAUF 3 — Tablet-Sparten, Kontaktblock, Footer
   ================================================================== */

/* ---------- 1) Sparten-Karten füllen die Tablet-Breite ---------- */
.hero-sparten { max-width: 540px; }
@media (min-width: 40rem) and (max-width: 65.99rem) {
  .hero-sparten { max-width: none; gap: 14px; }
  .sparte-card { padding: 18px 20px; gap: 9px; }
  .sparte-card span { line-height: 1.5; }
}

/* ---------- 2) Hintergrund-Frame hinter dem Sparten-Block ---------- */
.hero-sparten-wrap {
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--o-r-lg);
  box-shadow: var(--o-shadow-1);
  padding: 16px;
  backdrop-filter: blur(6px);
}
.hero-sparten-wrap .hero-sparten { margin-top: 0; }
@media (min-width: 40rem) {
  .hero-sparten-wrap { padding: 20px; }
}
@media (max-width: 25rem) {
  .hero-sparten-wrap { padding: 12px; }
}

/* ---------- 3) Kontaktblock auf allen Viewports zentrieren ---------- */
  .praesenz .praesenz-copy {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 4px;
    padding-inline: 4px;
  }
  .praesenz .praesenz-copy .eyebrow { margin: 0 0 10px; }
  .praesenz .praesenz-copy h2 { margin-bottom: 12px; }
  .praesenz .praesenz-copy .sub {
    max-width: 46ch;
    margin: 0 auto 18px;
  }
  .praesenz .praesenz-copy .card-text {
    margin: 0 0 20px;
    line-height: 1.9;
  }
  .praesenz .praesenz-copy .btn { margin-inline: auto; }

/* ---------- 4) Footer aufgeräumt ---------- */
.site-footer .row { gap: var(--s-3); }
.footer-co { gap: 6px; line-height: 1.6; max-width: 62ch; }
.footer-links { gap: 4px var(--s-3); align-items: center; }
.footer-links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;
}
.footer-copy {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(20, 30, 10, .1);
  text-align: center;
}
@media (min-width: 64rem) {
  .site-footer .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-4);
  }
  .footer-links { justify-content: flex-end; flex-wrap: nowrap; }
  .footer-copy { text-align: left; }
}
@media (max-width: 63.99rem) {
  .footer-co { justify-items: center; }
  .footer-links { justify-content: center; }
}

/* ---------- 5) Hintergrund-Panel für den Ablauf-Abschnitt ---------- */
.prozess-panel {
  position: relative;
  margin-top: clamp(48px, 7vw, 88px);
  margin-bottom: clamp(24px, 4vw, 48px);
  padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 40px);
  border: 1px solid var(--c-border);
  border-radius: var(--o-r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(162, 198, 23, .12) 0%, rgba(162, 198, 23, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(252, 253, 249, .86) 100%);
  box-shadow: var(--o-shadow-1);
  overflow: hidden;
}
.prozess-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 30, 10, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 30, 10, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
}
.prozess-panel > * { position: relative; z-index: 1; }
.prozess-panel .prozess-head { margin-top: 0; }

/* ==================================================================
   KONTAKT-SEKTION v2 — „Display-Case"-Panel (Redesign 2026-07-31)
   Sektion läuft jetzt als dunkles Band (band-dark band-stripes) im
   Wechselrhythmus der Seite. Die Vitrinen-Sprache der Standorte-Karte
   (Lime-Brackets, Glow, Punktraster) trägt auch die Ansprechpartner-
   Karten; Kontaktdaten als Action-Rows statt nackter Links.
   ================================================================== */

/* ---------- Copy im dunklen Band ---------- */
.praesenz .praesenz-copy .sub { color: var(--c-dark-text); }
.praesenz .praesenz-sub-head { margin-top: 0; }

/* ---------- Zeile 1: Copy links, Karte rechts ---------- */
.praesenz .praesenz-grid {
  max-width: 100%;
  margin-bottom: 0;
}
.praesenz .praesenz-grid > * { min-width: 0; max-width: 100%; }
@media (min-width: 60rem) {
  .praesenz .praesenz-grid { grid-template-columns: 1.06fr 0.94fr; }
}
.praesenz .praesenz-grid .praesenz-copy {
  text-align: left;
  justify-items: start;
  max-width: none;
  margin-inline: 0;
}
.praesenz .praesenz-grid .praesenz-copy .sub {
  margin-inline: 0;
  max-width: 54ch;
}
@media (max-width: 59.99rem) {
  .praesenz .praesenz-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .praesenz .praesenz-grid .praesenz-copy { text-align: center; justify-items: center; }
  .praesenz .praesenz-grid .praesenz-copy .sub { margin-inline: auto; }
}

/* ---------- Standorte-Karte: Vitrine verfeinert ---------- */
.praesenz .mapcase { max-width: min(460px, 100%); }
.praesenz .mapcase::after { animation: hqBreath 5.5s ease-in-out infinite alternate; }
@keyframes hqBreath {
  from { opacity: .55; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.05); }
}
.praesenz .mapcase .bracket {
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
@media (hover: hover) {
  .praesenz .mapcase:hover .bracket.tl { transform: translate(-3px, -3px); }
  .praesenz .mapcase:hover .bracket.tr { transform: translate(3px, -3px); }
  .praesenz .mapcase:hover .bracket.bl { transform: translate(-3px, 3px); }
  .praesenz .mapcase:hover .bracket.br { transform: translate(3px, 3px); }
  .praesenz .mapcase:hover .bracket { border-color: rgba(201, 227, 92, .95); }
}
.praesenz .mapcase-chip { display: inline-flex; align-items: center; }
.praesenz .chip-dot {
  display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 999px; background: #c9e35c;
  animation: hqPing 2.4s var(--ease) infinite;
}
@keyframes hqPing {
  0%   { box-shadow: 0 0 0 0 rgba(201, 227, 92, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(201, 227, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 227, 92, 0); }
}
.praesenz .mapcase-cap {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px;
  text-align: center; font-size: .72rem; line-height: 1.35;
  color: rgba(233, 241, 214, .72);
}

/* ---------- Divider: Lime-Glow-Linie mit Knoten ---------- */
.praesenz .hq-divider {
  position: relative; height: 1px;
  max-width: 720px;
  margin: clamp(40px, 6vw, 68px) auto clamp(30px, 4.5vw, 52px);
  background: linear-gradient(90deg, transparent, rgba(162, 198, 23, .5) 28%, rgba(162, 198, 23, .5) 72%, transparent);
}
.praesenz .hq-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #141414;
  border: 1px solid rgba(162, 198, 23, .75);
  box-shadow: 0 0 12px rgba(162, 198, 23, .5);
}

/* ---------- Ansprechpartner: Vitrinen-Karten ---------- */
.praesenz .pc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  max-width: 1020px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}
@media (min-width: 48rem) {
  .praesenz .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.praesenz .pc-card {
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  transition: transform var(--dur-2) var(--ease);
}
@media (hover: hover) {
  .praesenz .pc-card:hover { transform: translateY(-5px); }
  .praesenz .pc-card:hover .pc-photo { transform: scale(1.04); }
  .praesenz .pc-card:hover .pc-media {
    border-color: rgba(162, 198, 23, .55);
    box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .9), 0 0 44px rgba(162, 198, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

/* Foto-Vitrine: gleiche Materialsprache wie .mapcase */
.praesenz .pc-media {
  position: relative; width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 110% at 18% -5%, rgba(162, 198, 23, .34), transparent 58%),
    linear-gradient(165deg, #1c2116 0%, #0f130f 72%);
  border: 1px solid rgba(162, 198, 23, .32);
  box-shadow: 0 26px 64px -30px rgba(0, 0, 0, .85), 0 0 34px rgba(162, 198, 23, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.praesenz .pc-media::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .15;
  background: radial-gradient(circle, rgba(162, 198, 23, .9) 1.2px, transparent 1.5px) 0 0 / 24px 24px;
}
.praesenz .pc-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 2;
  height: 46%;
  background: linear-gradient(180deg, rgba(15, 19, 15, 0), rgba(15, 19, 15, .66));
  pointer-events: none;
}
.praesenz .pc-photo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  display: block;
  transition: transform 1.1s var(--ease);
  transform-origin: 50% 22%;
}
.praesenz .pc-brand {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 86px; height: auto; opacity: .85;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}

/* Dossier-Karte: hell, überlappt die Vitrine */
.praesenz .pc-body {
  position: relative; z-index: 3;
  margin: -48px 14px 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.2vw, 24px) clamp(8px, 1.4vw, 12px);
  text-align: left;
  background: rgba(252, 253, 249, .97);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 18px;
  box-shadow: 0 24px 52px -30px rgba(0, 0, 0, .8);
  flex: 1 1 auto;
  display: flex; flex-direction: column;
}
.praesenz .pc-name {
  margin: 0;
  font-size: clamp(1.3rem, 1.7vw, 1.55rem);
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--c-heading);
}
.praesenz .pc-title {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 9px 0 0;
  font-size: .8rem; line-height: 1.45;
  color: var(--c-text-soft);
  max-width: none;
}
.praesenz .pc-title svg {
  width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px;
  fill: none; stroke: var(--c-accent-strong);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.praesenz .pc-desc {
  margin: 12px 0 0;
  font-size: .95rem; line-height: 1.65;
  color: var(--c-text);
  max-width: none;
}

/* Kontakt als Action-Rows */
.praesenz .pc-contact {
  list-style: none;
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid rgba(20, 30, 10, .1);
  display: grid;
  margin-top: auto;
}
.praesenz .pc-contact li + li { border-top: 1px solid rgba(20, 30, 10, .06); }
.praesenz .pc-contact a {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 7px 6px;
  font-size: .92rem; font-weight: 700;
  color: var(--c-heading);
  text-decoration: none;
  border-radius: 12px;
  transition: background var(--dur-1) var(--ease);
}
.praesenz .pc-contact a:hover { background: var(--c-gray-soft); }
.praesenz .pc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px;
  background: var(--c-accent-tint);
  transition: background var(--dur-1) var(--ease);
}
.praesenz .pc-ico svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--c-accent-deep);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur-1) var(--ease);
}
.praesenz .pc-contact a:hover .pc-ico { background: var(--c-accent); }
.praesenz .pc-contact a:hover .pc-ico svg { stroke: #fff; }
.praesenz .pc-val { min-width: 0; overflow-wrap: anywhere; }
.praesenz .pc-go {
  margin-left: auto; flex: 0 0 auto;
  color: var(--c-accent-strong); font-weight: 700;
  transition: transform var(--dur-1) var(--ease);
}
.praesenz .pc-contact a:hover .pc-go { transform: translateX(4px); }
.praesenz .pc-contact a:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
}

.praesenz .pc-actions {
  display: flex; justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}

/* ---------- Gestaffelte Scroll-Reveals (schnell) ---------- */
.hq-reveal.reveal-hidden:not(.reveal-in) { opacity: 0; transform: translateY(8px); }
.hq-reveal.reveal-in {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.hq-delay-1.reveal-in { transition-delay: .04s; }
.hq-delay-2.reveal-in { transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  .hq-reveal.reveal-hidden:not(.reveal-in) { opacity: 1; transform: none; }
  .hq-reveal.reveal-in { transition: none; transition-delay: 0s; }
}

/* ---------- Kleine Viewports ---------- */
@media (max-width: 30rem) {
  .praesenz .pc-body { margin-inline: 10px; }
  .praesenz .pc-contact a { font-size: .88rem; gap: 10px; }
  .praesenz .pc-ico { width: 34px; height: 34px; border-radius: 10px; }
  .praesenz .pc-brand { width: 72px; }
}

/* ==================================================================
   FOOTER v2 — dunkler Präzisions-Abschluss (Redesign 2026-07-31)
   Gleiche Materialsprache wie die dunklen Bänder: #0f0f0f, Lime-
   Topline, Plus-Pattern, §34d-Badge, „nach oben" als Pill.
   ================================================================== */
.site-footer {
  position: relative;
  background-color: #0f0f0f;
  border-top: 0;
  padding-block: clamp(36px, 5vw, 56px) clamp(16px, 3vw, 24px);
  color: var(--c-dark-text);
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(162, 198, 23, .7) 30%, rgba(162, 198, 23, .7) 70%, transparent);
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a2c617' fill-opacity='0.22'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 72%);
}
.site-footer .row, .site-footer .footer-copy { position: relative; z-index: 1; }
.site-footer .footer-logo {
  width: 164px; height: auto; display: block;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .4));
}
.site-footer .footer-co { color: var(--c-dark-text); gap: 8px; }
.site-footer .footer-co strong {
  color: var(--c-dark-head);
  font-size: 1.02rem; letter-spacing: .01em;
}
.site-footer .footer-contact a {
  color: var(--c-dark-head);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(162, 198, 23, .55);
  transition: color var(--dur-1) var(--ease);
}
.site-footer .footer-contact a:hover { color: var(--c-accent-bright); }
.site-footer .footer-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 7px 14px;
  border: 1px solid rgba(162, 198, 23, .32);
  border-radius: 999px;
  background: rgba(162, 198, 23, .08);
  font-size: .78rem; line-height: 1.4;
  color: rgba(233, 241, 214, .88);
  width: fit-content;
}
.site-footer .footer-badge svg {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: var(--c-accent-bright);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.site-footer .footer-links { gap: 6px clamp(14px, 2vw, 26px); }
.site-footer .footer-links a {
  color: rgba(244, 246, 238, .78);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.site-footer .footer-links a:hover { color: var(--c-accent-bright); }
.site-footer .footer-top {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  border: 1px solid rgba(162, 198, 23, .4);
  border-radius: 999px;
  background: rgba(162, 198, 23, .08);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.site-footer .footer-top svg {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: var(--c-accent-bright);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-1) var(--ease);
}
.site-footer .footer-top:hover {
  background: rgba(162, 198, 23, .16);
  transform: translateY(-2px);
}
.site-footer .footer-top:hover svg { transform: translateY(-2px); }
.site-footer .footer-copy {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(183, 189, 169, .75);
  font-size: .8rem;
}
@media (max-width: 63.99rem) {
  .site-footer .footer-logo { margin-inline: auto; }
  .site-footer .footer-badge { margin-inline: auto; }
  .site-footer .footer-co { text-align: center; }
}

/* --- Dezente Schlusszeile im Footer --- */
.site-footer .footer-partners {
  position: relative;
  z-index: 1;
  margin-top: var(--s-2);
  text-align: center;
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(183, 189, 169, .6);
}
.site-footer .footer-partners a {
  color: inherit;
  text-decoration: none;
}
.site-footer .footer-partners a:hover,
.site-footer .footer-partners a:focus-visible {
  text-decoration: underline;
}

/* ==================================================================
   PERFORMANCE-DURCHLAUF — Ladezeit, Scrollen, Animationen
   ================================================================== */

/* --- Hintergrundbild als WebP (JPG bleibt Fallback aus site.css) --- */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  body::before {
    background:
      radial-gradient(52rem 42rem at 10% 6%, rgba(162,198,23,.17), transparent 60%),
      radial-gradient(48rem 46rem at 92% 90%, rgba(162,198,23,.13), transparent 58%),
      radial-gradient(38rem 38rem at 88% 14%, rgba(20,40,10,.06), transparent 55%),
      linear-gradient(rgba(250,252,244,.58), rgba(246,249,238,.72)),
      image-set(url('../img/bg/bg-hell-city.webp') type('image/webp'))
        center / cover no-repeat;
  }
}

/* --- Video: Poster-Button statt sofort geladenem MP4 --- */
.browser-body .video-poster-btn {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.browser-body .video-poster-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.browser-body .video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #10140b;
  background: rgba(162, 198, 23, .92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform var(--dur-1) var(--ease);
}
.browser-body .video-poster-btn:hover .video-play { transform: scale(1.06); }

/* --- Dauer-Animationen nur laufen lassen, wenn sichtbar --- */
.praesenz .mapcase::after,
.praesenz .hq-dot::after,
.praesenz .chip-dot { animation-play-state: paused; }
.praesenz.is-onscreen .mapcase::after,
.praesenz.is-onscreen .hq-dot::after,
.praesenz.is-onscreen .chip-dot { animation-play-state: running; }

/* --- Reveal: nur GPU-freundliche Eigenschaften, will-change temporär --- */
.reveal-hidden,
.hq-reveal.reveal-hidden:not(.reveal-in) { will-change: opacity, transform; }
.reveal-in { will-change: auto; }

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

/* ==================================================================
   FUNNEL-POPUP (Produktkarten-CTA)
   ================================================================== */
.funnel-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  overflow-y: auto;
  background: rgba(8, 12, 6, .62);
  backdrop-filter: blur(6px);
  animation: funnelModalIn .18s ease-out both;
}
.funnel-modal-panel {
  position: relative;
  width: min(560px, 100%);
  margin: auto;
  border-radius: 22px;
}
.funnel-modal-panel .funnel-card { margin: 0; }
.funnel-modal-close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #10140b;
  background: rgba(162, 198, 23, .95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.funnel-modal-close:hover { transform: scale(1.05); }
@keyframes funnelModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 640px) {
  .funnel-modal-panel { width: 100%; }
  .funnel-modal-close { top: 4px; right: 4px; }
}

/* ===== Erfolgs-Screen nach Funnel-Abschluss ===== */
.funnel-success{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.9rem;
  padding:clamp(1.2rem,3vw,2rem) clamp(1rem,3vw,1.8rem);
}
.funnel-success .fs-confetti{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}
.funnel-success .fs-figure{
  position:relative;
  z-index:1;
  width:min(240px,70%);
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.funnel-success .fs-figure video,
.funnel-success .fs-figure img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.funnel-success .fs-title{
  position:relative;
  z-index:3;
  margin:0;
  font-size:clamp(1.25rem,2.6vw,1.7rem);
  line-height:1.2;
  color:#fff;
  outline:none;
}
.funnel-success .fs-text{
  position:relative;
  z-index:3;
  margin:0;
  max-width:46ch;
  color:rgba(255,255,255,.86);
  font-size:.98rem;
  line-height:1.55;
}
.funnel-success .fs-list{
  position:relative;
  z-index:3;
  margin:.2rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.4rem;
  max-width:46ch;
  color:rgba(255,255,255,.78);
  font-size:.92rem;
}
.funnel-success .fs-list li{
  position:relative;
  padding-left:1.35rem;
}
.funnel-success .fs-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--lime,#c8f24a);
}
.funnel-success .fs-actions{
  position:relative;
  z-index:3;
  margin-top:.5rem;
}
@media (prefers-reduced-motion: reduce){
  .funnel-success .fs-confetti{display:none;}
}

.danke-page{
  padding:clamp(6rem,12vw,9rem) 0 clamp(4rem,8vw,6rem);
}
.danke-page .funnel-card{
  max-width:640px;
  margin:0 auto;
}
.funnel-success .fs-list{ text-align:left; justify-items:start; margin-inline:auto; }

/* ==================================================================
   Produktkarten v3: getönter Bildkopf + weißer Textblock + CTA-Fuß
   ================================================================== */
.prod-bento { align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .prod-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .prod-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

#produkte .prod-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 30, 10, .1);
  border-radius: clamp(14px, 1.6vw, 20px);
  box-shadow: 0 1px 2px rgba(20,30,10,.05), 0 18px 40px -22px rgba(30,45,15,.45);
}
#produkte .prod-card:hover {
  transform: translateY(-4px);
  border-color: rgba(162,198,23,.45);
  box-shadow: 0 2px 6px rgba(20,30,10,.06), 0 28px 56px -22px rgba(120,160,20,.5);
}

/* Bildkopf über volle Kartenbreite */
#produkte .prod-card .pc-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: clamp(12px, 3%, 26px);
  box-sizing: border-box;
  margin: 0;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 60%, transparent 100%),
    linear-gradient(180deg, #eef4e0 0%, #f4f8ec 65%, #ffffff 100%);
  transition: none;
}
#produkte .prod-card:hover .pc-media { transform: none; box-shadow: none; }
#produkte .prod-card .pc-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
#produkte .prod-card:hover .pc-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  #produkte .prod-card .pc-media img { transition: none; }
  #produkte .prod-card:hover .pc-media img { transform: none; }
}

/* Textblock */
#produkte .prod-card .pc-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(.35rem, .8vw, .55rem);
  padding: clamp(.9rem, 1.8vw, 1.4rem);
  text-align: left;
}
#produkte .prod-card .sc-top { display: block; text-align: left; min-width: 0; }
#produkte .prod-card h3 {
  margin: 0;
  line-height: 1.22;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
  min-height: 2.44em;
}
#produkte .prod-card p {
  margin: 0;
  min-width: 0;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  text-wrap: pretty;
  min-height: 4.5em;
  flex: 0 0 auto;
}

/* CTA-Fuß mit feiner Trennlinie und rundem Pfeil */
#produkte .prod-card .prod-cta {
  margin-top: auto;
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-top: 1px solid rgba(20,25,15,.1);
  padding: clamp(.7rem, 1.4vw, .95rem) 0 0;
  margin-bottom: 0;
}
#produkte .prod-card .prod-cta strong {
  font-size: var(--t-sm);
  color: var(--c-accent-deep);
}
#produkte .prod-card .prod-cta .btn-arrow {
  margin-left: auto;
  width: 34px; height: 34px;
  flex: 0 0 auto;
}
@media (max-width: 26rem) {
  #produkte .prod-card .prod-cta strong { font-size: .82rem; }
  #produkte .prod-card .prod-cta .btn-arrow { width: 28px; height: 28px; }
}

/* ==================================================================
   PERFORMANCE: Eingangsanimationen & Scroll-Last
   ================================================================== */

/* Globale Timings straffen (Design bleibt, nur schneller) */
:root { --dur-2: 220ms; --dur-3: 260ms; }

/* Reveal aus site.css ebenfalls kurz halten */
.reveal-hidden { transform: translateY(8px); }
.reveal-in { transition: opacity 260ms var(--ease), transform 260ms var(--ease); }

/* Sofort sichtbar, wenn beim Schnellscrollen bereits mitten im Bild */
.reveal-instant,
.hq-reveal.reveal-instant { transition: none !important; transition-delay: 0s !important; }

/* Funnel-Schrittwechsel direkter */
.funnel-step.active { animation-duration: 180ms; }

/* Blur nur dort, wo wirklich etwas durchscheint.
   Flächen im Scrollbereich bekommen die gleiche Optik als solide Fläche. */
.prod-card,
.bento .b-card,
.quote,
.faq,
#ablauf .shell,
#faq .section-head.center,
.pres-num {
  backdrop-filter: none;
}
.prod-card { background: rgba(255, 255, 255, .96); }
.bento .b-card { background: rgba(255, 255, 255, .10); }
.quote { background: #1a1a1d; }
.faq { background: rgba(252, 253, 250, .95); }
#ablauf .shell { background: rgba(255, 255, 255, .93); }
#faq .section-head.center { background: rgba(252, 253, 250, .93); }
.pres-num { background: rgba(255, 255, 255, .92); }
@media (max-width: 47.99rem) {
  .prod-card, .faq, .bento .b-card, .quote { backdrop-filter: none; }
}

/* Lange Hover-Übergänge kürzen */
.praesenz .pc-photo { transition: transform 280ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .reveal-hidden { transform: none; }
  .reveal-in { transition: none; }
  .funnel-step.active { animation: none; }
}

/* ==================================================================
   MOBILE-SCHRITT 1 — Header ohne Überlagerung, Trust-Zeile lesbar
   ================================================================== */

/* Kurzlabel nur auf sehr schmalen Viewports */
.btn-label-short { display: none; }
@media (max-width: 30rem) {
  .header-cta .btn .btn-label-full { display: none; }
  .header-cta .btn .btn-label-short { display: inline; }
}

@media (max-width: 30rem) {
  /* Feste Spalten statt freiem Flex: Logos | CTA | Menü können sich nicht
     mehr überlappen, die Logo-Spalte schrumpft kontrolliert. */
  .site-header .bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-inline: 12px;
  }
  .brand-lockup { min-width: 0; gap: 6px; }
  .brand-lockup .brand { flex: none; }
  .brand-lockup .brand img { width: auto; height: 24px; }
  .brand-partner { flex: none; height: 17px; width: auto; }
  .site-header.shrunk .brand img { width: auto; height: 22px; }
  .header-cta { display: flex; justify-content: flex-end; }
  .header-cta .btn { font-size: .78rem; padding: .55rem .9rem; }
}

/* Trust-Zeile: Häkchen in eigener Spalte, Text linksbündig mit Hängeeinzug */
@media (max-width: 65.99rem) {
  .hero-trust { justify-items: center; }
  .hero-trust span {
    position: relative;
    display: block;
    padding-left: 1.15em;
    text-align: left;
    text-wrap: balance;
    max-width: 22ch;
  }
  .hero-trust span::before { position: absolute; left: 0; top: 0; }
}
@media (max-width: 39.99rem) {
  .hero-trust { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; }
  .hero-trust span { white-space: normal; justify-self: start; max-width: none; }
}

/* Mobile Hero-Vorlage: Trust-Liste als abgesetzte Karte, ruhigere Hierarchie */
@media (max-width: 47.99rem) {
  .hero-copy .eyebrow {
    margin-bottom: 14px;
    letter-spacing: .12em;
  }
  .hero-copy h1 { margin-bottom: 14px; }
  .hero-copy .sub {
    text-wrap: pretty;
    margin-bottom: 22px;
  }
  .hero-trust {
    width: 100%;
    box-sizing: border-box;
    background: rgba(15, 22, 12, .045);
    border: 1px solid rgba(15, 22, 12, .10);
    border-radius: 18px;
    padding: 16px 18px;
    gap: 13px;
    /* Eine Spalte in Breite der längsten Zeile, als Block mittig gesetzt —
       dadurch teilen sich alle Zeilen dieselbe linke Kante (Häkchen bündig). */
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    justify-items: stretch;
  }
  .hero-trust span {
    justify-self: stretch;
    max-width: none;
    padding-left: 1.6em;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
  }
  .hero-trust span::before { top: .05em; }
}

/* Sehr schmale Geräte: Hero-Headline bricht an Wortgrenzen, nicht mitten im Wort */
@media (max-width: 22.5rem) {
  .hero-copy h1 { font-size: clamp(1.55rem, 8.4vw, 2rem); hyphens: auto; overflow-wrap: break-word; }
}

/* ===== Mobile: mehr Luft im Hero ===== */
@media (max-width: 47.99rem) {
  .hero-grid .hero-copy { padding-block: 8px 4px; }
  .hero-copy .eyebrow { margin-bottom: 20px; }
  .hero-copy h1 { margin-bottom: 20px; text-wrap: balance; line-height: 1.16; }
  .hero-copy .sub { margin-bottom: 30px; line-height: 1.62; }
  .hero-trust { padding: 20px 20px; gap: 16px; }
}

/* ===== Mehrfachauswahl: Aufklappbereich für weitere Themen ===== */
.multi-more {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}
.multi-more-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
}
.multi-more-toggle::-webkit-details-marker { display: none; }
.multi-more-label { flex: 1 1 auto; min-width: 0; }
.multi-more-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.multi-more-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  transition: transform .18s ease;
}
.multi-more[open] .multi-more-chevron { transform: rotate(180deg); }
.multi-more[open] .multi-more-toggle { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.multi-more-list { padding: 12px 12px 14px; }
.multi-more-toggle:focus-visible { outline: 2px solid var(--c-brand, #9ede2b); outline-offset: -2px; }

/* ===== Bonn-Sektion: ruhigere Umbrüche und mehr Luft ===== */
.praesenz .praesenz-copy h2 .h2-sub {
  display: block;
  margin-top: 6px;
  font-size: .62em;
  font-weight: 600;
  opacity: .9;
}
.praesenz .praesenz-copy h2 { text-wrap: balance; }
.praesenz-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: .85;
  text-wrap: pretty;
}
body[data-audience="privat"] .stats-strip .stat b > span[data-aud="privat"],
body[data-audience="gewerbe"] .stats-strip .stat b > span[data-aud="gewerbe"] { display: block !important; }
@media (max-width: 47.99rem) {
  .praesenz .praesenz-copy .eyebrow { margin-bottom: 16px; }
  .praesenz .praesenz-copy h2 { margin-bottom: 18px; }
  .praesenz .praesenz-copy .sub {
    max-width: 34ch;
    margin-inline: auto;
    margin-bottom: 14px;
    line-height: 1.62;
    text-wrap: pretty;
  }
  .praesenz-note { max-width: 34ch; margin-inline: auto; }
  .praesenz .praesenz-grid { row-gap: 28px; }
}

/* ===== Mehrfachauswahl: Nutzen-Zeile unter dem Option-Label ===== */
.multi-inline-text { display: flex; flex-direction: column; gap: 2px; }
.multi-inline-desc { font-size: .78rem; line-height: 1.35; font-weight: 400; opacity: .72; }

/* ==================================================================
   Header-Kante: Hero-Overlay bis unter den Sticky-Header ziehen
   (verhindert harte Farbkante des Mesh-Hintergrunds an der Hero-Oberkante)
   ================================================================== */
.hero { overflow: visible; }
.hero::before {
  top: calc(-1 * var(--header-hoehe, var(--header-h, 70px)) - 40px);
}

/* ===== Kennzahlen-Sektion: einheitliche Wort-Typografie ===== */
.stats-strip .row { align-items: stretch; }
.stats-strip .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  text-align: center;
}
.stats-strip .stat b,
.stats-strip .stat b > span[data-aud] {
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem);
  line-height: 1.2;
  font-weight: 800;
  text-wrap: balance;
}
.stats-strip .stat b > span[data-aud] {
  background: linear-gradient(180deg, #c8e34a 0%, #a2c617 62%, #8fb111 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats-strip .stat b { margin: 0; }
.stats-strip .stat > span,
.stats-strip .stat > span[data-aud] {
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .72);
  text-wrap: pretty;
}
@media (max-width: 47.99rem) {
  .stats-strip .row { gap: 20px; }
}

/* ===== Hero-Vertrauenszeile: sauberes 2x2-Raster ab Tablet/Desktop ===== */
@media (min-width: 48rem) {
  .hero-copy .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid rgba(15, 22, 12, .10);
    border-radius: 14px;
    background: rgba(15, 22, 12, .045);
  }
  .hero-copy .hero-trust span {
    position: relative;
    display: block;
    min-width: 0;
    padding-left: 1.6em;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .hero-copy .hero-trust span::before {
    position: absolute;
    left: 0;
    top: .05em;
  }
}

/* ==================================================================
   BEISPIELRECHNUNG (#beispiel) — nur neue Regeln, Präfix .bsp-
   ================================================================== */
.bsp-panel {
  position: relative;
  margin-top: clamp(48px, 7vw, 88px);
  margin-bottom: clamp(24px, 4vw, 48px);
  padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 40px);
  border: 1px solid var(--c-border);
  border-radius: var(--o-r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(162, 198, 23, .12) 0%, rgba(162, 198, 23, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(252, 253, 249, .86) 100%);
  box-shadow: var(--o-shadow-1);
  overflow: hidden;
}
.bsp-panel > * { position: relative; z-index: 1; }
.bsp-panel .section-head { margin-top: 0; }

.bsp-table {
  width: 100%;
  max-width: 100%;
  margin: clamp(24px, 3vw, 36px) 0 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.bsp-table th, .bsp-table td { text-align: left; vertical-align: top; }
.bsp-table thead th {
  padding: 0 10px 10px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-text-soft);
  border-bottom: 1px solid rgba(20, 30, 10, .1);
}
.bsp-table tbody th[scope="row"],
.bsp-table tfoot th[scope="row"] {
  padding: 14px 10px;
  font-weight: 700;
  color: var(--c-heading);
  overflow-wrap: anywhere;
}
.bsp-table tbody td, .bsp-table tfoot td { padding: 14px 10px; }
.bsp-table tbody tr + tr th,
.bsp-table tbody tr + tr td { border-top: 1px solid rgba(20, 30, 10, .06); }

.bsp-annahme {
  display: block;
  margin-top: 4px;
  max-width: 40ch;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-soft);
}

.bsp-mon, .bsp-jahr { display: block; font-variant-numeric: tabular-nums; }
.bsp-mon {
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-text-soft);
}
.bsp-jahr {
  margin-top: 2px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-text-soft);
}
.bsp-neu .bsp-mon { color: var(--c-accent-text); }

.bsp-table tfoot .bsp-sum th,
.bsp-table tfoot .bsp-sum td {
  border-top: 2px solid rgba(20, 30, 10, .22);
  padding-top: 18px;
}
.bsp-table tfoot .bsp-sum .bsp-mon { font-weight: 900; }
.bsp-table tfoot .bsp-spar th,
.bsp-table tfoot .bsp-spar td {
  background: var(--c-accent-tint);
  border-top: 1px solid var(--c-accent);
  border-bottom: 1px solid var(--c-accent);
  padding: 16px 10px;
}
.bsp-table tfoot .bsp-spar th {
  border-left: 1px solid var(--c-accent);
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--c-accent-deep);
}
.bsp-table tfoot .bsp-spar td {
  border-right: 1px solid var(--c-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bsp-table tfoot .bsp-spar .bsp-mon { color: var(--c-accent-deep); }
.bsp-table tfoot .bsp-spar .bsp-jahr { color: var(--c-accent-deep); }

.bsp-hinweise {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 68ch;
  margin-left: auto; margin-right: auto;
  color: var(--c-text-soft);
}
.bsp-hinweise p {
  margin: 0 0 12px;
  font-size: var(--t-body);
  line-height: 1.6;
}
.bsp-hinweise p:last-child { margin-bottom: 0; }
.bsp-hinweise b { color: var(--c-heading); }
.bsp-hinweise .bsp-status { font-size: var(--t-sm); }

.bsp-actions {
  display: flex; justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}

/* ---------- Handy: Tabelle klappt um ---------- */
@media (max-width: 47.99rem) {
  .bsp-table, .bsp-table tbody, .bsp-table tfoot,
  .bsp-table tr, .bsp-table th, .bsp-table td { display: block; width: auto; }
  .bsp-table { table-layout: auto; }
  .bsp-table thead {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
  }
  .bsp-table tbody tr, .bsp-table tfoot tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
  }
  .bsp-table tbody th[scope="row"],
  .bsp-table tfoot th[scope="row"] {
    grid-column: 1 / -1;
    padding: 0;
  }
  .bsp-table tbody td, .bsp-table tfoot td {
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .bsp-table tbody tr + tr th,
  .bsp-table tbody tr + tr td { border-top: 0; }
  .bsp-table tbody td::before,
  .bsp-table tfoot td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--c-text-soft);
  }
  .bsp-table .bsp-mon { font-size: 1.15rem; overflow-wrap: anywhere; }
  .bsp-table tfoot .bsp-sum th,
  .bsp-table tfoot .bsp-sum td { border-top: 0; padding-top: 0; }
  .bsp-table tfoot .bsp-sum { border-width: 2px; }
  .bsp-table tfoot .bsp-spar {
    background: var(--c-accent-tint);
    border-color: var(--c-accent);
  }
  .bsp-table tfoot .bsp-spar th,
  .bsp-table tfoot .bsp-spar td {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .bsp-table tfoot .bsp-spar td { grid-column: 1 / -1; }
  .bsp-annahme { max-width: none; }
}

/* ===== Beispielrechnung v2 ===== */
.bsp-panel { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.bsp-panel h2 { text-wrap: balance; }

.bsp-ergebnis {
  max-width: 42rem;
  margin: 0 auto clamp(20px, 3vw, 32px);
  padding: clamp(18px, 3vw, 26px) clamp(16px, 3vw, 28px);
  text-align: center;
  background: var(--c-accent-tint);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
}
.bsp-ergebnis-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 10px;
  margin: 0;
  color: var(--c-accent-deep);
}
.bsp-ergebnis-label,
.bsp-ergebnis-einheit { font-size: var(--t-body); color: var(--c-accent-deep); }
.bsp-ergebnis-wert {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--c-accent-deep);
  font-variant-numeric: tabular-nums;
}
.bsp-ergebnis-sub {
  margin: 6px 0 0;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-accent-deep);
  font-variant-numeric: tabular-nums;
}
.bsp-ergebnis-note {
  margin: 12px 0 0;
  font-size: max(14px, var(--t-sm));
  line-height: 1.55;
  color: var(--c-text-soft);
}
@media (max-width: 47.99rem) {
  .bsp-ergebnis-zeile { flex-direction: column; gap: 2px; }
}

.bsp-delta {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-accent-tint);
  color: var(--c-accent-deep);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.bsp-table td.bsp-neu { background: rgba(162, 198, 23, .07); }
.bsp-table thead th:nth-child(3) {
  background: rgba(162, 198, 23, .07);
  color: var(--c-accent-deep);
  font-weight: 800;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.bsp-table tfoot tr:last-child td.bsp-neu {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.bsp-hinweise {
  text-align: left;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  font-size: var(--t-sm);
}
.bsp-hinweise p { font-size: max(14px, var(--t-sm)); margin: 0 0 8px; line-height: 1.55; }
.bsp-hinweise p:last-child { margin-bottom: 0; }
.bsp-hinweise .bsp-status { font-size: max(13px, .82rem); }
.bsp-table { margin-bottom: clamp(16px, 2.5vw, 24px); }

@media (max-width: 47.99rem) {
  .bsp-table td.bsp-neu { background: transparent; }
  .bsp-table .bsp-delta { display: block; width: fit-content; max-width: 100%; font-size: .8rem; }
}

/* ===== Beispielrechnung v2.1 — Ergebnis-Feld kompakter ===== */
.bsp-panel .bsp-ergebnis {
  max-width: 34rem;
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2.5vw, 22px);
  margin-top: clamp(8px, 1.5vw, 16px);
}
.bsp-panel .bsp-ergebnis-note {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Beispielrechnung v2.2 — Ergebnis-Zeile mobil zentrieren ===== */
@media (max-width: 47.99rem) {
  .bsp-panel .bsp-ergebnis-zeile { align-items: center; text-align: center; }
}

/* =========================================================
   Beispielrechnung v3 — Ersparnis-Spalte (nur anhängen)
   ========================================================= */
.bsp-panel .bsp-table { table-layout: fixed; }
.bsp-panel .bsp-table thead th:nth-child(1) { width: 40%; }
.bsp-panel .bsp-table thead th:nth-child(2),
.bsp-panel .bsp-table thead th:nth-child(3),
.bsp-panel .bsp-table thead th:nth-child(4) { width: 20%; }

/* Spalte 3 wird grau wie Spalte 2, Streifen weg */
.bsp-panel .bsp-table td.bsp-neu { background: transparent; }
.bsp-panel .bsp-table thead th:nth-child(3) {
  background: transparent; color: var(--c-text-soft); font-weight: 700;
  border-radius: 0;
}
.bsp-panel .bsp-neu .bsp-mon { color: var(--c-text-soft); }
.bsp-panel .bsp-table tfoot tr:last-child td.bsp-neu { border-radius: 0; }

/* Spalte 4 — Ersparnis */
.bsp-panel .bsp-table th.bsp-ers-col {
  background: var(--c-accent-tint);
  color: var(--c-accent-deep);
  font-size: max(13px, .81rem);
  font-weight: 600;
  text-align: right;
  border-left: 1px solid var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.bsp-panel .bsp-table td.bsp-ers {
  background: var(--c-accent-tint);
  border-left: 1px solid var(--c-border);
  text-align: right;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.bsp-panel .bsp-ers-wert {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-accent-deep);
  font-variant-numeric: tabular-nums;
}
.bsp-panel .bsp-ers-sum .bsp-ers-wert { font-size: 26px; }
.bsp-panel .bsp-ers-sub {
  display: block;
  font-size: var(--t-sm);
  color: var(--c-accent-deep);
  opacity: .78;
  font-variant-numeric: tabular-nums;
}
.bsp-panel .bsp-table tfoot .bsp-sum td.bsp-ers {
  border-radius: 0 0 var(--radius) var(--radius);
}
.bsp-panel .bsp-table tfoot .bsp-sum th,
.bsp-panel .bsp-table tfoot .bsp-sum td { border-top: 2px solid var(--c-border); }

/* Ergebnis-Feld: Hinweis steht jetzt außerhalb der Box */
.bsp-panel .bsp-ergebnis { padding-bottom: clamp(12px, 1.6vw, 16px); }
.bsp-panel .bsp-ergebnis-note {
  max-width: 34rem;
  margin: 10px auto 0;
  text-align: center;
  font-size: max(14px, var(--t-sm));
  color: var(--c-text-soft);
  padding: 0;
  border: 0;
}

/* Handy */
@media (max-width: 47.99rem) {
  .bsp-panel .bsp-table th.bsp-ers-col { display: none; }
  .bsp-panel .bsp-table td.bsp-ers {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--c-accent-tint);
    border-left: 0;
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-top: 4px;
    text-align: right;
  }
  .bsp-panel .bsp-table td.bsp-ers::before {
    color: var(--c-accent-deep);
    margin: 0;
    text-align: left;
  }
  .bsp-panel .bsp-ers-wert { font-size: 18px; }
  .bsp-panel .bsp-ers-sum .bsp-ers-wert { font-size: 22px; }
  .bsp-panel .bsp-ers-sub { width: 100%; text-align: right; }
  .bsp-panel .bsp-table tfoot .bsp-sum td.bsp-ers { border-radius: var(--radius); }
  .bsp-panel .bsp-table tfoot .bsp-sum td { border-top: 0; }
  .bsp-panel .bsp-ergebnis-note { margin-top: 10px; }
}

/* ---------- Beispielrechnung v4 — Feinschliff ---------- */

/* A — Ergebnis-Feld: Zahl mittig, helleres Grün */
.bsp-panel .bsp-ergebnis-zeile {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.bsp-panel .bsp-ergebnis-wert { color: var(--c-accent-text); }

/* B — Ersparnis-Spalte: mittig, helleres Grün, gleiche Größe wie links */
.bsp-panel .bsp-table td.bsp-ers,
.bsp-panel .bsp-table th.bsp-ers-col { text-align: center; }
.bsp-panel .bsp-ers-wert {
  font-size: 28px;
  font-weight: 800;
  color: var(--c-accent-text);
  font-variant-numeric: tabular-nums;
}
.bsp-panel .bsp-ers-sum .bsp-ers-wert { font-size: 32px; }

/* C — Hinweisblock: kleiner, zentriert, grauer */
.bsp-panel .bsp-hinweise {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.bsp-panel .bsp-hinweise p { font-size: 14px; }
.bsp-panel .bsp-hinweise b { color: var(--c-text-soft); font-weight: 700; }
.bsp-panel .bsp-hinweise .bsp-status { font-size: 13px; }

/* Handy: Fußblock bleibt Beschriftung links / Wert rechts */
@media (max-width: 47.99rem) {
  .bsp-panel .bsp-table td.bsp-ers { text-align: right; }
  .bsp-panel .bsp-table td.bsp-ers::before { text-align: left; }
  .bsp-panel .bsp-ers-wert { font-size: 18px; }
  .bsp-panel .bsp-ers-sum .bsp-ers-wert { font-size: 22px; }
  .bsp-panel .bsp-ers-sub { width: 100%; text-align: right; }
}

/* ---------- Beispielrechnung v5 ---------- */

/* 1 — Beträge in Spalte 2 und 3 zentrieren */
.bsp-panel .bsp-table tbody td,
.bsp-panel .bsp-table tfoot td,
.bsp-panel .bsp-table thead th:nth-child(2),
.bsp-panel .bsp-table thead th:nth-child(3) { text-align: center; }

/* 3 — Gesamt-Zeile abgesetzt und größer */
.bsp-panel .bsp-table tfoot .bsp-sum th,
.bsp-panel .bsp-table tfoot .bsp-sum td {
  border-top: 3px solid var(--c-accent);
  padding-top: 20px;
  padding-bottom: 20px;
}
.bsp-panel .bsp-table tfoot .bsp-sum .bsp-mon { font-size: 34px; }
.bsp-panel .bsp-table tfoot .bsp-sum th b { font-size: 19px; }
.bsp-panel .bsp-ers-sum .bsp-ers-wert { font-size: 38px; }
.bsp-panel .bsp-ers-sum .bsp-ers-sub { font-size: 15px; opacity: 1; }

/* 4 — Fazit-Zeile */
.bsp-panel .bsp-fazit {
  margin: 18px auto 0;
  text-align: center;
  font-size: clamp(1.15rem, 1.2vw + .9rem, 1.5rem);
  font-weight: 700;
  color: var(--c-accent-deep);
}

/* 5 — Hinweisblock zweispaltig */
.bsp-panel .bsp-hinweise {
  max-width: none;
  text-align: left;
  columns: 2;
  column-gap: 40px;
  padding-top: 20px;
}
.bsp-panel .bsp-hinweise p {
  break-inside: avoid;
  margin: 0 0 10px;
}
.bsp-panel .bsp-hinweise .bsp-status {
  column-span: all;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  text-align: center;
}

@media (max-width: 59.99rem) {
  .bsp-panel .bsp-hinweise { columns: 1; text-align: center; max-width: 46rem; margin-inline: auto; }
  .bsp-panel .bsp-hinweise .bsp-status { column-span: none; }
}

/* Handy */
@media (max-width: 47.99rem) {
  .bsp-panel .bsp-table tbody td,
  .bsp-panel .bsp-table tfoot td { text-align: left; }
  .bsp-panel .bsp-table td.bsp-ers { text-align: right; }
  .bsp-panel .bsp-table tfoot .bsp-sum th,
  .bsp-panel .bsp-table tfoot .bsp-sum td {
    border-top: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .bsp-panel .bsp-table tfoot .bsp-sum { border-top: 3px solid var(--c-accent); }
  .bsp-panel .bsp-table tfoot .bsp-sum .bsp-mon { font-size: 24px; }
  .bsp-panel .bsp-table tfoot .bsp-sum th b { font-size: 17px; }
  .bsp-panel .bsp-ers-sum .bsp-ers-wert { font-size: 28px; }
  .bsp-panel .bsp-ers-sub { display: block; width: 100%; text-align: right; }
  .bsp-panel .bsp-ers-sum .bsp-ers-sub { font-size: 13px; }
}

/* ---------- Beispielrechnung v6 — Hinweise als leiser Fußnotenblock ---------- */
.bsp-panel .bsp-hinweise {
  columns: 1;
  column-gap: normal;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  padding-top: 22px;
  opacity: .78;
}
.bsp-panel .bsp-hinweise p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 7px;
}
.bsp-panel .bsp-hinweise b { font-weight: 400; }
.bsp-panel .bsp-hinweise .bsp-status {
  column-span: none;
  border-top: 0;
  margin-top: 10px;
  padding-top: 0;
  font-size: 13px;
}
@media (max-width: 47.99rem) {
  .bsp-panel .bsp-hinweise { max-width: none; opacity: .82; }
}
.bsp-panel .bsp-ergebnis-wert .an-root {
  font: inherit;
  color: inherit;
  line-height: 1.05;
}

/* ---------- Beispielrechnung v7 — Hinweise über die volle Breite ---------- */
.bsp-panel .bsp-hinweise {
  columns: auto;              /* Zeitungssatz aus v6 abschalten */
  column-count: auto;
  column-gap: normal;
  max-width: none;            /* keine Verengung mehr */
  margin-inline: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 34px;
  align-items: start;
  text-align: center;
  padding-top: 22px;
}
.bsp-panel .bsp-hinweise p {
  margin: 0;
  break-inside: auto;
}
.bsp-panel .bsp-hinweise .bsp-status {
  grid-column: 1 / -1;
  margin-top: 16px;
  text-align: center;
}

/* Tablet: zwei nebeneinander */
@media (max-width: 63.99rem) {
  .bsp-panel .bsp-hinweise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
}
/* Handy: untereinander */
@media (max-width: 47.99rem) {
  .bsp-panel .bsp-hinweise { display: block; }
  .bsp-panel .bsp-hinweise p { margin: 0 0 8px; }
}

/* ---------- Beispielrechnung v8 — Zulassungszeile unter den Knopf ---------- */
.bsp-panel .bsp-status {
  display: block;
  max-width: 46rem;
  margin: 16px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-soft);
  opacity: .78;
}

/* ---------- Beispielrechnung v9 — Zahlengrößen und Breitenverhalten ---------- */
.bsp-panel .bsp-table tbody .bsp-mon,
.bsp-panel .bsp-table tbody .bsp-ers-wert {
  font-size: clamp(1.15rem, 1.7vw, 1.375rem);
  line-height: 1.15;
}
.bsp-panel .bsp-table tbody .bsp-jahr { font-size: clamp(.8rem, 1vw, .875rem); }
.bsp-panel .bsp-table tbody .bsp-ers-sub { font-size: clamp(.78rem, .95vw, .85rem); }

.bsp-panel .bsp-table tfoot .bsp-sum .bsp-mon { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.bsp-panel .bsp-ers-sum .bsp-ers-wert { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.bsp-panel .bsp-table tfoot .bsp-sum th b { font-size: clamp(1rem, 1.2vw, 1.19rem); }

.bsp-panel .bsp-table .bsp-mon,
.bsp-panel .bsp-table .bsp-ers-wert,
.bsp-panel .bsp-table .bsp-jahr { white-space: nowrap; }

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .bsp-panel .bsp-table th,
  .bsp-panel .bsp-table td { padding-left: 8px; padding-right: 8px; }
  .bsp-panel .bsp-table thead th { font-size: .78rem; }
  .bsp-panel .bsp-table tbody th b,
  .bsp-panel .bsp-table tbody th { font-size: .95rem; }
  .bsp-panel .bsp-annahme { font-size: .8rem; line-height: 1.35; }
  .bsp-panel .bsp-table thead th:nth-child(1) { width: 34%; }
  .bsp-panel .bsp-table thead th:nth-child(2),
  .bsp-panel .bsp-table thead th:nth-child(3),
  .bsp-panel .bsp-table thead th:nth-child(4) { width: 22%; }
}

@media (max-width: 22.5rem) {
  .bsp-panel .bsp-table tbody .bsp-mon,
  .bsp-panel .bsp-table tbody .bsp-ers-wert { font-size: 1.05rem; }
  .bsp-panel .bsp-table td,
  .bsp-panel .bsp-table th { padding-left: 10px; padding-right: 10px; }
}

/* ---------- Beispielrechnung v10 — Abstände um ∅ und € ---------- */
.bsp-panel .bsp-ergebnis-wert .an-root > span[aria-hidden]:not(.an-slot) {
  white-space: pre;
}

/* ==================================================================
   FOOTER v3 — Balance und Hierarchie (2026-09-07)
   Drei gemessene Befunde an der Live-Seite:
   - Bei 1024 px nahm die Linkzeile 552 von 895 px ein, der Absender
     selbst nur 343 px. Das Beiwerk war breiter als der Inhalt.
   - Der Firmenblock waren fünf gleich laute Zeilen ohne Gruppierung.
   - Die §34d-Plakette bricht auf dem Handy zwangsläufig um (der Text
     hat 56 Zeichen) und sah dabei wie eine zerrissene Pille aus.
   ================================================================== */

/* Spaltenverhältnis: Der Absenderblock trägt den Inhalt und bekommt
   Vorrang. Die Linkzeile darf dafür auf zwei Reihen umbrechen — das
   ist der ruhigere Kompromiss, seit sie fünf Einträge hat. */
@media (min-width: 900px) {
  .site-footer .row {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.58fr);
  }
  .site-footer .footer-links {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* Hierarchie statt Liste: Name und Anschrift bilden eine Einheit, der
   Kontakt folgt abgesetzt, die Geschäftsstelle steht leiser darunter.
   Vorher lagen alle Zeilen mit gleichem Abstand und gleicher Farbe
   untereinander und lasen sich als undifferenzierter Block. */
.site-footer .footer-co { gap: 3px; }
.site-footer .footer-co strong { margin-bottom: 3px; }
.site-footer .footer-contact { margin-top: 7px; }
.site-footer .footer-office {
  margin-top: 7px;
  font-size: 0.86rem;
  color: rgba(183, 189, 169, 0.68);
}

/* Umbrechende Plakette: Symbol oben ausrichten, Text linksbündig —
   dann sieht der Umbruch nach Absatz mit Symbol aus statt nach Fehler. */
.site-footer .footer-badge {
  align-items: flex-start;
  text-align: left;
}
.site-footer .footer-badge svg { margin-top: 3px; }

/* Auf dem Handy war die Fußzeile 516 px hoch. Etwas dichter setzen,
   ohne die 44-px-Tippflächen der Links anzutasten. */
@media (max-width: 899px) {
  .site-footer .footer-co { gap: 2px; }
  .site-footer .footer-office { margin-top: 6px; }
  .site-footer .footer-badge { margin-top: 8px; }
}