/* ═══════════════════════════════════════════════════════════
   admin.css — Admin-Dashboard
   Gleiche Design-Sprache wie style.css (dunkel, Bernstein)
   Eigene Komponenten: Sidebar, Tabellen, Badges, Buttons
════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #0f1115;
    --bg-1:        #141720;
    --bg-2:        #181b21;
    --bg-3:        #1e2229;
    --border:      rgba(255,255,255,0.07);
    --border-h:    rgba(255,255,255,0.13);

    --accent:      #f0a500;
    --accent-dim:  rgba(240,165,0,0.12);
    --accent-glow: rgba(240,165,0,0.07);

    --text-1: #f0ede8;
    --text-2: #9a9590;
    --text-3: #5c5852;

    --c-open:      #3ecf8e;
    --c-almost:    #f0a500;
    --c-full:      #e05252;
    --c-info:      #5ba4f5;
    --c-refunded:  #a07af5;

    --c-open-dim:     rgba(62,207,142,0.12);
    --c-almost-dim:   rgba(240,165,0,0.12);
    --c-full-dim:     rgba(224,82,82,0.12);
    --c-refunded-dim: rgba(160,122,245,0.12);

    --sidebar-w: 220px;
    --topbar-h:  56px;
    --r:         8px;

    --ff-display: 'Barlow Condensed', sans-serif;
    --ff-body:    'DM Sans', sans-serif;
}

html {
    font-family: var(--ff-body);
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 3px; }

/* ══ LAYOUT ══════════════════════════════════════════════════ */
.admin-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 200;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 16px;
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.brand-mark { color: var(--accent); font-size: 9px; }

.sidebar-nav {
    flex: 1;
    padding: 4px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--r);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 400;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}
.nav-item:hover { background: var(--bg-3); color: var(--text-1); }
.nav-item--active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 500;
}
.nav-item--active svg { color: var(--accent); }
.nav-item--muted { color: var(--text-3); font-size: 13px; }
.nav-item--muted:hover { color: var(--text-2); }

.sidebar-footer {
    padding: 10px 10px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Hauptbereich ─────────────────────────────────────────── */
.admin-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-h);
    background: rgba(20,23,32,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}
.topbar-title {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-1);
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-time { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Inhalt */
.admin-content {
    flex: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Zentrierter Inhalts-Container (participant_detail.php) ── */
.detail-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ══ KPI-GRID ════════════════════════════════════════════════ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }

.kpi-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s;
}
.kpi-card:hover { border-color: var(--border-h); }
.kpi-card--warn    { border-color: rgba(240,165,0,0.25); }
.kpi-card--success { border-color: rgba(62,207,142,0.2); }

.kpi-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}
.kpi-value {
    font-family: var(--ff-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-1);
    line-height: 1.1;
}
.kpi-card--warn    .kpi-value { color: var(--c-almost); }
.kpi-card--success .kpi-value { color: var(--c-open); }
.kpi-link {
    margin-top: 4px;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.03em;
}
.kpi-link:hover { text-decoration: underline; }

