/* Sprachschulsystem */

:root {
    /* === Mandanten-Farben (Defaults, werden per JS überschrieben) === */
    --primary-dark: #47584e;
    --primary-medium: #5d7365;
    --primary-light: #86968c;
    --accent-beige: #f3edec;
    --primary-dark-rgb: 71, 88, 78;

    /* === Strukturelle Farben (fix, mandantenunabhängig) === */
    --background: #f9f9f8;
    --surface: #f5f5f4;
    --surface-container-low: #f3f4f3;
    --surface-container-lowest: #ffffff;
    --surface-container-highest: #e8e9e8;
    --surface-variant: #edeeed;
    --on-surface: #1a2b23;
    --on-surface-variant: #5c6660;

    /* === Abgeleitete Tokens (berechnet per JS aus Mandanten-Farben) === */
    --outline-variant: rgba(71, 88, 78, 0.20);
    --shadow-ambient: 0 2px 32px rgba(71, 88, 78, 0.06);

    /* Legacy-Kompatibilität (werden schrittweise ersetzt) */
    --accent-gray: #796e6c;
    --bg-light: #f6f2f1;
    --text-dark: #1f1f1f;
    --white: #ffffff;
    --border-color: #e9dedc;
    --success: #5d7365;
    --danger: #d73a30;
    --warning: #988564;

    /* Schriftarten */
    --font-display: 'Newsreader', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-main: var(--font-body);
    --font-heading: var(--font-display);

    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Radien */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Schatten */
    --shadow-sm: 0 1px 3px rgba(var(--primary-dark-rgb), 0.08);
    --shadow-md: 0 4px 12px rgba(var(--primary-dark-rgb), 0.08);
    --shadow-lg: 0 12px 40px rgba(var(--primary-dark-rgb), 0.12);
    --shadow-xl: 0 20px 40px rgba(var(--primary-dark-rgb), 0.2), 0 8px 16px rgba(0, 0, 0, 0.06);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Sidebar */
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 64px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--on-surface);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   MATERIAL ICONS
   ============================================ */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    margin-right: 0.25rem;
    user-select: none;
}

/* Icon-only buttons (keine Labels) */
.btn .material-symbols-rounded:only-child,
button .material-symbols-rounded:only-child {
    margin-right: 0;
}

/* Icon-Grössen */
.material-symbols-rounded.icon-sm { font-size: 18px; }
.material-symbols-rounded.icon-lg { font-size: 24px; }
.material-symbols-rounded.icon-xl { font-size: 28px; }

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-medium);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Header-spezifischer Override: transparent für Logout-Button */
header .btn-secondary {
    background-color: transparent;
    border: 1px solid var(--white);
}

header .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-success {
    background-color: var(--success);
    color: var(--white);
}

.btn-danger {
    background-color: var(--danger);
    color: var(--white);
}

.btn-warning {
    background-color: var(--warning);
    color: var(--white);
}

.btn-info {
    background-color: var(--primary-medium);
    color: #fff;
}

.btn-info:hover {
    background-color: var(--primary-dark);
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

/* Loading state for buttons */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* ============================================
   APP-SHELL + SIDEBAR
   ============================================ */


/* App-Shell Grid */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    transition: grid-template-columns var(--transition-normal);
}

.app-shell.sidebar-collapsed {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* Sidebar */
.sidebar {
    background-color: var(--surface);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 200;
    overflow: hidden;
    transition: width var(--transition-normal);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-md) 12px;
    min-height: 72px;
}

.sidebar-logo {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-title {
    /* Versteckt — Logo enthält bereits den Namen */
    display: none;
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-sm);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--on-surface-variant);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
}

.sidebar-item:hover {
    background-color: var(--surface-variant);
    color: var(--on-surface);
}

.sidebar-item.active {
    background-color: var(--primary-dark);
    color: var(--white);
}

.sidebar-item .sidebar-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-right: 0;
}

.sidebar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--transition-normal), width var(--transition-normal);
}

.sidebar-footer {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.sidebar-user:hover {
    background-color: var(--surface-variant);
}

.sidebar-user .material-symbols-rounded {
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 0;
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar-logout-btn:hover {
    background-color: rgba(215, 58, 48, 0.08);
    color: var(--danger);
}

.sidebar-logout-btn .material-symbols-rounded {
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 0;
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.sidebar-collapse-btn:hover {
    background-color: var(--surface-variant);
}

.sidebar-collapse-btn .material-symbols-rounded {
    margin-right: 0;
}

/* Sidebar Collapsed */
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-title {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-xs);
}

.sidebar-collapsed .sidebar-logo {
    width: 36px;
    max-width: 36px;
}

.sidebar-collapsed .sidebar-item {
    justify-content: center;
    padding: 10px;
}

.sidebar-collapsed .sidebar-user {
    justify-content: center;
}

.sidebar-collapsed .sidebar-logout-btn {
    justify-content: center;
    padding: 8px;
}

/* Main Area */
.main-area {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}


/* Sidebar Backdrop (Mobile) */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
}

/* Content Area (für neue Views) */
.content-area {
    display: none;
}

/* Alte Content-Bereich innerhalb der Shell */
.app-shell .content {
    flex: 1;
}

/* Sidebar Hamburger-Button (versteckt auf Desktop, sichtbar wenn collapsed/mobile) */
.sidebar-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--on-surface);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 8px;
    transition: background-color var(--transition-fast);
}

.sidebar-hamburger:hover {
    background-color: var(--surface-variant);
}

.sidebar-hamburger .material-symbols-rounded {
    font-size: 28px;
}

/* ============================================
   RESPONSIVE: SIDEBAR
   ============================================ */

/* Tablet: Sidebar standardmässig collapsed */
@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: var(--sidebar-width-collapsed) 1fr;
    }

    .sidebar-hamburger {
        display: flex;
    }

    .sidebar-label,
    .sidebar-title {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .sidebar-logo {
        display: none;
    }

    .sidebar-header {
        justify-content: center;
        padding: var(--spacing-lg) var(--spacing-xs);
    }

    .sidebar-item {
        justify-content: center;
        padding: 10px;
    }

    .sidebar-user {
        justify-content: center;
    }

    .sidebar-logout-btn {
        justify-content: center;
        padding: 8px;
    }

    .sidebar-collapse-btn {
        display: none;
    }
}

/* Sidebar-Overlay (Tablet + Mobile: Hamburger öffnet breite Sidebar) */
.sidebar-mobile-open .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 300;
}

