/* Terminbuchung (Meilenstein 5) und Kontaktformular. */

.buchung {
  display: grid;
  /* minmax(0, 1fr): sonst wird die Spalte so breit wie die ganze Reihe der
     Tage, und die Box läuft am Handy rechts aus dem Bild */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  box-shadow: var(--shadow);
  max-width: 980px;
}
html.mit-js .buchung [data-ohne-js] { display: none; }
.buchung > * { min-width: 0; }
.buchung__hinweis, .buchung__laedt { color: var(--muted); margin: 0; }
.buchung__titel { display: flex; align-items: baseline; gap: .6em; font-size: 1.05rem; margin-bottom: 14px; flex-wrap: wrap; }
.buchung__titel small { font-weight: 400; color: var(--muted); font-size: .92rem; }
.buchung__nr {
  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: .8rem; font-weight: 800; flex: none;
}
/* Zwei Wochen als Kalender, Spalten Montag bis Freitag. Keine Laufleiste mehr:
   die schnitt am Rand Kacheln ab und sah aus wie herausgerutscht */
.buchung__tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 10px); max-width: 560px; padding: 4px 0 2px; }
.buchung__tage > p { grid-column: 1 / -1; }
.buchung__tag, .buchung__zeit {
  font: inherit; color: var(--fg); cursor: pointer; border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--radius); transition: border-color .2s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.buchung__tag { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 12px 4px; }
.buchung__tag[data-wt="1"] { grid-column: 1; }
.buchung__tag[data-wt="2"] { grid-column: 2; }
.buchung__tag[data-wt="3"] { grid-column: 3; }
.buchung__tag[data-wt="4"] { grid-column: 4; }
.buchung__tag[data-wt="5"] { grid-column: 5; }
.buchung__tag b { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.buchung__tag span { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buchung__tag i { font-style: normal; }
.buchung__tag small { font-size: .72rem; color: var(--muted); white-space: nowrap; }
/* schmale Handys: nur der Tag, der Monat steht in der Überschrift */
@media (max-width: 479px) {
  .buchung__tag { padding: 10px 2px; }
  .buchung__tag i { display: none; }
  .buchung__tag b { font-size: .72rem; letter-spacing: .04em; }
  .buchung__tag small { font-size: .66rem; }
}
.buchung__zeiten { display: grid; gap: 16px; }
.buchung__gruppe { display: grid; gap: 8px; }
.buchung__gruppe > span { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.buchung__gruppe > div { display: flex; flex-wrap: wrap; gap: 8px; }
.buchung__zeit { padding: 10px 14px; min-width: 76px; font-variant-numeric: tabular-nums; font-weight: 600; }
.buchung__tag:hover, .buchung__zeit:hover { border-color: var(--accent); }
.buchung__tag[aria-pressed="true"], .buchung__zeit[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.buchung__tag[aria-pressed="true"] b, .buchung__tag[aria-pressed="true"] small { color: var(--on-accent); }
.buchung__formular { display: grid; gap: 16px; }
.buchung__stufen { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.buchung__stufen legend { font-size: .9rem; font-weight: 600; margin-bottom: 8px; padding: 0; }
.buchung__stufen label { position: relative; cursor: pointer; }
.buchung__stufen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.buchung__stufen label span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); font-weight: 800; transition: background-color .2s ease, border-color .2s ease; }
.buchung__stufen input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.buchung__stufen input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.buchung__stufe-text { margin: 0 0 0 6px; color: var(--muted); font-size: .92rem; }
.buchung__meldung { margin: 0; font-weight: 600; color: #FF8A7A; }
.buchung__klein { margin: 0; font-size: .82rem; color: var(--muted); }
.buchung__erfolg { padding: 8px 0; outline: none; }
.buchung__erfolg h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-style: var(--display-style); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.buchung__erfolg p { color: var(--muted); }
.feld input[aria-invalid="true"] { border-color: #FF6B5B; box-shadow: 0 0 0 3px rgb(255 107 91 / .2); }
.buchung:is([data-stufe="1"], [data-stufe="1"] *) .buchung__meldung, .buchung:is([data-stufe="2"], [data-stufe="2"] *) .buchung__meldung { color: #B42318; }
.buchung:is([data-stufe="1"], [data-stufe="1"] *) { border-radius: 0; box-shadow: none; background: #FFFFFF; border-color: #000; }

.schreiben { margin-top: clamp(48px, 7vw, 80px); max-width: 760px; }
.schreiben__titel { font-size: 1.25rem; margin-bottom: 1rem; }
.formular { display: grid; gap: 16px; }
.formular__zeile { display: grid; gap: 16px; }
@media (min-width: 640px) { .formular__zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.feld__optional { font-weight: 400; color: var(--muted); }
.feld input, .feld textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--fg);
  font-weight: 400;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color var(--uebergang) ease;
}
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.formular .knopf { justify-self: start; }
.formular__honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__meldung { font-weight: 600; }
.form__msg--ok { color: var(--fg); }
.form__msg--err { color: #E5484D; }
.form__msg--err:is([data-stufe="1"], [data-stufe="1"] *), .form__msg--err:is([data-stufe="2"], [data-stufe="2"] *) { color: #B42318; }

.feld:is([data-stufe="1"], [data-stufe="1"] *) { font-weight: 400; }
.feld:is([data-stufe="1"], [data-stufe="1"] *) input, .feld:is([data-stufe="1"], [data-stufe="1"] *) textarea { border: 1px solid #767676; border-radius: 0; min-height: 0; padding: 2px 4px; }
.feld:is([data-stufe="1"], [data-stufe="1"] *) input:focus, .feld:is([data-stufe="1"], [data-stufe="1"] *) textarea:focus { box-shadow: none; outline: 2px solid #000; }

.direkt { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-wrap: wrap; gap: 10px 36px; color: var(--muted); }
.direkt a { font-weight: 700; margin-left: .4em; }