/* ============================================================
   DURCHBLICK — Theme CSS
   Palette: warm cream, forest green, warm ochre
   Type: Cormorant Garamond (serif) + Source Sans 3 (body)
   ============================================================ */

:root {
  --cream: #F5F0EB;
  --cream-dark: #EDE6DC;
  --cream-border: #D4C4A8;
  --green: #243D29;
  --green-mid: #2D4A35;
  --green-light: #3D6B4F;
  --green-soft: #4A7A5A;
  --ochre: #A07850;
  --ochre-warm: #C4956A;
  --ochre-light: #B8875A;
  --text-dark: #1A1A18;
  --text-mid: #4A4540;
  --text-light: #7A7068;
  --white: #FEFCF8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--text-dark);
  font-family: 'Source Sans 3', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ──
   One bar, one height, on every page. `--nav-h` is the contract: pages set
   their own top padding from it rather than each guessing a number, so the
   bar can never overlap page content or leave a dead band under itself. */
:root { --nav-h: 64px; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-border);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
}

/* Menu = the content links, pushed right; the CTA sits beside it. */
.nav-menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-item {
  font-size: 14px;
  color: var(--text-mid);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-item:hover { color: var(--green); border-bottom-color: var(--cream-border); }
.nav-item.is-active {
  color: var(--green);
  font-weight: 600;
  border-bottom-color: var(--ochre);
}

/* The primary action states its outcome ("Checkliste erstellen"), not its
   mechanism, and carries the two facts people hesitate over: price and
   effort. Ambiguity here is what makes a CTA feel like a trap. */
.nav-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  padding: 8px 18px;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--green-mid); border-color: var(--green-mid); }
.nav-cta[hidden] { display: none; }
.nav-cta-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.nav-cta-note {
  font-size: 11px;
  font-weight: 300;
  color: rgba(247, 242, 236, 0.75);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
/* Returning-visitor state. Its label is far longer than "Checkliste
   erstellen", so it gets a tighter type size and wraps to two lines. The
   width is set so it wraps to exactly two — at three the button grew the bar
   past --nav-h, and since every page derives its top padding from that
   variable, the nav would have started covering page content. */
.nav-cta--wide { padding: 6px 14px; }
.nav-cta--wide .nav-cta-label {
  font-size: 12.5px;
  line-height: 1.22;
  max-width: 27ch;
  text-align: center;
  text-wrap: balance;
}
.nav-cta--wide .nav-cta-note { font-size: 10px; }

/* Minimal variant — paywall and letter flow. */
.nav--minimal .nav-inner { justify-content: space-between; }
.nav-back {
  font-size: 14px;
  color: var(--text-mid);
  text-decoration: none;
  font-weight: 400;
}
.nav-back:hover { color: var(--green); text-decoration: underline; }

/* Mobile menu button — hidden until the bar actually runs out of room. */
.nav-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--cream-border);
  border-radius: 3px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--green);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  padding: calc(var(--nav-h) + 32px) 0 44px;
  background: var(--cream);
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 300;
  margin-bottom: 18px;
}
.eyebrow-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ochre);
}
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--green);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 480px;
  margin-bottom: 0;
  font-weight: 300;
}
.hero-illustration {
  width: 100%;
}
.hero-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(36, 61, 41, 0.08);
}

/* ── SHARED SECTION STYLES ──
   Scoped to the landing page's top-level bands. As a bare `section` selector
   this also hit every nested <section> in the guides — 11 of them on
   /erbschein-beantragen, adding ~960px of padding nobody asked for on top of
   the margins those sections already set for themselves. */
body > section {
  padding: 44px 0;
}
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 400;
  margin-bottom: 10px;
}

/* Number overlay (shared).
   These are ornament, not content. In flow they cost ~44px of blank band
   above every section heading, and clawing that back with a negative margin
   only made them overlap the headline. Taking them out of flow entirely
   costs nothing vertically and cannot collide. Siblings are promoted to
   position:relative below so they paint above the watermark. */
.manifest-num,
.thegap-num,
.howitworks-num,
.about-home-num,
.closing-num {
  position: absolute;
  top: -14px;
  left: 48px;
  z-index: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 68px;
  font-weight: 700;
  color: var(--cream-border);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 0;
  pointer-events: none;
}
.manifest-inner,
.thegap-inner,
.howitworks-inner,
.about-home-inner,
.closing-inner { position: relative; }
.manifest-inner > *:not([class$="-num"]),
.thegap-inner > *:not([class$="-num"]),
.howitworks-inner > *:not([class$="-num"]),
.about-home-inner > *:not([class$="-num"]),
.closing-inner > *:not([class$="-num"]) { position: relative; z-index: 1; }

/* ── PHASE 2 ── */
.phase2 {
  background: var(--cream-dark);
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
}
.phase2-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.phase2-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 400;
  margin-bottom: 20px;
}
.phase2-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  max-width: 600px;
}
.phase2-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  max-width: 600px;
  margin-bottom: 32px;
}
.phase2-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 40px;
  max-width: 560px;
}
.phase2-list li {
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--cream-border);
  padding: 7px 14px;
  border-radius: 3px;
  font-weight: 400;
}
.phase2-list li.phase2-more {
  background: transparent;
  border: 1px dashed var(--cream-border);
  color: var(--text-light);
  font-style: italic;
}
.phase2-footer {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.phase2-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phase2-price-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--green);
}
.phase2-price-note {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 300;
}
.phase2-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--green);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s;
  letter-spacing: 0.03em;
}
.phase2-cta:hover { background: var(--green-mid); }

.hero-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 26px;
  padding: 13px 26px;
  background: var(--green);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s;
  letter-spacing: 0.03em;
}
.hero-cta:hover { background: var(--green-mid); }
.hero-cta-label { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hero-cta-note {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(247, 242, 236, 0.75);
  line-height: 1.3;
}

/* ── MANIFEST ── */
.manifest {
  background: var(--cream-dark);
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
}
.manifest-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0 64px;
  align-items: start;
}
/* The decorative numeral is a third child of a two-column grid, so
   auto-placement was giving it the whole wide cell of row 1 and pushing the
   prose into the 280px stat column — a 10-line paragraph in a sliver, with
   ~580px of empty cell beside it. Span it across both columns so it stays a
   heading ornament and the text gets the wide column it was written for. */

.manifest-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.manifest-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin-bottom: 14px;
  font-weight: 300;
}
.manifest-body-strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--green);
  margin-top: 28px;
  border-top: 1px solid var(--cream-border);
  padding-top: 20px;
}
.manifest-stat-col {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.stat {}
.stat-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}
.stat-label {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-light);
  font-weight: 300;
}

/* ── THE GAP ── */
.thegap {
  background: var(--cream);
}
.thegap-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.thegap-header {
  margin-bottom: 26px;
  max-width: 640px;
}
.thegap-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.thegap-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 60px;
  margin-bottom: 24px;
}
.gap-divider {
  background: var(--cream-border);
  width: 1px;
  align-self: stretch;
}
.gap-item {}
.gap-icon {
  margin-bottom: 20px;
}
.gap-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 16px;
}
.gap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gap-list li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  padding-left: 20px;
  position: relative;
  font-weight: 300;
}
.gap-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 12px;
  top: 2px;
}
.gap-list--muted li { color: var(--text-light); }
.gap-list--muted li::before { color: var(--cream-border); }
.thegap-closing {
  border-top: 1px solid var(--cream-border);
  padding-top: 32px;
  max-width: 640px;
}
.thegap-closing p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}
.thegap-closing strong { color: var(--green); font-weight: 600; }

