@import url("./hero-photo-data.css");

/* Font placeholders: swap URLs with self-hosted files when available */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

/*
Color usage map (all tokens are defined below for dark default + light theme):
- .hero__background / ::after overlay – --hero-background-gradient, --hero-overlay-gradient
- Organic hero blob (.hero__shape) – --hero-shape-gradient
- Hero badges – --hero-badge-bg, --hero-badge-border, --hero-badge-text
- Buttons (primary/ghost) – --button-primary-*, --button-ghost-* tokens
- Content sections (.values, .program-teaser, .cta) – dedicated background/border tokens
- Value cards (surface, accents, outlines) – --value-card-* tokens
  • Bezahlbar wohnen (housing) – --value-card-surface-housing / --value-card-text-housing
  • Gute Wege (mobility) – --value-card-surface-mobility / --value-card-text-mobility
  • Digitale Stadt – --value-card-surface-digital / --value-card-text-digital
  • Klimastark – --value-card-surface-climate / --value-card-text-climate
  • Lebendige Viertel – --value-card-surface-community / --value-card-text-community
  • Transparente Politik – --value-card-surface-transparency / --value-card-text-transparency
- Icon buttons & badges – --icon-button-*, --button-ghost-on-light-*
- Site footer (background, logo chip) – --site-footer-*
*/

