/* Kita-Seite — alles, was ueber das Designsystem der Hauptseite
 * (css/grundlage.css, unveraenderte Kopie) hinausgeht.
 *
 * Leitidee wie dort: weisser, stiller Grund, und alles Farbige steckt in EINEM
 * Objekt. Auf der Hauptseite ist das gefaltetes Papier, hier ein Lichtschwarm
 * (js/schwarm/), der beim Scrollen seine Form wechselt. Text steht links, der
 * Schwarm rechts; unter 64rem gibt es keine zweite Spalte, dann steht der
 * Schwarm blass hinter dem Text — ausser im Hero, wo er ueber dem Text steht.
 */

/* ═══ Masse ═════════════════════════════════════════════════════════════ */

:root {
  /* Breite der Textspalte ab 64rem. Alles Lesbare haelt sich daran, und die
     Schwarmzone rechnet sich aus demselben Wert — beide koennen dadurch nicht
     ineinanderlaufen. 37rem sind 592 px: genug fuer 42 Zeichen Fliesstext in
     der grossen Stufe und fuer das Modulraster. */
  --spalte: min(37rem, 52vw);
  --kopf-hoehe: 3.75rem;
  /* Die beiden Farben der Kosten, dieselben wie im Schwarm. Orange steht nur
     als Flaeche (Punkt, Balken), nie als Schrift — 2,6:1 auf Weiss.
     Der Eigenanteil ist gruen, nicht himbeerrot: Rot wirkte bei dem Betrag,
     den die Kita zahlt, zu negativ (Hanno, 01.10.2026). Waldgruen mit einem
     Hauch Petrol, damit es zur kuehlen Gegenfarbe der Seite passt:
     5,3:1 auf Weiss, 4,9:1 auf --grund-tief — Text erlaubt (AA). Gleicher
     Wert in js/schwarm/formen.js (FARBWERTE, Eigenanteil). */
  --gruen: #227A52;
  --farbe-zuschuss: var(--orange);
  --farbe-eigen: var(--gruen);
}

[hidden] { display: none !important; }

/* Inhalt liegt UEBER der Schwarm-Ebene (z-index 0). */
main, .fuss { position: relative; z-index: 1; }

/* ═══ Die Schwarm-Ebene ══════════════════════════════════════════════════
 *
 * Fest ueber das ganze Fenster, transparent, ohne Zeigerereignisse — der Text
 * darueber bleibt waehl- und klickbar. Die Hoehe ist 100lvh (grosses
 * Sichtfenster), nicht inset: 0: Auf dem iPhone aendert sich sonst beim
 * Scrollen mit jeder ein- und ausfahrenden Adressleiste die Groesse, und jede
 * Groessenaenderung legt die Leinwand neu an.
 *
 * WO der Schwarm steht, entscheidet allein CSS ueber drei Variablen:
 *   --zx, --zy   Mittelpunkt der Formzone (Laenge oder Prozent der Ebene)
 *   --zs         Kantenlaenge der quadratischen Zone
 * .schwarm__zone liest sie OHNE Uebergang — js/schwarm/schwarm.js misst dieses
 * Element und muss den Zielwert sehen, nicht einen Zwischenstand. Die
 * Rueckfallebene (.schwarm__rueckfall) liest dieselben Werte MIT Uebergang. */

.schwarm {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none;
  /* Hero, alle Breiten: mittig oben, Aussage darunter. */
  --zs: min(36vh, 78vw, 30rem);
  --zx: 50%;
  --zy: calc(var(--kopf-hoehe) + 3vh + var(--zs) / 2);
}

.schwarm__zone {
  position: absolute;
  left: var(--zx); top: var(--zy);
  width: var(--zs); height: var(--zs);
  translate: -50% -50%;
  visibility: hidden;
  /* NIE ein Uebergang, auch nicht bei „Bewegung reduzieren": Die Regel unten
     setzt transition-duration .12s auf ALLE Elemente, und transition-property
     steht von Haus aus auf all. Dann glitt die Zone 120 ms lang, und der
     Schwarm mass beim Aktwechsel den Startwert — er blieb an der Hero-Stelle
     stehen. !important, weil die Ruhe-Regel selbst !important traegt. */
  transition: none !important;
}

