/* Urbaner digitaler Klimazwilling – Marketingseite
   Helles Erscheinungsbild, abgeleitet aus DESIGN.md des Viewers:
   Tag-Flächen mit Grünstich, Schrift in Schieferstufen, Signalgrün (Tag) für
   Aktion, Modulfarben nur als Herkunft, Limette nur in der Bildmarke.
   Kontraste gemessen: siehe _pruefung/bericht.json. */

@font-face {
  font-family: "Archivo";
  src: url("schrift/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ersatzschrift mit angeglichenen Maßen: kein Sprung, wenn Archivo nachlädt. */
@font-face {
  font-family: "Archivo Ersatz";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* Flächen */
  --grund: #f6f8f7;          /* tag-flaeche */
  --grund-tief: #eaefec;     /* zwischen tag-flaeche und tag-mittel */
  --papier: #ffffff;
  --kante: #d5dbd8;          /* tag-kante */
  --haarlinie: rgb(15 23 42 / 0.1);
  --feldkante: #6b7883;      /* 4,4:1 auf Weiß: Bedienelement ≥ 3:1 */

  /* Schrift */
  --tinte: #0f172a;
  --tinte-2: #334155;
  --tinte-3: #4a5a6a;

  /* Aktion und Zustand */
  /* Grün = Logogrün des UDK (Limette #a3bd0d). Knöpfe tragen es als
     Fläche mit Tinte darauf (8,4:1); die Kante in einem dunkleren Ton
     desselben Farbtons hebt den hellen Knopf vom hellen Grund ab (3,9:1).
     Wo Grün Schrift auf Hell ist (Links), steht der dunkle Ton (6,7:1). */
  --lime: #a3bd0d;
  --lime-hover: #aec52a;     /* 9,2:1 mit Tinte */
  --lime-druck: #93aa0c;     /* 6,8:1 mit Tinte */
  --lime-kante: #728409;     /* 3,9:1 auf Grund, 4,2:1 auf Weiß */
  --lime-ring: #627108;      /* Fokusring, 5,1:1 auf Grund */
  --lime-text: #525e06;      /* Links, 6,7:1 auf Grund */
  --lime-text-tief: #414c05;
  --lime-hauch: #eef3d3;
  --signal: var(--lime-text);
  --signal-tief: var(--lime-text-tief);
  --signal-hauch: var(--lime-hauch);
  --fehler: #b91c1c;
  --fehler-hauch: #fdf1f1;
  --warn-text: #7a3e00;
  --warn-flaeche: #fff3d6;
  --warn-kante: #b45309;

  /* Bild und Nacht (Stand) */
  --nacht: #0b1220;          /* bild-grund */
  --nacht-schrift: #ffffff;
  --nacht-weich: #d3dce8;
  --nacht-still: #a8b6c6;
  --nacht-signal: #58c04e;

  /* Schrift und Maß */
  --schrift: "Archivo", "Archivo Ersatz", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --max: 82rem;
  /* Rahmen für randabfallende Bilder: bis 1920 px laufen sie an den
     Fensterrand, darüber enden sie an diesem Rahmen, damit Bild, Text und
     Kopfleiste auf sehr breiten Schirmen beieinander bleiben. */
  --rahmen: 120rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --abschnitt: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Bewegung (DESIGN.md: 140–260 ms, ease-out) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);    /* Eintreten, Rückmeldung */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Bilder, einmalige Auftritte */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Bewegung auf der Fläche */
  --dauer-druck: 140ms;
  --dauer-farbe: 180ms;
  --dauer-zustand: 220ms;

  /* Ebenen */
  --z-kopf: 10;
  --z-sprung: 20;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 640;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

a {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dauer-farbe) ease, text-decoration-color var(--dauer-farbe) ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--signal-tief);
  }
}

:focus-visible {
  outline: 2px solid var(--lime-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

main:focus {
  outline: none;
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: absolute;
  left: var(--rand);
  top: 0.75rem;
  z-index: var(--z-sprung);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--tinte);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dauer-zustand) var(--ease-out);
}

.sprung:focus-visible {
  transform: none;
  color: #ffffff;
}

.wert {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── Platzhalter: bewusst auffällig, bis die Daten feststehen ─────────── */

/* ── Knöpfe ──────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 1px solid var(--lime-kante);
  border-radius: 8px;
  background: var(--lime);
  box-shadow: inset 0 -1px 0 rgb(65 76 5 / 0.25);
  color: var(--tinte);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dauer-farbe) ease,
    border-color var(--dauer-farbe) ease,
    color var(--dauer-farbe) ease,
    transform var(--dauer-druck) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.knopf:active {
  transform: scale(0.97);
  background: var(--lime-druck);
}

.knopf--umriss:active {
  background: rgb(15 23 42 / 0.08);
}

.knopf:disabled {
  cursor: progress;
}

.knopf:disabled:active {
  transform: none;
}

.knopf--umriss {
  border-color: rgb(15 23 42 / 0.3);
  background: transparent;
  color: var(--tinte);
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: var(--lime-hover);
    color: var(--tinte);
  }

  .knopf:active:hover {
    background: var(--lime-druck);
  }

  .knopf--umriss:hover {
    border-color: rgb(15 23 42 / 0.45);
    background: rgb(15 23 42 / 0.05);
    color: var(--tinte);
  }

}

.knopf__pfeil {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knopf--klein {
  min-height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
}

/* Auf der Nacht trägt die Limette sich selbst (8,8:1 zum Grund). */
.knopf--hell {
  border-color: var(--lime);
  box-shadow: none;
}

.knopf--hell:focus-visible {
  outline-color: var(--lime);
}

/* ── Kopf ────────────────────────────────────────────────────────────── */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  background: rgb(246 248 247 / 0);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dauer-zustand) ease,
    border-color var(--dauer-zustand) ease,
    box-shadow var(--dauer-zustand) ease;
}

/* Beim Rollen: mattes Glas. Die Deckkraft 0,8 hält die Navigation auch über
   dem roten Einstiegsbild über 5:1. Ohne backdrop-filter bleibt es deckend. */
.kopf.ist-gerollt {
  background: rgb(246 248 247 / 0.8);
  border-bottom-color: var(--haarlinie);
  box-shadow: 0 10px 30px -18px rgb(15 23 42 / 0.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf.ist-gerollt {
    background: rgb(246 248 247 / 0.97);
  }
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--max) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0.75rem var(--rand);
}

.kopf__marke {
  display: block;
  flex: 0 0 auto;
  border-radius: 6px;
}

.kopf__marke img {
  width: auto;
  height: 2.75rem;
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.kopf__nav ul {
  position: relative;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
}

.kopf__nav ul a {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--tinte-2);
  font-size: 0.9375rem;
  font-weight: 520;
  text-decoration: none;
}

.kopf__nav ul a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
}

@media (hover: hover) and (pointer: fine) {
  .kopf__nav ul a:hover {
    color: var(--tinte);
    text-decoration-color: rgb(15 23 42 / 0.35);
  }
}

.kopf__zeiger {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  border-radius: 1px;
  background: var(--lime);
  opacity: 0;
  transform-origin: left center;
  pointer-events: none;
}

.kopf__zeiger.ist-da {
  opacity: 1;
}

.kopf__nav ul a[aria-current] {
  color: var(--tinte);
}

@media (max-width: 47.99rem) {
  .kopf__nav ul {
    display: none;
  }

  .kopf__marke img {
    height: 2.375rem;
  }
}

/* ── Einstieg ──────────────────────────────────────────────────────────
   Das Bild füllt die rechte Seite bis an den Rand und läuft nach links in
   den Grund aus (Maske, kein Verlauf über der Schrift). Die Schrift steht
   auf dem Grund, nie auf dem Bild. */