:root {
  --color-spd-red: #e3000f;
  --color-spd-red-dark: #8c040a;
  --color-gray-050: #f7f4f3;
  --color-gray-100: #eee6e4;
  --color-gray-300: #d3c2bf;
  --color-gray-700: #4a3a38;
  --color-gray-900: #1a1211;
  --color-rose-050: #fff6f5;
  --color-rose-100: #ffe4e1;
  --color-rose-200: #ffc8c1;
  --color-surface-primary: #120c0b;
  --color-surface-elevated: #1f1312;
  --color-surface-soft: #2a1a19;
  --color-text-primary: #fff8f7;
  --color-text-muted: rgba(255, 248, 247, 0.75);
  --color-text-dark: #2f1a18;
  --color-text-muted-dark: rgba(47, 26, 24, 0.72);
  --shadow-card-soft: 0 25px 45px rgba(42, 26, 25, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.14);
  --color-focus: #ff5a5f;
  --link-color: #a40019;
  --link-hover-color: #ff5a5f;
  --site-footer-link-color: #a40019;
  --site-footer-link-hover-color: #ff7a85;
  --button-primary-bg: linear-gradient(
    120deg,
    var(--color-spd-red),
    var(--color-spd-red-dark)
  );
  --button-primary-color: #fff;
  --button-primary-shadow: 0 20px 40px rgba(227, 0, 15, 0.3);
  --button-ghost-color: #fff;
  --button-ghost-border: var(--color-border-subtle);
  --button-ghost-hover-bg: rgba(255, 255, 255, 0.08);
  --button-ghost-on-light-color: var(--color-text-dark);
  --button-ghost-on-light-border: rgba(47, 26, 24, 0.2);
  --button-ghost-on-light-hover-bg: rgba(47, 26, 24, 0.05);
  --hero-photo: var(--hero-photo-fallback);
  --font-display: "Space Grotesk", "Sora", "Inter", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --radius-base: 0.75rem;
  --radius-pill: 999px;
  --transition-default: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

@supports (background-image: image-set(url("") 1x)) {
  :root {
    --hero-photo: image-set(
      var(--hero-photo-webp-2560) type("image/webp") 2x,
      var(--hero-photo-webp-1920) type("image/webp") 1.5x,
      var(--hero-photo-webp-1280) type("image/webp") 1x,
      var(--hero-photo-fallback) type("image/jpeg") 1x
    );
  }
}

[data-theme="dark"] {
  --values-background: radial-gradient(
    circle at 15% -10%,
    rgba(227, 0, 15, 0.35),
    rgba(11, 2, 3, 0.95) 55%,
    rgba(6, 1, 2, 1)
  );
  --program-teaser-background: rgba(13, 4, 5, 0.9);
  --program-teaser-border: rgba(255, 255, 255, 0.12);
  --program-teaser-shadow: 0 35px 75px rgba(0, 0, 0, 0.55);
  --value-card-surface: rgba(10, 3, 4, 0.85);
  --value-card-border: rgba(255, 255, 255, 0.12);
  --value-card-shadow: 0 25px 65px rgba(0, 0, 0, 0.7);
  --value-card-hover-shadow: 0 45px 95px rgba(0, 0, 0, 0.85);
  --value-card-outline: rgba(255, 101, 157, 0.85);
  --value-card-accent-shadow: 0 25px 55px rgba(255, 101, 157, 0.45);
  --value-card-accent-default: linear-gradient(
    135deg,
    rgba(255, 117, 168, 0.35),
    rgba(130, 61, 255, 0.2)
  );
  --value-card-accent-1: linear-gradient(135deg, rgba(255, 196, 130, 0.4), rgba(255, 111, 86, 0.18));
  --value-card-accent-2: linear-gradient(135deg, rgba(126, 216, 255, 0.45), rgba(45, 117, 255, 0.18));
  --value-card-accent-3: linear-gradient(135deg, rgba(242, 182, 255, 0.45), rgba(162, 99, 255, 0.2));
  --value-card-accent-4: linear-gradient(135deg, rgba(137, 255, 209, 0.4), rgba(35, 166, 125, 0.2));
  --value-card-accent-5: linear-gradient(135deg, rgba(255, 224, 153, 0.45), rgba(255, 150, 74, 0.2));
  --value-card-accent-6: linear-gradient(135deg, rgba(177, 225, 255, 0.45), rgba(108, 171, 255, 0.2));
  --value-card-surface-housing: rgba(255, 133, 96, 0.18);
  --value-card-text-housing: #ffe8dc;
  --value-card-badge-shadow-housing: rgba(255, 133, 96, 0.7);
  --value-card-surface-mobility: rgba(78, 193, 255, 0.18);
  --value-card-text-mobility: #e3f4ff;
  --value-card-badge-shadow-mobility: rgba(78, 193, 255, 0.7);
  --value-card-surface-digital: rgba(196, 156, 255, 0.2);
  --value-card-text-digital: #f3e8ff;
  --value-card-badge-shadow-digital: rgba(196, 156, 255, 0.65);
  --value-card-surface-climate: rgba(104, 240, 183, 0.18);
  --value-card-text-climate: #e4fff2;
  --value-card-badge-shadow-climate: rgba(104, 240, 183, 0.65);
  --value-card-surface-community: rgba(255, 203, 128, 0.2);
  --value-card-text-community: #fff3dd;
  --value-card-badge-shadow-community: rgba(255, 203, 128, 0.65);
  --value-card-surface-transparency: rgba(134, 210, 255, 0.2);
  --value-card-text-transparency: #e3f4ff;
  --value-card-badge-shadow-transparency: rgba(134, 210, 255, 0.65);
  --value-card-text-default: #fff1ee;
  --value-card-badge-ink: #150205;
  --cta-background: linear-gradient(150deg, rgba(24, 5, 7, 0.95), rgba(57, 7, 11, 0.92));
  --cta-border: rgba(255, 92, 118, 0.35);
  --icon-button-border: rgba(255, 255, 255, 0.18);
  --icon-button-hover-bg: rgba(255, 90, 95, 0.16);
  --site-footer-border: rgba(227, 0, 15, 0.45);
  --site-footer-background: linear-gradient(180deg, #080203, #170305 55%, #240508 100%);
  --site-footer-logo-bg: #fff;
  --site-footer-logo-color: var(--color-spd-red);
  --motion-toggle-bg: rgba(255, 255, 255, 0.08);
  --motion-toggle-bg-hover: rgba(255, 90, 95, 0.22);
  --motion-toggle-border: rgba(255, 255, 255, 0.2);
  --motion-toggle-pill-track: rgba(227, 0, 15, 0.7);
  --motion-toggle-pill-track-active: #fff8f7;
  --motion-toggle-pill-knob: #150205;
  --link-color: #ff3355;
  --link-hover-color: #ff7a85;
  --site-footer-link-color: #ff7a85;
  --site-footer-link-hover-color: #ffc2cc;
}

[data-theme="light"] .hero,
[data-theme="dark"] .hero {
  --hero-background-gradient: linear-gradient(
    140deg,
    rgba(227, 0, 15, 0.65),
    rgba(140, 4, 10, 0.55),
    rgba(18, 12, 11, 0.85)
  );
  --hero-overlay-gradient: linear-gradient(
    180deg,
    rgba(18, 12, 11, 0.25) 0%,
    rgba(18, 12, 11, 0.35) 55%,
    rgba(18, 12, 11, 0.55) 100%
  );
  --hero-shape-gradient: radial-gradient(
      circle at 30% 25%,
      rgba(255, 245, 243, 0.7),
      rgba(227, 0, 15, 0.35),
      transparent 65%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(255, 90, 95, 0.25),
      transparent 70%
    ),
    linear-gradient(
      140deg,
      rgba(227, 0, 15, 0.45),
      rgba(140, 4, 10, 0.65)
    );
  --hero-badge-bg: rgba(18, 12, 11, 0.5);
  --hero-badge-border: var(--color-border-subtle);
  --hero-badge-text: rgba(255, 255, 255, 0.9);
  --hero-ghost-button-bg: rgba(18, 12, 11, 0.35);
  --hero-ghost-button-hover-bg: rgba(255, 255, 255, 0.12);
  --hero-ghost-button-border: rgba(255, 255, 255, 0.45);
  --hero-ghost-button-color: #fff8f7;
  --hero-text-color: #fff8f7;
  --hero-text-muted: rgba(255, 248, 247, 0.75);
}

[data-theme="light"] {
  --color-surface-primary: #faf7f5;
  --color-surface-elevated: #ffffff;
  --color-surface-soft: #f2ebe7;
  --color-text-primary: #1f1312;
  --color-text-muted: rgba(31, 19, 18, 0.7);
  --color-border-subtle: rgba(26, 18, 17, 0.16);
  --button-primary-bg: linear-gradient(120deg, #ff5e66, #c40017);
  --button-primary-shadow: 0 18px 32px rgba(199, 0, 20, 0.25);
  --button-ghost-color: var(--color-text-primary);
  --button-ghost-border: rgba(31, 19, 18, 0.18);
  --button-ghost-hover-bg: rgba(31, 19, 18, 0.08);
  --button-ghost-on-light-color: var(--color-text-primary);
  --button-ghost-on-light-border: rgba(31, 19, 18, 0.2);
  --button-ghost-on-light-hover-bg: rgba(31, 19, 18, 0.06);
  --values-background: linear-gradient(180deg, #ffffff, #ffeaea);
  --program-teaser-background: #ffffff;
  --program-teaser-border: rgba(31, 19, 18, 0.08);
  --program-teaser-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --value-card-surface: #fffaf8;
  --value-card-border: rgba(47, 26, 24, 0.15);
  --value-card-shadow: 0 30px 45px rgba(172, 99, 97, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --value-card-hover-shadow: 0 40px 55px rgba(172, 99, 97, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  --value-card-outline: rgba(227, 0, 15, 0.35);
  --value-card-accent-shadow: 0 10px 20px rgba(227, 0, 15, 0.2);
  --value-card-accent-1: linear-gradient(135deg, #ffedd1, #ffc38c);
  --value-card-accent-2: linear-gradient(135deg, #e5f3ff, #a9d1ff);
  --value-card-accent-3: linear-gradient(135deg, #ffeaf7, #ffc4e6);
  --value-card-accent-4: linear-gradient(135deg, #e4fff4, #b5f0dd);
  --value-card-accent-5: linear-gradient(135deg, #fff6ce, #ffe080);
  --value-card-accent-6: linear-gradient(135deg, #ffe5ea, #ffb7c3);
  --value-card-surface-housing: #fff4ed;
  --value-card-text-housing: #3c1b14;
  --value-card-badge-shadow-housing: rgba(60, 27, 20, 0.35);
  --value-card-surface-mobility: #f2f8ff;
  --value-card-text-mobility: #0f2738;
  --value-card-badge-shadow-mobility: rgba(15, 39, 56, 0.35);
  --value-card-surface-digital: #f6f2ff;
  --value-card-text-digital: #26163f;
  --value-card-badge-shadow-digital: rgba(38, 22, 63, 0.35);
  --value-card-surface-climate: #f0fff7;
  --value-card-text-climate: #103224;
  --value-card-badge-shadow-climate: rgba(16, 50, 36, 0.35);
  --value-card-surface-community: #fff9ec;
  --value-card-text-community: #3a250e;
  --value-card-badge-shadow-community: rgba(58, 37, 14, 0.35);
  --value-card-surface-transparency: #f4fbff;
  --value-card-text-transparency: #0c2030;
  --value-card-badge-shadow-transparency: rgba(12, 32, 48, 0.35);
  --cta-background: linear-gradient(140deg, #fff4f4, #ffffff);
  --cta-border: rgba(227, 0, 15, 0.12);
  --icon-button-border: rgba(31, 19, 18, 0.18);
  --icon-button-hover-bg: rgba(227, 0, 15, 0.1);
  --site-footer-border: rgba(31, 19, 18, 0.14);
  --site-footer-background: linear-gradient(180deg, #fff7f7, #ffffff);
  --site-footer-logo-bg: var(--color-spd-red);
  --site-footer-logo-color: #fff;
  --motion-toggle-bg: rgba(31, 19, 18, 0.08);
  --motion-toggle-bg-hover: rgba(31, 19, 18, 0.12);
  --motion-toggle-border: rgba(31, 19, 18, 0.18);
  --motion-toggle-pill-track: rgba(31, 19, 18, 0.3);
  --motion-toggle-pill-track-active: var(--color-spd-red);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: var(--color-surface-primary);
  line-height: 1.6;
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--link-color);
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
  transition: color var(--transition-default),
    text-decoration-color var(--transition-default);
}

a:hover,
a:focus-visible {
  color: var(--link-hover-color);
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  background: var(--color-gray-050);
  color: var(--color-surface-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  z-index: 999;
  transition: transform var(--transition-default);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-surface-primary);
  color: var(--hero-text-color);
}

.hero__background {
  position: absolute;
  inset: 0;
  background-color: #1a0c0b;
  background-image: var(
      --hero-background-gradient
    ),
    var(--hero-photo, var(--hero-photo-fallback)),
    var(--hero-photo-placeholder);
  background-size: cover, cover, cover;
  background-position: center, center 48%, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal;
  transform: translate3d(
      var(--hero-parallax-x, 0),
      var(--hero-parallax-y, 0),
      0
    )
    scale(1.08);
  transition: transform var(--transition-slow);
  will-change: transform;
  z-index: -2;
  overflow: hidden;
}

.hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-gradient);
  pointer-events: none;
}

.hero__shape {
  position: absolute;
  top: 55%;
  right: clamp(-10rem, -6vw, -3rem);
  width: clamp(240px, 32vw, 520px);
  aspect-ratio: 1 / 1.15;
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  background-image: var(--hero-shape-gradient);
  filter: blur(10px);
  opacity: 0.8;
  mix-blend-mode: screen;
  transform: translate(20%, -50%) rotate(-6deg);
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 768px) {
  .hero__shape {
    display: none;
  }
}

.hero__content {
  width: min(90vw, 700px);
  max-width: 700px;
  margin: 0 auto 0 clamp(1rem, 8vw, 12vw);
  transform: translateX(clamp(0px, 4vw, 80px));
  padding: var(--space-xl) 0;
}

@media (max-width: 640px) {
  .hero__content {
    margin: 0 auto;
    padding: var(--space-lg) clamp(var(--space-sm), 6vw, var(--space-lg));
    transform: none;
  }

  .hero__background {
    background-position: center, center 35%, center;
  }
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
  color: var(--hero-text-muted);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin: 0 0 var(--space-sm);
  line-height: 1.1;
}

.hero__highlight {
  display: inline-block;
  font-size: 1.08em;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform var(--transition-slow),
    letter-spacing var(--transition-slow),
    opacity var(--transition-default);
}

.hero__highlight.is-expanded {
  letter-spacing: 0.32em;
  transform: scale3d(1.08, 1.08, 1);
}

.hero__line-break {
  display: block;
}

.hero__subline {
  font-size: 1.25rem;
  margin: 0 0 var(--space-md);
  max-width: 32ch;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--hero-badge-bg);
  border: 1px solid var(--hero-badge-border);
  font-weight: 600;
  font-size: 0.95rem;
  margin: calc(-1 * var(--space-xs)) 0 var(--space-lg);
  color: var(--hero-badge-text);
  backdrop-filter: blur(6px);
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.hero__cta-group .button--ghost {
  color: var(--hero-ghost-button-color);
  border-color: var(--hero-ghost-button-border);
  background: var(--hero-ghost-button-bg);
  backdrop-filter: blur(6px);
}

.hero__cta-group .button--ghost:hover {
  background: var(--hero-ghost-button-hover-bg);
}

.hero__microcopy {
  font-size: 0.9rem;
  color: var(--hero-text-muted);
}

.transparency-banner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-md);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-base);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--hero-text-color);
  backdrop-filter: blur(10px);
}

.transparency-banner__label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.transparency-banner__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.transparency-banner__link {
  font-weight: 600;
  color: var(--hero-text-color);
  text-decoration: underline;
}

.transparency-banner__link:hover,
.transparency-banner__link:focus-visible {
  text-decoration: none;
}

.cta__microcopy {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.button {
  --magnet-x: 0px;
  --magnet-y: 0px;
  --hover-raise: 0px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-default),
    box-shadow var(--transition-default),
    background var(--transition-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transform: translate3d(
    var(--magnet-x),
    calc(var(--magnet-y) + var(--hover-raise)),
    0
  );
}

.button--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-color);
  box-shadow: var(--button-primary-shadow);
}

.button--primary:focus-visible,
.button--ghost:focus-visible,
.icon-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.button--ghost {
  background: transparent;
  color: var(--button-ghost-color);
  border: 1px solid var(--button-ghost-border);
}

.button--ghost:hover {
  background: var(--button-ghost-hover-bg);
}

.program-teaser .button--ghost,
.cta .button--ghost {
  color: var(--button-ghost-on-light-color);
  border-color: var(--button-ghost-on-light-border);
}

.program-teaser .button--ghost:hover,
.cta .button--ghost:hover {
  background: var(--button-ghost-on-light-hover-bg);
}

.button:hover {
  --hover-raise: -3px;
}

.values {
  padding: var(--space-xl) clamp(var(--space-sm), 5vw, var(--space-xl));
  background: var(--values-background);
  color: var(--color-text-dark);
}

[data-theme="dark"] .values,
[data-theme="dark"] .program-teaser {
  color: var(--color-text-primary);
}

.values .section-heading {
  max-width: 1040px;
  margin: 0 auto var(--space-lg);
}

.values .section-heading__eyebrow,
.values .section-heading__description {
  color: var(--color-text-muted-dark);
}

[data-theme="dark"] .values .section-heading__eyebrow,
[data-theme="dark"] .values .section-heading__description {
  color: var(--color-text-muted);
}

.section-heading__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
}

.section-heading__title {
  margin: 0 0 var(--space-lg);
  font-size: clamp(1.75rem, 4vw, 3rem);
}

.section-heading__description {
  margin: calc(-1 * var(--space-md)) 0 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 60ch;
  line-height: 1.5;
}

.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 1040px;
  margin: 0 auto;
}

.program-teaser {
  padding: var(--space-xl) clamp(var(--space-sm), 5vw, var(--space-xl));
  background: var(--program-teaser-background);
  color: var(--color-text-dark);
  border-top: 1px solid var(--program-teaser-border);
  border-bottom: 1px solid var(--program-teaser-border);
  box-shadow: var(--program-teaser-shadow);
}

.program-teaser__layout {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
  row-gap: clamp(var(--space-lg), 5vw, var(--space-xl));
}

.program-teaser .section-heading {
  margin: 0;
}

.program-teaser .section-heading__eyebrow,
.program-teaser .section-heading__description,
.program-teaser__note {
  color: var(--color-text-muted-dark);
}

[data-theme="dark"] .program-teaser .section-heading__eyebrow,
[data-theme="dark"] .program-teaser .section-heading__description,
[data-theme="dark"] .program-teaser__note {
  color: var(--color-text-muted);
}

.program-teaser__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  align-self: center;
  justify-self: stretch;
}

.program-teaser__note {
  margin: 0;
  color: var(--color-text-muted-dark);
  font-size: 0.95rem;
  max-width: 36ch;
}

@media (min-width: 1024px) {
  .program-teaser__layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    align-items: center;
  }
}

@media (max-width: 640px) {
  .program-teaser__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .program-teaser__actions .button {
    width: 100%;
  }

  .program-teaser__note {
    margin-top: var(--space-xs);
  }
}

@media (min-width: 640px) {
  .values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .values__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.value-card {
  position: relative;
  --value-card-accent: var(--value-card-accent-default);

  /* Basis-Variablen (main-Branch) */
  --value-card-surface-current: var(--value-card-surface);
  --value-card-text-current: var(
    --value-card-text-default,
    var(--color-text-dark)
  );

  /* Theme-Variablen (Codex-Branch), standardmäßig an "current" gekoppelt */
  --value-card-theme-surface: var(--value-card-surface-current);
  --value-card-theme-text: var(--value-card-text-current);
  --value-card-outline-color: var(--value-card-outline);
  --value-card-badge-bg: var(--value-card-theme-text);
  --value-card-badge-color: var(--value-card-badge-ink, var(--value-card-theme-surface));
  --value-card-badge-shadow: rgba(227, 0, 15, 0.3);

  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radius-base);
  background: var(--value-card-theme-surface);
  border: 1px solid var(--value-card-border);
  box-shadow: var(--value-card-shadow);
  transition: box-shadow var(--transition-default),
    transform var(--transition-default);
  min-height: 200px;
  color: var(--value-card-theme-text);
  overflow: hidden;
}

.value-card::before {
  content: "";
  position: absolute;
  inset: auto -15% 30% auto;
  width: 70%;
  height: 75%;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0)
    ),
    var(--value-card-accent);
  opacity: 0.55;
  filter: blur(0.5rem);
  pointer-events: none;
  z-index: 0;
}

