/* ═══════════════════════════════════════════════════════════════════
   BAUMBESTATTUNG — Ratgeber- und Regionenseiten
   Ergänzt base.css. Tokens kommen ausschließlich aus :root dort.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Brotkrumen ─── */
.krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 20px;
}
.krumen a { color: var(--muted); transition: color .25s; }
.krumen a:hover { color: var(--accent); text-decoration: underline; }
.krumen .sep { opacity: .45; }
.krumen span[aria-current] { color: var(--ink-2); }

/* Auf dunklem Hero */
.art-hero .krumen { color: rgba(255,255,255,.66); }
.art-hero .krumen a { color: rgba(255,255,255,.78); }
.art-hero .krumen a:hover { color: #fff; }
.art-hero .krumen span[aria-current] { color: rgba(255,255,255,.9); }

/* ─── Kompaktes Hero für Inhaltsseiten ─── */
.art-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(var(--nav-h) + 64px) 0 66px;
}
.art-hero-media { position: absolute; inset: 0; z-index: 0; }
.art-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.art-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 150% 120% at 50% 40%, rgba(20,26,16,.44), rgba(14,18,11,.86));
}
.art-hero .wrap { position: relative; z-index: 1; }
.art-hero-inner { max-width: 820px; }
.art-hero h1 { color: #fff; margin-bottom: 18px; font-size: clamp(32px, 4.4vw, 58px); }
.art-hero h1 em { color: #dfe7d6; }
.art-hero .art-sub {
  font-size: clamp(16px, 1.6vw, 19px); color: rgba(255,255,255,.86);
  line-height: 1.68; max-width: 66ch;
}
.art-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-soft); margin-bottom: 18px;
}
.art-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); flex-shrink: 0; }
.art-stand {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px;
  font-size: 12.5px; color: rgba(255,255,255,.62);
}

/* ─── Inhaltsbereich mit Seitenspalte ─── */
.art-main { background: var(--paper); padding: 76px 0 92px; }
.art-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px; align-items: start; }
/* Linksbündig, nicht zentriert: sonst springt der Kasten gegenüber den
   Überschriften der Sektionen darunter nach rechts. */
.art-wide { max-width: 860px; }

.art-side { position: sticky; top: calc(var(--nav-h) + 18px); display: grid; gap: 18px; }

/* ─── Direkte Antwort (zuerst die Antwort, dann die Erklärung) ─── */
.antwort {
  background: var(--white); border: 1px solid rgba(74,103,65,.28);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 42px;
  box-shadow: 0 18px 40px rgba(30,22,16,.06);
}
.antwort .lbl {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px;
}
.antwort p { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 68ch; }
.antwort p + p { margin-top: .8em; }
.antwort b, .antwort strong { color: var(--ink); font-weight: 600; }

/* ─── Inhaltsverzeichnis ─── */
.toc { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px 24px; }
.toc-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.toc ol { display: grid; gap: 9px; counter-reset: toc; }
.toc li { counter-increment: toc; font-size: 14px; line-height: 1.5; padding-left: 26px; position: relative; }
.toc li::before {
  content: counter(toc); position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft);
}
.toc a { color: var(--ink-2); transition: color .25s; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* ─── Fließtext ─── */
.prose { min-width: 0; }
.prose > * { min-width: 0; }
.prose > * + * { margin-top: 46px; }
.prose section { scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 16px; }
.prose h3 { font-size: clamp(19px, 2.1vw, 24px); margin: 32px 0 12px; }
.prose p { font-size: 16px; color: var(--ink-2); line-height: 1.74; max-width: 70ch; }
.prose p + p { margin-top: .9em; }
.prose .lead { color: var(--muted); font-size: 17px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-deep); }
.prose ul.liste { display: grid; gap: 11px; margin-top: 18px; max-width: 70ch; }
.prose ul.liste li { font-size: 15.5px; color: var(--ink-2); line-height: 1.66; padding-left: 26px; position: relative; }
.prose ul.liste li::before {
  content: ''; position: absolute; left: 6px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft);
}
.prose ol.schritte { display: grid; gap: 18px; margin-top: 22px; counter-reset: sch; max-width: 70ch; }
.prose ol.schritte li {
  counter-increment: sch; position: relative; padding-left: 52px;
  font-size: 15.5px; color: var(--ink-2); line-height: 1.68;
}
.prose ol.schritte li::before {
  content: counter(sch); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-deep);
  font-family: var(--font-display); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.prose ol.schritte b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 3px; }
