/* visper fasnacht — anmeldung (/anfrage/) und merci (/merci/)
 *
 * beide seiten stehen auf der weichgezeichneten visper kulisse (fest hinter der
 * seite) und zeigen ihren inhalt auf einem weissen blatt mit dem roten rahmen
 * der marke. dazu das formular: felder, eigene checkboxen und radios, fehler,
 * absenden. das verhalten macht assets/js/anmeldung.js (nur auf /anfrage/).
 *
 * zustände (von anmeldung.js gesetzt):
 *   form[data-aktiv]              skript läuft (nicht im editor)
 *   form[data-sendet]             wird gerade gesendet
 *   .formular__meldung.ist-offen  fehler-zusammenfassung bzw. sendefehler sichtbar
 *   [aria-invalid], .hat-fehler   feld bzw. gruppe mit fehler
 */

/* ————— kulisse ————— */

/* fest hinter allem (z-index -1 über dem hintergrund der seite). 100vh statt
   inset:0 — auf ios ist das das grosse viewport, das bild springt beim
   scrollen nicht mit der adressleiste */
.kulisse {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: var(--rosa);
}
.kulisse img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}

/* ————— blatt: die weisse karte über der kulisse ————— */

.formularseite {
  padding-block: clamp(20px, .5rem + 3vw, 64px) clamp(40px, 1.5rem + 4vw, 104px);
}
@media (max-width: 479px) {
  .formularseite > .rahmen { padding-inline: 12px; }
}

.blatt {
  position: relative;
  padding: clamp(20px, .6rem + 3.4vw, 56px);
  border: 5px solid var(--rot);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  box-shadow: 0 34px 70px -38px rgb(126 2 4 / .6);
}

.blatt__kopf {
  display: grid;
  gap: .75rem;
  justify-items: start;
}
.blatt__titel {
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.1rem);
  text-wrap: balance;
}
.blatt__kontakt {
  font-size: var(--text-klein);
  line-height: 1.5;
}
.blatt__kontakt .linie { display: inline-block; padding-block: 2px; }

.blatt__zu {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(24px, 1rem + 2vw, 40px);
}

/* ————— formular: aufbau ————— */

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* legenden als normale blöcke (float): sonst sitzen sie auf der rahmenlinie
   des fieldsets und halten sich an keinen abstand */
.person__titel,
.tag__titel,
.auftritte__frage {
  float: left;
  width: 100%;
  padding: 0;
}
.person__titel + *,
.tag__titel + *,
.auftritte__frage + * { clear: both; }

.formular {
  display: grid;
  gap: clamp(32px, 1.4rem + 2.4vw, 52px);
  margin-top: clamp(24px, 1rem + 2vw, 40px);
  padding-top: clamp(24px, 1rem + 2vw, 40px);
  border-top: 1px solid var(--rosa-kraeftig);
  counter-reset: teil;
  container-type: inline-size;
}
.formular__pflicht { margin-bottom: calc(-1 * clamp(12px, .4rem + 1.4vw, 28px)); font-size: var(--text-klein); }

.formular__teil {
  display: grid;
  gap: 1.1rem;
  counter-increment: teil;
}
/* abschnitte mit nummer im roten kreis (die nummer liest kein screenreader) */
.formular__titel {
  display: flex;
  align-items: center;
  gap: .55em;
  font-family: var(--schrift-titel);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--rot);
}
.formular__titel::before {
  content: counter(teil);
  content: counter(teil) / "";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: var(--rot-text);
  color: var(--weiss);
  font: 700 .72em/1 var(--schrift-text);
}

.formular__raster {
  display: grid;
  gap: 16px 18px;
}
@container (min-width: 440px) {
  .formular__raster { grid-template-columns: 1fr 1fr; }
  .feld--breit { grid-column: 1 / -1; }
}

/* ————— textfelder ————— */

.feld {
  display: grid;
  gap: 6px;
  align-content: start;
}
.feld__label {
  font-weight: 700;
  line-height: 1.35;
  color: var(--weinrot);
}
.feld__pflicht { color: var(--rot-text); }

/* rand #b07a7b: 3.5:1 auf weiss (nicht-text-kontrast), schrift ≥ 16 px (kein zoom auf ios) */
.feld__eingabe {
  width: 100%;
  min-height: 50px;
  padding: .7rem .85rem;
  border: 2px solid #b07a7b;
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--weinrot);
  font-size: max(1rem, 16px);
  line-height: 1.4;
  transition: border-color var(--schnell) ease, background-color var(--schnell) ease;
}
.feld__eingabe:hover { border-color: var(--weinrot); }
.feld__eingabe:focus { border-color: var(--weinrot); }
.feld__eingabe:focus-visible { outline: 3px solid var(--weinrot); outline-offset: 2px; }
.feld__eingabe--text {
  min-height: 9.5rem;
  resize: vertical;
}
.feld__eingabe[aria-invalid="true"] {
  border-color: var(--rot-text);
  background: #fff7f7;
}

