/**
 * HNO im Seefeld – Custom Booking Stylesheet
 * ----------------------------------------------------------------------------
 * Visuelle Angleichung der E-PAT/Vitabyte-Buchungsplattform an den Stil von
 * hnoseefeld.zuerich.
 *
 * @overrides   Materialize CSS 0.98.0
 * @compatible  React 15.4.2 (DOM-Struktur darf NICHT verändert werden)
 * @author      Generated for HNO im Seefeld
 * @version     3.1.0
 *
 * VERSION 3.1 – Änderung gegenüber v3:
 *   Mobile-Layout der Kategorie-Tabs komplett überarbeitet:
 *     - Kein horizontaler Scroll mehr ("seitlich fahrendes Menü").
 *     - Vertikaler Stack auf voller Breite mit Touch-Target ≥ 48px.
 *     - Aktiver Tab klar erkennbar inkl. linker Akzent-Leiste.
 *     - Kalender, Provider-Chips, Service-Cards auf Mobile feinjustiert.
 *
 * VERSION 3 – Änderung gegenüber v2:
 *   Brand-Palette aus den tatsächlichen Screenshots der Live-Site abgeleitet:
 *     - Primärfarbe ist DUNKEL-Forest-Green (#0d3d2e), nicht Sage-Grün.
 *     - Akzent ist PEACH/SALMON (#eab69e), nicht Sand/Gold.
 *     - Zusätzlicher --hno-bg-warm Token für die warmen Sandbänder.
 *
 * Architektur (Layer, generisch zu spezifisch):
 *   1. Design Tokens
 *   2. Base / Reset
 *   3. Layout
 *   4. Components (Tabs, Cards, Provider-Chips, Calendar, Slots, Buttons,
 *                  Inputs, Modals, Date Picker, Footer)
 *   5. Responsive
 *   6. Accessibility
 * ----------------------------------------------------------------------------
 */


/* ============================================================================
 * 1. DESIGN TOKENS
 * Single Source of Truth. Nur diese Variablen anpassen, falls Markenpalette
 * noch feinjustiert werden muss.
 * ============================================================================ */
:root {
    /* --- Brand Colors – Forest Green (HNO Seefeld Logo / Headlines) ------ */
    --hno-primary:        #0d3d2e;   /* Dunkles Forest Green – aktive States  */
    --hno-primary-dark:   #082819;   /* Hover/Focus                           */
    --hno-primary-light:  #e8efea;   /* Pale grüner Tint – freie Slots, BGs   */
    --hno-primary-soft:   #f4f7f5;   /* extrem subtiler Tint – Hover-BG       */

    /* --- Accent – Peach/Salmon (EN-Button, CTA-Bänder, "H"-Kreis) -------- */
    --hno-accent:         #eab69e;   /* Peach – selected day, sek. Highlights */
    --hno-accent-dark:    #d99e80;
    --hno-accent-soft:    #f7e5d9;   /* sehr blass für Backgrounds            */

    /* --- Warm Sand (Praxis-Intro-Band, "N"-Kreis-Hintergrund) ------------ */
    --hno-bg-warm:        #d8d0c2;   /* warmer Sandton                        */

    /* --- Neutral Palette -------------------------------------------------- */
    --hno-text:           #0d3d2e;   /* gleicher Wert wie primary – brand-typisch */
    --hno-text-muted:     #6a7670;   /* gedämpft, leicht grünlich             */
    --hno-bg:             #ffffff;
    --hno-bg-soft:        #f5f4f1;   /* off-white, leicht warm                */
    --hno-border:         #e2e2dd;

    /* --- Elevation / Shadows --------------------------------------------- */
    --hno-shadow-sm:      0 1px 2px  rgba(13, 61, 46, 0.06);
    --hno-shadow-md:      0 4px 16px rgba(13, 61, 46, 0.08);
    --hno-shadow-lg:      0 8px 32px rgba(13, 61, 46, 0.12);

    /* --- Typography ------------------------------------------------------- */
    --hno-font-sans:      'Inter', 'Helvetica Neue', Helvetica, Arial,
                          system-ui, sans-serif;
    --hno-font-size-base: 16px;
    --hno-line-height:    1.6;

    /* --- Spacing Scale ---------------------------------------------------- */
    --hno-space-xs:       0.25rem;
    --hno-space-sm:       0.5rem;
    --hno-space-md:       1rem;
    --hno-space-lg:       1.5rem;
    --hno-space-xl:       2.5rem;

    /* --- Radius ----------------------------------------------------------- */
    --hno-radius-sm:      4px;
    --hno-radius-md:      8px;
    --hno-radius-lg:      12px;

    /* --- Motion ----------------------------------------------------------- */
    --hno-transition:     200ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================================
 * 2. BASE / RESET
 * ============================================================================ */
html,
body {
    font-family:               var(--hno-font-sans);
    font-size:                 var(--hno-font-size-base);
    line-height:               var(--hno-line-height);
    color:                     var(--hno-text);
    background-color:          var(--hno-bg-soft);
    -webkit-font-smoothing:    antialiased;
    -moz-osx-font-smoothing:   grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--hno-font-sans);
    color:          var(--hno-text);
    font-weight:    600;
    letter-spacing: -0.01em;
}

