/* ============================================================
   SEO/Content pages — Pillar, Stadtteil, Glossar, Rechner,
   Marktreport, Fit-Check, FAQ, Branche
   ============================================================ */

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--ink-5); margin: 0 4px; }
.crumbs span[itemprop="itemListElement"]:last-child a { color: var(--ink); }

.hero-narrow { padding: 96px 0 56px; }

/* Pillar */
.pillar-grid { display: grid; grid-template-columns: 240px 1fr; gap: 80px; align-items: start; }
.pillar-toc { position: sticky; top: 100px; }
.pillar-toc h5, .pillar-toc .toc-titel { margin: 0 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.pillar-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.pillar-toc ol li { counter-increment: toc; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pillar-toc ol li:first-child { border-top: none; padding-top: 0; }
.pillar-toc ol li::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.pillar-toc a { color: var(--ink-2); text-decoration: none; }
.pillar-toc a:hover { color: var(--coral); }

.pillar-body h2 { font-size: 36px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 56px 0 16px; scroll-margin-top: 100px; }
.pillar-body h2:first-child { margin-top: 0; }
.pillar-body h3 { font-size: 22px; font-weight: 500; margin: 32px 0 10px; }
.pillar-body p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; max-width: 64ch; }
.pillar-body strong { font-weight: 600; color: var(--ink); }
.pillar-body .inline-link { color: var(--coral); border-bottom: 1px solid currentColor; text-decoration: none; }
.pillar-body .inline-link:hover { color: var(--coral-600); }

.data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.data-table th { font-weight: 600; color: var(--ink); background: #fff; }
.data-table td { color: var(--ink-2); }
/* GF 13.08.: „Miete/Monat" braucht den Hinweis, dass es die KALTmiete ist.
   Als zweite Zeile in der Spaltenueberschrift, damit die Spalte nicht breiter
   wird — sie steht neben €/m² und NK/m², und genau dort entsteht sonst der
   Eindruck, die Monatsmiete enthielte die Nebenkosten. */
.data-table th .th-zusatz { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0; }
.data-table tbody tr:hover { background: var(--bg-soft); }

/* MOBIL: Zeile wird Karte (GF 28.07.).
   Am Telefon war die Tabelle 796 px breit und scrollte seitlich — sichtbar
   waren nur Etage, Groesse, teilbar ab, Terrasse. Die PREISE standen
   ausserhalb des Bildschirms. Sechs Zeilen "350 m2 – –" ohne eine Zahl, die
   eine Entscheidung traegt. Jede Zeile ist jetzt eine Karte mit Beschriftung
   aus dem data-label der Zelle; die Kopfzeile entfaellt, weil jede Zelle ihre
   eigene traegt. Zellen ohne data-label (z. B. Etage) bleiben Kartenkopf. */
@media (max-width: 700px) {
  /* width:100% + box-sizing statt auto: als display:block behielt die Tabelle
     ihre max-content-Breite (560 px auf einem 335 px breiten Behaelter) und
     scrollte weiter seitlich. */
  .data-table, .data-table tbody, .data-table tr, .data-table td {
    display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;
  }
  /* styles.css setzt `.detail-layout .data-table { min-width: 560px }` fuer die
     Breitansicht. Das ist SPEZIFISCHER als `.data-table` — und ein Medienbereich
     fuegt keine Spezifitaet hinzu, mein min-width:0 verlor also stillschweigend.
     Darum hier mit demselben Gewicht dagegenhalten. */
  .detail-layout .data-table { min-width: 0; }
  /* Der Behaelter traegt overflow-x:auto als Inline-Stil fuer die Breitansicht.
     Als Karten braucht es ihn nicht mehr — sonst bleibt ein Rest-Seitwaertsscroll. */
  div:has(> .data-table) { overflow-x: visible; }
  .data-table thead { display: none; }
  .data-table tr {
    border: 1px solid var(--line); border-radius: var(--r-m);
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  .data-table td { border-bottom: 0; padding: 3px 0; }
  .data-table td[data-label] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  }
  .data-table td[data-label]::before {
    content: attr(data-label);
    color: var(--ink-3); font-size: 12.5px; flex: none;
  }
  /* Etage als Kopf der Karte */
  .data-table td.dt-head-cell {
    font-weight: 600; color: var(--ink); font-size: 15px;
    padding: 0 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  /* Miete/Monat ist die Entscheidungszahl — die darf herausstechen */
  .data-table td[data-label]:nth-last-child(3) { font-weight: 600; color: var(--ink); }
  .data-table tbody tr:hover { background: #fff; }
}
.caption { font-size: 13px; color: var(--ink-3); margin-top: -4px; }

.bullet-list, .numbered-list { padding-left: 0; list-style: none; margin: 12px 0 16px; max-width: 640px; }
.bullet-list li { position: relative; padding: 6px 0 6px 22px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.bullet-list li strong { color: var(--ink); }
.numbered-list { counter-reset: nl; }
.numbered-list li { counter-increment: nl; position: relative; padding: 8px 0 8px 36px; font-size: 16px; line-height: 1.55; color: var(--ink-2); border-top: 1px solid var(--line); }
.numbered-list li:first-child { border-top: none; }
.numbered-list li::before { content: counter(nl, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--coral); font-weight: 600; }

.pillar-cta { margin-top: 48px; padding: 32px; background: var(--ink); color: #fff; border-radius: var(--r-xl); }
.pillar-cta h3 { color: #fff; margin: 0 0 8px; font-size: 26px; }
.pillar-cta p { color: rgba(255,255,255,.78); margin-bottom: 20px; }

/* Stadtteil */
.hood-meta { display: flex; gap: 48px; margin-top: 36px; flex-wrap: wrap; }
.hood-meta > div { display: flex; flex-direction: column; gap: 4px; }
/* 02.09.: nur das Label in Versalien, nicht die Einheit im strong („€/M²", „ZU FUSS"). */
.hood-meta > div > span { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.hood-meta strong { font-size: 22px; font-weight: 500; color: var(--ink); }

/* GF 26.08.: „Der Abstand zwischen ‚Ottensen im Überblick' und ‚Was kostet ein
   Büro in Ottensen?' ist zu groß." Ursache war nicht der Abstand, sondern das
   Bild: 4/5 hochkant ergibt bei 1,2fr Spaltenbreite rund 880 px Höhe, während
   der Text daneben auf 440 px kommt. Die Hälfte der Sektion war leer. 3/2 quer
   passt zur Höhe des Textes und schneidet Innenaufnahmen ohnehin freundlicher. */
.hood-photo-large { aspect-ratio: 3/2; border-radius: var(--r-xl); overflow: hidden; }
.hood-photo-large > * { width: 100%; height: 100%; }

.hood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hood-card { display: block; text-decoration: none; color: inherit; border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: all .2s; }
.hood-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.hood-photo { aspect-ratio: 4/3; overflow: hidden; }
.hood-photo > * { width: 100%; height: 100%; }
.hood-body { padding: 22px 24px; display: flex; align-items: flex-end; justify-content: space-between; }
.hood-body h3, .hood-body h4 { margin: 0; font-size: 16px; font-weight: 400; color: var(--ink-3); line-height: 1.35; }
.hood-body strong { font-size: 22px; color: var(--ink); font-weight: 500; }
.hood-arrow { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-paper); display: grid; place-items: center; transition: all .2s; }
.hood-card:hover .hood-arrow { background: var(--coral); color: #fff; }

.proscons { gap: 24px !important; }
.proscons-card { padding: 28px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); }
.proscons-card h4, .proscons-card h3 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.proscons-card ul { list-style: none; padding: 0; margin: 0; }
.proscons-card li { display: flex; gap: 10px; padding: 8px 0; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--line); }
.proscons-card li:first-child { border-top: none; }
.proscons-card li svg { flex-shrink: 0; color: var(--green); margin-top: 3px; }
.proscons-card.cons li svg { color: var(--ink-4); }

.alt-banner { margin-top: 28px; padding: 20px 26px; background: var(--coral-50); border-radius: var(--r-l); font-size: 16px; color: var(--ink-2); }
.alt-banner strong { color: var(--coral-600); margin-right: 6px; }

/* Stadtteil rich tables */
.hood-rent-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; background: #fff; border-radius: var(--r-l); overflow: hidden; }
.hood-rent-table th, .hood-rent-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hood-rent-table th { font-weight: 600; color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-paper); }
.hood-rent-table td { color: var(--ink-2); }
.hood-rent-table tbody tr:last-child td { border-bottom: none; }
.hood-rent-table .price-cell { font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hood-rent-table .avail-cell { white-space: nowrap; }
.avail-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.avail-dot.green { background: #4ea672; }
.avail-dot.yellow { background: #d9a73a; }
.avail-dot.red { background: #c46256; }

.example-callout { padding: 22px 28px; background: var(--bg-paper); border: 1px solid var(--line); border-radius: var(--r-l); margin: 24px 0; }
.example-callout strong { color: var(--coral-600); margin-right: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 6px; }
.example-callout p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }

.proscons-card li { flex-direction: column; gap: 4px; align-items: flex-start; }
.proscons-card li .pc-title { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink); }
.proscons-card li .pc-text { padding-left: 26px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }

.fit-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; border-radius: var(--r-l); overflow: hidden; }
.fit-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fit-table tr:last-child td { border-bottom: none; }
.fit-table .ft-type { font-weight: 500; color: var(--ink); width: 38%; }
.fit-table .ft-badge { width: 1%; white-space: nowrap; }
.fit-table .ft-reason { color: var(--ink-3); }
.fit-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.fit-badge.green { background: #e3f1e8; color: #2e7148; }
.fit-badge.blue { background: #e6edf6; color: #2a4f80; }
.fit-badge.yellow { background: #f5ecd8; color: #8a6c2c; }
.fit-badge.orange { background: #f5e0d2; color: #9c5a2e; }
.fit-badge.red { background: #f5dcd6; color: #9c4a3a; }

/* 02.09.: drei Nachbarn in vier Spalten liessen eine Luecke; auto-fit. */
.nearby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
/* Sprungleiste im Guide-Hero */
.hood-sprung { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
.hood-sprung a { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.hood-sprung a:hover { color: var(--coral-600); border-color: var(--coral); }
#mieten, #vorteile, #flaechen, #faq { scroll-margin-top: 84px; }
.nearby-link { padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); text-decoration: none; color: var(--ink); display: flex; justify-content: space-between; align-items: center; transition: border-color .15s, color .15s; }
.nearby-link:hover { border-color: var(--coral); color: var(--coral-600); }
.nearby-link .nb-name { font-weight: 500; font-size: 15px; }
.nearby-link .nb-arrow { color: var(--ink-3); }
.nearby-link:hover .nb-arrow { color: var(--coral); }

@media (max-width: 900px) {
  .nearby-grid { grid-template-columns: repeat(2, 1fr); }
  .hood-rent-table { font-size: 13px; }
  .hood-rent-table th, .hood-rent-table td { padding: 10px 12px; }
}

/* Glossar */
.glossar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.glossar-card { padding: 24px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); }
.glossar-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--ink); }
.glossar-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* Rechner */
/* 02.09.: Spaltenzahl im CSS statt inline, damit das Telefon einspaltig wird. */
.rechner-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .rechner-grid { grid-template-columns: 1fr; gap: 24px; } }
.rechner-big small { font-size: 26px; font-weight: 300; color: rgba(255,255,255,.6); margin-right: 2px; }
.rechner-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.rechner-cta-suche { color: #fff; border-color: rgba(255,255,255,.4); }
.rechner-cta-suche:hover { border-color: #fff; }
.rechner-form { padding: 32px 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); }
.rechner-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.rechner-row:first-child { border-top: none; padding-top: 4px; }
.rechner-row label { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.rechner-row input[type="range"] { grid-column: 1; width: 100%; accent-color: var(--coral); }
.rechner-row output { grid-column: 2; font-size: 18px; font-weight: 500; min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
.rechner-row .rechner-zahl { grid-column: 2; width: 72px; height: 36px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.rechner-row .rechner-zahl:focus { border-color: var(--ink); outline: none; }
.rechner-seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rechner-seg-btn { padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: border-color .15s; }
.rechner-seg-btn span { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.rechner-seg-btn:hover { border-color: var(--ink-3); }
.rechner-seg-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.rechner-seg-btn.active span { color: rgba(255,255,255,.65); }
.rechner-pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.rechner-pillrow .chip { padding: 6px 12px; background: var(--bg-paper); border-radius: 999px; font-size: 13px; color: var(--ink-2); }

.rechner-result { padding: 36px 40px; background: var(--ink); color: #fff; border-radius: var(--r-xl); }
.rechner-result .eyebrow { color: rgba(255,255,255,.6); }
/* Seit dem 26.08. steht hier eine Spanne („620–775") statt einer Zahl. Bei
   110px reisst die auf schmalen Fenstern um; deshalb waechst die Schrift mit
   der Breite mit und bleibt in einer Zeile. */
.rechner-big { font-size: clamp(52px, 6.4vw, 96px); font-weight: 300; letter-spacing: -.04em; line-height: 1; margin: 16px 0 24px; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
/* 02.09.: Am Telefon waechst die Zahl mit der Breite („ca. 3.456–4.320 m²"
   muss in eine Zeile), und die Karten verlieren ihre Desktop-Polster. */
@media (max-width: 600px) {
  .rechner-big { font-size: clamp(34px, 10vw, 52px); gap: 8px; }
  .rechner-big small { font-size: 20px; }
  .rechner-big span { font-size: 22px; }
  .rechner-result { padding: 28px 22px; }
  .rechner-form { padding: 22px 18px; }
}
.rechner-big span { font-size: 28px; color: rgba(255,255,255,.6); font-weight: 300; }
.rechner-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.rechner-breakdown div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.rechner-breakdown span { color: rgba(255,255,255,.66); }
.rechner-breakdown strong { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.rechner-rent { padding: 20px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.rechner-rent span { color: rgba(255,255,255,.66); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.rechner-rent strong { font-size: 22px; font-weight: 500; color: #fff; }
.rechner-rent small { color: rgba(255,255,255,.5); font-size: 13px; }

/* Marktreport */
/* Marktreport: CI-Balkengrafiken (GF 27.08. — Grafiken des kuratierten
   Berichts, nachgebaut aus den veroeffentlichten Kennzahlen) */
.mb-chart { margin: 28px 0; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: var(--r-l, 14px); background: #fff; }
.mb-chart figcaption { font-size: 14px; font-weight: 600; margin-bottom: 14px; letter-spacing: -.01em; }
.mb-row { display: grid; grid-template-columns: minmax(120px, 180px) 1fr auto; gap: 12px; align-items: center; margin: 8px 0; }
.mb-l { font-size: 13px; color: var(--ink-2, #3a3a3a); }
.mb-bar { display: block; height: 18px; background: var(--cream, #f6f5f1); border-radius: 999px; overflow: hidden; }
.mb-fill { display: block; height: 100%; background: var(--coral); border-radius: 999px; }
.mb-fill.hell { background: #FFDBD6; }
.mb-v { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-note { font-size: 12.5px; color: var(--ink-3, #7a7a77); margin: 10px 0 0; line-height: 1.5; }
.mb-chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mb-chart-pair .mb-chart { margin: 28px 0 0; }
@media (max-width: 760px) { .mb-chart-pair { grid-template-columns: 1fr; } .mb-row { grid-template-columns: minmax(90px, 120px) 1fr auto; } }

.report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.report-stats > div { padding: 32px 30px; background: #fff; }
.report-stats .num { font-size: 44px; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.report-stats .lbl { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

.profiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.profile-card { padding: 24px 28px; background: var(--bg-paper); border-radius: var(--r-xl); }
.profile-card h4 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.prof-row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.prof-row:first-of-type { border-top: none; }
.prof-row span { color: var(--ink-3); }
.prof-row strong { color: var(--ink); font-weight: 500; }
.profile-card p { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: 1fr; gap: 32px; }
  .pillar-toc { position: static; }
  .glossar-grid, .profiles-grid, .report-stats { grid-template-columns: 1fr; }
  /* 01.09. (Critique, GF-Freigabe): 10 Stadtteil-Karten untereinander waren
     am Telefon ~4.500px Scrollstrecke. Jetzt eine Wisch-Leiste mit
     Einrast-Punkten; die Karte bleibt gross genug zum Lesen, die Sektion
     schrumpft auf eine Kartenhoehe. Scrollt in sich, nie die Seite quer. */
  .hood-grid {
    grid-auto-flow: column; grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; scrollbar-width: thin;
  }
  .hood-grid > * { scroll-snap-align: start; }
}


/* ============================================================
   PILLAR „Büro mieten Hamburg" — Kennzahlen, Mietspiegel, Karten
   ============================================================
   GF 25.08.: „Die Seite sollte etwas ansprechender gestaltet sein, aktuell
   handelt es sich ausschliesslich um Text, der nicht dazu einlaedt die Seite zu
   lesen." Dazu kommen vier Bausteine, alle aus echten Daten gespeist und alle
   im vorhandenen Formenkanon (weiss/Papier, ein Akzent in Coral, keine
   Verlaeufe, keine Schlagschatten). */

/* Kennzahlen unter der Ueberschrift. */
.pillar-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden; margin-top: 40px; max-width: 900px;
}
.pillar-kpi .pk { background: #fff; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.pillar-kpi .pk strong { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.pillar-kpi .pk span { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 900px) { .pillar-kpi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillar-kpi { grid-template-columns: 1fr; } }

/* Mietspiegel: Zeile = Stadtteil, Balken = mittlere Haelfte, Strich = Mittelwert.
   Eine Tabelle mit zehn Zahlenpaaren liest niemand; den Faktor zwei zwischen
   Hammerbrook und Neustadt sieht man dagegen sofort. */
.miet-tabelle { margin: 20px 0 10px; border-top: 1px solid var(--line); }
.miet-kopf, .miet-zeile {
  display: grid; grid-template-columns: 160px 1fr 64px; gap: 16px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.miet-kopf { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.miet-kopf em { font-style: normal; text-transform: none; letter-spacing: 0; }
.miet-zeile:hover { background: var(--bg-soft); }
.miet-ort { font-size: 14.5px; font-weight: 500; }
.miet-balken { display: grid; grid-template-columns: 1fr 108px; gap: 14px; align-items: center; }
.miet-spur { position: relative; height: 10px; background: var(--bg-paper); border-radius: 999px; }
.miet-band { position: absolute; top: 0; bottom: 0; background: var(--coral-100, #FFDBD6); border-radius: 999px; }
.miet-median { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--coral); border-radius: 2px; }
.miet-werte { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; white-space: nowrap; }
.miet-n { font-size: 12.5px; color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; }
/* Die Skalenbeschriftung gehoert unter die Spur und muss auf denselben
   Prozentpunkten sitzen wie die Balken. Deshalb dasselbe Spaltenraster wie eine
   Zeile, die Marken absolut auf ihrem Prozentwert, und rechts derselbe Abstand
   wie die Wertespalte (108 px + 14 px Luft) einnimmt. */
.miet-skala { display: grid; grid-template-columns: 160px 1fr 64px; gap: 16px; padding-top: 6px; }
.miet-skala .ms-spur { grid-column: 2; position: relative; height: 14px; margin-right: 122px; }
.miet-skala .ms {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .miet-kopf { display: none; }
  .miet-zeile { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .miet-balken { grid-column: 1 / -1; grid-template-columns: 1fr 100px; }
  .miet-skala { display: none; }
}

/* Drei Flaechen-Planungswerte. */
.flaechen-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; }
.flaechen-karten .fk {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 20px; display: flex; flex-direction: column; gap: 4px;
}
.flaechen-karten .fk-zahl { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.flaechen-karten .fk-art { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--coral); font-weight: 600; }
.flaechen-karten .fk p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 6px 0 0; }
@media (max-width: 700px) { .flaechen-karten { grid-template-columns: 1fr; } }

/* Die sechs Stadtteil-Guides als Textlinks, direkt unter dem Lage-Absatz.
   Die Bildkarten am Seitenende bleiben; wer hier liest, will jetzt springen
   und nicht erst bis ans Ende scrollen (GF 26.08.). */
.hood-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; padding: 0; }
.hood-links li { margin: 0; }
.hood-links a {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
  background: #fff; transition: border-color .15s, color .15s;
}
.hood-links a:hover { border-color: var(--coral); color: var(--coral); }
.hood-links a svg { opacity: .5; }
.hood-links a:hover svg { opacity: 1; }

/* Jede Zeile der Stadtteil-Preistabelle nennt ein echtes Haus und verlinkt es.
   Der Name steht unter der Segmentbezeichnung, damit die Spalte schmal bleibt. */
.hood-rent-table td strong { display: block; }
.hood-rent-table .miet-haus {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: 13px; font-weight: 400; color: var(--coral); text-decoration: none;
}
.hood-rent-table .miet-haus:hover { text-decoration: underline; }

/* Neuanmietung gegen Bestandsvertrag: zwei Zahlen, die man nebeneinander
   sehen muss, sonst wirkt die zweite wie ein Widerspruch zur ersten. */
.verhandel-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.verhandel-split .vs {
  border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px;
  background: #fff; display: flex; flex-direction: column; gap: 4px;
}
.verhandel-split .vs:last-child { background: var(--coral-50, #FFF3F1); border-color: var(--coral-100, #FFDBD6); }
.verhandel-split .vs-zahl { font-size: 32px; font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.verhandel-split .vs h3, .verhandel-split .vs h4 { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.verhandel-split .vs p { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 4px 0 0; max-width: none; }
@media (max-width: 700px) { .verhandel-split { grid-template-columns: 1fr; } }

/* Der FAQ-Block der Startseite wird hier wiederverwendet; im Fliesstext der
   Pillar-Seite braucht er etwas Luft nach oben. */
.pillar-body .faq { margin-top: 18px; }

/* Kontrastpaar im Magazin (GF 28.08.): zwei Haeuser nebeneinander. Am Telefon
   untereinander, sonst stuenden zwei 170-px-Bilder nebeneinander. */
@media (max-width: 700px) {
  .art-bildpaar { grid-template-columns: 1fr !important; }
}

/* Größenseiten (GF 24.09.): drei Beispielhäuser aus dem Datenpaket. Bewusst
   nicht die Objektkarte der Suche, die zeigt ein Passungs-Siegel aus der
   letzten Suche (window.__WU_FIT) und passt hier nicht. */
.gr-bsp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gr-bsp-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.gr-bsp-karte:hover { border-color: var(--ink); }
.gr-bsp-karte:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.gr-bsp-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg-paper); }
.gr-bsp-text { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.gr-bsp-text strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.gr-bsp-text span { font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 700px) { .gr-bsp { grid-template-columns: 1fr; } }