/* Kündigungskurier - Marke der City Trans (2.30)
   Bewusstes Gegenstück zum Kündigungsboten: der tritt technisch-modern auf
   (Manrope, Blauviolett, dunkles Marineblau). Diese Seite sieht aus wie ein
   Schriftsatz - Aktenpapier, Baskerville, Siegelrot, Haarlinien statt Kacheln,
   Zahlen in Messing. Wer das eine nicht mag, mag vielleicht das andere.
   Schriften liegen lokal (schrift/), es geht kein Aufruf zu Google hinaus. */

@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/libre-baskerville-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("schrift/libre-baskerville-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/libre-baskerville-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schrift/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schrift/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --papier: #FBFAF7;
  --flaeche: #F1EDE4;
  --flaeche-tief: #E8E2D5;
  --tinte: #1C1B18;
  --tinte-leise: #5C574E;
  --kante: #DED8CB;
  --kante-fein: #EAE5DA;
  --siegel: #7B2231;
  --siegel-tief: #5E1722;
  --messing: #8A6B2F;
  --dunkel: #201C19;
  --dunkel-hoch: #2E2823;

  --logo-rot: #DB170A;          /* das Rot des Markenzeichens - sparsam, nur als Signal */

  --display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --breit: 1300px;              /* 2.35: der Bildschirm darf genutzt werden */
  --lesebreite: 68ch;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--display); font-size: 17px; line-height: 1.75;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--siegel); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--siegel-tief); }
.bahn { max-width: var(--breit); margin: 0 auto; padding: 0 26px; }
.ueberspringen { position: absolute; left: -9999px; }
.ueberspringen:focus { left: 12px; top: 12px; background: var(--papier); padding: 10px 16px;
  border: 2px solid var(--siegel); z-index: 10; }

/* ---------- Kopfleiste ---------- */
.kopf { background: var(--papier); border-bottom: 1px solid var(--kante); position: sticky; top: 0; z-index: 5; }
.kopf-innen { display: flex; align-items: center; gap: 28px; min-height: 74px; }
.wortmarke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); }
.wortmarke span { font-family: var(--display); font-size: 19px; font-weight: 400; letter-spacing: -.01em; }
.monogramm { display: block; width: 34px; height: auto; }
.wortmarke b { font-weight: 700; }
.kopf nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.kopf nav a { font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--tinte-leise);
  text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.kopf nav a:hover { color: var(--tinte); }
.kopf nav a.an { color: var(--tinte); border-bottom-color: var(--siegel); }
@media (max-width: 980px) {
  .kopf-innen { flex-wrap: wrap; gap: 12px 20px; padding-top: 12px; padding-bottom: 12px; }
  .kopf nav { order: 3; width: 100%; margin-left: 0; gap: 16px; }
  .kopf { position: static; }
}