.held {
  --links: max(var(--rand), calc((100% - var(--max)) / 2));
  position: relative;
  max-width: var(--rahmen);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--links) minmax(0, 1fr) var(--rand);
  row-gap: clamp(2rem, 6vw, 3rem);
  padding-block: clamp(1.5rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem);
}

.held__text {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  max-width: 36rem;
}

.held__bild {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

.held__bildflaeche {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e9e3df;
}

.held__bildflaeche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.held__angabe {
  padding-inline: var(--rand);
}

@media (min-width: 60rem) {
  .held {
    grid-template-columns: var(--links) minmax(0, 36rem) 1fr;
    align-items: center;
    min-height: clamp(38rem, calc(100svh - 4.5rem), 56rem);
    padding-block: clamp(2rem, 4vw, 3.5rem);
  }

  .held__bild {
    position: absolute;
    grid-row: auto;
    grid-column: auto;
    inset: 0 0 0 auto;
    width: 64%;
    display: flex;
    flex-direction: column;
  }

  .held__bildflaeche {
    flex: 1;
    aspect-ratio: auto;
    background: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  }

  .held__bildflaeche img {
    object-position: 40% 50%;
  }

  /* Bildangabe als ruhiges Täfelchen unten rechts im Bild */
  .held__angabe {
    position: absolute;
    right: var(--rand);
    bottom: 1.25rem;
    max-width: 30rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.6);
    border-radius: 10px;
    background: rgb(246 248 247 / 0.9);
    box-shadow: 0 12px 30px -16px rgb(15 23 42 / 0.4);
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 60rem) {
    .held__angabe {
      background: rgb(246 248 247 / 0.82);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
}

/* Messe als schlanke Pille über der Überschrift */
.messe-pille {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  max-width: 100%;
  padding: 0.45rem 0.85rem 0.45rem 1rem;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background: var(--papier);
  box-shadow: 0 6px 18px -12px rgb(15 23 42 / 0.3);
  color: var(--tinte);
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
  transition:
    border-color var(--dauer-farbe) ease,
    box-shadow var(--dauer-farbe) ease,
    transform var(--dauer-druck) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.messe-pille:active {
  transform: scale(0.98);
}

.messe-pille__text {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.6rem;
  min-width: 0;
}

.messe-pille__daten {
  color: var(--tinte-2);
  font-variant-numeric: tabular-nums;
}

.messe-pille .knopf__pfeil {
  color: var(--tinte-2);
}

@media (hover: hover) and (pointer: fine) {
  .messe-pille:hover {
    border-color: var(--lime-kante);
    box-shadow: 0 10px 24px -14px rgb(15 23 42 / 0.4);
    color: var(--tinte);
  }
}

.messe {
  font-stretch: 94%;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.held__titel {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(3.25rem, 1.7rem + 5.6vw, 6rem);
  font-stretch: 80%;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.held__satz {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 33rem;
  color: var(--tinte-2);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
}

.knopf--gross {
  min-height: 3.25rem;
  padding-inline: 1.4rem;
  font-size: 1.0625rem;
}

.held__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* Bildrahmen */
.bild {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #dbe5ea;
  aspect-ratio: 16 / 10;
  box-shadow: 0 40px 70px -40px rgb(15 23 42 / 0.45);
}

.bild::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.08);
  pointer-events: none;
}

.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bildangabe: wie auf dem Startbild des Zwillings, Werte in Monospace */
.angabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin-top: 0.8rem;
  color: var(--tinte-3);
  font-size: 0.875rem;
  line-height: 1.45;
}

.angabe__zeile {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--tinte-2);
  font-weight: 560;
}

.angabe__skala {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.angabe__quelle {
  flex-basis: 100%;
}

.skala {
  display: inline-block;
  width: 6.5rem;
  height: 0.5rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.12);
}

.skala--kalt {
  background: linear-gradient(90deg, #5b9ec9, #7bb4d5, #a9cfe4, #d5e7f1, #eff3f6);
}

.skala--heiss {
  /* Blau–Weiß–Rot des Zwillings über 25–35 °C, sichtbarer Teil ab 30,5 °C */
  background: linear-gradient(90deg, #f9ebe3, #fddbc7, #ef8a62, #b2182b);
}

.skala--wind {
  background: linear-gradient(90deg, #3078a8, #3090a8, #48a890, #90c090, #d8f090);
}

.punkt {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--modul);
}

/* ── Gemeinsame Abschnittsköpfe ─────────────────────────────────────── */
.module,
.kontakt,
.stand__innen,
.fuss__innen {
  max-width: calc(var(--max) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

h2 {
  font-size: clamp(2.125rem, 1.3rem + 3.2vw, 4rem);
  font-stretch: 84%;
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.028em;
}

.abschnitt-kopf {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.abschnitt-kopf p {
  color: var(--tinte-2);
  font-size: 1.125rem;
}

/* ── Was ist der UDK? ─────────────────────────────────────────────────
   Eine Leiste mit fünf Aussagen (oben ein Strich in Modulfarbe), danach die
   Zielgruppen in zwei Spalten. */
.udk {
  max-width: calc(var(--max) + 2 * var(--rand));
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  padding: 0 var(--rand) var(--abschnitt);
}

/* Kennwerte: fünf in einer Reihe (Stand vor „Offene Standards“, auf
   Wunsch wiederhergestellt), Titel oben bündig. */
.kennwerte__leiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--kante);
  border-bottom: 1px solid var(--kante);
}

@media (min-width: 36rem) {
  .kennwerte__leiste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .kennwerte__leiste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .kennwerte__leiste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.kennwert {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2rem);
}

.kennwert::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(0.75rem, 2vw, 1.25rem);
  width: 2rem;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--modul);
  transform-origin: left center;
}

.kennwert dd {
  margin: 0;
}

.kennwert__zahl {
  display: block;
  font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem);
  font-stretch: 80%;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Wortaussagen kleiner, damit sie neben den Zahlen nicht schreien */
.kennwert--wort .kennwert__zahl {
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  line-height: 1.1;
  white-space: normal;
  hyphens: manual;
}

/* Modell- und Fachnamen nicht am Bindestrich trennen */
.kein-umbruch {
  white-space: nowrap;
}

.kennwert dt {
  max-width: 17rem;
  color: var(--tinte-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.zielgruppen {
  margin-top: clamp(3.5rem, 8vw, 6rem);
}

.zielgruppen__titel {
  max-width: 24ch;
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  font-stretch: 84%;
  font-weight: 680;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.zielgruppen__satz {
  margin-top: 1rem;
  max-width: 44rem;
  color: var(--tinte-2);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.zielgruppen__liste {
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

@media (min-width: 52rem) {
  .zielgruppen__liste {
    grid-template-columns: 1fr 1fr;
  }
}

.zielgruppen__liste > div {
  position: relative;
  padding: 1.5rem 0 1.4rem;
  border-bottom: 1px solid var(--kante);
}

.zielgruppen__liste > div::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  width: 1.75rem;
  height: 2px;
  background: var(--lime);
}

.zielgruppen__liste dt {
  font-size: 1.125rem;
  font-weight: 660;
  line-height: 1.3;
}

.zielgruppen__liste dd {
  margin-top: 0.4rem;
  color: var(--tinte-2);
}

/* ── Module ─────────────────────────────────────────────────────────── */
.module {
  display: grid;
  gap: clamp(3.5rem, 1.5rem + 6vw, 7.5rem);
  padding-bottom: var(--abschnitt);
}

.modul-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.modul-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background: var(--papier);
  color: var(--tinte);
  font-size: 0.9375rem;
  font-weight: 560;
  text-decoration: none;
  transition:
    border-color var(--dauer-farbe) ease,
    transform var(--dauer-druck) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.modul-index a:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .modul-index a:hover {
    border-color: var(--modul);
    color: var(--tinte);
  }
}

.modul {
  --aussen: max(var(--rand), (min(100vw, var(--rahmen)) - var(--max)) / 2);
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  scroll-margin-top: 5rem;
}

.modul__bild {
  margin: 0;
}

/* Schmal: das Bild läuft bis an beide Ränder. */
@media (max-width: 59.99rem) {
  .modul__bild .bild {
    margin-inline: calc(-1 * var(--rand));
    border-radius: 0;
    box-shadow: none;
  }

  .modul__bild .angabe {
    margin-top: 0.8rem;
  }
}

/* Breit: das Bild läuft zur Außenkante und bleibt stehen, während der
   Text daneben weiterläuft (sticky). */
@media (min-width: 60rem) {
  .modul {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .modul--gespiegelt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .modul--gespiegelt .modul__bild {
    order: 2;
  }

  .modul__bild {
    position: sticky;
    top: 5.5rem;
    margin-left: calc(-1 * var(--aussen));
  }

  .modul--gespiegelt .modul__bild {
    margin-left: 0;
    margin-right: calc(-1 * var(--aussen));
  }

  .modul__bild .bild {
    height: min(calc(100svh - 11rem), 44rem);
    min-height: 26rem;
    aspect-ratio: auto;
    border-radius: 0 16px 16px 0;
  }

  .modul--gespiegelt .modul__bild .bild {
    border-radius: 16px 0 0 16px;
  }

  .modul__bild .angabe {
    padding-left: var(--aussen);
  }

  .modul--gespiegelt .modul__bild .angabe {
    padding-left: 0;
    padding-right: var(--aussen);
  }

  .modul__text {
    padding-block: clamp(2rem, 10vh, 6rem) clamp(1.5rem, 8vh, 5rem);
  }
}

/* Breiter als der Rahmen: randabfallende Bilder enden an der Rahmenkante
   und bekommen dort ebenfalls eine runde Ecke; Inhalt etwas breiter. */
@media (min-width: 110rem) {
  :root {
    --max: 90rem;
  }
}

@media (min-width: 120.01rem) {
  .modul__bild .bild,
  .modul--gespiegelt .modul__bild .bild {
    border-radius: 16px;
  }

  .held__bildflaeche {
    border-radius: 0 16px 16px 0;
  }
}

.modul__text {
  max-width: 34rem;
}

.modul__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  color: var(--modul-text);
  font-size: 1rem;
  font-weight: 640;
}

.modul__laie {
  color: var(--tinte-3);
  font-weight: 420;
}

/* Die Modulsätze sind lange Aussagen, keine Schlagzeilen: eine Stufe
   kleiner als die Abschnittstitel, damit sie in 3–4 Zeilen bleiben. */
.modul h3 {
  margin-top: 1rem;
  max-width: 24ch;
  font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.375rem);
  font-stretch: 86%;
  font-weight: 680;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.modul__text > p:not(.modul__name) {
  margin-top: 1rem;
  color: var(--tinte-2);
}

.fragen__titel {
  margin-top: 1.6rem;
  color: var(--tinte);
  font-size: 0.9375rem;
  font-weight: 640;
}

.fragen {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
  list-style: none;
}

.fragen li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--tinte-2);
  line-height: 1.5;
}

.fragen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--modul);
}

/* Kurzfakten: Trennpunkte stehen links vor jedem Eintrag; am Zeilenanfang
   schneidet clip-path sie weg, damit keine Zeile mit „·“ beginnt. */
.fakten {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.2rem;
  margin: 1.5rem 0 0 -0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kante);
  clip-path: inset(-1px 0 0 0.9rem);
  color: var(--tinte-3);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.fakten li {
  position: relative;
  padding-left: 0.9rem;
  white-space: nowrap;
}

.fakten li::before {
  content: "·";
  position: absolute;
  left: 0.3rem;
  color: var(--modul);
  font-weight: 700;
}

.fragen__satz {
  margin-top: 0.5rem;
  color: var(--tinte-2);
}

.fragen--gegliedert li strong {
  display: block;
  color: var(--modul-text);
  font-weight: 640;
}

/* ── Perspektive: Entscheidungsunterstützungssysteme ─────────────────── */
.eus {
  max-width: calc(var(--max) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand) var(--abschnitt);
}

.eus__innen {
  display: grid;
  gap: 1.25rem;
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid var(--kante);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(163 189 13 / 0.14), transparent 60%),
    var(--papier);
}