.value-card > * {
  position: relative;
  z-index: 1;
}

/* Position-basiertes Farbschema (Fallback / Default) */
.value-card:nth-child(1) {
  --value-card-accent: var(--value-card-accent-1);
  --value-card-surface-current: var(--value-card-surface-housing);
  --value-card-text-current: var(--value-card-text-housing);
}

.value-card:nth-child(2) {
  --value-card-accent: var(--value-card-accent-2);
  --value-card-surface-current: var(--value-card-surface-mobility);
  --value-card-text-current: var(--value-card-text-mobility);
}

.value-card:nth-child(3) {
  --value-card-accent: var(--value-card-accent-3);
  --value-card-surface-current: var(--value-card-surface-digital);
  --value-card-text-current: var(--value-card-text-digital);
}

.value-card:nth-child(4) {
  --value-card-accent: var(--value-card-accent-4);
  --value-card-surface-current: var(--value-card-surface-climate);
  --value-card-text-current: var(--value-card-text-climate);
}

.value-card:nth-child(5) {
  --value-card-accent: var(--value-card-accent-5);
  --value-card-surface-current: var(--value-card-surface-community);
  --value-card-text-current: var(--value-card-text-community);
}

.value-card:nth-child(6) {
  --value-card-accent: var(--value-card-accent-6);
  --value-card-surface-current: var(--value-card-surface-transparency);
  --value-card-text-current: var(--value-card-text-transparency);
}

