/* =================================================================
   HÄUSERHELDEN · pages.css
   Styling für Unterseiten (FAQ, Blog, Standorte) — dunkles Theme
   wie die Hauptseite. Lädt zusätzlich zu style.css.
   ================================================================= */

/* ---------- Stadtkarte (Landkarte, floated neben Lead-Text) ---------- */
.city-map {
  float: right;
  width: clamp(220px, 38%, 380px);
  margin: 0.25rem 0 1.5rem 2rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(44,44,44,0.10);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 14px 32px -10px rgba(0,0,0,0.18);
}
.city-map img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}
.article::after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 600px) {
  .city-map {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem;
  }
}

/* ---------- Stadtfoto (Wikimedia-Foto je Stadtseite) ---------- */
.stadt-foto {
  clear: both;
  margin: 2rem 0 2.5rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.07), 0 24px 48px -16px rgba(0,0,0,0.20);
}
.stadt-foto img {
  width: 100%;
  height: clamp(200px, 30vw, 420px);
  object-fit: cover;
  object-position: center;
  display: block;
}
.theme-light .stadt-foto {
  border: 1px solid rgba(44,44,44,0.08);
}

.page-hero {
  padding: clamp(7rem, 18vh, 11rem) var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
  max-width: var(--container); margin: 0 auto; border-bottom: 1px solid var(--line);
}

/* Stadtseiten mit Banner: weniger Abstand über dem Seiteninhalt */
.city-banner + .page-hero {
  padding-top: clamp(3.5rem, 8vh, 5rem);
}
.breadcrumb {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 1.4rem;
}
.breadcrumb a:hover { color: var(--brass-400); }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4rem);
  line-height: 1.03; letter-spacing: -0.03em; margin: 0.6rem 0 1.1rem;
}
.page-hero p { color: var(--cream-100); max-width: 60ch; }

/* ---------- FAQ ---------- */
.faq-page { max-width: var(--container); margin: 0 auto; padding: clamp(3rem, 8vh, 5rem) var(--gutter) clamp(3rem, 7vh, 5rem); }
.faq-page__group + .faq-page__group { margin-top: 3.5rem; }
.faq-page__grouptitle {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  color: var(--brass-400); margin-bottom: 0.8rem;
  display: flex; align-items: baseline; gap: 0.8rem;
}
.faq-page__grouptitle span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }

.qa { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.qa summary {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; color: var(--cream-50);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; color: var(--brass-500); font-size: 1.4rem; line-height: 1; transition: transform 0.3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--cream-100); margin-top: 0.9rem; max-width: 72ch; }
.qa p + p { margin-top: 0.7rem; }

/* ---------- CTA-Band ---------- */
.page-cta {
  text-align: center; padding: clamp(3rem, 8vh, 5rem) var(--gutter);
  background: radial-gradient(70% 90% at 50% 0%, rgba(199,160,100,0.13), transparent 55%), var(--espresso-800);
  border-radius: var(--radius); max-width: var(--container);
  margin: 0 auto clamp(4rem, 10vh, 7rem);
}
.page-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 1rem + 2.5vw, 2.6rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.page-cta p { color: var(--cream-100); margin: 0 auto 1.8rem; max-width: 46ch; }
.page-cta .btn { margin: 0 0.4rem; }

/* ---------- Blog-Index ---------- */
.blog-grid { max-width: var(--container); margin: 0 auto; padding: clamp(2rem,5vh,3.5rem) var(--gutter) clamp(4rem,10vh,6rem); display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.blog-section-head { max-width: var(--container); margin: 0 auto; padding: clamp(3rem,8vh,5rem) var(--gutter) 0; border-top: 1px solid rgba(44,44,44,0.10); }
.blog-section-head .eyebrow { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-600); margin-bottom: 0.8rem; }
.blog-section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); color: var(--ink-900); margin-bottom: 0.75rem; }
.blog-section-head p { color: var(--ink-600); max-width: 58ch; }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.4s var(--ease), border-color 0.4s; }
.post-card:hover { transform: translateY(-6px); border-color: var(--brass-600); }
.post-card__media { display: block; }
.post-card .img-slot { aspect-ratio: 16/10; border: none; border-radius: 0; }
.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card__tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-400); }
.post-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.post-card h2 a:hover { color: var(--brass-400); }
.post-card p { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- Lokales Immobilienwissen (Stadtseiten) ---------- */
.local-wissen { max-width: var(--container); margin: 0 auto; padding: clamp(2rem,6vh,4rem) var(--gutter); }
.local-wissen__head { margin-bottom: 2rem; }
.local-wissen__head .section-title { font-size: clamp(1.6rem,1.2rem+1.8vw,2.4rem); }
.local-wissen__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.wcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; background: linear-gradient(180deg, var(--espresso-800), transparent); transition: transform .4s var(--ease), border-color .4s; }
.wcard:hover { transform: translateY(-5px); border-color: var(--brass-600); }
.wcard__tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-400); }
.wcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; line-height: 1.25; color: var(--cream-50); }
.wcard p { color: var(--cream-100); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.wcard a { font-family: var(--font-mono); font-size: 0.76rem; color: var(--brass-400); border-bottom: 1px solid currentColor; align-self: flex-start; }
.wcard a:hover { color: var(--brass-500); }
@media (max-width: 900px){ .local-wissen__grid { grid-template-columns: 1fr; } }

/* ---------- Weitere Standorte (Interlinking) ---------- */
.weitere { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) clamp(2rem,6vh,4rem); }
.weitere h2 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-500); margin-bottom: 1rem; }
.weitere__links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.weitere__links a { border: 1px solid var(--line); border-radius: 100px; padding: 0.5rem 1.1rem; color: var(--cream-100); font-size: 0.9rem; transition: border-color .25s, color .25s; }
.weitere__links a:hover { border-color: var(--brass-500); color: var(--brass-400); }
.weitere__links a.is-all { background: var(--brass-500); color: var(--espresso-900); border-color: var(--brass-500); font-weight: 600; }