/* Die Rueckfallebene: das mentoki-Zeichen, gut halb so gross wie die Zone.
   Sie steht, bis der Schwarm sein erstes Bild gezeichnet hat — ohne
   JavaScript und in der Stufe „sparsam" also dauerhaft — und gleitet beim
   Aktwechsel an ihren neuen Platz. */
.schwarm__rueckfall {
  position: absolute;
  left: var(--zx); top: var(--zy);
  width: calc(var(--zs) * .58); height: auto;
  translate: -50% -50%;
  opacity: .9;
  transition: left .9s var(--kurve), top .9s var(--kurve), width .9s var(--kurve), opacity 1.2s var(--kurve);
}
html[data-schwarm='laeuft'] .schwarm__rueckfall { opacity: 0; }

/* Ohne JavaScript fuehrt niemand den Akt nach: Dann gehoert das Zeichen zum
   Hero und scrollt mit ihm weg, statt fest ueber dem Text der Seite zu
   stehen. (Die Akt-Regeln oben verlangen deshalb ein gesetztes data-akt —
   `html:not([data-akt='hero'])` traf ohne Skript und schob das Zeichen in
   die rechte Spalte, mitten in die Ueberschrift.) */
html:not([data-js]) .schwarm { position: absolute; }

.schwarm canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  opacity: 0;
  transition: opacity 1.2s var(--kurve);
}
.schwarm canvas.ist-bereit { opacity: 1; }

/* Ab 64rem steht die Zone in ALLEN Akten rechts neben der Textspalte, auch im
 * Hero: Der Schwarm ist von Anfang an dort und verwandelt sich beim Scrollen
 * nur noch, statt erst von oben in die Spalte zu fliegen.
 * --links ist die Kante, an der die Textspalte endet (plus Luft); die Zone
 * nimmt die Breite bis zum rechten Rand, hoechstens 70 % der Fensterhoehe.
 * Gerechnet fuer 1440 x 900: Zone 560 px, 808..1368 px. Fuer 1024 x 768, den
 * engsten Zweispaltenfall: 358 px. Ohne JavaScript gilt dasselbe — der Text
 * steht ja links. */
@media (min-width: 64rem) {
  .schwarm {
    --links: calc(max(0px, (100vw - var(--bahn)) / 2) + var(--rand) + var(--spalte) + 2rem);
    --breite: calc(100vw - var(--links) - var(--rand));
    --zs: min(var(--breite), 70vh, 40rem);
    --zx: calc(var(--links) + var(--breite) / 2);
    --zy: 55%;
  }
}

/* Unter 64rem gibt es keine zweite Spalte: Der Schwarm steht mittig und
   blass HINTER dem Text — wie das Papier der Hauptseite (30 %). */
@media (max-width: 63.99rem) {
  html[data-akt]:not([data-akt='hero']) .schwarm {
    --zs: min(84vw, 56vh);
    --zy: 52%;
  }
  html[data-akt]:not([data-akt='hero']) .schwarm canvas.ist-bereit { opacity: .3; }
  /* Das Zeichen nur, solange KEIN Schwarm laeuft. Ohne :not(…laeuft) schlug
     diese Regel (gleiche Spezifitaet, spaeter) das Ausblenden weiter oben,
     und auf dem Telefon lagen Zeichen und Schwarm uebereinander. */
  html[data-akt]:not([data-akt='hero']):not([data-schwarm='laeuft']) .schwarm__rueckfall { opacity: .3; }
}

/* ═══ Hero ══════════════════════════════════════════════════════════════
 * Die Bausteine .hero, .hero__titel, .hero__zeile, .hero__unter stammen aus
 * grundlage.css.
 *
 * Schmal (unter 64rem): Gegenstand oben, Aussage darunter, mittig — wie auf
 * der Hauptseite. Der obere Abstand ist genau die Zone plus Luft: Er haengt an
 * denselben Variablen wie .schwarm, sonst liefe die Vorzeile in die Form.
 *
 * Breit (ab 64rem): zweispaltig wie alle Akte. Text links, senkrecht mittig;
 * der Schwarm steht rechts auf derselben Hoehe (--zy 55 %). */

