/* ══════════════════════════════════════════════════════════════════════════
   Gesundheitsfragebogen und Einwilligung — Klassenpräfix .bo-

   Warum ein eigenes Blatt und nicht buchung.css mitbenutzt: der Bogen wird
   auch AUSGEDRUCKT (Verwaltung, Archiv), die Buchung nie. Am Ende dieser
   Datei steht deshalb ein vollständiger Druck-Abschnitt, der die ganze
   Bildschirm-Mechanik wieder abräumt.
   ══════════════════════════════════════════════════════════════════════════ */

.bo {
  max-width: 56rem;
  margin-inline: auto;
  scroll-margin-top: clamp(5rem, 9vh, 7rem);
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: 16px;
  overflow: hidden;
}

/* ── Schrittanzeige ───────────────────────────────────────────────────── */

.bo-weg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--linie);
  background: var(--creme-2);
}
.bo-weg-punkt {
  display: grid;
  gap: .3rem;
  padding: .95rem .5rem .8rem;
  text-align: center;
  position: relative;
  color: var(--tinte-leise);
  transition: color .3s var(--weich);
}
.bo-weg-punkt[data-jetzt="1"] { color: var(--tinte); }
.bo-weg-punkt[data-fertig="1"] { color: var(--gold-tief, var(--gold-text)); }
.bo-weg-punkt::after {
  content: ""; position: absolute; inset: auto 0 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--auf);
}
.bo-weg-punkt[data-jetzt="1"]::after,
.bo-weg-punkt[data-fertig="1"]::after { transform: scaleX(1); }
.bo-weg-nr   { font: 400 .62rem/1 var(--mono); letter-spacing: .16em; }
.bo-weg-name { font: 500 .8rem/1.2 var(--grotesk); }
@media (max-width: 44rem) { .bo-weg-name { display: none; } }

/* ── Bühne ────────────────────────────────────────────────────────────── */

.bo-buehne { padding: clamp(1.4rem, 4vw, 2.4rem); }
.bo-schritt { display: none; }
.bo-schritt[data-jetzt="1"] { display: block; animation: bo-rein .4s var(--auf); }
@keyframes bo-rein { from { opacity: 0; transform: translateY(10px); } }

.bo-titel {
  font: 400 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.2 var(--serif);
  margin: 0 0 .35rem;
}
.bo-unter {
  color: var(--tinte-leise);
  font-size: .95rem;
  margin: 0 0 1.6rem;
  max-width: 42rem;
}

/* ── Gruppen innerhalb eines Schrittes ────────────────────────────────── */

.bo-gruppe { margin-bottom: 2.2rem; }
.bo-gruppe:last-child { margin-bottom: 0; }
.bo-gruppe > h3 {
  font: 500 .68rem/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-tief, var(--gold-text));
  margin: 0 0 .2rem;
}
.bo-gruppe > .bo-frage {
  font: 400 1.15rem/1.35 var(--serif);
  margin: 0 0 .9rem;
}
.bo-gruppe > .bo-erklaerung {
  color: var(--tinte-leise);
  font-size: .88rem;
  line-height: 1.6;
  margin: -.5rem 0 1rem;
  max-width: 40rem;
}

/* ── Felder ───────────────────────────────────────────────────────────── */

.bo-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 1.1rem;
}
.bo-feld { display: grid; gap: .35rem; }
.bo-feld.bo-breit { grid-column: 1 / -1; }