/* ══ DASHBOARD-SPALTEN ═══════════════════════════════════════ */
.dash-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dash-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dash-card-title {
    font-family: var(--ff-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* Aktivitätsliste */
.activity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeUp 0.3s ease both;
}
.activity-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 500;
    color: var(--text-2);
    flex-shrink: 0;
    letter-spacing: 0.05em;
}
.activity-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.activity-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.activity-detail {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Auslastungsbalken */
.load-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.load-item { display: flex; flex-direction: column; gap: 5px; }
.load-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.load-name { font-size: 13px; color: var(--text-1); }
.load-count { font-size: 12px; font-variant-numeric: tabular-nums; }
.load-count--open   { color: var(--c-open); }
.load-count--almost { color: var(--c-almost); }
.load-count--full   { color: var(--c-full); }
.load-bar-bg {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.load-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.load-bar--open   { background: var(--c-open); }
.load-bar--almost { background: var(--c-almost); }
.load-bar--full   { background: var(--c-full); }

/* ══ TOOLBAR ═════════════════════════════════════════════════ */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.toolbar-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.result-count {
    font-size: 12px;
    color: var(--text-3);
}

/* ── Formular-Elemente ─────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    letter-spacing: 0.03em;
}
.field-input {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--text-1);
    font-family: var(--ff-body);
    font-size: 13px;
    padding: 7px 12px;
    outline: none;
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}
.field-input:focus { border-color: var(--accent); }
.field-input::placeholder { color: var(--text-3); }

.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-3);
    pointer-events: none;
}
.search-input { padding-left: 30px; min-width: 220px; }
.select-input { min-width: 160px; cursor: pointer; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r);
    border: 1px solid transparent;
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
    text-decoration: none;
    line-height: 1;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}
.btn--primary:hover { background: rgba(240,165,0,0.2); }
.btn--accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f1115;
    font-weight: 600;
}
.btn--accent:hover { background: #d49200; border-color: #d49200; }
.btn--ghost {
    background: transparent;
    border-color: var(--border-h);
    color: var(--text-2);
}
.btn--ghost:hover { border-color: var(--text-2); color: var(--text-1); }
.btn--success {
    background: var(--c-open-dim);
    border-color: var(--c-open);
    color: var(--c-open);
}
.btn--success:hover { background: rgba(62,207,142,0.2); }
.btn--full { width: 100%; justify-content: center; }
.btn--sm { padding: 4px 10px; font-size: 12px; }

/* ══ DATENTABELLE ════════════════════════════════════════════ */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-2);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table thead th {
    padding: 11px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table thead th a {
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.1s;
}
.data-table thead th a:hover { color: var(--text-1); }
.sort-icon { font-size: 10px; opacity: 0.7; }
.sort-icon--neutral { opacity: 0.3; }

.data-table tbody .data-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.data-table tbody .data-row:last-child { border-bottom: none; }
.data-table tbody .data-row:hover { background: var(--bg-3); }

.data-table td { padding: 11px 14px; vertical-align: middle; color: var(--text-1); }
.th-num, .td-num { text-align: right; }
.th-actions, .td-actions { width: 1%; white-space: nowrap; text-align: right; }

/* Teilnehmer-Namens-Zelle */
.participant-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600;
    color: var(--text-2);
    flex-shrink: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.p-name { display: block; font-weight: 500; color: var(--text-1); }
.p-since { display: block; font-size: 11px; color: var(--text-3); }

/* Kontakt */
.contact-cell { display: flex; flex-direction: column; gap: 2px; }
.contact-email { font-size: 13px; color: var(--text-2); }
.contact-email:hover { color: var(--accent); }
.contact-phone { font-size: 12px; color: var(--text-3); }

/* Beträge */
.amount--open  { color: var(--c-full); font-weight: 500; }
.amount--paid  { color: var(--c-open); }
.amount--zero  { color: var(--text-3); }

/* Badge: Buchungsanzahl */
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

/* Zahlungs-Badges */
.pay-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.pay-badge--paid     { background: var(--c-open-dim);     color: var(--c-open);     border: 1px solid rgba(62,207,142,0.25); }
.pay-badge--pending  { background: var(--c-almost-dim);   color: var(--c-almost);   border: 1px solid rgba(240,165,0,0.25); }
.pay-badge--refunded { background: var(--c-refunded-dim); color: var(--c-refunded); border: 1px solid rgba(160,122,245,0.25); }
.pay-badge--none     { background: transparent; color: var(--text-3); border: 1px solid var(--border); }

/* Buchungs-Badges */
.booking-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.booking-badge--confirmed { background: var(--c-open-dim);   color: var(--c-open);   border: 1px solid rgba(62,207,142,0.2); }
.booking-badge--reserved  { background: var(--c-almost-dim); color: var(--c-almost); border: 1px solid rgba(240,165,0,0.2); }
.booking-badge--cancelled { background: var(--c-full-dim);   color: var(--c-full);   border: 1px solid rgba(224,82,82,0.2); }
.booking-badge--waitlist  { background: var(--bg-3);         color: var(--text-3);   border: 1px solid var(--border); }

/* Methoden-Badge */
.method-badge {
    font-size: 12px;
    color: var(--text-2);
}

/* Action-Button (Tabelle) */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-3);
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* Row-Flash nach AJAX */
@keyframes rowFlash {
    0%   { background: rgba(62,207,142,0.12); }
    100% { background: transparent; }
}
.row-flash { animation: rowFlash 0.8s ease; }

/* ══ LEERE ZUSTÄNDE ══════════════════════════════════════════ */
.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-3);
    font-size: 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
}