.sidebar-mobile-open .sidebar-backdrop {
    display: block;
}

.sidebar-mobile-open .sidebar-label,
.sidebar-mobile-open .sidebar-title {
    opacity: 1;
    width: auto;
}

.sidebar-mobile-open .sidebar-logo {
    display: block;
}

.sidebar-mobile-open .sidebar-hamburger {
    display: none;
}

.sidebar-mobile-open .sidebar-header {
    justify-content: flex-start;
    padding: var(--spacing-lg) var(--spacing-md);
}

.sidebar-mobile-open .sidebar-item {
    justify-content: flex-start;
    padding: 10px 12px;
}

.sidebar-mobile-open .sidebar-user {
    justify-content: flex-start;
}

.sidebar-mobile-open .sidebar-logout-btn {
    justify-content: flex-start;
    padding: 8px 12px;
}

/* ============================================
   PAGE LAYOUT (neue Views)
   ============================================ */

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    margin-bottom: var(--spacing-md);
}

.breadcrumb-link {
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--on-surface);
    text-decoration: underline;
}

.breadcrumb-sep {
    color: var(--on-surface-variant);
    opacity: 0.5;
}

.breadcrumb-current {
    color: var(--on-surface);
    font-weight: 500;
}

/* Page Header */
.page-header {
    margin-bottom: var(--spacing-lg);
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.page-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--on-surface);
    letter-spacing: -0.01em;
    margin: 0;
}

.page-title-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Page Toolbar */
.page-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

/* Page Content */
.page-content {
    margin-top: var(--spacing-lg);
}

/* ============================================
   RESPONSIVE TABLE + CARDS
   ============================================ */

.responsive-table-wrapper {
    width: 100%;
}

/* Desktop: Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead th {
    background-color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white);
    padding: 10px 16px;
    text-align: left;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 12px 16px;
    color: var(--on-surface);
    vertical-align: middle;
}

.data-table.zebra tbody tr:nth-child(even) {
    background-color: var(--surface-container-low);
}

.data-table tbody tr {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background-color: rgba(var(--primary-dark-rgb), 0.10) !important;
}

.data-table tbody tr.clickable {
    cursor: pointer;
}

/* Heutige Zeile hervorheben */
.data-table tbody tr.row-heute {
    background-color: var(--accent-beige) !important;
}

.data-table tbody tr.row-heute td:first-child {
    box-shadow: inset 3px 0 0 var(--primary-dark);
}

.responsive-card.row-heute {
    background-color: var(--accent-beige);
    border-left: 3px solid var(--primary-dark);
}

/* Mobile: Cards (standardmässig versteckt) */
.responsive-cards {
    display: none;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--on-surface-variant);
    font-size: 0.875rem;
}

.empty-state-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
}

/* Responsive Card Styles */
.responsive-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-md);
    border-left: 3px solid var(--primary-dark);
}

.responsive-card.clickable {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.responsive-card.clickable:hover {
    background-color: var(--accent-beige);
}

.responsive-card-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.8125rem;
}

.responsive-card-field.primary {
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-surface);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.responsive-card-label {
    color: var(--on-surface-variant);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    margin-right: var(--spacing-sm);
}

.responsive-card-value {
    text-align: right;
    color: var(--on-surface);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.badge-success {
    background-color: rgba(93, 115, 101, 0.12);
    color: var(--success);
}

.badge-danger {
    background-color: rgba(215, 58, 48, 0.12);
    color: var(--danger);
}

.badge-warning {
    background-color: rgba(152, 133, 100, 0.12);
    color: var(--warning);
}

.badge-neutral {
    background-color: var(--surface-container-low);
    color: var(--on-surface-variant);
}

.badge-active {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
    color: var(--white);
}

/* ============================================
   DASHBOARD
   ============================================ */

/* Dashboard Subtitle */
.dashboard-subtitle {
    display: block;
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    margin-top: -4px;
    margin-bottom: var(--spacing-sm);
}

.dashboard-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-ambient);
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.dashboard-card-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--on-surface);
    margin: 0;
}

.dashboard-card-body {
    padding: 0;
}

.dashboard-filter {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.dashboard-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--on-surface-variant);
    cursor: pointer;
}


.table-cell-sub {
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    margin-top: 2px;
}

.mini-progress-bar {
    height: 4px;
    background: var(--outline-variant);
    border-radius: 2px;
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    background: var(--primary-dark);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.mini-progress-fill.mini-progress-complete {
    background: var(--success);
}

.mini-progress-fill.mini-progress-full {
    background: var(--warning);
}

.stat-progress-bar {
    height: 4px;
    background: var(--outline-variant);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.stat-progress-fill {
    height: 100%;
    background: var(--primary-dark);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Geburtstage-Leiste über der Tabelle */
.dashboard-geburtstage-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.text-secondary {
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
}

.text-center {
    text-align: center;
}

/* ============================================
   RESPONSIVE: PAGE + TABLE
   ============================================ */

@media (max-width: 768px) {
    .page {
        padding: var(--spacing-md);
    }

    .page-title {
        font-size: 1.375rem;
    }

    .page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* Tabelle verstecken, Cards anzeigen */
    .responsive-table-wrapper .data-table {
        display: none;
    }

    .responsive-cards {
        display: block;
    }

    .hide-mobile {
        display: none;
    }

}

/* Content */
.content {
    padding: var(--spacing-xl) 0;
}

/* Cards */
.card {
    background-color: var(--white);
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    background-color: var(--surface-container-low);
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card-header h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-dark);
    margin: 0;
}

.card-body {
    /* Hauptinhalt der Card */
}

/* Toolbar */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Search */
.search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.search-box input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
}

.search-box::before {
    content: '🔍';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--primary-dark);
}

.form-label.required::after {
    content: ' *';
    color: var(--danger);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    background: var(--surface-container-lowest);
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.12);
}