/* Topic-basierte Themes (überschreiben Defaults via data-topic) */
.value-card[data-topic="housing"] {
  --value-card-theme-surface: var(--value-card-surface-housing);
  --value-card-theme-text: var(--value-card-text-housing);
  --value-card-outline-color: var(--value-card-text-housing);
  --value-card-badge-shadow: var(--value-card-badge-shadow-housing);
}

.value-card[data-topic="mobility"] {
  --value-card-theme-surface: var(--value-card-surface-mobility);
  --value-card-theme-text: var(--value-card-text-mobility);
  --value-card-outline-color: var(--value-card-text-mobility);
  --value-card-badge-shadow: var(--value-card-badge-shadow-mobility);
}

.value-card[data-topic="digital"] {
  --value-card-theme-surface: var(--value-card-surface-digital);
  --value-card-theme-text: var(--value-card-text-digital);
  --value-card-outline-color: var(--value-card-text-digital);
  --value-card-badge-shadow: var(--value-card-badge-shadow-digital);
}

.value-card[data-topic="climate"] {
  --value-card-theme-surface: var(--value-card-surface-climate);
  --value-card-theme-text: var(--value-card-text-climate);
  --value-card-outline-color: var(--value-card-text-climate);
  --value-card-badge-shadow: var(--value-card-badge-shadow-climate);
}