.eus__marke {
  color: var(--tinte-3);
  font-size: 0.9375rem;
  font-weight: 600;
}

.eus h2 {
  max-width: 18ch;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.eus__satz {
  max-width: 44rem;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
}

.eus__aufruf {
  max-width: 40rem;
  color: var(--tinte-2);
  font-size: 1.0625rem;
}

.eus__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 0.5rem;
}

/* Textlink mit Tippfläche von 44 px, wie die übrigen Links neben Knöpfen */
.eus__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 560;
}

.eus__nachsatz {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--kante);
  max-width: 44rem;
}

.eus__nachsatz h3 {
  color: var(--modul-text);
  font-size: 1.125rem;
  font-weight: 660;
}

.eus__nachsatz p {
  margin-top: 0.35rem;
  color: var(--tinte-2);
}

/* ── Grundlage ──────────────────────────────────────────────────────── */
/* Grundlage auf feinem Messraster (wie Millimeterpapier), sehr leise */

/* ── Am Stand ───────────────────────────────────────────────────────── */
.stand {
  padding-block: var(--abschnitt);
  background: var(--nacht);
  color: var(--nacht-schrift);
}

.stand__innen {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 60rem) {
  .stand__innen {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
  }
}

.stand h2 {
  max-width: 18ch;
}

.stand__text > p {
  margin-top: 1.25rem;
  max-width: 38rem;
  color: var(--nacht-weich);
  font-size: 1.125rem;
  line-height: 1.65;
}

.stand__text > .stand__hinweis {
  color: var(--nacht-still);
  font-size: 1rem;
}

.stand__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.stand__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--nacht-weich);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: rgb(211 220 232 / 0.4);
}

@media (hover: hover) and (pointer: fine) {
  .stand__link:hover {
    color: #ffffff;
    text-decoration-color: #ffffff;
  }
}

.stand__link span {
  transition: transform 200ms var(--ease-out);
}

.stand a:focus-visible {
  outline-color: var(--lime);
}

/* Angaben als kompakte Zeile über der Team-Zeile */
.ticket {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin: 1.5rem 0 0;
  padding-block: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
}

@media (max-width: 40rem) {
  .ticket {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.9rem;
  }

  .ticket__feld:first-child {
    grid-column: 1 / -1;
  }
}

.ticket__feld {
  display: grid;
  gap: 0.25rem;
  align-content: start;
}

.ticket dt {
  color: var(--nacht-still);
  font-size: 0.875rem;
}

.ticket dd {
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  font-stretch: 88%;
  font-weight: 640;
  line-height: 1.2;
}

.messe--gross {
  letter-spacing: 0.01em;
}