a {
    color:           var(--hno-primary);
    text-decoration: none;
    transition:      color var(--hno-transition);
}

a:hover,
a:focus {
    color:           var(--hno-primary-dark);
    text-decoration: underline;
}


/* ============================================================================
 * 3. LAYOUT
 * ============================================================================ */

/* --- 3.1 Client Header ---------------------------------------------------- */
.client-header {
    background-color: var(--hno-bg);
    border-bottom:    1px solid var(--hno-border);
    box-shadow:       var(--hno-shadow-sm) !important;
    padding:          var(--hno-space-md) 0;
}

.client-header .logo {
    max-height:     56px;
    width:          auto;
    margin-right:   var(--hno-space-md);
    vertical-align: middle;
}

.client-header .name {
    display:        inline-block;
    vertical-align: middle;
    margin:         0;
    font-size:      1.5rem;
    font-weight:    600;
    color:          var(--hno-text);
    letter-spacing: -0.01em;
}

/* --- 3.2 Section / Page-Title --------------------------------------------- */
main .section h5,
main .section h5.grey-text {
    color:          var(--hno-text) !important;
    font-size:      1.5rem;
    font-weight:    600;
    margin-bottom:  var(--hno-space-lg);
    padding-bottom: var(--hno-space-md);
    position:       relative;
}

/* Akzent-Strich unter den Headlines – greift Primärfarbe auf */
main .section h5::after,
main .section h5.grey-text::after {
    content:          '';
    display:          block;
    position:         absolute;
    left:             0;
    bottom:           0;
    width:            48px;
    height:           3px;
    background-color: var(--hno-primary);
    border-radius:    2px;
}

.divider {
    background-color: var(--hno-border) !important;
    height:           1px !important;
    margin:           var(--hno-space-lg) 0 !important;
}


/* ============================================================================
 * 4. COMPONENTS
 * ============================================================================ */

/* --- 4.1 Vertikale Kategorie-Tabs ----------------------------------------- */
.tabs-vertical {
    background: transparent;
}

.tabs-vertical .tabs {
    display:        flex;
    flex-direction: column;
    height:         auto !important;
    padding:        var(--hno-space-sm);
    background:     var(--hno-bg);
    border-radius:  var(--hno-radius-md);
    box-shadow:     var(--hno-shadow-sm);
    overflow:       hidden;
}

.tabs-vertical .tabs .tab {
    width:         100%;
    height:        auto !important;
    margin:        0;
    line-height:   normal;
    text-align:    left;
    border-radius: var(--hno-radius-sm);
    transition:    background-color var(--hno-transition);
}

.tabs-vertical .tabs .tab a {
    display:        block;
    height:         auto;
    padding:        0.75rem 1rem;
    line-height:    1.4;
    font-size:      0.95rem;
    font-weight:    500;
    text-transform: none;
    color:          var(--hno-text-muted) !important;
    border-radius:  var(--hno-radius-sm);
    transition:     background-color var(--hno-transition),
                    color            var(--hno-transition);
}

