/* ==========================================================================
   BM GENERALBAU – Komponenten
   Wiederverwendbare Bausteine. Jede Komponente ist in sich geschlossen und
   später 1:1 als template-part in WordPress überführbar.
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* Primär: Anthrazit auf hell */
.btn--primary {
  background: var(--c-slate-deep);
  border-color: var(--c-slate-deep);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-bronze-deep);
  border-color: var(--c-bronze-deep);
  color: var(--c-white);
}

/* Primär auf dunklem Grund: Bronze */
.btn--bronze {
  background: var(--c-bronze);
  border-color: var(--c-bronze);
  color: var(--c-slate-black);
}
.btn--bronze:hover {
  background: var(--c-gold-light);
  border-color: var(--c-gold-light);
  color: var(--c-slate-black);
}

/* Sekundär: Bronze-Outline, füllt bei Hover */
.btn--outline {
  background: transparent;
  border-color: var(--c-bronze-deep);
  color: var(--c-bronze-ink);
}
.btn--outline:hover {
  background: var(--c-bronze-deep);
  border-color: var(--c-bronze-deep);
  color: var(--c-white);
}
.btn--outline-light {
  background: transparent;
  border-color: var(--c-bronze);
  color: var(--c-bronze);
}
.btn--outline-light:hover {
  background: var(--c-bronze);
  color: var(--c-slate-black);
}

/* Dezent: nur Rahmen in Steingrau */
.btn--ghost {
  background: var(--c-white);
  border-color: var(--c-border-strong);
  color: var(--c-slate-deep);
}
.btn--ghost:hover { border-color: var(--c-slate-deep); }

.btn--lg { padding: 1.15rem 2.25rem; font-size: var(--fs-body); }
.btn--sm { padding: 0.65rem 1.15rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-md); }
.btn-row--center { justify-content: center; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-bronze-ink);
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--c-slate-deep); }
.link-arrow:hover::after { transform: translateX(4px); }
.section--dark .link-arrow, .section--darkest .link-arrow { color: var(--c-bronze); }
.section--dark .link-arrow:hover, .section--darkest .link-arrow:hover { color: var(--c-gold-light); }

/* ==========================================================================
   2. BADGES & CHIPS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--c-bronze-tint);
  color: var(--c-bronze-ink);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge--dark {
  background: var(--c-bronze-veil);
  border: var(--hairline) solid var(--c-bronze);
  color: var(--c-bronze);
}
.badge--demo {
  background: var(--c-stone-3);
  border: 1px dashed var(--c-border-strong);
  color: var(--c-ink-muted);
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--c-slate-deep);
  color: var(--c-on-dark-soft);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* Lesbarkeitsschicht – Text muss AA erfüllen, nicht das Bild gewinnen */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,18,22,0.94) 0%, rgba(15,18,22,0.86) 42%, rgba(15,18,22,0.55) 72%, rgba(15,18,22,0.42) 100%);
}
.hero__inner {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(30rem, 78vh, 46rem);
  padding-block: var(--sp-3xl);
  max-width: 56rem;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-bronze);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--c-bronze);
}
.hero__eyebrow::after { display: none; }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--c-white);
  text-transform: uppercase;
  margin-bottom: var(--sp-lg);
}
.hero h1 .accent { color: var(--c-bronze); display: block; }
.hero__lead {
  max-width: 42rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-on-dark-soft);
  margin-bottom: var(--sp-xl);
}
.hero .btn-row { margin-bottom: var(--sp-xl); }

/* Vertikale Bronze-Kante links (Architekturlinie) */
.hero__inner::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1 + 0px);
  top: 12%;
  bottom: 12%;
  width: 3px;
  background: linear-gradient(180deg, var(--c-bronze) 0%, rgba(184,114,51,0) 100%);
}

/* Kompakter Hero für Unterseiten */
.hero--page .hero__inner { min-height: clamp(20rem, 44vh, 28rem); }
.hero--page h1 { font-size: var(--fs-h1); text-transform: none; }
.hero--page .hero__media::after {
  background: linear-gradient(100deg, rgba(15,18,22,0.95) 0%, rgba(15,18,22,0.88) 48%, rgba(15,18,22,0.62) 100%);
}
/* Ohne Bild: reine Fläche */
.hero--plain { background: var(--c-slate-deep); }

/* ==========================================================================
   4. TRUST BAR
   ========================================================================== */