.wert-gross {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Kontakt ────────────────────────────────────────────────────────── */
.kontakt {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: var(--abschnitt);
}

@media (min-width: 60rem) {
  .kontakt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .kontakt__kopf {
    position: sticky;
    top: 7rem;
  }

  .erfolg {
    grid-column: 2;
  }
}

.kontakt__kopf {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.kontakt__kopf > p {
  max-width: 28rem;
  color: var(--tinte-2);
  font-size: 1.125rem;
}

.formular > .kontakt__pflicht {
  grid-column: 1 / -1;
  margin-bottom: -0.5rem;
}

.kontakt__pflicht {
  color: var(--tinte-3);
  font-size: 0.9375rem;
}

.formular {
  display: grid;
  gap: 1.35rem 1.25rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--kante);
  border-radius: 12px;
  background: var(--papier);
}

@media (min-width: 40rem) {
  .formular {
    grid-template-columns: 1fr 1fr;
  }

  .formular > .formular__meldung,
  .formular > .anliegen,
  .formular > .feld--breit,
  .formular > .formular__fuss {
    grid-column: 1 / -1;
  }
}

.formular__meldung {
  padding: 1rem 1.15rem;
  border: 1px solid #f3b4b4;
  border-radius: 8px;
  background: var(--fehler-hauch);
  color: #7f1d1d;
}

.formular__meldung h3 {
  font-size: 1rem;
}

.formular__meldung ul {
  margin-top: 0.4rem;
  padding-left: 1.1rem;
}

.formular__meldung a {
  color: #7f1d1d;
}

.anliegen {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.anliegen legend {
  margin-bottom: 0.55rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 640;
}

.anliegen__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.anliegen__wahl label {
  position: relative;
  cursor: pointer;
}

.anliegen__wahl input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.anliegen__wahl span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--feldkante);
  border-radius: 999px;
  color: var(--tinte-2);
  font-size: 0.9375rem;
  font-weight: 520;
  transition:
    background-color var(--dauer-farbe) ease,
    border-color var(--dauer-farbe) ease,
    color var(--dauer-farbe) ease,
    transform var(--dauer-druck) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.anliegen__wahl label:active span {
  transform: scale(0.97);
}

.anliegen__wahl span::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--feldkante);
  transition: box-shadow var(--dauer-farbe) var(--ease-out), background-color var(--dauer-farbe) ease, transform var(--dauer-zustand) var(--ease-out);
}

.anliegen__wahl input:checked + span {
  border-color: var(--lime-kante);
  background: var(--lime-hauch);
  color: var(--tinte);
  font-weight: 600;
}

.anliegen__wahl input:checked + span::before {
  background: var(--lime);
  box-shadow: inset 0 0 0 1.5px var(--lime-kante);
  transform: scale(1.15);
}

.anliegen__wahl input:focus-visible + span {
  outline: 2px solid var(--lime-ring);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .anliegen__wahl label:hover input:not(:checked) + span {
    border-color: var(--tinte-2);
    color: var(--tinte);
  }
}

.feld {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  min-width: 0;
}

.feld label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.stern {
  color: var(--fehler);
}

.feld__optional {
  color: var(--tinte-3);
  font-weight: 420;
}

.feld input[type="text"],
.feld input[type="email"],
.feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--feldkante);
  border-radius: 8px;
  background: var(--papier);
  color: var(--tinte);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color var(--dauer-farbe) ease, box-shadow var(--dauer-farbe) var(--ease-out);
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--tinte-3);
}

.feld textarea {
  min-height: 9rem;
  resize: vertical;
}

@media (hover: hover) and (pointer: fine) {
  .feld input:hover,
  .feld textarea:hover {
    border-color: var(--tinte-2);
  }
}

.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: none;
  border-color: var(--lime-ring);
  box-shadow: 0 0 0 3px rgb(163 189 13 / 0.45);
}

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: var(--fehler);
  box-shadow: inset 0 0 0 1px var(--fehler);
}

.feld input[aria-invalid="true"]:focus-visible,
.feld textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--fehler);
  box-shadow: 0 0 0 3px rgb(185 28 28 / 0.22);
}

.feld__hinweis {
  color: var(--tinte-3);
  font-size: 0.875rem;
}

.feld__fehler {
  display: flex;
  gap: 0.4rem;
  color: var(--fehler);
  font-size: 0.9375rem;
  font-weight: 560;
}

.feld__fehler::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--fehler);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .feld__fehler:not([hidden]) {
    animation: fehler-ein 200ms var(--ease-out);
  }

  .formular__meldung:not([hidden]),
  .formular__status.ist-fehler {
    animation: fehler-ein 220ms var(--ease-out);
  }
}

.feld--haken {
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: start;
}

.feld--haken input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--lime-ring);
  cursor: pointer;
}

.feld--haken label {
  color: var(--tinte-2);
  font-weight: 420;
  line-height: 1.5;
}

.feld--haken .feld__fehler {
  grid-column: 2;
}

.honigtopf {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-top: 0.25rem;
}

.knopf--senden {
  min-width: 12rem;
}

.knopf__text {
  transition: opacity var(--dauer-zustand) ease, filter var(--dauer-zustand) ease;
}

.knopf--senden[aria-busy="true"] .knopf__text {
  opacity: 0.8;
}

.knopf--senden[aria-busy="true"] {
  cursor: progress;
}

.knopf--senden[aria-busy="true"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(15 23 42 / 0.2);
  border-top-color: var(--tinte);
  border-radius: 50%;
  animation: drehen 600ms linear infinite;
}

.formular__status {
  color: var(--tinte-2);
  font-size: 0.9375rem;
}

.formular__status.ist-fehler {
  color: var(--fehler);
  font-weight: 560;
}

.erfolg {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid #c9d77a;
  border-radius: 12px;
  background: var(--lime-hauch);
  color: var(--tinte);
}

.erfolg:focus {
  outline: none;
}

.erfolg h3 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-stretch: 90%;
}

.erfolg p {
  color: var(--tinte-2);
}

.erfolg__haken {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.45rem;
  border-radius: 50%;
  background: var(--lime);
  fill: none;
  stroke: var(--tinte);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .erfolg:not([hidden]) {
    animation: auftauchen 360ms var(--ease-out) both;
  }

  .erfolg:not([hidden]) .erfolg__haken path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: haken 420ms var(--ease-out) 160ms forwards;
  }
}

/* ── Fuß ────────────────────────────────────────────────────────────── */
.fuss {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--kante);
  background: var(--grund-tief);
}

.fuss__innen {
  display: grid;
  gap: 1.5rem 3rem;
}