.tabs-vertical .tabs .tab a:hover {
    background-color: var(--hno-primary-soft);
    color:            var(--hno-primary) !important;
}

.tabs-vertical .tabs .tab a.active {
    background-color: var(--hno-primary);
    color:            #fff !important;
    font-weight:      600;
}

.tabs-vertical .tabs .indicator {
    display: none !important;
}

/* Horizontale Tabs (Monatsauswahl im Kalender) */
.monthHeader .tabs {
    background:     var(--hno-bg);
    border-radius:  var(--hno-radius-md);
    box-shadow:     var(--hno-shadow-sm);
    margin-bottom:  var(--hno-space-md);
}

.monthHeader .tabs .tab a {
    color:          var(--hno-text-muted) !important;
    text-transform: none;
    font-weight:    500;
    transition:     color var(--hno-transition);
}

.monthHeader .tabs .tab a.active {
    color: var(--hno-primary) !important;
}

.monthHeader .tabs .indicator {
    background-color: var(--hno-primary) !important;
    height:           3px !important;
}


/* --- 4.2 Service Cards ---------------------------------------------------- */
.services {
    padding-left: var(--hno-space-md);
}

.service .card {
    border:        1px solid var(--hno-border);
    border-radius: var(--hno-radius-md);
    box-shadow:    var(--hno-shadow-sm) !important;
    overflow:      hidden;
    transition:    transform   var(--hno-transition),
                   box-shadow  var(--hno-transition),
                   border-color var(--hno-transition);
}

.service .card:hover {
    transform:    translateY(-2px);
    box-shadow:   var(--hno-shadow-md) !important;
    border-color: var(--hno-primary-light);
}

/* Materialize-Klassen "blue-grey white-text" auf .card überschreiben –
   diese werden vom Tool dynamisch gesetzt, wenn ein Service ausgewählt ist. */
.service .card.blue-grey,
.service .card.white-text {
    background-color: var(--hno-primary) !important;
    color:            #fff !important;
}

.service .card.blue-grey .card-title,
.service .card.white-text .card-title {
    color: #fff !important;
}

.service .card.blue-grey .description,
.service .card.white-text .description,
.service .card.white-text .duration,
.service .card.white-text .duration-label,
.service .card.white-text .material-icons {
    color: rgba(255, 255, 255, 0.92) !important;
}

.service .card.blue-grey .card-action,
.service .card.white-text .card-action {
    background-color: rgba(0, 0, 0, 0.12);
    border-top:       1px solid rgba(255, 255, 255, 0.18);
}

.service .card.blue-grey .card-action a,
.service .card.white-text .card-action a {
    color:          #fff !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size:      0.85rem;
}

.service .card .card-content {
    padding: var(--hno-space-lg);
}

.service .card .card-title {
    display:       block;
    margin-bottom: var(--hno-space-sm);
    font-size:     1.15rem;
    font-weight:   600;
    line-height:   1.3;
    color:         var(--hno-text);
}

.service .card .description {
    margin-bottom: 0;
    font-size:     0.95rem;
    color:         var(--hno-text-muted);
}

.service .card .facts {
    padding:    0 var(--hno-space-lg) var(--hno-space-md);
    font-size:  0.85rem;
    color:      var(--hno-text-muted);
}

.service .card .facts .duration {
    display:     flex;
    align-items: center;
    gap:         var(--hno-space-xs);
    margin:      0;
}

.service .card .facts .material-icons {
    font-size:    18px;
    line-height:  1;
    margin-right: 4px;
}

.service .card .card-action {
    padding:           var(--hno-space-md) var(--hno-space-lg);
    background-color:  var(--hno-bg-soft);
    border-top:        1px solid var(--hno-border);
}

.service .card .card-action a {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--hno-space-xs);
    color:           var(--hno-primary) !important;
    font-weight:     600;
    text-transform:  none;
    text-decoration: none;
}