.form-control[readonly] {
    background-color: var(--bg-light);
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

select.form-control {
    cursor: pointer;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

/* Form Sections */
.form-section {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.form-section:last-child {
    margin-bottom: 0;
}

.modal-body .form-section {
    border: none;
    padding: 0;
    background: none;
}

.form-section-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--outline-variant);
}

/* Flex-based form row (for proportional columns) */
.form-row-flex {
    display: flex;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .form-row-flex {
        flex-direction: column;
    }
}

/* Flex utility classes for form layouts */
.flex-3 { flex: 3; }
.flex-2 { flex: 2; }
.flex-1 { flex: 1; }
.max-w-120 { max-width: 120px; }
.max-w-200 { max-width: 200px; }
.ml-2 { margin-left: 0.5rem; }

/* Logo previews in settings */
.logo-preview {
    max-height: 60px;
    padding: 10px;
    border-radius: 4px;
}

.logo-preview-dark {
    background: var(--primary-dark);
}

.logo-preview-light {
    background: var(--surface-container-lowest);
    border: 1px solid var(--border-color);
}

/* SMTP fields toggle transition */
.smtp-fields {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 600px;
    opacity: 1;
}

.smtp-fields.hidden {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Tables */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    font-size: 0.9rem;
}

thead {
    background-color: var(--primary-dark);
    color: var(--white);
}

thead th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}

tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

tbody tr:hover {
    background-color: var(--accent-beige);
}

tbody td {
    padding: var(--spacing-md);
}

.table-actions {
    display: flex;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

/* Stats/Dashboard */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* Stat-Cards Grid + Cards (verwendet in Kurs-Detail-Ansicht) */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-ambient);
}

.stat-card-icon {
    font-size: 32px;
    color: var(--primary-dark);
    flex-shrink: 0;
}

.stat-card-info {
    min-width: 0;
}

.stat-card-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--on-surface);
    line-height: 1.2;
}

.stat-card-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
    margin-top: 2px;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1000;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalBackdropIn 0.25s ease-out;
}

@keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: var(--white);
    border-radius: 10px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slideIn 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes slideIn {
    from { transform: translateY(-30px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--surface-container-low);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-dark);
    opacity: 0.5;
    transition: opacity 0.2s, background-color 0.2s;
}

.modal-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.06);
}

.modal-body {
    padding: var(--spacing-xl);
}

.modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--bg-light);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-radius: 0 0 10px 10px;
}

.badge-info {
    background-color: rgba(93, 115, 101, 0.12);
    color: var(--primary-medium);
}

/* Alerts */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
}

.alert-success {
    background-color: rgba(93, 115, 101, 0.10);
    color: var(--success);
}

.alert-danger {
    background-color: rgba(215, 58, 48, 0.10);
    color: var(--danger);
}

.alert-warning {
    background-color: rgba(152, 133, 100, 0.10);
    color: var(--warning);
}

.alert-info {
    background-color: rgba(93, 115, 101, 0.10);
    color: var(--primary-medium);
}



/* Login Page */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
    padding: var(--spacing-lg);
}

.login-card {
    background-color: var(--white);
    border-radius: 8px;
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 100%;
}

.login-card h1 {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.login-logo {
    display: block;
    margin: 0 auto var(--spacing-lg) auto;
    max-width: 200px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
    .login-logo {
        max-width: 150px;
    }

    .card {
        padding: var(--spacing-md);
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .toolbar-left, .toolbar-right {
        width: 100%;
    }
    
    .search-box {
        max-width: none;
    }
    
    .table-container {
        margin: 0 calc(-1 * var(--spacing-md));
    }
    
    table {
        font-size: 0.8rem;
        min-width: 500px;
    }

    thead th, tbody td {
        padding: var(--spacing-sm);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal {
        padding: var(--spacing-sm);
    }

    .modal-content {
        max-height: 95vh;
    }

    .btn-sm {
        min-height: 36px;
        min-width: 36px;
    }
}

/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--accent-gray); opacity: 0.7; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }
.flex-wrap { flex-wrap: wrap; }

/* Extra grosse Modals */
.modal-xl {
    max-width: 1200px;
    width: 95%;
}

/* Grosse Modals */
.modal-lg {
    max-width: 900px;
    width: 90%;
}

/* Hover-Effekte für klickbare Zeilen */
tr[style*="cursor: pointer"]:hover {
    background-color: var(--accent-beige);
}

@media (max-width: 768px) {
    .modal-xl, .modal-lg {
        width: 95%;
        max-width: none;
    }
}

/* Responsive Spalten-Klassen */
@media (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Smartphone-Optimierung */
@media (max-width: 480px) {
    .hide-mobile {
        display: none !important;
    }

    table {
        font-size: 0.75rem;
        min-width: 400px;
    }

    thead th, tbody td {
        padding: 4px 6px;
    }

    .modal {
        padding: 0;
    }

    .modal-content, .modal-xl, .modal-lg {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-header, .modal-body, .modal-footer {
        padding: var(--spacing-md);
    }
}

/* ============================================
   KALENDER-ANSICHT (Stundenplan-Style)
   ============================================ */

.calendar-week-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.wochenplan-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--on-surface);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.wochenplan-nav-btn:hover {
    background: var(--surface-variant);
}

.wochenplan-nav-btn .material-symbols-rounded {
    font-size: 24px;
}

.calendar-week-label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-surface);
    min-width: 200px;
    text-align: center;
}

/* Grid Container */
.calendar-grid {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow-ambient);
}

/* Tages-Header */
.calendar-header {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    background: var(--surface-container-low);
}

.calendar-day-header {
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: center;
    min-width: 0;
    overflow: hidden;
}

.calendar-day-header:first-child {
    background: transparent;
}

.day-name {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--on-surface);
    margin-bottom: 2px;
}

.day-date {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--on-surface-variant);
}

/* Kalender-Body */
.calendar-body {
    position: relative;
}

.calendar-row {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    height: 45px;
}

.calendar-row:nth-child(even) {
    background: var(--surface-container-low);
}