.trust-bar {
  background: var(--c-slate-black);
  border-top: var(--hairline) solid var(--c-border-dark);
}
.trust-bar ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-bar li {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-lg) var(--sp-md);
  margin: 0;
  border-right: var(--hairline) solid var(--c-border-dark);
}
.trust-bar li:last-child { border-right: 0; }
.trust-bar strong {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.25;
}
.trust-bar span { font-size: var(--fs-sm); color: var(--c-on-dark-muted); }
.trust-bar .icon-square { flex: none; }

/* Quadratisches Icon-Feld (Designsystem: Icon Callout) */
.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-bronze);
  color: var(--c-slate-black);
}
.icon-square svg { width: 22px; height: 22px; }
.icon-square--lg { width: 56px; height: 56px; }
.icon-square--lg svg { width: 26px; height: 26px; }
.icon-square--outline {
  background: transparent;
  border: var(--hairline) solid var(--c-bronze-line);
  color: var(--c-bronze);
}
.icon-square--light {
  background: var(--c-bronze-tint);
  color: var(--c-bronze-ink);
}

/* ==========================================================================
   5. KARTEN
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--c-bronze-deep);
  box-shadow: var(--shadow-card);
}
.card__body { padding: var(--sp-xl); flex: 1; display: flex; flex-direction: column; }
.card__body > h3 { margin-bottom: var(--sp-sm); }
.card__body > p { color: var(--c-ink-soft); font-size: var(--fs-sm); flex: 1; }
.card__body > .link-arrow { margin-top: var(--sp-lg); align-self: flex-start; }

/* Ganze Karte klickbar, Link bleibt aber ein echter Link (a11y) */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Karte auf dunklem Grund */
.card--dark {
  background: var(--c-charcoal);
  border-color: var(--c-border-dark);
}
.card--dark:hover { border-color: var(--c-bronze); }
.card--dark h3 { color: var(--c-white); }
.card--dark .card__body > p { color: var(--c-on-dark-soft); }
/* Bronze-Highlight oben */
.card--accent { border-top: 2px solid var(--c-bronze-deep); }

/* ── Leistungskarte mit Bild ───────────────────────────────────────────── */
.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-stone-3);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }

/* ── Große Schwerpunkt-Karte ───────────────────────────────────────────── */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24rem;
  padding: var(--sp-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-charcoal);
  border-radius: var(--radius);
  color: var(--c-white);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: var(--c-white); }
.feature-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.feature-card:hover img { transform: scale(1.04); }
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15,18,22,0.95) 0%, rgba(15,18,22,0.72) 42%, rgba(15,18,22,0.18) 100%);
}
/* Textebene über Bild und Verlauf */
.feature-card > *:not(img) { position: relative; z-index: 2; }
.feature-card__num {
  position: absolute;
  top: var(--sp-lg);
  right: var(--sp-lg);
  font-family: var(--ff-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-bronze);
}
.feature-card h3 { color: var(--c-white); margin-bottom: var(--sp-xs); font-size: var(--fs-h3); }
.feature-card p { font-size: var(--fs-sm); color: var(--c-on-dark-soft); margin-bottom: var(--sp-md); }
.feature-card .link-arrow { color: var(--c-bronze); }

/* ── Gewerke-Raster (kompakte Kacheln) ─────────────────────────────────── */
.trade-grid { display: grid; gap: var(--hairline); background: var(--c-border-dark); border: var(--hairline) solid var(--c-border-dark); }
.trade-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-xl) var(--sp-lg);
  background: var(--c-slate-deep);
  color: var(--c-on-dark-soft);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.trade-tile:hover { background: var(--c-charcoal); color: var(--c-on-dark-soft); }
.trade-tile h3 {
  font-size: 1.0625rem;
  color: var(--c-white);
  margin: 0;
  transition: color var(--dur-fast) var(--ease);
}
.trade-tile:hover h3 { color: var(--c-bronze); }
.trade-tile p { font-size: var(--fs-sm); color: var(--c-on-dark-muted); margin: 0; line-height: 1.5; }
.trade-tile .icon-square { margin-bottom: var(--sp-xs); }

/* ── Projektkarte ──────────────────────────────────────────────────────── */
.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  background: var(--c-charcoal);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.project-card:hover img { transform: scale(1.03); }
.project-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-lg);
  background: linear-gradient(to top, rgba(15,18,22,0.92) 0%, rgba(15,18,22,0.35) 55%, transparent 100%);
}
.project-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-sm); }
.project-card h3 { color: var(--c-white); font-size: var(--fs-h4); margin: 0 0 0.25rem; }
.project-card p { color: var(--c-on-dark-soft); font-size: var(--fs-sm); margin: 0; }