.akt--hero {
  --zs: min(36vh, 78vw, 30rem);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--kopf-hoehe) + 3vh + var(--zs) + clamp(1rem, 3vh, 2.5rem)) 0 clamp(2.5rem, 7vh, 5rem);
}

/* Die Zeile muss auch auf kurzen Fenstern unter die Form passen. */
.akt--hero .hero__titel { font-size: min(clamp(2.75rem, 1.2rem + 6.4vw, 6rem), 9.5vh); }
.akt--hero .hero__unter { max-width: 40ch; }
.akt--hero .hero__unter strong { color: var(--farbe-eigen); font-weight: 600; }

.hero__wege {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .9rem 1.25rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
}

@media (min-width: 64rem) {
  .akt--hero {
    justify-content: center;
    padding: calc(var(--kopf-hoehe) + 2rem) 0 clamp(3rem, 8vh, 5rem);
  }
  .akt--hero .hero { margin: 0; max-width: var(--spalte); text-align: left; }
  .akt--hero .hero__vorlauf, .akt--hero .hero__wege { justify-content: flex-start; }
  .akt--hero .hero__unter { margin-inline: 0; max-width: 34ch; }
  /* „Digital arbeiten." misst rund 6,8 em. Bei 82 px (1440 Breite) sind das
     560 px — die Spalte hat 592. Gedeckelt bei 5,25rem fuer breite Schirme. */
  .akt--hero .hero__titel { font-size: min(clamp(2.75rem, 1rem + 4.6vw, 5.25rem), 9.5vh); }
}

.frist-pille {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--radius-knopf);
  font-size: .9375rem; color: var(--schrift-still);
  background: rgb(255 255 255 / .8);
}
.frist-pille__rest:not(:empty),
.zeitstrahl__rest:not(:empty) { color: var(--himbeer); font-weight: 600; }
.frist-pille__rest:not(:empty)::before { content: '·'; margin-right: .5rem; color: var(--schrift-still); font-weight: 400; }

/* Zweiter Weg neben einem Knopf: ruhig, Petrol, unterstrichen. */
.weg {
  font: inherit; font-size: 1.0625rem; font-weight: 500;
  color: var(--petrol);
  background: none; border: 0; padding: .5rem .25rem; cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--petrol) 40%, transparent);
  text-underline-offset: .25em;
}
.weg:hover { color: var(--himbeer); }

.knopf { border: 0; cursor: pointer; font-family: inherit; }
.knopf--still {
  background: #fff; color: var(--himbeer);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--himbeer) 45%, transparent);
}
.knopf--still:hover, .knopf--still:focus-visible {
  box-shadow: inset 0 0 0 1px var(--himbeer),
              0 .75rem 2.25rem -.8rem color-mix(in srgb, var(--himbeer) 45%, transparent);
}

/* ═══ Zwei Spalten ab 64rem ═════════════════════════════════════════════
 * Alles Lesbare bleibt in der Textspalte. Steht am Dateiende von
 * grundlage.css eine engere Grenze (z. B. .fliess 42ch), gilt die engere. */

@media (min-width: 64rem) {
  .abschnitt .bahn > * { max-width: var(--spalte); }
  /* grundlage.css begrenzt Ueberschriften auf 16ch — in der grossen Stufe
     sind das mehr als die Spalte („Sprechen wir darueber." lief 64 px in die
     Schwarmzone). Gleiche Spezifitaet, spaeter geladen: die engere gilt. */
  .bahn:not(.bahn--mitte) .ueberschrift { max-width: min(16ch, var(--spalte)); }
  /* Das Modulraster der Hauptseite (3,5 + 13 + 22 rem) ist breiter als die
     Spalte. Schmaler Titel, der Text nimmt den Rest. */
  .abschnitt .feld { grid-template-columns: 2.75rem minmax(0, 10.5rem) minmax(0, 1fr); gap: 1.75rem; }
}

/* ═══ Platzhalter ═══════════════════════════════════════════════════════
 * Sichtbar als das, was sie sind — damit niemand eine Vorschau fuer fertig
 * haelt. werkzeuge/platzhalter.sh listet sie vor dem Livegang. */