/* ── HOW IT WORKS ── */
.howitworks {
  background: var(--cream-dark);
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
}
.howitworks-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.howitworks-header {
  margin-bottom: 26px;
}
.howitworks-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0 24px;
  align-items: start;
}
.step {}
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--green);
  opacity: 0.2;
  line-height: 1;
  margin-bottom: 16px;
}
.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 12px;
}
.step-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}
.step-connector {
  display: flex;
  align-items: center;
  padding-top: 24px;
}
.howitworks-note {
  margin-top: 28px;
  border-top: 1px solid var(--cream-border);
  padding-top: 28px;
}
.howitworks-note p {
  font-size: 14px;
  color: var(--text-light);
  font-weight: 300;
  font-style: italic;
}

/* ── CLOSING ── */
.closing {
  background: var(--green);
  color: var(--cream);
}
.closing-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.closing .section-eyebrow {
  color: var(--ochre-warm);
}
.closing-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}
.closing-body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(245, 240, 235, 0.75);
  font-weight: 300;
  max-width: 600px;
}

/* ── ABOUT (home short version) ── */
.about-home {
  background: var(--cream-dark);
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
}
.about-home-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}

.about-home-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  max-width: 720px;
}
.about-home-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  margin-bottom: 14px;
  max-width: 640px;
}
.about-home-cta { margin-top: 12px; }

/* ── FOOTER ── */
.footer {
  background: var(--green);
  border-top: 1px solid rgba(196, 149, 106, 0.2);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.footer-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 8px;
}
.footer-desc {
  font-size: 13px;
  color: rgba(245, 240, 235, 0.5);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
}
.footer-note {
  font-size: 12px;
  color: rgba(245, 240, 235, 0.35);
  text-align: right;
  max-width: 280px;
  line-height: 1.6;
  font-weight: 300;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  /* The three content links no longer fit beside the CTA. Rather than
     hiding them (which used to strand them in the footer), fold them into
     a menu that drops out of the bar. The primary action stays in the bar
     at all times — it is the one thing a first-time visitor needs, and it
     should never cost a tap to reveal. */
  .nav-inner { padding: 0 20px; gap: 12px; flex-wrap: wrap; }
  .nav-brand { margin-right: auto; }
  .nav-cta { order: 2; padding: 7px 14px; }
  .nav-toggle { display: flex; order: 3; margin-left: 0; }
  .nav-menu {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0 12px;
  }
  .nav-menu.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item {
    padding: 14px 2px;
    border-bottom: 1px solid var(--cream-border);
    font-size: 16px;
  }
  .nav-item.is-active { border-bottom-color: var(--ochre); }

  /* The returning-visitor label is long enough that, at full size, brand +
     button + burger no longer fit one row — the bar wrapped to two and the
     fixed nav started covering the hero. Shrink the label and drop the note
     so the bar stays a single row within --nav-h. */
  .nav-cta--wide { padding: 5px 12px; }
  .nav-cta--wide .nav-cta-label { font-size: 11px; max-width: 26ch; }
  .nav-cta--wide .nav-cta-note { display: none; }
}

@media (max-width: 420px) {
  /* Brand + button + burger is tight; the CTA's second line is the first
     thing to go, not the button itself. */
  .nav-cta-note { display: none; }
  .nav-cta-label { font-size: 13px; }
  .nav-inner { gap: 8px; padding: 0 16px; }
  .nav-cta--wide .nav-cta-label { font-size: 10.5px; max-width: 24ch; }
}

@media (max-width: 345px) {
  /* Smallest phones still in use (320px). Let the long label run to three
     narrow lines rather than wrapping the bar itself — three lines still fit
     inside --nav-h, a wrapped bar does not. */
  .nav-brand { font-size: 19px; }
  .nav-cta--wide { padding: 4px 10px; }
  .nav-cta--wide .nav-cta-label { font-size: 10px; max-width: 18ch; }
}

@media (max-width: 768px) {
  .hero { padding: calc(var(--nav-h) + 28px) 0 40px; }
  .hero-inner { grid-template-columns: 1fr; padding: 0 24px; gap: 24px; }
  .hero-illustration { order: -1; }
  .hero-svg { max-height: 170px; object-fit: cover; }
  .hero-eyebrow { margin-bottom: 16px; }
  .hero-headline { margin-bottom: 16px; }
  .hero-sub { margin-bottom: 20px; }
  .hero-cta { margin-top: 20px; }
  .manifest-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
  .manifest-stat-col { flex-direction: row; flex-wrap: wrap; }
  .stat { min-width: 120px; }
  .thegap-inner { padding: 0 24px; }
  .thegap-grid { grid-template-columns: 1fr; gap: 40px; }
  .gap-divider { display: none; }
  .howitworks-inner { padding: 0 24px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .step-connector { display: none; }
  .closing-inner { padding: 0 24px; }
  .footer-inner { flex-direction: column; gap: 24px; align-items: flex-start; padding: 32px 24px; }
  .footer-note { text-align: left; }
  .manifest-num, .thegap-num, .howitworks-num, .closing-num, .about-home-num { font-size: 56px; left: 24px; }
  body > section { padding: 36px 0; }
}

@media (max-width: 480px) {
  .hero-svg { max-height: 130px; }
  .hero-headline { font-size: 36px; }
  .hero-sub { font-size: 16px; }
  .stat-num { font-size: 44px; }
  .closing-quote { font-size: 32px; }
}

/* ============================================================
   DURCHBLICK APP — Intake Form & Checklist
   ============================================================ */

/* ── FLOW STEPS ──
   Shown at the top of the questionnaire and the task list. Three stages,
   stated once, so nobody has to hold the shape of the process in their head
   while also being told what to do next. */
.flow-steps {
  display: flex;
  align-items: stretch;
  gap: 8px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.flow-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 3px;
  border: 1px solid var(--cream-border);
  background: transparent;
  min-width: 0;
}
.flow-step-marker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--cream-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  background: var(--cream);
}
.flow-step-text { display: flex; flex-direction: column; min-width: 0; }
.flow-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-step-note {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-light);
  line-height: 1.3;
}
.flow-step.is-current {
  background: var(--white);
  border-color: var(--green);
}
.flow-step.is-current .flow-step-marker {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}
.flow-step.is-current .flow-step-label { color: var(--green); }
.flow-step.is-done .flow-step-marker {
  background: var(--cream-dark);
  border-color: var(--green-light);
  color: var(--green);
}
.flow-step.is-done .flow-step-label { color: var(--text-mid); }
.flow-step.is-upcoming { opacity: 0.65; }

@media (max-width: 600px) {
  .flow-steps { gap: 6px; }
  .flow-step { padding: 8px 10px; gap: 7px; }
  .flow-step-note { display: none; }
  .flow-step-label { font-size: 12px; }
  /* Three full labels don't fit on a phone, and ellipsing all three
     ("Fragebo…", "Ihre Auf…") tells you nothing. Give the width to the step
     you're actually on and let the others be numbered markers. */
  .flow-step { flex: 0 0 auto; }
  .flow-step.is-current { flex: 1 1 auto; }
  .flow-step:not(.is-current) .flow-step-text { display: none; }
  .flow-step:not(.is-current) { padding: 8px; }
}

/* ── INTAKE PAGE ── */
.intake-page {
  padding-top: var(--nav-h);
  min-height: 100vh;
  background: var(--cream);
}
.intake-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 48px 64px;
}
.intake-header { margin-bottom: 36px; }
.intake-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  margin-top: 12px;
}
.intake-subtext {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}