/* ── Ortskarte ─────────────────────────────────────────────────────────── */
.location-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-lg);
  background: var(--c-white);
  border: var(--hairline) solid var(--c-border);
  border-left: 2px solid var(--c-bronze-deep);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.location-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.location-card strong { font-family: var(--ff-display); font-size: 1.0625rem; color: var(--c-slate-deep); }
.location-card span { font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* Kompakte Ortsliste (Chips) */
.location-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); list-style: none; margin: 0; padding: 0; }
.location-chips li { margin: 0; }
.location-chips a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: var(--hairline) solid var(--c-border);
  background: var(--c-white);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.location-chips a:hover { border-color: var(--c-bronze-deep); color: var(--c-bronze-ink); }
.section--dark .location-chips a, .section--darkest .location-chips a {
  background: transparent;
  border-color: var(--c-border-dark);
  color: var(--c-on-dark-soft);
}
.section--dark .location-chips a:hover, .section--darkest .location-chips a:hover {
  border-color: var(--c-bronze); color: var(--c-bronze);
}

/* ==========================================================================
   6. PROZESS-SCHRITTE
   ========================================================================== */
.process { display: grid; gap: var(--hairline); background: var(--c-border); border: var(--hairline) solid var(--c-border); }
.process__step {
  position: relative;
  padding: var(--sp-xl) var(--sp-lg);
  background: var(--c-white);
}
.process__num {
  display: block;
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-bronze-deep);
  margin-bottom: var(--sp-md);
}
.process__step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-xs); }
.process__step p { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }
/* Dunkle Variante */
.process--dark { background: var(--c-border-dark); border-color: var(--c-border-dark); }
.process--dark .process__step { background: var(--c-slate-deep); }
.process--dark .process__step h3 { color: var(--c-white); }
.process--dark .process__step p { color: var(--c-on-dark-muted); }
.process--dark .process__num { color: var(--c-bronze); }

/* ==========================================================================
   7. VORTEILSLISTE / CHECKS
   ========================================================================== */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-md); }
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin: 0;
  font-size: var(--fs-body-lg);
  color: var(--c-ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--c-bronze-deep);
  border-bottom: 2px solid var(--c-bronze-deep);
  transform: rotate(-45deg);
}
.check-list strong { color: var(--c-slate-deep); display: block; font-family: var(--ff-display); }
.section--dark .check-list li, .section--darkest .check-list li { color: var(--c-on-dark-soft); }
.section--dark .check-list strong, .section--darkest .check-list strong { color: var(--c-white); }
.section--dark .check-list li::before, .section--darkest .check-list li::before { border-color: var(--c-bronze); }

/* ==========================================================================
   8. STAT-BLOCK
   ========================================================================== */
.stats { display: grid; gap: var(--grid-gap); }
.stat {
  padding: var(--sp-lg) 0;
  border-top: 2px solid var(--c-bronze-deep);
}
.stat__value {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-slate-deep);
}
.stat__label { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.section--dark .stat__value, .section--darkest .stat__value { color: var(--c-white); }
.section--dark .stat__label, .section--darkest .stat__label { color: var(--c-on-dark-muted); }
.section--dark .stat, .section--darkest .stat { border-top-color: var(--c-bronze); }

/* ==========================================================================
   9. BREADCRUMB
   ========================================================================== */
.breadcrumb {
  padding-block: var(--sp-md);
  background: var(--c-white);
  border-bottom: var(--hairline) solid var(--c-border);
  font-size: var(--fs-xs);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--c-ink-muted); }
.breadcrumb li + li::before { content: "›"; color: var(--c-border-strong); }
.breadcrumb a { color: var(--c-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-bronze-ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-slate-deep); font-weight: 600; }

/* ==========================================================================
   10. FAQ-AKKORDEON
   ========================================================================== */
.faq { border-top: var(--hairline) solid var(--c-border); max-width: 52rem; }
.faq__item { border-bottom: var(--hairline) solid var(--c-border); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-lg) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-slate-deep);
  transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--c-bronze-ink); }
.faq__icon {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-bronze-deep);
  transition: transform var(--dur) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p, .faq__a ul {
  font-size: var(--fs-body-lg);
  color: var(--c-ink-soft);
  max-width: 46rem;
}
.faq__a > div > *:first-child { padding-top: 0; }
.faq__a > div > *:last-child { padding-bottom: var(--sp-lg); }