/* --- 4.3 Provider Chips --------------------------------------------------- *
 * Schmal-Variante: 32px Höhe (Materialize-Default) statt der vorher 42px.
 * Wir fixieren `height` exakt, sonst zieht das React-Inline `height:100%` am
 * inneren <span> die Chips wieder auseinander (siehe BookingApp.min.js).
 * -------------------------------------------------------------------------- */
.provider.chip {
    display:          inline-flex;
    align-items:      center;
    height:           32px !important;
    min-height:       32px;
    padding:          0 14px 0 3px;
    margin:           4px 8px 4px 0;
    background-color: var(--hno-bg) !important;
    color:            var(--hno-text) !important;
    border:           1px solid var(--hno-border);
    border-radius:    999px;
    font-size:        0.875rem;
    font-weight:      500;
    line-height:      1;
    box-shadow:       none;
    transition:       border-color     var(--hno-transition),
                      background-color var(--hno-transition),
                      transform        var(--hno-transition);
    cursor:           pointer;
    white-space:      nowrap;       /* verhindert Umbruch → bleibt schmal   */
}

.provider.chip:hover {
    border-color: var(--hno-primary);
    transform:    translateY(-1px);
}

/* React injiziert ein <span> mit inline-style height:100% + padding:1px 0;
   das treibt die Höhe hoch. Hier neutralisieren wir das gezielt. */
.provider.chip > span {
    height:        auto !important;
    padding:       0 !important;
    line-height:   1 !important;
    flex-direction: row !important;  /* Inline-Style war column            */
}

.provider.chip img {
    width:            24px;
    height:           24px;
    margin:           0 8px 0 0 !important;
    border-radius:    50%;
    background-color: var(--hno-primary-light);
    padding:          1px;
    flex-shrink:      0;
}

/* Selected Provider – Materialize setzt teal-Klassen */
.provider.chip.teal,
.provider.chip.teal.lighten-2,
.provider.chip.white-text {
    background-color: var(--hno-primary) !important;
    color:            #fff !important;
    border-color:     var(--hno-primary);
}

.provider.chip.teal img,
.provider.chip.white-text img {
    background-color: rgba(255, 255, 255, 0.2);
}


/* --- 4.4 Calendar --------------------------------------------------------- */
.calendar .weekdayHeader {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   4px;
    margin-bottom:         var(--hno-space-sm);
    text-align:            center;
}

.calendar .weekdayHeader .weekday {
    font-size:      0.8rem;
    font-weight:    600;
    color:          var(--hno-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding:        var(--hno-space-xs) 0;
}

.calendar .days .week {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   4px;
    margin-bottom:         4px;
}

.calendar .days .day {
    aspect-ratio:    1 / 1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
}

.calendar .days .day > span {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--hno-radius-sm);
    font-size:       0.95rem;
    font-weight:     500;
    transition:      background-color var(--hno-transition),
                     color            var(--hno-transition),
                     transform        var(--hno-transition);
}

/* Vergangene/inaktive Tage */
.calendar .days .day .grey-text {
    color:   var(--hno-text-muted) !important;
    opacity: 0.45;
}

.calendar .days .day-outofmonth {
    visibility: hidden;
}

/* Buchbare Tage – Materialize teal lighten-1 */
.calendar .days .day .slot,
.calendar .days .day .teal,
.calendar .days .day .teal.lighten-1 {
    background-color: var(--hno-primary-light) !important;
    color:            var(--hno-primary) !important;
    cursor:           pointer;
    font-weight:      600;
}

.calendar .days .day .slot:hover {
    background-color: var(--hno-primary) !important;
    color:            #fff !important;
    transform:        scale(1.05);
}

/* Aktuell selektierter Tag – Materialize "orange":
   Brand-konform mit Peach (--hno-accent) statt Mustard. */
.calendar .days .day .selected,
.calendar .days .day .orange {
    background-color: var(--hno-accent) !important;
    color:            var(--hno-primary) !important;
    font-weight:      700;
    box-shadow:       0 0 0 2px var(--hno-accent-soft);
}


/* --- 4.5 Slot-Zeiten (Termin-Liste) --------------------------------------- */
.slotday .collection {
    border:        1px solid var(--hno-border) !important;
    border-radius: var(--hno-radius-md) !important;
    overflow:      hidden;
    box-shadow:    var(--hno-shadow-sm);
}