/* ══ ALERTS ══════════════════════════════════════════════════ */
.alert {
    padding: 10px 14px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
}
.alert--error {
    background: var(--c-full-dim);
    border: 1px solid rgba(224,82,82,0.3);
    color: var(--c-full);
}

/* ══ LOGIN-SEITE ══════════════════════════════════════════════ */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--bg);
}
.login-wrap {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.login-brand .brand-mark { color: var(--accent); font-size: 10px; }
.login-form {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.login-heading {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-1);
}
.login-back { text-align: center; font-size: 13px; color: var(--text-3); }
.login-back:hover { color: var(--text-2); }

/* ══ ANIMATION ═══════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    :root { --sidebar-w: 60px; }
    .sidebar-brand .brand-name,
    .nav-item span,
    .sidebar-footer .nav-item span { display: none; }
    .sidebar-brand { justify-content: center; padding: 16px 0; }
    .nav-item { justify-content: center; padding: 10px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-content { padding: 16px; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-form { flex-direction: column; }
    .search-input { min-width: 100%; }
    .select-input { min-width: 100%; }
}
@media (max-width: 520px) {
    .kpi-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .activity-item { animation: none; }
    .load-bar { transition: none; }
    .row-flash { animation: none; }
}
/* ═══════════════════════════════════════════════════════════
   Kurs-Erweiterungen für admin.css
   Anfügen an: public/assets/css/admin.css
════════════════════════════════════════════════════════════ */

/* ── Alerts (Erfolg) ─────────────────────────────────────── */
.alert--success {
    background: var(--c-open-dim);
    border: 1px solid rgba(62,207,142,0.3);
    color: var(--c-open);
    padding: 10px 14px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
}

/* ── View-Tabs ──────────────────────────────────────────── */
.view-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-1);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border);
    width: fit-content;
}
.tab-btn {
    padding: 6px 16px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
    white-space: nowrap;
}
.tab-btn:hover { color: var(--text-1); }
.tab-btn--active {
    background: var(--bg-2);
    color: var(--text-1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Kurslisten-Grid ─────────────────────────────────────── */
.courses-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.day-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.day-section-title {
    font-family: var(--ff-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* ── Kurs-Admin-Karte ─────────────────────────────────────── */
.course-admin-card {
    position: relative;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}
.course-admin-card:hover {
    border-color: var(--border-h);
    transform: translateY(-1px);
}
.course-admin-card--inactive {
    opacity: 0.55;
    filter: saturate(0.4);
}
.course-admin-card--inactive:hover {
    opacity: 0.8;
    filter: saturate(0.6);
}

/* Farbstreifen oben */
.car-fill-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    transition: width 0.6s ease;
    min-width: 3px;
}
.car-fill-bar--open   { background: var(--c-open); }
.car-fill-bar--almost { background: var(--c-almost); }
.car-fill-bar--full   { background: var(--c-full); }

.car-body {
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.car-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.car-time {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-1);
}

.inactive-badge {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.car-name {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-1);
    line-height: 1.2;
}

.car-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
}
.car-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-3);
}

/* Auslastungsbalken in der Karte */
.car-bar-bg {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}
.car-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.car-bar--open   { background: var(--c-open); }
.car-bar--almost { background: var(--c-almost); }
.car-bar--full   { background: var(--c-full); }

/* Aktions-Zeile */
.car-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ── Danger-Button ───────────────────────────────────────── */
.btn--danger {
    background: var(--c-full-dim);
    border-color: rgba(224,82,82,0.4);
    color: var(--c-full);
}
.btn--danger:hover { background: rgba(224,82,82,0.2); }

/* ── Kurs-Formular ───────────────────────────────────────── */
.form-wrap {
    max-width: 720px;
}

.course-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}
.form-col-full { grid-column: 1 / -1; }

/* Time-Input Styling */
.field-input--time {
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.field-input--time::-webkit-calendar-picker-indicator {
    filter: invert(0.4);
    cursor: pointer;
}

/* Toggle-Switch */
.toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--border-h);
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-top: 2px;
}
.toggle-track:has(input:checked) { background: var(--c-open); }
.toggle-track input {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    cursor: pointer;
    margin: 0;
}
.toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    pointer-events: none;
}
.toggle-track:has(input:checked) .toggle-thumb {
    transform: translateX(16px);
}
.toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
}
.field-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-3);
}