/* Ohne JS bleibt der Inhalt sichtbar (progressive enhancement) */
.no-js .faq__a { grid-template-rows: 1fr; }
.no-js .faq__q { cursor: default; }

.section--dark .faq, .section--darkest .faq { border-top-color: var(--c-border-dark); }
.section--dark .faq__item, .section--darkest .faq__item { border-bottom-color: var(--c-border-dark); }
.section--dark .faq__q, .section--darkest .faq__q { color: var(--c-white); }
.section--dark .faq__a p, .section--darkest .faq__a p { color: var(--c-on-dark-soft); }
.section--dark .faq__icon::before, .section--dark .faq__icon::after,
.section--darkest .faq__icon::before, .section--darkest .faq__icon::after { background: var(--c-bronze); }

/* ==========================================================================
   11. BILD/TEXT-SEKTION
   ========================================================================== */
.media-text__figure { position: relative; }
.media-text__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Bronze-Rahmenversatz als Architekturdetail */
.media-text__figure--framed::before {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 55%;
  height: 55%;
  border-left: 2px solid var(--c-bronze-deep);
  border-bottom: 2px solid var(--c-bronze-deep);
  z-index: -1;
}
.media-text__figure figcaption {
  margin-top: var(--sp-sm);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

/* Vorher/Nachher-Paar */
.ba-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
.ba-pair figure { margin: 0; }
.ba-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-pair figcaption {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-bronze-ink);
}

/* ==========================================================================
   12. CTA-BAND
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--c-slate-deep);
  color: var(--c-on-dark-soft);
  overflow: hidden;
  isolation: isolate;
}
.cta-band__inner {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
  padding-block: var(--sp-3xl);
}
.cta-band h2 { color: var(--c-white); margin-bottom: var(--sp-md); }
.cta-band p { font-size: var(--fs-lead); color: var(--c-on-dark-soft); max-width: 40rem; }
.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 700;
  color: var(--c-bronze);
  text-decoration: none;
}
.cta-band__phone:hover { color: var(--c-gold-light); }
/* Diagonaler Bronze-Schnitt rechts */
.cta-band::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10%;
  width: 42%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, transparent 48%, rgba(184,114,51,0.10) 48.4%, rgba(184,114,51,0.10) 52%, transparent 52.4%);
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   13. FORMULAR
   ========================================================================== */
.form { display: grid; gap: var(--sp-lg); }
.form__row { display: grid; gap: var(--sp-lg); }
.form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.form__field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-slate-deep);
}
.form__field .req { color: var(--c-bronze-ink); }
.form__hint { font-size: var(--fs-xs); color: var(--c-ink-muted); }

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form input[type="month"],
.form select,
.form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--c-white);
  border: var(--hairline) solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.form textarea { min-height: 9rem; resize: vertical; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-bronze-deep) 50%), linear-gradient(135deg, var(--c-bronze-deep) 50%, transparent 50%); background-position: calc(100% - 20px) 1.35rem, calc(100% - 14px) 1.35rem; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.75rem; }
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--c-bronze-deep); outline: none; box-shadow: none; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { border-color: var(--c-bronze-deep); outline: 2px solid var(--c-focus); outline-offset: 1px; box-shadow: none; }
.form input[aria-invalid="true"],
.form select[aria-invalid="true"],
.form textarea[aria-invalid="true"] { border-color: var(--c-error); }
.form__error { font-size: var(--fs-xs); color: var(--c-error); min-height: 1rem; }

/* Checkbox: scharfes Quadrat */
.form__check { display: flex; align-items: flex-start; gap: var(--sp-sm); }
.form__check input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-white);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.form__check input[type="checkbox"]::before {
  content: "";
  width: 0.6rem;
  height: 0.3rem;
  border-left: 2px solid var(--c-bronze);
  border-bottom: 2px solid var(--c-bronze);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.form__check input[type="checkbox"]:checked { background: var(--c-slate-deep); border-color: var(--c-slate-deep); }
.form__check input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.form__check label { font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink-soft); }

/* Upload-Platzhalter (Phase 1 ohne Backend) */
.upload-placeholder {
  padding: var(--sp-lg);
  border: 1px dashed var(--c-border-strong);
  background: var(--c-stone-2);
  text-align: center;
}
.upload-placeholder p { font-size: var(--fs-sm); color: var(--c-ink-muted); margin: 0; }
.upload-placeholder strong { display: block; color: var(--c-slate-deep); margin-bottom: 0.25rem; font-family: var(--ff-display); }