/* ---------- Standorte-Übersicht ---------- */
.standorte-grid { max-width: var(--container); margin: 0 auto; padding: clamp(2rem,5vh,3.5rem) var(--gutter) clamp(3rem,8vh,5rem); display: grid; grid-template-columns: repeat(4,1fr); gap: 0.75rem; }
.scard { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; transition: transform .3s var(--ease), border-color .3s; background: linear-gradient(180deg, var(--espresso-800), transparent); }
.scard:hover { transform: translateY(-3px); border-color: var(--brass-600); }
.scard h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.2rem; }
.scard h2 a:hover { color: var(--brass-400); }
.scard p { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
@media (max-width: 900px){ .standorte-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .standorte-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 360px){ .standorte-grid { grid-template-columns: 1fr; } }

/* ---------- Artikel (Einzelseite) ---------- */
.article { max-width: 1000px; margin: 0 auto; padding: clamp(2rem, 6vh, 3.5rem) var(--gutter) clamp(4rem, 10vh, 7rem); }
.article__lead { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); color: var(--cream-50); font-weight: 500; line-height: 1.55; margin-bottom: 1.6rem; }
.article p { color: var(--cream-100); margin-bottom: 1.1rem; line-height: 1.75; }
.article h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.15; margin: 2.6rem 0 1rem; }
.article h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 1.9rem 0 0.7rem; color: var(--brass-400); }
.article ul, .article ol { margin: 0 0 1.4rem 1.3rem; color: var(--cream-100); display: flex; flex-direction: column; gap: 0.6rem; line-height: 1.6; }
.article ol { list-style: decimal; } .article ul { list-style: disc; }
.article a.inline { color: var(--brass-400); border-bottom: 1px solid currentColor; }
.article a.inline:hover { color: var(--brass-500); }
.article__cta { margin: 2.6rem 0; padding: clamp(1.5rem, 4vw, 2.2rem); border: 1px solid var(--brass-600); border-radius: var(--radius); text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, rgba(199,160,100,0.12), transparent 60%), var(--espresso-800); }
.article__cta h3 { color: var(--cream-50); margin: 0 0 0.4rem; }
.article__cta p { margin-bottom: 1.2rem; }
.article__sources { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }
.article__sources a { color: var(--brass-600); border-bottom: 1px solid currentColor; }
.article__related { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter) clamp(3rem,8vh,5rem); }
.article__related h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-500); margin-bottom: 1rem; }
.article__related a { display: block; color: var(--cream-100); padding: 0.5rem 0; border-bottom: 1px solid var(--line); transition: color 0.2s; }
.article__related a:hover { color: var(--brass-400); }

/* Vergleichstabellen in Artikeln */
.article__table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: 0.92rem; }
.article__table th, .article__table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.article__table thead th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-500); }
.article__table tbody th[scope="row"] { font-weight: 600; color: var(--cream-50); white-space: nowrap; }
.theme-light .article__table tbody th[scope="row"] { color: inherit; }
.article__table tbody tr:last-child th, .article__table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 600px) { .article__table { font-size: 0.84rem; } .article__table th, .article__table td { padding: 0.55rem 0.5rem; } }

/* =================================================================
   HELLES THEME für Unterseiten (body.theme-light)
   Off-White Flächen + Anthrazit-Text + Gold-Akzente (CI).
   Heller wie haeuserhelden.de. Nav + Footer bleiben bewusst dunkel.
   ================================================================= */
