@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-500.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-500italic.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/public-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/public-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/public-sans-700.woff2") format("woff2");
}
:root {
  --paper: #f8f7f0;
  --paper-soft: #fffefd;
  --ink: #34342d;
  --muted: #66685c;
  --line: #e2e6d8;

  /* --gold is the true logo color (the Hirschstangen emblem's gold, #d69431) — the
     PRIMARY brand accent, used generously as fills, borders, hover/active states.
     It reads at ~4.86:1 under dark ink text (passes AA) but only ~2.6:1 under white
     text (fails) — so text-bearing gold fills (buttons, badges) pair gold with ink
     text, never white. --gold-dark is a same-hue darkened shade reserved for the few
     contexts where the color itself IS the text (links, focus ring, selection,
     scrollbar) — those need ~4.5:1 on their own and can't borrow the ink-on-gold trick. */
  --gold: #d69431;
  --gold-dark: #8a5a12;
  /* Gold für Text AUF der Olivfläche. Das Markengold #d69431 erreicht dort
     nur 2,13:1 und ist als Schrift unbrauchbar; dieser hellere Ton kommt auf
     3,86:1 und bleibt erkennbar golden. Nur auf Oliv einsetzen, nie auf
     Papier — dort ist er zu hell. Gilt ab 18,66px fett (Schwelle 3:1). */
  --gold-on-oliv: #f0d69a;
  --gold-50: #fffaf0;
  --gold-100: #f7f2e5;
  --gold-200: #ede1c9;
  --gold-300: #dbc07f;

  /* Sage is the SECONDARY accent, used deliberately rarely: it is the one color in
     the brand house that is neither gold nor ink, reserved for the few moments that
     signal advisory distance from trade (e.g. the phone/call button vs. the gold
     WhatsApp CTA). Not a general-purpose secondary color — do not spread it. */
  --sage: #5f6e4f;
  --sage-dark: #3e4833;
  --sage-soft: #eef2e8;
  --sage-line: #d8decc;
  /* ---- TIEFENLEITER (LEITLINIE §3.2: Oliv ist die HAUPTFLÄCHE, Gold nur
     noch Familienzeichen) ----------------------------------------------
     Fünf Stufen, jede Fläche bekommt genau eine. Alle Zwischenstufen sind
     transparent, damit die Papierstruktur aus body::before durchscheint —
     das hält die Flächen ruhig statt sie zu blocken, und die Stufen
     addieren sich nicht sichtbar, wenn sie mal verschachtelt werden.

       0  --paper-soft        Grundfläche, body
       1  --sage-wash          6 %  ruhige Wechselbänder, ganze Sektionen
       2  --sage-wash-med     11 %  abgesetzte Kästen im Lesefluss
       3  --sage-wash-strong  17 %  das eine Element, das herausstehen soll
       4  #5f6e4f → #3e4833   voll, weiße Schrift: Kopf, Band, Fuß

     Gold bleibt bewusst auf: Buttons, Aufzählungspunkte, Icons und die
     Warnkästen im Leitfaden (dort trägt Bernstein die Bedeutung Warnung). */
  --sage-wash: rgba(95, 110, 79, .06);
  --sage-wash-med: rgba(95, 110, 79, .11);
  --sage-wash-strong: rgba(95, 110, 79, .17);

  --white: #ffffff;
  --surface: rgba(255,255,255,.92);
  --surface-2: rgba(245,247,241,.9);
  --shadow: 0 14px 34px rgba(44, 48, 38, .08);
  --motion-fast: .2s ease;
  --motion-med: .5s cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.23,1,.32,1);
  --font-body: "Public Sans", "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1d201a;
    --paper-soft: #23261f;
    --ink: #eceae1;
    --muted: #b7bbac;
    --line: #3a3f32;

    --gold: #d9ab5a;
    --gold-dark: #eecb92;
    --gold-50: #2a2416;
    --gold-100: #2a2416;
    --gold-200: #6b532a;
    --gold-300: #b6924f;

    --sage: #9bad84;
    --sage-dark: #c3d3ae;
    --sage-soft: #2a2f24;
    --sage-line: #3d4434;

    --white: #262a21;
    --surface: rgba(38,42,33,.92);
    --surface-2: rgba(42,47,36,.9);
    --shadow: 0 14px 34px rgba(0, 0, 0, .45);
  }
}
* { box-sizing: border-box; }
/* LEITLINIE §8: Fließtext nicht unter 18px. Skalierung über die Wurzel,
   damit auch Kleintext und Abstände proportional mitwachsen. */
