/* ==========================================================================
   BM GENERALBAU – Seitenspezifische Layouts
   Nur Regeln, die genau eine Seitengattung betreffen. Alles Wiederholbare
   gehört nach components.css.
   ========================================================================== */

/* ==========================================================================
   LEISTUNGSSEITE / ORTSSEITE – zweispaltiges Lesegerüst
   ========================================================================== */
.article-layout { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.article-main > section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.article-main > section + section { margin-top: var(--sp-3xl); }
.article-main h2 { margin-bottom: var(--sp-md); }
.article-main h3 { margin-top: var(--sp-xl); margin-bottom: var(--sp-sm); }
.article-main p, .article-main li { font-size: var(--fs-body-lg); color: var(--c-ink-soft); }
.article-main p { max-width: 44rem; }
.article-main ul, .article-main ol { max-width: 44rem; padding-left: 1.15rem; }
.article-main li::marker { color: var(--c-bronze-deep); }

.article-aside { display: grid; gap: var(--sp-lg); }

.aside-cta { padding: var(--sp-xl); background: var(--c-slate-deep); color: var(--c-on-dark-soft); }
.aside-cta h2 { font-size: var(--fs-h4); color: var(--c-white); margin-bottom: var(--sp-sm); }
.aside-cta p { font-size: var(--fs-sm); color: var(--c-on-dark-soft); margin-bottom: var(--sp-lg); }
.aside-cta .btn { width: 100%; }
.aside-cta__phone {
  display: block; margin-top: var(--sp-md);
  font-family: var(--ff-display); font-size: 1.25rem; font-weight: 700;
  color: var(--c-bronze); text-decoration: none; text-align: center;
}
.aside-cta__phone:hover { color: var(--c-gold-light); }
.aside-cta__hours {
  margin-top: var(--sp-md); padding-top: var(--sp-md);
  border-top: var(--hairline) solid var(--c-border-dark);
  font-size: var(--fs-xs); color: var(--c-on-dark-muted); text-align: center;
}

.scope-grid { display: grid; gap: var(--hairline); background: var(--c-border); border: var(--hairline) solid var(--c-border); }
.scope-grid__item { padding: var(--sp-lg); background: var(--c-white); }
.scope-grid__item h3 { font-size: 1.0625rem; margin: 0 0 var(--sp-xs); }
.scope-grid__item p { font-size: var(--fs-sm); margin: 0; }

.cost-table { width: 100%; font-size: var(--fs-sm); border: var(--hairline) solid var(--c-border); background: var(--c-white); }
.cost-table caption { caption-side: bottom; padding-top: var(--sp-sm); font-size: var(--fs-xs); color: var(--c-ink-muted); text-align: left; }
.cost-table th, .cost-table td { padding: var(--sp-sm) var(--sp-md); text-align: left; border-bottom: var(--hairline) solid var(--c-border); }
.cost-table thead th {
  background: var(--c-stone-2); font-family: var(--ff-body); font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-slate-deep);
}
.cost-table tbody tr:last-child td { border-bottom: 0; }
.cost-table td:last-child { white-space: nowrap; font-weight: 600; color: var(--c-slate-deep); }
.table-scroll { overflow-x: auto; }

/* ==========================================================================
   STARTSEITE
   ========================================================================== */
.home-trades { display: grid; gap: var(--hairline); background: var(--c-border-dark); border: var(--hairline) solid var(--c-border-dark); }

.region-band__map {
  display: flex; flex-direction: column; gap: var(--sp-lg);
  padding: var(--sp-xl); background: var(--c-charcoal);
  border: var(--hairline) solid var(--c-border-dark);
}
.region-band__map strong { font-family: var(--ff-display); font-size: var(--fs-h4); color: var(--c-white); }

/* ==========================================================================
   PROJEKTE
   ========================================================================== */
.project-hero__meta {
  display: grid; gap: var(--sp-lg); padding-block: var(--sp-xl);
  border-top: var(--hairline) solid var(--c-border);
  border-bottom: var(--hairline) solid var(--c-border);
}
.project-hero__meta dt {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--c-bronze-ink); margin-bottom: 0.35rem;
}
.project-hero__meta dd { margin: 0; font-family: var(--ff-display); font-size: 1.0625rem; font-weight: 600; color: var(--c-slate-deep); }