/* Zeit-Labels */
.time-label {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: center;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Zellen */
.calendar-cell {
    /* Keine Borders (No-Line Rule) */
}

/* Event-Layer */
.calendar-events-layer {
    position: absolute;
    top: 0;
    left: 80px;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.calendar-events-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 100%;
    position: relative;
}

.calendar-day-events {
    position: relative;
    pointer-events: auto;
}

/* Event-Blöcke */
.calendar-event {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 2px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    z-index: 1;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    z-index: 100 !important;
}

.event-title {
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-time {
    font-weight: 500;
    font-size: 0.6875rem;
    margin-bottom: 1px;
}

.event-lehrer {
    font-size: 0.6875rem;
    opacity: 0.85;
}

.event-room {
    font-size: 0.6875rem;
    font-weight: 600;
    opacity: 0.85;
}

/* Event-Farben (pastellig mit Accent-Streifen) */
:root {
    --event-blue-bg: #dce4f5; --event-blue-fg: #2c4277; --event-blue-accent: #4361a5;
    --event-green-bg: #d4e8dc; --event-green-fg: #1e5437; --event-green-accent: #2e7d53;
    --event-orange-bg: #f5dece; --event-orange-fg: #8a3a00; --event-orange-accent: #c75400;
    --event-purple-bg: #ead8f0; --event-purple-fg: #52296b; --event-purple-accent: #7b3fa0;
    --event-teal-bg: #d0e8e8; --event-teal-fg: #0f5252; --event-teal-accent: #1a7a7a;
    --event-rose-bg: #f0d4de; --event-rose-fg: #752040; --event-rose-accent: #b03060;
    --event-amber-bg: #ede0c4; --event-amber-fg: #5c4800; --event-amber-accent: #8a6d00;
    --event-indigo-bg: #d8ddf0; --event-indigo-fg: #262f6e; --event-indigo-accent: #3949ab;
    --event-cyan-bg: #cce5e2; --event-cyan-fg: #004d45; --event-cyan-accent: #00796b;
    --event-lime-bg: #dde8cf; --event-lime-fg: #385c1f; --event-lime-accent: #558b2f;
}
.event-blue    { background: var(--event-blue-bg); color: var(--event-blue-fg); border-left: 3px solid var(--event-blue-accent); }
.event-green   { background: var(--event-green-bg); color: var(--event-green-fg); border-left: 3px solid var(--event-green-accent); }
.event-orange  { background: var(--event-orange-bg); color: var(--event-orange-fg); border-left: 3px solid var(--event-orange-accent); }
.event-purple  { background: var(--event-purple-bg); color: var(--event-purple-fg); border-left: 3px solid var(--event-purple-accent); }
.event-teal    { background: var(--event-teal-bg); color: var(--event-teal-fg); border-left: 3px solid var(--event-teal-accent); }
.event-rose    { background: var(--event-rose-bg); color: var(--event-rose-fg); border-left: 3px solid var(--event-rose-accent); }
.event-amber   { background: var(--event-amber-bg); color: var(--event-amber-fg); border-left: 3px solid var(--event-amber-accent); }
.event-indigo  { background: var(--event-indigo-bg); color: var(--event-indigo-fg); border-left: 3px solid var(--event-indigo-accent); }
.event-cyan    { background: var(--event-cyan-bg); color: var(--event-cyan-fg); border-left: 3px solid var(--event-cyan-accent); }
.event-lime    { background: var(--event-lime-bg); color: var(--event-lime-fg); border-left: 3px solid var(--event-lime-accent); }

/* Dimmed-State fuer gefilterte Events */
.event-dimmed {
    opacity: 0.15;
    pointer-events: none;
}

/* Filterleiste */
.wochenplan-filter-bar {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.filter-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-right: 2px;
}

.filter-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-full);
    background: var(--surface-container-low);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--on-surface);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.filter-btn:hover {
    background: var(--surface-variant);
}

.filter-btn.active {
    background: var(--primary-dark);
    color: white;
}

/* Geburtstags-Banner */
.birthday-banner {
    background: var(--warning);
    color: white;
    border-radius: var(--radius-sm);
    padding: 2px var(--spacing-xs);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.birthday-banner .material-symbols-rounded {
    font-size: 1.1em;
}

/* Kalender-Abo Section (collapsible) */
.kalender-abo-section {
    margin-top: var(--spacing-md);
    text-align: center;
}

.kalender-abo-toggle {
    background: none;
    border: none;
    color: var(--on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: color var(--transition-fast);
}

.kalender-abo-toggle:hover {
    color: var(--on-surface);
}

.kalender-abo-content {
    display: none;
    text-align: left;
    max-width: 700px;
    margin: var(--spacing-sm) auto 0;
    padding: var(--spacing-md);
    background: var(--surface-container-low);
    border-radius: var(--radius-sm);
}

.kalender-abo-section.open .kalender-abo-content {
    display: block;
}

.kalender-abo-section.open .kalender-abo-toggle {
    color: var(--on-surface);
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .calendar-header,
    .calendar-row {
        grid-template-columns: 60px repeat(7, 1fr);
    }

    .calendar-events-layer {
        left: 60px;
    }

    .calendar-event {
        font-size: 0.6875rem;
        padding: 2px var(--spacing-xs);
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .calendar-header,
    .calendar-row {
        grid-template-columns: 50px repeat(5, 1fr);
    }

    .calendar-events-layer {
        left: 50px;
    }

    .calendar-day-header:nth-child(7),
    .calendar-day-header:nth-child(8),
    .calendar-day-events:nth-child(6),
    .calendar-day-events:nth-child(7) {
        display: none;
    }

    .calendar-event {
        font-size: 0.625rem;
        padding: 2px;
    }

    .event-lehrer,
    .event-room {
        display: none;
    }

    .birthday-banner {
        font-size: 0.625rem;
    }

    .wochenplan-filter-bar {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

/* Utility Classes */
.text-muted-light { color: var(--on-surface-variant); opacity: 0.6; }
.text-muted-medium { color: var(--on-surface-variant); }
.text-muted-dark { color: var(--on-surface-variant); font-size: 0.9em; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary-dark); }
.cursor-pointer { cursor: pointer; }

.section-heading {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-dark);
}

.card-beige {
    background-color: var(--accent-beige);
    border: none;
}

.card-header-dark {
    background-color: var(--primary-dark);
    color: #fff;
}

.badge-abgemeldet {
    background-color: rgba(152, 133, 100, 0.15);
    color: var(--warning);
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 3px;
}

.status-icon { font-size: 16px; }

.inline-form-group {
    display: inline-block;
    margin-bottom: 0;
}

.label-normal {
    margin-right: 10px;
    font-weight: normal;
}

.row-inactive {
    opacity: 0.5;
    background-color: var(--surface);
}

.search-results-dropdown {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--surface-container-lowest);
    z-index: 1000;
    margin-top: 2px;
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
}

.autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--surface-container-low);
}

.no-results {
    padding: 10px;
    color: var(--on-surface-variant);
}