.slotday .collection-header {
    background-color: var(--hno-bg-soft);
    border-bottom:    1px solid var(--hno-border);
    padding:          var(--hno-space-sm) var(--hno-space-md) !important;
}

.slotday .collection-header h6 {
    margin:      0;
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--hno-text);
}

.slottime-item.collection-item {
    border-bottom: 1px solid var(--hno-border) !important;
    padding:       0 !important;
    transition:    background-color var(--hno-transition);
}

.slottime-item .selectable-slot {
    display:     flex;
    align-items: center;
    gap:         var(--hno-space-sm);
    padding:     var(--hno-space-md);
    cursor:      pointer;
    width:       100%;
}

.slottime-item .selectable-slot .material-icons {
    font-size: 18px;
    color:     var(--hno-text-muted);
}

.slottime-item:hover {
    background-color: var(--hno-primary-soft);
}

/* Selected Slot */
.slottime-item.selected,
.slottime-item.teal,
.slottime-item.white-text {
    background-color: var(--hno-primary) !important;
    color:            #fff !important;
}

.slottime-item.selected .material-icons,
.slottime-item.teal .material-icons {
    color: #fff !important;
}

.slottime-item .secondary-content span {
    font-size:   0.85rem;
    color:       var(--hno-primary);
    font-weight: 500;
}

.slottime-item.selected .secondary-content span,
.slottime-item.teal .secondary-content span {
    color: rgba(255, 255, 255, 0.85);
}


/* --- 4.6 Selected Slots / Provider Summary -------------------------------- */
.selectedSlots p,
.selectedProvider p {
    font-size:      0.9rem;
    font-weight:    600;
    color:          var(--hno-text-muted);
    margin-bottom:  var(--hno-space-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.selectedSlots .chip,
.selectedSlots .chip.teal,
.selectedSlots .chip.teal.lighten-1 {
    background-color: var(--hno-primary) !important;
    color:            #fff !important;
    border-radius:    999px;
    padding:          6px 14px;
    font-size:        0.9rem;
}


/* --- 4.7 Buttons ---------------------------------------------------------- */
.btn,
.btn-large {
    background-color: var(--hno-primary);
    color:            #fff;
    border-radius:    var(--hno-radius-sm);
    font-weight:      600;
    text-transform:   none;
    letter-spacing:   0;
    box-shadow:       none;
    transition:       background-color var(--hno-transition),
                      box-shadow       var(--hno-transition),
                      transform        var(--hno-transition);
}

.btn:hover,
.btn-large:hover {
    background-color: var(--hno-primary-dark);
    box-shadow:       var(--hno-shadow-md);
}

.btn:focus,
.btn-large:focus {
    background-color: var(--hno-primary-dark);
    outline:          3px solid var(--hno-primary-light);
    outline-offset:   2px;
}

.btn-flat {
    background:     transparent;
    color:          var(--hno-primary);
    text-transform: none;
    font-weight:    600;
}

.waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45);
}


/* --- 4.8 Form Inputs ------------------------------------------------------ */
.input-field input[type="text"],
.input-field input[type="email"],
.input-field input[type="tel"],
.input-field input[type="date"],
.input-field input[type="number"],
.input-field input[type="password"],
.input-field textarea,
.input-field .select-dropdown {
    border-bottom: 1px solid var(--hno-border) !important;
    box-shadow:    none !important;
    color:         var(--hno-text);
    font-family:   var(--hno-font-sans);
    transition:    border-color var(--hno-transition);
}

.input-field input:focus:not([readonly]),
.input-field textarea:focus:not([readonly]),
.input-field .select-dropdown:focus {
    border-bottom: 2px solid var(--hno-primary) !important;
    box-shadow:    0 1px 0 0 var(--hno-primary) !important;
}

.input-field label {
    color: var(--hno-text-muted);
}

.input-field input:focus + label,
.input-field textarea:focus + label,
.input-field input.valid + label {
    color: var(--hno-primary) !important;
}