/* ── FORM ── */
.intake-form { display: flex; flex-direction: column; gap: 28px; }
.form-group { display: flex; flex-direction: column; gap: 10px; }
/* Block, not flex: the questions contain inline <strong> ("Wohnortes",
   "notarielle Vollmacht"), and as a flex parent every text run became its
   own flex item — the emphasised words drifted apart mid-sentence and long
   questions broke into a ragged grid. The number is positioned out of flow
   so the sentence stays one normal line of text. */
.form-label {
  position: relative;
  display: block;
  padding-left: 38px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text-dark);
}
.q-num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--green);
  color: var(--cream);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Cormorant Garamond', serif;
  flex-shrink: 0;
  letter-spacing: 0;
}
.form-input {
  padding: 14px 16px;
  border: 1px solid var(--cream-border);
  background: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  border-radius: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(36, 61, 41, 0.08);
}
.form-hint {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1.6;
}

/* Radio options */
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 12px 16px;
  border: 1px solid var(--cream-border);
  border-radius: 2px;
  background: var(--white);
  transition: border-color 0.2s, background 0.2s;
}
.radio-option:hover { border-color: var(--green); background: rgba(36,61,41,0.03); }
.radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.radio-label { font-size: 15px; color: var(--text-dark); }

/* Submit button */
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--green);
  color: var(--cream);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
  align-self: flex-start;
}
.form-submit:hover { background: var(--green-mid); }
.form-submit svg { transition: transform 0.2s; }
.form-submit:hover svg { transform: translateX(4px); }

.intake-footer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cream-border);
  font-size: 13px;
  color: var(--text-light);
  font-weight: 300;
}

/* ── CHECKLIST PAGE ── */
.checklist-page {
  padding-top: var(--nav-h);
  min-height: 100vh;
  background: var(--cream);
}
.checklist-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 48px 64px;
}
.no-checklist-inner {
  text-align: center;
  padding: 120px 24px;
}
.no-checklist-inner h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  color: var(--green);
  margin-bottom: 16px;
}
.no-checklist-inner p { color: var(--text-mid); font-weight: 300; }

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cream-border);
}
.checklist-meta { flex: 1; }
.checklist-page-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 12px;
  margin-bottom: 10px;
}
.checklist-intro {
  font-size: 14px;
  color: var(--text-light);
  font-weight: 300;
  font-style: italic;
}

/* ── "Fangen Sie hier an" ──
   Replaces a generic reassurance panel that named no actual task. These are
   this person's own items, in the order they have to happen, each with the
   reason it cannot wait. */
/* Card chrome is shared with the other panel-level cards on /letters
   (.email-save-card, .letter-card, .standesamt-action-card,
   .anlagen-hint-box): 6px radius, 24px/28px padding, 3px left accent,
   24px gap. They sat at five different values and read as five
   different components stacked in one column. */
.first-steps {
  border: 1px solid var(--green-light);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  background: var(--white);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 2px 16px rgba(36, 61, 41, 0.05);
}
.first-steps[hidden] { display: none; }
.first-steps-head { margin-bottom: 18px; }
.first-steps-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.first-steps-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  margin: 0;
}
.first-steps-list {
  list-style: none;
  counter-reset: firststep;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.first-step {
  position: relative;
  counter-increment: firststep;
  padding: 14px 18px 14px 52px;
  background: var(--cream-dark);
  border-radius: 3px;
}
.first-step::before {
  content: counter(firststep);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.first-step-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.35;
  margin-bottom: 3px;
}
.first-step-why {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}
.first-step-jump {
  display: inline-block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ochre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.first-step-jump:hover { color: var(--green); border-bottom-color: var(--green); }
.first-steps-rest {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-light);
  font-weight: 300;
  margin: 16px 0 0;
}
.first-steps-clear-msg {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  margin: 0;
}
.first-steps--clear .first-steps-rest { display: none; }

/* Highlight the task you just jumped to, so the anchor lands somewhere
   visible instead of dropping you into an undifferentiated list. */
.checklist-item:target {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(36, 61, 41, 0.08);
}

/* Full-list header */
.checklist-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}
.checklist-list-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.01em;
  margin: 0;
}
.checklist-list-hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-light);
  font-weight: 300;
  margin: 0 0 20px;
}

.checklist-progress-box {
  flex-shrink: 0;
  width: 180px;
}
.progress-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 400;
  margin-bottom: 8px;
}
.progress-bar-track {
  height: 6px;
  background: var(--cream-dark);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0%;
}

/* Filter tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.filter-tab {
  padding: 8px 18px;
  font-size: 13px;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  color: var(--text-light);
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-tab:hover { color: var(--green); border-color: var(--cream-border); }
.filter-tab.active {
  color: var(--green);
  background: var(--cream-dark);
  border-color: var(--cream-border);
  font-weight: 600;
}

/* Category sections.
   42 tasks spread over 20 categories, several holding a single item — the
   per-category chrome was costing roughly a third of the page height. */
.category-section { margin-bottom: 24px; }
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cream-border);
}
.category-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.01em;
}
.category-count {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 300;
}
.category-items { display: flex; flex-direction: column; gap: 6px; }

/* Checklist item */
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 18px;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 3px;
  transition: border-color 0.2s, opacity 0.3s;
  cursor: default;
}
.checklist-item:hover { border-color: var(--green-light); }
.checklist-item.done { opacity: 0.65; }
.checklist-item.in-progress { border-color: var(--ochre); }

.item-status-toggle {
  flex-shrink: 0;
  cursor: pointer;
  padding-top: 1px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-icon { display: block; }
.status-icon.pending { color: var(--cream-border); }
.status-icon.in-progress { color: var(--ochre); }
.status-icon.done { color: var(--green); }

.item-body { flex: 1; }
.item-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
}
.checklist-item.done .item-title { text-decoration: line-through; color: var(--text-light); }

.priority-badge {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 2px;
}
.priority-drngend {
  background: rgba(36,61,41,0.1);
  color: var(--green);
}
.priority-wichtig {
  background: rgba(160,120,80,0.1);
  color: var(--ochre);
}

.item-description {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mid);
  font-weight: 300;
  margin-bottom: 6px;
}
.checklist-item.done .item-description { text-decoration: line-through; }

.entity-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--text-light);
  font-weight: 400;
  background: var(--cream-dark);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--cream-border);
}

/* Footer */
.checklist-footer {
  padding-top: 28px;
  border-top: 1px solid var(--cream-border);
  margin-top: 28px;
}
.reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  transition: color 0.2s;
}
.reset-btn:hover { color: var(--text-dark); }