.value-card[data-topic="community"] {
  --value-card-theme-surface: var(--value-card-surface-community);
  --value-card-theme-text: var(--value-card-text-community);
  --value-card-outline-color: var(--value-card-text-community);
  --value-card-badge-shadow: var(--value-card-badge-shadow-community);
}

.value-card[data-topic="transparency"] {
  --value-card-theme-surface: var(--value-card-surface-transparency);
  --value-card-theme-text: var(--value-card-text-transparency);
  --value-card-outline-color: var(--value-card-text-transparency);
  --value-card-badge-shadow: var(--value-card-badge-shadow-transparency);
}

.value-card__title {
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: 1.1rem;
  color: var(--value-card-theme-text);
}

.value-card__description {
  margin: 0;
  color: var(--value-card-theme-text);
  transform: translateY(10px);
  opacity: 0.6;
  transition: transform var(--transition-default),
    opacity var(--transition-default);
}

.value-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: 1.35rem;
  background: var(--value-card-badge-bg);
  color: var(--value-card-badge-color);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
  transition: transform var(--transition-default),
    box-shadow var(--transition-default);
}

.value-card:hover,
.value-card:focus-visible {
  box-shadow: var(--value-card-hover-shadow);
  transform: translateY(-6px);
  outline: 3px solid var(--value-card-outline-color);
  outline-offset: 4px;
}

