/* wallPen Flow — public funnel.
   Layout: full screen on phones (header, progress, content, action bar at the
   bottom), a centred card from 48rem upwards. Colours come from CSS variables
   a flow sets on the body tag; the defaults below apply when it does not.
   Spacing, radii, borders and states are fixed here on purpose — a flow picks
   its accent, not its geometry. Barlow is served from this server, see
   schriften.css. */
:root {
  --grund: #f6f7f5;
  --schrift: #323E48;
  --gruen: #CEDC00;
  --akzent-schrift: #323E48;
  --breite: 46rem;
  --spalten: 1fr;
  --logo-hoehe: 1.4rem;
  --schrift-text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-kopf: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* Geometrie — ein Flow kann sie setzen, sonst gelten diese Werte */
  --flaeche: #fff;
  --radius: 14px;
  --radius-gross: 22px;
  --linie: 2px;
  --rand-anteil: 14%;
  --karte-grund: var(--flaeche);
  --karte-schatten: 0 18px 50px rgba(50, 62, 72, .10), 0 2px 6px rgba(50, 62, 72, .05);

  /* daraus abgeleitet */
  --rand: rgba(50, 62, 72, .13);
  --rand: color-mix(in srgb, currentColor var(--rand-anteil), transparent);
  --rand-stark: color-mix(in srgb, currentColor calc(var(--rand-anteil) * 2.4), transparent);
  --gedaempft: color-mix(in srgb, currentColor 72%, transparent);
}
/* ---------- Dunkle Fassung ---------- */
/* Die Farben selbst kommen aus der Gestaltung; hier steht nur, was sich auf
   dunklem Grund sonst noch aendern muss: Systemfelder, Meldungen, Schatten. */
body.dunkel { color-scheme: dark; }
/* Eine gleichmaessige Flaeche wirkt auf dem Telefon flach. Ein kaum sichtbarer
   Verlauf nach oben gibt dem Bild Tiefe, ohne dass eine zweite Farbe noetig
   waere — er arbeitet mit jeder eingestellten Grundfarbe. */
body.dunkel:not(.mit-bild) {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 42%);
  background-attachment: fixed;
}
/* Lichtkante oben an den Flaechen: der Unterschied zwischen "Kasten" und
   "Material". */
body.dunkel .kachel, body.dunkel .eingabe,
body.dunkel textarea, body.dunkel select, body.dunkel .dateiflaeche {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}
body.dunkel .kachel.gewaehlt, body.dunkel .kachel:has(input:checked) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 6px 20px rgba(0, 0, 0, .4);
}
body.dunkel .feldfehler { color: #ff9481; }
body.dunkel .fehlerhaft .eingabe,
body.dunkel .fehlerhaft textarea,
body.dunkel .fehlerhaft select {
  border-color: #ff9481; box-shadow: 0 0 0 3px rgba(255, 148, 129, .16);
}
body.dunkel .fehler {
  background: rgba(255, 148, 129, .12); border-left-color: #ff9481; color: #ffb3a4;
}
body.dunkel .hinweisband { background: rgba(232, 235, 237, .08); }
body.dunkel .stoerung { background: #10171c; }
body.dunkel .kachel:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
body.dunkel .kachel.gewaehlt { box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
body.dunkel .dateiflaeche { background: rgba(232, 235, 237, .05); }
body.dunkel .abschlusszeichen svg { stroke: #262f36; }
body.dunkel .ladestrich span { box-shadow: 0 0 12px var(--gruen); }

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Ziehen am oberen Rand soll nicht die Seite neu laden — sonst wirkt der
     Durchlauf wackelig und Eingaben gehen verloren. */
  overscroll-behavior-y: contain;
}
/* Das graue Aufblitzen des Systems liegt sonst ueber der eigenen Quittung,
   und ohne touch-action wartet der Browser 300 ms auf einen Doppeltipp. */
.kachel, .weiter, .zurueckpfeil, .dateiflaeche, .stufen label, .zustimmung {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--schrift);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Geruest ---------- */
.rahmen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.seitenkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--rand);
}
/* Die eingestellte Hoehe wirkt, der Kopf bleibt aber ruhig: mehr als 2rem
   traegt die Zeile nicht. */
.kopflogo { height: min(var(--logo-hoehe), 2rem); width: auto; max-width: 60vw; display: block; }
.zaehler { font-size: .82rem; font-weight: 500; opacity: .62; letter-spacing: .02em; }

.segmente { display: flex; gap: 4px; padding: 0 1.25rem; margin: .85rem 0 .15rem; }
.segmente i { flex: 1 1 0; height: 4px; border-radius: 4px; background: var(--rand-stark);
              opacity: .45; transition: background .25s, opacity .25s; }
.segmente i.da { background: var(--gruen); opacity: 1; }

/* Punkte statt Balken: gleiche Auszeichnung, andere Form */
.segmente.punkte { gap: .5rem; justify-content: center; }
.segmente.punkte i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.segmente.punkte i.da { transform: scale(1.15); }
.segmente.punkte i:not(.da) { opacity: .3; }
/* Der aktuelle Punkt ist der letzte erfuellte und bekommt einen Hof. */
.segmente.punkte i.da:last-of-type {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 22%, transparent);
}