/* ── CHECKLIST EMAIL-SAVE CARD ─────────────────────────────────────── */
.email-save-card {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 6px;
}
.email-save-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.25;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}
.email-save-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  margin: 0 0 20px 0;
}
.email-save-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 14px;
}
.email-save-label span { display: block; margin-bottom: 8px; }
.email-save-input {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  background: #FFFDFA;
  border: 1px solid var(--cream-border);
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.email-save-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(36,61,41,0.08);
}
.email-save-honey {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.email-save-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
  margin-bottom: 12px;
  cursor: pointer;
  font-weight: 400;
}
.email-save-check input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--green);
  cursor: pointer;
}
.email-save-check--optional { color: var(--text-light); }
.email-save-btn {
  margin-top: 8px;
  padding: 12px 24px;
  background: var(--green);
  color: var(--cream);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s, opacity 0.2s;
}
.email-save-btn:hover { background: var(--green-mid); }
.email-save-btn:disabled,
.email-save-btn--busy {
  opacity: 0.7;
  cursor: progress;
}
.email-save-status {
  min-height: 1.4em;
  margin: 12px 0 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.5;
}
.email-save-status--ok { color: var(--green); font-weight: 600; }
.email-save-status--err { color: var(--ochre); }
.email-save-dsgvo {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cream-border);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-light);
  font-weight: 300;
}
.email-save-dsgvo a { color: var(--green); text-decoration: underline; }
@media (max-width: 768px) {
  .email-save-card { padding: 22px 20px; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .intake-container { padding: 28px 24px 56px; }
  .checklist-container { padding: 28px 24px 56px; }
  .checklist-header { flex-direction: column; gap: 20px; }
  .checklist-progress-box { width: 100%; }
  .first-steps { padding: 20px 18px; }
  .first-steps-title { font-size: 23px; }
  .first-step { padding: 12px 14px 12px 48px; }
  .first-step::before { left: 12px; top: 12px; }
}

/* ── VOLLMACHT WARNING BADGE ── */
.vollmacht-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  background: rgba(160,120,80,0.12);
  color: var(--ochre);
  border: 1px solid rgba(160,120,80,0.25);
  flex-shrink: 0;
}
.vollmacht-warning svg {
  flex-shrink: 0;
}

.blocking-warning {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: #926B1A;
  background: #FFF9E6;
  border: 1px solid #E8C97A;
  border-radius: 4px;
  padding: 3px 8px;
  margin-top: 4px;
  font-family: 'Source Sans 3', sans-serif;
}
.blocking-warning svg {
  flex-shrink: 0;
}

/* ── LETTERS OFFER (on the task list) ──
   Deliberately quieter than the old full-bleed green banner: it sits above
   the list someone came for, so it reads as an optional side-path, not a
   gate. Price, next screen, and a way past it are all stated. */
.letters-offer {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
  align-items: start;
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 4px;
  margin-bottom: 32px;
}
.letters-offer-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 600;
  margin: 0 0 8px;
}
.letters-offer-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.letters-offer-sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mid);
  font-weight: 300;
  margin: 0 0 14px;
}
/* Spells out what happens after the click — the old banner named a price
   band and a button and left the rest to be discovered. */
.letters-offer-how {
  list-style: none;
  counter-reset: loffer;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.letters-offer-how li {
  counter-increment: loffer;
  font-size: 13px;
  color: var(--text-mid);
  font-weight: 400;
}
.letters-offer-how li::before {
  content: counter(loffer) '.';
  color: var(--ochre);
  font-weight: 700;
  margin-right: 5px;
}
.letters-offer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.letters-offer-tags span {
  font-size: 11.5px;
  color: var(--text-light);
  background: var(--cream-dark);
  border: 1px solid var(--cream-border);
  padding: 3px 9px;
  border-radius: 20px;
}
.letters-offer-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-left: 1px solid var(--cream-border);
  padding-left: 24px;
}
.letters-offer-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.letters-offer-price-note {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 300;
  margin-bottom: 12px;
}
.letters-offer-btn {
  display: block;
  width: 100%;
  padding: 12px 18px;
  background: var(--green);
  color: var(--cream);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s;
  box-sizing: border-box;
}
.letters-offer-btn:hover { background: var(--green-mid); }
.letters-offer-next {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-light);
  font-weight: 300;
  margin-top: 8px;
}
.letters-offer-skip {
  font-size: 13px;
  color: var(--text-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 6px;
}
.letters-offer-skip:hover { color: var(--green); }

/* Must live after the base rule, not up in the earlier responsive block —
   same specificity, so source order decides. */
@media (max-width: 768px) {
  .letters-offer { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .letters-offer-action {
    border-left: 0;
    border-top: 1px solid var(--cream-border);
    padding: 18px 0 0;
    align-self: stretch;
  }
}

/* ── TIP JAR ──
   Quiet, optional, post-value. Subordinate to whatever content sits above
   it — no accent colors, no shadow, no urgency. */
.tip-jar {
  position: relative;
  margin-top: 40px;
  padding: 20px 44px 20px 20px;
  border-top: 1px solid var(--cream-border);
  background: var(--cream-dark);
  border-radius: 4px;
}
.tip-jar-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  margin-bottom: 12px;
}
.tip-jar-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--cream-border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.tip-jar-btn:hover { border-color: var(--ochre); color: var(--ochre); }
.tip-jar-note {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 300;
  margin-top: 10px;
}
.tip-jar-dismiss {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tip-jar-dismiss:hover { color: var(--text-mid); }

/* ── PAYWALL PAGE ── */
.paywall-page { padding-top: var(--nav-h); min-height: 100vh; background: var(--cream); }
.paywall-container { max-width: 680px; margin: 0 auto; padding: 48px 48px 64px; }
.paywall-header { margin-bottom: 48px; }
.paywall-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 12px;
  margin-bottom: 20px;
}
.paywall-sub { font-size: 16px; line-height: 1.6; color: var(--text-mid); font-weight: 300; }

.paywall-letter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0;
}
.paywall-letter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 3px;
}
.paywall-letter-item-icon { color: var(--green); flex-shrink: 0; }
.paywall-letter-item-label { font-size: 14px; color: var(--text-dark); font-weight: 400; }

.paywall-price-box {
  text-align: center;
  padding: 40px 32px;
  background: var(--cream-dark);
  border: 1px solid var(--cream-border);
  border-radius: 4px;
  margin: 40px 0;
}
.paywall-price { font-family: 'Cormorant Garamond', serif; font-size: 56px; font-weight: 700; color: var(--green); }
.paywall-price-note { font-size: 14px; color: var(--text-light); font-weight: 300; margin-top: 8px; }

.paywall-cta-main {
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--green);
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
}
.paywall-cta-main:hover { background: var(--green-mid); }

.paywall-trust { display: flex; gap: 24px; justify-content: center; margin-top: 20px; }
.paywall-trust-item { font-size: 12px; color: var(--text-light); font-weight: 300; }

.paywall-error {
  padding: 16px 20px;
  background: rgba(160,120,80,0.1);
  border: 1px solid var(--ochre);
  border-radius: 3px;
  color: var(--ochre);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ── LETTERS PAGE ── */
.letters-page { padding-top: var(--nav-h); min-height: 100vh; background: var(--cream); }
.letters-container { max-width: 800px; margin: 0 auto; padding: 40px 48px 64px; }

/* ── Section tabs (Prioritäten / Checkliste / Briefe) ── */
.ltabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cream-border);
  margin: 0 0 28px;
  position: sticky;
  top: 57px;
  background: var(--cream);
  z-index: 20;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ltab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-light);
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  min-height: 44px;
}
.ltab:hover { color: var(--green); }
.ltab.is-active { color: var(--green); border-bottom-color: var(--green); }
.ltab:focus-visible { outline: 2px solid var(--ochre-light); outline-offset: -2px; }
/* Override the global `section { padding: 80px 0; }` rule — these panels
   sit inside an already-padded page container, not a top-level homepage
   section, so that padding just adds a huge empty gap above/below. */
.ltab-panel { padding: 0; }
.ltab-panel[hidden] { display: none; }

/* ── One panel head, one content column ──────────────────────────────
   The three tabs used to open three different ways: a boxed card with
   its own 28px inset, a second page-level <h1> inside a nested 800px
   container with 48px of side padding, and a bare right-aligned button.
   Text started at three different x positions and the column was three
   different widths, so the page appeared to jump on every tab switch.

   Every panel now opens with the same head — eyebrow, title, sub,
   optional action on the right — flush with `.letters-container`, and
   nothing inside a panel re-centres or re-pads itself. `.ltab-head` is
   deliberately the same shape as `.checklist-header`, which the
   standalone /checklist page uses; keep the two in sync. */