.stat-box {
    flex: 1;
    min-width: 120px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.stat-box-beige { background-color: var(--accent-beige); }
.stat-box-blue { background-color: rgba(93, 115, 101, 0.08); }
.stat-box-green { background-color: var(--primary-medium); color: #fff; }
.stat-box-label { font-size: 0.75em; color: var(--on-surface-variant); margin-bottom: 3px; }
.stat-box-green .stat-box-label { color: inherit; }
.stat-box-value { font-size: 1.5em; font-weight: bold; }
.stat-box-beige .stat-box-value { color: var(--primary-dark); }
.stat-box-blue .stat-box-value { color: var(--primary-dark); }

.tfoot-summary {
    border-top: 2px solid var(--primary-dark);
    font-weight: bold;
}

.ical-url-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    background: var(--surface);
    color: var(--on-surface);
}

.warning-box {
    background-color: rgba(152, 133, 100, 0.10);
    border-radius: var(--radius-sm);
    border: 1px solid var(--warning);
}

.toolbar-section {
    border-bottom: 1px solid var(--surface-container-low);
    padding-bottom: 10px;
}

.badge-inaktiv {
    color: var(--danger);
    font-size: 0.8em;
    margin-left: 5px;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--primary-medium);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-medium);
    outline-offset: 2px;
}

.modal-close:focus-visible {
    outline: 2px solid white;
    outline-offset: -2px;
}

/* Anwesenheit Icon-Buttons */
.anw-status-btns {
    display: inline-flex;
    gap: 4px;
}
.anw-btn {
    border: 1px solid var(--outline-variant);
    background: var(--surface);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.anw-btn .material-symbols-rounded {
    font-size: 18px;
}
.anw-btn:hover {
    background: var(--surface-variant);
}
.anw-btn-yes.active {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.anw-btn-yes.active:hover {
    background: var(--primary-dark);
}
.anw-btn-no.active {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.anw-btn-no.active:hover {
    background: #c0392b;
}

/* ============================================
   MODAL SUBTITLE & KURSTAG-DETAILS COLLAPSE
   ============================================ */

.modal-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--on-surface-variant);
    margin-top: 4px;
    font-family: var(--font-body, sans-serif);
}

.modal-subtitle .material-symbols-rounded {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 2px;
}

.kurstag-details-collapse {
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    background: var(--bg-light, #faf8f6);
}

.kurstag-details-collapse summary {
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary-dark, #47584e);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    transition: background 0.15s;
    border-radius: 8px;
}

.kurstag-details-collapse summary:hover {
    background: rgba(0, 0, 0, 0.03);
}

.kurstag-details-collapse summary::-webkit-details-marker {
    display: none;
}

.kurstag-details-collapse summary::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    margin-left: auto;
    transition: transform 0.2s;
}

.kurstag-details-collapse[open] summary::after {
    transform: rotate(180deg);
}

.kurstag-details-collapse[open] summary {
    border-bottom: 1px solid var(--border-color, #ddd);
    border-radius: 8px 8px 0 0;
}

.kurstag-details-body {
    padding: 16px;
}

/* Sperrtag-Icons (Feiertage, Schulferien, Betriebsferien) */
.sperrtag-icon {
    font-size: 16px;
    vertical-align: middle;
    cursor: default;
    position: relative;
}
.sperrtag-icon[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}
.sperrtag-feiertag { color: var(--danger); }
.sperrtag-schulferien { color: var(--success); }
.sperrtag-betriebsferien { color: var(--primary-medium); }

/* ============================================
   Kursbericht-Erfassung: Bewertungskriterien
   ============================================ */
.kb-kriterium-block { margin-bottom: 16px; }
.kb-kriterium-label { background: var(--accent-beige); padding: 6px 12px; font-weight: 500; border-radius: 4px; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-dark); }
.kb-optionen-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 4px; }
.kb-option-badge { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border-color); background: white; cursor: pointer; font-size: 0.88rem; color: var(--text-dark); transition: all 0.15s; font-family: inherit; }
.kb-option-badge.selected { background: var(--primary-dark); color: white; border-color: var(--primary-dark); font-weight: 500; }
.kb-option-badge:hover:not(.selected) { border-color: var(--primary-medium); background: var(--accent-beige); }

/* ============================================
   Kursbericht-Erfassung: Lernziele
   ============================================ */
.kb-lernziele-list { display: flex; flex-direction: column; }
.kb-lernziel-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.kb-lernziel-row .kb-lz-bezeichnung { flex: 1; }
.kb-lz-circles { display: flex; gap: 8px; flex-shrink: 0; }
.kb-lz-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--primary-dark); cursor: pointer; transition: background 0.15s; box-sizing: border-box; }
.kb-lz-circle.filled { background: var(--primary-dark); }
.kb-lz-circle:hover { opacity: 0.7; }

/* ============================================
   DETAIL PAGES (Teilnehmer-Detail etc.)
   ============================================ */

.detail-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.detail-card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.detail-section-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--on-surface);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.detail-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    gap: 4px;
}

.detail-label .material-symbols-rounded {
    font-size: 14px;
}

.detail-value {
    font-size: 0.95rem;
    color: var(--on-surface);
}

@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DETAIL TABS (Kurs-Detail: TN / Kurstage / Berichte)
   ============================================ */

.detail-tabs {
    display: flex;
    gap: 0;
    margin-top: var(--spacing-lg);
    border-bottom: 2px solid var(--surface-container-low);
}

.detail-tab {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--on-surface-variant);
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
}

.detail-tab:hover {
    color: var(--on-surface);
    background: var(--surface-variant);
}

.detail-tab.active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
    font-weight: 600;
}

.detail-tab-count {
    color: var(--on-surface-variant);
    font-weight: 400;
    margin-left: 4px;
}

.detail-tab.active .detail-tab-count {
    color: var(--primary-dark);
}

.detail-tab-content {
    margin-top: var(--spacing-lg);
}

.tab-action-bar {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

@media (max-width: 768px) {
    .detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .detail-tab {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 0.8125rem;
    }
}

/* ============================================
   KURS CARDS (in Teilnehmer-Detail)
   ============================================ */

.kurs-stats {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.kurs-stat {
    text-align: center;
    min-width: 80px;
}

.kurs-stat-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.kurs-stat-label {
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kurs-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.kurs-kurstage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.kurs-kurstage-header strong {
    font-size: 0.9rem;
}

/* ============================================
   DATEI (Dateien-Karte)
   ============================================ */

.datei-liste {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.datei-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--outline-variant);
    gap: var(--spacing-sm);
}

.datei-item:last-child {
    border-bottom: none;
}

.datei-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.datei-upload {
    border-top: 1px solid var(--outline-variant);
    padding-top: var(--spacing-md);
}

.datei-upload-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.datei-upload-row .form-control {
    flex: 1;
}

/* ============================================
   FORM PAGES
   ============================================ */

.page-form {
    max-width: 900px;
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.form-actions-secondary {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--outline-variant);
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--on-surface-variant);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}

.btn-ghost:hover {
    background: var(--surface-variant);
    color: var(--on-surface);
}

.btn-ghost .material-symbols-rounded {
    font-size: 18px;
}

.btn-danger-ghost {
    color: #dc3545;
}

.btn-danger-ghost:hover {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

/* ============================================
   TOOLBAR EXTRAS
   ============================================ */

.toolbar-search-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    width: 100%;
}

.toolbar-control {
    height: 38px;
    padding: 0 0.875rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.toolbar-control:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.12);
}

