/* ==========================================================================
   FASBO GRUPPE — Komponenten
   ========================================================================== */

/* --- Kopfbereich --------------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--head-h);
  display: flex; align-items: center;
  color: var(--kalk);
  transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}
.site-head::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--kalk);
  border-bottom: 1px solid var(--line);
  transform: translateY(-101%);
  transition: transform 0.55s var(--ease);
}
.site-head.is-solid { color: var(--ink); }
.site-head.is-solid::before { transform: none; }
.site-head.is-hidden { transform: translateY(-100%); }
.site-head[data-static="true"] { color: var(--ink); }
.site-head[data-static="true"]::before { transform: none; }

.head-inner {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--page-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

/* Wortmarke — typografisch gesetzt.
   Die Marke besteht aus dem Namen und dem roten F. Als Schriftzug gesetzt
   bleibt sie auf jedem Untergrund scharf, skaliert stufenlos und braucht
   keine zweite Datei für die Negativfassung: die Grundfarbe erbt sie vom
   Kontext, das F behält sein Rot. Das quadratische Signet bleibt der
   Bildmarke für Favicon und Social-Vorschau vorbehalten. */
.brand { display: inline-flex; align-items: center; gap: 0.8rem; flex: none; }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  font-weight: 700; font-stretch: 108%;
  letter-spacing: 0.13em; text-transform: uppercase;
}
/* Das rote F: einziger Farbakzent der Wortmarke. */
.brand__f {
  color: var(--marke-rot);
  transition: color 0.4s var(--ease);
}
.on-dark .brand__f, .site-head:not(.is-solid):not([data-static="true"]) .brand__f,
.mobile-nav .brand__f, .site-foot .brand__f { color: var(--marke-rot-lt); }
.brand__sub {
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem;
  letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.62; margin-top: 5px;
  white-space: nowrap;
}
@media (max-width: 420px) { .brand__sub { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(0.7rem, 1.35vw, 1.9rem); }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: inline-block; padding: 0.4rem 0;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.004em; white-space: nowrap;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.42s var(--ease);
}
.nav__link:hover::after, .nav__item:focus-within > .nav__link::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); height: 2px; }
/* Die Sparte ist im Menü rot gesetzt. Die zusätzliche Registermarke ist
   entfallen, seit die Zweitaktion „Immobilie verkaufen" daneben steht —
   zwei rote Marken nebeneinander heben ihre Signalwirkung gegenseitig auf. */
.nav__link--flag { color: var(--accent); }

/* Untermenü */
.nav__toggle { background: none; border: 0; padding: 0.4rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.nav__caret { width: 8px; height: 5px; transition: transform 0.35s var(--ease); opacity: 0.7; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
.subnav {
  position: absolute; top: calc(100% + 1.15rem); left: -1.35rem;
  min-width: 320px; background: var(--kalk); color: var(--ink);
  border: 1px solid var(--line); padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0.3s;
  box-shadow: 0 26px 60px -30px rgba(11, 12, 14, 0.35);
}
.nav__item.is-open .subnav { opacity: 1; visibility: visible; transform: none; }
.subnav a {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.82rem 0.95rem; font-size: 0.875rem;
  transition: background 0.25s var(--ease);
}
.subnav a:hover { background: var(--kalk-deep); }
.subnav a span:first-child { font-family: 'Plex Mono', monospace; font-size: 0.625rem; color: var(--accent); letter-spacing: 0.1em; }

.head-actions { display: flex; align-items: center; gap: 0.9rem; flex: none; }

/* Zweitaktion im Kopf: der Verkaufsweg für Eigentümer. Gleicher Rahmen wie
   die Hauptaktion; unterschieden wird über die rote Registermarke, nicht
   über die Form. */
.head-sell {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid currentColor; padding: 0.62rem 1.05rem;
  font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
}
.head-sell::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor;
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--ease);
}
.head-sell:hover::after { transform: scaleY(1); }
.head-sell:hover { color: var(--ink); }
.site-head.is-solid .head-sell:hover, .site-head[data-static="true"] .head-sell:hover { color: var(--kalk); }
/* Die Registermarke bewegt sich beim Überfahren nicht. Sie steht in einer
   Reihe mit gleichartigen Schaltflächen — eine gedrehte und eine gerade
   Marke nebeneinander sehen nach Fehler aus. Der Hover trägt über Rahmen
   und Fläche. */
.head-sell::before {
  content: ''; width: 6px; height: 6px; background: var(--accent); flex: none;
}
@media (max-width: 1380px) { .head-sell { display: none; } }

.head-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 1px solid currentColor; padding: 0.62rem 1.05rem;
  font-size: 0.8125rem; font-weight: 500; position: relative; overflow: hidden; isolation: isolate;
}
.head-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor;
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--ease);
}
.head-cta:hover::before { transform: scaleY(1); }
.site-head.is-solid .head-cta:hover, .site-head[data-static="true"] .head-cta:hover { color: var(--kalk); }
.head-cta:hover { color: var(--ink); }