.platzhalter {
  color: var(--petrol);
  background: color-mix(in srgb, var(--petrol) 7%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--petrol) 45%, transparent);
  outline-offset: 1px;
  border-radius: 3px;
  padding: 0 .2em;
  font-weight: inherit;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ═══ Vorhaben und Inhalte ══════════════════════════════════════════════ */

.eckdaten, .module { margin-top: clamp(2.5rem, 6vh, 4rem); }
.feld__text p + p { margin-top: .5rem; }
.modul__umfang {
  font-size: .875rem; font-weight: 500; letter-spacing: .01em;
  color: var(--schrift-still);
}
.modul { transition: background var(--ruhig) var(--kurve); border-radius: 2px; }
.modul[data-hervor] .feld__nr { color: var(--orange); }
.inhalte__rahmen { margin-top: clamp(2rem, 5vh, 3rem); font-size: 1rem; }
.inhalte__rahmen + .inhalte__rahmen { margin-top: 1rem; }
.inhalte__rahmen--klein { font-size: .9375rem; }

/* Unterzeile direkt unter der Ueberschrift — die Ueberschrift gibt dafuer
   ihren grossen Abstand an sie ab. */
.inhalte__titel { margin-bottom: .75rem; }
.inhalte__unter {
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); font-weight: 500;
  color: var(--himbeer);
}

/* Titel und Text stehen untereinander, die Nummer davor — in beiden Listen
   (Eckdaten im „Vorhaben" und Module). Im dreispaltigen Raster der
   Hauptseite (Titelspalte 13rem) brachen die Modultitel vier- bis
   fuenfzeilig, und „32 Unterrichtseinheiten" lief 70 px aus seiner Spalte
   in den Text daneben (gemessen bei 1512 px). So bleibt alles in der
   Textspalte, links vom Schwarm. Spezifitaet wie die Rasterregel am Ende von
   grundlage.css plus .felder, sonst gewaenne die. */
@media (min-width: 56rem) {
  .bahn:not(.bahn--mitte) .felder .feld {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: .6rem 1.5rem;
  }
  .bahn:not(.bahn--mitte) .felder .feld__text { grid-column: 2; }
}
.felder .feld__titel { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); hyphens: manual; }

/* ═══ Kosten ════════════════════════════════════════════════════════════ */

.preis { margin: 0; border-top: 1px solid var(--linie); }
.preis__zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--linie);
}
.preis dt { color: var(--schrift-still); }
.preis dd {
  margin: 0; font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); white-space: nowrap;
}
.preis__zeile--eigen dt { color: var(--schrift); font-weight: 600; }
.preis__zeile--eigen dd {
  color: var(--farbe-eigen); font-weight: 600;
  font-size: clamp(1.4375rem, 1rem + 1.4vw, 2.125rem); letter-spacing: -.02em;
}
/* Farbpunkte vor Zuschuss und Eigenanteil — dieselben Farben wie die Figuren
   im Schwarm. Orange nur als Punkt, nie als Schrift. */
.preis__zeile--zuschuss dt::before, .preis__zeile--eigen dt::before {
  content: ''; display: inline-block; width: .6em; height: .6em;
  margin-right: .55em; border-radius: 50%; vertical-align: .05em;
  background: var(--farbe-zuschuss);
}
.preis__zeile--eigen dt::before { background: var(--farbe-eigen); }

.preis__je { margin-top: 1rem; color: var(--schrift-still); }

/* Das Beispiel einer Kita: die Summe, um die es der Verwaltung geht, gross
   und in der Farbe des Eigenanteils (wie die Figuren im Schwarm). */
.preis__klein { font-size: .875rem; }
.preis__beispiel {
  margin-top: clamp(2rem, 5vh, 2.75rem);
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.1rem, 3vw, 1.6rem);
  background: var(--grund-tief); border-radius: 1.25rem;
}
.preis__beispiel-frage { font-weight: 600; }
.preis__beispiel-summe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: .6rem 0 .5rem;
}
.preis__beispiel-summe strong {
  color: var(--farbe-eigen); font-weight: 600; white-space: nowrap;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.preis__beispiel-text { font-size: .9375rem; color: var(--schrift-still); }

.hinweise {
  list-style: none; margin: clamp(2rem, 5vh, 2.75rem) 0 0; padding: 0;
  display: grid; gap: .6rem;
  color: var(--schrift-still); font-size: .9375rem;
}
.hinweise li { padding-left: 1.1rem; position: relative; }
.hinweise li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: .45rem; height: 1px; background: var(--himbeer);
}