.bo-feld > label {
  font: 500 .82rem/1.3 var(--grotesk);
  color: var(--tinte);
}
.bo-feld > label .bo-pflicht { color: #A03A2C; margin-left: .15em; }
.bo-feld > label .bo-frei {
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .06em;
  color: var(--tinte-leise);
  margin-left: .4em;
  text-transform: uppercase;
}

.bo-feld input[type="text"],
.bo-feld input[type="tel"],
.bo-feld input[type="email"],
.bo-feld input[type="date"],
.bo-feld textarea,
.bo-feld select {
  width: 100%;
  min-height: 46px;
  padding: .65rem .8rem;
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--creme);
  color: var(--tinte);
  font: 400 1rem/1.4 var(--grotesk);
  /* 16px auf dem iPhone, sonst zoomt Safari beim Antippen hinein. */
  font-size: max(1rem, 16px);
  transition: border-color .2s var(--weich), box-shadow .2s var(--weich);
}
.bo-feld textarea { min-height: 6.5rem; resize: vertical; line-height: 1.55; }
.bo-feld input:focus-visible,
.bo-feld textarea:focus-visible,
.bo-feld select:focus-visible {
  outline: none;
  border-color: var(--gold-tief, var(--gold-text));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 32%, transparent);
}
.bo-feld input[aria-invalid="true"],
.bo-feld textarea[aria-invalid="true"] { border-color: #A03A2C; }

.bo-fehler {
  font: 500 .8rem/1.4 var(--grotesk);
  color: #8E2F22;
  display: none;
}
.bo-feld[data-fehler="1"] .bo-fehler { display: block; }

.bo-hilfe { font-size: .8rem; color: var(--tinte-leise); line-height: 1.5; }

/* ── Ja/Nein-Paare ────────────────────────────────────────────────────── */

.bo-jn { display: grid; gap: .55rem; }
.bo-jn-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem 1rem;
  align-items: center;
  padding: .75rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--creme);
  transition: border-color .25s var(--weich), background .25s var(--weich);
}
.bo-jn-zeile[data-gesetzt="ja"]   { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--creme)); }
.bo-jn-zeile[data-gesetzt="nein"] { border-color: var(--linie-stark); }
.bo-jn-text { font: 400 .96rem/1.45 var(--grotesk); }
.bo-jn-text small { display: block; color: var(--tinte-leise); font-size: .82rem; margin-top: .15rem; }

.bo-schalter { display: flex; gap: .3rem; }
.bo-schalter button {
  min-width: 4.2rem;
  min-height: 40px;
  padding: 0 .9rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--creme);
  color: var(--tinte);
  cursor: pointer;
  font: 500 .88rem/1 var(--grotesk);
  transition: background .2s var(--weich), color .2s var(--weich), border-color .2s var(--weich);
}
.bo-schalter button[aria-pressed="true"] {
  background: var(--espresso);
  color: var(--creme);
  border-color: var(--espresso);
}
.bo-schalter button:hover { border-color: var(--espresso); }
@media (max-width: 30rem) {
  .bo-jn-zeile { grid-template-columns: 1fr; }
  .bo-schalter { justify-content: flex-start; }
}

/* Zusatzfeld, das erst erscheint, wenn "Ja" gewählt ist. */
.bo-nach {
  grid-column: 1 / -1;
  display: none;
  padding-top: .35rem;
  border-top: 1px dashed var(--linie-stark);
  margin-top: .25rem;
}
.bo-jn-zeile[data-gesetzt="ja"] .bo-nach { display: grid; gap: .3rem; animation: bo-rein .3s var(--auf); }
.bo-nach label { font: 500 .78rem/1.3 var(--grotesk); color: var(--tinte-leise); }

/* ── Ankreuzfelder (Allergien, Wünsche) ───────────────────────────────── */

.bo-haken { display: flex; flex-wrap: wrap; gap: .5rem; }
.bo-haken label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: 0 .95rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  cursor: pointer;
  font: 400 .9rem/1 var(--grotesk);
  transition: background .2s var(--weich), border-color .2s var(--weich), color .2s var(--weich);
}
.bo-haken input { accent-color: var(--espresso); width: 1.05rem; height: 1.05rem; }
.bo-haken label:has(input:checked) {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--creme);
}
.bo-haken label:has(input:checked) input { accent-color: var(--gold); }
.bo-haken label:has(input:focus-visible) { outline: 2px solid var(--gold-tief, var(--gold-text)); outline-offset: 2px; }

/* ── Warnkarte bei einem Grenzfall ────────────────────────────────────── */

.bo-warnung {
  display: none;
  margin: 1.4rem 0 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid #C9A24A;
  border-left: 4px solid #B8892C;
  border-radius: 12px;
  background: #FFF8EA;
  color: #4A3A18;
}
.bo-warnung[data-da="1"] { display: block; animation: bo-rein .35s var(--auf); }
.bo-warnung h4 {
  font: 600 .95rem/1.3 var(--grotesk);
  margin: 0 0 .4rem;
  color: #6B4E14;
}
.bo-warnung p  { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.6; }
.bo-warnung ul { margin: .3rem 0 .6rem; padding-left: 1.15rem; font-size: .9rem; line-height: 1.6; }
.bo-warnung p:last-child, .bo-warnung ul:last-child { margin-bottom: 0; }