/* ── Buchungsvorschau im Formular ────────────────────────── */
.booking-preview {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.booking-preview-title {
    font-family: var(--ff-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.data-table--compact td,
.data-table--compact th { padding: 8px 12px; }

.p-name-link {
    color: var(--text-1);
    font-weight: 500;
    transition: color 0.12s;
}
.p-name-link:hover { color: var(--accent); }

.empty-state-inline {
    font-size: 13px;
    color: var(--text-3);
    padding: 8px 0;
}

/* ── Formular-Aktionen ────────────────────────────────────── */
.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    flex-wrap: wrap;
}
/* ═══════════════════════════════════════════════════════════
   Teilnehmer-Detailseite — Ergänzungen für admin.css
════════════════════════════════════════════════════════════ */

/* ── Zurück-Navigation ──────────────────────────────────── */
.back-nav { margin-bottom: 4px; }
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-3);
    transition: color 0.12s;
}
.back-link:hover { color: var(--text-2); }

/* ── Profil-Header ─────────────────────────────────────── */
.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    position: relative;
}

.profile-avatar-lg {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--border-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.profile-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-name {
    font-family: var(--ff-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-1);
    line-height: 1.1;
}
.profile-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    align-items: center;
}
.profile-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-2);
    transition: color 0.12s;
}
a.profile-contact-item:hover { color: var(--accent); }
.profile-contact-item--muted { color: var(--text-3); font-size: 12px; }

.profile-edit-btn {
    position: absolute;
    top: 20px; right: 20px;
}

/* ── KPI-Leiste ────────────────────────────────────────── */
.profile-kpis {
    display: flex;
    align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 24px;
    gap: 0;
    flex-wrap: wrap;
}
.pkpi {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 20px;
}
.pkpi:first-child { padding-left: 0; }
.pkpi:last-child  { padding-right: 0; }

.pkpi-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}
.pkpi-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
}
.pkpi-value {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}
.pkpi-value--paid     { color: var(--c-open); }
.pkpi-value--open     { color: var(--c-full); }
.pkpi-value--zero     { color: var(--text-3); font-size: 18px; }

