/* Beratungsgespraech ohne Konto — /beratung.html
   ------------------------------------------------------------------
   Eigene Datei statt eines Anhaengsels an site.css, damit die anderen
   Seiten keinen neuen Cache-Schluessel brauchen (site.css steht dort
   ueberall als ?v=7). Hier drin steht NUR, was es auf site.css nicht
   schon gibt: die Terminauswahl.

   Alle Farben kommen aus den Tokens von site.css — die Seite muss den
   Hell/Dunkel-Umschalter genauso mitmachen wie der Rest. Lime als TEXT
   immer ueber --lime-text (das rohe --lime hat auf Weiss 1.7:1). */

/* ---------- Terminauswahl ---------- */
.slotbox{
  background:var(--card-2);border:1px solid var(--line);border-radius:12px;
  padding:20px 18px;
}
.slotbox[data-state="loading"],
.slotbox[data-state="empty"],
.slotbox[data-state="error"]{color:var(--muted);font-size:15px;line-height:1.6}

/* Ein Tag = eine Zeile mit Datum und darunter die Uhrzeiten. Die Tage
   scrollen senkrecht, damit bei 21 Tagen Vorlauf nichts abgeschnitten
   wird und der Rest des Formulars sichtbar bleibt. */
.slotdays{display:flex;flex-direction:column;gap:18px;max-height:360px;overflow-y:auto;padding-right:4px}
.slotday-label{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.slottimes{display:flex;flex-wrap:wrap;gap:8px}

.slot{
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;
  padding:11px 15px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);color:var(--h);
  transition:border-color .15s,background .15s,color .15s;
}
.slot:hover{border-color:var(--lime-text)}
.slot:focus-visible{outline:2px solid var(--lime-text);outline-offset:2px}
.slot[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}

/* Gewaehlter Termin als Klartext ueber dem Knopf — eine Chip-Farbe allein
   ist zu wenig, wenn der Knopf nach dem Scrollen nicht mehr im Bild ist. */
.slotpick{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--lime-text);border-radius:10px;
  padding:13px 15px;font-size:15px;color:var(--h);background:var(--lime-soft);
}
.slotpick strong{font-weight:700}

/* ---------- Was im Gespraech passiert ---------- */
.bullets{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.bullets li{display:flex;gap:12px;font-size:16px;line-height:1.6;color:var(--text)}
.bullets li::before{
  content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;
  background:var(--lime-text);
}

/* ---------- Preisschild ---------- */
.pricetag{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:'Atkinson Hyperlegible',sans-serif;font-weight:700;
  font-size:34px;color:var(--h);
}
.pricetag span{font-family:'Roboto',sans-serif;font-size:15px;font-weight:400;color:var(--muted)}

@media(max-width:900px){
  .slotdays{max-height:none}
}