.ltab-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cream-border);
}
.ltab-head-main { flex: 1; min-width: 0; }
.ltab-head-aside { flex-shrink: 0; }
.ltab-eyebrow {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 600;
  margin: 0 0 8px;
}
.ltab-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  line-height: 1.2;
  color: var(--green);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.ltab-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  font-style: normal;
  margin: 0;
}
/* The checklist partial is shared with /checklist, where it is the page
   and centres itself. Inside a tab it is panel content, so it gives up
   its own max-width and padding and inherits the panel's column. */
.checklist-container--embedded {
  max-width: none;
  padding: 0;
}
@media (max-width: 768px) {
  .ltab-head { flex-direction: column; gap: 20px; }
  .ltab-head-aside { width: 100%; }
}

.letters-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 12px;
  margin-bottom: 8px;
}
.letters-sub { font-size: 14px; color: var(--text-light); font-weight: 300; margin-bottom: 40px; }

.letter-card {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 6px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.letter-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cream-border);
}
.letter-card-title { min-width: 0; }
.letter-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.letter-card-category { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ochre); font-weight: 600; }
.letter-card-label { font-size: 18px; font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--green); }
.letter-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--green);
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
}
.letter-print-btn:hover { background: var(--green-mid); }
.letter-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  background: transparent;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--green);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.letter-copy-btn:hover { background: var(--green); color: var(--cream); }

/* German formal letter layout */
.letter-page {
  font-family: 'Times New Roman', Times, serif;
  font-size: 12pt;
  line-height: 1.5;
  color: #000;
  max-width: 600px;
}
.letter-page .letter-date { text-align: right; margin-bottom: 40px; }
.letter-page .letter-sender-block { margin-bottom: 24px; }
.letter-page .letter-sender-name { font-weight: bold; }
.letter-page .letter-sender-address { margin-top: 4px; white-space: pre-line; }
.letter-page .letter-recipient { margin-bottom: 24px; white-space: pre-line; }
.letter-page .letter-subject { font-weight: bold; margin-bottom: 20px; }
.letter-page .letter-body { white-space: pre-line; margin-bottom: 32px; }
.letter-page .letter-closing { margin-top: 48px; }
.letter-page .letter-signature-space { height: 48px; }

/* Send-method guidance box */
.send-method-box {
  border-left: 3px solid var(--ochre);
  background: var(--cream-dark);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 0 2px 2px 0;
}
.send-method-box.send-method-email { border-left-color: var(--green-soft); }
.send-method-box.send-method-both  { border-left-color: var(--green-light); }
.send-method-box a { color: var(--green); word-break: break-all; }

/* Print styles */
@media print {
  body * { visibility: hidden; }
  .letter-page, .letter-page * { visibility: visible; }
  .letter-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 40px;
    font-size: 11pt;
  }
  .letter-print-btn, .letter-card-header button, nav, .letters-page > * { display: none !important; }
  body.print-all-mode * { visibility: visible; }
  body.print-all-mode .letter-card { page-break-after: always; }
  body.print-all-mode nav,
  body.print-all-mode .letter-card-header,
  body.print-all-mode .paywall-header,
  body.print-all-mode .letters-container > div:last-child { display: none !important; }
}

/* ── DSGVO BANNER ── */
.dsgvo-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--green);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 24px;
  font-size: 14px;
  line-height: 1.5;
  flex-wrap: wrap;
}
.dsgvo-banner-text {
  margin: 0;
}
.dsgvo-banner-link {
  color: var(--ochre-warm);
  text-decoration: underline;
  margin-left: 6px;
}
.dsgvo-banner-btn {
  flex-shrink: 0;
  padding: 6px 20px;
  background: var(--ochre);
  color: var(--cream);
  border: none;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.dsgvo-banner-btn:hover {
  background: var(--ochre-warm);
}

/* ── PROVIDER SELECTION PAGE ── */
.provider-category-section {
  margin-bottom: 40px;
}
.provider-category-header {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cream-border);
}
.category-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
}
.provider-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.provider-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.provider-checkbox-item:hover { border-color: var(--green-light); }
.provider-checkbox-item input[type="checkbox"] {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.provider-cb-body { display: flex; flex-direction: column; gap: 4px; }
.provider-cb-name { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.send-badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
  width: fit-content;
}
.send-badge-email { background: rgba(36,61,41,0.08); color: var(--green); }
.provider-regional-hint {
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}
.add-custom-btn {
  font-size: 13px;
  color: var(--ochre);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.add-custom-btn:hover { color: var(--ochre-warm); }
.custom-provider-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 16px;
  background: var(--cream-dark);
  border: 1px solid var(--cream-border);
  border-radius: 3px;
}

/* ── Known-providers question (top of /letters/providers) ─────────────── */
.known-providers-question {
  margin-bottom: 32px;
  padding: 20px 24px;
  background: var(--cream-dark);
  border: 1px solid var(--cream-border);
  border-radius: 3px;
}
.known-providers-prompt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 14px;
  line-height: 1.35;
}
.known-providers-radios {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.known-providers-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
}
.known-providers-fields {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cream-border);
}
.known-providers-fields.visible { display: block; }
.known-provider-category { margin-bottom: 18px; }
.known-provider-category-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}
.known-provider-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.known-provider-spacer { width: 1px; }
.add-known-provider-btn {
  font-size: 13px;
  color: var(--ochre);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.add-known-provider-btn:hover { color: var(--ochre-warm); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .paywall-container { padding: 60px 24px; }
  .paywall-letter-grid { grid-template-columns: 1fr; }
  .letters-container { padding: 48px 24px; }
  .letter-card { padding: 20px; }
  .paywall-trust { flex-wrap: wrap; gap: 12px; }
  .provider-checkbox-grid { grid-template-columns: 1fr; }
}

/* ── Standesamt action card ─────────────────────────────────────────────── */
.standesamt-action-card {
  display: flex;
  gap: 20px;
  background: #FDF6EC;
  border: 1px solid #E8C98A;
  border-left: 3px solid var(--ochre-warm);
  border-radius: 6px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.standesamt-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.standesamt-card-body { flex: 1; }
.standesamt-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 12px;
}
.standesamt-card-intro {
  font-size: 15px;
  color: var(--text-mid);
  margin: 0 0 16px;
  line-height: 1.6;
}
.standesamt-office-block {
  background: rgba(196,149,106,0.12);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.standesamt-office-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ochre);
  font-weight: 600;
  flex-shrink: 0;
}
.standesamt-office-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
}
.standesamt-bundesland {
  font-size: 13px;
  color: var(--text-light);
}
.standesamt-fallback {
  font-size: 14px;
  color: var(--text-mid);
  margin: 0 0 16px;
}
.standesamt-fallback a { color: var(--green); }
.standesamt-finder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  margin: 0 0 16px;
}
.standesamt-finder-link {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.standesamt-finder-link:hover { color: var(--green-mid); }
.standesamt-docs { margin-bottom: 16px; }
.standesamt-docs-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.standesamt-docs-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}
.standesamt-notes { display: flex; flex-direction: column; gap: 10px; }
.standesamt-note {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.55;
  background: rgba(36,61,41,0.04);
  border-radius: 5px;
  padding: 10px 14px;
}
.standesamt-note--urgent {
  background: rgba(160,120,80,0.10);
  color: var(--text-dark);
}

/* ============================================================
   MENTALE KARTE — /letters (MentalMap component)
   ============================================================ */

