/* Beratungsseite: Was uns ausmacht, Ablauf, Terminwahl und Buchungsformular.
   Farben und Formen aus seite.css (docs/gestaltung.md). */

/* „hidden“ muss gewinnen, auch gegen display: grid weiter unten */
[hidden] { display: none !important; }


.abstand-oben { margin-top: 12px; }

/* Hinweis gleich unter dem Kopf der Angehörigen-Seite */
.auch-andere { margin: 28px 16px 0; padding: 20px 22px; background: var(--flaeche); border-radius: var(--rund); font-family: var(--titel); font-weight: 600; font-size: 21px; line-height: 1.3; }

/* Was uns ausmacht: Karten mit Zeichen */
.usps { list-style: none; padding: 0; display: grid; gap: 12px; }
.usp { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; background: var(--papier); border: 1.5px solid var(--linie); border-radius: var(--rund); padding: 20px 18px; }
.usp-zeichen { width: 48px; height: 48px; border-radius: 50%; background: var(--flaeche); display: grid; place-items: center; color: var(--dunkel); }
.usp-zeichen svg { width: 26px; height: 26px; }
.usp-titel { font-family: var(--titel); font-weight: 800; font-size: 21px; line-height: 1.2; margin-bottom: 4px; }

/* Buchung */
.buchung { display: grid; gap: 28px; }
.schritt-feld { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.schritt-feld legend { font-family: var(--titel); font-weight: 800; font-size: 23px; margin-bottom: 12px; padding: 0; }
.buchung label { display: grid; gap: 6px; font-weight: 700; }
.buchung .leise { font-weight: 400; font-size: 16px; color: #6a5a72; }
.buchung input[type="text"], .buchung input[type="tel"], .buchung input[type="email"], .buchung select, .buchung textarea {
  font: inherit; font-weight: 400; color: var(--dunkel); width: 100%;
  min-height: 52px; padding: 10px 14px; border: 1.5px solid #bfa996; border-radius: 16px; background: #fff;
}
.buchung textarea { min-height: 130px; resize: vertical; }
.buchung input:focus-visible, .buchung select:focus-visible, .buchung textarea:focus-visible, .buchung button:focus-visible { outline: 3px solid var(--leuchten); outline-offset: 2px; }
[data-fuer], [data-fuer] > label { display: grid; gap: 14px; }

/* Große Auswahlknöpfe statt kleiner Kreise */
.wahl-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wahl-knoepfe.klein-wahl { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.wahl { position: relative; display: block !important; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl span { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 56px; padding: 8px 12px; border: 2px solid var(--dunkel); border-radius: var(--rund); text-align: center; font-weight: 400; }
.wahl span b { font-weight: 700; }
.wahl input:checked + span { background: var(--dunkel); color: #fff; }
.wahl input:focus-visible + span { outline: 3px solid var(--leuchten); outline-offset: 2px; }
.frage-zeile { display: grid; gap: 8px; }
.frage-zeile > p { font-weight: 700; }

/* Knöpfe für Tag und Uhrzeit */
.zeit-knopf, .tag-knopf, .mehr-knopf {
  font: inherit; font-weight: 700; color: var(--dunkel); background: var(--papier);
  border: 2px solid var(--dunkel); border-radius: 999px; padding: 8px 16px; min-height: 48px; cursor: pointer;
}
.zeit-knopf[aria-pressed="true"], .tag-knopf[aria-pressed="true"] { background: var(--dunkel); color: #fff; }
.mehr-knopf { border-style: dashed; justify-self: start; }

/* Terminwahl: erst Tag, dann Uhrzeit */
.terminschritte { display: grid; gap: 10px; }
.tage-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tag-knopf { border-radius: 18px; padding: 10px 8px; line-height: 1.25; }
.tag-knopf small { display: block; font-weight: 400; font-size: 15px; }
.uhrzeiten { display: flex; flex-wrap: wrap; gap: 8px; }

.auswahl { padding: 14px 16px; border-radius: 18px; background: var(--flaeche); font-weight: 700; }
.kaestchen label { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-weight: 400; }
.kaestchen input { width: 24px; height: 24px; margin-top: 3px; accent-color: var(--dunkel); }
.vor-kasse { font-size: 17px; margin-bottom: -14px; }
.fehler-kasten { padding: 14px 16px; border-radius: 18px; border: 2px solid #a8321f; color: #a8321f; font-weight: 700; }
.buchung [aria-invalid="true"] { border-color: #a8321f; }