.value-card:hover .value-card__badge,
.value-card:focus-visible .value-card__badge {
  transform: scale(1.08);
  box-shadow: 0 18px 35px var(--value-card-badge-shadow),
    0 0 18px var(--value-card-badge-shadow);
}

.value-card:hover .value-card__description,
.value-card:focus-visible .value-card__description {
  transform: translateY(0);
  opacity: 1;
}

.cta {
  padding: var(--space-xl) clamp(var(--space-sm), 5vw, var(--space-xl));
  background: var(--cta-background);
  border-top: 1px solid var(--cta-border);
  color: var(--color-text-dark);
}

.cta__title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.cta__helper {
  font-size: 0.95rem;
  color: var(--color-text-muted-dark);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
  max-width: 48ch;
}

.cta__socials {
  display: flex;
  gap: var(--space-xs);
}

.icon-button {
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  border: 1px solid var(--icon-button-border);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background var(--transition-default),
    color var(--transition-default),
    transform var(--transition-default);
  font-weight: 600;
}

.icon-button__icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.icon-button:hover {
  background: var(--icon-button-hover-bg);
  transform: translateY(-2px);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "brand nav controls"
    "brand compliance controls"
    "brand meta controls";
  column-gap: clamp(var(--space-md), 4vw, var(--space-xl));
  row-gap: var(--space-sm);
  align-items: start;
  padding: var(--space-md) clamp(var(--space-sm), 5vw, var(--space-xl));
  border-top: 1px solid var(--site-footer-border);
  background: var(--site-footer-background);
  color: var(--color-text-dark);
}