html { font-size: 112.5%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper-soft);
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(214,148,49,.05), transparent 44%, rgba(138,90,18,.02));
  z-index: -1;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--gold-dark); color: var(--white); }
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
html { scrollbar-color: var(--gold-dark) var(--paper); scrollbar-width: thin; }
::-webkit-scrollbar { width: .7rem; height: .7rem; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }
main, section, div, article, aside, header, footer, nav, h1, h2, h3, p, li, a, span, strong, label, input, select, textarea, button { min-width: 0; }
p, li, summary, label, .top-proof, .hero-trust span, .trust-button { overflow-wrap: break-word; }
h1, h2, h3 { overflow-wrap: normal; hyphens: auto; }
h1 { hyphens: none; text-wrap: balance; }
em, i, .italic { font-style: italic; padding-bottom: .08em; display: inline-block; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-right: .4em; flex: 0 0 auto; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-med), transform var(--motion-med); }
.reveal.is-visible { opacity: 1; transform: none; }
.skip-link { position: absolute; left: -999px; top: 1rem; background: var(--ink); color: var(--paper-soft); padding: .75rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: .68rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(0,0,0,.2);
  /* Kanonische Markenfläche aus benoehr-brand/tokens.css: --nw-oliv #5f6e4f
     auf --nw-oliv-dark #3e4833 (LEITLINIE §3.2). Der frühere hellere Ton
     #6f7d5a trug weiße Schrift nur mit 4.41:1 und verfehlte damit die
     4.5:1-Vorgabe aus LEITLINIE §8. */
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%), linear-gradient(135deg, #5f6e4f, #3e4833);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { display: grid; grid-template-columns: 2.6rem auto; column-gap: .75rem; text-decoration: none; align-items: center; min-width: 14rem; }
/* .site-header's gold gradient is intentionally fixed (not theme-reactive, see
   .site-header below), so header foreground text is hardcoded #fff too, not
   var(--white) — that token flips to a dark surface color in dark mode and would
   otherwise vanish against an unchanging gold background. */
.brand img { grid-row: span 2; width: 2.6rem; height: 2.6rem; object-fit: contain; background: #fff; border-radius: 999px; padding: .2rem; }
.brand strong { line-height: 1.1; color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; }
/* Deckendes Weiß statt 86 %: bei .78rem ist der Slogan der kleinste Text auf
   der Olivfläche und braucht den vollen Kontrast (LEITLINIE §8). */
.brand small { color: #fff; font-size: .78rem; line-height: 1.2; }
.nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .35rem 0; font-size: .92rem; color: #fff; }
.nav a { position: relative; text-decoration: none; white-space: nowrap; overflow-wrap: normal; padding: .15rem .85rem; }
.nav a + a { border-left: 1px solid rgba(255,255,255,.36); }
.nav a:hover { color: #f3ecd8; }
.text-link:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: .7rem; }
.icon-link { color: #fff; font-weight: 700; text-decoration: none; font-size: .9rem; white-space: nowrap; overflow-wrap: normal; }
.icon-link:hover { color: #f3ecd8; }
.header-call { min-height: 2.45rem; padding: .52rem .9rem; }
/* Leitfaden-Button im Kopf: gleiche Hoehe wie der Telefon-Button, auf sehr
   schmalen Schirmen ausgeblendet — dort fuehrt der Hero-CTA zum Leitfaden. */
.header-leitfaden { min-height: 2.45rem; padding: .52rem .9rem; white-space: nowrap; }
@media (max-width: 520px) { .header-leitfaden { display: none; } }
.hero, .page-hero {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}
.hero {
  min-height: calc(100vh - 78px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .92fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 7vw, 5rem) 0;
}
.hero-copy { max-width: 44rem; }
h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0;
}
h1 { font-size: clamp(2.45rem, 5vw, 5rem); max-width: 16ch; }
.page-hero h1 { max-width: 18ch; }
h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
h3 { font-size: 1.35rem; }
.top-proof {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: .35rem 0 1rem;
  padding: .38rem .66rem;
  border: 1px solid rgba(138,90,18,.2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--gold-dark);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.35;
}
.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
}
.hero-proof-row span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .34rem .68rem;
  border: 1px solid var(--sage-line);
  border-radius: 999px;
  background: var(--sage-wash);
  color: var(--sage-dark);
  font-size: .86rem;
  font-weight: 800;
}
.hero-claim { font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 1.1rem 0 0; color: var(--gold-dark); font-family: var(--font-heading); font-weight: 500; max-width: 34rem; }
.hero-byline { margin: .85rem 0 0; font-size: .95rem; color: var(--muted); font-weight: 600; letter-spacing: .01em; }
.hero h1 { font-size: clamp(2.1rem, 4vw, 3.5rem); max-width: 22ch; }
.h1-zusatz { display: flex; flex-wrap: wrap; gap: .25em .95em; margin-top: .5em; font-size: .4em; font-weight: 600; color: var(--gold-dark); font-family: var(--font-body); letter-spacing: .01em; }
.h1-zusatz span { display: inline-flex; align-items: baseline; gap: .3em; }
.h1-zusatz span::after { content: "\2713"; font-weight: 700; }
.nav-toggle { display: none; align-items: center; gap: .5rem; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: .5rem .8rem; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.nav-toggle:hover { background: rgba(255,255,255,.26); }
.nav-toggle-bars { position: relative; width: 1.05rem; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
.hero-text, .page-hero > p { font-size: 1.12rem; color: var(--muted); max-width: 42rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; max-width: 44rem; }
.hero-trust span,
.trust-button { background: var(--surface); border: 1px solid rgba(138,90,18,.18); border-radius: 999px; padding: .42rem .72rem; color: var(--gold-dark); font-size: .9rem; font-weight: 800; box-shadow: 0 8px 18px rgba(50,62,42,.035); text-decoration: none; }
.hero-trust span,
.trust-button { border-color: rgba(138,90,18,.2); color: var(--gold-dark); }
.trust-button { background: var(--white); border-color: rgba(138,90,18,.4); }
.trust-button:hover { background: var(--gold-100); color: var(--ink); }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: .78rem 1.08rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  max-width: 100%;
  text-align: center;
  /* Frueher nowrap: In schmalen Behaeltern (Preiskarten, Seitenspalte) wurde
     die Beschriftung dadurch abgeschnitten statt umzubrochen — abgeschnittener
     Text ist immer schlechter als zwei Zeilen. text-wrap balance verteilt die
     Zeilen gleichmaessig, statt ein einzelnes Wort haengen zu lassen. */
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  line-height: 1.25;
  transition: transform .16s var(--ease-out), box-shadow var(--motion-fast), background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.97); }
.button-primary { background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 60%), var(--gold); color: var(--ink); border-color: rgba(138,90,18,.3); box-shadow: 0 10px 22px rgba(138,90,18,.18); }
.button-primary:hover { background: linear-gradient(160deg, rgba(255,255,255,.2), transparent 60%), var(--gold-dark); color: var(--white); box-shadow: 0 14px 26px rgba(52,52,45,.24); }
.button-secondary { background: var(--white); color: var(--gold-dark); border-color: rgba(138,90,18,.35); }
.button-secondary:hover { background: var(--gold-100); color: var(--ink); border-color: rgba(138,90,18,.55); }
/* .button-call (phone CTA) deliberately stays sage: the one lower-commitment,
   advisory-toned action next to the gold WhatsApp primary CTA. */
.button-call { background: var(--white); color: var(--sage-dark); border-color: rgba(111,125,90,.4); }
.button-call:hover { background: var(--sage-soft); color: var(--ink); border-color: rgba(111,125,90,.6); }
.button-large { min-height: 3.35rem; padding: .92rem 1.35rem; font-size: 1.03rem; }
.hero-image { position: relative; }
.hero-image img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: center; border-radius: 8px; box-shadow: var(--shadow); }
.hero-image::after { content: ""; position: absolute; inset: auto 0 -.75rem .75rem; height: 45%; border: 1px solid var(--gold); border-radius: 8px; z-index: -1; opacity: .3; }
.image-frame { position: relative; margin-bottom: 1.1rem; }
.image-frame .side-image { margin-bottom: 0; }
.page-hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 4rem); }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero-ads { padding: clamp(1.6rem, 4.2vw, 3.2rem) 0 clamp(1rem, 2.8vw, 2rem); }
.page-hero-ads h1 { max-width: 25ch; font-size: clamp(2.05rem, 3.65vw, 3.85rem); }
.page-hero-ads .actions { margin-top: 1rem; }
.page-hero-ads + .ads-landing { padding-top: 0; }
.section, .cta-section {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2.8rem, 6vw, 5rem) 0;
}
.home-wide-visual {
  position: relative;
  width: 100%;
  min-height: clamp(20rem, 48vw, 36rem);
  overflow: hidden;
  margin: clamp(1rem, 3vw, 2rem) 0 0;
  border-top: 1px solid rgba(138,90,18,.18);
  border-bottom: 1px solid rgba(138,90,18,.18);
  background: var(--sage-wash);
}
.home-wide-visual img {
  width: 100%;
  height: 100%;
  min-height: clamp(20rem, 48vw, 36rem);
  object-fit: cover;
  object-position: center;
}
.home-wide-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(52,55,44,.58), rgba(52,55,44,.18) 48%, rgba(52,55,44,.04));
  pointer-events: none;
}
.wide-visual-caption {
  position: absolute;
  left: max(1rem, calc((100% - 1180px) / 2));
  bottom: clamp(1.4rem, 5vw, 4rem);
  z-index: 1;
  max-width: min(34rem, calc(100% - 2rem));
  color: #fff;
}
.wide-visual-caption h2 { font-size: clamp(1.95rem, 4vw, 3.8rem); text-shadow: 0 14px 32px rgba(0,0,0,.28); }
.section-muted {
  width: 100%;
  max-width: none;
  /* Wechselflächen jetzt oliv statt goldgetönt (LEITLINIE §3.2). Transparent,
     damit die Papierstruktur durchkommt und die Bänder nicht blocken. */
  background: linear-gradient(180deg, var(--sage-wash), var(--sage-wash-med));
  padding-left: max(1rem, calc((100% - 1180px) / 2));
  padding-right: max(1rem, calc((100% - 1180px) / 2));
}
.ads-landing { padding-top: clamp(1rem, 3vw, 2rem); }
.ads-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .78fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  padding: clamp(1.2rem, 3.5vw, 2rem);
  border: 1px solid var(--gold-200);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--white), var(--surface-2));
  box-shadow: var(--shadow);
}
.ads-hero-card h2 { font-size: clamp(1.95rem, 3.8vw, 3.6rem); max-width: 15ch; }
.ads-hero-card p { color: var(--muted); max-width: 45rem; }
.ads-lead { font-size: 1.08rem; }
.microcopy { margin-top: .85rem; font-size: .92rem; color: var(--muted); max-width: 38rem; }
.ads-action-box {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(138,90,18,.22);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--sage-wash-strong), var(--surface-2));
  box-shadow: 0 12px 26px rgba(50,62,42,.06);
}
.ads-action-box > strong {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  line-height: 1.06;
}
.ads-action-box ol {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: adsSteps;
}
.ads-action-box li {
  counter-increment: adsSteps;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  font-weight: 800;
}
.ads-action-box li::before {
  content: counter(adsSteps);
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 60%), var(--gold);
  color: var(--ink);
  font-size: .82rem;
}
.ads-action-box small { color: var(--muted); line-height: 1.45; }
.ads-visual-band {
  position: relative;
  min-height: clamp(15rem, 34vw, 26rem);
  margin: 0 0 clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  border-top: 1px solid rgba(138,90,18,.18);
  border-bottom: 1px solid rgba(138,90,18,.18);
  background: var(--sage-wash);
}
.ads-visual-band img {
  width: 100%;
  height: 100%;
  min-height: clamp(15rem, 34vw, 26rem);
  object-fit: cover;
}
.ads-visual-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(52,55,44,.55), rgba(52,55,44,.12) 56%, rgba(52,55,44,.04));
}
.ads-visual-band > div {
  position: absolute;
  z-index: 1;
  left: max(1rem, calc((100% - 1180px) / 2));
  bottom: clamp(1.3rem, 4vw, 3rem);
  max-width: min(32rem, calc(100% - 2rem));
  color: #fff;
}
.ads-visual-band h2 { text-shadow: 0 14px 32px rgba(0,0,0,.28); }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.case-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.case-card span {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  margin-bottom: .9rem;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 60%), var(--gold);
  color: var(--ink);
  font-weight: 800;
}
.case-card p { color: var(--muted); }
.compact-steps {
  display: grid;
  gap: .8rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.compact-steps li {
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.intro-grid, .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.intro-grid > div, .card, .side-panel, .trust-box, .form, .local-info-card {
  background: linear-gradient(180deg, var(--white), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.5vw, 1.7rem);
}
.intro-grid p:last-child, .card p:last-child, .text-block p:last-child { margin-bottom: 0; }
.split, .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .7fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.text-block + .text-block { margin-top: 2rem; }
.text-block p, .card p, .side-panel p, .faq-list p { color: var(--muted); }
.side-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 1.1rem; background: var(--white); }
.trust-box { display: grid; gap: .8rem; }
.portrait-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 8px; border: 1px solid var(--line); margin-bottom: .35rem; background: var(--white); }
.trust-box span { padding-bottom: .75rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.trust-box span:last-child { border-bottom: 0; padding-bottom: 0; }
.section-heading { max-width: 42rem; margin-bottom: 1.4rem; }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; }
.card, .case-card, .media-card, .local-info-card, .compact-steps li, .steps li, .mini-links a, .link-grid a, .contact-faq-mini details, details {
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}
.card:hover, .case-card:hover, .media-card:hover, .local-info-card:hover, .compact-steps li:hover, .steps li:hover, .mini-links a:hover, .link-grid a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(138,90,18,.42);
}
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; align-items: stretch; margin-top: .4rem; }
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  background: linear-gradient(180deg, var(--white), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(50,62,42,.14); }
.pricing-card-featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--sage-wash-strong), var(--white));
  box-shadow: 0 16px 32px rgba(138,90,18,.2);
}
.pricing-badge {
  position: absolute;
  top: -.68rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 60%), var(--gold);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
  padding: .32rem .85rem;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(138,90,18,.24);
  white-space: nowrap;
}
.pricing-card h3 { margin: .15rem 0 0; font-size: 1.3rem; }
.pricing-card-scope { margin: 0; color: var(--muted); font-size: .92rem; }
.pricing-amount { display: flex; align-items: baseline; gap: .35rem; margin: .1rem 0 0; }
.pricing-amount strong { font-family: var(--font-heading); font-size: clamp(1.85rem, 3vw, 2.3rem); color: var(--gold-dark); line-height: 1; }
.pricing-vat { margin: 0; font-size: .8rem; color: var(--muted); }
.pricing-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.pricing-card ul li { position: relative; padding-left: 1.3rem; color: var(--ink); font-size: .95rem; }
.pricing-card ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: .42rem; height: .42rem; background: var(--gold); border-radius: 999px; }
.pricing-card .button { margin-top: auto; }
.pricing-fineprint { margin-top: 1.2rem; color: var(--muted); font-size: .88rem; max-width: 54rem; }
/* Zwei Angebote neben den Sichtungspaketen: bewusst anders als .pricing-card,
   damit sie nicht als vierte und fuenfte Preisstufe gelesen werden. */
