/* kommunalraum.de – eine Datei, keine externen Abrufe.
   Gestaltung (Klaas, 06.10.2026): verlässlich und amtlich, aber modern – wir
   modernisieren Verwaltung. Weiß und ein heller Blauton, Dunkelblau für Knöpfe,
   Grün als Akzent, die Hausschrift des Studios (Source Sans 3), runde Ecken,
   Tiefe nur für das, was die Software zeigt. Keine Leuchteffekte, keine
   gekippten Kacheln, keine Versal-Dachzeilen. */

/* Hausschrift wie in den Beiträgen des Studios – selbst gehostet (SIL OFL, assets/schrift/OFL.txt) */
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(schrift/source-sans-3-latin.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(schrift/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }

:root {
  --text: #13233a;
  --text-leise: #4a5a6e;
  --linie: #d9dee5;
  --flaeche: #f4f7fb;
  --himmel: #eaf1f9;
  --weiss: #ffffff;
  --blau: #1d3a5f;
  --blau-dunkel: #142b47;
  --gruen: #2d6a3a;
  --gruen-blass: #e7f0e9;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  --breite: 1160px;
  --rand: clamp(16px, 4vw, 40px);
  --radius: 10px;
}

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--sans); font-size: 18px; line-height: 1.6; color: var(--text); background: var(--weiss); overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--gruen); text-underline-offset: 3px; }
a:hover { color: #1f4a28; }
:focus-visible { outline: 3px solid #3b82c4; outline-offset: 2px; border-radius: 2px; }
.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; }
.sprung {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 200;
  background: var(--blau); color: #fff; padding: 10px 20px; border-radius: 0 0 6px 6px; font-weight: 600; text-decoration: none;
}
.sprung:focus-visible { transform: translate(-50%, 0); }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ── Kopf ───────────────────────────────────────────────── */
.kopf { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 28px; height: 72px; }
.kopf { top: env(safe-area-inset-top, 0px); }
.marke { font-family: var(--sans); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--text); text-decoration: none; white-space: nowrap; }
.marke span { color: var(--gruen); }
.marke:hover { color: var(--text); }
.kopf nav { display: flex; gap: 24px; margin-left: auto; }
.kopf nav a { color: var(--text); text-decoration: none; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.kopf nav a:hover { color: var(--gruen); text-decoration: underline; }
.kopf .anmelden { color: var(--text-leise); font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.kopf .anmelden:hover { color: var(--text); text-decoration: underline; }
.kopf .knopf { padding: 9px 16px; font-size: 0.93rem; }
@media (max-width: 1040px) { .kopf nav { display: none; } .kopf .anmelden { margin-left: auto; } }
@media (max-width: 480px) { .kopf .anmelden { margin-left: auto; } .kopf .knopf { display: none; } }
.kopf .knopf { white-space: nowrap; }

/* ── Knöpfe ─────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: 8px; background: var(--blau); color: #fff;
  font: 600 1rem var(--sans); text-decoration: none; border: 0; cursor: pointer;
  padding: 13px 22px; border-radius: 8px;
}
.knopf:hover { background: var(--blau-dunkel); color: #fff; }
.knopf.zweit { background: transparent; color: var(--blau); box-shadow: inset 0 0 0 1.5px var(--blau); }
.knopf.zweit:hover { background: var(--flaeche); color: var(--blau-dunkel); }
.textlink { color: var(--blau); font-weight: 600; }
.textlink:hover { color: var(--blau-dunkel); }

/* ── Abschnitte ─────────────────────────────────────────── */
section { padding: clamp(56px, 7vw, 88px) 0; }
.grau { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
h1, h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 3.7vw, 2.85rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); max-width: 28ch; }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
.etikett-klein { display: block; font-size: 1rem; font-weight: 600; color: var(--gruen); margin-bottom: 10px; }
.vorspann { font-size: 1.1rem; color: var(--text-leise); max-width: 64ch; margin-top: 14px; }
.zeile-klein { font-size: 0.95rem; color: var(--text-leise); }

/* ── Erster Bildschirm ──────────────────────────────────── */
.hero { background: var(--himmel); padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); overflow: hidden; }
.hero .innen { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 920px) { .hero .innen { grid-template-columns: 1fr; } }
.hero .zeile-klein { margin-bottom: 14px; font-weight: 600; color: var(--gruen); font-size: 1rem; }
.hero .vorspann { font-size: 1.2rem; margin-top: 22px; color: #3a4a5e; }
.hero .knoepfe { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 32px; }
.hero-bild { position: relative; padding: 0 6% 9% 0; }
.browser { background: var(--weiss); border-radius: 12px; overflow: hidden; border: 1px solid #cfd8e3;
  box-shadow: 0 30px 60px -28px rgba(19, 35, 58, 0.45), 0 10px 20px -12px rgba(19, 35, 58, 0.18); }
.browser .leiste { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f1f4f8; border-bottom: 1px solid #dfe5ec; }
.browser .leiste i { width: 9px; height: 9px; border-radius: 50%; background: #c9d2dd; }
.browser .leiste b { margin-left: 8px; font: 500 0.75rem var(--sans); color: var(--text-leise); background: var(--weiss); border: 1px solid #dfe5ec; border-radius: 6px; padding: 1px 10px; }
.handy { position: absolute; right: 0; bottom: 0; width: 31%; border-radius: 26px; background: #0f1d2e; padding: 7px;
  box-shadow: 0 28px 50px -22px rgba(19, 35, 58, 0.55); }
.handy img { border-radius: 20px; }
@media (max-width: 920px) { .hero-bild { max-width: 640px; } }

/* ── Auf einen Blick ────────────────────────────────────── */
.blick { padding: 36px 0; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.blick h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; margin-bottom: 18px; }
.blick ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 18px 24px; }
.blick li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 1rem; line-height: 1.45; }
.ikon { width: 40px; height: 40px; border-radius: 10px; background: var(--himmel); display: grid; place-items: center; }
.ikon svg { width: 22px; height: 22px; fill: none; stroke: var(--blau); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.haken li { position: relative; padding-left: 28px; }
.haken li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen); font-weight: 700; }

/* ── Zwei Säulen ────────────────────────────────────────── */
.saeulen { display: grid; gap: clamp(48px, 6vw, 72px); margin-top: clamp(32px, 4vw, 48px); }
.saeule { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 760px) { .saeule { grid-template-columns: 1fr; } }
.saeule .animation { grid-column: 1 / -1; position: relative; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; background: #fff; }
.saeule video { width: 100%; aspect-ratio: 16 / 9; }
.saeule .text { grid-column: 1; }
.saeule .haken { grid-column: 2; margin-top: 34px; }
@media (max-width: 760px) { .saeule .text, .saeule .haken { grid-column: 1; } .saeule .haken { margin-top: 16px; } }
.saeule .nummer { font-size: 0.95rem; font-weight: 600; color: var(--gruen); }
.saeule h3 { margin: 4px 0 10px; }
.saeule p { color: var(--text-leise); max-width: 56ch; }
.haken { list-style: none; display: grid; gap: 8px; }
.film-knopf {
  position: absolute; right: 12px; bottom: 12px; font: 600 0.8rem var(--sans); color: var(--text);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--linie); border-radius: var(--radius); padding: 5px 12px; cursor: pointer;
}
.film-knopf:hover { border-color: var(--text); }
.weiter-hinweis { margin-top: clamp(32px, 4vw, 48px); font-size: 1.02rem; }

/* Beispielwoche: Kopfkasten wie auf Blatt 2 der Briefe, darunter die erste Folie jedes Beitrags */
.woche-kopf { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-top: 32px; padding: 16px 20px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.woche-kopf img { width: 44px; height: auto; flex: none; }
.woche-haus { flex: 1 1 200px; min-width: 0; }
.woche-haus b { display: block; font-size: 1.1rem; }
.woche-haus span { font-size: 0.9rem; color: var(--text-leise); }
.woche-zahlen { display: flex; gap: 28px; margin: 0; }
.woche-zahlen div { display: flex; flex-direction: column-reverse; align-items: flex-end; }
.woche-zahlen dd { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--gruen); line-height: 1.1; font-variant-numeric: tabular-nums; }
.woche-zahlen dt { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leise); }
.woche-karussell { margin-top: 24px; }
.woche-spur { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 12px; scrollbar-width: thin; }
.woche-spur:focus-visible { outline-offset: 4px; }
.beitrag { flex: 0 0 min(300px, 72%); margin: 0; scroll-snap-align: start; min-width: 0; }
.folien { cursor: pointer; }
.folien img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 4px; border: 1px solid var(--linie); background: var(--flaeche); }
.folien img[hidden] { display: none; }
.folien-leiste { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; min-height: 32px; }
.folien-leiste[hidden], .karussell-steuerung[hidden] { display: none; }
.folien-leiste button, .karussell-steuerung button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linie); background: var(--weiss); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.folien-leiste button:hover, .karussell-steuerung button:hover:not(:disabled) { border-color: var(--text); }
.karussell-steuerung button:disabled { opacity: 0.35; cursor: default; }
.folien-punkte { display: flex; gap: 6px; }
.folien-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--linie); }
.folien-punkte i.an { background: var(--blau); }
.beitrag figcaption { margin-top: 6px; font-size: 0.85rem; line-height: 1.35; color: var(--text-leise); }
.beitrag figcaption b { display: block; color: var(--text); font-weight: 600; }
.folie-stand { display: block; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.karussell-steuerung { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.karussell-zaehler { min-width: 9ch; text-align: center; font-size: 0.9rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .woche-spur { gap: 12px; }
  .woche-zahlen { gap: 18px; width: 100%; justify-content: space-between; }
  .woche-zahlen div { align-items: flex-start; }
}

/* Ablauf als Leiste unter den Säulen */
.zwischen { margin-top: clamp(40px, 5vw, 64px); font-size: 1.25rem; }
.zwischen + .ablauf { margin-top: 16px; }
/* Sprungziele nicht unter dem festen Kopf verstecken */
section[id], .ablauf-block { scroll-margin-top: 76px; }
/* Handy: der Editor ist dort nicht lesbar – der fertige Beitrag allein */
@media (max-width: 640px) {
  .hero-bild { padding: 0; max-width: 280px; margin: 8px auto 0; }
  .hero-bild .browser { display: none; }
  .hero-bild .handy { position: static; width: 100%; }
}

/* ── Ablauf ─────────────────────────────────────────────── */
.ablauf { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-top: 32px; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 20px 22px; }
.ablauf li::before {
  content: counter(schritt); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--blau); color: #fff; font-weight: 700; font-size: 0.95rem;
}
.ablauf li:last-child::before { background: var(--gruen); }
.ablauf h3 { font-size: 1.1rem; margin: 12px 0 6px; }
.ablauf p { font-size: 0.95rem; color: var(--text-leise); }

/* ── Nachweis, Bildreihen ───────────────────────────────── */
.nachweis { display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 0.75fr); gap: clamp(16px, 3vw, 36px); align-items: center; margin-top: 36px; }
.nachweis .blatt-bild { border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
.nachweis .pfeil { font-size: 2.2rem; color: var(--gruen); line-height: 1; }
.nachweis .kachel img { border-radius: 8px; box-shadow: 0 18px 36px -20px rgba(19, 35, 58, 0.45); }
.nachweis figcaption { font-size: 0.9rem; color: var(--text-leise); margin-top: 10px; }
@media (max-width: 760px) { .nachweis { grid-template-columns: 1fr; } .nachweis .pfeil { transform: rotate(90deg); justify-self: center; } .nachweis .kachel { max-width: 300px; } }
.streifen, .fassungen { display: grid; gap: 12px; margin-top: 36px; align-items: start; }
.streifen { grid-template-columns: repeat(4, minmax(0, 0.8fr)) minmax(0, 1.5fr); }
.fassungen { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.778fr); }
.streifen img, .fassungen img { width: 100%; border-radius: 3px; border: 1px solid var(--linie); }
@media (max-width: 760px) {
  .streifen, .fassungen { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .streifen img, .fassungen img { flex: 0 0 42%; width: 42%; scroll-snap-align: start; }
  .streifen img.quer, .fassungen img.quer { flex-basis: 78%; width: 78%; }
}
.kanaele.drei { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.bildtext { margin-top: 12px; font-size: 0.9rem; color: var(--text-leise); }

/* ── Kanäle ─────────────────────────────────────────────── */
.kanaele { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.kanal { padding: 20px 22px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--weiss); }
.kanal h3 { font-size: 1.08rem; margin-bottom: 6px; }
.kanal p { font-size: 0.95rem; color: var(--text-leise); }

/* ── Was sich ändert ────────────────────────────────────── */
.vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 32px; border-top: 2px solid var(--text); }
@media (max-width: 760px) { .vergleich { grid-template-columns: 1fr; } }
.vergleich > div { padding: 22px 28px 24px 0; border-bottom: 1px solid var(--linie); }
.vergleich > div + div { padding-left: 28px; border-left: 1px solid var(--linie); }
@media (max-width: 760px) { .vergleich > div + div { padding-left: 0; border-left: 0; } }
.vergleich .titel { font-size: 0.95rem; font-weight: 700; color: var(--text-leise); margin-bottom: 10px; }
.vergleich > div + div .titel { color: var(--gruen); }
.vergleich ul { list-style: none; display: grid; gap: 8px; }
.vergleich li { padding-left: 18px; position: relative; color: var(--text-leise); }
.vergleich li::before { content: "–"; position: absolute; left: 0; }
.vergleich p.gross { font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.vergleich p.klein { margin-top: 12px; color: var(--text-leise); }
.absicherung { margin-top: 26px; max-width: 70ch; color: var(--text-leise); }
.absicherung strong { color: var(--text); }

/* ── KI ─────────────────────────────────────────────────── */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 760px) { .zwei { grid-template-columns: 1fr; } }
.entscheidung { border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px 26px; background: var(--weiss); }
.entscheidung h3 { margin-bottom: 8px; }
.entscheidung h3 small { font-size: 1rem; color: var(--gruen); margin-right: 8px; }
.entscheidung p { color: var(--text-leise); }
.kette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .kette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kette div { padding: 14px; text-align: center; background: var(--weiss); border-right: 1px solid var(--linie); }
.kette div:last-child { border-right: 0; }
.kette b { display: block; font-weight: 600; }
.kette span { font-size: 0.85rem; color: var(--text-leise); }
.kette .ki { background: var(--gruen-blass); }
.kette .ki span { color: var(--gruen); font-weight: 600; }
.regel { margin-top: 26px; max-width: 70ch; color: var(--text-leise); }

/* ── Arbeitsteilung ─────────────────────────────────────── */
.teilung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 32px; }
@media (max-width: 760px) { .teilung { grid-template-columns: 1fr; gap: 24px; } }
.teilung h3 { font-size: 1rem; color: var(--gruen); margin-bottom: 6px; }
.teilung > div + div h3 { color: var(--text-leise); }
.teilung.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.teilung.drei > div + div h3 { color: var(--gruen); }
.teilung.drei > div:last-child h3 { color: var(--text-leise); }
@media (max-width: 900px) { .teilung.drei { grid-template-columns: 1fr; gap: 24px; } }
.ablauf.start { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.teilung ul { list-style: none; border-top: 1px solid var(--linie); }
.teilung li { padding: 10px 0; border-bottom: 1px solid var(--linie); }

/* ── Betrieb ────────────────────────────────────────────── */
.betrieb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); margin-top: 28px; max-width: 880px; background: var(--weiss); }
.betrieb img { width: 230px; }
@media (max-width: 640px) { .betrieb { grid-template-columns: 1fr; } .betrieb img { width: 200px; } }
.betrieb h3 { margin-bottom: 6px; }
.betrieb p { color: var(--text-leise); }
.betrieb small { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--text-leise); }