/* Statusmeldung */
.form__status {
  padding: var(--sp-md) var(--sp-lg);
  border-left: 3px solid var(--c-bronze-deep);
  background: var(--c-bronze-tint);
  font-size: var(--fs-sm);
  color: var(--c-slate-deep);
}
.form__status[hidden] { display: none; }

/* ==========================================================================
   14. STICKY MOBILE CTA
   ========================================================================== */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: none;
  grid-template-columns: 1fr 1fr;
  height: var(--mobile-cta-h);
  border-top: var(--hairline) solid var(--c-border-dark);
}
.mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-cta a:first-child { background: var(--c-slate-deep); color: var(--c-white); }
.mobile-cta a:last-child { background: var(--c-bronze); color: var(--c-slate-black); }
.mobile-cta svg { width: 1.1em; height: 1.1em; }

/* ==========================================================================
   15. LIGHTBOX (Projektgalerie)
   ========================================================================== */
.gallery-grid { display: grid; gap: var(--sp-md); }
.gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--c-stone-3);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  background: rgba(15, 18, 22, 0.94);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox__caption {
  position: absolute;
  left: 0; right: 0; bottom: var(--sp-lg);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-on-dark-soft);
  padding-inline: var(--sp-xl);
}
.lightbox__btn {
  position: absolute;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: var(--hairline) solid var(--c-border-dark);
  color: var(--c-white);
  font-size: 1.5rem;
  line-height: 1;
}
.lightbox__btn:hover { background: var(--c-bronze); color: var(--c-slate-black); border-color: var(--c-bronze); }
.lightbox__close { top: var(--sp-lg); right: var(--sp-lg); }
.lightbox__prev { left: var(--sp-lg); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--sp-lg); top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   16. HINWEIS-BOXEN
   ========================================================================== */
.note {
  padding: var(--sp-lg);
  background: var(--c-white);
  border: var(--hairline) solid var(--c-border);
  border-left: 3px solid var(--c-bronze-deep);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}
.note strong { color: var(--c-slate-deep); }
.note--placeholder {
  border-left-style: dashed;
  border-left-color: var(--c-ink-muted);
  background: var(--c-stone-2);
}

/* Blueprint-Trenner mit Claim */
.divider-claim {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  padding-block: var(--sp-xl);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-bronze-ink);
}
.divider-claim::before,
.divider-claim::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.section--dark .divider-claim, .section--darkest .divider-claim { color: var(--c-bronze); }
.section--dark .divider-claim::before, .section--dark .divider-claim::after,
.section--darkest .divider-claim::before, .section--darkest .divider-claim::after { background: var(--c-border-dark); }

/* ==========================================================================
   17. INHALTSVERZEICHNIS (lange Leistungsseiten)
   ========================================================================== */
.toc {
  padding: var(--sp-lg);
  background: var(--c-white);
  border: var(--hairline) solid var(--c-border);
  border-top: 2px solid var(--c-bronze-deep);
}
.toc h2 {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-bronze-ink);
  margin-bottom: var(--sp-md);
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 0.5rem; }
.toc a { font-size: var(--fs-sm); color: var(--c-ink-soft); text-decoration: none; display: flex; gap: 0.6rem; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--c-bronze-deep); font-weight: 600; flex: none; }
.toc a:hover { color: var(--c-bronze-ink); text-decoration: underline; }

/* ==========================================================================
   18. INTERNE LINK-BLÖCKE
   ========================================================================== */
.link-cluster { display: grid; gap: var(--sp-md); }
.link-cluster a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--c-white);
  border: var(--hairline) solid var(--c-border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-slate-deep);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.link-cluster a::after { content: "→"; color: var(--c-bronze-deep); }
.link-cluster a:hover { border-color: var(--c-bronze-deep); transform: translateX(3px); }

/* ==========================================================================
   19. SCROLL-REVEAL
   ========================================================================== */
/* Wichtig: .reveal ist im CSS SICHTBAR. Den unsichtbaren Startzustand setzt
   erst animations.js über .reveal--armed. Fällt das Skript aus, bleibt der
   Inhalt sichtbar, statt dauerhaft zu verschwinden. */
.reveal {
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal--armed { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.reveal--armed.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--armed { opacity: 1; transform: none; transition: none; }
}