@media (min-width: 48rem) {
  .fuss__innen {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .fuss__nav,
  .fuss__quelle {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .fuss__innen {
    grid-template-columns: 1fr auto auto;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .fuss__nav {
    grid-column: auto;
  }
}

/* Kooperation: GEO-NET zuerst, beide Marken gleich hoch und damit gleich
   gewichtet, getrennt durch eine Haarlinie. Die Quellbilder (138 und 124 px
   hoch) reichen bis 4rem für 2× scharf. */
.koop {
  --logo-h: 3rem;
  display: grid;
  gap: 0.6rem;
}

.koop__titel {
  color: var(--tinte-3);
  font-size: 0.875rem;
}

.koop__logos {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.koop__logos li {
  display: flex;
  align-items: center;
}

.koop__logos li + li {
  margin-left: calc(var(--logo-h) * 0.55);
  padding-left: calc(var(--logo-h) * 0.55);
  border-left: 1px solid var(--kante);
}

.koop__logos img {
  width: auto;
  max-width: none; /* sonst kollabiert das Bild in einer auto-Spalte */
  height: var(--logo-h);
}

/* Das Pluszeichen ragt über den GEO-NET-Block hinaus; mit 1,1 steht der
   Block selbst so groß wie die planGIS-Marke. */
.koop__logos .koop__geonet {
  height: calc(var(--logo-h) * 1.1);
}

.koop__logos .koop__plangis {
  height: calc(var(--logo-h) * 0.95);
}

/* Smart City Mannheim: Quadrat mit Wortmarke, deutlich höher als die
   Kooperationslogos: der Schriftzug steht klein oben rechts neben dem
   Quadrat und soll trotzdem lesbar bleiben. */
.koop__logos .koop__scm {
  height: calc(var(--logo-h) * 1.6);
}

.koop--einstieg.koop--unterstuetzung {
  margin-top: 1rem;
}

.koop--einstieg {
  --logo-h: 2.75rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1.1rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.koop--einstieg .koop__titel {
  line-height: 1.3;
}

.koop--fuss {
  --logo-h: 3.5rem;
}

@media (max-width: 29.99rem) {
  .koop--fuss {
    --logo-h: 3.25rem;
  }

  .koop--einstieg {
    --logo-h: 2.5rem;
    grid-template-columns: 1fr;
  }
}

.fuss__marke {
  display: grid;
  gap: 0.9rem;
}

.fuss__marke img {
  width: auto;
  height: 2.75rem;
}

.fuss__marke p,
.fuss__quelle {
  text-wrap: pretty;
  max-width: 36rem;
  color: var(--tinte-3);
  font-size: 0.9375rem;
}

.fuss__nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.fuss__nav a {
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--tinte-2);
  font-weight: 560;
}

.fuss__quelle {
  padding-top: 1.25rem;
  border-top: 1px solid var(--kante);
  font-size: 0.875rem;
}

/* ── Bewegung ─────────────────────────────────────────────────────────
   Alles nur mit transform, opacity, clip-path und filter; jede Bewegung
   einmal (außer dem langsamen Atmen des Einstiegsbilds, das nur läuft,
   solange es zu sehen ist). Ausgangslagen gelten nur mit laufendem Skript
   (.js), ohne Skript und bei reduzierter Bewegung steht alles sofort. */
@media (prefers-reduced-motion: no-preference) {
  /* Einstieg: Text gestaffelt, 50–60 ms Abstand */
  .held__text > * {
    animation: auftauchen 620ms var(--ease-out) both;
  }

  .held__text > :nth-child(2) { animation-delay: 50ms; }
  .held__text > :nth-child(3) { animation-delay: 110ms; }
  .held__text > :nth-child(4) { animation-delay: 170ms; }
  .held__text > :nth-child(5) { animation-delay: 230ms; }
  .held__text > :nth-child(6) { animation-delay: 290ms; }

  /* Einstiegsbild: Vorhang von links (clip-path), darin setzt sich das Bild */
  .held__bildflaeche {
    animation: vorhang 1100ms var(--ease-expo) 120ms both;
  }

  .held__bildflaeche img {
    animation:
      bild-setzen 1500ms var(--ease-expo) 120ms both,
      atmen 26s linear 1620ms infinite alternate;
  }

  .held.ist-aus-sicht .held__bildflaeche img {
    animation-play-state: running, paused;
  }

  .held__bild .angabe {
    animation: auftauchen 600ms var(--ease-out) 800ms both;
  }

  .messe-pille .knopf__pfeil {
    transition: transform 200ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .messe-pille:hover .knopf__pfeil {
      transform: translateX(3px);
    }
  }

  /* Kennwerte: die Striche zeichnen sich nacheinander */
  .kennwert::before {
    transition: transform 600ms var(--ease-out);
    transition-delay: calc(var(--k, 0) * 70ms);
  }

  .js .udk:not(.ist-sichtbar) .kennwert::before {
    transform: scaleX(0);
  }

  .kennwert:nth-child(2) { --k: 1; }
  .kennwert:nth-child(3) { --k: 2; }
  .kennwert:nth-child(4) { --k: 3; }
  .kennwert:nth-child(5) { --k: 4; }
  .kennwert:nth-child(6) { --k: 5; }

  /* Die Farbskala zeichnet sich von kühl nach heiß */
  .held__bild .skala {
    transform-origin: left center;
    animation: skala-zeichnen 700ms var(--ease-out) 900ms both;
  }

  /* Kopfleiste: Zeiger gleitet zum aktiven Abschnitt */
  .kopf__zeiger {
    transition:
      transform 320ms var(--ease-in-out),
      opacity 200ms ease;
  }

  /* Module: Bild zieht auf, Text folgt gestaffelt, Modulfarbe zeichnet sich */
  .js .modul .bild img {
    transition:
      opacity 600ms var(--ease-out),
      transform 1000ms var(--ease-expo),
      filter 600ms var(--ease-out);
  }

  .js .modul:not(.ist-sichtbar) .bild img {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(6px);
  }

  .js .modul__text > *,
  .js .modul__bild .angabe {
    transition:
      opacity 500ms var(--ease-out),
      transform 600ms var(--ease-out);
    transition-delay: calc(120ms + var(--i, 0) * 55ms);
  }

  .js .modul:not(.ist-sichtbar) .modul__text > *,
  .js .modul:not(.ist-sichtbar) .modul__bild .angabe {
    opacity: 0;
    transform: translateY(10px);
  }

  .modul__text > :nth-child(1) { --i: 0; }
  .modul__text > :nth-child(2) { --i: 1; }
  .modul__text > :nth-child(3) { --i: 2; }
  .modul__text > :nth-child(4) { --i: 3; }
  .modul__text > :nth-child(5) { --i: 4; }
  .modul__text > :nth-child(6) { --i: 5; }
  .modul__text > :nth-child(7) { --i: 6; }
  .modul__bild .angabe { --i: 4; }

  .js .modul__name .punkt {
    transition: transform 500ms var(--ease-out) 160ms;
  }

  .js .modul:not(.ist-sichtbar) .modul__name .punkt {
    transform: scale(0.4);
  }

  .js .fragen li::before {
    transform-origin: left center;
    transition: transform 500ms var(--ease-out);
    transition-delay: calc(420ms + var(--j, 0) * 80ms);
  }

  .js .modul:not(.ist-sichtbar) .fragen li::before {
    transform: scaleX(0);
  }

  .fragen li:nth-child(2) { --j: 1; }
  .fragen li:nth-child(3) { --j: 2; }


  /* Pfeile in Knöpfen: schieben sich bei Mauszeiger in ihre Richtung */
  .knopf__pfeil {
    transition: transform 200ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .knopf:hover .knopf__pfeil--rechts,
    .stand__link:hover span {
      transform: translateX(3px);
    }

    .knopf:hover .knopf__pfeil--unten {
      transform: translateY(2px);
    }
  }
}

@keyframes vorhang {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes atmen {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.04) translate3d(-1%, -0.6%, 0);
  }
}

@keyframes skala-zeichnen {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .held__text > *,
  .held__bildflaeche,
  .held__bildflaeche img,
  .held__bild .angabe {
    animation: einblenden 200ms ease both;
  }

  .knopf:active,
  .anliegen__wahl label:active span {
    transform: none;
  }

  .feld__fehler:not([hidden]),
  .formular__meldung:not([hidden]),
  .formular__status.ist-fehler {
    animation: einblenden 150ms ease;
  }

  /* Beim Prüfen und Senden steht der Ring still; der Zustand steht im Text. */
  .knopf--senden[aria-busy="true"]::before {
    animation: none;
  }
}

@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}

@keyframes bild-setzen {
  from {
    opacity: 0;
    transform: scale(1.035);
    filter: blur(8px);
  }
}

@keyframes fehler-ein {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes drehen {
  to {
    transform: rotate(360deg);
  }
}

@keyframes haken {
  to {
    stroke-dashoffset: 0;
  }
}

@media print {
  .kopf,
  .formular,
  .held__aktionen {
    display: none;
  }

  .stand {
    background: none;
    color: var(--tinte);
  }
}

/* Nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Ansprechpartner ────────────────────────────────────────────────── */
.team {
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kante);
}

.team__titel {
  color: var(--tinte-2);
  font-size: 0.9375rem;
  font-weight: 640;
}

.team__liste {
  display: grid;
  gap: 1rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.person {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: center;
}

.person__bild {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lime-hauch);
  box-shadow: 0 0 0 1px var(--kante), 0 10px 22px -14px rgb(15 23 42 / 0.45);
}

.person__name {
  font-size: 1.0625rem;
  font-weight: 660;
}

.person__rolle {
  color: var(--tinte-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.person__thema {
  margin-top: 0.15rem;
  color: var(--lime-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.team__satz {
  margin-top: 1rem;
  color: var(--tinte-3);
  font-size: 0.9375rem;
  max-width: 28rem;
}

.stand__team {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.stand__bilder {
  display: inline-flex;
  flex: 0 0 auto;
}

.stand__bilder img {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--nacht);
  border-radius: 50%;
  object-fit: cover;
}

.stand__bilder img + img {
  margin-left: -0.75rem;
}

.stand__text > .stand__team p {
  margin: 0;
  color: var(--nacht-weich);
  font-size: 1rem;
}



/* Das lange Kompositum im Fließtext darf schmal umbrechen (lang="de") */
.eus__aufruf {
  hyphens: auto;
}

/* ── Technik ─────────────────────────────────────────────────────────
   Kurz: Kopf, darunter drei gleich gebaute Blöcke (Strich in Logogrün,
   Zwischenüberschrift, zwei Sätze), ab 960 px 2×2. */
.technik {
  max-width: calc(var(--max) + 2 * var(--rand));
  margin-inline: auto;
  padding: 0 var(--rand) var(--abschnitt);
}

.technik__kopf p {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--tinte-2);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.technik__bloecke {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.technik__block {
  max-width: 40rem;
}

.technik__block {
  position: relative;
  padding: 1.5rem 0 1.4rem;
  border-top: 1px solid var(--kante);
}

.technik__block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2rem;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--lime);
  transform-origin: left center;
}

.technik__block h3 {
  font-size: 1.1875rem;
  font-weight: 660;
  line-height: 1.3;
}

.technik__block p {
  margin-top: 0.5rem;
  max-width: 34rem;
  color: var(--tinte-2);
  line-height: 1.55;
}

/* ── Stadtklima: Halt mit Tag→Nacht ───────────────────────────────────
   Breit und ohne reduzierte Bewegung rastet das Modul für eine kurze
   Strecke ein (sticky in einem höheren Container). Währenddessen wechseln
   Bild und Bildunterschrift von 14:00 auf 04:00. Kein Abfangen von Rad
   oder Touch – die Seite scrollt ganz normal, nur das Modul steht.
   Schmal oder bei reduzierter Bewegung: beide Bilder untereinander. */
.bildwechsel {
  display: grid;
  gap: 2rem;
}

.bildwechsel__ebene {
  margin: 0;
}

.bildwechsel__zustand {
  display: none;
}

@media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
  /* Die Strecke als Platzhalter im Inhalt (nicht als padding: sticky
     hält nur innerhalb des Inhaltsbereichs des Containers). */
  /* Scrollstrecke im Text: die Bildspalte bleibt (sticky wie in allen
     Modulen) stehen, während der Text darunter weiterläuft. */
  .js .halt.ist-an .modul__text {
    padding-bottom: 75svh;
  }

  .js .halt.ist-an .modul__bild {
    top: var(--halt-oben, 5.5rem);
  }

  .js .halt.ist-an .modul__bild .bild {
    height: var(--halt-bild, 30rem);
    min-height: 0;
  }

  .js .halt.ist-an .bildwechsel {
    gap: 0;
  }

  .js .halt.ist-an .bildwechsel__ebene {
    grid-area: 1 / 1;
    transition: opacity 400ms var(--ease-out), visibility 0s linear 0s;
  }

  /* Inaktiv nur unsichtbar, nicht versteckt: Bild und Unterschrift bleiben
     für Screenreader lesbar. */
  .js .halt.ist-an .bildwechsel__ebene:not(.ist-aktiv) {
    visibility: hidden;
    transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
    opacity: 0;
    pointer-events: none;
  }

  .js .bildwechsel__zustand {
    display: flex;
    gap: 0.9rem;
    grid-area: 2 / 1;
    margin: 0.35rem 0 0;
    padding-left: var(--aussen);
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--tinte-3);
  }

  .js .bildwechsel__zustand span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 400ms var(--ease-out);
  }

  .js .bildwechsel__zustand span::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px currentColor;
    transition: background-color 400ms var(--ease-out);
  }

  .js .bildwechsel__zustand span.ist-aktiv {
    color: var(--tinte);
  }

  .js .bildwechsel__zustand span.ist-aktiv::before {
    background: var(--modul);
    box-shadow: none;
  }
}

/* „(in Entwicklung)“: sichtbar, aber zurückhaltend – gedämpfte Schrift,
   kein Badge. --tinte-3 hält 6,6:1 auf dem Grund. */
.in-entwicklung {
  color: var(--tinte-3);
  font-weight: 400;
  white-space: nowrap;
}

.modul-index .in-entwicklung {
  font-size: 0.875em;
}

/* Lange Einträge dürfen in der Pille umbrechen, statt überzulaufen */
.modul-index a {
  flex-wrap: wrap;
  max-width: 100%;
  row-gap: 0;
  padding-block: 0.35rem;
}

.fakten li:has(.in-entwicklung) {
  white-space: normal;
}

/* Technik mit vier Blöcken: 2×2 ab 60rem, Zeilenlänge bleibt lesbar */
@media (min-width: 60rem) {
  .technik__bloecke {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* ── Technik als Karten: Zeichen, Titel, Stichworte, Text ────────────── */
.technik__bloecke {
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 60rem) {
  .technik__bloecke {
    column-gap: clamp(1rem, 2vw, 1.5rem);
  }
}

.technik__block {
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--kante);
  border-radius: 14px;
  background: var(--papier);
  transition: border-color var(--dauer-farbe) ease, box-shadow var(--dauer-zustand) var(--ease-out);
}

.technik__block::before {
  display: none;
}



.technik__kopfzeile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.technik__zeichen {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #c9d77a;
  border-radius: 10px;
  background: var(--lime-hauch);
  color: var(--lime-text);
}

.technik__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.technik__block p {
  max-width: 62ch;
}

.technik__block p + p {
  margin-top: 0.6rem;
}

/* ── Perspektive: Anwendungsfelder als Anregung ─────────────────────── */
.eus__beispiele {
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

.eus__beispiele-titel {
  color: var(--tinte-2);
  font-size: 0.9375rem;
  font-weight: 600;
}

.eus__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0.9rem 0 0;
  padding: 0;
  border: 1px solid var(--kante);
  border-radius: 14px;
  list-style: none;
  overflow: hidden;
}

/* Spalten nur so schmal, dass die langen Komposita („Winterdienst-
   management“) ohne Silbentrennung in eine Zeile passen: 2 ab 36rem,
   3 ab 48rem, 4 ab 75rem, darunter gestapelt. */
@media (min-width: 36rem) {
  .eus__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .eus__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .eus__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}



/* Trenner als feine Linien: jede Zelle zeichnet ihre rechte und untere
   Kante, die äußeren verschwinden unter dem Rahmen (overflow: hidden). */
.eus__beispiel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 -1px -1px 0;
  padding: clamp(1rem, 2vw, 1.25rem);
  border-right: 1px solid var(--kante);
  border-bottom: 1px solid var(--kante);
  transition: background-color var(--dauer-farbe) ease;
}



.eus__zeichen {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.2rem;
  border: 1px solid #c9d77a;
  border-radius: 10px;
  background: var(--lime-hauch);
  color: var(--lime-text);
}

.eus__icon {
  width: 1.375rem;
  height: 1.375rem;
}

.eus__beispiel h4 {
  font-size: 0.9375rem;
  font-weight: 660;
  line-height: 1.3;
  hyphens: manual;
  overflow-wrap: break-word;
}

.eus__beispiel p {
  color: var(--tinte-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Lufthygiene jetzt als letzter Absatz im Abschnitt */
.eus__nachsatz {
  max-width: 44rem;
}

/* Achte Kachel: Einladung statt Lücke. Die ganze Kachel ist der Link. */
.eus__beispiel--einladung {
  padding: 0;
  background: var(--lime-hauch);
}

.eus__einladung {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  height: 100%;
  padding: clamp(1rem, 2vw, 1.25rem);
  color: var(--tinte);
  text-decoration: none;
  transition: background-color var(--dauer-farbe) ease;
}

.eus__einladung:focus-visible {
  outline-offset: -3px;
  border-radius: 0;
}

.eus__einladung .eus__zeichen {
  background: var(--lime);
  border-color: var(--lime-kante);
  color: var(--tinte);
  transition: transform var(--dauer-druck) var(--ease-out);
}

.eus__einladung-titel {
  font-size: 0.9375rem;
  font-weight: 660;
  line-height: 1.3;
}

.eus__einladung-satz {
  color: var(--tinte-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

.eus__einladung:active .eus__zeichen {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .eus__beispiel--einladung:hover {
    background: #e4ecbe;
  }

  .eus__einladung:hover .eus__einladung-aufruf {
    text-decoration: underline;
    text-decoration-color: var(--lime-kante);
    text-underline-offset: 0.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eus__einladung:active .eus__zeichen {
    transform: none;
  }
}

.eus__einladung-aufruf {
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--lime-text);
  font-size: 0.875rem;
  font-weight: 640;
}

.eus__einladung-aufruf span {
  display: inline-block;
  transition: transform var(--dauer-zustand) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .eus__einladung:hover .eus__einladung-aufruf span {
    transform: translateX(3px);
  }
}

/* „Weitere“ als breite Abschlusskachel über die volle Rasterbreite */
.eus__beispiel--einladung {
  grid-column: 1 / -1;
}

@media (min-width: 60rem) {
  .eus__einladung {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: center;
  }

  .eus__einladung .eus__zeichen {
    grid-row: 1 / span 2;
  }

  .eus__einladung-titel {
    grid-column: 2;
  }

  .eus__einladung-satz {
    grid-column: 2;
  }

  .eus__einladung-aufruf {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
}

/* ── Hallenplan (eigene Skizze, schräg gekippt) ─────────────────────── */
.halle {
  margin: 0;
}

.halle__buehne {
  --kipp: 54deg;
  --dreh: -22deg;
  perspective: 1800px;
  perspective-origin: 50% 20%;
}

.halle__flaeche {
  position: relative;
  width: min(70%, 21rem);
  margin: -4rem auto -4rem;
  aspect-ratio: 415 / 790;
  transform-style: preserve-3d;
  transform: rotateX(var(--kipp)) rotateZ(var(--dreh));
}

.halle__flaeche > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Beschriftungen stehen aufrecht über der gekippten Fläche; ein dunkler
   Grund hält sie auch dort lesbar, wo eine Linie darunter läuft. */
.auf {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.auf > span {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: rgb(11 18 32 / 0.88);
  transform-origin: 0 100%;
  transform: rotateZ(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))) var(--ver, translateX(0));
  color: var(--nacht-weich);
  font-size: 0.875rem;
  font-weight: 560;
  line-height: 1.25;
  white-space: nowrap;
}

.auf--mitte {
  --ver: translateX(-50%);
}

/* Pin leicht vor die gekippte Fläche heben: liegt er in derselben Ebene wie
   das SVG, flackert er je nach Grafikkarte (Z-Fighting). */
.pin {
  --ver: translateX(-50%) translateZ(3px);
}

.auf--mitte > span {
  text-align: center;
}

.auf--still > span {
  color: var(--nacht-still);
  font-weight: 500;
}

.auf--lila > span {
  color: #c9c1f2;
  font-weight: 640;
}

.auf--ziel > span {
  color: #ffffff;
  font-weight: 640;
}

.pin {
  left: 34.82%;
  top: 40.82%;
}

.pin > .pin__stand {
  display: grid;
  justify-items: center;
  padding: 0;
  background: none;
}

.pin__licht {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(163 189 13 / 0.7), rgb(163 189 13 / 0) 65%);
  transform: translateZ(1px);
  will-change: opacity;
}

.pin__kopf {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--lime);
  /* Nur ein heller Ring, kein weicher Schlagschatten: der wird in der
     3D-Fläche von manchen Browsern als dunkles Rechteck gezeichnet. */
  box-shadow: 0 0 0 6px rgb(163 189 13 / 0.2);
}

.pin__kopf b {
  rotate: 45deg;
  color: var(--tinte);
  font-size: 1.25rem;
  font-weight: 760;
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
}

.pin__fuss {
  height: 18px;
}

.pin__name {
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgb(11 18 32 / 0.85);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 640;
}

.halle__weg {
  margin-top: 1rem;
  max-width: 34rem;
  color: var(--nacht-weich);
  font-size: 1rem;
  line-height: 1.5;
}

.halle__weg strong {
  color: #ffffff;
  font-weight: 640;
}

@media (max-width: 40rem) {
  .halle__buehne {
    --kipp: 40deg;
    --dreh: -12deg;
  }

  .halle__flaeche {
    width: min(62%, 14rem);
    margin: -1.5rem auto -1rem;
  }

  .auf > span {
    font-size: 0.8125rem;
  }

  .auf--gross {
    display: none;
  }

  .pin__kopf {
    width: 52px;
    height: 52px;
  }
}

/* Der Pin leuchtet ruhig; bei reduzierter Bewegung steht das Licht. */
@media (prefers-reduced-motion: no-preference) {
  .pin__licht {
    animation: pin-licht 3.2s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin__licht {
    opacity: 0.85;
  }
}

/* Nur Deckkraft animieren, kein scale: Skalieren in der 3D-Ebene
   erzeugte bei manchen Browsern ein Flackern. */
@keyframes pin-licht {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.95;
  }
}

/* Die gekippte Fläche ragt räumlich über den Rand hinaus: seitlich kappen,
   damit kein waagerechtes Scrollen entsteht. */
.stand {
  overflow-x: clip;
}

/* Gemeinsamer Abschnitt für drei Module: drei Farbpunkte in der Kennzeile,
   darunter die Kurzbeschreibungen als Legende. */
.modul__name--drei > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.modul__name--drei > span + .modul__trenner + span {
  color: var(--tinte-2);
}

.modul__trenner {
  color: var(--tinte-3);
}

.dreier {
  display: grid;
  gap: 0.9rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--kante);
}

.dreier dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 640;
}

.dreier dd {
  margin: 0.2rem 0 0;
  color: var(--tinte-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Kopf der Modulübersicht: breit wie die Vorlage – Überschrift auf zwei
   Zeilen, Einleitung als lange Zeile, Modul-Pillen möglichst in einer Reihe. */
#module .abschnitt-kopf {
  max-width: none;
}
#module .abschnitt-kopf h2 {
  max-width: 26ch;
  text-wrap: balance;
}
#module .abschnitt-kopf > p {
  max-width: 62rem;
}
/* Ab breiten Fenstern alle sechs Pillen in einer Reihe. */
@media (min-width: 88rem) {
  #module .modul-index {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  #module .modul-index a {
    flex-wrap: nowrap;
    padding-inline: 0.8rem;
    white-space: nowrap;
  }
}