[data-theme="dark"] .site-footer {
  color: var(--color-text-primary);
}

.site-footer a,
.site-footer__link {
  color: var(--site-footer-link-color);
  font-weight: 600;
  text-decoration-color: currentColor;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--site-footer-link-hover-color);
  text-decoration-color: currentColor;
}

[data-theme="dark"] .site-footer__legal {
  color: var(--color-text-muted);
}

.site-footer__nav {
  grid-area: nav;
}

.site-footer__meta {
  grid-area: meta;
}

.site-footer__compliance {
  grid-area: compliance;
  border-radius: calc(var(--radius-base) * 1.2);
  padding: var(--space-md);
  box-shadow: var(--shadow-card-soft);
  color: var(--color-text-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: 100%;
  background: linear-gradient(145deg, #fff8f7, #ffe4e1 55%, #ffd0c9);
  border: 1px solid rgba(227, 0, 15, 0.25);
  position: relative;
  overflow: hidden;
}

.site-footer__compliance::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 0%, rgba(227, 0, 15, 0.25), transparent 45%);
  pointer-events: none;
}

[data-theme="dark"] .site-footer__compliance {
  color: var(--color-text-primary);
  background: linear-gradient(150deg, rgba(19, 7, 8, 0.95), rgba(63, 7, 12, 0.9));
  border-color: rgba(255, 255, 255, 0.1);
}

.compliance-card--compact {
  padding: var(--space-sm);
  gap: var(--space-sm);
  width: 100%;
  max-width: 100%;
}

.compliance-card--compact .compliance-card__title {
  font-size: 1.15rem;
}

.compliance-card--compact .compliance-card__subtitle {
  font-size: 0.9rem;
}

.compliance-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.compliance-card__eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-text-muted-dark);
  margin: 0;
}

[data-theme="dark"] .compliance-card__eyebrow {
  color: var(--color-text-muted);
}

.compliance-card__badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(227, 0, 15, 0.12);
  border: 1px solid rgba(227, 0, 15, 0.35);
  color: var(--color-spd-red);
}