.weitere-angebote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; margin-top: 1.6rem; }
.weiteres-angebot { display: grid; gap: .35rem; align-content: start; padding: 1.3rem 1.5rem; background: var(--sage-wash-med); border: 1px solid var(--sage-line); border-left: 3px solid var(--sage); border-radius: 8px; text-decoration: none; color: var(--ink); transition: background var(--motion-fast), transform var(--motion-fast); }
.weiteres-angebot:hover { background: var(--sage-wash-strong); transform: translateY(-2px); }
.weiteres-angebot-preis { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--sage-dark); line-height: 1; }
.weiteres-angebot strong { font-size: 1.08rem; font-weight: 600; }
.weiteres-angebot span:last-child { font-size: 1rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 680px) { .weitere-angebote { grid-template-columns: 1fr; } }
.stack-actions { display: grid; gap: .65rem; }
/* Aus zwei blossen Trennlinien wird eine eigene, ruhige Olivfläche. */
.orientation-band { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; border: 1px solid var(--sage-line); border-radius: 10px; background: var(--sage-wash-med); padding: clamp(1.4rem, 3vw, 2.2rem); }
.orientation-band p { color: var(--muted); margin-top: 0; }
.orientation-band p:last-child { margin-bottom: 0; }
.image-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.image-strip figure { margin: 0; position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--white); }
.image-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; transition: transform .25s ease; }
.image-strip figure:hover img { transform: scale(1.025); }
.image-strip figcaption { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; width: fit-content; max-width: calc(100% - 1.5rem); padding: .35rem .55rem; border-radius: 6px; background: rgba(46,33,13,.85); color: white; font-size: .86rem; font-weight: 700; }
.visual-story { display: grid; gap: 1rem; }
.visual-note {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.15rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--white), var(--surface-2));
}
.visual-note h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.visual-note p { margin: 0; color: var(--muted); }
.text-link { color: var(--gold-dark); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.side-note {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}
.video-section {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(20rem, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.video-copy p { color: var(--muted); }
.video-consent {
  aspect-ratio: 16 / 9;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(138,90,18,.2);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(52,55,44,.62), rgba(52,55,44,.28)),
    url("/assets/images/fabian-benoehr-nachlasswegweiser-backnang-stuttgart.jpg") center 28% / cover;
  color: #fff;
  box-shadow: var(--shadow);
}
.video-consent > div {
  width: min(26rem, calc(100% - 2rem));
  display: grid;
  gap: .75rem;
  justify-items: start;
}
.video-consent strong {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.08;
}
.video-consent p { margin: 0; color: rgba(255,255,255,.86); }
.video-consent iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.media-section .section-heading p { color: var(--muted); max-width: 52rem; }
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.media-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.media-list li {
  display: grid;
  gap: .15rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--white), var(--surface-2));
}
.media-list span { font-size: .82rem; color: var(--muted); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.media-list strong { font-family: var(--font-heading); font-size: 1.08rem; font-weight: 500; }
.media-card {
  margin: 0;
  background: linear-gradient(180deg, var(--white), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(50,62,42,.055);
}
.media-card a { display: block; text-decoration: none; background: var(--white); }
.media-card img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: top center;
  background: var(--white);
  transition: transform .25s ease;
}
.media-card:hover img { transform: scale(1.018); }
.media-card figcaption {
  display: grid;
  gap: .2rem;
  padding: .85rem .9rem 1rem;
}
.media-card figcaption span {
  color: var(--gold-dark);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
}
.media-card figcaption strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.18;
  font-weight: 600;
}
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; padding: 0; margin: 0; list-style: none; }
.steps li { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.steps span { display: grid; place-items: center; width: 2rem; height: 2rem; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 60%), var(--gold); color: var(--ink); border-radius: 999px; margin-bottom: .75rem; font-weight: 700; box-shadow: 0 7px 16px rgba(50,62,42,.12); }
.steps p { margin-bottom: 0; color: var(--muted); font-size: .95rem; }
.trust-strip {
  width: 100%;
  max-width: none;
  /* Kanonische Markenfläche aus benoehr-brand/tokens.css: --nw-oliv #5f6e4f
     auf --nw-oliv-dark #3e4833 (LEITLINIE §3.2). Der frühere hellere Ton
     #6f7d5a trug weiße Schrift nur mit 4.41:1 und verfehlte damit die
     4.5:1-Vorgabe aus LEITLINIE §8. */
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%), linear-gradient(135deg, #5f6e4f, #3e4833);
  color: #fff;
  padding: clamp(1.4rem, 3vw, 2rem) max(1rem, calc((100% - 1180px) / 2));
}
.trust-strip-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
}
/* Die Zahl bleibt — sie schafft in einer Sekunde Vertrauen. Entschärft wird
   sie nicht durch Weglassen, sondern durch den Nachsatz: „500+" liest das
   Auge zuerst, „und viele Jahre Erfahrung" nimmt dem Zahlenschild danach die
   Härte. Kursiv und leicht zurückgenommen, damit es nachklingt statt zu
   konkurrieren. */