body.theme-light { background: var(--cream-50); color: var(--ink-900); }
.theme-light ::selection { background: var(--brass-400); color: #1b1a18; }

/* Kopf / Brotkrumen */
.theme-light .page-hero { border-bottom-color: rgba(44,44,44,0.12); }
.theme-light .page-hero h1 { color: var(--ink-900); }
.theme-light .page-hero p { color: var(--ink-600); }
.theme-light .breadcrumb { color: #8a8378; }
.theme-light .breadcrumb a:hover { color: var(--brass-600); }
.theme-light .eyebrow, .theme-light .eyebrow--light { color: var(--brass-600); }
.theme-light .section-title, .theme-light .section-title--dark { color: var(--ink-900); }
.theme-light em { color: var(--brass-600); }

/* Trust-Zahlen */
.theme-light .stat { background: #fff; border-color: rgba(44,44,44,0.10); box-shadow: 0 20px 44px -32px rgba(0,0,0,0.28); }
.theme-light .stat__num { color: var(--brass-600); }
.theme-light .stat__lbl { color: var(--ink-600); }

/* Artikel */
.theme-light .article__lead { color: var(--ink-900); }
.theme-light .article p { color: #4a463f; }
.theme-light .article h2 { color: var(--ink-900); }
.theme-light .article h3 { color: var(--brass-600); }
.theme-light .article ul, .theme-light .article ol { color: #4a463f; }
.theme-light .article a.inline { color: var(--brass-600); }
.theme-light .article__cta { background: #fff; border-color: var(--brass-500); box-shadow: 0 24px 50px -34px rgba(0,0,0,0.25); }
.theme-light .article__cta h3 { color: var(--ink-900); }
.theme-light .article__cta p { color: var(--ink-600); }
.theme-light .article__sources { color: var(--ink-600); border-top-color: rgba(44,44,44,0.12); }
.theme-light .article__sources a { color: var(--brass-600); }

/* FAQ-Akkordeon */
.theme-light .qa { border-bottom-color: rgba(44,44,44,0.12); }
.theme-light .qa summary { color: var(--ink-900); }
.theme-light .qa summary::after { color: var(--brass-600); }
.theme-light .qa p { color: #4a463f; }
.theme-light .faq-page__grouptitle { color: var(--ink-900); }
.theme-light .faq-page__grouptitle span { color: #8a8378; }

/* Lokales Immobilienwissen */
.theme-light .wcard { background: #fff; border-color: rgba(44,44,44,0.10); box-shadow: 0 18px 42px -32px rgba(0,0,0,0.22); }
.theme-light .wcard h3 { color: var(--ink-900); }
.theme-light .wcard p { color: #4a463f; }
.theme-light .wcard__tag, .theme-light .wcard a { color: var(--brass-600); }

/* Weitere Standorte */
.theme-light .weitere h2 { color: var(--brass-600); }
.theme-light .weitere__links a { border-color: rgba(44,44,44,0.18); color: var(--ink-900); }
.theme-light .weitere__links a:hover { border-color: var(--brass-500); color: var(--brass-600); }
.theme-light .weitere__links a.is-all { background: var(--brass-500); color: #fff; border-color: var(--brass-500); }

/* Standorte-Übersicht */
.theme-light .scard {
  background: #fff;
  border-color: rgba(44,44,44,0.08);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 16px 36px -16px rgba(0,0,0,0.18);
}
.theme-light .scard h2 a { color: var(--ink-900); }
.theme-light .scard p { color: var(--ink-600); }

/* Blog-Index */
.theme-light .post-card { background: #fff; border-color: rgba(44,44,44,0.10); box-shadow: 0 18px 42px -34px rgba(0,0,0,0.18); }
.theme-light .post-card h2 a { color: var(--ink-900); }
.theme-light .post-card p { color: var(--ink-600); }
.theme-light .post-card .img-slot.has-img { background: #ece7dd; }

/* Abschluss-CTA */
.theme-light .page-cta { background: radial-gradient(70% 90% at 50% 0%, rgba(199,160,100,0.18), transparent 60%), #fff; border: 1px solid rgba(44,44,44,0.10); }
.theme-light .page-cta h2 { color: var(--ink-900); }
.theme-light .page-cta p { color: var(--ink-600); }

/* Ghost-Buttons auf hell lesbar */
.theme-light .btn--ghost { border-color: rgba(44,44,44,0.25); color: var(--ink-900); }
.theme-light .btn--ghost:hover { border-color: var(--brass-500); color: var(--brass-600); }
.theme-light .link-arrow { color: var(--brass-600); }

/* =================================================================
   STANDORTE-HUB: heller Hero mit Düsseldorf-Büro-Bild
   ================================================================= */
.standorte-hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.standorte-hero__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 34px 70px -34px rgba(0,0,0,0.4); }
.standorte-hero__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px){ .standorte-hero { grid-template-columns: 1fr; } }