/* ---------- Knöpfe ---------- */
.knopf { display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 12px 22px; text-decoration: none; border: 1px solid transparent; }
.knopf.siegel { background: var(--siegel); color: #fff; }
.knopf.siegel:hover { background: var(--siegel-tief); color: #fff; }
.knopf.leise { background: transparent; color: var(--tinte); border-color: var(--kante); }
.knopf.leise:hover { border-color: var(--tinte); color: var(--tinte); }
.knopf.gross { font-size: 16px; padding: 15px 30px; }
.knopf.klein-knopf { padding: 9px 16px; font-size: 14px; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Auf dunklem Grund muss der leise Knopf hell sein - sonst steht schwarze
   Schrift auf fast schwarzem Grund und der Knopf ist unsichtbar. */
.aufmacher .knopf.leise, .schluss .knopf.leise { color: #F3EFE8; border-color: rgba(255,255,255,.38); }
.aufmacher .knopf.leise:hover, .schluss .knopf.leise:hover { border-color: #fff; color: #fff; }

/* ---------- Aufmacher ---------- */
.aufmacher { background: var(--dunkel); color: #F3EFE8; padding: 64px 0 56px; }
.marke-label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #B9AE99; margin: 0 0 22px; }
.aufmacher h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 18px; max-width: 18ch; text-wrap: balance; }
.aufmacher h1 em { font-style: italic; color: #E4B7B7; }
.vorspann { font-size: 18.5px; line-height: 1.6; color: #D8D1C4; max-width: 56ch; margin: 0; }
.aufmacher .knopfzeile { margin-top: 30px; }

/* Die drei Feststellungen unter dem Aufmacher */
.fakten { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.fakten li { padding-right: 28px; }
.fakten strong { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; color: #fff; }
.fakten span { display: block; font-family: var(--sans); font-size: 14px; color: #ADA391; margin-top: 3px; }
@media (max-width: 760px) { .fakten { grid-template-columns: 1fr; gap: 18px; } .fakten li { padding-right: 0; } }

/* ---------- Blöcke ---------- */
.block { padding: 64px 0; }
.block.hell { background: var(--flaeche); }
.abschnitt { font-size: clamp(23px, 2.8vw, 30px); font-weight: 700; letter-spacing: -.012em;
  margin: 0 0 12px; max-width: 24ch; text-wrap: balance; }
.abschnitt-vor { font-size: 17.5px; color: var(--tinte-leise); max-width: var(--lesebreite); margin: 0 0 32px; }
.block p { max-width: var(--lesebreite); }

/* Nummerierte Schrittfolge - der Ablauf ist wirklich eine Reihenfolge.
   2.35, FEHLER BEHOBEN: Das Raster hatte zwei Spalten, aber drei Kinder
   (die Nummer aus ::before, die Überschrift und der Absatz). Der Absatz
   rutschte damit in die 58 Pixel schmale Nummernspalte - der Text lief ein
   Wort pro Zeile senkrecht herunter. Jetzt stehen Überschrift und Absatz
   ausdrücklich in der zweiten Spalte. */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 58px minmax(0, 1fr);
  gap: 0 22px; padding: 22px 0; border-top: 1px solid var(--kante); align-items: start; }
.schritte li:last-child { border-bottom: 1px solid var(--kante); }
.schritte li::before { content: counter(schritt, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--messing);
  letter-spacing: .06em; padding-top: 3px; }
.schritte h3 { grid-column: 2; font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0 0 5px; }
.schritte p { grid-column: 2; margin: 0; color: var(--tinte-leise); font-size: 16.5px; max-width: 62ch; }

/* Zwei Spalten mit Haarlinie */
.raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.raster2 > div { padding: 22px 0; border-top: 1px solid var(--kante); }
.raster2 h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.raster2 p { margin: 0; color: var(--tinte-leise); font-size: 16.5px; }
@media (max-width: 820px) { .raster2 { grid-template-columns: 1fr; gap: 0; } }

/* Karten für die beiden Zielgruppen */
.tore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tor { display: block; background: var(--papier); border: 1px solid var(--kante); padding: 30px 30px 26px;
  text-decoration: none; color: var(--tinte); }
.tor { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.tor:hover { border-color: var(--siegel); color: var(--tinte); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(28,27,24,.07); }
@media (prefers-reduced-motion: reduce) { .tor { transition: none; } .tor:hover { transform: none; } }
.tor h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.tor p { margin: 0 0 16px; color: var(--tinte-leise); font-size: 16.5px; }
.tor .weiter { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--siegel); }
@media (max-width: 760px) { .tore { grid-template-columns: 1fr; } }

/* Vergleichstabelle der Zustellwege */
.tabellenlauf { overflow-x: auto; }
.vergleich { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px;
  min-width: 640px; }
.vergleich th, .vergleich td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--kante);
  vertical-align: top; }
.vergleich thead th { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise); border-bottom: 1.5px solid var(--tinte); }
.vergleich tbody th { font-weight: 600; width: 32%; }
.vergleich tr.wir { background: var(--flaeche); }
.vergleich tr.wir th { color: var(--siegel); }
.ja::before { content: "✓ "; color: var(--siegel); font-weight: 700; }
.nein::before { content: "– "; color: var(--tinte-leise); }

/* Zitatkasten für Rechtsprechung */
.rechtsatz { border-left: 3px solid var(--siegel); background: var(--flaeche); padding: 22px 26px;
  margin: 30px 0; max-width: var(--lesebreite); }
.rechtsatz p { margin: 0 0 8px; font-size: 17px; }
.rechtsatz p:last-child { margin-bottom: 0; }
.rechtsatz .quelle { font-family: var(--sans); font-size: 13.5px; color: var(--tinte-leise); }

/* Fragen */
.fragen details { border-top: 1px solid var(--kante); padding: 16px 0; }
.fragen details:last-of-type { border-bottom: 1px solid var(--kante); }
.fragen summary { font-family: var(--display); font-size: 17.5px; font-weight: 700; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-family: var(--sans); color: var(--siegel); font-weight: 600;
  font-size: 20px; line-height: 1; }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { margin: 12px 0 0; max-width: var(--lesebreite); color: var(--tinte-leise); }

/* Protokoll-Nachbau */
.protokoll { border: 1px solid var(--kante); background: var(--papier); padding: 0; max-width: 720px; }
.protokoll-kopf { border-bottom: 1.5px solid var(--tinte); padding: 20px 26px; display: flex;
  justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.protokoll-kopf strong { font-size: 18px; }
.protokoll-kopf span { font-family: var(--sans); font-size: 13px; color: var(--tinte-leise); }
.protokoll dl { margin: 0; }
.protokoll dl > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px;
  padding: 12px 26px; border-bottom: 1px solid var(--kante-fein); }
.protokoll dt { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinte-leise); }
.protokoll dd { margin: 0; font-size: 16px; }
.protokoll-fuss { padding: 18px 26px; font-family: var(--sans); font-size: 13.5px; color: var(--tinte-leise); }
@media (max-width: 620px) { .protokoll dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Formular ---------- */
.formular { max-width: 720px; }
.feld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.feld > span { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinte-leise); }
.feld input, .feld select, .feld textarea { font-family: var(--sans); font-size: 16px; padding: 11px 12px;
  border: 1px solid var(--kante); background: #fff; color: var(--tinte); width: 100%; }
.feld textarea { font-family: var(--display); font-size: 16.5px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--siegel); outline-offset: -1px; }
.feld .hinweis { font-family: var(--sans); font-size: 13px; color: var(--tinte-leise);
  text-transform: none; letter-spacing: 0; font-weight: 400; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .paar { grid-template-columns: 1fr; } }
.haken { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; margin: 6px 0 0; }
.haken input { margin-top: 6px; flex: none; }
.formular-fuss { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.meldung { border-left: 3px solid var(--siegel); background: var(--flaeche); padding: 14px 18px;
  font-family: var(--sans); font-size: 15px; margin: 0 0 24px; max-width: 720px; }
.klein { font-family: var(--sans); font-size: 14px; color: var(--tinte-leise); }

/* ---------- Textseiten und Rechtstexte ---------- */
.textseite { padding: 54px 0 70px; max-width: 860px; }
.textseite h1 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; margin: 0 0 6px; }
.textseite .stand { font-family: var(--sans); font-size: 14px; color: var(--tinte-leise); margin: 0 0 34px; }
.textseite h2 { font-size: 20px; font-weight: 700; margin: 38px 0 10px; padding-top: 16px;
  border-top: 1px solid var(--kante); }
.textseite h3 { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinte-leise); margin: 28px 0 8px; }
.textseite p { margin: 0 0 14px; max-width: var(--lesebreite); }
.textseite ul { margin: 0 0 16px; padding-left: 22px; max-width: var(--lesebreite); }
.textseite li { margin-bottom: 5px; }
.textseite .fassung { background: var(--flaeche); border: 1px solid var(--kante); padding: 18px 22px;
  margin: 0 0 30px; font-family: var(--sans); font-size: 15px; }
.textseite .fassung a { font-weight: 600; }

/* ---------- Schlussruf ---------- */
.schluss { background: var(--dunkel); color: #F3EFE8; padding: 60px 0; }
.schluss h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; margin: 0 0 12px; max-width: 22ch; }
.schluss p { max-width: 62ch; color: #D8D1C4; margin: 0; }
.schluss .klein { color: #ADA391; margin-top: 20px; }
.schluss .klein a { color: #E4B7B7; }

/* ---------- Fußzeile ---------- */
footer { background: var(--flaeche); border-top: 1px solid var(--kante); padding: 52px 0 26px;
  font-family: var(--sans); font-size: 15px; }
.fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 34px; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss-marke p { margin: 14px 0 0; color: var(--tinte-leise); font-family: var(--display); font-size: 16px; max-width: 40ch; }
.fuss-ruf { font-family: var(--sans) !important; }
.fuss-ruf a { font-weight: 600; }
footer h4 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise); margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 7px; }
footer a { color: var(--tinte); text-decoration: none; }
footer a:hover { color: var(--siegel); text-decoration: underline; }
.rechtszeile { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--kante);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--tinte-leise); }
.rechtslinks a { margin-left: 16px; }

/* ================= 2.35: Aufmacher mit Kurzformular und Szene ================= */

.aufmacher-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 46px; align-items: center; }
.aufmacher-text { min-width: 0; }
@media (max-width: 1040px) {
  .aufmacher-raster { grid-template-columns: 1fr; gap: 34px; }
}

/* Die gezeichnete Szene: Schriftstück, Augenscheinnahme, Siegel, Zustellung, Protokoll */
.szene-feld { margin: 0; }
.szene-feld canvas { display: block; width: 100%; height: auto; aspect-ratio: 520 / 380;
  border: 1px solid rgba(232,226,213,.18); background: rgba(255,255,255,.015); }
.szene-feld figcaption { font-family: var(--sans); font-size: 13.5px; color: #B9AE99;
  margin-top: 12px; letter-spacing: .01em; min-height: 1.4em; }
.szene-feld figcaption.wechsel { animation: szene-ein .5s ease both; }
@keyframes szene-ein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1040px) { .szene-feld canvas { max-width: 520px; } }

/* Das kurze Formular im Aufmacher */
.kurzform-kasten { margin: 30px 0 18px; padding: 22px 24px 20px; background: rgba(255,255,255,.045);
  border: 1px solid rgba(232,226,213,.16); }
.kurzform-titel { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #C7BCA6; margin: 0 0 16px; }
.kurzform-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.kurzfeld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kurzfeld.breit { grid-column: 1 / -1; }
.kurzfeld label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: #C7BCA6; }
.kurzfeld .freiwillig { font-weight: 400; letter-spacing: 0; color: #8E8574; text-transform: none; }
.kurzform input { font-family: var(--sans); font-size: 16px; padding: 11px 12px; width: 100%;
  background: #FBFAF7; color: var(--tinte); border: 1px solid rgba(232,226,213,.3); }
.kurzform input::placeholder { color: #9A9285; }
.kurzform input:focus { outline: 2px solid var(--siegel); outline-offset: 1px; }
.kurzform input.unbekannt { border-color: var(--logo-rot); }
.plz-ort { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.kurzfeld.knopf-feld { grid-column: 1 / -1; align-items: flex-start; }
.kurzform-raster .knopf { padding: 13px 26px; cursor: pointer; }
.kurzform-fuss { font-family: var(--sans); font-size: 13px; color: #ADA391; margin: 14px 0 0; }
.kurzform-fuss a { color: #E4B7B7; }
.kurzform-fuss strong { color: #D8D1C4; }
.nur-automat { position: absolute; left: -9999px; }
.aufmacher-alternativ { font-family: var(--sans); font-size: 14.5px; color: #ADA391; margin: 0; }
.aufmacher-alternativ a { color: #E4B7B7; }
@media (max-width: 620px) {
  .kurzform-raster { grid-template-columns: 1fr; }
  .kurzform-kasten { padding: 18px 16px 16px; }
}

/* Die Feststellungen sitzen jetzt unter beiden Spalten */
.aufmacher .fakten { margin-top: 46px; }

/* ---------- Ablauf als Zeitachse (2.35) ---------- */
.ablauf { list-style: none; margin: 0; padding: 0; }
.ablauf li { display: grid; grid-template-columns: 62px 250px minmax(0, 1fr); gap: 0 26px;
  padding: 24px 0; border-top: 1px solid var(--kante); align-items: start; position: relative; }
.ablauf li:last-child { border-bottom: 1px solid var(--kante); }
.ablauf .nr { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--messing);
  letter-spacing: .08em; padding-top: 4px; position: relative; }
/* Die Achse: eine durchgehende Haarlinie durch die Nummernspalte, Punkt je Schritt.
   Sie hängt am Listenpunkt, nicht an der Nummer - sonst reicht sie nur so weit
   wie der kurze Zahlentext und die Linie zerfällt in Stücke. */
.ablauf li::before { content: ""; position: absolute; left: 40px; top: 0; bottom: 0;
  width: 1px; background: var(--kante); }
.ablauf li:first-child::before { top: 30px; }
.ablauf li:last-child::before { bottom: calc(100% - 34px); }
.ablauf .nr::after { content: ""; position: absolute; left: 36px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--papier); border: 1.5px solid var(--messing); }
.ablauf h3 { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 0;
  line-height: 1.35; text-wrap: balance; }
.ablauf .was { display: contents; }
.ablauf .was p { grid-column: 3; margin: 0 0 8px; color: var(--tinte-leise); font-size: 16.5px;
  max-width: 62ch; }
.ablauf .was p:last-child { margin-bottom: 0; }
.ablauf .merksatz { font-family: var(--sans); font-size: 14.5px; color: var(--siegel);
  border-left: 2px solid var(--siegel); padding-left: 12px; }
.ablauf li.herz { background: linear-gradient(90deg, rgba(123,34,49,.045), transparent 62%); }
.ablauf li.herz .nr { color: var(--siegel); }
.ablauf li.herz .nr::after { border-color: var(--siegel); background: var(--siegel); }
@media (max-width: 900px) {
  .ablauf li { grid-template-columns: 46px minmax(0, 1fr); }
  .ablauf li::before { left: 30px; }
  .ablauf .nr::after { left: 26px; }
  .ablauf h3 { grid-column: 2; margin-bottom: 6px; }
  .ablauf .was p { grid-column: 2; }
}

/* ---------- Sanftes Aufblenden beim Scrollen (2.35) ---------- */
.kommt { opacity: 0; transform: translateY(14px); }
.kommt.da { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .kommt { opacity: 1; transform: none; }
  .szene-feld figcaption.wechsel { animation: none; }
}

/* ---------- Volles Logo im Fuß ---------- */
.fuss-logo { display: inline-block; }
.fuss-logo img { width: 250px; height: auto; }