/* ── Kaltluft-Video im Nachtbild ────────────────────────────────────
   Standbild (Poster) als echtes Bild; das Video liegt darüber und wird
   erst sichtbar, wenn es wirklich läuft. Kein Layout-Sprung. */
.bild--video {
  position: relative;
}

.kaltluft__standbild,
.kaltluft__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kaltluft__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.bild--video.ist-video .kaltluft__video {
  opacity: 1;
}

.kaltluft__knopf {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background: rgb(11 18 32 / 0.72);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--dauer-farbe) ease, transform var(--dauer-druck) var(--ease-out);
}

.kaltluft__knopf:active {
  transform: scale(0.94);
}

/* Zweifarbiger Ring: Limette mit dunklem Saum – auf jedem Videobild ≥ 3:1 */
.kaltluft__knopf:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #0b1220, 0 0 0 7px #0b1220;
  border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
  .kaltluft__knopf:hover {
    background: rgb(11 18 32 / 0.9);
  }
}

.kaltluft__knopf .kaltluft__play,
.kaltluft__knopf[aria-pressed="true"] .kaltluft__pause {
  display: none;
}

.kaltluft__knopf[aria-pressed="true"] .kaltluft__play {
  display: block;
}

/* Gespiegelte Module (Bild rechts): Zustandsanzeige bündig mit der Bildunterschrift */
@media (min-width: 60rem) {
  .js .modul--gespiegelt .bildwechsel__zustand {
    padding-left: 0;
  }
}