/* Das eben erreichte Segment waechst auf, statt hart umzuspringen */
.segmente i.da.neu {
  transform-origin: left center;
  animation: segmentauf .34s cubic-bezier(.34, 1.3, .64, 1) both;
}
@keyframes segmentauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.segmente.punkte i.da.neu { transform-origin: center; animation-name: punktauf; }
@keyframes punktauf { from { transform: scale(.3); } to { transform: scale(1.15); } }

.inhalt {
  flex-grow: 1;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
  display: flex; flex-direction: column; justify-content: center;
}
/* Muss da sein und anklickbar bleiben, soll aber nicht um Aufmerksamkeit
   konkurrieren. Klein und dicht am Rand statt blass: unter 4,5:1 Kontrast
   waere "leicht erkennbar" nicht mehr erfuellt, und genau das verlangt das
   Impressum. Die bisherigen .6 auf hellem Grund lagen darunter. */
.fuss {
  display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap;
  padding: .65rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  font-size: .72rem; letter-spacing: .01em;
}
.fuss a { color: inherit; text-decoration: none; opacity: .8; transition: opacity .15s; }
.fuss a:hover, .fuss a:focus-visible { opacity: 1; text-decoration: underline; }
body.dunkel .fuss a { opacity: .62; }
body.dunkel .fuss a:hover, body.dunkel .fuss a:focus-visible { opacity: 1; }

/* Hintergrundbild samt Schleier, damit Text darauf lesbar bleibt */
body.mit-bild::before { content: ""; position: fixed; inset: 0; z-index: 0;
  background: var(--hintergrundbild) center / cover no-repeat; }
body.mit-bild::after { content: ""; position: fixed; inset: 0; z-index: 0;
  background: var(--grund); opacity: var(--schleier); }