.trust-strip-copy { flex: 1 1 22rem; min-width: 0; }
.trust-strip-stat {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 .75rem;
}
.trust-strip-stat strong { font-family: var(--font-heading); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 600; line-height: 1; color: var(--gold-on-oliv); }
.trust-strip-stat span { font-size: 1rem; line-height: 1.35; color: #fff; max-width: 26ch; }
/* Zweite harte Zahl, deshalb aufrecht statt kursiv: „11+ Jahre Erfahrung"
   ist eine Tatsache (selbstständig seit 2015), keine weiche Beifügung.
   Etwas zurückgenommen, damit sie die 500+ nicht überlagert. */
.trust-strip-stat em { display: block; font-style: normal; color: rgba(255,255,255,.9); }
/* Der Leitfaden ist der einzige kostenlose Mitnehm-Gegenstand der Seite und
   steht deshalb direkt unter dem Hero. Heller Kasten auf der Olivfläche:
   sichtbar, ohne mit dem goldenen Haupt-CTA zu konkurrieren. */
.leitfaden-teaser {
  flex: 0 1 25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  /* Goldrahmen als Familienzeichen (LEITLINIE §3.2: Gold als Zeichen, nicht
     als Fläche). 2px — kräftig genug, dass der Kasten auf dem Oliv sofort
     als Angebot gelesen wird, ohne zum Button zu werden. */
  border: 2px solid var(--gold);
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.leitfaden-teaser:hover { background: rgba(255,255,255,.2); border-color: #eec278; transform: translateY(-2px); }
.leitfaden-teaser-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgba(255,255,255,.16); }
.leitfaden-teaser-text { display: grid; gap: .15rem; min-width: 0; }
/* 1.06rem = 19,1px: über der 18,66px-Grenze, ab der für fetten Text 3:1
   statt 4,5:1 gilt — erst dadurch ist echtes Gold hier zulässig. */
.leitfaden-teaser strong { font-size: 1.06rem; font-weight: 700; line-height: 1.25; color: var(--gold-on-oliv); }
.leitfaden-teaser small { font-size: .84rem; line-height: 1.35; color: rgba(255,255,255,.88); }
.trust-strip-items { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; list-style: none; margin: 0; padding: 0; }
/* .92rem lag mit 16,6px unter der 18px-Vorgabe aus LEITLINIE §8. 1.05rem
   = 18,9px behebt das und hebt die Zeilen zugleich über die 18,66px-Grenze
   für fetten Text, womit hier 3:1 gilt. */
.trust-strip-items li { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; font-weight: 700; color: rgba(255,255,255,.94); }
.trust-strip-items .icon { color: #ede1c9; }
/* „Bekannt aus Bares für Rares" ist das Glaubwürdigkeitssignal der Zeile und
   steht deshalb als einziges in Gold — die beiden anderen sind Wegweiser. */
.trust-strip-items li:first-child, .trust-strip-items li:first-child .icon { color: var(--gold-on-oliv); }
.trust-strip-items a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); transition: border-color var(--motion-fast); }
.trust-strip-items a:hover { border-color: rgba(255,255,255,.9); }
.intro-lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.intro-lead-grid > .intro-lead h2 { font-size: clamp(1.85rem, 3.2vw, 3rem); }
.intro-lead-grid > .intro-lead p { color: var(--muted); font-size: 1.08rem; }
.intro-support-list { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.intro-support-list li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; align-items: start; }
.intro-support-list .intro-support-index {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sage-wash-med);
  color: var(--sage-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
}
.intro-support-list h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.intro-support-list p { margin: 0; color: var(--muted); font-size: .96rem; }
.audience-band {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2rem 0;
}
.mini-links, .link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.mini-links a, .link-grid a { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: .9rem; text-decoration: none; font-weight: 700; }
.region-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.region-section p:last-child { margin: 0; color: var(--muted); }
.cta-section {
  margin-bottom: clamp(2rem, 6vw, 5rem);
  background: linear-gradient(135deg, var(--paper-soft) 0%, var(--sage-wash-med) 55%, var(--sage-wash-strong) 100%);
  color: var(--ink);
  border-radius: 8px;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(138,90,18,.18);
  box-shadow: var(--shadow);
}
.cta-section p { max-width: 45rem; color: var(--muted); }
.check-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 1.4rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: .45rem; height: .45rem; background: var(--gold); border-radius: 999px; }
.faq-list { display: grid; gap: .7rem; }
details { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; }
summary { cursor: pointer; font-weight: 800; }
.form { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; font-weight: 700; color: var(--ink); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 2.8rem;
  padding: .72rem .8rem;
  font: inherit;
  background: var(--white);
  color: var(--ink);
}
textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.form-row label { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.form-row input { width: auto; min-height: auto; }
.fineprint { font-size: .92rem; }
.contact-choice { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .7fr); gap: 1.25rem; align-items: center; background: linear-gradient(180deg, var(--white), var(--sage-wash-med)); border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1rem; box-shadow: var(--shadow); }
.contact-choice h2 { font-size: clamp(1.65rem, 2.6vw, 2.4rem); }
.contact-choice p { color: var(--muted); margin-bottom: 0; }
.contact-choice a:not(.button) { color: var(--gold-dark); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.contact-actions { display: grid; gap: .7rem; }
.contact-local { display: grid; gap: 1rem; }
.local-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.local-info-card h2 { font-size: 1.35rem; margin-bottom: .65rem; }
.local-info-card p { color: var(--muted); margin: 0 0 .75rem; }
.local-info-card p:last-child { margin-bottom: 0; }
.map-contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(20rem, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.map-contact-grid p { color: var(--muted); }
.map-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.map-card {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border: 1px solid rgba(138,90,18,.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--surface-2), var(--sage-wash-med)),
    radial-gradient(circle at 35% 42%, rgba(214,148,49,.16), transparent 22%),
    linear-gradient(90deg, rgba(138,90,18,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(138,90,18,.08) 1px, transparent 1px);
  background-size: auto, auto, 3.2rem 3.2rem, 3.2rem 3.2rem;
  box-shadow: var(--shadow);
}
.map-line { position: absolute; height: 2px; width: 76%; background: rgba(138,90,18,.18); transform-origin: left center; border-radius: 999px; }
.map-line-one { left: 13%; top: 48%; width: 70%; transform: rotate(-8deg); }
.map-line-two { left: 28%; top: 66%; width: 54%; transform: rotate(15deg); }
.map-line-three { left: 51%; top: 25%; height: 62%; width: 2px; transform: rotate(10deg); }
.map-pin {
  position: absolute;
  left: 54%;
  top: 32%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: .15rem;
  min-width: 11rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(138,90,18,.45);
  border-radius: 8px;
  background: var(--surface);
  color: var(--gold-dark);
  box-shadow: 0 14px 30px rgba(50,62,42,.11);
}
.map-pin::before { content: ""; position: absolute; left: 1rem; bottom: -.45rem; width: .9rem; height: .9rem; background: var(--surface); border-right: 1px solid rgba(138,90,18,.45); border-bottom: 1px solid rgba(138,90,18,.45); transform: rotate(45deg); }
.map-pin span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.map-pin strong { font-family: var(--font-heading); font-size: 1.28rem; line-height: 1.1; font-weight: 600; }
.map-city { position: absolute; padding: .25rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .84rem; font-weight: 800; }
.map-city.stuttgart { left: 44%; bottom: 9%; }
.map-city.ludwigsburg { left: 12%; top: 43%; }
.map-city.winnenden { right: 13%; top: 43%; }
.map-city.waiblingen { right: 20%; bottom: 26%; }
.contact-seo-block { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; border-top: 1px solid var(--line); padding-top: 2rem; }
.contact-seo-block p { color: var(--muted); }
.contact-faq-mini { display: grid; gap: .65rem; }
.contact-faq-mini details { border: 1px solid var(--line); border-radius: 8px; padding: .95rem 1rem; background: var(--white); }
.contact-faq-mini summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.contact-faq-mini p { margin-bottom: 0; }
.contact-direct { background: var(--sage-wash-med); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.contact-direct a { color: var(--gold-dark); font-weight: 700; }
.form-note { margin: 0; padding: .9rem 1rem; border: 1px solid var(--sage-line); border-radius: 8px; background: var(--sage-wash-med); color: var(--muted); }
/* Honigtopf: aus dem Sichtfeld geschoben statt display:none — manche Bots
   ignorieren versteckte Felder, aber nicht ausgelagerte. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 8px; font-weight: 600; }
.form-status-fehler { border: 1px solid #a3401f; background: #fdf0ea; color: #7c2d12; }
.form-note a { color: var(--gold-dark); font-weight: 800; }
.footer-links a, .form-note a, .contact-direct a { overflow-wrap: anywhere; }
.leitfaden-artikel { max-width: 760px; }
.leitfaden-artikel h2 { margin: 2.6rem 0 .8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.leitfaden-artikel h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.leitfaden-artikel h3 { margin: 1.8rem 0 .5rem; font-size: 1.15rem; }
.leitfaden-artikel p { color: var(--muted); margin: 0 0 1rem; }
.leitfaden-artikel > p:first-of-type { margin-bottom: 0; }
.leitfaden-brotkrume { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.leitfaden-brotkrume a { color: var(--gold-dark); }
.leitfaden-unterzeile { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.4rem; }
.leitfaden-einstieg { background: var(--sage-wash-med); border-radius: 6px; padding: 1.1rem 1.3rem; margin: 0 0 1.6rem; color: var(--ink); }
.leitfaden-einstieg strong { color: var(--gold-dark); }
.leitfaden-download { margin: 1.2rem 0 2rem; }
.leitfaden-schritte { counter-reset: lfschritt; list-style: none; margin: 1.4rem 0; padding: 0; }
.leitfaden-schritte li { counter-increment: lfschritt; position: relative; padding-left: 3.1rem; margin-bottom: 1.2rem; color: var(--muted); }
.leitfaden-schritte li::before { content: counter(lfschritt); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 60%), var(--gold); color: var(--ink); font-weight: 700; display: grid; place-items: center; box-shadow: 0 7px 16px rgba(50,62,42,.12); }
.leitfaden-schritte b { display: block; color: var(--ink); margin-bottom: .15rem; }
.leitfaden-merksatz { font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--gold-dark); margin: 1.6rem 0; }
.leitfaden-warnung { background: var(--gold-100); border-radius: 6px; padding: 1rem 1.3rem; margin: 1.4rem 0; }
.leitfaden-warnung p { color: var(--ink); margin: 0; }
.leitfaden-tabelle { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: .95rem; }
.leitfaden-tabelle th { text-align: left; background: var(--sage-wash); padding: .55rem .75rem; font-weight: 800; border-bottom: 2px solid var(--gold); }
.leitfaden-tabelle td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.leitfaden-rechtshinweis { font-size: .84rem; color: var(--muted); line-height: 1.6; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.legal-text {
  max-width: 900px;
  color: var(--muted);
}
.legal-text h2,
.legal-text h3,
.legal-text h4 {
  color: var(--ink);
  margin-top: 2rem;
  margin-bottom: .65rem;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.25;
}
.legal-text h2 { font-size: 1.45rem; }
.legal-text h3 { font-size: 1.15rem; }
.legal-text h4 { font-size: 1rem; }
.legal-text p { margin: 0 0 1rem; }
.legal-text ul { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.legal-text li { margin-bottom: .55rem; }
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem clamp(1rem, 4vw, 4rem);
  /* Oliv als volle Fläche — Kopf und Fuß rahmen die Seite in der Markenfarbe,
     der Inhalt dazwischen bleibt Papier. Gleiche Stops wie .site-header. */
  background: linear-gradient(135deg, #5f6e4f, #3e4833);
  color: #fff;
  border-top: 1px solid rgba(0,0,0,.2);
}
.site-footer strong { color: #fff; }
/* .92 statt voll deckend: nimmt dem Fließtext etwas Gewicht, bleibt aber mit
   5,0:1 über der 4.5:1-Vorgabe aus LEITLINIE §8. */
.site-footer p { color: rgba(255,255,255,.92); max-width: 45rem; margin-bottom: 0; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; align-content: start; }
.footer-links a { color: #fff; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: .2em; }
.footer-links a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.whatsapp-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 8; display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 60%), var(--gold); color: var(--ink); border: 1px solid rgba(138,90,18,.25); border-radius: 999px; padding: .74rem 1rem; box-shadow: 0 12px 26px rgba(44,48,38,.16); white-space: nowrap; max-width: calc(100vw - 2rem); transition: transform var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast); }
.whatsapp-float:hover { background: linear-gradient(160deg, rgba(255,255,255,.2), transparent 60%), var(--gold-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 16px 30px rgba(44,48,38,.2); }
.whatsapp-float span { display: none; }
.whatsapp-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
.whatsapp-float strong { font-size: .88rem; line-height: 1.1; font-weight: 700; }
/* Der Float-Balken bleibt kompakt, damit er keine Inhalte verdeckt; der
   zusaetzliche Seitenabstand unten sorgt dafuer, dass er auch am Seitenende
   nichts ueberlagert. */
body { padding-bottom: 4.5rem; }
/* ---- Kurzprofil fuer Berufstraeger -------------------------------------
   Bewusst nuechtern: kein Bild, keine Farbflaeche ausser dem einen Kasten,
   keine CTA-Bloecke. Das Dokument soll in einer Akte und in einer
   Teambesprechung bestehen, nicht werben. */
.einseiter { max-width: 46rem; }
.einseiter-kopf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding-bottom: .7rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--sage);
}
.einseiter-logo { width: 3rem; height: 3rem; object-fit: contain; background: #fff; border: 1px solid var(--sage-line); border-radius: 999px; padding: .2rem; }
.einseiter-marke { display: grid; }
.einseiter-marke strong { font-family: var(--font-heading); font-size: 1.24rem; font-weight: 600; line-height: 1.1; color: var(--sage-dark); }
.einseiter-marke span { font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.einseiter-kontaktkopf { text-align: right; font-size: .84rem; line-height: 1.45; color: var(--muted); }
/* Olivbalken links an jeder Zwischenueberschrift — traegt die Marke durchs
   Dokument, ohne dass eine Flaeche gedruckt werden muss. */
.einseiter h2 { font-size: 1.22rem; margin: 1.5rem 0 .4rem; padding-left: .6rem; border-left: 3px solid var(--sage); }
.einseiter-kasten h2 { padding-left: 0; border-left: 0; margin-top: 0; }
/* Die Unabhaengigkeitszeile steht bewusst klein und grau am Schluss — wie die
   MwSt-Hinweise. Sie soll belegbar dastehen, nicht beworben werden. */
.einseiter-trennregel { margin-top: 1.4rem; }
.einseiter-aktion { margin: 1.6rem 0 0; }
.einseiter p { margin: 0 0 .7rem; }
.einseiter ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
.einseiter li { margin-bottom: .3rem; }
.einseiter-klein { font-size: .92rem; color: var(--muted); }
.einseiter-kasten {
  border: 2px solid var(--sage);
  border-radius: 10px;
  background: var(--sage-wash-med);
  padding: 1.1rem 1.3rem;
  margin-bottom: .4rem;
}
.einseiter-kasten h2 { margin-top: 0; }
.einseiter-tabelle { border-collapse: collapse; margin: 0 0 .6rem; }
.einseiter-tabelle td { padding: .3rem 1.6rem .3rem 0; border-bottom: 1px solid var(--line); }
.einseiter-fuss { margin-top: 1.6rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.einseiter-fuss p { margin: 0; }
@media print {
  /* Auf genau eine A4-Seite zwingen. Gemessen und nachjustiert — der
     Einseiter verliert seinen Zweck, wenn er auf zwei Blaetter laeuft. */
  .einseiter { max-width: none; }
  /* Browser drucken Hintergruende und Rahmenfarben standardmaessig nicht.
     Ohne diese Zeile waere der Briefkopf im PDF grau und das Logo leer. */
  .einseiter-kopf, .einseiter-logo, .einseiter h2, .einseiter-kasten {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .einseiter-kopf { gap: .6rem; padding-bottom: .4rem; margin-bottom: .6rem; border-bottom-width: 1.5pt; }
  .einseiter-logo { width: 2.1rem; height: 2.1rem; }
  .einseiter-marke strong { font-size: 13pt; }
  .einseiter-marke span { font-size: 7.6pt; }
  .einseiter-kontaktkopf { font-size: 7.6pt; line-height: 1.35; }
  .einseiter h2 { font-size: 11.5pt; margin: .5em 0 .2em; padding-left: .45rem; border-left-width: 2.5pt; }
  .einseiter p, .einseiter li, .einseiter td { font-size: 9.6pt; line-height: 1.3; }
  .einseiter p { margin-bottom: .45em; }
  .einseiter ul { margin-bottom: .45em; }
  .einseiter li { margin-bottom: .1em; }
  .einseiter-klein { font-size: 8.4pt; }
  /* Olivrahmen statt schwarz: Der Kasten traegt die wichtigste Aussage des
     Blattes und darf sich auch im Druck abheben. */
  .einseiter-kasten { border: 1.5pt solid var(--sage); background: none; padding: .45rem .65rem; margin-bottom: .3rem; break-inside: avoid; }
  .einseiter-kasten h2 { border-left: 0; padding-left: 0; }
  .einseiter-tabelle td { padding: .18rem 1.4rem .18rem 0; }
  .einseiter-fuss { margin-top: .7rem; padding-top: .4rem; font-size: 8.2pt; }
  /* Kopfbereich dieser einen Seite mitverdichten, ohne andere Seiten
     anzufassen — :has() greift nur, wo ein .einseiter im main steht. */
  main:has(.einseiter) .page-hero { padding: 0; margin-bottom: .3rem; }
  main:has(.einseiter) .page-hero h1 { font-size: 15pt; max-width: none; margin-bottom: .15em; }
  main:has(.einseiter) .page-hero p { font-size: 9.4pt; margin: 0; }
}
/* ---- Druckansicht ------------------------------------------------------
   Damit das Leitfaden-PDF nicht mehr von Hand gepflegt werden muss: Seite
   im Browser oeffnen, „Drucken -> Als PDF sichern". Der Inhalt kommt dann
   immer aus build-site.mjs und kann nicht mehr veralten. Navigation,
   Buttons und Schmuckflaechen fliegen raus, Links bekommen ihre Adresse
   ausgeschrieben, damit sie auf Papier nachvollziehbar bleiben. */
@media print {
  .site-header, .site-footer, .nav, .nav-toggle, .whatsapp-float, .actions,
  .trust-strip, .cta-section, .video-section, .media-section, .image-strip,
  .leitfaden-download, .leitfaden-brotkrume, .mini-links, .link-grid,
  .einseiter-aktion,
  .contact-choice, .map-card { display: none !important; }
  html { font-size: 100%; }
  body { padding: 0; background: #fff; color: #000; }
  body::before { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section, .leitfaden-artikel { max-width: none; padding: 0; margin: 0 0 1.2rem; }
  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; margin-top: 1.2em; }
  h3 { font-size: 12pt; }
  p, li, td, th { font-size: 10.5pt; line-height: 1.45; }
  h1, h2, h3, .leitfaden-warnung, .leitfaden-merksatz { break-after: avoid; break-inside: avoid; }
  table, figure, .leitfaden-warnung { break-inside: avoid; }
  .leitfaden-warnung, .leitfaden-einstieg { border: 1pt solid #000; background: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="/"]::after { content: " (wertsichtung.de" attr(href) ")"; font-size: 8.5pt; }
  a[href^="http"]:not([href*="wertsichtung.de"])::after { content: " (" attr(href) ")"; font-size: 8.5pt; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
  /* Kontaktzeile nur auf Papier: ersetzt die weggefallene Fussleiste. */
  .leitfaden-artikel::after {
    content: "Wertsichtung im Nachlass · Fabian Benöhr e.K. · Zwischenäckerle 60, 71522 Backnang · 0157 566 909 00 · info@wertsichtung.de · wertsichtung.de";
    display: block; margin-top: 1.5rem; padding-top: .6rem;
    border-top: 1pt solid #000; font-size: 9pt;
  }
}
@media (max-width: 1180px) {
  .site-header { align-items: center; flex-wrap: wrap; gap: .75rem; position: sticky; }
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .header-actions { order: 3; }
  .nav { order: 4; flex-basis: 100%; justify-content: flex-start; }
  .nav:not(.is-open) { display: none; }
  .nav.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-bottom: .35rem; }
  .nav.is-open a { border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: .6rem .7rem; background: rgba(255,255,255,.14); }
  .nav.is-open a + a { border-left: 1px solid rgba(255,255,255,.35); }
}
@media (max-width: 900px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: .9rem; position: static; }
  .nav { justify-content: flex-start; }
  .hero, .split, .contact-grid, .contact-choice, .map-contact-grid, .contact-seo-block, .orientation-band, .audience-band, .region-section, .visual-note, .video-section, .ads-hero-card, .intro-lead-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: clamp(1.25rem, 4vw, 2rem); gap: 1.25rem; }
  .hero-copy { display: contents; }
  .hero-copy h1 { order: 1; }
  .hero-image { order: 2; }
  .hero-claim { order: 3; margin-top: 0; }
  .hero-byline { order: 4; }
  .hero-copy .actions { order: 5; }
  .hero-image img { aspect-ratio: 16 / 10; }
  .hero-image::after { display: none; }
  .intro-grid, .card-grid, .steps, .image-strip, .local-info-grid, .media-grid, .case-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .brand { min-width: 0; }
  .nav.is-open { grid-template-columns: 1fr; }
  .nav.is-open a { font-size: .9rem; }
  .header-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .actions, .contact-actions, .stack-actions { width: 100%; }
  .button { width: 100%; white-space: normal; }
  .header-actions .button { width: auto; white-space: nowrap; }
  h1 { font-size: 2.18rem; max-width: 100%; }
  .intro-grid, .card-grid, .steps, .image-strip, .mini-links, .link-grid, .form-row, .local-info-grid, .media-grid, .case-grid, .pricing-grid { grid-template-columns: 1fr; }
  .pricing-badge { top: -.6rem; }
  .media-card img { aspect-ratio: 4 / 3.6; }
  .map-card { min-height: 19rem; }
  .map-pin { left: 55%; top: 30%; min-width: 9.5rem; }
  .map-city.stuttgart { left: 42%; right: auto; bottom: 10%; }
  .map-city.ludwigsburg { left: 7%; right: auto; top: 43%; }
  .map-city.winnenden { right: 7%; left: auto; top: 43%; }
  .map-city.waiblingen { right: 13%; left: auto; bottom: 29%; }
  .site-footer { flex-direction: column; }
  .whatsapp-float { left: .75rem; right: .75rem; bottom: .75rem; justify-content: center; padding: .78rem .85rem; }
  .whatsapp-float span { font-size: .78rem; }
  .whatsapp-float strong { font-size: .88rem; }
}
@media (max-width: 420px) {
  h1 { font-size: 2.02rem; }
  h2 { font-size: 1.55rem; }
  .hero, .page-hero, .section, .cta-section { width: min(100% - 1.25rem, 1180px); }
  .site-header, .site-footer { padding-left: .75rem; padding-right: .75rem; }
  .whatsapp-float { gap: .38rem; padding-left: .65rem; padding-right: .65rem; }
  .whatsapp-float span { display: none; }
  /* „Kontakt per WhatsApp" passt auf schmalen Geraeten
     nicht in eine Zeile. Statt den Text zu verkleinern — die Zielgruppe
     liest ohnehin schlechter — darf er hier umbrechen. */
  .whatsapp-float { white-space: normal; }
  .whatsapp-float strong { font-size: .88rem; line-height: 1.22; text-align: center; }
}
@media (max-width: 360px) {
  h1 { font-size: 1.88rem; }
  .nav a { font-size: .82rem; padding: .5rem; }
  .header-actions { gap: .45rem; }
  .header-call { padding-left: .72rem; padding-right: .72rem; }
}