/* Starkwind-Legende: acht Klassen als Farbfelder, Grenzen darunter.
   Scharf im HTML statt ins Video gebrannt. */
.wind-legende {
  display: grid;
  gap: 0.3rem;
  flex-basis: 100%;
  width: min(100%, 26rem);
}

.wind-legende__titel {
  color: var(--tinte-2);
  font-size: 0.8125rem;
}

.wind-legende__felder {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.wind-legende__felder li {
  height: 0.75rem;
  background: var(--f);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.18);
}

.wind-legende__felder li:first-child {
  border-radius: 3px 0 0 3px;
}

.wind-legende__felder li:last-child {
  border-radius: 0 3px 3px 0;
}

/* Grenzen genau an den Kanten der Felder: neun Werte über acht Felder */
.wind-legende__grenzen {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) 0;
  color: var(--tinte-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.wind-legende__grenzen span {
  justify-self: start;
  transform: translateX(-50%);
  white-space: nowrap;
}

.wind-legende__grenzen span:first-child {
  transform: none;
}

.wind-legende__grenzen span:last-child {
  transform: translateX(-100%);
}

/* Legende als Täfelchen im Bildrahmen unten links (nicht über dem
   Pause-Knopf rechts). Deckendes, mattes Dunkelglas: Text ≥ 4,5:1 über
   jeder Stelle des Videos. */
.bild--video .wind-legende,
.bild .wind-legende.klassen {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  width: min(18.5rem, calc(100% - 5rem));
  flex-basis: auto;
  padding: 0.55rem 0.7rem 0.45rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 10px;
  background: rgb(11 18 32 / 0.84);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.6);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bild--video .wind-legende {
    background: rgb(11 18 32 / 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.bild--video .wind-legende__titel {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
}

.bild--video .wind-legende__felder li {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}

.bild--video .wind-legende__grenzen {
  color: #d3dce8;
}

/* Rahmen läuft links aus dem Fenster (randabfallend): Täfelchen auf die
   Inhaltskante ziehen, damit es im sichtbaren Teil steht. */
@media (min-width: 60rem) {
  .modul:not(.modul--gespiegelt) .bild--video .wind-legende {
    left: max(0.75rem, calc(var(--aussen) - 0.5rem));
  }
}

@media (max-width: 37.49rem) {
  .bild--video .wind-legende {
    left: 0.5rem;
    bottom: 0.5rem;
    width: min(13.5rem, calc(100% - 4rem));
    padding: 0.4rem 0.5rem 0.35rem;
  }

  .bild--video .wind-legende__titel {
    font-size: 0.6875rem;
  }

  .bild--video .wind-legende__felder li {
    height: 0.5rem;
  }

  .bild--video .wind-legende__grenzen {
    font-size: 0.5625rem;
  }
}

/* Im Täfelchen: Grenzwerte alle mittig unter ihrer Kante; Innenabstand
   links und rechts, damit 0 und der Endwert Platz haben. */
.bild--video .wind-legende__felder,
.bild--video .wind-legende__grenzen {
  margin-inline: 0.6rem;
}

.bild--video .wind-legende__grenzen span,
.bild--video .wind-legende__grenzen span:first-child,
.bild--video .wind-legende__grenzen span:last-child {
  transform: translateX(-50%);
}

/* PET-Legende: diskrete Klassen als Liste im Täfelchen */
.bild .wind-legende.klassen {
  width: auto;
  max-width: calc(100% - 1.5rem);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bild .wind-legende.klassen {
    background: rgb(11 18 32 / 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.bild .wind-legende.klassen {
  padding: 0.55rem 0.75rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 10px;
  background: rgb(11 18 32 / 0.84);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.6);
}

.klassen .wind-legende__titel {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
}

.klassen__liste {
  display: grid;
  gap: 0.2rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  color: #d3dce8;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.klassen__liste li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.klassen__feld {
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 2px;
  background: var(--f);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}

@media (min-width: 60rem) {
  .modul:not(.modul--gespiegelt) .bild .wind-legende.klassen {
    left: max(0.75rem, calc(var(--aussen) - 0.5rem));
  }
}

@media (max-width: 37.49rem) {
  .bild .wind-legende.klassen {
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.4rem 0.5rem;
  }

  .klassen__liste {
    font-size: 0.625rem;
    gap: 0.1rem;
  }

  .klassen__feld {
    width: 0.6rem;
    height: 0.6rem;
  }
}

/* Schmal: Die PET-Legende würde die eingefärbte Fläche verdecken – dort
   steht sie unter dem Bild, das Bild zeigt seinen ganzen Ausschnitt. */
@media (max-width: 37.49rem) {
  #modul-klimascanner .bild {
    aspect-ratio: auto;
    overflow: hidden;
    background: none;
    box-shadow: none;
  }

  #modul-klimascanner .bild img {
    height: auto;
  }

  .bild .wind-legende.klassen {
    position: static;
    max-width: none;
    margin: 0.6rem var(--rand) 0;
  }

  .klassen__liste {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
    font-size: 0.6875rem;
  }

  .klassen__liste li {
    white-space: normal;
  }
}

/* Partnerlogos verlinkt: ganze Fläche klickbar, ruhiger Fokus und Hover. */
.koop__link {
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: opacity var(--dauer-farbe, 180ms) ease;
}
.koop__link:focus-visible {
  outline: 2px solid var(--fokus, #627108);
  outline-offset: 4px;
}
@media (hover: hover) {
  .koop__link:hover {
    opacity: 0.75;
  }
}

/* Nordpfeil in den Klimascanner-Ansichten (Kamera blickt nach Süden,
   Norden liegt unten). Farben stehen als Attribute im SVG. */
.nordpfeil {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: 44px;
  pointer-events: none;
}
.nordpfeil svg {
  display: block;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35));
}
.nordpfeil__n {
  margin-top: -0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #0b1220;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}
@media (max-width: 37.5rem) {
  .nordpfeil { transform: scale(0.85); transform-origin: top right; }
}

/* Nordpfeil mit Norden oben: „N“ über dem Pfeil */
.nordpfeil--oben .nordpfeil__n {
  order: -1;
  margin: 0 0 -0.35rem;
  position: relative;
  z-index: 1;
}

.klassen .wind-legende__titel {
  display: block;
  max-width: 15rem;
  line-height: 1.3;
}