[data-theme="dark"] .compliance-card__badge {
  background: rgba(255, 90, 95, 0.15);
  border-color: rgba(255, 90, 95, 0.4);
  color: #ffb3b6;
}

.compliance-card__intro {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.compliance-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0;
}

.compliance-card__subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted-dark);
  line-height: 1.4;
}

[data-theme="dark"] .compliance-card__subtitle {
  color: var(--color-text-muted);
}

.compliance-card__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  font-weight: 600;
  color: var(--color-text-muted-dark);
}

[data-theme="dark"] .compliance-card__label {
  color: var(--color-text-muted);
}

.compliance-card__value {
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
  word-break: break-word;
  margin: 0;
}

.compliance-card__meta {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.compliance-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.85rem;
  border-radius: calc(var(--radius-base) * 0.9);
  border: 1px solid rgba(227, 0, 15, 0.18);
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .compliance-card__meta-item {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.compliance-card__meta-item .compliance-card__label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.compliance-card__meta-item .compliance-card__value {
  font-size: 0.95rem;
  margin: 0;
}

.compliance-card__value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(227, 0, 15, 0.35);
}

[data-theme="dark"] .compliance-card__value a {
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.compliance-card__value:hover,
.compliance-card__value:focus-visible {
  text-decoration: underline;
}

.compliance-card__cta {
  align-self: flex-start;
  color: var(--button-ghost-on-light-color);
  border: 1px solid var(--button-ghost-on-light-border);
}

.compliance-card__cta:hover {
  background: var(--button-ghost-on-light-hover-bg);
}

[data-theme="dark"] .compliance-card__cta {
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .compliance-card__cta:hover {
  background: rgba(255, 255, 255, 0.08);
}

.site-footer__controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.site-footer__controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-end;
}

.motion-toggle {
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: flex-end;
}

.motion-toggle__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.motion-toggle__label {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.6rem var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--motion-toggle-border);
  background: var(--motion-toggle-bg);
  color: var(--color-text-primary);
  font-weight: 600;
  font-family: var(--font-sans);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition-default),
    border-color var(--transition-default),
    color var(--transition-default);
}

.motion-toggle__label:hover {
  background: var(--motion-toggle-bg-hover);
}

.motion-toggle__text {
  flex: 1;
}

.motion-toggle__pill {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--motion-toggle-pill-track);
  transition: background var(--transition-default);
}

.motion-toggle__pill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.2rem;
  height: calc(100% - 4px);
  border-radius: var(--radius-pill);
  background: var(--motion-toggle-pill-knob);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-default);
}

.motion-toggle__checkbox:checked + .motion-toggle__label .motion-toggle__pill {
  background: var(--motion-toggle-pill-track-active);
}

.motion-toggle__checkbox:checked + .motion-toggle__label .motion-toggle__pill::after {
  transform: translateX(1.2rem);
}

.motion-toggle__checkbox:focus-visible + .motion-toggle__label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.site-footer__legal-nav {
  list-style: none;
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0.35rem;
  background: var(--site-footer-logo-bg);
  font-weight: 700;
  color: var(--site-footer-logo-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* merged mobile footer layout */
@media (max-width: 720px) {
  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "compliance"
      "meta"
      "controls";
    row-gap: var(--space-md);
    text-align: center;
    align-items: center;
  }

  .site-footer__brand {
    justify-content: center;
    flex-wrap: wrap;
  }

  .site-footer__legal-nav {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .site-footer__meta {
    text-align: center;
  }

  .site-footer__compliance {
    width: 100%;
    max-width: 520px;
    padding: var(--space-lg) var(--space-md);
    text-align: left;
  }

  .site-footer__controls {
    width: 100%;
    align-items: center;
  }

  .motion-toggle {
    width: 100%;
    max-width: 320px;
  }
}

@media (min-width: 64em) {
  .site-footer {
    grid-template-areas: none;
    grid-template-columns: minmax(240px, auto) minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    row-gap: var(--space-lg);
  }

  .site-footer__brand {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .site-footer__nav {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .site-footer__compliance,
  .compliance-card--compact {
    max-width: min(100%, 720px);
  }

  .site-footer__compliance {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    padding: var(--space-xl);
    gap: var(--space-lg);
    justify-self: center;
    width: min(100%, 720px);
  }

  .site-footer__meta {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .site-footer__controls {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }

  .compliance-card--compact {
    padding: var(--space-md);
    gap: var(--space-md);
  }
}