/* ============================================================
   Theme Tokens – Single Source of Truth
   Begründung: DRY. Farbwechsel erfolgt zentral an einer Stelle,
   nicht an 10+ Einzelregeln. Laufzeitfähig themebar
   (Mandanten-Theming, Dark Mode) ohne Build-Step.
   ============================================================ */
:root {
    --color-accent:       #83A683; /* Primärakzent, ersetzt Materialize-Teal */
    --color-accent-soft:  #B5C9B5; /* Footer & gedämpfte Flächen */
    --color-surface:      #cde9d7; /* Karten-/Slot-Hintergrund */
    --color-border:       grey;
    --color-on-accent:    white;
    --color-on-surface:   black;
    --radius-sm:          3px;
}

/* Header Styling */
.client-header {
    text-align: center;
}
.client-header.z-depth-1 {
    box-shadow: none;
}

/* Kartenbasis – geteilt von .card, .slotday .collection-item,
   .collection.with-header .collection-header */
.card,
.slotday .collection-item,
.collection.with-header .collection-header {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
    color: var(--color-on-surface);
}

/* Leistungs-Block (ausgewählt) */
.blue-grey {
    background-color: var(--color-accent) !important;
}


.grey-text.blue-grey.lighten-5 {
    background-color: var(--color-accent-soft) !important;
    color: var(--color-on-accent) !important;
}

footer.page-footer .footer-copyright {
    overflow: hidden;
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.8);
    background-color: var(--color-accent-soft);
}

/* Vertikale Kategorien-Tabs */
.categories.tabs-vertical a {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    padding-left: 15px;
}
.categories.tabs-vertical a.active {
    background-color: var(--color-accent);
    border-right: none;
    color: var(--color-on-accent);
    padding-left: 15px;
}

/* Materialize-Farbklassen-Overrides – akzentfarbene Flächen */
.teal.lighten-2,
.calendar .day span.selected,
.selected.teal,
.chip.lighten-1 {
    background-color: var(--color-accent) !important;
}

/* Akzentfarbene Text-/Indikator-Elemente */
.monthHeader .tabs .tab a.active,
.monthHeader .indicator {
    color: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
    /* Hinweis: color wirkt nur auf <a>, background-color nur auf .indicator –
       beide Properties sind jeweils nur auf einem Selektor relevant,
       das gegenseitige Setzen stört nicht. Alternative: zwei Blöcke. */
}

/* Kalender-Slots (nicht ausgewählt) */
.calendar .day span.slot {
    background-color: var(--color-surface) !important;
}

.chip.lighten-1 {
    background-color: var(--color-accent) !important;
}

.input-field {
    color: var(--color-on-surface);
}

.provider {
    background-color: var(--color-surface);
}

.waves-light {
    background-color: var(--color-surface) !important;
    color: var(--color-on-surface);
}

.monthHeader .tabs {
    padding-bottom: 60px;
}
.monthHeader .tabs .tab a {
    color: var(--color-on-surface);
}

.card-image img {
    padding-top: 5px;
}

.opening-times {
    display: none;
}

.row .col .monthHeader .tab .active {
    color: white !important;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating),
.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating):hover {
    color: var(--color-accent);
}

.blue-grey.white-text.card .card-action a {
    color: white !important;
}

.slotday .collection-item.slottime-item .secondary-content {
    color: var(--color-accent);
}