/* Terminauswahl für das Erstgespräch — Sichtbarkeits-Check und persönliche
   Seite zum Werbebrief (assets/js/termin-wahl.js). Farben mit Rückfallwerten,
   weil die Briefseite das Stylesheet der Website nicht lädt. */

.chk-tage {
    display: flex; gap: 8px;
    overflow-x: auto;
    min-width: 0;          /* der Scroller darf das Formular nicht in die Breite ziehen */
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
.chk-tag {
    flex: 0 0 auto; font: inherit; cursor: pointer;
    padding: 10px 14px; border-radius: var(--radius-sm, 10px);
    border: 1px solid var(--color-border, #e3e6ea); background: var(--color-surface, #fff);
    text-align: center; line-height: 1.3;
}
.chk-tag small { display: block; font-size: .75rem; color: var(--color-text-muted, #5d6572); }
.chk-tag[aria-pressed="true"] {
    border-color: var(--color-primary-fill, #2b5cff); background: var(--color-primary-fill, #2b5cff);
    color: #fff;
}
.chk-tag[aria-pressed="true"] small { color: rgba(255,255,255,.85); }

.chk-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.chk-zeit {
    font: inherit; cursor: pointer; padding: 11px 6px;
    border: 1px solid var(--color-border, #e3e6ea); border-radius: var(--radius-sm, 10px);
    background: var(--color-surface, #fff); text-align: center;
}
.chk-zeit[aria-pressed="true"] { border-color: var(--color-primary-fill, #2b5cff); background: var(--color-primary-fill, #2b5cff); color: #fff; }