/* ═══ Ablauf: Zeitstrahl ════════════════════════════════════════════════
 * Eine senkrechte Haarlinie mit einem Punkt je Schritt. Den laufenden
 * Schritt setzt js/haupt.js (data-aktiv), erledigte bekommen data-erledigt. */

.zeitstrahl { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitstrahl::before {
  content: ''; position: absolute; left: .4rem; top: .6rem; bottom: .6rem;
  width: 1px; background: var(--linie);
}
.zeitstrahl__schritt {
  position: relative; padding: 0 0 clamp(1.75rem, 4vh, 2.5rem) 2.5rem;
}
.zeitstrahl__schritt:last-child { padding-bottom: 0; }
.zeitstrahl__schritt::before {
  content: ''; position: absolute; left: 0; top: .3rem;
  width: .8125rem; height: .8125rem; border-radius: 50%;
  background: #fff; border: 1px solid rgb(0 0 0 / .28);
  transition: background var(--ruhig) var(--kurve), box-shadow var(--ruhig) var(--kurve);
}
.zeitstrahl__schritt[data-erledigt]::before { background: var(--schrift-still); border-color: var(--schrift-still); }
.zeitstrahl__schritt[data-aktiv]::before {
  background: var(--himbeer); border-color: var(--himbeer);
  box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--himbeer) 16%, transparent);
}
.zeitstrahl__schritt[data-hervor]::before { box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--orange) 30%, transparent); }
.zeitstrahl__wann {
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--schrift-still);
  display: flex; flex-wrap: wrap; gap: .1rem .5rem;
}
.zeitstrahl__schritt[data-aktiv] .zeitstrahl__wann { color: var(--himbeer); }
.zeitstrahl__rest { text-transform: none; letter-spacing: 0; }
.zeitstrahl__rest:not(:empty)::before { content: '·'; margin-right: .5rem; color: var(--schrift-still); font-weight: 400; }
.zeitstrahl__titel {
  margin: .35rem 0 .35rem;
  font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); font-weight: 500;
}
.zeitstrahl__text { color: var(--schrift-still); max-width: 52ch; }
.zeitstrahl__text a { color: var(--petrol); text-underline-offset: .2em; }

/* ═══ Interesse melden: Drei Schritte, Kontaktformular, Rueckmeldung ═══ */

.dreischritt {
  list-style: none; margin: 0 0 clamp(2rem, 5vh, 3rem); padding: 0;
  display: grid; gap: .6rem;
  color: var(--schrift-still);
}
.dreischritt li { display: flex; align-items: baseline; gap: .75rem; }
.dreischritt__nr {
  flex: none; display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .8125rem; font-weight: 600; color: #fff; background: var(--himbeer);
  translate: 0 -.1rem;
}

/* Kein Fieldset, keine Gruppen: sieben Felder in Zweierreihen, damit das
   Formular auf einen Blick klein wirkt (das alte mit vier Gruppen und drei
   Haekchen hat viele Kitas abgeschreckt). */
.formular { display: grid; gap: 1.1rem; }
.feldpaar { display: grid; gap: .4rem; min-width: 0; }
.feldreihe { display: grid; gap: 1.1rem; }
@media (min-width: 34rem) {
  .feldreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feldpaar label { font-size: .9375rem; font-weight: 500; }
.pflicht { color: var(--himbeer); }
.optional, .zusatz { color: var(--schrift-still); font-weight: 400; }
/* Die Zahl braucht keine halbe Zeile — sie steht allein, damit der Hinweis
   „(auch Mitarbeitende des Traegers)" neben der Frage Platz hat. */
.feldpaar--zahl input { max-width: 9rem; }

.formular input:not([type='checkbox']),
.formular textarea {
  width: 100%;
  font: inherit; font-size: 1.0625rem; color: var(--schrift);
  padding: .75rem .9rem;
  border: 1px solid rgb(0 0 0 / .2); border-radius: .75rem;
  background: #fff;
  transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve);
}
.formular textarea { resize: vertical; min-height: 3.5rem; }
.formular input:hover, .formular textarea:hover { border-color: rgb(0 0 0 / .35); }
.formular input:focus-visible, .formular textarea:focus-visible {
  outline: none; border-color: var(--himbeer);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--himbeer) 18%, transparent);
}
.formular [aria-invalid='true'] { border-color: var(--himbeer) !important; }
.feldfehler { font-size: .875rem; color: var(--himbeer); }