.prose .table-scroll { margin-top: 24px; }

/* ─── Kästen ─── */
.box {
  border-radius: var(--radius); padding: 22px 24px; margin-top: 26px;
  border: 1px solid var(--line-2); background: var(--white);
}
.box-title {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 500;
  color: var(--ink); margin-bottom: 8px;
}
.box p, .box li { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); }
.box.gold { background: var(--gold-light); border-color: rgba(138,111,58,.22); }
.box.gold .box-title { color: var(--gold); }
.box.gruen { background: var(--accent-wash); border-color: rgba(74,103,65,.22); }
.box.gruen .box-title { color: var(--accent-deep); }
.box ul { display: grid; gap: 8px; margin-top: 10px; }
.box ul li { padding-left: 22px; position: relative; }
.box ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }

/* ─── Kennzahlen-Streifen ─── */
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; margin-top: 30px; }
.fakt { background: var(--white); padding: 20px 20px 18px; }
.fakt-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.fakt-wert { font-family: var(--font-display); font-size: 21px; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.fakt-wert small { display: block; font-family: var(--font-body); font-size: 12.5px; color: var(--muted); margin-top: 4px; letter-spacing: 0; }

/* ─── Seitenspalten-Karten ─── */
.side-box { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px 24px; }
.side-box.accent { background: var(--accent-wash); border-color: rgba(74,103,65,.2); }
.side-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.side-box.accent .side-title { color: var(--accent); }
.side-box p { font-size: 14px; color: var(--ink-2); line-height: 1.66; }
.side-box .btn { width: 100%; justify-content: center; margin-top: 16px; min-height: 48px; font-size: 14.5px; }
.side-links { display: grid; gap: 10px; }
.side-links a { font-size: 14px; color: var(--ink-2); line-height: 1.5; display: flex; gap: 9px; }
.side-links a:hover { color: var(--accent); text-decoration: underline; }
.side-links a .arr { color: var(--accent-soft); flex-shrink: 0; margin-top: 4px; transition: transform .25s var(--ease-out); }
.side-links a:hover .arr { transform: translateX(3px); }

/* ─── Verwandte Themen ─── */
.verwandt { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 30px; }
.vw-card {
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 24px 24px 22px; display: flex; flex-direction: column;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.vw-card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(30,22,16,.1); }
.vw-kat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-soft); margin-bottom: 12px;
}
.vw-card h3 { font-size: 19px; margin-bottom: 9px; line-height: 1.24; }
.vw-card p { font-size: 14.5px; color: var(--muted); line-height: 1.62; flex: 1; }
.vw-more { margin-top: 16px; font-size: 13.5px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.vw-card:hover .vw-more .arr { transform: translateX(3px); }
.vw-more .arr { transition: transform .25s var(--ease-out); }

/* ─── Ratgeber-Übersicht ─── */
.rg-gruppe + .rg-gruppe { margin-top: 64px; }
.rg-gruppe-kopf { margin-bottom: 26px; max-width: 720px; }
.rg-gruppe-kopf h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 10px; }
.rg-gruppe-kopf p { font-size: 15.5px; color: var(--muted); line-height: 1.66; }

/* ─── Ortsliste auf Regionenseiten ─── */
.ort-liste { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.ort-liste li {
  background: var(--white); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; color: var(--ink-2);
}

/* ─── Mobil ─── */
@media (max-width: 1000px) {
  /* minmax(0,1fr), nicht 1fr: sonst kann die Spalte nicht unter die
     min-content-Breite der Vergleichstabellen schrumpfen und der Inhalt
     läuft auf dem Handy nach rechts aus dem Bild. */
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .art-side { position: static; }
  .verwandt { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ort-liste { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .art-hero { padding: calc(var(--nav-h) + 44px) 0 52px; }
  .art-main { padding: 56px 0 72px; }
  .prose > * + * { margin-top: 38px; }
  .antwort { padding: 22px 22px; }
  .antwort p { font-size: 15.5px; }
  .prose p { font-size: 15.5px; }
}
@media (max-width: 560px) {
  .verwandt { grid-template-columns: 1fr; }
  .ort-liste { grid-template-columns: 1fr; }
  .fakten { grid-template-columns: 1fr; }
}