/* ── Buchungshistorie-Header ──────────────────────────── */
.bookings-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.section-title {
    font-family: var(--ff-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
}
.section-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.select-input--sm { min-width: 120px; font-size: 12px; padding: 5px 10px; }

/* ── Buchungskarte ─────────────────────────────────────── */
.bookings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-card {
    display: flex;
    gap: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
    animation: fadeUp 0.25s ease both;
}
.booking-card:hover { border-color: var(--border-h); }

.booking-card--cancelled {
    opacity: 0.5;
    filter: saturate(0.3);
}
.booking-card--future {
    border-color: rgba(240,165,0,0.2);
}

/* Datum-Spalte (links) */
.bc-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 16px 18px;
    min-width: 64px;
    background: var(--bg-3);
    border-right: 1px solid var(--border);
    position: relative;
}
.bc-month {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.bc-day {
    font-family: var(--ff-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
}
.bc-year {
    font-size: 10px;
    color: var(--text-3);
}
.bc-future-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 4px;
}

/* Haupt-Inhalt */
.bc-main {
    flex: 1;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Kursinfo-Zeile */
.bc-course-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.bc-course-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.bc-course-name {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bc-course-time {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
}

/* Status-Spalte (rechts in Kurszeile) */
.bc-status-col {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.bc-status-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.booking-card:hover .bc-status-actions { opacity: 1; }

/* Micro-Buttons (Bestätigen / Stornieren) */
.micro-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-h);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
}
.micro-btn--confirm { color: var(--c-open); }
.micro-btn--confirm:hover {
    background: var(--c-open-dim);
    border-color: var(--c-open);
}
.micro-btn--cancel { color: var(--c-full); }
.micro-btn--cancel:hover {
    background: var(--c-full-dim);
    border-color: var(--c-full);
}

/* Zahlungszeile */
.bc-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.bc-payment-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bc-amount {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}
.bc-method {
    font-size: 12px;
    color: var(--text-3);
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.bc-paydate {
    font-size: 12px;
    color: var(--text-3);
}
.bc-no-payment {
    flex: 1;
    font-size: 13px;
    color: var(--text-3);
}

/* Zahlungsstatus-Spalte */
.bc-pay-status-col {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bc-pay-actions {
    display: flex;
    gap: 6px;
}

/* ── Profil-Modal ──────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.modal {
    background: var(--bg-2);
    border: 1px solid var(--border-h);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header {
    padding: 22px 26px 0;
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-1);
}
.modal-body {
    padding: 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.modal-footer {
    padding: 0 26px 22px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.form-grid--modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* Textarea */
.field-input--textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

/* ── Einheiten-Zusammenfassung im Formular ─────────────────── */
.field-hint-inline {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-3);
    margin-left: 4px;
    letter-spacing: 0.03em;
}
.unit-summary {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.unit-summary-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.unit-summary-title {
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-1);
}
.unit-summary-range {
    font-size: 12px;
    color: var(--text-3);
}
.unit-summary-price {
    margin-left: auto;
    font-size: 13px;
    color: var(--c-open);
}
.unit-summary-price strong { font-weight: 600; }
.unit-summary-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.unit-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-2);
    white-space: nowrap;
}
.udc-num {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    min-width: 12px;
    text-align: right;
}

/* ── Akzent-Meta-Item in Kurskarte ─────────────────────────── */
.car-meta-item--accent {
    color: var(--accent);
    font-weight: 500;
}

/* ── Pass-Widget ────────────────────────────────────────────── */
.pass-widget {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}
.pass-active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pass-info { display: flex; flex-direction: column; gap: 4px; }
.pass-label {
    font-family: var(--ff-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-1);
}
.pass-meta { font-size: 13px; color: var(--text-3); }

.pass-dots {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
}
.pass-dot {
    /* Feste Größe — kein aspect-ratio, kein Grid-Stretch */
    width: 32px;
    height: 32px;
    flex: 0 0 32px;          /* wächst/schrumpft nicht */
    border-radius: 50%;
    transition: background 0.2s;
}
.pass-dot--free {
    background: var(--c-open);
    opacity: 0.95;
    box-shadow: 0 0 0 3px rgba(62,207,142,0.12);
}
.pass-dot--used {
    background: var(--bg-3);
    border: 2px solid var(--border-h);
}

/* Zahl + Text direkt unter den Dots — gleiche optische Größe */
.pass-numbers {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pass-remaining {
    font-family: var(--ff-display);
    font-size: 28px;          /* proportional zu 32px-Dots */
    font-weight: 700;
    color: var(--c-open);
    line-height: 1;
}
.pass-of {
    font-size: 13px;
    color: var(--text-3);
}

.pass-bar-bg {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}
.pass-bar {
    height: 100%;
    background: var(--c-open);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.pass-cancel-btn { align-self: flex-start; }

.pass-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}
.pass-empty-icon {
    font-size: 28px;
    color: var(--text-3);
    line-height: 1;
}
.pass-empty-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
}
.pass-empty-hint { font-size: 12px; color: var(--text-3); }

.pass-history { margin-top: 4px; }
.pass-history-toggle {
    font-size: 12px;
    color: var(--text-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.12s;
}
.pass-history-toggle:hover { color: var(--text-2); }
.pass-history-toggle::-webkit-details-marker { display: none; }

/* ── Mehrere Action-Buttons nebeneinander ──────────────────── */
.td-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.th-actions { text-align: right; }

/* ── Pass-Badge (klein, in Tabelle) ────────────────────────── */
.pass-badge--none {
    background: transparent;
    color: var(--text-3);
    border: 1px solid var(--border);
}
.pass-since {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── Mini-Dot-Anzeige in Tabelle ───────────────────────────── */
.pass-mini-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 140px;
}
.pass-mini-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pass-mini-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pass-mini-dot.free { background: var(--c-open); opacity: 0.9; }
.pass-mini-dot.used { background: var(--border-h); }
.pass-mini-count {
    font-family: var(--ff-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.pass-mini-count.low { color: var(--c-almost); }

/* ── Zeile ohne Block hervorheben ──────────────────────────── */
.data-row--nopass td:first-child .p-name {
    color: var(--text-2);
}

/* ── Teilnehmer-Kartengitter ───────────────────────────────── */
.participant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.p-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s, transform 0.15s;
    position: relative;
}
.p-card:hover { border-color: var(--border-h); transform: translateY(-1px); }
.p-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.p-card-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--border-h);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.p-card-identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-card-name {
    font-family: var(--ff-display);
    font-size: 16px; font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-card-meta { font-size: 11px; color: var(--text-3); }
.p-card-actions {
    display: flex; gap: 5px;
    flex-shrink: 0;
}

.p-card-contacts {
    display: flex; flex-direction: column; gap: 3px;
}
.p-card-contact-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-2);
}
a.p-card-contact-item:hover { color: var(--accent); }
.p-card-contact-item--muted { color: var(--text-3); }

.p-card-stats {
    display: flex; gap: 0;
    background: var(--bg-3);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.p-stat {
    flex: 1;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px;
    border-right: 1px solid var(--border);
}
.p-stat:last-child { border-right: none; }
.p-stat-label { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.p-stat-value { font-family: var(--ff-display); font-size: 16px; font-weight: 700; color: var(--text-1); line-height: 1.1; }
.p-stat-value--warn { color: var(--c-almost); }
.p-stat-value--ok   { color: var(--c-open); }
.p-stat-value--dim  { color: var(--text-3); font-size: 14px; }

.p-card-pass {
    display: flex; flex-direction: column; gap: 6px;
}
.p-card-pass-header {
    display: flex; align-items: center; justify-content: space-between;
}
.p-card-pass-label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.p-card-pass-dots {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.p-card-pass-dot {
    width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
}
.p-card-pass-dot.free { background: var(--c-open); opacity: 0.9; }
.p-card-pass-dot.used { background: var(--border-h); }
.p-card-pass-bar-bg { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.p-card-pass-bar { height: 100%; border-radius: 2px; transition: width .5s ease; }
.p-card-pass-bar.ok   { background: var(--c-open); }
.p-card-pass-bar.warn { background: var(--c-almost); }
.p-card-pass-bar.out  { background: var(--c-full); }
.p-card-no-pass {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-3);
    padding: 6px 8px;
    background: var(--bg-3); border-radius: 6px;
    border: 1px dashed var(--border);
}
.p-card-notes {
    font-size: 12px; color: var(--text-3);
    font-style: italic;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Pass-Toggle-Zelle ─────────────────────────────────────── */
.pass-toggle-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pass-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

/* ── Blockhistorie aufklappbar ─────────────────────────────── */
.hist-row td { padding: 0 !important; }
.hist-inner {
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    animation: fadeUp 0.2s ease;
}
.hist-table { background: transparent; }
.hist-table td, .hist-table th { background: transparent; }
.hist-toggle { min-width: 80px; }

/* ── KPI-Filter-Buttons (payments.php) ─────────────────────── */
.kpi-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.kpi-filter-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.kpi-filter-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.15s;
}
.kpi-filter-card:hover {
    border-color: var(--border-h);
    transform: translateY(-2px);
}
.kpi-filter-card--active {
    border-color: var(--accent) !important;
    background: var(--accent-dim);
}
.kpi-filter-card--active::after { background: var(--accent); }
.kpi-filter-card--active .kpi-value { color: var(--accent); }

.kpi-filter-card--success { border-color: rgba(62,207,142,0.2); }
.kpi-filter-card--success:hover { border-color: var(--c-open); }
.kpi-filter-card--success.kpi-filter-card--active {
    border-color: var(--c-open) !important;
    background: var(--c-open-dim);
}
.kpi-filter-card--success.kpi-filter-card--active::after { background: var(--c-open); }
.kpi-filter-card--success.kpi-filter-card--active .kpi-value { color: var(--c-open); }

.kpi-filter-card--warn { border-color: rgba(240,165,0,0.2); }
.kpi-filter-card--warn:hover { border-color: var(--c-almost); }
.kpi-filter-card--warn.kpi-filter-card--active {
    border-color: var(--c-almost) !important;
    background: var(--c-almost-dim);
}
.kpi-filter-card--warn.kpi-filter-card--active::after { background: var(--c-almost); }
.kpi-filter-card--warn.kpi-filter-card--active .kpi-value { color: var(--c-almost); }

@media (max-width: 900px) {
    .kpi-filter-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Kurszuweisungs-Panel ───────────────────────────────── */
.modal--wide {
    max-width: 680px;
}
.modal--wide .modal-body {
    max-height: 65vh;
    overflow-y: auto;
}

.course-assign-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.course-assign-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ca-day-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ca-day-label {
    font-family: var(--ff-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.ca-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    user-select: none;
}
.ca-card:hover:not(.ca-card--booked) {
    border-color: var(--border-h);
    background: var(--bg-2);
}
.ca-card:has(.ca-checkbox:checked) {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.ca-card--booked {
    opacity: 0.45;
    cursor: not-allowed;
}

.ca-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.ca-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.ca-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ca-name {
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-1);
}
.ca-time {
    font-size: 12px;
    color: var(--text-3);
}
.ca-already {
    font-size: 11px;
    color: var(--c-open);
    font-weight: 500;
}

.ca-date-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: fadeUp 0.15s ease;
}

/* ── Gebuchte Kurse Widget (participant_detail) ─────────── */
.booked-courses-widget {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.booked-courses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.booked-courses-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bc-course-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-3);
    transition: border-color 0.12s;
}
.bc-course-chip:hover { border-color: var(--border-h); }
.bc-course-chip--confirmed { border-left: 3px solid var(--c-open); }
.bc-course-chip--reserved  { border-left: 3px solid var(--c-almost); }

.bc-chip-day {
    font-family: var(--ff-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    min-width: 26px;
    flex-shrink: 0;
}
.bc-chip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bc-chip-name {
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bc-chip-time { font-size: 11px; color: var(--text-3); }
.bc-chip-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
    flex-shrink: 0;
}
.bc-chip-next { font-size: 11px; color: var(--accent); font-weight: 500; }
.bc-chip-count { font-size: 11px; color: var(--text-3); }

/* ── Kursdetail-Reihe in payments.php ──────────────────── */
.courses-detail-row td { padding: 0 !important; }
.cdr-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 12px 52px;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    animation: fadeUp 0.15s ease;
}
.cdr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
}
.cdr-day {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}
.cdr-name { color: var(--text-1); font-weight: 500; }
.cdr-time { color: var(--text-3); }
.cdr-next { color: var(--accent); font-size: 11px; }
.cdr-count {
    color: var(--text-3);
    font-size: 10px;
    background: var(--border);
    border-radius: 6px;
    padding: 1px 5px;
}
.cdr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--ff-body);
    transition: opacity 0.12s;
}
.cdr-toggle:hover { opacity: 0.7; }


/* ══ KURSTERMINE-VERWALTUNG ══════════════════════════════════ */

/* CSS-Variablen für Ausfälle/Ersatztermine */
:root {
    --c-cancelled:     #e05252;
    --c-cancelled-dim: rgba(224,82,82,0.10);
    --c-makeup:        #3eb8cf;
    --c-makeup-dim:    rgba(62,184,207,0.10);
}

.termine-section { margin-top: 28px; }

.termine-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.termine-header .booking-preview-title { margin-bottom: 0; }

.termine-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-almost);
    background: var(--c-almost-dim);
    border: 1px solid rgba(240,165,0,0.20);
    padding: 2px 9px;
    border-radius: 20px;
}