/* Honigtopf (index.html): fuer Menschen unsichtbar, auch fuer Vorleseprogramme
   (aria-hidden) — aber nicht display:none, das erkennen manche Programme. */
.formular__falle {
  position: absolute; left: -100vw; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Der Pflicht-Haken zum Eigenanteil — abgesetzt, damit niemand ihn
   ueberliest: Es geht um das Geld der Kita. */
.haken { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.haken input { width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; accent-color: var(--himbeer); }
.haken .feldfehler { grid-column: 2; }
.haken--eigenanteil {
  margin-top: .4rem; padding: 1rem 1.1rem;
  background: var(--grund-tief); border-radius: .75rem;
}
.haken--eigenanteil:has([aria-invalid='true']) { box-shadow: inset 0 0 0 1.5px var(--himbeer); }
.haken__summe { display: block; margin-top: .4rem; font-weight: 600; color: var(--farbe-eigen); }
.haken__klein { display: block; margin-top: .25rem; font-size: .875rem; color: var(--schrift-still); }

.formular__stille { margin-top: .4rem; font-size: .9375rem; color: var(--schrift-still); }
.formular__stille a { color: var(--petrol); text-underline-offset: .2em; }
.formular__stille a:hover { color: var(--himbeer); }
.formular__fehler {
  padding: .9rem 1.1rem; border-radius: .75rem;
  background: color-mix(in srgb, var(--himbeer) 7%, #fff);
  color: var(--himbeer); font-weight: 500;
}
.formular__weg { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pflicht-hinweis { font-size: .875rem; color: var(--schrift-still); }
.pflicht-hinweis span { color: var(--himbeer); }
.formular .knopf[aria-busy] { opacity: .7; cursor: progress; }

/* Dank oder Fehler nach dem Absenden (js/formular.js). */
.formular__antwort {
  margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-radius: 1rem;
  outline: none; max-width: 40rem;
}
.formular__antwort[data-art='danke'] { background: color-mix(in srgb, var(--petrol) 7%, #fff); }
.formular__antwort[data-art='fehler'] { background: color-mix(in srgb, var(--himbeer) 7%, #fff); }
.formular__antwort-titel { font-size: 1.25rem; font-weight: 600; margin-bottom: .35rem; }
.formular__antwort[data-art='danke'] .formular__antwort-titel { color: var(--petrol); }
.formular__antwort[data-art='fehler'] .formular__antwort-titel { color: var(--himbeer); }
.formular__antwort a { color: var(--petrol); text-underline-offset: .2em; }

/* ═══ Auftritte (wie css/buehne.css der Hauptseite) ═════════════════════ */

html[data-js] [data-auftritt] {
  opacity: 0; transform: translateY(.625rem);
  transition: opacity .6s var(--kurve), transform .6s var(--kurve);
}
html[data-js] [data-auftritt][data-da] { opacity: 1; transform: none; }
.feld[data-auftritt] { transition-delay: calc(var(--rang, 0) * 60ms); }
.frage[data-auftritt] { transition-delay: calc(var(--rang, 0) * 50ms); }
.zeitstrahl__schritt[data-auftritt] { transition-delay: calc(var(--rang, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  html[data-js] [data-auftritt] { transform: none; }
  .hero__strich::after { animation: none; }
}

/* ═══ Schmale Schirme ═══════════════════════════════════════════════════ */

@media (max-width: 40rem) {
  .hero__wege { flex-direction: column; }
  .preis dd { font-size: 1.0625rem; }
}