/* =========================================================
   Planity-Buchungswidget im Design der Website
   Planity nutzt automatisch erzeugte Klassennamen (z. B. „button-module_primary-Careb“).
   Deshalb wird über [class*="…"] auf den stabilen Namensteil zugegriffen.
   Nach größeren Planity-Updates kurz prüfen.
   ========================================================= */

/* Fläche (aus dem Original-Widget-Code) */
#planitywl { background-color: #F6F7F8; }
.planity_ui_appointment_background > div:nth-child(2) { padding: 10px; }

/* Schrift: Quicksand, Stärken wie auf der Website (Planity 400 → 500, 500 → 600) */
#planitywl, #planitywl * {
  font-family: var(--font) !important;
  font-weight: 500 !important;
  color: var(--grau) !important;
}
#planitywl input::placeholder, #planitywl textarea::placeholder { color: var(--grau) !important; }
#planitywl :is(h1, h2, h3, h4, strong, b, a,
  [class*="button-module_label"], [class*="title-module"], [class*="nameWrapper"], [class*="price"],
  [class*="page-module_day"], [class*="page-module_date"], [class*="hourWithIcon"], [class*="module_month"],
  [class*="step-module_date"], [class*="input-module_label"], [class*="input_password-module_label"],
  [class*="phone-module_label"], [class*="imagesTitle"], [class*="avatar-module_initial"],
  [class*="module_or"], [class*="popup-module_title"]),
#planitywl :is([class*="title-module"], [class*="booking_service-module_details"],
  [class*="module_toggle"], .planity-secondary-color) span {
  font-weight: 600 !important;
}

/* Buttons: grau mit weißer Schrift, beim Darüberfahren hell mit grauem Rahmen */
#planitywl :is([class*="button-module_primary"], .planity_bookappointment-button-choose),
.planity-gift-voucher-button-choose {
  background-color: var(--grau) !important;
  border: 1.5px solid var(--grau) !important;
  transition: background-color .25s, color .25s !important;
}
#planitywl :is([class*="button-module_primary"], .planity_bookappointment-button-choose),
#planitywl :is([class*="button-module_primary"], .planity_bookappointment-button-choose) *,
.planity-gift-voucher-button-choose, .planity-gift-voucher-button-choose * {
  color: #fff !important;
}
#planitywl :is([class*="button-module_primary"], .planity_bookappointment-button-choose):hover,
.planity-gift-voucher-button-choose:hover {
  background-color: transparent !important;
}
#planitywl :is([class*="button-module_primary"], .planity_bookappointment-button-choose):hover,
#planitywl :is([class*="button-module_primary"], .planity_bookappointment-button-choose):hover *,
.planity-gift-voucher-button-choose:hover, .planity-gift-voucher-button-choose:hover * {
  color: var(--grau) !important;
}

/* Initialen der Mitarbeiterinnen */
#planitywl [class*="avatar-module_initial"] { background-color: var(--grau) !important; color: #fff !important; }

/* Auswahl der Mitarbeiterin: Rahmen und Punkt nur bei der gewählten Option */
#planitywl [class*="radio_picture-module_input"]:checked ~ [class*="radio_picture-module_border"] { border-color: var(--grau) !important; }
#planitywl [class*="radio_picture-module_input"]:checked + span::after { background-color: var(--grau) !important; }

/* Unterstreichung der Links („Löschen“, „Bearbeiten“ …) */
#planitywl [class*="button-module_underlined"] [class*="button-module_label"]::after {
  background-color: var(--grau) !important;
  border-color: var(--grau) !important;
}

@media (prefers-reduced-motion: reduce) {
  #planitywl *, .planity-gift-voucher-button-choose { transition: none !important; }
}