/* Terminliste: einfache flex-Spalten statt CSS Grid */
.termine-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.termin-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
    min-height: 42px;
    transition: background 0.12s;
}
.termin-row:last-child { border-bottom: none; }
.termin-row:hover { background: var(--bg-3); }
.termin-row--cancelled { background: rgba(224,82,82,0.04); }
.termin-row--cancelled:hover { background: rgba(224,82,82,0.07); }
.termin-row--makeup { background: rgba(62,184,207,0.04); }
.termin-row--makeup:hover { background: rgba(62,184,207,0.07); }

.termin-num {
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-3);
    text-align: center;
    width: 28px;
    flex-shrink: 0;
}
.termin-num--makeup { color: var(--c-makeup); font-size: 12px; }

.termin-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
    width: 130px;
    flex-shrink: 0;
}
.termin-row--cancelled .termin-date {
    text-decoration: line-through;
    color: var(--text-3);
}

.termin-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.termin-pill {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.termin-pill--active    { color: var(--c-open);      background: var(--c-open-dim); }
.termin-pill--cancelled { color: var(--c-cancelled); background: var(--c-cancelled-dim); }
.termin-pill--makeup    { color: var(--c-makeup);    background: var(--c-makeup-dim); }

.termin-reason {
    font-size: 11px;
    color: var(--text-2);
    font-style: italic;
}

.termin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.termine-divider {
    padding: 7px 14px;
    background: rgba(62,184,207,0.06);
    border-top: 1px solid rgba(62,184,207,0.15);
    border-bottom: 1px solid rgba(62,184,207,0.15);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-makeup);
}

.btn--cancel-termin {
    color: var(--c-cancelled) !important;
    border-color: rgba(224,82,82,0.35) !important;
}
.btn--cancel-termin:hover {
    background: var(--c-cancelled-dim) !important;
}