/* The mental map is the body of the Prioritäten tab, not a card floating
   inside it. Its head now sits in the shared `.ltab-head` above it, and
   the card chrome here was what indented this tab's content 29px past
   the other two. It is also no longer centred at 920px — inside the
   800px letters column that only ever produced a third column width. */
.mental-map {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 24px;
  box-shadow: none;
}
.mental-map-inner {
  max-width: none;
  margin: 0;
}
.mental-map-steps {
  list-style: none;
  counter-reset: mentalmap;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mental-map-step {
  position: relative;
  counter-increment: mentalmap;
  background: var(--cream-dark);
  border-left: 3px solid var(--green);
  border-radius: 0 4px 4px 0;
  padding: 16px 18px 16px 60px;
  min-height: 88px;
  transition: background 0.15s;
}
.mental-map-step[data-status="done"] {
  background: var(--cream);
  border-left-color: var(--text-light);
  opacity: 0.65;
}
.mental-map-step-num {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mental-map-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mental-map-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  font-family: inherit;
}
.mental-map-toggle:focus-visible {
  outline: 2px solid var(--ochre-light);
  outline-offset: 2px;
}
.mental-map-step-title {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
}
.mental-map-step-meta {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-mid);
}
.mental-map-step-urgent {
  display: inline-block;
  background: var(--ochre-light);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  margin-left: 6px;
}
.mental-map-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  line-height: 28px;
}
.mental-map-cta:hover {
  background: var(--green);
  color: var(--cream);
}
/* ── PHASES ── */
.mental-map-phase {
  margin-bottom: 20px;
}
.mental-map-phase-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin: 0 0 10px;
}
.mental-map-phase-when {
  color: var(--text-light);
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: none;
  font-size: 12px;
}
.mental-map-phase-when::before {
  content: "· ";
}
/* Collapsed later-phase (native <details>) */
.mental-map-phase-later {
  border: 1px solid var(--cream-border);
  border-radius: 6px;
  background: var(--cream);
  padding: 0 16px;
}
.mental-map-phase-later > .mental-map-steps {
  padding-bottom: 16px;
}
.mental-map-phase-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  min-height: 44px;
}
.mental-map-phase-summary::-webkit-details-marker { display: none; }
.mental-map-phase-summary .mental-map-phase-label { margin: 0; }
.mental-map-phase-summary:focus-visible {
  outline: 2px solid var(--ochre-light);
  outline-offset: 2px;
}
.mental-map-phase-later[open] .mental-map-phase-summary {
  border-bottom: 1px solid var(--cream-border);
  margin-bottom: 14px;
}
.mental-map-phase-chevron {
  color: var(--ochre);
  font-size: 14px;
  transition: transform 0.18s ease;
}
.mental-map-phase-later[open] .mental-map-phase-chevron {
  transform: rotate(180deg);
}
.mental-map-disclaimer {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  font-weight: 300;
  margin: 18px 0 0;
}
.mental-map-branch {
  background: var(--white);
  border: 1px dashed var(--ochre);
  border-radius: 4px;
  padding: 12px 14px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mental-map-branch[data-state="active"] {
  border-style: solid;
  border-color: var(--ochre);
  background: rgba(160, 120, 80, 0.08);
}
.mental-map-branch[data-state="inactive"] .mental-map-branch-text {
  color: var(--text-light);
  opacity: 0.6;
}
.mental-map-branch-hint {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-light);
  font-style: italic;
  margin: 0 0 4px;
}
.mental-map-branch-text {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}
.mental-map-branch-toggle {
  align-self: flex-start;
  margin-top: 8px;
  appearance: none;
  background: transparent;
  border: 1px solid var(--ochre);
  color: var(--ochre);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
}
.mental-map-branch-toggle:hover {
  background: var(--ochre);
  color: var(--cream);
}
.mental-map-branch-toggle:focus-visible {
  outline: 2px solid var(--ochre-light);
  outline-offset: 2px;
}
.mental-map-branch-toggle[aria-pressed="true"] {
  background: var(--ochre);
  color: var(--cream);
}
@media (max-width: 720px) {
  .mental-map-steps { grid-template-columns: 1fr; }
  .mental-map { padding: 22px 18px 20px; }
}
@media (max-width: 600px) {
  .standesamt-action-card { flex-direction: column; gap: 12px; padding: 20px; }
}

/* ── ANLAGEN — Vorbereitungsnotizen & Hinweis-Box ── */
.anlagen-hint-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #FDF6EC;
  border: 1px solid #E8C98A;
  border-left: 3px solid var(--ochre-warm);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 0 0 24px;
  box-shadow: 0 2px 16px rgba(36, 61, 41, 0.04);
}
.anlagen-hint-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.anlagen-hint-body { flex: 1; }
.anlagen-hint-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 6px;
  line-height: 1.25;
}
.anlagen-hint-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-mid);
  font-weight: 300;
  margin: 0 0 14px;
}
.anlagen-hint-text strong { color: var(--green); font-weight: 600; }
.anlagen-hint-dismiss {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ochre);
  color: var(--ochre);
  border-radius: 3px;
  padding: 8px 14px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s, color 0.2s;
}
.anlagen-hint-dismiss:hover {
  background: var(--ochre);
  color: var(--cream);
}
.anlagen-hint-dismiss:focus-visible {
  outline: 2px solid var(--ochre-light);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .anlagen-hint-box { flex-direction: column; gap: 10px; padding: 18px; }
}

/* ── MentalMap step anlagen note ── */
.mental-map-step-anlagen {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
  font-weight: 400;
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(196, 149, 106, 0.10);
  border-radius: 4px;
  border-left: 2px solid var(--ochre);
}
.mental-map-step-anlagen strong {
  color: var(--ochre);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Letter attachment badges ── */
.letter-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: #FDF6EC;
  border: 1px solid #E8C98A;
  border-radius: 4px;
}
.letter-attachments-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dark);
  text-transform: uppercase;
}
.letter-attachments-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.anlage-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
}
.anlage-sterbeurkunde {
  background: rgba(160, 120, 80, 0.14);
  color: var(--ochre);
  border-color: rgba(160, 120, 80, 0.30);
}
.anlage-vollmacht {
  background: rgba(36, 61, 41, 0.10);
  color: var(--green);
  border-color: rgba(36, 61, 41, 0.22);
}
.anlage-zusatz {
  background: var(--cream-dark);
  color: var(--text-mid);
  border-color: var(--cream-border);
}

/* ============================================================
   SEO CORNERSTONE GUIDE — /todesfall-checkliste
   Cream / forest-green editorial layout
   ============================================================ */

.guide-page {
  padding-top: var(--nav-h);
  min-height: 100vh;
  background: var(--cream);
}
.guide-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 48px 72px;
}
.guide-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 300;
  margin-bottom: 18px;
}
.guide-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.guide-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-mid);
  margin-bottom: 32px;
}

/* Section blocks */
/* ── GUIDE TABLE OF CONTENTS ──
   The box itself (.guide-toc / .guide-toc-title) is styled further down with
   the other guide helper blocks; only the list layout is new. Two columns,
   because ten stacked links are their own scrolling problem. */