.input-field input.invalid,
.input-field input.invalid:focus {
    border-bottom: 2px solid #c0392b !important;
    box-shadow:    0 1px 0 0 #c0392b !important;
}

.input-field input.invalid + label,
.input-field input:focus.invalid + label {
    color: #c0392b !important;
}

/* Select-Dropdown */
.dropdown-content li > a,
.dropdown-content li > span {
    color: var(--hno-text) !important;
}

.dropdown-content li:hover,
.dropdown-content li.active,
.dropdown-content li.selected {
    background-color: var(--hno-primary-soft) !important;
}

/* Phone-Input (intl-tel-input) */
.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: var(--hno-primary-soft);
}

.iti__country.iti__highlight {
    background-color: var(--hno-primary-light) !important;
}


/* --- 4.9 Date Picker (Materialize Pickadate) ------------------------------ */
.picker__date-display,
.picker__weekday-display {
    background-color: var(--hno-primary) !important;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    background-color: var(--hno-primary) !important;
}

.picker__close,
.picker__today {
    color: var(--hno-primary) !important;
}


/* --- 4.10 Modal ----------------------------------------------------------- */
.modal {
    border-radius: var(--hno-radius-md);
}

.modal .modal-content h4 {
    color:       var(--hno-text);
    font-weight: 600;
}


/* --- 4.11 Footer ---------------------------------------------------------- */
.page-footer {
    background-color: var(--hno-bg) !important;
    color:            var(--hno-text-muted) !important;
    border-top:       1px solid var(--hno-border);
    margin-top:       var(--hno-space-xl);
    padding-top:      var(--hno-space-xl);
}