/* Kurstage Sidebar Layout */
.kurstage-layout {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.kurstage-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: var(--spacing-md);
}

.kurstage-sidebar-section {
    margin-bottom: var(--spacing-md);
}

.kurstage-sidebar-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}


.kurstage-kurs-liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.kurstage-kurs-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--on-surface);
    transition: background-color var(--transition-fast);
    width: 100%;
}

.kurstage-kurs-item:hover {
    background: var(--surface-variant);
}

.kurstage-kurs-item.active {
    background: var(--primary-dark);
    color: white;
}

.kurstage-kurs-item.active .kurstage-kurs-meta {
    color: rgba(255, 255, 255, 0.7);
}

.kurstage-kurs-name {
    font-weight: 600;
    line-height: 1.3;
}

.kurstage-kurs-meta {
    font-size: 0.6875rem;
    color: var(--on-surface-variant);
    line-height: 1.3;
}

.kurstage-kurs-empty {
    padding: var(--spacing-sm);
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
    font-style: italic;
}

.kurstage-limit-liste {
    flex-direction: row;
    flex-wrap: wrap;
}

.kurstage-limit-liste .kurstage-kurs-item {
    width: auto;
    text-align: center;
    flex: 1;
}

.kurstage-main {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .kurstage-layout {
        flex-direction: column;
    }
    .kurstage-sidebar {
        width: 100%;
        position: static;
    }
    .kurstage-kurs-liste {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }
    .kurstage-kurs-item {
        width: auto;
    }
}

.toolbar-search-row .search-box input.toolbar-control {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2.5rem;
}

.toolbar-search-row .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.toolbar-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--on-surface-variant);
    white-space: nowrap;
}

/* Zukunftige Kurstage hervorheben */
.zukunftig-row {
    background-color: rgba(var(--primary-dark-rgb), 0.04);
}

/* Table container in detail cards */
.detail-card .table-container {
    margin: 0 calc(-1 * var(--spacing-lg));
    width: calc(100% + 2 * var(--spacing-lg));
}

.detail-card .data-table {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .datei-upload-row {
        flex-direction: column;
        align-items: stretch;
    }
    .kurs-stats {
        gap: var(--spacing-md);
    }
    .toolbar-search-row {
        width: 100%;
    }
}

/* ============================================
   SLIDE-OVER PANEL
   ============================================ */

.slide-over {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
}

.slide-over.active {
    display: block;
}

.slide-over-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    animation: slideOverBackdropIn 0.25s ease-out;
}

@keyframes slideOverBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideOverBackdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.slide-over-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    max-width: 100%;
    height: 100%;
    background-color: var(--surface-container-lowest);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    animation: slideOverPanelIn 0.25s ease-out;
    overflow: hidden;
}

@keyframes slideOverPanelIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.slide-over.closing .slide-over-panel {
    animation: slideOverPanelOut 0.2s ease-in forwards;
}

@keyframes slideOverPanelOut {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.slide-over.closing .slide-over-backdrop {
    animation: slideOverBackdropOut 0.2s ease-in forwards;
}

.slide-over-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-lg);
}

/* Mobile: fullscreen */
@media (max-width: 768px) {
    .slide-over-panel {
        width: 100vw;
        border-radius: 0;
    }
}

/* ============================================
   KURSTAG PANEL — HEADER
   ============================================ */

.kt-panel-header {
    padding: var(--spacing-lg);
    background-color: var(--surface);
    flex-shrink: 0;
}

.kt-panel-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.kt-panel-header-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.kt-panel-kursname {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--primary-dark);
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-variant: small-caps;
}

.kt-panel-kursname:hover {
    text-decoration: underline;
}

.kt-panel-datum {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface);
    margin-top: var(--spacing-xs);
}

.kt-panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
}

.kt-panel-meta-sep {
    color: var(--on-surface-variant);
    opacity: 0.4;
}

.kt-panel-close {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--on-surface);
    opacity: 0.5;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.kt-panel-close:hover {
    opacity: 1;
    background-color: var(--surface-variant);
}

/* ============================================
   INLINE EDITABLE FIELDS
   ============================================ */

.inline-editable {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
    display: inline-block;
}

.inline-editable:hover {
    background-color: var(--surface-variant);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--on-surface-variant);
}

.inline-editable-input {
    font-family: var(--font-body);
    font-size: inherit;
    padding: 2px 6px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.inline-editable-input:focus {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.12);
}

/* Save flash feedback */
@keyframes inlineSaveFlash {
    0% { box-shadow: 0 0 0 0 rgba(93, 115, 101, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(93, 115, 101, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(93, 115, 101, 0); }
}

.inline-save-flash {
    animation: inlineSaveFlash 0.6s ease-out;
}

/* ============================================
   KURSTAG PANEL — ANWESENHEIT SECTION
   ============================================ */

.kt-section {
    margin-top: var(--spacing-lg);
}

.kt-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.kt-section-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--on-surface);
}

.kt-section-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.kt-anw-list {
    display: flex;
    flex-direction: column;
}

.kt-anw-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.kt-anw-row:nth-child(even) {
    background-color: var(--surface-container-low);
}

.kt-anw-row.status-anwesend {
    background-color: rgba(76, 175, 80, 0.07);
}

.kt-anw-row.status-abwesend {
    background-color: rgba(244, 67, 54, 0.06);
}

.kt-anw-row.status-entschuldigt {
    background-color: rgba(255, 152, 0, 0.07);
}

.kt-anw-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--on-surface);
}

.kt-anw-name .badge {
    margin-left: var(--spacing-xs);
    font-size: 0.6875rem;
}