/* ── Recht ──────────────────────────────────────────────── */
.recht { margin-top: 28px; border-top: 1px solid var(--linie); }
.recht div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
@media (max-width: 640px) { .recht div { grid-template-columns: 1fr; gap: 4px; } }
.recht dt { font-weight: 700; }
.recht dd { color: var(--text-leise); }

/* ── Fragen ─────────────────────────────────────────────── */
.fragen { margin-top: 28px; max-width: 860px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; position: relative; font-weight: 600; font-size: 1.05rem; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 1.5rem var(--sans); color: var(--blau); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding: 0 0 18px; color: var(--text-leise); max-width: 72ch; }

/* ── Person ─────────────────────────────────────────────── */
.person { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 28px; }
@media (max-width: 720px) { .person { grid-template-columns: 1fr; } .person img { max-width: 220px; } }
.person img { border-radius: var(--radius); }
.person .name { margin-top: 10px; font-weight: 700; }
.person .rolle { font-size: 0.9rem; color: var(--text-leise); }
.person .text { max-width: 64ch; }
.person .text p + p { margin-top: 12px; }

/* ── Kontakt ────────────────────────────────────────────── */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); }
@media (max-width: 880px) { .kontakt-raster { grid-template-columns: 1fr; } }
.direkt { margin-top: 22px; display: grid; gap: 4px; font-size: 1.08rem; }
.direkt a { color: var(--text); text-decoration: none; }
.direkt a:hover { text-decoration: underline; }
form.anfrage { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; }
form.anfrage label { display: grid; gap: 6px; font-size: 0.92rem; font-weight: 600; }
form.anfrage input, form.anfrage textarea {
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--text); background: var(--weiss);
  border: 1px solid #b8c2cf; border-radius: var(--radius); padding: 11px 13px; width: 100%;
}
form.anfrage textarea { min-height: 96px; resize: vertical; }
form.anfrage input:focus, form.anfrage textarea:focus { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
form.anfrage .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { form.anfrage .zeile { grid-template-columns: 1fr; } }
form.anfrage .hinweis { font-size: 0.85rem; color: var(--text-leise); }
form.anfrage .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.danke { display: none; background: var(--weiss); border: 1px solid var(--gruen); border-radius: var(--radius); padding: 28px; }
.danke h3 { margin-bottom: 6px; }
.fehler { color: #a3261c; font-size: 0.92rem; }

/* ── Fuß ────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--linie); padding: 26px 0; font-size: 0.9rem; color: var(--text-leise); }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss a { color: var(--text-leise); }
.fuss a:hover { color: var(--text); }
.marke.klein { font-size: 1.1rem; }

/* ── Live-Seite: Aufnahmen mit Schrittliste ─────────────── */
.film { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(40px, 6vw, 64px); }
.film.gespiegelt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.film.gespiegelt .fenster { order: 2; }
@media (max-width: 880px) { .film, .film.gespiegelt { grid-template-columns: 1fr; } .film.gespiegelt .fenster { order: 0; } }
.fenster { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.fenster .leiste { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.fenster .leiste i { width: 10px; height: 10px; border-radius: 50%; background: #c9d1da; }
.fenster .leiste b { margin-left: 8px; font: 500 0.78rem var(--mono); color: var(--text-leise); background: var(--weiss); border: 1px solid var(--linie); padding: 2px 10px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenster .film-knopf { position: static; margin-left: auto; }
.fenster video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--flaeche); }
.film .etikett { display: inline-block; font-size: 0.95rem; font-weight: 600; color: var(--gruen); margin-bottom: 6px; }
.film h3 { font-size: 1.6rem; margin-bottom: 16px; }
.schritte { list-style: none; counter-reset: schritt; border-top: 1px solid var(--linie); }
.schritte li { counter-increment: schritt; position: relative; padding: 10px 0 10px 44px; border-bottom: 1px solid var(--linie); color: var(--text-leise); cursor: pointer; }
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.85rem var(--sans); color: var(--text-leise); box-shadow: inset 0 0 0 1.5px var(--linie);
}
.schritte li.jetzt { color: var(--text); }
.schritte li.jetzt::before { background: var(--blau); color: #fff; box-shadow: none; }
.film .fussnote { margin-top: 12px; font-size: 0.85rem; color: var(--text-leise); }
.live { padding-top: clamp(40px, 6vw, 64px); }
.zurueck { display: inline-block; margin-bottom: 22px; text-decoration: none; font-weight: 600; color: var(--blau); }
.live-schluss .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ── Rechtsseiten ───────────────────────────────────────── */
.blatt { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--rand); }
.blatt h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 24px; }
.blatt h2 { font-size: 1.25rem; max-width: none; margin: 28px 0 8px; }
.blatt p, .blatt li { color: #33424f; }
.blatt p + p { margin-top: 10px; }
.blatt ul { padding-left: 1.2em; }
.blatt .stand { margin-top: 32px; font-size: 0.88rem; color: var(--text-leise); }

figcaption mark { background: #ffe066; color: inherit; padding: 0 3px; border-radius: 2px; }