.guide-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
}
.guide-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-size: 15px;
  color: var(--text-mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.guide-toc-list a:hover { color: var(--green); border-bottom-color: var(--cream-border); }
.guide-toc-label {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 600;
}
.guide-toc-text { font-weight: 400; }
@media (max-width: 600px) {
  .guide-toc-list { grid-template-columns: 1fr; }
}

.guide-section { margin-top: 44px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.guide-section-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 400;
  margin-bottom: 12px;
}
.guide-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.guide-section-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
  margin-bottom: 24px;
  max-width: 640px;
}
.guide-h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--green);
  margin-top: 32px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.guide-prose {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  font-weight: 300;
  margin-bottom: 18px;
}
.guide-prose strong { color: var(--green); font-weight: 600; }
.guide-prose em { color: var(--ochre); font-style: italic; }
.guide-prose a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: rgba(36, 61, 41, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.guide-prose a:hover { text-decoration-color: var(--green); }
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guide-list li {
  position: relative;
  padding: 12px 16px 12px 36px;
  background: var(--white);
  border-left: 3px solid var(--green-light);
  border-radius: 0 3px 3px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}
.guide-list li::before {
  content: '—';
  position: absolute;
  left: 18px;
  top: 16px;
  color: var(--green);
  font-size: 14px;
}
.guide-list li strong { color: var(--green); font-weight: 600; }

/* CTA block (forest-green hero strip) */
.guide-cta-block {
  margin: 56px auto 0;
  padding: 40px 44px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(36, 61, 41, 0.12);
}
.guide-cta-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre-warm);
  font-weight: 600;
  margin-bottom: 14px;
}
.guide-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.guide-cta-body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(245, 240, 235, 0.78);
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto 22px;
}
.guide-cta-block .hero-cta {
  background: var(--ochre-warm);
  margin-top: 4px;
}
.guide-cta-block .hero-cta:hover { background: var(--ochre); }

/* FAQ */
.faq-section { margin-top: 80px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 4px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--green-light); }
.faq-question {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--green);
  padding: 18px 48px 18px 22px;
  cursor: pointer;
  list-style: none;
  line-height: 1.4;
  position: relative;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--ochre);
  line-height: 1;
}
.faq-item[open] .faq-question::after { content: '−'; }
.faq-answer {
  padding: 0 22px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}
.faq-answer strong { color: var(--green); font-weight: 600; }

/* Footer link list */
.footer-links {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}
.footer-links li { font-size: 13px; }
.footer-links a {
  color: rgba(245, 240, 235, 0.5);
  text-decoration: underline;
  text-decoration-color: rgba(245, 240, 235, 0.2);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.footer-links a:hover {
  color: var(--cream);
  text-decoration-color: var(--ochre-warm);
}

/* Responsive */
@media (max-width: 768px) {
  .guide-inner { padding: 48px 24px 72px; }
  .guide-section { margin-top: 48px; }
  .guide-cta-block { padding: 40px 24px; margin-top: 56px; }
  .footer-links { text-align: left; }
}

/* ── Guide helper blocks (toc / table / disclaimer) ── */
.guide-toc {
  margin: 32px 0 8px;
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-left: 3px solid var(--ochre);
  border-radius: 0 4px 4px 0;
}
.guide-toc-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 600;
  margin-bottom: 12px;
}
.guide-toc ol {
  list-style: decimal;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-toc li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}
.guide-toc a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: rgba(36, 61, 41, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.guide-toc a:hover { text-decoration-color: var(--green); }

.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px 0;
  font-size: 15px;
  line-height: 1.6;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 4px;
  overflow: hidden;
}
.guide-table th,
.guide-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(74, 90, 72, 0.15);
  color: var(--text-dark);
  font-weight: 400;
}
.guide-table th {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
  background: var(--cream-dark);
  letter-spacing: -0.005em;
}
.guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-table td { color: var(--text-mid); }
.guide-table td:first-child { color: var(--text-dark); font-weight: 500; }

.guide-disclaimer {
  font-size: 0.875rem;
  color: rgba(38, 46, 42, 0.6);
  border-top: 1px solid rgba(74, 90, 72, 0.15);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  font-style: italic;
  line-height: 1.6;
  max-width: 640px;
}

/* ── HERO: acute-case crisis link ── */
.hero-crisis-link {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-crisis-link:hover { color: var(--green); }

/* ============================================================
   ERSTE 48 STUNDEN
   Read at 3am on a phone by someone who hasn't slept: larger
   16px body (the site's standard paragraph size), generous
   line-height, short blocks.
   ============================================================ */
.p48-page { padding-top: var(--nav-h); min-height: 100vh; background: var(--cream); }
.p48-inner { max-width: 680px; margin: 0 auto; padding: 40px 24px 64px; }
.p48-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.p48-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
  margin: 0 0 14px;
}
/* "Was heute Nacht [nicht] Ihr Problem ist" — "Nacht"/"nicht" read as
   near-twins at a glance, so without help the heading can look like it's
   asserting the opposite of what it means. Make "nicht" the loud word and
   shrink the tail so the eye lands on "nicht" first. */
.p48-word-nicht {
  color: var(--ochre);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-underline-offset: 3px;
}
.p48-tail {
  font-size: 0.6em;
  font-weight: 400;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--text-mid);
}
.p48-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  font-weight: 300;
  margin-bottom: 14px;
}
.p48-body:last-child { margin-bottom: 0; }
.p48-body strong { color: var(--green); font-weight: 600; }
.p48-body a { color: var(--green); }

.p48-section { margin: 32px 0; }
.p48-callout {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-left: 4px solid var(--green);
  border-radius: 4px;
  padding: 22px 24px 6px;
  margin: 24px 0 32px;
}
.p48-waiting-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.p48-waiting-list li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  padding-left: 28px;
  position: relative;
}
.p48-waiting-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ochre);
}

.p48-step {
  padding: 16px 0;
  border-top: 1px solid var(--cream-border);
}
.p48-step:first-of-type { border-top: 0; padding-top: 0; }
.p48-step-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  margin-bottom: 8px;
  min-height: 44px;
}
.p48-step-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  cursor: pointer;
}
.p48-step-checkmark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 2px solid var(--ochre);
  border-radius: 4px;
  margin-top: 2px;
  position: relative;
  background: var(--white);
  transition: background 0.15s, border-color 0.15s;
}
.p48-step-check input:checked ~ .p48-step-checkmark {
  background: var(--green);
  border-color: var(--green);
}
.p48-step-check input:checked ~ .p48-step-checkmark::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 3px;
  width: 8px;
  height: 14px;
  border: solid var(--cream);
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
}
.p48-step-check input:focus-visible ~ .p48-step-checkmark {
  outline: 2px solid var(--ochre-light);
  outline-offset: 2px;
}
.p48-step-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.4;
}
.p48-step.is-done .p48-step-title { color: var(--text-light); text-decoration: line-through; }
.p48-step.is-done .p48-body { opacity: 0.6; }

.p48-doc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.p48-doc-list li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  padding-left: 24px;
  position: relative;
}
.p48-doc-list li::before {
  content: '□';
  position: absolute;
  left: 0;
  color: var(--ochre);
}

.p48-closing { border-top: 2px solid var(--cream-border); padding-top: 28px; }
.p48-closing-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }
.p48-closing-link { font-size: 15px; color: var(--text-light); text-decoration: underline; text-underline-offset: 2px; }
.p48-closing-link:hover { color: var(--green); }

.p48-disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-light);
  font-style: italic;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--cream-border);
}

@media (max-width: 600px) {
  .p48-page { padding-top: var(--nav-h); }
  .p48-inner { padding: 0 20px 64px; }
  .p48-callout { padding: 22px 20px 4px; }
  .p48-h2 { font-size: 24px; }
}