/* Burger */
.burger {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 10px; width: 24px; height: 1.5px; background: currentColor;
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobiles Vollbildmenü */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: var(--kalk);
  padding: calc(var(--head-h) + 2rem) var(--page-pad) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  overflow-y: auto; visibility: hidden;
}
.mobile-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-nav a { display: block; }
.mobile-nav__list > li { border-top: 1px solid var(--line-inv); }
.mobile-nav__list > li:last-child { border-bottom: 1px solid var(--line-inv); }
.mobile-nav__list > li > a {
  padding: 1.05rem 0; font-size: clamp(1.35rem, 6vw, 2rem);
  font-stretch: 104%; letter-spacing: -0.03em; line-height: 1.1;
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i) * 55ms + 120ms);
}
.mobile-nav.is-open .mobile-nav__list > li > a { opacity: 1; transform: none; }
.mobile-nav__list .idx { font-size: 0.625rem; }
.mobile-nav__sub { padding: 0 0 1.1rem 2.4rem; display: grid; gap: 0.55rem; }
.mobile-nav__sub a { font-size: 0.95rem; color: #A5A199; }
.mobile-nav__foot { padding-top: 2rem; display: grid; gap: 0.9rem; }
/* Acht Einträge plus Untermenü werden auf kurzen Geräten lang — das Menü
   scrollt, die Zeilen rücken zusätzlich enger zusammen. */
@media (max-height: 780px) {
  .mobile-nav__list > li > a { padding: 0.8rem 0; font-size: clamp(1.2rem, 5.2vw, 1.7rem); }
  .mobile-nav__sub { padding-bottom: 0.8rem; }
  .mobile-nav__foot { padding-top: 1.4rem; }
}

@media (max-width: 1200px) {
  .nav, .head-actions .head-cta { display: none; }
  .burger { display: block; }
}

/* Vier Einstiege im Hero, je Zielgruppe einer. Als Raster statt als Reihe
   gesetzt: So sind alle vier exakt gleich breit und gleich hoch, unabhängig
   davon, wie lang die Beschriftung ist. Der Pfeil sitzt bei allen rechts
   außen, weil justify-content: space-between den Rest der Zelle füllt. */
.hero__wege {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: clamp(1.8rem, 3.2vw, 2.6rem);
  max-width: 660px;
}
.hero__wege .btn { width: 100%; justify-content: space-between; padding-inline: 1.35rem; }
@media (max-width: 560px) { .hero__wege { grid-template-columns: 1fr; } }

/* --- Hero: geteilt (Standard) --------------------------------------------
   Zwei Spalten: links Typografie auf Kalk, rechts das Foto ungedämpft bis an
   die Fensterkante. Die vorhandenen Aufnahmen sind helle Tageslichtbilder —
   sie vertragen keine Verdunklung, sie wollen Fläche.
   ------------------------------------------------------------------------- */
.hero.hero--split {
  background: var(--kalk); color: var(--ink);
  --bg: var(--kalk); --fg: var(--ink);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --muted: var(--beton-dark); --accent: var(--signal);
  position: relative; display: flex; flex-direction: column;
  padding-top: var(--head-h); overflow: hidden;
}
.hero__cols {
  display: grid; grid-template-columns: 1.04fr 1fr;
  min-height: min(calc(100svh - var(--head-h) - 104px), 780px);
}
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 5rem) clamp(2.75rem, 5vw, 4.5rem) var(--page-pad);
  position: relative;
}
.hero__text > * { max-width: 860px; }
/* feines Tragraster hinter dem Text */
.hero__text::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 0 1px, transparent 1px 25%);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.hero__figure {
  position: relative; overflow: hidden; background: var(--kalk-warm); min-height: 320px;
}
.hero__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__figcap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--kalk); color: var(--ink);
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.7rem 1rem 0.7rem clamp(1rem, 2vw, 1.6rem);
}
.hero.hero--split .hero__eyebrow .bar { background: var(--ink); opacity: 0.35; }
.hero.hero--split .hero__eyebrow .label { color: var(--muted); opacity: 1; }
.hero.hero--split .hero__title {
  max-width: 17ch;
  font-size: clamp(2.35rem, 4.9vw, 5rem);
  line-height: 0.9;
}
.hero.hero--split .hero__title em { font-style: normal; }
.hero.hero--split .hero__claim { color: var(--muted); }
.hero.hero--split .hero__metrics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero.hero--split .hero__metrics li { border-left-color: var(--line); }
.hero.hero--split .hero__metrics .cap { opacity: 1; color: var(--muted); }

