.ui-widget-content,
.ui-widget-content,
.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker table,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-state-default {
  background: transparent;
  border: none !important;
  word-break: none;
  word-wrap: none;
}

.ui-datepicker-inline {
  padding: 0;
}

.ui-widget-header {
  border: none;
}

.ui-datepicker .ui-datepicker-header {
  padding: 1.2em 0;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  top: 23px;
}

.ui-icon,
.ui-datepicker-month,
.ui-datepicker-year {
    color: var(--prim) !important;
    font-family: 'GothicExpand';
    word-break: keep-all !important;
}

.ui-datepicker tbody:not(.is-active){
      font-family: "PathwayGothic", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a.ui-state-default,
.ui-datepicker th {
  color: var(--prim) !important;
  border: none !important;
  text-align: center !important;
}

.ui-datepicker thead {
  font-family: "PathwayGothic", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ui-datepicker {
  width: 24.4em;
  font-family: "Noto Sans", san-serif !important;
  text-transform: uppercase;
} 

.ui-datepicker td {
  /* padding: 15px; 
  border: 1px solid transparent; */
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  color: #f5f5f5 !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background-color: var(--acc-sec);
  color: #484848 !important;
  padding: 15px;
  border-top-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
}






/* ===== Datepicker — Clean Minimal ===== */
      #datepicker,
      .slot-card {
        --dp-bg: #ffffff;
        --dp-text: #2b2b2b;
        --dp-muted: #9aa0a6;
        --dp-ring: rgba(152, 175, 144, 0.25); /* var(--prim) @ 25% */
        --dp-light-ring: rgba(152, 175, 144, 0.2); /* var(--prim) @ 25% */
        --dp-hover: rgba(152, 175, 144, 0.15);
        --dp-selected: var(--prim);
        --dp-today-dot: var(--acc-sec);
      }

      /* Header */
      .ui-datepicker-header {
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        padding: 0 0 10px 0;
      }

      .ui-datepicker-title {
        text-align: center;
        font-weight: 600;
        font-size: 1.1rem;
        color: var(--superDark);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      /* Sprite-Icon komplett weg */
      .ui-datepicker-prev .ui-icon,
      .ui-datepicker-next .ui-icon {
        display: none !important;
      }

      /* Button-Hit-Area bleibt rund */
      .ui-datepicker-prev,
      .ui-datepicker-next {
        position: relative;
        top: 0;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        cursor: pointer;
        outline: none;
        border: 1px solid transparent;
        transition: background 0.18s ease, border-color 0.18s ease;
        color: var(--superDark); /* steuert Pfeilfarbe via currentColor */
        text-indent: 0; /* falls ein Theme hier rumfuhrwerkt */
      }

      /* Hover-Feedback */
      .ui-datepicker-prev:hover,
      .ui-datepicker-next:hover {
        background: var(--dp-hover);
        border-color: var(--dp-ring);
        color: var(--superDark);
      }

      /* Der eigentliche Chevron */
      .ui-datepicker-prev::after,
      .ui-datepicker-next::after {
        content: "";
        display: block;
        width: 10px; /* Pfeilgröße */
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
      }

      /* < (links) = L-Ecke drehen auf 135° */
      .ui-datepicker-prev::after {
        transform: rotate(135deg);
      }

      /* > (rechts) = L-Ecke drehen auf -45° */
      .ui-datepicker-next::after {
        transform: rotate(-45deg);
      }

      /* Weekday row */
      .ui-datepicker thead th {
        padding: 6px 0 10px;
        font-size: 0.78rem;
        color: var(--dp-muted) !important;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border: none !important;
      }

      /* Calendar grid */
      .ui-datepicker table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 8px;
      }
      .ui-datepicker-calendar {
        width: 100%;
        table-layout: fixed; /* jede Spalte gleich breit */
        margin: 0 auto;
      }
      .ui-datepicker-calendar td {
        text-align: center; /* Safety */
      }

      .ui-datepicker td a,
      .ui-datepicker td span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        border-radius: 999px !important;
      }

      /* Falls was vom Theme reinfunkt: baseline neutralisieren */
      .ui-datepicker td {
        vertical-align: middle;
      }

      /* .ui-datepicker td { padding: 0; } */

      /* Day numbers — keine „Kacheln“, nur dezente Kreise bei Hover/Active */
      .ui-state-default {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid transparent !important;
        color: var(--dp-text) !important;
        font-weight: 600;
        line-height: 1;
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease,
          border-color 0.18s ease;
        background: transparent !important;
      }
      .ui-datepicker td:not(.ui-datepicker-unselectable) .ui-state-default:hover {
        background: var(--dp-ring) !important;
        border-color: var(--dp-ring) !important;
      }

      /* Today — subtiler Dot unter der Zahl */
      .ui-state-highlight {
        position: relative;
        color: var(--dp-text) !important;
      }

      .ui-state-highlight::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 6px;
        width: 6px;
        height: 6px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: var(--dp-today-dot);
      }

      .is-today .ui-state-default {
        position: relative;
        color: var(--dp-text) !important;
      }
      .is-today .ui-state-default::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 6px;
        width: 6px;
        height: 6px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: var(--dp-today-dot);
      }

      /* „Klickbar“ markieren (kommt aus beforeShowDay) */
      /* Klickbar, aber nur wenn NICHT ausgewählt */
      .is-available a.ui-state-default:not(.ui-state-active) {
        border-color: var(--dp-light-ring) !important;
        background: var(--dp-hover) !important;
        transition: all 0.2s ease;
        color: var(--prim) !important; /* kein !important nötig */
      }
      /* Selected */
      .ui-state-active {
        background: var(--dp-selected) !important;
        color: #fff !important;
        box-shadow: 0 0 0 4px var(--dp-ring) !important;
        transition: all 0.2s ease-in-out;
      }

      .is-available a.ui-state-active,
      .ui-datepicker a.ui-state-active {
        color: #fff !important;
      }

      /* Disabled / nicht auswählbar */
      .ui-datepicker-unselectable .ui-state-default {
        color: var(--prim) !important;
        opacity: 1;
        cursor: default;
      }

      /* jQuery UI Defaults neutralisieren */
      .ui-widget-content,
      .ui-widget-header,
      .ui-state-default,
      .ui-widget-content .ui-state-default,
      .ui-widget-header .ui-state-default {
        background: transparent;
        border: none !important;
      }

      /* Optional: etwas spacing im Bootstrap-Layout */
      @media (min-width: 992px) {
        #datepicker,
        .slot-card {
          margin: 12px auto;
        }
      }

      .slot-card::-webkit-scrollbar {
        display: block !important;
      }

      /* BOOKING GRID  */
      /* ===== Layout: Kalender + Slots ===== */
      /* === IDENTISCHE CARD-OPTIK für Kalender & Timeslots ===================== */
      /* gleiche Maße, Padding, Radius, Shadow, Border wie .ui-datepicker */
      .ui-datepicker,
      .slot-card {
        width: 100%;
        max-width: none;
        max-height: inherit;
        padding: 20px;
        background: var(--dp-bg);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.04);
        font-family: "PathwayGothic", system-ui, -apple-system, Segoe UI, Roboto,
          Arial, sans-serif;
        transition: all 2s ease-in-out;
      }

      /* Grid -> Flex, damit wir wie bei der Slot-Row schieben können */
      .booking-grid {
        display: flex;
        gap: 24px;
        align-items: flex-start;
      }

      /* Startzustand: Datepicker full-width, Slot-Card kollabiert (unsichtbar) */
      @media (min-width: 992px) {
        #datepicker {
          flex: 1 1 100%;
          transition: flex-basis 0.25s ease-in-out, transform 0.25s ease-in-out;
        }

        /* ÄNDERN vllt hinzufügen->.booking-grid:not(.has-slots) */
        .slot-card {
          flex: 0 1 0; /* 0 Breite */
          opacity: 0;
          transform: translateX(8px); /* von rechts reingleiten */
          pointer-events: none;
          overflow: hidden;
          transition: flex-basis 0.25s ease-in-out, opacity 0.18s ease-in-out,
            transform 0.25s ease-in-out, padding 0.25s ease-in-out,
            border-width 0.25s ease-in-out;
        }

        /* Ziel: 50/50 wenn Slots offen */
        .booking-grid.has-slots #datepicker {
          flex-basis: 50%;
          transform: none;
        }
        .booking-grid.has-slots .slot-card {
          flex-basis: 50%;
          opacity: 1;
          transform: none;
          pointer-events: auto;
        }
      }

      @media (max-width: 991.98px) {
        .booking-grid { display: grid; }
        .ui-datepicker, .slot-card { margin: 0 auto; }
      }
      /* @media (min-width: 992px) {
        .booking-grid {
          grid-template-columns: 360px 360px; 
        }
      } */
      /* Mobile: beide Karten volle Breite untereinander */
      @media (max-width: 991.98px) {
        .ui-datepicker,
        .slot-card {
          margin: 0 auto;
        }
      }

      .slot-card {
        will-change: transform, opacity;
      }

      /* === Timeslot-Card Innenleben ========================================== */
      .slot-card .slot-head {
        margin-bottom: 12px;
      }
      .slot-card .slot-title {
        font-weight: 700;
        color: var(--superDark);
        letter-spacing: 0.02em;
      }
      .slot-card .slot-sub {
        font-size: 0.9rem;
        color: var(--dp-muted);
      }

      /* Liste & Buttons – clean, passend zu deinem Stil */
      .slot-list {
        display: grid;
        gap: 10px;
      }
      .slot-empty {
        color: var(--dp-muted);
      }

      .slot-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        border-radius: 12px;
        border: 1.5px solid var(--prim);
        background: #fff;
        color: var(--prim);
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.06s ease, box-shadow 0.18s ease, background 0.18s ease,
          color 0.18s ease;
      }
      .slot-btn:hover {
        background: var(--dp-hover);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
      }
      .slot-btn.is-selected {
        background: var(--prim);
        color: #fff;
      }
      /* === Timeslot Card mit Scrollbar bei vielen Slots === */
      .slot-card {
        display: flex;
        flex-direction: column;
        max-height: 420px; /* Höhe begrenzen (anpassen nach Bedarf) */
      }

      .slot-card .slot-head {
        flex: 0 0 auto; /* Header bleibt fix oben */
      }

      .slot-card .slot-list {
        flex: 1 1 auto; /* wächst und scrollt */
        overflow-y: auto;
        padding-right: 4px; /* etwas Platz für Scrollbar */
      }

      /* optional: Scrollbar etwas cleanen */
      .slot-card .slot-list::-webkit-scrollbar {
        width: 6px;
      }
      .slot-card .slot-list::-webkit-scrollbar-thumb {
        background: var(--light);
        border-radius: 3px;
      }
      .slot-card .slot-list::-webkit-scrollbar-track {
        background: transparent;
      }

      /* TimeSLOT */

      /* Timeslot-Container (Liste) */
      .timeslot-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      /* Default Timeslot-Button */
      .timeslot-btn {
        display: block;
        width: 100%;
        padding: 14px;
        border: 2px solid #007bff;
        border-radius: 8px;
        background: #fff;
        color: #007bff;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        transition: all 0.25s ease;
      }

      /* Hover-Effekt */
      .timeslot-btn:hover {
        background: #f5f8ff;
      }

      /* Ausgewählter Timeslot */
      .timeslot-btn.selected {
        background: #555;
        color: #fff;
        border-color: #555;
      }

      /* Row mit Weiter-Button */
      .timeslot-row {
        display: flex;
        gap: 10px;
      }

      /* Wenn in Row: Timeslot nur 50% */
      .timeslot-row .timeslot-btn {
        flex: 1;
      }

      /* Weiter-Button */
      .continue-btn {
        flex: 1;
        border-radius: 8px;
        background: var(--acc-sec);
        color: #fff;
        font-weight: 600;
        text-align: center;
        border: none;
        cursor: pointer;
        transition: background 0.25s ease-in-out;
      }

      .continue-btn:hover {
        background: var(--prim);
      }
      .slot-list {
        display: grid;
        gap: 10px;
      }

      /* Row mit Weiter-Button */
      .slot-row {
        display: flex;
        gap: 10px;
      }
      .slot-row .slot-btn,
      .slot-row .continue-btn {
        flex: 1;
      }

      /* Mobile: untereinander */
      @media (max-width: 575.98px) {
        .slot-row {
          flex-direction: column;
        }
      }

      /* Row nebeneinander */
      .slot-row {
        display: flex;
        gap: 10px;
      }

      /* Basis: Slot-Button */
      .slot-row .slot-btn {
        flex: 1 1 100%;
        transition: flex-basis 0.25s ease; /* schrumpft auf 50% */
      }

      /* Basis: Weiter-Button – startet unsichtbar und 0 Breite */
      .continue-btn {
        height: 48px;
        border-radius: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: flex-basis 0.25s ease, opacity 0.18s ease, transform 0.18s ease,
          padding 0.25s ease, border-width 0.25s ease;
        /* Startzustand (collapsed) */
        flex: 0 1 0;
        opacity: 0;
        transform: translateY(2px);
        padding: 0;
        border-width: 0;
        overflow: hidden;
      }

      /* Offenes Layout nach einem Tick */
      .slot-row.is-open .slot-btn {
        flex-basis: 50%;
      }
      .slot-row.is-open .continue-btn {
        flex-basis: 50%;
        opacity: 1;
        transform: none;
        padding: 14px; /* jetzt sichtbar */
        border-width: 1.5px;
      }

      /* Hover (optional) */
      .continue-btn:hover {
        background: var(--prim);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
      }

      .slot-row {
        display: flex;
        gap: 10px;
      }
      .slot-row .slot-btn {
        flex: 1 1 100%;
        transition: flex-basis 0.25s ease;
      }

      .continue-btn {
        /* … deine bisherigen Styles … */
        flex: 0 1 0;
        opacity: 0;
        transform: translateY(2px);
        padding: 0;
        border-width: 0;
        overflow: hidden;
        pointer-events: none; /* ← blocken, solange zu */
        transition: flex-basis 0.25s ease, opacity 0.18s ease, transform 0.18s ease,
          padding 0.25s ease, border-width 0.25s ease;
      }

      .slot-row.is-open .slot-btn {
        flex-basis: 50%;
      }
      .slot-row.is-open .continue-btn {
        flex-basis: 50%;
        opacity: 1;
        transform: none;
        padding: 14px;
        border-width: 1.5px;
        pointer-events: auto; /* ← erst jetzt klickbar */
      }


      @media (min-width: 992px) {
        .text-center.text-lg-start {
          /* max-height: var(--slot-max-h) ; gleiche Höhe wie Datepicker */
          overflow-y: hidden; /* keine Scrollbar */
          padding-right: 6px; /* Platz für Scrollbar */
        }

        .text-center.text-lg-start {
          overflow-y: auto; /* Scrollbar erst beim Hover aktivieren */
        }

        /* Scrollbar nur wenn hovered */
        .text-center.text-lg-start::-webkit-scrollbar {
          width: 6px;

        }
        .text-center.text-lg-start::-webkit-scrollbar-thumb {
          background: var(--light);
          border-radius: 3px;

        }
        .text-center.text-lg-start::-webkit-scrollbar-track {
          background: transparent;

        }
      }