/* Print — people print this and take it with them. */
@media print {
  .p48-page { padding-top: 0; background: #fff; }
  nav, .dsgvo-banner, .p48-closing-ctas { display: none !important; }
  .p48-inner { max-width: 100%; padding: 0; }
  .p48-headline, .p48-h2, .p48-body, .p48-step-title, .p48-waiting-list li, .p48-doc-list li,
  .faq-question, .faq-answer { color: #000 !important; }
  .p48-callout { border: 1px solid #000; background: #fff; }
  .p48-step { border-top: 1px solid #000; page-break-inside: avoid; }
  .p48-body a { color: #000 !important; text-decoration: underline; }
  /* Force accordion contents visible on paper — no clicking on a printout. */
  .faq-item { border: 1px solid #000; page-break-inside: avoid; }
  .faq-question::after { display: none !important; }
  details:not([open]) .faq-answer { display: block !important; }
}
/* ============================================================
   BESTATTUNGSFRISTEN NACH BUNDESLAND — /bestattungsfristen-bundeslaender

   A 16x8 reference table. The hard constraint is mobile: a table
   this wide cannot be scrolled sideways by someone on a phone, so
   below 1000px the same data renders as stacked cards and the
   <table> is removed from the flow entirely. Both are rendered
   from one array in lib/bestattungsfristen.js — never edit one
   without the other.

   Every value is followed by its Fundstelle (.bf-para) and, where
   the statute carries a condition, a caveat (.bf-hinweis). Values
   that could not be confirmed print as .bf-ungeregelt or
   .bf-offen rather than as a number.
   ============================================================ */
/* Fallback matches the current --nav-h so this page also stands up on its
   own, without the nav-height work it would otherwise depend on. */
.bf-page { padding-top: var(--nav-h, 64px); min-height: 100vh; background: var(--cream); }
.bf-inner { max-width: 1180px; margin: 0 auto; padding: 40px 24px 64px; }

.bf-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 600;
  color: var(--green);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.bf-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
  margin: 0 0 14px;
}
.bf-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
  font-weight: 300;
  margin-bottom: 14px;
  max-width: 680px; /* prose stays readable even though the table is wide */
}
.bf-body:last-child { margin-bottom: 0; }
.bf-body strong { color: var(--green); font-weight: 600; }
.bf-body a { color: var(--green); }
.bf-section { margin: 40px 0; }

/* ── Bundesland picker ── */
.bf-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 32px 0 20px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 4px;
}
.bf-picker-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
}
.bf-select {
  font-family: inherit;
  font-size: 16px;
  color: var(--text-dark);
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 3px;
  padding: 9px 12px;
  min-width: 260px;
  flex: 0 1 auto;
}
.bf-select:focus-visible,
.bf-reset:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 2px;
}
.bf-reset {
  font-family: inherit;
  font-size: 14px;
  color: var(--green);
  background: none;
  border: 1px solid var(--cream-border);
  border-radius: 3px;
  padding: 8px 14px;
  cursor: pointer;
}
.bf-reset:hover { border-color: var(--green-light); }

/* ── Stand / Vollständigkeitshinweis ── */
.bf-stand {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  padding: 12px 16px;
  background: var(--cream-dark);
  border-radius: 3px;
  margin-bottom: 16px;
}
.bf-stand strong { color: var(--green); }

.bf-warnung {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-left: 4px solid var(--ochre);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 24px;
  max-width: 860px;
}
.bf-warnung p { margin: 0 0 8px; }
.bf-warnung p:last-child { margin-bottom: 0; }
.bf-warnung strong { color: var(--green); }
.bf-warnung-liste { color: var(--text-light); font-size: 14px; }

/* ── Table (desktop) ── */
.bf-table-wrap { margin: 8px 0 40px; }
.bf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}
.bf-caption {
  text-align: left;
  font-size: 14px;
  color: var(--text-light);
  padding-bottom: 10px;
}
.bf-table th,
.bf-table td {
  border: 1px solid var(--cream-border);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.bf-table thead th {
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}
.bf-table tbody tr:nth-child(odd) td,
.bf-table tbody tr:nth-child(odd) th { background: var(--white); }
.bf-table .bf-land {
  font-weight: 600;
  color: var(--green);
  font-size: 15px;
}
.bf-row-offen th,
.bf-row-offen td { opacity: 0.72; }
.bf-row-note td {
  background: var(--cream-dark) !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
}
.bf-row-note strong { color: var(--green); }

/* Cell internals — shared by table and cards */
.bf-wert { display: block; font-weight: 600; color: var(--text-dark); }
.bf-para { display: block; font-size: 12px; color: var(--green-light); margin-top: 2px; }
.bf-hinweis {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-light);
  margin-top: 5px;
}
.bf-hinweis a { color: var(--green-light); }
.bf-ungeregelt {
  display: block;
  font-style: italic;
  color: var(--text-light);
  font-weight: 400;
}
.bf-offen {
  display: block;
  font-style: italic;
  color: var(--ochre);
  font-weight: 400;
}
.bf-gesetz a {
  color: var(--green);
  font-weight: 600;
  text-underline-offset: 2px;
}

.bf-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Source Sans 3', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--green-light);
  border-radius: 2px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.bf-badge-warn { background: var(--ochre); }

/* ── Cards (mobile) ── */
.bf-cards { display: none; margin: 8px 0 40px; }
.bf-card {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
}
.bf-card-offen { border-left: 4px solid var(--ochre); }
.bf-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
  margin-bottom: 14px;
}
.bf-card-list { margin: 0; }
.bf-card-list dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-top: 14px;
}
.bf-card-list dt:first-child { margin-top: 0; }
.bf-card-list dd { margin: 3px 0 0; font-size: 15px; }
.bf-card-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 12px 14px;
  margin-top: 16px;
}
.bf-card-note strong { color: var(--green); }
.bf-card-gesetz {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cream-border);
}
.bf-card-gesetz a { color: var(--green); font-weight: 600; }

.bf-empty {
  font-size: 15px;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 32px;
}

/* ── Callout + closing ── */
.bf-callout {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-left: 4px solid var(--green);
  border-radius: 4px;
  padding: 22px 24px 6px;
  margin: 32px 0;
  max-width: 860px;
}
.bf-closing-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }
.bf-closing-link { font-size: 15px; color: var(--text-light); text-decoration: underline; text-underline-offset: 2px; }
.bf-closing-link:hover { color: var(--green); }
.bf-disclaimer {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-light);
  border-top: 1px solid var(--cream-border);
  padding-top: 20px;
  margin-top: 40px;
  max-width: 860px;
}

/* Swap table for cards. 1000px is where eight columns stop being
   legible; below it the table is display:none, not scrolled. */
@media (max-width: 1000px) {
  .bf-table-wrap { display: none; }
  .bf-cards { display: block; }
}
@media (max-width: 640px) {
  .bf-inner { padding: 0 20px 64px; }
  .bf-h2 { font-size: 24px; }
  .bf-picker { flex-direction: column; align-items: stretch; }
  .bf-select { min-width: 0; width: 100%; }
  .bf-callout { padding: 22px 20px 6px; }
}

@media print {
  .bf-page { padding-top: 0; background: #fff; }
  nav, .dsgvo-banner, .bf-picker, .bf-closing-ctas { display: none !important; }
  .bf-inner { max-width: 100%; padding: 0; }
  /* On paper the table is the useful form at any width. */
  .bf-table-wrap { display: block !important; }
  .bf-cards { display: none !important; }
  .bf-table { font-size: 10px; }
  .bf-table thead th { background: #fff; color: #000; border: 1px solid #000; }
  .bf-table th, .bf-table td { border: 1px solid #000; }
  .bf-headline, .bf-h2, .bf-body, .bf-wert { color: #000 !important; }
  .bf-table tbody tr { page-break-inside: avoid; }
}