.page-footer h6 {
    margin-bottom:  var(--hno-space-md);
    color:          var(--hno-text);
    font-size:      0.95rem;
    font-weight:    600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-footer p,
.page-footer ul,
.page-footer li {
    color:       var(--hno-text-muted) !important;
    font-size:   0.9rem;
    line-height: 1.7;
}

.page-footer .openingtimeday {
    display:     inline-block;
    width:       110px;
    color:       var(--hno-text);
    font-weight: 500;
}

.page-footer .footer-copyright {
    margin-top:        var(--hno-space-lg);
    background-color:  var(--hno-bg-soft) !important;
    color:             var(--hno-text-muted);
    border-top:        1px solid var(--hno-border);
    font-size:         0.85rem;
}

.page-footer .footer-copyright a {
    color: var(--hno-text-muted) !important;
}


/* ============================================================================
 * 5. RESPONSIVE
 * ============================================================================
 *
 * Mobile-Strategie für die Kategorie-Tabs (.tabs-vertical):
 * -----------------------------------------------------------
 * Vorher (v3): horizontal scrollendes "seitlich fahrendes Menü" – schlecht
 * entdeckbar, schmale Touch-Targets, aktive Kategorie kann aus dem Viewport
 * fallen.
 *
 * Jetzt (v3.1): die Tabs bleiben auf Mobile vertikal gestapelt und nutzen
 * die volle Bildschirmbreite. Jeder Tab ist ein vollwertiger Touch-Block
 * (≥ 48 px), der aktive Tab wird zusätzlich durch eine linke Akzent-Leiste
 * (Peach) hervorgehoben. Materialize ergänzt zur Laufzeit zwar
 * inline-style="display:block" auf .tab.col, das macht uns aber nichts aus
 * – wir setzen ohnehin display:flex auf den <a>-Inhalt.
 *
 * .services schiebt sich darunter (im 12-col-Grid bereits gegeben) und
 * bekommt mehr Atem zwischen den Cards.
 * ============================================================================ */

/* ---- 5.1 Tablets und kleine Laptops -------------------------------------- */
@media (max-width: 992px) {

    .tabs-vertical .tabs .tab a {
        padding:   0.85rem 1rem;     /* etwas mehr Höhe für Touch          */
        font-size: 1rem;
    }
}

/* ---- 5.2 Phones (≤ 600 px) ----------------------------------------------- */
@media (max-width: 600px) {

    /* Header --------------------------------------------------------------- */
    .client-header .name {
        display:    block;
        margin-top: var(--hno-space-sm);
        font-size:  1.15rem;
    }

    .client-header .logo {
        max-height: 44px;
    }

    main .section h5,
    main .section h5.grey-text {
        font-size: 1.25rem;
    }

    /* Kategorie-Tabs ------------------------------------------------------- *
     * KEIN horizontaler Scroll mehr. Vertikaler Stack auf voller Breite.
     * --------------------------------------------------------------------- */
    .tabs-vertical .tabs {
        flex-direction: column;          /* explizit – überschreibt v3      */
        flex-wrap:      nowrap;
        overflow-x:     visible;         /* Scroll abschalten               */
        padding:        var(--hno-space-xs);
        gap:            2px;
    }

    .tabs-vertical .tabs .tab {
        flex:          0 0 auto;
        width:         100% !important;  /* gegen Materialize-col-Breiten   */
        display:       block !important; /* gegen .col mit float            */
        float:         none !important;
    }

    .tabs-vertical .tabs .tab a {
        display:        flex;
        align-items:    center;
        min-height:     48px;            /* Apple HIG Touch-Target          */
        padding:        0.85rem 1rem;
        font-size:      1rem;
        position:       relative;        /* für linke Akzent-Leiste         */
    }

    /* Aktiver Tab: linke Peach-Leiste als zusätzlicher Affordance-Hinweis. */
    .tabs-vertical .tabs .tab a.active {
        padding-left: calc(1rem + 4px);  /* Platz für die Leiste            */
    }

    .tabs-vertical .tabs .tab a.active::before {
        content:          '';
        position:         absolute;
        left:             0;
        top:              8px;
        bottom:           8px;
        width:            4px;
        background-color: var(--hno-accent);
        border-radius:    2px;
    }

    /* Services-Spalte rutscht unter die Tabs ------------------------------- */
    .services {
        padding-left: 0;
        margin-top:   var(--hno-space-md);
    }

    .service {
        margin-bottom: var(--hno-space-md);
    }

    .service .card .card-content {
        padding: var(--hno-space-md);
    }

    .service .card .facts {
        padding: 0 var(--hno-space-md) var(--hno-space-md);
    }

    .service .card .card-action {
        padding: var(--hno-space-sm) var(--hno-space-md);
    }

    /* Provider-Chips dürfen auf Mobile umbrechen – die Reihe ist sonst
       zu schmal und schiebt einzelne Chips ab. */
    .provider.chip {
        margin: 3px 6px 3px 0;
    }

    /* Monatsauswahl-Tabs: kleinere Schrift, sonst brechen die Monatsnamen
       in 2 Zeilen um. */
    .monthHeader .tabs .tab a {
        font-size: 0.85rem;
        padding:   0 6px;
    }

    /* Kalender-Tage etwas größer in der Touch-Trefferfläche ---------------- */
    .calendar .weekdayHeader .weekday {
        font-size: 0.7rem;
        padding:   2px 0;
    }

    .calendar .days .day > span {
        font-size:    0.9rem;
        border-radius: 6px;
    }

    /* Slot-Liste komfortabler antippbar ----------------------------------- */
    .slottime-item .selectable-slot {
        padding:    var(--hno-space-md) var(--hno-space-md);
        min-height: 48px;
    }

    /* Footer-Beschriftung wieder gleichmäßig ausrichten -------------------- */
    .page-footer .openingtimeday {
        width: 90px;
    }
}

/* ---- 5.3 Sehr schmale Phones (≤ 360 px, z. B. iPhone SE 1. Gen) ---------- */
@media (max-width: 360px) {

    .tabs-vertical .tabs .tab a {
        padding:   0.75rem 0.85rem;
        font-size: 0.95rem;
    }

    .calendar .days .day > span {
        font-size: 0.8rem;
    }

    .provider.chip {
        font-size: 0.8rem;
        padding:   0 12px 0 3px;
    }
}


/* ============================================================================
 * 6. ACCESSIBILITY
 * ============================================================================ */
*:focus-visible {
    outline:        3px solid var(--hno-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
    }
}