/* ==========================================================================
   Sparte "Geförderter Wohnungsbau NRW" — eigenständige visuelle Identität
   Kalk/Sand + Tiefgrün. Ruhiger, institutioneller, dokumentnäher als die
   Hauptmarke — bleibt aber im selben Raster- und Typo-System.
   ========================================================================== */

.theme-foerderung {
  --ink:        #0D1F18;
  --ink-soft:   #14392B;
  --ink-lift:   #1E4E3B;
  --kalk:       #EFEAE1;
  --kalk-deep:  #E4DCCF;
  --kalk-warm:  #D9CFBE;
  --beton:      #8E9A91;
  --beton-dark: #4C554F;
  --signal:     #9A7B3F;
  --signal-lt:  #C9A96A;

  --bg: var(--kalk);
  --fg: var(--ink);
  --muted: var(--beton-dark);
  --accent: #1E6B4C;

  --line:      color-mix(in srgb, var(--ink) 15%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --line-inv:  color-mix(in srgb, var(--kalk) 22%, transparent);
}
.theme-foerderung .on-dark,
.theme-foerderung .site-foot,
.theme-foerderung .pagehead { background: #0D1F18; color: var(--kalk); --muted: #9DAAA1; --accent: #C9A96A; }
.theme-foerderung .hero { background: #0D1F18; }
.theme-foerderung .brand__mark { border-radius: 0; }
.theme-foerderung .nav__link--flag { color: var(--accent); }
.theme-foerderung .site-head.is-solid .nav__link--flag { color: #1E6B4C; }

/* Markierung der Sparte im Kopf */
.spartenmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'Plex Mono', monospace; font-size: 0.5625rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 0.4rem 0.7rem; opacity: 0.8;
}

/* --- Hero der Sparte ----------------------------------------------------- */
.f-hero { position: relative; min-height: 92svh; display: flex; flex-direction: column; padding-top: var(--head-h); overflow: hidden; background: #0D1F18; color: var(--kalk); }
.f-hero__media { position: absolute; inset: 0; }
.f-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; transform: scale(1.05); animation: heroDrift 24s var(--ease) forwards; }
.f-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(13,31,24,0.93) 0%, rgba(13,31,24,0.66) 52%, rgba(13,31,24,0.55) 100%),
              linear-gradient(180deg, rgba(13,31,24,0.75), rgba(13,31,24,0.15) 32%, rgba(13,31,24,0.88));
}
/* NRW-Bezug: abstrahierte Karten-Kontur als Linienraster */
.f-hero__map {
  position: absolute; right: clamp(1.5rem, 5vw, 6rem); top: 46%; transform: translateY(-50%);
  width: min(34vw, 420px); opacity: 0.3; pointer-events: none; color: var(--kalk); z-index: 1;
}
.f-hero__map svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 900px) { .f-hero__map { opacity: 0.16; width: 62vw; top: 26%; right: -8%; } }
.f-hero__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.f-hero__title { max-width: 20ch; }
.f-hero__title .hl { color: var(--signal-lt); }
.f-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(2rem, 4vw, 3.2rem); }
.f-hero .btn { --btn-bg: var(--kalk); --btn-fg: #0D1F18; }
.f-hero .btn--ghost { --btn-bg: transparent; --btn-fg: var(--kalk); border-color: rgba(239,234,225,0.5); color: var(--kalk); }
.f-hero .btn--ghost::before { background: var(--kalk); }
.f-hero .btn--ghost:hover { color: #0D1F18; }
.f-hero__strip { position: relative; z-index: 2; border-top: 1px solid var(--line-inv); }
.f-hero__strip ul { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--max); margin-inline: auto; padding-inline: var(--page-pad); }
.f-hero__strip li { padding: clamp(1.1rem, 2vw, 1.8rem) clamp(0.6rem, 1.5vw, 1.5rem); border-left: 1px solid var(--line-inv); }
.f-hero__strip li:first-child { border-left: 0; padding-left: 0; }
.f-hero__strip strong { display: block; font-size: clamp(1.05rem, 1.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.16; }
.f-hero__strip span { font-family: 'Plex Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; display: block; margin-top: 0.5rem; }
@media (max-width: 760px) { .f-hero__strip ul { grid-template-columns: 1fr; } .f-hero__strip li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-inv); } .f-hero__strip li:first-child { border-top: 0; } }

/* --- Herausforderungen --------------------------------------------------- */
.probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.prob { background: var(--bg); padding: clamp(1.5rem, 2.6vw, 2.3rem); display: flex; flex-direction: column; gap: 0.85rem; min-height: 220px; }
.prob__idx { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.16em; color: var(--accent); }
.prob h3 { font-size: var(--t-h4); }
.prob p { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 960px) { .probs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .probs { grid-template-columns: 1fr; } }

/* --- Kooperationsmodelle -------------------------------------------------- */
.models { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.model {
  grid-column: span 3; border-top: 2px solid var(--ink); padding-top: 1.4rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: border-color 0.45s var(--ease);
}
.model:hover { border-color: var(--accent); }
.model__tag { font-family: 'Plex Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.model h3 { font-size: var(--t-h3); }
.model p { font-size: var(--t-small); color: var(--muted); flex: 1; }
.model dl { display: grid; gap: 0.45rem; margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.model dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; }
.model dt { color: var(--muted); }
@media (max-width: 1180px) { .model { grid-column: span 6; } }
@media (max-width: 640px) { .model { grid-column: 1 / -1; } }
.theme-foerderung .on-dark .model { border-top-color: var(--kalk); }

/* --- Projektablauf (Zeitstrahl) ------------------------------------------ */
.flowline { position: relative; }
.flowline::before {
  content: ''; position: absolute; left: 0; right: 0; top: 46px; height: 1px;
  background: var(--line);
}
.flowline__track { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gutter); position: relative; }
.flowstep { display: flex; flex-direction: column; gap: 1rem; }
.flowstep__dot {
  width: 100%; display: flex; align-items: center; gap: 0.75rem; height: 92px;
}
.flowstep__dot i {
  width: 13px; height: 13px; background: var(--bg); border: 1px solid var(--ink); flex: none;
  position: relative; z-index: 1; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.flowstep:hover .flowstep__dot i { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.flowstep__no { font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.14em; color: var(--muted); }
.flowstep h3 { font-size: 0.98rem; line-height: 1.25; }
.flowstep p { font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 1200px) {
  .flowline::before { display: none; }
  .flowline__track { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .flowstep__dot { height: auto; }
}
@media (max-width: 560px) { .flowline__track { grid-template-columns: 1fr; } }

/* --- Leistungsmodule ------------------------------------------------------ */
.modules { border-top: 1px solid var(--line); }
.module {
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  padding-block: clamp(2rem, 3.6vw, 3.4rem); position: relative;
}
.module__no { grid-column: 1 / span 1; }
.module__head { grid-column: 2 / span 4; }
.module__head h3 { font-size: var(--t-h2); letter-spacing: -0.028em; }
.module__body { grid-column: 7 / span 6; display: grid; gap: 1.2rem; }
.module__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem 1.5rem; }
.module__list li { font-size: var(--t-small); display: grid; grid-template-columns: 10px 1fr; gap: 0.75rem; align-items: start; }
.module__list li::before { content: ''; width: 6px; height: 6px; background: var(--accent); margin-top: 0.58em; }
@media (max-width: 1024px) {
  .module { grid-template-columns: repeat(6, 1fr); row-gap: 1.1rem; }
  .module__no, .module__head, .module__body { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .module__list { grid-template-columns: 1fr; } }

/* --- Nachhaltigkeitsraster ------------------------------------------------ */
.quals { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.qual { grid-column: span 3; display: flex; flex-direction: column; gap: 0.8rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.qual__ico { width: 34px; height: 34px; color: var(--accent); }
.qual h3 { font-size: var(--t-h4); }
.qual p { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 1024px) { .qual { grid-column: span 6; } }
@media (max-width: 560px) { .qual { grid-column: 1 / -1; } }