.kt-anw-bemerkung {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.kt-anw-bemerkung:hover {
    background-color: var(--surface-variant);
}

.kt-anw-bemerkung-placeholder {
    opacity: 0.4;
    font-style: italic;
}

.kt-anw-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.kt-anw-btn {
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.kt-anw-btn .material-symbols-rounded {
    font-size: 18px;
}

.kt-anw-btn:hover {
    background: var(--surface-variant);
}

.kt-anw-btn.active-yes {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}

.kt-anw-btn.active-yes:hover {
    background: #43a047;
}

.kt-anw-btn.active-no {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

.kt-anw-btn.active-no:hover {
    background: #e53935;
}

.kt-anw-btn.active-e {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
}

.kt-anw-btn.active-e:hover {
    background: #fb8c00;
}

/* Gast entfernen — dezent rötlich, optisch getrennt von den Status-Buttons */
.kt-anw-btn-remove {
    color: var(--danger, #b00020);
    margin-left: 6px;
}

.kt-anw-btn-remove:hover {
    background: var(--danger, #b00020);
    color: white;
    border-color: var(--danger, #b00020);
}

/* Mobile: larger touch targets, stacked layout */
@media (max-width: 768px) {
    .kt-anw-row {
        flex-wrap: wrap;
        padding: var(--spacing-md);
    }

    .kt-anw-name {
        flex-basis: auto;
        width: auto;
    }

    .kt-anw-bemerkung {
        flex-basis: 100%;
        order: 3;
        margin-top: var(--spacing-xs);
        font-size: 0.8125rem;
    }

    .kt-anw-btn {
        width: 44px;
        height: 40px;
    }

    .kt-anw-btn .material-symbols-rounded {
        font-size: 20px;
    }

    .kt-panel-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .kt-panel-meta-sep {
        display: none;
    }
}

/* ============================================
   KURSTAG PANEL — DETAILS SECTION
   ============================================ */

.kt-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .kt-details-grid {
        grid-template-columns: 1fr;
    }
}

.kt-details-grid .full-width {
    grid-column: 1 / -1;
}

.kt-detail-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.kt-detail-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.kt-detail-value {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--on-surface);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    min-height: 32px;
    display: flex;
    align-items: flex-start;
    transition: background-color var(--transition-fast);
}

.kt-detail-value:hover {
    background-color: var(--surface-variant);
}

.kt-detail-value-placeholder {
    color: var(--on-surface-variant);
    opacity: 0.5;
    font-style: italic;
}

.kt-detail-value textarea.inline-editable-input {
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

.kt-detail-value select.inline-editable-input {
    width: 100%;
}

/* ============================================
   KURSTAG PANEL — DATEIEN SECTION
   ============================================ */

.kt-datei-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.kt-datei-card:nth-child(even) {
    background-color: var(--surface-container-low);
}

.kt-datei-icon {
    flex-shrink: 0;
    color: var(--on-surface-variant);
}

.kt-datei-info {
    flex: 1;
    min-width: 0;
}

.kt-datei-beschreibung {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.kt-datei-beschreibung:hover {
    background-color: var(--surface-variant);
}

.kt-datei-meta {
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    margin-top: 2px;
}

.kt-datei-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

/* ============================================
   KANBAN — Interessenten-Pipeline
   ============================================ */

.kanban-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.kanban-col-readonly {
    opacity: 0.95;
}

.kanban-col-readonly .kanban-col-title {
    color: var(--on-surface-variant);
}

.kanban-col {
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-height: 420px;
    transition: background 0.15s ease;
    display: flex;
    flex-direction: column;
}

.kanban-col-dragover {
    background: var(--accent-beige);
    box-shadow: 0 0 0 2px var(--primary-dark) inset;
}

.kanban-col-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.kanban-col-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-dark);
    letter-spacing: 0.01em;
}

.kanban-col-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    background: var(--surface-container-highest);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    min-width: 22px;
    text-align: center;
}

.kanban-col-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.kanban-col-empty {
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    text-align: center;
    padding: var(--spacing-lg) 0;
    opacity: 0.5;
}

/* ---- Karten ---- */

.kanban-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: grab;
    box-shadow: var(--shadow-sm);
    border-left: 3px solid transparent;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.kanban-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card-dragging {
    opacity: 0.4;
    transform: rotate(1deg);
}

/* Temperatur-Akzent links */
.kanban-card-temp-hot   { border-left-color: var(--danger); }
.kanban-card-temp-warm  { border-left-color: var(--warning); }
.kanban-card-temp-cold  { border-left-color: var(--primary-light); }
.kanban-card-temp-stale { border-left-color: var(--accent-gray); }

.kanban-card-name {
    font-weight: 600;
    color: var(--on-surface);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.kanban-card-fuer {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--on-surface-variant);
    margin: -2px 0 4px;
}

.kurstag-gaeste {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    margin-top: 2px;
}

/* ============================================
   COMBOBOX — filterbares Dropdown (Gast-Dialog)
   ============================================ */
.combobox {
    position: relative;
}

.combobox-input-wrap {
    position: relative;
}

.combobox-input {
    padding-left: 36px;
}

.combobox-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: 18px;
    pointer-events: none;
}

.combobox-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.combobox-list li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--on-surface);
}

.combobox-list li:hover,
.combobox-list li.active {
    background: var(--accent-beige);
}

.combobox-list li.selected {
    font-weight: 600;
}

.combobox-status {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    margin-left: 4px;
}

.combobox-empty {
    margin: 8px 0 0;
    padding: 12px;
    text-align: center;
    font-style: italic;
    color: var(--on-surface-variant);
    border: 1px dashed var(--outline-variant);
    border-radius: var(--radius-md);
}

.kanban-card-meta {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.kanban-chip {
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--accent-beige);
    color: var(--primary-dark);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.kanban-chip-muted {
    background: var(--surface-container-highest);
    color: var(--on-surface-variant);
}

.kanban-chip-interesse {
    background: var(--primary-dark);
    color: var(--on-primary, #fff);
}

.kanban-card-termin {
    font-size: 0.75rem;
    margin-top: 6px;
    font-weight: 500;
}

.kanban-card-termin-urgent { color: var(--danger); }
.kanban-card-termin-soon   { color: var(--warning); }
.kanban-card-termin-later  { color: var(--on-surface-variant); }

.kanban-card-abklaerung {
    margin-top: 10px;
    padding: 6px 10px;
    border: 1.5px dashed var(--primary-dark);
    border-radius: var(--radius-sm);
    background: var(--surface-container-lowest);
    color: var(--primary-dark);
    line-height: 1.3;
}

.kanban-card-abklaerung-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kanban-card-abklaerung-icon {
    font-size: 15px;
    line-height: 1;
    color: var(--primary-dark);
}

.kanban-card-abklaerung-time {
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--on-surface);
}

.kanban-card-abklaerung-meta {
    margin-top: 1px;
    font-size: 0.68rem;
    color: var(--on-surface-variant);
}

.kanban-card-nachfass {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--accent-beige);
    border-radius: var(--radius-sm);
    color: var(--on-surface);
    line-height: 1.35;
}