/* ---------- Typografie ---------- */
h1 {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
.hinweis {
  margin: 0 0 1.6rem;
  font-size: .95rem;
  line-height: 1.5;
  opacity: .78;
  color: var(--gedaempft);
  max-width: 46ch;
}
.fehler {
  margin: 0 0 1rem; padding: .7rem .9rem;
  background: rgba(194, 69, 45, .1); border-left: 3px solid #c2452d;
  border-radius: 6px; color: #a33a2b; font-size: .95rem; font-weight: 500;
}

/* ---------- Zurueck: sitzt in der Kopfzeile, links vom Schrittzaehler ---------- */
.kopf-rechts { display: flex; align-items: center; gap: .35rem; min-height: 2.2rem; }
.zurueckpfeil {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; margin: 0;
  color: inherit; opacity: .55; text-decoration: none;
  border-radius: 8px; transition: opacity .15s, transform .15s;
}
.zurueckpfeil svg { width: 1.25rem; height: 1.25rem; }
.zurueckpfeil:hover { opacity: 1; transform: translateX(-2px); }

/* ---------- Kacheln ---------- */
.auswahl { display: grid; gap: .65rem; grid-template-columns: var(--spalten); margin: 0; }
.kachel {
  display: flex; flex-direction: var(--kachel-richtung, row); gap: .85rem;
  align-items: center; width: 100%; padding: 1rem;
  font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.35;
  text-align: left; text-decoration: none;
  background: var(--flaeche); color: var(--schrift);
  border: var(--linie) solid var(--rand); border-radius: var(--radius);
  cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.kachel img { width: var(--kachel-bild, 2.6rem); max-width: 100%; height: auto;
              max-height: 5rem; object-fit: contain; flex-shrink: 0; }
.kachel > span { flex: 1 1 auto; }
.kachel:hover { border-color: var(--rand-stark); box-shadow: 0 6px 18px rgba(50, 62, 72, .10);
                transform: translateY(-1px); }
.kachel:active { transform: translateY(0); }
.kachel:focus-visible { outline: none; border-color: var(--gruen);
                        box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 40%, transparent); }

/* Merkzeichen rechts: leerer Ring, gefuellt sobald gewaehlt */
.kachel::after {
  content: ""; width: 1.35rem; height: 1.35rem; flex-shrink: 0; align-self: center;
  border: var(--linie) solid var(--rand-stark); border-radius: 50%;
  background: no-repeat center / .8rem .8rem;
  transition: background-color .15s, border-color .15s;
}
.kachel.gewaehlt, .kachel:has(input:checked) {
  border-color: var(--gruen); font-weight: 600;
  box-shadow: 0 6px 18px rgba(50, 62, 72, .09);
}
.kachel.gewaehlt::after, .kachel:has(input:checked)::after {
  border-color: var(--gruen); background-color: var(--gruen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23323E48' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
/* Das eigentliche Auswahlfeld liegt unsichtbar unter der Kachel */
.kachel input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Entscheidung gefallen: die gewaehlte Kachel quittiert kurz, die uebrigen
   treten zurueck. Ohne das sieht niemand, dass der Klick angekommen ist. */
.auswahl.entschieden .kachel:not(.gewaehlt) {
  opacity: .4; transform: scale(.985);
  transition: opacity .28s ease, transform .28s ease;
}
.kachel.gewaehlt { animation: quittung .32s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes quittung {
  0%   { transform: scale(1); }
  40%  { transform: scale(.975); }
  100% { transform: scale(1.012); }
}
/* Die Kacheln laufen gestaffelt ein. Sobald die Wahl gefallen ist, greift
   die Regel nicht mehr und die Quittung darunter uebernimmt. */
.auswahl:not(.entschieden) .kachel {
  animation: kachelrein .32s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes kachelrein { from { opacity: 0; transform: translateY(.45rem); } }
.auswahl:not(.entschieden) .kachel:nth-child(2) { animation-delay: .03s; }
.auswahl:not(.entschieden) .kachel:nth-child(3) { animation-delay: .06s; }
.auswahl:not(.entschieden) .kachel:nth-child(4) { animation-delay: .09s; }
.auswahl:not(.entschieden) .kachel:nth-child(5) { animation-delay: .12s; }
.auswahl:not(.entschieden) .kachel:nth-child(6) { animation-delay: .15s; }
.auswahl:not(.entschieden) .kachel:nth-child(n+7) { animation-delay: .18s; }

.kachel.gewaehlt::after { animation: haken .3s cubic-bezier(.34, 1.5, .64, 1) both; }
@keyframes haken {
  0%   { transform: scale(.4); }
  100% { transform: scale(1); }
}

/* ---------- Formularfelder ---------- */
.formular { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formular > * { grid-column: span 2; }
.formular > .feld.halb { grid-column: span 1; }
@media (max-width: 34rem) { .formular > .feld.halb { grid-column: span 2; } }

.feld { display: grid; gap: .35rem; }
.feld > span { font-size: .85rem; font-weight: 600; color: var(--gedaempft); }
.freiwillig { font-weight: 500; opacity: .7; text-transform: none; letter-spacing: 0; }
.eingabe, .feld textarea, .feld select {
  width: 100%; padding: .85rem .9rem;
  font: inherit; font-size: 1rem;
  color: var(--schrift); background: var(--flaeche);
  border: var(--linie) solid var(--rand); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { resize: vertical; min-height: 5.5rem; }
.eingabe::placeholder, .feld textarea::placeholder { color: var(--schrift); opacity: .42; }
.eingabe:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-color: var(--gruen);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 32%, transparent);
}
.eingabe:user-invalid, .feld textarea:user-invalid { border-color: #c2452d; }

/* Bewertung: eine Reihe gleich grosser Felder, das gewaehlte faerbt sich.
   Radio statt Sternen, damit es ohne JavaScript und mit Tastatur geht. */
.feld.bewertung { border: 0; padding: 0; margin: 0; }
.feld.bewertung > legend { padding: 0; font-size: .85rem; font-weight: 600;
                           color: var(--gedaempft); }
.feld.bewertung .stufen { display: flex; gap: .4rem; margin-top: .35rem; }
.feld.bewertung .stufen label { flex: 1 1 0; }
.feld.bewertung .stufen input { position: absolute; opacity: 0; width: 0; height: 0; }
.feld.bewertung .stufen span {
  display: block; padding: .7rem .2rem; text-align: center;
  font-size: 1rem; color: var(--schrift); background: var(--flaeche);
  border: var(--linie) solid var(--rand); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.feld.bewertung .stufen label:hover span { border-color: var(--rand-stark); }
.feld.bewertung .stufen input:checked + span {
  border-color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 22%, var(--flaeche));
}
.feld.bewertung .stufen input:focus-visible + span {
  outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 32%, transparent);
}

.zustimmung { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem;
              line-height: 1.45; color: var(--gedaempft); }
.zustimmung input { width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; flex-shrink: 0;
                    accent-color: var(--gruen); border-radius: 4px; }
.zustimmung.fehlerhaft { color: #c2452d; }
body.dunkel .zustimmung.fehlerhaft { color: #ff9481; }
.zustimmung.fehlerhaft input {
  outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px;
}
.zustimmung .feldfehler { display: block; margin-top: .2rem; font-weight: 600; }
.zustimmung a { color: inherit; }

/* ---------- Fehler stehen am Feld ---------- */
.feldfehler { display: block; margin-top: .1rem; color: #c2452d;
              font-size: .82rem; font-weight: 500; line-height: 1.35; }
.feldfehler:empty { display: none; }
.fehlerhaft .eingabe, .fehlerhaft textarea, .fehlerhaft select {
  border-color: #c2452d;
  box-shadow: 0 0 0 3px rgba(194, 69, 45, .12);
}
.fehlerhaft.zuerst { animation: wackeln .3s ease-in-out both; }
@keyframes wackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- Datei: eine Flaeche zum Antippen ---------- */
.dateiflaeche {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .9rem; cursor: pointer;
  background: var(--flaeche); color: inherit;
  border: var(--linie) dashed var(--rand-stark); border-radius: var(--radius);
  transition: border-color .15s, background .15s;
}
.dateiflaeche:hover { border-color: var(--gruen); }
.dateiflaeche input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dateizeichen { display: grid; place-items: center; width: 2rem; height: 2rem;
                flex: 0 0 auto; opacity: .5; }
.dateizeichen svg { width: 1.3rem; height: 1.3rem; }
.dateitext { flex: 1 1 auto; font-size: .95rem;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateibild { width: 2.6rem; height: 2.6rem; flex: 0 0 auto;
             object-fit: cover; border-radius: 8px; }
.dateiflaeche.belegt { border-style: solid; border-color: var(--gruen); }
.dateiflaeche.belegt .dateizeichen { display: none; }

/* ---------- Aktionsleiste ---------- */
.feld, fieldset.feld, .zustimmung { scroll-margin-block: 5.5rem; }
/* Formulare stehen oben an, statt in der Mitte zu schweben: sonst liegen die
   ersten Felder unter der Aktionsleiste, sobald die Tastatur aufgeht. */
.inhalt:has(.formular) { justify-content: flex-start; }
/* Waehrend getippt wird, tritt der Knopf zurueck — die Tastatur hat eine
   eigene Weiter-Taste, und der Balken verdeckt sonst genau das Feld. */
html.tastatur-offen .aktion {
  opacity: 0; pointer-events: none; transform: translateY(1rem);
  transition: opacity .18s, transform .18s;
}
.aktion {
  position: sticky; bottom: var(--tastatur, 0px); z-index: 4;
  margin: 1.5rem -1.25rem 0;
  padding: .9rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  background: var(--grund);
  border-top: 1px solid var(--rand);
}
.weiter, a.weiter {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .9rem 1.5rem;
  font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none;
  background: var(--gruen); color: var(--akzent-schrift);
  border: none; border-radius: var(--radius); cursor: pointer;
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.weiter:hover { filter: brightness(.95); box-shadow: 0 6px 18px rgba(50, 62, 72, .18); }
.weiter:active { transform: translateY(1px); }
.weiter:focus-visible { outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 45%, transparent); }
.weiter[disabled], .weiter.laeuft { filter: none; cursor: default; opacity: .55; box-shadow: none; }
/* Solange Pflichtangaben fehlen: nur umrandet. Anklickbar bleibt er, sonst
   erfaehrt niemand, was noch fehlt. */
.weiter.unfertig {
  background: transparent; color: var(--schrift);
  box-shadow: inset 0 0 0 2px var(--gruen);
}
.weiter.unfertig:hover { filter: none;
  background: color-mix(in srgb, var(--gruen) 14%, transparent); }

/* ---------- Nachtrag auf der Abschlussseite ---------- */
/* Freiwillige Angaben, nachdem der Lead gesichert ist. Deshalb ruhiger
   gesetzt als das eigentliche Formular — es soll nichts mehr fordern. */
.nachtrag {
  margin-top: 2rem; padding-top: 1.6rem;
  border-top: 1px solid var(--rand);
  display: grid; gap: .9rem;
}
.nachtragkopf { margin: 0; font-size: .92rem; color: var(--gedaempft); }
.nachtragwahl { margin: 0; padding: 0; border: 0; }
/* Zwei Fragen untereinander brauchen eine Grenze, sonst liest sich die
   zweite als Fortsetzung der ersten. */
.nachtragwahl + .nachtragwahl {
  margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--rand);
}
/* Mit JavaScript wird die Antwort beim Antippen gespeichert; der zweite
   Knopf bleibt nur fuer den Fall ohne JavaScript. */
html.js .nachtrag .weiter { display: none; }
.nachtragwahl legend {
  padding: 0 0 .7rem; font-family: var(--schrift-kopf);
  font-size: 1.3rem; font-weight: 600; line-height: 1.15; color: inherit;
}
.nachtragwahl .kachel { font-size: .95rem; padding: .8rem .9rem; }
.weiter.schmal { width: auto; justify-self: start; padding: .75rem 1.6rem; font-size: .98rem; }
.notizdank {
  margin: 1.6rem 0 0; padding: .8rem 1rem;
  background: color-mix(in srgb, var(--gruen) 18%, transparent);
  border-radius: var(--radius); font-weight: 600;
}

/* ---------- Abschlussseite ---------- */
.abschlusszeichen {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border-radius: 50%; background: var(--gruen); margin-bottom: 1.3rem;
}
.abschlusszeichen svg { width: 1.8rem; height: 1.8rem; }
.abschluss .merkmale { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.abschluss .merkmale li { display: grid; gap: .15rem; padding-left: 1.3rem; position: relative; }
.abschluss .merkmale li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: .55rem; height: .55rem; background: var(--gruen); border-radius: 50%;
}
.abschluss .merkmale strong { font-family: var(--schrift-kopf);
                              font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.abschluss .merkmale span { color: var(--gedaempft); line-height: 1.5; font-size: .95rem; }

/* ---------- Bilder und Video ---------- */
.kopfbild { width: 100%; border-radius: var(--radius); display: block; margin-bottom: 1.2rem; }
.abschlussbild { width: 100%; height: auto; display: block;
                 border-radius: var(--radius); margin-bottom: 1.4rem; }
.video { margin: 0 0 1.3rem; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe, .video video { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* ---------- Einseiten-Modus ---------- */
.einseite { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.einseite .block { display: grid; gap: .7rem; }
.einseite .blockkopf { font-family: var(--schrift-kopf); font-weight: 600;
                       font-size: clamp(1.35rem, 3.5vw, 1.9rem); line-height: 1.12; margin: 0; }
.einseite .hinweis { margin: 0; }

/* ---------- Kleinkram ---------- */
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hinweisband {
  display: inline-block; margin-bottom: 1rem;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 2rem;
  background: var(--rand); color: var(--gedaempft);
}

/* ---------- Ab Tablet: der Inhalt wird eine Karte ---------- */
@media (min-width: 48rem) {
  .seitenkopf { padding: 1.5rem 2rem 1rem; max-width: calc(var(--breite) + 4rem);
                margin: 0 auto; width: 100%; }
  .segmente { padding: 0 2rem; max-width: calc(var(--breite) + 4rem); margin: 0 auto; width: 100%; }
  .inhalt {
    max-width: calc(var(--breite) + 4rem);
    padding: 2.2rem 2rem 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .karte {
    background: var(--karte-grund);
    border-radius: var(--radius-gross);
    padding: clamp(2rem, 3.5vw, 3rem);
    box-shadow: var(--karte-schatten);
  }
  .aktion {
    position: static; margin: 1.8rem 0 0; padding: 0;
    background: none; border-top: none;
    display: flex; justify-content: flex-end;
  }
  .weiter, a.weiter { width: auto; padding: .95rem 2.4rem; }
  .auswahl { gap: .75rem; }
  .fuss { padding: .9rem 2rem 1.2rem; }
}

/* ---------- Schrittwechsel ---------- */
/* Der Inhalt wird beim Wechsel geschoben statt neu geladen. Wer Bewegung
   abbestellt hat, bekommt nur einen weichen Wechsel. */
/* ---------- Schrittwechsel ---------- */
/* Die alte Flaeche bleibt als Abzug ueber der Seite stehen und blendet aus,
   waehrend die neue darunter schon einblendet. Beide sind gleichzeitig
   sichtbar, deshalb entsteht kein leerer Moment. */
.abgang {
  position: fixed; z-index: 5; margin: 0; pointer-events: none;
  animation: flaeche-geht .44s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes flaeche-geht {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-1.4rem); }
}
.inhalt.ankunft { animation: flaeche-kommt .44s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes flaeche-kommt {
  from { opacity: 0; transform: translateX(1.7rem); }
  to   { opacity: 1; transform: translateX(0); }
}
:root.rueckwaerts .abgang { animation-name: flaeche-geht-rueck; }
:root.rueckwaerts .inhalt.ankunft { animation-name: flaeche-kommt-rueck; }
@keyframes flaeche-geht-rueck {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(1.4rem); }
}
@keyframes flaeche-kommt-rueck {
  from { opacity: 0; transform: translateX(-1.7rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .abgang, .inhalt.ankunft { animation: none; }
}

/* Zeitlupe zum Hinsehen: alles Fuenffache. Wird ueber ?zeitlupe=1 gesetzt. */
:root.zeitlupe .abgang,
:root.zeitlupe .inhalt.ankunft { animation-duration: 2.75s !important; }
:root.zeitlupe .auswahl .kachel { animation-duration: 1.6s !important; }
:root.zeitlupe .kachel.gewaehlt,
:root.zeitlupe .kachel.gewaehlt::after { animation-duration: 1.6s !important; }

/* Waehrend geladen wird: der Zeiger zeigt, dass etwas passiert */
html.laedt { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  @keyframes verblassen { from { opacity: 0; } to { opacity: 1; } }
  .auswahl.entschieden .kachel:not(.gewaehlt) { opacity: 1; transform: none; }
  .kachel.gewaehlt, .kachel.gewaehlt::after { animation: none; }
  .auswahl:not(.entschieden) .kachel { animation: none; }
  .segmente i.da.neu { animation: none; }
  .abschlusszeichen, .hakenzug, .abschluss .merkmale li,
  .stoerung, .fehlerhaft.zuerst { animation: none; }
  .hakenzug { stroke-dashoffset: 0; }
}

/* ---------- Abschluss: der Haken zeichnet sich ---------- */
.abschlusszeichen { animation: kreisauf .5s cubic-bezier(.34, 1.35, .64, 1) both; }
@keyframes kreisauf {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}
.hakenzug {
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: hakenzeichnen .42s .2s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes hakenzeichnen { to { stroke-dashoffset: 0; } }
.abschluss .merkmale li { animation: kachelrein .4s cubic-bezier(0, 0, .2, 1) both; }
.abschluss .merkmale li:nth-child(1) { animation-delay: .40s; }
.abschluss .merkmale li:nth-child(2) { animation-delay: .46s; }
.abschluss .merkmale li:nth-child(3) { animation-delay: .52s; }
.abschluss .merkmale li:nth-child(4) { animation-delay: .58s; }
.abschluss .merkmale li:nth-child(n+5) { animation-delay: .64s; }

/* ---------- Verbindung weg ---------- */
.stoerung {
  position: fixed; left: 50%; z-index: 50;
  bottom: calc(1rem + env(safe-area-inset-bottom) + var(--tastatur, 0px));
  display: flex; align-items: center; gap: .8rem;
  max-width: calc(100vw - 2rem); padding: .55rem .6rem .55rem 1.1rem;
  background: #323e48; color: #fff; font-size: .92rem;
  border-radius: 999px; box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  animation: stoerungrein .3s cubic-bezier(.34, 1.3, .64, 1) both;
}
.stoerung[hidden] { display: none; }
.stoerung button {
  font: inherit; font-weight: 600; padding: .45rem 1rem; cursor: pointer;
  background: var(--gruen); color: var(--akzent-schrift);
  border: none; border-radius: 999px;
}
@keyframes stoerungrein {
  from { opacity: 0; transform: translate(-50%, 1.2rem); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Vorschau ---------- */
/* Muss erkennbar bleiben, damit niemand die Vorschau fuer den echten Flow
   haelt — aber nicht im Weg stehen. Deshalb ein kleines Schild am Rand
   statt eines Bandes ueber dem Inhalt. */
.vorschaumarke {
  position: fixed; left: .7rem; bottom: .7rem; z-index: 45;
  padding: .3rem .7rem; pointer-events: none;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; opacity: .45;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 999px;
}

/* ---------- Wieder aufgenommener Durchlauf ---------- */
.fortsetzband { display: flex; gap: .8rem; align-items: baseline;
                justify-content: space-between; flex-wrap: wrap; }
.fortsetzband a { color: inherit; font-weight: 600; white-space: nowrap; }

/* ---------- Ladestrich und Ansage ---------- */
/* Waehrend der naechste Schritt geholt wird, laeuft oben ein schmaler Strich;
   ohne ihn sieht es auf langsamen Verbindungen so aus, als sei der Klick
   verloren gegangen. */
.ladestrich {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.ladestrich span {
  display: block; height: 100%; width: 40%; background: var(--gruen);
  animation: strichlauf 1.1s ease-in-out infinite;
}
/* Erst nach einem Viertel der Sekunde: bei schneller Antwort taucht der
   Strich gar nicht erst auf und stoert die Quittung nicht. */
html.laedt .ladestrich { opacity: 1; }
@keyframes strichlauf {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

#zeitlupe-zeile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: 40vh; overflow: auto;
  padding: .5rem .8rem; background: #323e48; color: #fff;
  font: 500 .78rem/1.35 ui-monospace, monospace; pointer-events: none;
}

/* Nur fuer Vorleseprogramme */
.ansage {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

h1:focus, h1:focus-visible { outline: none; }

/* Gesperrter Weiter-Knopf */
.weiter:disabled { opacity: .45; cursor: default; filter: none; box-shadow: none; }

/* ---- Terminwahl auf der Abschlussseite ------------------------------- */
.terminwahl { margin: 1.4rem 0 0; text-align: left; }
.terminfrage { margin-bottom: .9rem; font-weight: 600; }
.termintag { margin-bottom: .9rem; }
.termindatum {
  display: block; margin-bottom: .35rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  opacity: .72;
}
.terminzeiten { display: flex; flex-wrap: wrap; gap: .4rem; }
.terminzeit {
  flex: 0 0 auto; min-width: 4.6rem; padding: .55rem .7rem;
  font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--schrift); background: transparent;
  border: 1px solid color-mix(in srgb, var(--schrift) 28%, transparent);
  border-radius: var(--rundung, .6rem);
  cursor: pointer; transition: background .15s, border-color .15s, transform .08s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.terminzeit:hover, .terminzeit:focus-visible {
  border-color: var(--gruen); background: color-mix(in srgb, var(--gruen) 14%, transparent);
}
.terminzeit:active { transform: scale(.97); }
.termindank { margin-top: 1.2rem; font-weight: 600; color: var(--gruen); }
@media (max-width: 480px) {
  .terminzeit { flex: 1 0 28%; text-align: center; }
}

/* Tagesreiter ueber den Zeiten */
.termintage {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem;
}
.termintag {
  flex: 0 0 auto; padding: .4rem .6rem; font: inherit; font-size: .8rem;
  font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--schrift); background: transparent;
  border: 1px solid color-mix(in srgb, var(--schrift) 20%, transparent);
  border-radius: var(--rundung, .6rem); opacity: .7;
  transition: background .15s, border-color .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.termintag.gewaehlt {
  opacity: 1; border-color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 16%, transparent);
}
.terminzeiten.versteckt { display: none; }

/* Feiertag zwischen den buchbaren Tagen: sichtbar, aber nicht waehlbar */
.termintag.feiertag {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .05rem; line-height: 1.15; cursor: default; opacity: 1;
  color: #b3565b;
  border-color: color-mix(in srgb, #b3565b 32%, transparent);
  background: color-mix(in srgb, #b3565b 8%, transparent);
}
.termintag.feiertag small { font-size: .68rem; font-weight: 400; opacity: .9; }
.termindatum { display: none; }

/* Gewaehlte Zeit bleibt sichtbar markiert, gebucht wird erst danach */
.terminzeit.gewaehlt {
  border-color: var(--gruen); border-width: 2px;
  background: color-mix(in srgb, var(--gruen) 18%, transparent);
  color: var(--schrift);
}
.terminbestaetigung {
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--schrift) 14%, transparent);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem;
}
.terminbestaetigung.versteckt { display: none; }
.terminwahltext { margin: 0; font-weight: 600; font-size: .95rem; }
@media (max-width: 480px) {
  .terminbestaetigung { flex-direction: column; align-items: stretch; }
  .terminbestaetigung .weiter { width: 100%; }
}

/* Gewaehlter Tag und gewaehlte Zeit: kraeftiger Rahmen in der Hausfarbe */
.termintag.gewaehlt, .terminzeit.gewaehlt {
  border-color: var(--gruen); border-width: 2px; opacity: 1;
  background: color-mix(in srgb, var(--gruen) 18%, transparent);
}

.terminzone {
  margin: .7rem 0 0; font-size: .74rem; opacity: .6; letter-spacing: .01em;
}

.terminfolge { margin: .3rem 0 0; font-size: .86rem; opacity: .75; }

/* Buchung laeuft: Sanduhr statt Knopf */
.terminlauf {
  display: flex; align-items: center; gap: .55rem;
  margin: 1rem 0 0; font-size: .9rem; font-weight: 600;
}
.terminlauf.versteckt { display: none; }
.sanduhr {
  width: 1.1rem; height: 1.1rem; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--gruen) 30%, transparent);
  border-top-color: var(--gruen); animation: sanduhr 0.9s linear infinite;
}
@keyframes sanduhr { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sanduhr { animation-duration: 2.4s; } }

.nachtragfrage {
  margin: 1.4rem 0 .2rem; font-weight: 600; font-size: .95rem; opacity: .85;
}

.direktanruf {
  margin: .9rem 0 0; padding-top: .8rem; font-size: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--schrift) 12%, transparent);
}
.direktanruf a {
  color: var(--gruen); font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.direktanruf a:hover { text-decoration: underline; }

/* ---------- Veranstaltungen: festes Zeitraster ---------- */
.veranstaltungsort {
  margin: 0 0 1.1rem; color: var(--schrift); opacity: .8; font-size: .95rem;
}
.veranstaltungsort span { display: block; opacity: .75; }
.slottag + .slottag { margin-top: 1.4rem; }
.slotdatum {
  margin: 0 0 .55rem; font-size: 1rem; font-weight: 600;
  font-family: var(--schrift-text);
}
.auswahl.zeiten {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.auswahl.zeiten .kachel {
  flex-direction: column; align-items: center; gap: .15rem;
  text-align: center;
}
.kachel.zeit .spanne { font-weight: 600; font-variant-numeric: tabular-nums; }
.kachel.zeit .plaetze { opacity: .65; font-size: .8rem; line-height: 1.3; }
/* Ausgebucht bleibt sichtbar: eine Luecke im Raster wirft mehr Fragen auf,
   als sie beantwortet. */
.kachel.zeit.belegt {
  opacity: .45; cursor: not-allowed; border-style: dashed;
}
.kachel.zeit.belegt:hover { border-color: var(--rand); box-shadow: none; transform: none; }
.kachel.zeit.belegt .spanne { text-decoration: line-through; }