@media (max-width: 1024px) {
  .hero__cols { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { padding: clamp(2.5rem, 7vw, 4rem) var(--page-pad); }
  .hero__figure { aspect-ratio: 4 / 3; min-height: 0; }
  .hero__figure img { position: relative; }
}

/* --- Hero: Vollbild (Sparte, Alternative) --------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--ink); color: var(--kalk); overflow: hidden;
  padding-top: var(--head-h);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.06); animation: heroDrift 22s var(--ease) forwards;
  opacity: 0.72;
}
@keyframes heroDrift { to { transform: scale(1); } }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,12,14,0.72) 0%, rgba(11,12,14,0.3) 30%, rgba(11,12,14,0.6) 74%, rgba(11,12,14,0.92) 100%),
    linear-gradient(96deg, rgba(11,12,14,0.82) 0%, rgba(11,12,14,0.5) 46%, rgba(11,12,14,0.2) 100%);
}
/* Bauraster als feines Liniennetz */
.hero__raster {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(242,241,237,0.075) 0 1px, transparent 1px calc(100% / 12));
  background-size: 100% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.hero__raster::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(242,241,237,0.09);
}

.hero__body {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hero__eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
.hero__eyebrow .label { color: var(--kalk); opacity: 0.72; }
.hero__eyebrow .bar { width: clamp(36px, 6vw, 90px); height: 1px; background: var(--kalk); opacity: 0.4; transform-origin: left; }
.hero__title { max-width: 17ch; }
.hero__title em { font-style: normal; color: var(--signal-lt); }
.hero__foot {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  align-items: end; margin-top: clamp(2.25rem, 4.5vw, 4rem);
}
.hero__claim { grid-column: 1 / span 5; }
.hero__actions { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: flex-end; }
@media (max-width: 1024px) {
  .hero__claim, .hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Vertikale Randbeschriftung */
.hero__rail {
  position: absolute; left: calc(var(--page-pad) * 0.34); top: 50%; z-index: 3;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.32em;
  text-transform: uppercase; opacity: 0.5;
}
@media (max-width: 1280px) { .hero__rail { display: none; } }

/* Kennzahlenleiste am Heroende */
.hero__metrics {
  position: relative; z-index: 2; border-top: 1px solid var(--line-inv);
}
.hero__metrics ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--max); margin-inline: auto; padding-inline: var(--page-pad);
}
.hero__metrics li {
  padding: clamp(1.1rem, 2.2vw, 1.9rem) clamp(0.6rem, 1.6vw, 1.6rem);
  border-left: 1px solid var(--line-inv);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.hero__metrics li:first-child { border-left: 0; padding-left: 0; }
.hero__metrics .num {
  font-size: clamp(1.5rem, 2.7vw, 2.6rem); font-stretch: 80%; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1;
}
.hero__metrics .cap { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; line-height: 1.4; }
@media (max-width: 760px) {
  .hero__metrics ul { grid-template-columns: repeat(2, 1fr); }
  .hero__metrics li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero__metrics li:nth-child(-n+2) { border-bottom: 1px solid var(--line-inv); }
}

.scroll-hint {
  position: absolute; right: var(--page-pad); bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 0.7rem; padding-bottom: 1.2rem;
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55;
}
.scroll-hint i { display: block; width: 1px; height: 34px; background: currentColor; position: relative; overflow: hidden; }
.scroll-hint i::after { content: ''; position: absolute; inset: 0; background: var(--kalk); animation: scrollTick 2.4s var(--ease-io) infinite; }
@keyframes scrollTick { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* Seitenkopf für Unterseiten */
.pagehead {
  background: var(--ink); color: var(--kalk); position: relative; overflow: hidden;
  padding-top: calc(var(--head-h) + clamp(3.5rem, 8vw, 8rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.pagehead__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
.pagehead__title { grid-column: 1 / span 7; }
.pagehead__aside { grid-column: 9 / span 4; }
@media (max-width: 1024px) { .pagehead__title, .pagehead__aside { grid-column: 1 / -1; } .pagehead__aside { margin-top: 1.75rem; } }
.pagehead__media { position: absolute; inset: 0; opacity: 0.28; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.9), rgba(11,12,14,0.55) 60%, rgba(11,12,14,0.95)); }
.pagehead > .shell { position: relative; z-index: 1; }

.crumbs { display: flex; gap: 0.55rem; align-items: center; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.crumbs a, .crumbs span { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; }
.crumbs a:hover { opacity: 1; }
.crumbs i { width: 14px; height: 1px; background: currentColor; opacity: 0.4; }

/* --- Zielgruppen -----------------------------------------------------------
   Direkte Ansprache statt allgemeiner Nutzenversprechen: Wer bin ich, und was
   habe ich davon? Ohne JavaScript stehen alle Panels untereinander.
   ------------------------------------------------------------------------- */
.aud { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.aud__tabs {
  grid-column: 1 / span 4; display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.aud__tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; width: 100%;
  border-bottom: 1px solid var(--line);
  padding: clamp(1.05rem, 1.9vw, 1.5rem) 0;
  display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0.8rem; align-items: baseline;
  font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.012em; line-height: 1.25;
  color: var(--muted); position: relative;
  transition: color 0.35s var(--ease);
}
.aud__tab::before {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.aud__tab .idx { transition: color 0.35s var(--ease); }
.aud__tab:hover { color: var(--fg); }
.aud__tab[aria-selected="true"] { color: var(--fg); }
.aud__tab[aria-selected="true"]::before { transform: scaleX(1); }
.aud__tab .arw { opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.aud__tab[aria-selected="true"] .arw { opacity: 1; transform: none; }

.aud__panels { grid-column: 6 / span 7; }
.aud__panel { display: grid; gap: 1.3rem; }
.js .aud__panel[hidden] { display: none; }
.aud__panel h3 { font-size: var(--t-h2); letter-spacing: -0.026em; max-width: 18ch; }
.aud__panel > p { max-width: 60ch; color: var(--muted); }
.aud__points { display: grid; gap: 0.75rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.aud__points li { display: grid; grid-template-columns: 14px 1fr; gap: 0.9rem; align-items: start; font-size: var(--t-small); }
.aud__points li::before { content: ''; width: 8px; height: 8px; background: var(--accent); margin-top: 0.55em; }
.aud__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 0.4rem; }
/* Ohne JavaScript: Panels als Liste mit eigener Überschrift */
.aud__panel + .aud__panel { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.js .aud__panel + .aud__panel { margin-top: 0; }
@media (max-width: 1024px) {
  .aud__tabs, .aud__panels { grid-column: 1 / -1; }
  .aud__panels { margin-top: 2.2rem; }
  .aud__tab { grid-template-columns: 2.4rem 1fr auto; }
}

/* --- Vorher / Nachher ------------------------------------------------------
   Schieberegler über zwei deckungsgleichen Aufnahmen. Ohne JavaScript steht
   der Regler in der Mitte und zeigt beide Hälften.
   ------------------------------------------------------------------------- */
.ba { --p: 50%; position: relative; }
.ba__frame {
  position: relative; overflow: hidden; background: var(--kalk-warm);
  aspect-ratio: 3 / 2; isolation: isolate;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 56px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba__range:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--p); z-index: 3;
  width: 1px; background: var(--kalk); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(11, 12, 14, 0.18);
}
.ba__handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; transform: translate(-50%, -50%);
  background: var(--kalk); border: 1px solid rgba(11, 12, 14, 0.16);
}
.ba__handle::before {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 15px; height: 7px; transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--ink), var(--ink)) left center / 5px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right center / 5px 7px no-repeat;
  clip-path: polygon(0 50%, 5px 0, 5px 100%, 0 50%, 100% 50%, 10px 0, 10px 100%, 100% 50%);
}
.ba__tag {
  position: absolute; top: 0; z-index: 2;
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.6rem 0.85rem; background: var(--kalk); color: var(--ink);
}
.ba__tag--l { left: 0; }
.ba__tag--r { right: 0; }
.ba__cap {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between;
  border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: 1.1rem;
}
.ba-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter) var(--gutter); row-gap: clamp(2.5rem, 4vw, 4rem); }
.ba-grid > .ba { grid-column: span 6; }
.ba-grid > .ba:first-child { grid-column: span 12; }
.ba-grid > .ba:first-child .ba__frame { aspect-ratio: 21 / 9; }
@media (max-width: 900px) {
  .ba-grid > .ba, .ba-grid > .ba:first-child { grid-column: 1 / -1; }
  .ba-grid > .ba:first-child .ba__frame { aspect-ratio: 3 / 2; }
}

/* --- Statement / Positionierung ------------------------------------------ */
.statement { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.statement__meta { grid-column: 1 / span 3; }
.statement__text { grid-column: 4 / span 8; font-size: clamp(1.35rem, 2.55vw, 2.7rem); line-height: 1.22; letter-spacing: -0.026em; font-weight: 400; text-wrap: pretty; }
.statement__text strong { font-weight: 500; }
.statement__text .dim { color: var(--muted); }
@media (max-width: 1024px) { .statement__meta, .statement__text { grid-column: 1 / -1; } .statement__meta { margin-bottom: 1.5rem; } }

/* --- Gruppenstruktur: Schichten ------------------------------------------ */
.strata { border-top: 1px solid var(--line); }
.stratum {
  position: relative; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  align-items: start; padding-block: clamp(1.9rem, 3.4vw, 3rem);
  transition: background 0.5s var(--ease);
}
.stratum::before {
  content: ''; position: absolute; left: calc(var(--page-pad) * -1); right: calc(var(--page-pad) * -1); top: 0; bottom: -1px;
  background: var(--kalk-deep); opacity: 0; transition: opacity 0.5s var(--ease); z-index: -1;
}
.stratum:hover::before { opacity: 1; }
.stratum__idx { grid-column: 1 / span 1; padding-top: 0.5rem; }
.stratum__name { grid-column: 2 / span 4; }
.stratum__role { display: block; margin-top: 0.55rem; }
.stratum__text { grid-column: 6 / span 4; color: var(--muted); }
.stratum__facts { grid-column: 10 / span 3; display: grid; gap: 0.5rem; }
.stratum__facts li { display: flex; gap: 0.7rem; font-size: var(--t-small); }
.stratum__facts li::before { content: ''; width: 5px; height: 5px; background: var(--accent); flex: none; margin-top: 0.55em; }
@media (max-width: 1100px) {
  .stratum { grid-template-columns: repeat(6, 1fr); row-gap: 1rem; }
  .stratum__idx { grid-column: 1 / -1; padding-top: 0; }
  .stratum__name, .stratum__text, .stratum__facts { grid-column: 1 / -1; }
}

/* --- Wertschöpfungskette ------------------------------------------------- */
.chain { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.chain__item {
  position: relative; padding: clamp(1.9rem, 3vw, 3rem) clamp(1.1rem, 2vw, 2.2rem) clamp(2.4rem, 4vw, 3.6rem);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.1rem;
  transition: background 0.5s var(--ease);
}
.chain__item:first-child { padding-left: 0; }
.chain__item:last-child { border-right: 0; padding-right: 0; }
.chain__item::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.chain__item:hover::after { transform: scaleX(1); }
.chain__item h3 { font-size: var(--t-h3); }
.chain__claim {
  font-size: var(--t-small); font-weight: 500; color: var(--accent);
  letter-spacing: -0.005em; margin-top: -0.35rem;
}
.chain__item p { color: var(--muted); font-size: var(--t-small); flex: 1; }
.chain__num {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.16em;
  color: var(--accent); display: flex; align-items: center; gap: 0.7rem;
}
.chain__num i { flex: 1; height: 1px; background: var(--line); }
@media (max-width: 1024px) { .chain { grid-template-columns: repeat(2, 1fr); } .chain__item:nth-child(2n) { border-right: 0; padding-right: 0; } .chain__item:nth-child(2n+1) { padding-left: 0; } .chain__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 620px) { .chain { grid-template-columns: 1fr; } .chain__item { border-right: 0; padding-inline: 0; border-bottom: 1px solid var(--line); } .chain__item:last-child { border-bottom: 0; } }

/* --- Förder-Band (Brücke zur Microsite) ---------------------------------- */
/* --- Partnerband --------------------------------------------------------
   Förder- und Finanzierungshäuser. Fremde Logos folgen eigenen
   Gestaltungsregeln, deshalb bleiben sie in Originalfarbe und werden nicht
   eingefärbt — sie stehen dafür klein, auf einer ruhigen Fläche und mit viel
   Luft, damit sie das achromatische System nicht überstimmen. Jedes Logo
   bekommt über --h eine eigene optische Höhe: Ein Hochformat wie das
   Stadtwappen wirkt bei gleicher Pixelhöhe sonst doppelt so groß wie eine
   liegende Wortmarke. */
.partnerband { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partnerband__inner {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  align-items: center; padding-block: clamp(2rem, 3.6vw, 3rem);
}
.partnerband__text { grid-column: 1 / span 3; }
.partnerband__logos {
  grid-column: 5 / span 8;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.partnerband__logos li {
  display: grid; place-items: center;
  padding: 0.6rem clamp(0.8rem, 1.6vw, 1.6rem);
  border-left: 1px solid var(--line);
}
.partnerband__logos li:first-child { border-left: 0; }
.partnerband__logos img {
  height: var(--h, 34px); width: auto; max-width: 100%; object-fit: contain;
  /* Die globale Bildfläche muss hier weg, sonst steht hinter jedem
     freigestellten Logo ein grauer Kasten. */
  background: none;
}
@media (max-width: 1024px) {
  .partnerband__text, .partnerband__logos { grid-column: 1 / -1; }
  .partnerband__logos { margin-top: 1.6rem; }
}
@media (max-width: 620px) {
  .partnerband__logos { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 0; }
  .partnerband__logos li:nth-child(odd) { border-left: 0; }
}

/* --- Gruppenband --------------------------------------------------------
   Die Gesellschaften der Gruppe in Kurzform. Die ausführliche Fassung mit
   Beschreibung und Kennzahlen steht auf der Seite „Unternehmen" — auf der
   Startseite genügt, dass es diese Struktur gibt und wer dahintersteht.
   Deshalb hier fünf schmale Spalten statt fünf voller Zeilen. */
.gruppenband__list {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.gruppenband__list li {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 1.6vw, 1.6rem) clamp(1.6rem, 2.6vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.gruppenband__list li:last-child { border-right: 0; padding-right: 0; }
.gruppenband__list li:not(:first-child) { padding-left: clamp(1rem, 1.6vw, 1.6rem); }
.gruppenband__list b {
  font-weight: 500; font-size: var(--t-h4); letter-spacing: -0.012em; line-height: 1.2;
}
.gruppenband__list .rolle { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 1024px) {
  .gruppenband__list { grid-template-columns: repeat(2, 1fr); }
  .gruppenband__list li:nth-child(2n) { border-right: 0; padding-right: 0; }
  .gruppenband__list li:nth-child(2n+1) { padding-left: 0; }
  .gruppenband__list li:last-child { padding-left: 0; }
}
@media (max-width: 560px) {
  .gruppenband__list { grid-template-columns: 1fr; }
  .gruppenband__list li { border-right: 0; padding-inline: 0 !important; }
}

/* --- Ankaufband ---------------------------------------------------------
   Der Verkaufsweg für Eigentümer. Sitzt direkt hinter dem Vorher/Nachher-
   Vergleich: Man hat gerade gesehen, was aus einem Bestandsobjekt wird —
   das ist der Moment, in dem die Frage „Habe ich so ein Objekt?" trägt.
   Bewusst hell und mit kräftigen Registerlinien statt eigener Farbfläche,
   damit es sich zwischen die beiden dunklen Nachbarabschnitte einschiebt,
   ohne mit ihnen zu konkurrieren. */
.ankaufband {
  border-top: 2px solid var(--fg); border-bottom: 1px solid var(--line);
  padding-block: clamp(3.4rem, 6vw, 6rem);
}
.ankaufband__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.ankaufband__text { grid-column: 1 / span 6; }
.ankaufband__list { grid-column: 8 / span 5; align-self: end; }
/* Fassung ohne Aufzählung rechts — die Spalte darf dann breiter laufen. */
.ankaufband--solo .ankaufband__text { grid-column: 1 / span 8; }
.ankaufband__list dl { border-top: 1px solid var(--line); }
.ankaufband__list div {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 1rem;
  padding: 0.95rem 0; border-bottom: 1px solid var(--line);
}
.ankaufband__list dt {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.14em;
  color: var(--accent); padding-top: 0.35em;
}
.ankaufband__list dd { margin: 0; font-size: var(--t-small); }
.ankaufband__list dd b { display: block; font-weight: 500; font-size: var(--t-h4); letter-spacing: -0.01em; }
.ankaufband__list dd span { color: var(--muted); }
.ankaufband__acts { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 1024px) {
  .ankaufband__text, .ankaufband__list { grid-column: 1 / -1; }
  .ankaufband__list { margin-top: clamp(2rem, 4vw, 3rem); }
}

.foerderband {
  position: relative; overflow: hidden;
  background: #14392B; color: #EFEAE1;
  --bg: #14392B; --fg: #EFEAE1;
  --line: rgba(239,234,225,0.2); --muted: #A9BCB1; --accent: #C9A96A;
}
.foerderband__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.foerderband__text { grid-column: 1 / span 6; }
.foerderband__facts { grid-column: 8 / span 5; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.foerderband__facts div { background: #14392B; padding: clamp(1.1rem, 2vw, 1.6rem); }
.foerderband__facts .num { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-stretch: 80%; font-weight: 600; letter-spacing: -0.005em; line-height: 1; display: block; }
.foerderband__facts .cap { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.5rem; display: block; }
.foerderband__topo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(115deg, rgba(239,234,225,0.055) 0 1px, transparent 1px 26px);
}
@media (max-width: 1024px) { .foerderband__text, .foerderband__facts { grid-column: 1 / -1; } .foerderband__facts { margin-top: 2rem; grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foerderband__facts { grid-template-columns: 1fr; } }

/* --- Projekte ------------------------------------------------------------ */
.projects { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter) var(--gutter); row-gap: clamp(2.5rem, 5vw, 5rem); }
.project { position: relative; display: block; }
.project--wide { grid-column: span 7; }
.project--tall { grid-column: span 5; }
.project--half { grid-column: span 6; }
.project--third { grid-column: span 4; }
.project--full  { grid-column: span 12; }
.project__frame { position: relative; overflow: hidden; background: var(--kalk-warm); }
.project__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.7s var(--ease); }
.project:hover .project__frame img { transform: scale(1.045); }
.project__frame::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,12,14,0.62));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.project:hover .project__frame::after { opacity: 1; }
/* Projekt ohne Bild. Statt ein fremdes Foto zu verwenden, bleibt die Fläche
   leer und sagt, warum: das Vorhaben ist noch in Projektierung. Die
   Rasterlinien halten den Platz, damit die Kachel nicht wie ein Ladefehler
   wirkt. */
.project__frame--leer {
  display: grid; place-items: center;
  background: var(--kalk-deep);
  border: 1px solid var(--line);
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 12.5% 16.6667%;
}
.project__frame--leer::after { content: none; }
.project__frame--leer span {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  text-align: center; padding: 0 1.5rem;
}

.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-11 { aspect-ratio: 1 / 1; }
.ratio-169 { aspect-ratio: 16 / 9; }
.project__status {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--kalk); color: var(--ink);
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.55rem 0.85rem;
}
.project__status--live { background: var(--accent); color: #fff; }
.project__kind {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--kalk);
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.55rem 0.85rem;
}

/* Filterleiste der Projektübersicht */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: 0.9rem; margin-bottom: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}
.filterbar__label { margin-right: 0.9rem; }
.filterbar button {
  appearance: none; background: none; cursor: pointer;
  border: 1px solid var(--line); padding: 0.5rem 0.95rem;
  font-family: 'Plex Mono', monospace; font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.filterbar button:hover { color: var(--fg); border-color: var(--fg); }
.filterbar button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.js .is-filtered { display: none; }
.filterbar__count { margin-left: auto; }
.project__meta { padding-top: 1.1rem; border-top: 1px solid var(--line); margin-top: 1.1rem; }
.project__meta h3 { font-size: var(--t-h3); font-stretch: 84%; font-weight: 600; text-transform: uppercase; letter-spacing: 0; line-height: 1.06; }
.project__cat {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 0.5rem;
}
.project__meta .mono { display: block; margin-top: 0.45rem; }
.project__meta .mono { color: var(--muted); white-space: nowrap; }
.project__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 0.7rem; }
.project__facts li { font-size: var(--t-small); color: var(--muted); display: flex; gap: 0.5rem; }
.project__facts li span { color: var(--fg); }
@media (max-width: 900px) {
  .project--wide, .project--tall, .project--half, .project--third { grid-column: 1 / -1; }
}

/* --- Kennzahlen ---------------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.metric {
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.7rem;
}
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; padding-right: 0; }
.metric__num { font-size: clamp(2.6rem, 5vw, 4.8rem); font-stretch: 78%; font-weight: 600; letter-spacing: -0.005em; line-height: 0.9; }
.metric__num sup { font-size: 0.42em; vertical-align: super; margin-left: 0.1em; letter-spacing: 0; }
.metric__cap { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2n) { border-right: 0; padding-right: 0; }
  .metric:nth-child(2n+1) { padding-left: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Vollflächiges Kennzahlenband — der Auftritt der Zahlen, nicht ihre Fußnote */
.statband { background: var(--ink); color: var(--kalk); --line: var(--line-inv); --muted: #9C9891; }
/* Das Kennzahlenband richtet sich nach der Anzahl der Einträge, damit das
   Entfernen einer Kennzahl keine Lücke hinterlässt. */
.statband__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: var(--max); margin-inline: auto; padding-inline: var(--page-pad);
}
.statband__grid > div {
  padding: clamp(2.2rem, 4vw, 3.6rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--line-inv);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.statband__grid > div:first-child { border-left: 0; padding-left: 0; }
.statband__grid > div:last-child { padding-right: 0; }
.statband .num {
  font-size: clamp(2.6rem, 5.2vw, 5rem); font-stretch: 78%; font-weight: 600;
  letter-spacing: -0.005em; line-height: 0.88; text-transform: uppercase;
}
.statband .cap { font-size: var(--t-small); color: #A9A59E; max-width: 26ch; }
@media (max-width: 900px) {
  .statband__grid { grid-template-columns: repeat(2, 1fr); }
  .statband__grid > div:nth-child(2n) { border-left: 1px solid var(--line-inv); padding-right: 0; }
  .statband__grid > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .statband__grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-inv); }
}

/* --- Leistungsblöcke ----------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }
.split__media { grid-column: 1 / span 6; }
.split__body { grid-column: 8 / span 5; }
.split--rev .split__media { grid-column: 7 / span 6; order: 2; }
.split--rev .split__body { grid-column: 1 / span 5; order: 1; }
@media (max-width: 1024px) {
  .split__media, .split__body, .split--rev .split__media, .split--rev .split__body { grid-column: 1 / -1; order: initial; }
  .split__body { margin-top: 2rem; }
}

.deck { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.deck__col { grid-column: span 4; border-top: 1px solid var(--line); padding-top: 1.35rem; display: flex; flex-direction: column; gap: 0.85rem; }
.deck__col--6 { grid-column: span 6; }
.deck__col--3 { grid-column: span 3; }
@media (max-width: 900px) { .deck__col, .deck__col--6, .deck__col--3 { grid-column: 1 / -1; } }

.checklist { display: grid; gap: 0.85rem; }
.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: 0.9rem; align-items: start; }
.checklist li::before {
  content: ''; width: 12px; height: 12px; border: 1px solid var(--accent);
  margin-top: 0.42em; position: relative;
}
.checklist li::after { content: none; }

.numlist { counter-reset: n; display: grid; }
.numlist li {
  counter-increment: n; display: grid; grid-template-columns: 3.2rem 1fr; gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.2rem, 2.2vw, 1.9rem); border-top: 1px solid var(--line);
}
.numlist li:last-child { border-bottom: 1px solid var(--line); }
.numlist li::before {
  content: counter(n, decimal-leading-zero);
  font-family: 'Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.12em;
  color: var(--accent); padding-top: 0.35em;
}
.numlist h3 { font-size: var(--t-h4); margin-bottom: 0.4rem; }
.numlist p { color: var(--muted); font-size: var(--t-small); max-width: 62ch; }

/* --- Ansprechpartner / Kontakt ------------------------------------------- */
.contact-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.contact-split__lead { grid-column: 1 / span 5; }
/* Die Kontaktangaben standen untereinander und liefen dadurch über eine
   halbe Bildschirmhöhe. Nebeneinander liest man sie genauso schnell und der
   Abschnitt bleibt in einem Blickfeld. */
.contact-split__cards {
  grid-column: 7 / span 6;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  /* Nicht auf die Höhe der Textspalte strecken — sonst steht unter den
     Karten eine graue Restfläche. */
  align-self: start;
}
.contact-card {
  background: var(--bg); padding: clamp(1.1rem, 1.9vw, 1.5rem);
  display: grid; gap: 0.45rem; align-content: start;
}
.contact-card .t-h4 { font-size: var(--t-small); line-height: 1.45; }
.contact-card a:hover { color: var(--accent); }
@media (max-width: 1024px) {
  .contact-split__lead, .contact-split__cards { grid-column: 1 / -1; }
  .contact-split__cards { margin-top: 2rem; }
}
@media (max-width: 620px) { .contact-split__cards { grid-template-columns: 1fr; } }

/* --- Fußbereich ---------------------------------------------------------- */
.site-foot { background: var(--ink); color: var(--kalk); --line: var(--line-inv); --muted: #918D86; }
.site-foot__top { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); padding-block: clamp(3.5rem, 6vw, 6rem); }
.site-foot__brand { grid-column: 1 / span 4; }

/* Externe Profile im Fuß: ImmoScout24 und Google.
   Kleiner Pfeil signalisiert, dass die Seite verlassen wird. */
.foot-ext { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.foot-ext a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-small); margin-top: 0.7rem; margin-right: 1.6rem;
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease);
}
.foot-ext a svg { flex: none; opacity: 0.6; }
.foot-ext a:hover { border-bottom-color: currentColor; }
.site-foot__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.site-foot h2 { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 1.1rem; }
.site-foot li + li { margin-top: 0.6rem; }
.site-foot a { font-size: var(--t-small); opacity: 0.88; transition: opacity 0.3s var(--ease); }
.site-foot a:hover { opacity: 1; }
.site-foot__bottom {
  border-top: 1px solid var(--line); padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.site-foot__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
@media (max-width: 1024px) {
  .site-foot__brand, .site-foot__cols { grid-column: 1 / -1; }
  .site-foot__cols { margin-top: 2.5rem; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 520px) { .site-foot__cols { grid-template-columns: 1fr; } }

/* --- CTA-Band ------------------------------------------------------------ */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
.cta-band__title { grid-column: 1 / span 7; }
.cta-band__actions { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }
@media (max-width: 1024px) { .cta-band__title, .cta-band__actions { grid-column: 1 / -1; } .cta-band__actions { margin-top: 2rem; } }

/* --- Akkordeon (FAQ) ----------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start;
  padding-block: clamp(1.15rem, 2.2vw, 1.7rem);
  font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.012em; line-height: 1.32;
  transition: color 0.3s var(--ease);
}
.acc__btn:hover { color: var(--accent); }
.acc__sign { position: relative; width: 14px; height: 14px; margin-top: 0.4em; flex: none; }
.acc__sign::before, .acc__sign::after { content: ''; position: absolute; background: currentColor; transition: transform 0.42s var(--ease); }
.acc__sign::before { left: 0; top: 6.5px; width: 14px; height: 1px; }
.acc__sign::after { top: 0; left: 6.5px; height: 14px; width: 1px; }
.acc__item.is-open .acc__sign::after { transform: rotate(90deg); }
.acc__panel { overflow: hidden; height: 0; transition: height 0.5s var(--ease); }
.acc__panel > div { padding-bottom: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--muted); max-width: 72ch; }
.acc__panel p + p { margin-top: 0.9em; }

/* --- Tabellen ------------------------------------------------------------ */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dl-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 1024px) { .dl-grid--4 { grid-template-columns: repeat(2, 1fr); } }
.dl-grid > div { background: var(--bg); padding: clamp(1rem, 1.8vw, 1.4rem); }
.dl-grid dt { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.dl-grid dd { font-size: var(--t-h4); margin: 0; }
@media (max-width: 620px) { .dl-grid { grid-template-columns: 1fr; } }

/* --- Hinweisbox ---------------------------------------------------------- */
.note {
  border-left: 2px solid var(--accent); padding: 1rem 0 1rem 1.35rem;
  color: var(--muted); font-size: var(--t-small); max-width: 68ch;
}