.kanban-card-nachfass-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kanban-card-nachfass-icon {
    font-size: 14px;
    line-height: 1;
}

.kanban-card-nachfass-text {
    margin-top: 3px;
    font-size: 0.7rem;
    color: var(--on-surface);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Drop-Zonen (terminal states) ---- */

.kanban-dropzones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.kanban-dropzone {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px dashed var(--outline-variant);
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.kanban-dropzone .material-symbols-rounded {
    font-size: 1.25rem;
}

.kanban-dropzone-gewonnen {
    color: var(--success);
    border-color: rgba(93, 115, 101, 0.35);
}

.kanban-dropzone-verloren {
    color: var(--danger);
    border-color: rgba(215, 58, 48, 0.3);
}

.kanban-dropzone-active {
    border-style: solid;
    background: var(--accent-beige);
    transform: scale(1.01);
}

.kanban-dropzone-count {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--surface-container-highest);
    color: var(--on-surface-variant);
    cursor: pointer;
}

.kanban-dropzone-count:hover {
    background: var(--accent-beige);
    color: var(--primary-dark);
}

.kanban-verloren-liste {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.kanban-verloren-item {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-container-low);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.kanban-verloren-item:hover {
    background: var(--accent-beige);
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
    .kanban-board {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .kanban-board {
        grid-template-columns: 1fr;
    }
    .kanban-dropzones {
        grid-template-columns: 1fr;
    }
}

/* Temperatur-Badge in Listen-Ansicht */
.kanban-temp-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    background: transparent;
}
.kanban-temp-badge.kanban-card-temp-hot   { color: var(--danger); border-color: var(--danger); }
.kanban-temp-badge.kanban-card-temp-warm  { color: var(--warning); border-color: var(--warning); }
.kanban-temp-badge.kanban-card-temp-cold  { color: var(--primary-medium); border-color: var(--primary-medium); }
.kanban-temp-badge.kanban-card-temp-stale { color: var(--accent-gray); border-color: var(--accent-gray); }

/* Ghost-Button-Varianten für Quick-Actions */
.btn-success-ghost { color: var(--success); }
.btn-success-ghost:hover { background: rgba(93, 115, 101, 0.1); }

/* ============================================
   AKTIVITAETEN-TIMELINE (im Teilnehmer-Detail)
   ============================================ */

.aktivitaeten-empty {
    color: var(--on-surface-variant);
    text-align: center;
    padding: var(--spacing-lg) 0;
    font-size: 0.9rem;
    margin: 0;
}

.aktivitaeten-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.aktivitaeten-table thead {
    background-color: var(--primary-dark);
    color: var(--white);
}

.aktivitaeten-table thead th {
    text-align: left;
    font-weight: 500;
    color: var(--white);
    padding: var(--spacing-sm);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aktivitaeten-table tbody td {
    padding: var(--spacing-sm);
    vertical-align: top;
    border-top: 1px solid var(--border-color);
}

.aktivitaeten-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.aktivitaeten-table tbody tr:hover {
    background: var(--accent-beige);
}

.aktivitaeten-table tbody tr:first-child td {
    border-top: none;
}

.aktivitaeten-table .akt-datum-time {
    display: block;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    margin-top: 2px;
}

.aktivitaeten-table .akt-typ-icon {
    vertical-align: middle;
    margin-right: var(--spacing-xs);
    color: var(--primary-dark);
    font-size: 18px;
}

.aktivitaeten-table .akt-beschreibung-meta {
    display: block;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    margin-top: 2px;
}

/* ============================================
   KALENDER-EVENT: ABKLAERUNGSGESPRAECH
   ============================================ */

.calendar-event-abklaerung {
    /* Post-it-Look: warmes Gelb mit solidem, etwas dunklerem Rahmen */
    background: #fef5c4;
    border: 1.5px solid #d9b84a;
    color: var(--primary-dark);
    cursor: pointer;
    padding: 3px 6px;
    overflow: hidden;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* 30-Min-Events sind bei 45px/h nur ~22px hoch — drei Zeilen
       (Name+Niveau / Zeit / Lehrer+Raum) brauchen mindestens ~50px.
       Der Block waechst nach unten ueber seinen Zeitslot hinaus; das
       ist bei i.d.R. seltenen Abklaerungsgespraechen akzeptabel. */
    min-height: 52px;
}

.calendar-event-abklaerung .event-title {
    font-weight: 600;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.calendar-event-abklaerung .event-title-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-abklaerung .event-icon {
    font-size: 15px;
    flex-shrink: 0;
    color: var(--primary-dark);
}

.calendar-event-abklaerung .event-niveau {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0 5px;
    background: var(--accent-beige);
    color: var(--primary-dark);
    border-radius: 8px;
    line-height: 1.5;
}

.calendar-event-abklaerung .event-interesse {
    background: var(--primary-dark);
    color: var(--on-primary, #fff);
}

.calendar-event-abklaerung .event-time {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-abklaerung .event-meta {
    font-size: 0.68rem;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-abklaerung:hover {
    background: #fdeb94;
    z-index: 100 !important;
}

/* Aktivitaet-Panel (Slide-Over): Name + Niveau-Badge im Header */
.akt-panel-name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.akt-panel-niveau {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--accent-beige);
    color: var(--primary-dark);
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.akt-panel-interesse {
    background: var(--primary-dark);
    color: var(--on-primary, #fff);
}

.akt-panel-fuer {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--on-surface-variant);
    margin-top: 2px;
}

/* ============================================
   STATISTIKEN
   ============================================ */

.stats-tabs {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--outline-variant);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
}

.stats-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.stats-tab-btn:hover {
    color: var(--primary-dark);
}

.stats-tab-active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
    font-weight: 600;
}

.stats-chart-wrap {
    position: relative;
    min-height: 280px;
    margin-top: var(--spacing-sm);
}

.stats-zeitraum-label {
    color: var(--on-surface-variant);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--accent-beige);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* Konflikt-Marker auf Wochenplan-Event */
.calendar-event-konflikt {
    border-color: var(--danger) !important;
    border-style: solid !important;
}

.calendar-event-konflikt::before {
    content: "⚠";
    position: absolute;
    top: 2px;
    right: 4px;
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 700;
}