.log { position: relative; padding-left: var(--sp-xl); }
.log::before { content: ""; position: absolute; left: 6px; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--c-border); }
.log__entry { position: relative; padding-bottom: var(--sp-2xl); }
.log__entry:last-child { padding-bottom: 0; }
.log__entry::before {
  content: ""; position: absolute; left: calc(var(--sp-xl) * -1 + 1px); top: 0.45rem;
  width: 11px; height: 11px; background: var(--c-bronze-deep);
}
.log__phase {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--c-bronze-ink); margin-bottom: 0.35rem;
}
.log__entry h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-xs); }
.log__entry p { font-size: var(--fs-body-lg); color: var(--c-ink-soft); max-width: 44rem; }
.log__media { margin-top: var(--sp-lg); }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-xs);
  margin-bottom: var(--sp-2xl); padding-bottom: var(--sp-lg);
  border-bottom: var(--hairline) solid var(--c-border);
}
.filter-btn {
  padding: 0.5rem 1rem; background: var(--c-white);
  border: var(--hairline) solid var(--c-border);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink-soft);
  transition: all var(--dur-fast) var(--ease);
}
.filter-btn:hover { border-color: var(--c-bronze-deep); color: var(--c-bronze-ink); }
.filter-btn[aria-pressed="true"] { background: var(--c-slate-deep); border-color: var(--c-slate-deep); color: var(--c-white); }
.filter-empty { padding: var(--sp-2xl); text-align: center; color: var(--c-ink-muted); }

/* ==========================================================================
   KONTAKTSEITE
   ========================================================================== */
.contact-layout { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.contact-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--c-white);
  border: var(--hairline) solid var(--c-border); border-top: 3px solid var(--c-bronze-deep);
}
.contact-facts { display: grid; gap: var(--sp-lg); }
.contact-fact { display: flex; gap: var(--sp-md); align-items: flex-start; }
.contact-fact dt {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--c-bronze-ink); margin-bottom: 0.2rem;
}
.contact-fact dd { margin: 0; font-size: var(--fs-body-lg); color: var(--c-slate-deep); }
.contact-fact a { color: var(--c-slate-deep); font-weight: 600; text-decoration: none; }
.contact-fact a:hover { color: var(--c-bronze-ink); text-decoration: underline; }

/* ==========================================================================
   REGIONEN
   ========================================================================== */
.region-tier { margin-bottom: var(--sp-3xl); }
.region-tier:last-child { margin-bottom: 0; }
.region-tier > h2 {
  padding-bottom: var(--sp-md); margin-bottom: var(--sp-xl);
  border-bottom: 2px solid var(--c-bronze-deep); font-size: var(--fs-h3);
}

/* ==========================================================================
   RATGEBER
   ========================================================================== */
.guide-card {
  display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: var(--sp-lg); background: var(--c-white);
  border: var(--hairline) solid var(--c-border); height: 100%;
}
.guide-card h3 { font-size: 1.0625rem; margin: 0; }
.guide-card p { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; flex: 1; }
.guide-card__status { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-muted); }

/* ==========================================================================
   RECHTSTEXTE
   ========================================================================== */
.legal { max-width: 48rem; }
.legal h2 { margin-top: var(--sp-2xl); font-size: var(--fs-h3); }
.legal h3 { margin-top: var(--sp-xl); font-size: var(--fs-h4); }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: var(--fs-body); color: var(--c-ink-soft); }
.legal dl { display: grid; gap: var(--sp-sm); }
.legal dt { font-weight: 600; color: var(--c-slate-deep); }
.legal dd { margin: 0 0 var(--sp-sm); color: var(--c-ink-soft); }

/* ==========================================================================
   404
   ========================================================================== */
.error-page {
  display: grid; place-items: center; min-height: 70vh;
  padding-block: var(--sp-4xl); text-align: center;
  background: var(--c-slate-deep); color: var(--c-on-dark-soft);
}
.error-page__code {
  font-family: var(--ff-display); font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 800; line-height: 1; color: var(--c-bronze); letter-spacing: -0.04em;
}
.error-page h1 { color: var(--c-white); margin-top: var(--sp-lg); }
.error-page p { max-width: 34rem; margin-inline: auto; color: var(--c-on-dark-soft); font-size: var(--fs-lead); }