/* ————— kontaktpersonen: je eine rosa fläche ————— */

.person {
  --rot-text: var(--rot-auf-rosa);
  padding: clamp(16px, .6rem + 1.2vw, 22px);
  border-radius: var(--radius);
  background: var(--rosa);
}
.person + .person { margin-top: 2px; }
.person__titel {
  margin-bottom: 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--weinrot);
}
.person .feld__eingabe[aria-invalid="true"] { background: var(--weiss); }

/* ————— teilnahme pro tag ————— */

.tag { display: block; }
.tag + .tag { margin-top: clamp(12px, .4rem + 1vw, 20px); }
.tag__titel {
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
  line-height: 1.2;
  color: var(--rot-text);
}
.tag__frage {
  margin-top: 4px;
  font-size: var(--text-klein);
}
.wahlen {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.wahlen__oder {
  padding-left: 16px;
  font-size: var(--text-klein);
  font-weight: 700;
}

/* ————— checkboxen und radios im markenstil ————— */

/* die ganze kachel ist klickbar (label::before deckt sie ab), das kästchen
   26 px mit eigenem rand (3.5:1) und dem fokusring der seite */
.wahl {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--rosa-kraeftig);
  border-radius: var(--radius);
  background: var(--weiss);
  transition: border-color var(--schnell) ease, background-color var(--schnell) ease, opacity var(--schnell) ease;
}
.wahl:hover { border-color: #b07a7b; }
.wahl:has(> .wahl__feld:checked) {
  --rot-text: var(--rot-auf-rosa);
  border-color: var(--rot-text);
  background: var(--rosa);
}
.wahl__feld {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 2px solid #b07a7b;
  border-radius: 6px;
  background: var(--weiss) 50% 50% / 18px 18px no-repeat;
  cursor: pointer;
  transition: background-color var(--schnell) ease, border-color var(--schnell) ease;
}
.wahl__feld:checked {
  border-color: var(--rot-text);
  background-color: var(--rot-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3.5 9.4 3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wahl__feld[type="radio"] { border-radius: 50%; }
.wahl__feld[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 5px var(--weiss);
}
.wahl__feld:focus-visible { outline: 3px solid var(--weinrot); outline-offset: 2px; }
/* windows-kontrastmodus: das kästchen bleibt sichtbar */
@media (forced-colors: active) {
  .wahl__feld { appearance: auto; -webkit-appearance: auto; }
}

.wahl__text {
  flex: 1;
  padding-top: 2px;
  line-height: 1.4;
  cursor: pointer;
}
.wahl__text::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* der text liegt über der klickfläche — im editor lässt er sich so anwählen */
.wahl__text > span { position: relative; }

/* «nicht teil» angekreuzt: die übrigen verblassen (sie bleiben anklickbar —
   ein klick hebt «nicht teil» wieder auf). nur der text: der rand der
   kästchen behält seinen kontrast (≥ 3:1). nur mit laufendem anmeldung.js */
.formular[data-aktiv] .tag:has([data-nicht-dabei]:checked) .wahl:not(.wahl--nicht) .wahl__text { opacity: .7; }

/* frage nach den bühnenauftritten: eingerückt unter «bühne», nur wenn
   «bühne» angekreuzt ist (im editor immer, ohne :has-unterstützung auch) */
.auftritte {
  margin: 10px 0 2px 26px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--rosa-kraeftig);
}
.auftritte__frage {
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.auftritte__wahlen {
  display: grid;
  gap: 10px;
}
@container (min-width: 440px) {
  .auftritte__wahlen { grid-template-columns: repeat(2, minmax(0, 13rem)); }
}
@supports selector(:has(*)) {
  html:not([data-modus="bearbeiten"]) .buehne:not(:has([data-steuert]:checked)) > .auftritte { display: none; }
}

/* ————— fehler ————— */

.feld__fehler {
  display: flex;
  align-items: flex-start;
  gap: .45em;
  color: var(--rot-text);
  font-size: var(--text-klein);
  font-weight: 700;
  line-height: 1.4;
}
.feld__fehler::before {
  content: "!";
  content: "!" / "";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-top: .05em;
  border-radius: 50%;
  background: var(--rot-text);
  color: var(--weiss);
  font-size: .85em;
  line-height: 1;
}
.tag > .feld__fehler,
.auftritte > .feld__fehler { margin-top: 10px; }
.tag.hat-fehler > .wahlen,
.auftritte.hat-fehler > .auftritte__wahlen {
  padding-left: 12px;
  border-left: 4px solid var(--rot-text);
}

/* zusammenfassung oben und sendefehler unten: nur wenn es etwas zu melden
   gibt. im editor sichtbar (die texte sind dort bearbeitbar) */
html:not([data-modus="bearbeiten"]) .formular__meldung:not(.ist-offen) { display: none; }
.formular__meldung { scroll-margin-top: calc(var(--kopf-h) + 24px); }
.formular__meldung:focus { outline: 3px solid var(--weinrot); outline-offset: 3px; }
.formular__meldungstitel { font-size: 1.0625rem; }
.formular__fehlerliste {
  display: grid;
  gap: .35rem;
  margin-top: .6rem;
  padding-left: 1.2em;
  font-weight: 400;
}
.formular__fehlerliste a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.formular__fehlerliste a:hover { text-decoration-thickness: 2px; }
.formular__meldung .linie { color: inherit; }
html[data-modus="bearbeiten"] .formular__meldung { position: relative; padding-top: 30px; }
html[data-modus="bearbeiten"] .formular__meldung::before {
  content: "Live nur sichtbar, wenn etwas fehlt oder das Senden nicht klappt";
  position: absolute;
  top: 6px;
  left: 1.25rem;
  font-size: .75rem;
  font-weight: 700;
  opacity: .75;
}

/* ————— honigtopf (spam-schutz) ————— */

.falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ————— absenden ————— */

.formular__ende {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  padding-top: clamp(24px, 1rem + 1.5vw, 36px);
  border-top: 1px solid var(--rosa-kraeftig);
}
.formular__ende > .formular__meldung { justify-self: stretch; }
.formular__datenschutz { font-size: var(--text-klein); }
.formular__absenden {
  min-width: min(100%, 17rem);
  min-height: 54px;
  font-size: 1.0625rem;
}
@media (max-width: 479px) {
  .formular__absenden { width: 100%; }
}
.formular__absenden-senden { display: none; }
.formular[data-sendet] .formular__absenden-text { display: none; }
.formular[data-sendet] .formular__absenden-senden {
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.formular[data-sendet] .formular__absenden-senden::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: drehen .8s linear infinite;
}
.formular[data-sendet] .formular__absenden,
.formular[data-sendet] .formular__absenden:hover {
  border-color: var(--weinrot);
  background: var(--weinrot);
  opacity: 1;
  cursor: progress;
}
@keyframes drehen {
  to { transform: rotate(1turn); }
}

/* ————— merci ————— */

.merci {
  display: grid;
  align-content: center;
  min-height: calc(100vh - var(--kopf-h));
  min-height: calc(100svh - var(--kopf-h));
  padding-top: clamp(64px, 3rem + 5vw, 120px);
}
.merci__rahmen { max-width: calc(640px + 2 * var(--rand)); }
.merci__blatt {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  padding-top: clamp(64px, 3rem + 3vw, 88px);
  text-align: center;
}
/* die trompete sitzt auf dem rahmen des blatts, mit rotem ring wie das blatt */
.merci__trompete {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(104px, 80px + 6vw, 140px);
  box-shadow: 0 0 0 5px var(--rot), 0 20px 40px -24px rgb(126 2 4 / .6);
  transform: translate(-50%, -58%);
}
.merci__titel {
  display: grid;
  gap: .15em;
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.05;
  color: var(--rot);
  text-wrap: balance;
}
.merci__titel-gross { font-size: clamp(3rem, 2rem + 5vw, 5rem); letter-spacing: -.01em; }
.merci__titel-klein { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); color: var(--rot-text); }
.merci__text { font-size: var(--text-gross); line-height: 1.5; text-wrap: pretty; }
.merci__weiter {
  --rot-text: var(--rot-auf-rosa);
  display: grid;
  gap: .4rem;
  width: 100%;
  padding: clamp(16px, .8rem + 1vw, 24px);
  border-radius: var(--radius);
  background: var(--rosa);
}
.merci__weiter-titel {
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
  line-height: 1.2;
  color: var(--rot-text);
}
.merci__fragen { display: grid; gap: .2rem; }
.merci__fragen .linie { display: inline-block; padding-block: 4px; }
.merci__knoepfe { justify-content: center; margin-top: .25rem; }