/* ── Aufklärungstext ──────────────────────────────────────────────────── */

.bo-text {
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--creme-2);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.4rem;
  font-size: .92rem;
  line-height: 1.65;
}
.bo-text h4 {
  font: 600 .9rem/1.3 var(--grotesk);
  margin: 1.2rem 0 .35rem;
}
.bo-text h4:first-child { margin-top: 0; }
.bo-text p  { margin: 0 0 .7rem; }
.bo-text ul { margin: .2rem 0 .8rem; padding-left: 1.15rem; }
.bo-text li { margin-bottom: .3rem; }
.bo-text p:last-child, .bo-text ul:last-child { margin-bottom: 0; }
.bo-text a { color: var(--gold-tief, var(--gold-text)); }

/* ── Einwilligungen ───────────────────────────────────────────────────── */

.bo-ein { display: grid; gap: .8rem; }
.bo-ein-karte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--creme);
  cursor: pointer;
  transition: border-color .25s var(--weich), background .25s var(--weich);
}
.bo-ein-karte:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--creme));
}
.bo-ein-karte:has(input:focus-visible) { outline: 2px solid var(--gold-tief, var(--gold-text)); outline-offset: 2px; }
.bo-ein-karte input { accent-color: var(--espresso); width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.bo-ein-kopf { font: 600 .95rem/1.4 var(--grotesk); }
.bo-ein-kopf .bo-marke {
  display: inline-block;
  margin-left: .5em;
  padding: .12em .55em;
  border-radius: 999px;
  font: 500 .64rem/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: .12em;
}
/* Mit .bo-ein-kopf davor, nicht ohne. Die Regel .bo-ein-kopf .bo-marke
   oben ist spezifischer (0,2,0 gegen 0,1,0) — eine blosse .bo-marke-pflicht
   setzt zwar den Hintergrund, aber die Schriftfarbe erbt weiter von
   .bo-ein-kopf. Ergebnis war Espresso auf Espresso: Kontrast 1,00, die
   Marke „Pflicht" schlicht unlesbar. Im Bildschirmfoto faellt so etwas nicht
   auf, weil man dort ein dunkles Feld sieht und den Text nicht vermisst. */
.bo-ein-kopf .bo-marke-pflicht    { background: var(--espresso); color: var(--creme); }
.bo-ein-kopf .bo-marke-freiwillig { background: var(--creme-3);  color: var(--tinte); }
.bo-ein-text {
  grid-column: 2;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--tinte-leise);
}
.bo-ein-karte[data-fehler="1"] { border-color: #A03A2C; background: #FDF3F1; }

/* ── Unterschrift ─────────────────────────────────────────────────────── */

.bo-sig-rahmen {
  position: relative;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--creme);
  overflow: hidden;
  touch-action: none;   /* sonst scrollt das Handy beim Unterschreiben weg */
}
.bo-sig-rahmen[data-fehler="1"] { border-color: #A03A2C; }
.bo-sig {
  display: block;
  width: 100%;
  height: 11rem;
  cursor: crosshair;
}
/* Die Linie, auf der unterschrieben wird — reine Deko, liegt hinter dem Bild. */
.bo-sig-linie {
  position: absolute;
  inset: auto 1.5rem 2.6rem;
  height: 1px;
  background: var(--linie-stark);
  pointer-events: none;
}
.bo-sig-hinweis {
  position: absolute;
  inset: auto 0 .9rem;
  text-align: center;
  font: 400 .8rem/1 var(--grotesk);
  color: var(--tinte-leise);
  pointer-events: none;
  transition: opacity .25s var(--weich);
}
.bo-sig-rahmen[data-gemalt="1"] .bo-sig-hinweis { opacity: 0; }

.bo-sig-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .6rem;
}
.bo-sig-leiste button {
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
  font: 500 .85rem/1 var(--grotesk);
}
.bo-sig-leiste button:hover { border-color: var(--espresso); }
.bo-sig-ort { font-size: .85rem; color: var(--tinte-leise); }

/* ── Zusammenfassung vor dem Abschicken ───────────────────────────────── */

.bo-pruef { display: grid; gap: .1rem; }
.bo-pruef-zeile {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: .3rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: .92rem;
  line-height: 1.55;
}
.bo-pruef-zeile:last-child { border-bottom: 0; }
.bo-pruef-zeile dt { font: 500 .78rem/1.5 var(--mono); letter-spacing: .05em;
                     text-transform: uppercase; color: var(--tinte-leise); }
.bo-pruef-zeile dd { margin: 0; }
.bo-pruef-leer { color: var(--tinte-leise); font-style: italic; }
@media (max-width: 34rem) { .bo-pruef-zeile { grid-template-columns: 1fr; } }

/* ── Fußleiste mit Zurück/Weiter ──────────────────────────────────────── */

.bo-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.4rem, 4vw, 2.4rem);
  border-top: 1px solid var(--linie);
  background: var(--creme-2);
}
.bo-fuss .bo-links { display: flex; gap: .6rem; align-items: center; }
/* Nicht --tinte-leise: auf der getönten Fußleiste kommt die Farbe bei
   12 px nur auf 4,44 und fällt damit knapp durch. Diese Stufe hält 5,0. */
.bo-fuss .bo-stand { font: 400 .78rem/1.4 var(--mono); color: #605648; }

/* ── Fertig-Ansicht ───────────────────────────────────────────────────── */

.bo-fertig { text-align: center; padding: clamp(2rem, 6vw, 3.4rem) 1.4rem; }
.bo-fertig-kreis {
  width: 4.6rem; height: 4.6rem;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 22%, var(--creme));
  display: grid; place-items: center;
}
.bo-fertig-kreis svg { width: 2.1rem; height: 2.1rem; }
.bo-fertig-kreis path {
  stroke: var(--gold-tief, var(--gold-text));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: bo-haken .55s .15s var(--auf) forwards;
}
@keyframes bo-haken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bo-fertig-kreis path { animation: none; stroke-dashoffset: 0; }
  .bo-schritt[data-jetzt="1"] { animation: none; }
}
.bo-fertig h3 { font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.2 var(--serif); margin-bottom: .6rem; }
.bo-fertig p  { color: var(--tinte-leise); max-width: 34rem; margin: 0 auto .8rem; }
.bo-fertig-nr {
  display: inline-block;
  margin-top: .8rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  font: 400 .95rem/1 var(--mono);
  letter-spacing: .08em;
}

/* ── Ladebalken beim Absenden ─────────────────────────────────────────── */

.bo-laedt { position: relative; pointer-events: none; }
.bo-laedt::after {
  content: "";
  position: absolute; inset: auto 0 0;
  height: 2px;
  background: var(--gold);
  animation: bo-band 1.1s linear infinite;
}
@keyframes bo-band {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   DRUCK — die Fassung, die in den Ordner kommt.

   Auf Papier gibt es keine Schritte und keine Knöpfe: alles untereinander,
   schwarz auf weiß, mit Rand zum Abheften.
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
  @page { size: A4; margin: 16mm 14mm 14mm; }

  body { background: #fff !important; color: #000 !important; }
  .kopf, .fuss, .springen, .bo-weg, .bo-fuss, .bo-sig-leiste,
  .bo-schalter, .hinweis, noscript { display: none !important; }

  .bo { border: 0; border-radius: 0; max-width: none; background: #fff; }
  .bo-buehne { padding: 0; }

  /* Auf Papier ist jeder Schritt sichtbar, auch der gerade nicht gewählte. */
  .bo-schritt { display: block !important; animation: none !important;
                page-break-inside: auto; margin-bottom: 8mm; }
  .bo-gruppe  { page-break-inside: avoid; margin-bottom: 5mm; }

  .bo-titel { font-size: 13pt; margin-bottom: 1mm; }
  .bo-unter { font-size: 9pt; margin-bottom: 4mm; }
  .bo-jn-zeile, .bo-ein-karte, .bo-text, .bo-warnung {
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
    padding: 2mm 3mm;
  }
  .bo-sig-rahmen { border: 1px solid #999; }
  .bo-sig { height: 28mm; }
  a { color: #000 !important; text-decoration: none; }
}