/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* === Neue KlassenBär Palette === */
    --green:     #2ecc71;
    --green-d:   #1a9e54;
    --green-bg:  #edfaf3;
    --green-mid: #c8f5df;
    --amber:     #f9a825;
    --amber-d:   #e65100;
    --amber-bg:  #fff8e1;
    --coral:     #ff6b6b;
    --ink:       #1a2e1a;
    --muted:     #6b8f71;
    --bg:        #f4fbf6;
    --white:     #ffffff;
    --shadow:    0 4px 20px rgba(26,46,26,0.10);
    --shadow-lg: 0 8px 40px rgba(26,46,26,0.14);

    /* === Alias-Mapping für Bestandscode === */
    --honey-yellow: var(--amber);
    --forest-brown: var(--ink);
    --forest-green: var(--green-d);

    --primary-color: var(--green-d);
    --secondary-color: var(--muted);
    --accent-color: var(--amber);
    --danger-color: var(--coral);
    --success-color: var(--green-d);
    --bg-color: var(--bg);
    --bg-secondary: var(--green-bg);
    --card-bg: var(--white);
    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --border-color: var(--green-mid);
}

/* === Typo-System === */
body {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700; /* Mindestgewicht — nie dünner als 700 */
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Display: Bebas Neue für Headlines, Logo, Zahlen */
h1, h2,
.logo-text, .app-title, .header-title,
.page-title, .section-title,
.tab-pane > h2,
.modal-title {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
}

h3 {
    font-family: 'Figtree', sans-serif;
    font-weight: 900;
    letter-spacing: 0.01em;
}

h4, h5, h6 {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
}

/* Buttons: Black Weight */
button, .btn,
.tab-btn, .btn-primary, .btn-secondary, .btn-danger {
    font-family: 'Figtree', sans-serif;
    font-weight: 900;
    letter-spacing: 0.02em;
}

/* Navigation: Extrabold */
nav a, .nav-item,
.tab-btn, .tab-btn-verwaltung {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
}

/* Schülernamen, Kartentitel, Klassennamen: Black */
.schueler-name, .karten-titel, .gruppe-name,
.student-name, .card-title, .class-card-name,
.gb-student-name, .grad-student-name,
.student-name-display {
    font-family: 'Figtree', sans-serif;
    font-weight: 900;
}

/* Labels, Metainfo, Untertitel: 700 */
.label, .subtitle, small,
.gb-avg, .meta, .info-text {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
}

input, select, textarea {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
}

/* ===== MASSNAHMENKATALOG ===== */
.massnahmen-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.massnahmen-add-form {
    background: var(--green-bg);
    border: 1px solid var(--green-mid);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.massnahmen-add-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.massnahmen-add-row select { max-width: 240px; }
.massnahmen-add-row input[type="text"] { flex: 1; min-width: 180px; }
.massnahmen-group { margin-bottom: 1.5rem; }
.massnahmen-group-title {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--green-mid);
}
.massnahmen-table {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.massnahmen-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
}
.massnahmen-row.inactive { opacity: 0.55; }
.massnahmen-active {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--muted);
    flex-shrink: 0;
}
.massnahmen-active input[type="checkbox"] { width: 18px; height: 18px; }
.massnahmen-label-input { flex: 1; min-width: 0; }
.massnahmen-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.massnahmen-actions .btn-icon-small {
    padding: 0.3rem 0.55rem;
    font-size: 1rem;
    min-height: auto;
    min-width: auto;
}

/* Maßnahmen anhaken im Bewertungsmodal */
.measures-list { display: flex; flex-direction: column; gap: 0.35rem; }
.measure-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.measure-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 180px;
    cursor: pointer;
    font-size: 0.9rem;
}
.measure-check input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
.measure-comment {
    flex: 1.2;
    min-width: 140px;
    font-size: 0.85rem;
    padding: 0.4rem 0.55rem;
    min-height: 36px !important;
}
@media (max-width: 640px) {
    .massnahmen-add-row { flex-direction: column; align-items: stretch; }
    .massnahmen-add-row select, .massnahmen-add-row input[type="text"] { max-width: none; width: 100%; }
    .massnahmen-row { flex-wrap: wrap; }
    .massnahmen-label-input { order: 3; width: 100%; flex-basis: 100%; }
    .measure-row { align-items: stretch; }
    .measure-comment { width: 100%; flex-basis: 100%; }
}

/* ===== UPDATE BANNER ===== */
.update-banner {
    background: linear-gradient(90deg, var(--green-d) 0%, var(--green) 100%);
    color: white;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(26, 158, 84, 0.28);
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    position: sticky;
    top: 0;
    z-index: 900;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.update-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.update-content span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-height: auto;
}

@media (max-width: 640px) {
    .update-content {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-small {
        width: 100%;
    }
}

/* ===== APP CONTAINER ===== */
.app-container {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

/* ===== FOOTER ===== */
.app-footer {
    background: linear-gradient(to top, var(--green-bg), var(--white));
    border-top: 1px solid var(--green-mid);
    padding: 1.5rem 2rem;
    text-align: center;
    margin-top: 2rem;
}

.app-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ===== HEADER ===== */
.app-header {
    background: linear-gradient(180deg, var(--green-bg) 0%, #f6fdf9 100%);
    color: var(--ink);
    padding: 0.85rem 1.5rem;
    border-bottom: 2px solid var(--green-mid);
    box-shadow: 0 2px 16px rgba(46,204,113,0.12);
    position: relative;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.logo-container {
    flex-shrink: 0;
}

.app-logo {
    height: 48px;
    width: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--green), var(--green-d));
    padding: 4px;
    box-shadow: 0 4px 12px rgba(46,204,113,0.30);
}

.header-text {
    text-align: left;
}

.app-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.85rem;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.04em;
    line-height: 1;
}

.title-klassen {
    color: var(--ink);
}

.title-baer {
    color: var(--amber);
}

.app-tagline {
    font-size: 0.78rem;
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.3px;
}

@media (max-width: 640px) {
    .app-header {
        padding: 0.65rem 0.75rem;
    }
    
    .header-content {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .header-right {
        order: -1;
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        margin-bottom: 0.4rem;
    }
    
    .app-logo {
        height: 40px;
        width: 40px;
        border-radius: 10px;
    }
    
    .app-title {
        font-size: 1.5rem;
    }
    
    .app-tagline {
        font-size: 0.7rem;
    }
    
    .header-text {
        flex: 1;
    }
    
    .app-footer {
        padding: 1rem;
    }
    
    .app-footer p {
        font-size: 0.75rem;
    }
    
    /* Smaller grade buttons on very small screens */
    .grade-btn {
        min-width: 45px;
        min-height: 45px;
        font-size: 1.5rem;
        padding: 0.4rem;
    }
    
    .grade-buttons {
        gap: 0.3rem;
        justify-content: center;
    }
    
    /* Stack buttons in groups tab for better UX */
    .group-card-actions {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .btn-icon-small {
        font-size: 1.2rem;
        padding: 0.4rem 0.6rem;
    }
    
    /* Tabs optimization */
    .tabs {
        gap: 0.25rem;
        padding: 0 0.5rem;
    }
    
    /* Student cards in groups */
    .group-students-grid {
        gap: 0.4rem;
    }
    
    .group-student-badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
    
    /* Section headers */
    .section-header h2 {
        font-size: 1.3rem;
    }
    
    .section-header .btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
    
    /* Seating chart optimization */
    .seat-card {
        min-height: 70px;
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    
    .seat-name {
        font-size: 0.8rem;
    }
    
    .seat-position {
        font-size: 0.7rem;
    }
    
    /* Form inputs with larger touch targets */
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px; /* Prevents iOS zoom */
        min-height: 48px;
    }
    
    /* Improved button touch targets */
    .btn {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }
    
    /* Very small screen - Table optimizations */
    .history-table th,
    .history-table td {
        padding: 0.5rem 0.4rem;
        font-size: 0.8rem;
    }
    
    .history-table th {
        font-size: 0.75rem;
    }
    
    /* Assessment items compact */
    .assessment-item {
        padding: 0.6rem;
    }
    
    .assessment-header {
        gap: 0.4rem;
    }
    
    .assessment-meta {
        font-size: 0.8rem;
    }
    
    /* Delete button in assessment */
    .btn-delete-assessment {
        padding: 0.3rem 0.5rem;
        font-size: 1rem;
    }
    
    /* Filter panel very compact */
    .filter-panel {
        padding: 0.75rem;
    }
    
    .date-filter {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    /* Competency items */
    .competency-item {
        padding: 0.75rem;
    }
    
    .competency-code {
        font-size: 0.9rem;
    }
    
    .competency-desc {
        font-size: 0.8rem;
    }
    
    /* Group cards */
    .group-card {
        padding: 0.75rem;
    }
    
    .group-card-header h4 {
        font-size: 1.1rem;
    }
    
    /* Batch assessment header */
    .batch-assessment-header h3 {
        font-size: 1.2rem;
    }
    
    .batch-assessment-header p {
        font-size: 0.85rem;
    }
    
    /* Overview filters */
    .overview-filters {
        gap: 0.75rem;
    }
    
    /* Export checkboxes more compact */
    .export-student-checkbox {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .group-student-checkbox {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Competency selector for very small screens */
    .today-competency-selector {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    .today-competency-selector label {
        font-size: 0.9rem;
    }
    
    .today-competency-selector select {
        font-size: 16px;
        padding: 0.875rem;
        min-height: 48px;
    }
}

/* ===== TABS (Grüne Navigation) ===== */
.tabs {
    display: flex;
    align-items: flex-end;
    background: var(--green-d);
    padding: 0 1rem;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    position: sticky;
    top: 0;
    z-index: 500;
}

.tab-btn {
    flex: 0 0 auto;
    min-width: auto;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: all 0.18s ease;
    min-height: 48px;
    position: relative;
    border-radius: 10px 10px 0 0;
}

/* Größere Tabs auf Tablet */
@media (min-width: 768px) {
    .tab-btn {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        min-height: 52px;
    }
}

/* Noch größere Tabs auf Desktop */
@media (min-width: 1024px) {
    .tab-btn {
        padding: 1.1rem 1.5rem;
        font-size: 1.1rem;
        min-height: 56px;
    }
}

.tab-btn-placeholder {
    position: relative;
    white-space: nowrap;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--amber);
    transition: width 0.3s ease;
    border-radius: 3px 3px 0 0;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.tab-btn.active {
    background: var(--bg);
    color: var(--ink);
    font-weight: 900;
    border-bottom-color: var(--amber);
}

.tab-btn.active::after {
    display: none;
}

/* More Menu Dropdown */
.tab-more-wrapper {
    position: relative;
    margin-left: auto;
}


.tab-more-btn {
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.tab-more-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: #1F6D4A;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
}

.tab-more-menu.show {
    display: block;
}

.tab-more-item {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    text-decoration: none;
    box-sizing: border-box;
}

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

.tab-more-item:hover,
.tab-more-item:active {
    background: rgba(255, 255, 255, 0.15);
}

.tab-more-item.tab-btn-kids {
    background: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

/* ===== TAB CONTENT ===== */
.tab-content {
    padding: 1.5rem 1rem;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* ===== SECTION HEADER ===== */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-header h2,
.section-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-family: 'Figtree', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.18s;
    min-height: 44px;
    min-width: 44px;
}

.btn-primary {
    background: var(--green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(46,204,113,0.30);
}

.btn-primary:hover {
    background: var(--green-d);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46,204,113,0.40);
}

.btn-secondary {
    background: var(--white);
    color: var(--ink);
    border: 2px solid var(--green-mid);
}

.btn-secondary:hover {
    background: var(--green-bg);
    border-color: var(--green);
    color: var(--green-d);
}

.btn-amber {
    background: var(--amber);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(249,168,37,0.25);
}

.btn-amber:hover {
    background: var(--amber-d);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249,168,37,0.35);
}

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

.btn-danger:hover {
    background: #dc2626;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-install {
    background: var(--green-d);
    color: white;
    border: 2px solid var(--green-d);
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: auto;
    box-shadow: 0 3px 10px rgba(26,158,84,0.30);
}

.btn-install:hover {
    background: var(--green);
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(46,204,113,0.35);
}

.demo-locked {
    opacity: 0.85;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
    border-color: #ff9800 !important;
}

.btn-install:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .btn-install {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 640px) {
    .header-content {
        flex-wrap: wrap;
    }
    
    .btn-install {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* ===== APP VERSION (Chip) ===== */
.app-version {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--green-bg);
    border: 1px solid var(--green-mid);
    color: var(--green-d);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 50px;
    white-space: nowrap;
}

.app-version button {
    color: var(--green-d) !important;
}

/* ===== GLOBAL CATEGORY SELECTOR (Fach-Chip) ===== */
.global-category-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--amber-bg);
    border: 2px solid var(--amber);
    padding: 4px 10px;
    border-radius: 10px;
}

.global-category-selector .category-label {
    color: var(--amber-d);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.global-category-selector .category-dropdown {
    background: var(--white);
    border: 1px solid var(--amber);
    border-radius: 7px;
    padding: 0.25rem 0.5rem;
    font-family: 'Figtree', sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--amber-d);
    cursor: pointer;
    min-width: 80px;
    max-width: 130px;
}

.global-category-selector .category-dropdown:focus {
    outline: 2px solid var(--amber-d);
    outline-offset: 1px;
}

@media (max-width: 768px) {
    .global-category-selector {
        padding: 0.25rem 0.5rem;
    }
    
    .global-category-selector .category-label {
        display: none;
    }
    
    .global-category-selector .category-dropdown {
        font-size: 0.75rem;
        min-width: 70px;
        max-width: 100px;
    }
}

@media (max-width: 480px) {
    .app-version {
        font-size: 0.6rem;
    }
    
    .global-category-selector .category-dropdown {
        min-width: 60px;
        max-width: 85px;
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
    }
}

/* ===== GRID ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* ===== CARDS ===== */
.card {
    background: var(--white);
    border: 2px solid var(--green-mid);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green-d), var(--green));
    opacity: 0.85;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--green);
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card { animation: cardIn 0.3s ease both; }
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.10s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.20s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.30s; }

.card h3 {
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--ink);
}

.card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== CLASS DETAIL ===== */
.class-detail {
    animation: fadeIn 0.3s;
}

.hidden {
    display: none !important;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.class-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.class-switcher h2 {
    margin: 0;
}

.class-quick-switch {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 36px 10px 16px;
    border: 2px solid var(--green-mid);
    border-radius: 12px;
    background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231a9e54' d='M6 8L0 0h12z'/></svg>") no-repeat right 14px center;
    font-family: 'Figtree', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    min-width: 200px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.class-quick-switch:hover {
    background-color: var(--green-bg);
    border-color: var(--green);
}

.class-quick-switch:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(46,204,113,0.15);
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
}

/* ===== STUDENT MANAGEMENT ===== */
.student-management {
    margin-top: 2rem;
}

.today-competency-selector {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--green-bg);
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 2px solid var(--green-mid);
    position: relative;
    z-index: 10;
    overflow: visible;
    isolation: isolate;
    flex-wrap: wrap;
}

.today-competency-selector label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--primary-color);
    pointer-events: none;
}

/* Assessment Progress Indicator */
.assessment-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.progress-text {
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--green-d);
    white-space: nowrap;
}

.progress-bar-container {
    width: 70px;
    height: 8px;
    background: var(--green-mid);
    border-radius: 50px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--green-d));
    border-radius: 50px;
    transition: width 0.3s ease;
    width: 0%;
    box-shadow: 0 0 8px rgba(46,204,113,0.40);
}

.today-competency-selector select {
    flex: 1;
    margin: 0;
    position: relative;
    z-index: 11;
    pointer-events: auto;
    -webkit-appearance: menulist;
    appearance: menulist;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    user-select: none;
    -webkit-user-select: none;
}

/* Touch-optimized competency selector button */
.competency-select-btn {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    min-height: 52px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

.competency-select-btn:hover {
    border-color: var(--primary-color);
    background: #f8fafc;
}

.competency-select-btn:active {
    transform: scale(0.98);
    background: #e0f2fe;
    border-color: var(--primary-color);
}

.select-arrow {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

/* Competency options list in modal */
.competency-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.5rem;
}

.competency-option-btn {
    padding: 1.25rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 56px;
    display: flex;
    align-items: center;
    font-weight: 500;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

.competency-option-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
}

.competency-option-btn:active {
    transform: scale(0.98);
    background: var(--primary-color);
    color: white;
}

.competency-option-btn.selected {
    background: var(--primary-light);
    border-color: var(--primary-color);
    font-weight: 600;
}


.search-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
    min-height: 48px;
}

.info-text {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: #92400e;
}

.move-mode-indicator {
    background: #dbeafe;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    animation: fadeIn 0.3s;
}

.move-mode-indicator span {
    font-weight: 600;
    color: var(--primary-color);
}

/* ===== SEATING CHART ===== */
.seating-chart {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.seat-card {
    background: var(--white);
    border: 3px solid var(--green-mid);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.seat-card.occupied {
    border-color: var(--green-d);
    cursor: pointer;
    position: relative;
}

.seat-card.occupied:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--amber);
}

/* Assessment status in seating chart - only affects background, not border (border is for differentiation colors) */
.seat-card.never-assessed {
    opacity: 0.9;
    border-style: dashed;
    border-color: #9aa5a0;
    background: #f3f5f4;
}

.seat-card.never-assessed:hover {
    opacity: 1;
}

.seat-card.assessed-historical {
    opacity: 1;
    background: linear-gradient(135deg, var(--green-bg) 0%, var(--green-mid) 100%);
}

.seat-card.assessed-historical:hover {
    background: linear-gradient(135deg, var(--green-mid) 0%, #b5f0d3 100%);
}

.seat-card.assessed-today {
    opacity: 1;
    border-width: 4px;
    border-color: #1b9e5a;
    background: linear-gradient(135deg, var(--green-mid) 0%, #a8eecc 100%);
    box-shadow: 0 0 0 2px rgba(46,204,113,0.35), 0 4px 12px rgba(46,204,113,0.25);
}

.seat-assessment-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1.2rem;
    background: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
}

.seat-count-badge {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 2px;
}

.seat-card.empty {
    background: var(--bg-color);
    border-style: dashed;
    border-color: #d1d5db;
    cursor: pointer;
}

.seat-card.seat-selected {
    border-color: var(--amber) !important;
    border-width: 4px !important;
    box-shadow: 0 0 0 3px rgba(249,168,37,0.35) !important;
    background: var(--amber-bg) !important;
}

.seat-card.sortable-ghost {
    opacity: 0.4;
}

.seat-card.sortable-chosen {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 1000;
    border: 3px solid var(--secondary);
}

.seat-card.sortable-drag {
    opacity: 1 !important;
}

.seat-card.sortable-fallback {
    opacity: 0.95;
    box-shadow: 0 12px 35px rgba(0,0,0,0.4);
    transform: rotate(2deg) scale(1.1);
    border: 3px solid var(--primary);
}

.sortable-swap-highlight {
    background: rgba(245, 158, 11, 0.3) !important;
    border: 3px dashed var(--secondary) !important;
}

body.is-dragging .seat-card.empty {
    border: 2px dashed var(--secondary);
    background: rgba(245, 158, 11, 0.1);
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.view-toggle-btn {
    padding: 0.6rem 1.2rem;
    border: 2px solid #d97706;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    border-color: #b45309;
    background: #fde68a;
}

.view-toggle-btn.active {
    background: var(--forest-green);
    color: white;
    border-color: var(--forest-green);
}

.view-toggle-btn.premium-locked {
    background: #fff3e0;
    border-color: #f59e0b;
    color: #92400e;
}

.view-toggle-btn.premium-locked:hover {
    background: #ffedd5;
}

.view-toggle-btn.premium-locked.active {
    background: var(--forest-green);
    border-color: var(--forest-green);
    color: white;
}

/* List Controls */
.list-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.list-controls .info-text {
    margin: 0;
    font-size: 0.9rem;
}

.sort-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-toggle span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sort-toggle-btn {
    padding: 0.4rem 0.8rem;
    border: 2px solid #d97706;
    background: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-toggle-btn:hover {
    border-color: #b45309;
    background: #fde68a;
}

.sort-toggle-btn.active {
    background: var(--forest-green);
    color: white;
    border-color: var(--forest-green);
}

/* Class Button Bar */
.class-button-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.class-bar-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.class-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.class-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--green-mid);
    background: var(--white);
    color: var(--green-d);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.class-btn:hover {
    border-color: var(--green);
    background: var(--green-bg);
}

.class-btn.active {
    background: var(--green-d);
    color: white;
    border-color: var(--green-d);
    box-shadow: 0 2px 8px rgba(26,158,84,0.3);
}

.no-classes-hint {
    color: var(--text-secondary);
    font-style: italic;
}

/* Lists Header */
.lists-header {
    margin-bottom: 1rem;
}

.lists-header h3 {
    margin: 0;
    color: var(--text-primary);
}

/* Lists Tabs */
.lists-tabs-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.lists-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.list-tab {
    padding: 0.55rem 1.1rem;
    border: 1.5px solid var(--green-mid);
    background: var(--white);
    color: var(--ink);
    border-radius: 12px 12px 0 0;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
    border-bottom: none;
    margin-bottom: -1.5px;
}

.list-tab:hover {
    border-color: var(--green);
    background: var(--green-bg);
    transform: translateY(-1px);
}

.list-tab.active {
    background: var(--green-d);
    color: white;
    border-color: var(--green-d);
    box-shadow: 0 -3px 10px rgba(26,158,84,0.20);
}

/* The Schüler-Daten card reuses the .card style (flex/centered/overflow:hidden),
   which prevents the data grid from being width-constrained and from scrolling.
   Override it so the grid fills the card and can scroll horizontally. */
#list-editor-area .card {
    display: block;
    text-align: left;
    cursor: default;
    overflow: visible;
}

#list-editor-area .card:hover {
    transform: none;
    border-color: var(--green-mid);
    box-shadow: var(--shadow);
}

#list-data-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ===== List Data Table ===== */
.list-data-table {
    width: auto;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-top: 0.5rem;
}

.list-data-th {
    background: var(--green-d);
    color: #fff;
    padding: 0.7rem 0.9rem;
    text-align: left;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--green-d);
    white-space: nowrap;
}

/* Data columns keep a readable min width so many columns scroll instead of squishing */
.list-data-table th:not(.list-data-name):not(:first-child),
.list-data-table td:not(.list-data-name) {
    min-width: 90px;
}

.list-data-text {
    min-width: 120px;
}

/* Keep the student-name column visible while scrolling horizontally */
.list-data-th:first-child,
.list-data-name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 130px;
    white-space: nowrap;
}

.list-data-th:first-child {
    z-index: 3;
}

.list-data-name {
    background: var(--white);
    box-shadow: 1px 0 0 var(--green-mid);
}

.list-data-row:nth-child(even) .list-data-name {
    background: var(--green-bg);
}

.list-data-row:hover .list-data-name {
    background: #e8f7ef;
}

/* Re-create rounded corners on edge cells (table no longer uses overflow:hidden,
   which would break the sticky name column) */
.list-data-table thead th:first-child {
    border-top-left-radius: 13px;
}

.list-data-table thead th:last-child {
    border-top-right-radius: 13px;
}

.list-data-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 13px;
}

.list-data-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 13px;
}

.list-data-row {
    transition: background 0.12s;
}

.list-data-row:nth-child(even) {
    background: var(--green-bg);
}

.list-data-row:hover {
    background: #e8f7ef;
}

.list-data-td {
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--green-mid);
    color: var(--ink);
    vertical-align: middle;
}

.list-data-row:last-child .list-data-td {
    border-bottom: none;
}

.list-data-name {
    font-weight: 700;
}

.list-data-td-check {
    text-align: center;
}

.list-data-text {
    width: 100%;
    border: 1.5px solid transparent;
    background: transparent;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    transition: all 0.15s;
}

.list-data-text:hover {
    background: var(--white);
    border-color: var(--green-mid);
}

.list-data-text:focus {
    background: var(--white);
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.18);
    outline: none;
}

.list-data-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--green-d);
}

.btn-add-list-tab {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.no-lists-hint {
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.5rem 0;
}

/* List Actions */
.list-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Columns Section */
.columns-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #d97706;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.columns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.columns-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.columns-header-icon {
    font-size: 1.2rem;
}

.btn-add-column {
    background: var(--forest-green);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-column:hover {
    background: #155a3a;
    transform: translateY(-1px);
}

/* Columns Grid */
.columns-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.column-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-width: 140px;
    transition: all 0.2s ease;
}

.column-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.column-card-icon {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.column-type-checkbox .column-card-icon {
    background: #dcfce7;
}

.column-type-text .column-card-icon {
    background: #dbeafe;
}

.column-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.column-card-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.column-card-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.column-card-edit {
    width: 28px;
    height: 28px;
    border: none;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.column-card:hover .column-card-edit {
    opacity: 1;
}

.column-card-edit:hover {
    background: #0369a1;
    color: white;
}

.column-card-delete {
    width: 28px;
    height: 28px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.column-card:hover .column-card-delete {
    opacity: 1;
}

.column-card-delete:hover {
    background: #dc2626;
    color: white;
}

/* Empty Columns State */
.columns-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    color: #92400e;
    text-align: center;
}

.columns-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.columns-empty-hint {
    font-size: 0.85rem;
    color: #b45309;
    margin-top: 0.25rem;
}

.columns-premium-hint {
    color: #b45309;
    font-size: 0.85rem;
    margin-top: 0.75rem;
    cursor: pointer;
    text-align: center;
    padding: 0.5rem;
    background: rgba(255,255,255,0.5);
    border-radius: 6px;
}

/* Student List View */
.student-list-view {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.student-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.student-list-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.student-list-item.today-assessed {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.student-list-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-list-number {
    width: 32px;
    height: 32px;
    background: var(--bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.student-list-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.student-list-grades {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.student-list-grade {
    font-size: 1.3rem;
    background: var(--forest-green);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    min-width: 2rem;
    text-align: center;
}

.student-list-grade.today-count {
    background: #3b82f6;
    font-size: 0.85rem;
}

.student-list-comment {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .student-list-item {
        padding: 0.75rem 1rem;
    }
    
    .student-list-name {
        font-size: 1rem;
    }
    
    .student-list-comment {
        display: none;
    }
}

.seat-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.student-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.student-comment {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: #fef3c7;
    border-radius: 4px;
    border-left: 3px solid #fbbf24;
    line-height: 1.3;
    word-wrap: break-word;
}

.empty-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Sitzplan: Raster/Freiform-Umschalter ===== */
.seating-mode-toggle {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.seating-mode-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--green-mid);
    background: var(--white);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.seating-mode-btn:hover {
    border-color: var(--green-d);
}

.seating-mode-btn.active {
    background: var(--forest-green);
    color: white;
    border-color: var(--forest-green);
}

.seating-free-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.6rem;
    background: var(--bg-color);
    border-radius: 10px;
}

.seating-free-hint {
    flex-basis: 100%;
    margin-top: 0.25rem;
}

/* ===== Sitzplan: Freiform-Ansicht (frei positionierbar statt Raster) ===== */
.seating-chart.seating-chart-free {
    display: block;
    position: relative;
    width: 100%;
    min-height: 560px;
    margin-top: 1rem;
    background:
        linear-gradient(var(--bg-color) 0%, var(--bg-color) 100%),
        repeating-linear-gradient(0deg, rgba(31,109,74,0.06) 0px, rgba(31,109,74,0.06) 1px, transparent 1px, transparent 12.5%),
        repeating-linear-gradient(90deg, rgba(31,109,74,0.06) 0px, rgba(31,109,74,0.06) 1px, transparent 1px, transparent 12.5%);
    border: 2px dashed #cbd5c8;
    border-radius: 14px;
    overflow: hidden;
    /* Vertikales Scrollen der Seite bleibt über dem Feld möglich; gezogen wird nur am Griff */
    touch-action: pan-y;
}

.seating-board-label {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.85);
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

.seat-card.free-pos {
    position: absolute;
    width: var(--free-card-w, 128px);
    min-height: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.6rem;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    z-index: 2;
    will-change: left, top;
    /* Überschreibt das "transition: all 0.2s" der Basis-.seat-card-Regel bewusst:
       links/oben werden beim Ziehen bei jedem Fingerbewegungs-Event neu gesetzt – mit
       animierter Position "hinkt" die Karte dem Finger hinterher und wirkt ruckelig/
       abstoßend. Nur Optik-Eigenschaften (Schatten, Rahmen) bleiben weich animiert. */
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.seat-card.free-pos:active,
.seat-card.free-pos.dragging-free {
    cursor: grabbing;
    z-index: 50;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    /* !important: gewinnt bewusst gegen .seat-card.occupied:hover (unten), falls der Finger
       beim Ziehen zufällig auch über der eigenen Karte "hovert". */
    transform: translate(-50%, -50%) scale(1.06) !important;
    transition: box-shadow 0.15s ease;
}

/* Die generische Hover-Regel .seat-card.occupied:hover (für das feste Raster gedacht) setzt
   transform: translateY(-2px) – das überschreibt bei Freiform-Karten die Zentrierung
   (translate(-50%,-50%)). Streift der Finger beim Ziehen eine benachbarte Karte, "springt"
   diese dadurch um ihre halbe Breite/Höhe zur Seite ("Magnetraster"-Effekt). Fix: eigene,
   spezifischere Regel, die die Zentrierung erhält. */
.seat-card.free-pos.occupied:hover {
    transform: translate(-50%, -50%);
    border-color: var(--amber);
}

.seat-drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 3;
    border-radius: 11px 0 11px 0;
    background: rgba(31,109,74,0.10);
}

.seat-card.free-pos .seat-number {
    margin-bottom: 0.25rem;
}

.seat-card.free-pos .student-name {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 700px) {
    .seating-chart.seating-chart-free {
        min-height: 460px;
    }
    .seat-card.free-pos {
        width: var(--free-card-w, 104px);
    }
}

.seat-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    z-index: 10;
}

.btn-icon-small {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    min-height: 32px;
    min-width: 32px;
    transition: all 0.2s;
}

.btn-icon-small:hover {
    background: var(--border-color);
    transform: scale(1.05);
}

/* ===== ASSESSMENTS LIST ===== */
.assessments-list {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.assessment-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

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

.assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.assessment-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ===== DATE FILTER ===== */
.date-filter {
    background: var(--white);
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    border: 1.5px solid var(--green-mid);
    box-shadow: var(--shadow);
}

.date-input {
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--green-mid);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--white);
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.date-input:hover {
    border-color: var(--green);
}

.date-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.18);
    outline: none;
}

/* ===== HISTORY TABLE ===== */
.history-table-container {
    background: var(--white);
    border-radius: 14px;
    overflow-x: auto;
    border: 1.5px solid var(--green-mid);
    box-shadow: var(--shadow);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--green-mid);
    color: var(--ink);
}

.history-table th {
    background: var(--green-d);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    border-bottom: 2px solid var(--green-d);
}

.history-table tbody tr:nth-child(even) {
    background: var(--green-bg);
}

.history-table tbody tr:hover {
    background: #e8f7ef;
}

.history-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== CATEGORY TABS ===== */
.category-tabs-container {
    margin-bottom: 1.5rem;
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.category-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-tab:hover {
    border-color: var(--primary-color);
    background: var(--bg-color);
}

.category-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.category-tab.active .category-edit-btn {
    color: rgba(255,255,255,0.8);
}

.category-edit-btn {
    font-size: 0.8rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.category-tab:hover .category-edit-btn {
    opacity: 1;
}

.category-add-btn {
    padding: 0.6rem 1.2rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
    border-style: dashed;
}

.category-add-btn:hover {
    background: var(--primary-light);
}

/* ===== COMPETENCIES LIST ===== */
.competencies-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.competency-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.competency-info {
    flex: 1;
}

.competency-code {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.competency-description {
    color: var(--text-secondary);
}

.competency-actions {
    display: flex;
    gap: 0.5rem;
}

/* ===== BACKUP ACTIONS ===== */
.backup-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.backup-card {
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.backup-card:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    box-shadow: 0 8px 22px rgba(46,204,113,0.18);
}

.backup-card h3 {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin-bottom: 0.85rem;
}

.backup-card p {
    color: var(--muted);
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}

.file-input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    min-height: 48px;
}

/* ===== MODALS ===== */
/* Dialog element styles */
dialog {
    border: none;
    border-radius: 18px;
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: var(--shadow-lg);
    animation: dialogFadeIn 0.15s ease-out;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background: var(--white);
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

dialog::backdrop {
    background: rgba(26, 46, 26, 0.55);
    backdrop-filter: blur(2px);
    animation: backdropFadeIn 0.15s ease-out;
}

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

/* Legacy modal class support (kept for compatibility) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s;
}

.modal-content {
    background: var(--white);
    border-radius: 18px;
    padding: 2rem;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

.modal-content h3 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    color: var(--ink);
}

.text-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--green-mid);
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 1rem;
    min-height: 48px;
    background: var(--white);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.text-input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.18);
}

textarea.text-input {
    resize: vertical;
    font-family: inherit;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 2rem 1.5rem 2rem;
    position: sticky;
    bottom: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    margin-left: -2rem;
    margin-right: -2rem;
    flex-shrink: 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

.modal-actions .btn {
    flex: 1;
}

.import-mode {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
}

.import-mode label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.import-mode input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ===== ASSESSMENT MODAL ===== */
.modal-assessment {
    max-width: 600px;
}

.assessment-info {
    background: linear-gradient(135deg, var(--green-bg) 0%, #e1f5e9 100%);
    border: 1px solid var(--green-mid);
    padding: 1rem 1.25rem;
    border-radius: 14px;
    margin-bottom: 0.75rem;
    text-align: center;
}

.assessment-info strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

.assessment-class {
    color: var(--green-d);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Assessment History */
.assessment-history {
    background: var(--green-bg);
    border: 1px solid var(--green-mid);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.history-header {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--green-d);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.history-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.history-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 50px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    transition: border-color 0.15s, transform 0.15s;
}

.history-item:hover {
    border-color: var(--green);
    transform: translateY(-1px);
}

.history-emoji {
    font-size: 1.05rem;
}

.history-code {
    font-weight: 900;
    color: var(--green-d);
}

.history-date {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.history-comment {
    cursor: help;
}

.history-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.1rem 0.15rem;
    margin-left: 0.1rem;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.55;
    transition: all 0.15s;
}

.history-item:hover .history-delete-btn {
    opacity: 1;
}

.history-delete-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    opacity: 1;
}

.history-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* Assessment Comment */
.assessment-comment-section {
    margin: 0.75rem 0;
}

.assessment-comment-section label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.assessment-comment-section input {
    font-size: 0.9rem;
}

/* ===== NOTE SECTION IN ASSESSMENT MODAL ===== */
.note-section {
    margin-top: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.note-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    background: var(--green-bg);
    cursor: pointer;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--green-d);
    user-select: none;
}

.note-section-header:hover {
    background: var(--green-mid);
}

.note-section-body {
    padding: 0.75rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.note-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.note-tag-btn {
    padding: 0.35rem 0.75rem;
    border: 1.5px solid var(--green-mid);
    border-radius: 50px;
    background: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.note-tag-btn:hover {
    border-color: var(--green);
    background: var(--green-bg);
    transform: translateY(-1px);
}

.note-tag-btn.selected {
    border-color: var(--green-d);
    background: var(--green-d);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 3px 10px rgba(26,158,84,0.30);
}

.note-textarea {
    width: 100%;
    min-height: 70px;
    border: 2px solid var(--green-mid);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--ink);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.note-textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.18);
    outline: none;
}

.note-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.note-date-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.note-date-field {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    width: auto;
}

.btn-save-note-btn {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}

/* Saved notes list */
.student-notes-list {
    margin-top: 0.75rem;
}

.notes-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.25rem 0;
}

.note-item {
    border: 1px solid var(--green-mid);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.4rem;
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.note-item:hover {
    border-color: var(--green);
    box-shadow: 0 2px 8px rgba(46,204,113,0.12);
}

.note-item-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.note-tag-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.08);
}

.note-date-display {
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: underline dotted;
    flex: 1;
}

.note-date-display:hover {
    color: var(--primary-color);
}

.note-item-text {
    font-size: 0.85rem;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.note-date-edit-form {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.note-date-input {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
}

.btn-sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

/* Note items in Heute tab */
.note-today-item {
    background: var(--green-bg);
    border-left: 3px solid var(--green);
}

.note-heute-section {
    margin-bottom: 1rem;
}

.note-heute-header {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--green-d);
    margin-bottom: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: var(--green-bg);
    border: 1px solid var(--green-mid);
    border-radius: 8px;
}

/* EOM highlight in today/export */
.note-eom-highlight {
    border-left-color: var(--coral) !important;
    background: #fff5f3 !important;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.emoji-btn-large {
    background: var(--white);
    border: 2px solid var(--green-mid);
    border-radius: 16px;
    padding: 1.25rem;
    cursor: pointer;
    font-size: 2.5rem;
    transition: all 0.18s;
    min-height: 80px;
    box-shadow: 0 1px 3px rgba(46,204,113,0.06);
}

.emoji-btn-large:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 20px rgba(46,204,113,0.20);
    border-color: var(--green);
    background: var(--green-bg);
}

.emoji-btn-large:active {
    transform: scale(0.96);
}

.emoji-btn-large.selected {
    border-color: var(--amber);
    background: var(--amber-bg);
    box-shadow: 0 0 0 3px rgba(249,168,37,0.25), 0 6px 16px rgba(249,168,37,0.30);
}

/* Competency Button Styles */
.emoji-btn-large.competency-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    min-height: 100px;
}

.competency-emoji {
    font-size: 2rem;
}

.competency-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    max-width: 100px;
}

/* Rating Type Selector */
.rating-type-selector {
    margin: 1rem 0;
}

.rating-type-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.rating-type-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rating-type-option {
    flex: 1;
    min-width: 140px;
    cursor: pointer;
}

.rating-type-option input[type="radio"] {
    display: none;
}

.rating-type-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-color);
    transition: all 0.2s ease;
}

.rating-type-option input:checked + .rating-type-box,
.rating-type-box.selected {
    border-color: var(--forest-green);
    background: #dcfce7;
}

.rating-type-icons {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.rating-type-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.rating-type-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.assessment-recent {
    background: var(--bg-color);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.assessment-recent h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.recent-assessment {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.recent-assessment:last-child {
    border-bottom: none;
}

/* ===== BATCH ASSESSMENT ===== */
.modal-batch {
    max-width: 600px;
}

.batch-setup {
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 8px;
}

.batch-area {
    margin-top: 1rem;
}

.batch-progress {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--green-d);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.batch-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.batch-complete {
    background: linear-gradient(135deg, var(--green-bg) 0%, var(--green-mid) 100%);
    border: 2px solid var(--green-d);
    border-radius: 14px;
    padding: 2rem;
    text-align: center;
}

.batch-complete h4 {
    color: var(--green-d);
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

/* ===== CSV PREVIEW ===== */
.csv-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.csv-preview h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.csv-preview-item {
    padding: 0.25rem;
    font-size: 0.85rem;
    font-family: monospace;
}

/* ===== CSV LISTEN-IMPORT ===== */
.lists-tabs-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.modal-large {
    max-width: 600px !important;
    width: 90vw !important;
}

.csv-list-step {
    margin-bottom: 1.25rem;
}

.csv-list-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.csv-list-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    line-height: 1.4;
}

.csv-list-mapping-area {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.csv-list-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.csv-list-option-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.csv-list-preview-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.5rem;
    background: var(--bg-color);
    border-radius: 8px;
    padding: 0.5rem;
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.csv-list-preview-table-wrap table {
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 100%;
}

.csv-list-preview-table-wrap th {
    background: var(--forest-green);
    color: white;
    padding: 0.3rem 0.6rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.csv-list-preview-table-wrap td {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csv-list-col-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 34vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem;
    background: var(--bg-color);
    border-radius: 8px;
}

.csv-list-col-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
}

.csv-list-col-row .csv-list-col-cb-label {
    flex: 1;
    min-width: 0;
}

.csv-list-col-row .csv-list-col-cb-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csv-list-col-type {
    flex-shrink: 0;
    width: auto;
    max-width: 140px;
    margin-bottom: 0;
    min-height: 40px;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
}

.csv-list-col-cb-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.csv-list-col-cb-label:has(input:checked) {
    background: #ecfdf5;
    border-color: var(--forest-green);
    color: var(--forest-green);
    font-weight: 600;
}

/* Make the whole CSV import modal scrollable on small screens / many columns */
#modal-csv-list-import .modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

.csv-list-match-ok {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.csv-list-match-warn {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: #92400e;
}

.csv-list-unmatched-list {
    margin: 0.25rem 0 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: #92400e;
    max-height: 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.column-type-toggle {
    display: flex;
    gap: 0.6rem;
}

.column-type-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.column-type-option input[type="radio"] {
    display: none;
}

.column-type-option:has(input:checked) {
    border-color: var(--forest-green);
    background: #ecfdf5;
    color: var(--forest-green);
}

.column-type-option-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.csv-list-manual-map-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.4rem 0 0.25rem;
    padding: 0.25rem 0;
}

.csv-manual-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 0.4rem 0.6rem;
    flex-wrap: wrap;
}

.csv-manual-name {
    flex: 1;
    font-size: 0.875rem;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.csv-manual-tag {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.csv-manual-tag-ambig {
    background: #fef3c7;
    color: #92400e;
}

.csv-manual-tag-miss {
    background: #fee2e2;
    color: #991b1b;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    font-weight: 600;
    z-index: 2000;
    animation: slideUp 0.3s ease-out;
}

.toast-with-undo {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem 0.75rem 1.5rem;
}

.toast-with-undo .undo-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.toast-with-undo .undo-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.toast.error {
    background: var(--danger-color);
}

.toast.success {
    background: var(--green-d);
}

/* Persistent Undo Bar */
.persistent-undo-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--green-d) 0%, var(--green) 100%);
    color: white;
    padding: 0.75rem 1rem;
    z-index: 9999;
    box-shadow: 0 -6px 24px rgba(26,158,84,0.25);
    animation: slideUpUndo 0.3s ease;
}

@keyframes slideUpUndo {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.persistent-undo-bar.hidden {
    display: none;
}

.undo-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.undo-bar-text {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.undo-bar-time {
    opacity: 0.8;
    font-size: 0.85rem;
}

.undo-bar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-undo-action {
    background: var(--amber);
    color: var(--ink);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 900;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.btn-undo-action:hover {
    background: var(--amber-d);
    color: #fff;
    transform: scale(1.05);
}

.btn-undo-dismiss {
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-undo-dismiss:hover {
    background: rgba(255,255,255,0.4);
}

@media (max-width: 600px) {
    .persistent-undo-bar {
        padding: 0.6rem 0.75rem;
    }
    
    .undo-bar-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .undo-bar-text {
        font-size: 0.85rem;
        text-align: center;
        justify-content: center;
    }
    
    .undo-bar-actions {
        justify-content: center;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== PRINT STYLES ===== */
/* ===== PRINT: TODAY COMPACT TABLE (hidden on screen) ===== */
.today-print-table {
    display: none;
}

.print-compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-bottom: 0.5cm;
}

.print-compact-table th,
.print-compact-table td {
    border: 1px solid #999;
    padding: 2px 6px;
    text-align: left;
}

.print-compact-table th {
    background: #e8e8e8;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.print-compact-table td:first-child,
.print-compact-table th:first-child {
    text-align: center;
    width: 30px;
}

.print-compact-table td:nth-child(4),
.print-compact-table td:nth-child(5) {
    text-align: center;
    width: 50px;
}

.print-compact-table td:nth-child(6) {
    text-align: center;
    width: 50px;
}

.print-header {
    margin-bottom: 0.3cm;
    display: flex;
    align-items: center;
    gap: 0.4cm;
}

.print-logo {
    width: 1cm;
    height: 1cm;
    display: none;
}

.print-header h2 {
    font-size: 1rem;
    margin: 0;
}

.print-header p {
    font-size: 0.75rem;
    color: #666;
    margin: 2px 0 0;
}

.print-class-title {
    font-size: 0.85rem;
    margin: 0.3cm 0 0.15cm;
    padding-bottom: 2px;
    border-bottom: 1px solid #333;
}

@media print {
    body {
        background: white;
        font-size: 9pt;
    }

    .print-logo {
        display: block !important;
    }

    .offline-banner,
    .app-header,
    .app-footer,
    .tabs,
    .btn,
    .section-header,
    .modal,
    .persistent-undo-bar {
        display: none !important;
    }

    .app-container {
        max-width: 100%;
        padding: 0;
    }

    .tab-content {
        padding: 0.5cm;
    }

    #tab-heute .assessments-list {
        display: none !important;
    }

    #tab-heute .today-print-table {
        display: block !important;
    }

    .history-table-container {
        border: 1px solid #000;
    }

    .history-table {
        font-size: 8pt;
    }

    .history-table th,
    .history-table td {
        padding: 2px 4px;
    }

    .history-table th {
        background: #e8e8e8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-compact-table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .filter-panel,
    .overview-header .btn-group {
        display: none !important;
    }

    .overview-results {
        box-shadow: none;
        padding: 0;
    }

    @page {
        size: A4 landscape;
        margin: 0.8cm;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .tab-content {
        padding: 1rem;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-header {
        flex-direction: column;
        align-items: stretch;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .seating-chart {
        grid-template-columns: 1fr;
    }

    .date-filter {
        flex-direction: column;
    }

    .backup-actions {
        grid-template-columns: 1fr;
    }
    
    /* Mobile optimization for group assessment */
    .batch-assessment-header h3 {
        font-size: 1.3rem;
    }
    
    .batch-assessment-header p {
        font-size: 0.9rem;
    }
    
    .grade-btn {
        min-width: 50px;
        min-height: 50px;
        font-size: 1.75rem;
        padding: 0.5rem;
    }
    
    .grade-buttons {
        gap: 0.4rem;
    }
    
    .batch-assessment-item {
        padding: 0.75rem;
    }
    
    /* Select dropdown optimization */
    .text-input,
    select.text-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.875rem;
    }
    
    .today-competency-selector {
        margin-bottom: 2rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        z-index: 10;
        overflow: visible;
    }
    
    .today-competency-selector label {
        font-size: 1rem;
        margin-bottom: 0;
    }
    
    .today-competency-selector select {
        width: 100%;
        font-size: 16px;
        padding: 1rem;
        min-height: 50px;
        position: relative;
        z-index: 11;
        -webkit-appearance: menulist;
        appearance: menulist;
    }
    
    /* Modal optimization */
    .modal-content {
        padding: 1.5rem;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions .btn {
        width: 100%;
    }
    
    /* Emoji grid optimization */
    .emoji-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .emoji-btn-large {
        padding: 1rem;
        font-size: 2rem;
        min-height: 60px;
    }
    
    /* Today tab - Assessment items */
    .assessment-item {
        padding: 0.75rem;
    }
    
    .assessment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .assessment-meta {
        font-size: 0.85rem;
    }
    
    /* History table optimization */
    .history-table th,
    .history-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }
    
    .history-table {
        font-size: 0.85rem;
    }
    
    /* Filter panel optimization */
    .filter-panel {
        padding: 1rem;
    }
    
    .date-filter {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-input {
        width: 100%;
    }
    
    /* Overview table */
    #overview-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .overview-results {
        padding: 1rem;
    }
    
    /* Competencies list */
    .competency-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .competency-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Student checkboxes */
    .group-student-checkbox,
    .export-student-checkbox {
        padding: 0.6rem;
    }
}

/* ===== GROUP MANAGEMENT ===== */
.group-management {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.groups-container {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
    clear: both;
}

.group-card {
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.group-card:hover {
    border-color: var(--green);
    box-shadow: 0 8px 22px rgba(46,204,113,0.18);
    transform: translateY(-2px);
}

.group-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1.5px solid var(--green-bg);
}

.group-card-header h4 {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.group-card-actions {
    display: flex;
    gap: 0.4rem;
}

.group-notes {
    background: var(--amber-bg);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin: 0.6rem 0;
    font-size: 0.9rem;
    color: var(--ink);
    border-left: 4px solid var(--amber);
    font-weight: 600;
}

.group-feedback-banner {
    background: linear-gradient(135deg, var(--green-bg) 0%, var(--green-mid) 100%);
    color: var(--green-d);
    padding: 1rem;
    border-radius: 12px;
    margin: 1rem 0;
    text-align: center;
    font-weight: 900;
    border: 2px solid var(--green);
    animation: fadeIn 0.3s ease-in;
    box-shadow: 0 4px 14px rgba(46,204,113,0.18);
}

.group-feedback-banner.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== EXPORT TREE ===== */
.export-selection-area {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.export-quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.export-tree {
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.export-class-item {
    margin-bottom: 0.75rem;
}

.export-class-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.export-class-checkbox:hover {
    background: var(--card-bg);
}

.export-groups-list {
    margin-left: 2rem;
    margin-top: 0.5rem;
}

.export-group-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.3rem;
    cursor: pointer;
}

.export-group-checkbox:hover {
    background: #e5e7eb;
}

.group-students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.group-student-badge {
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 50px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    transition: all 0.15s;
}

.group-student-badge:hover {
    border-color: var(--green);
    background: var(--green-bg);
}

.group-students-section {
    margin-top: 1.5rem;
}

.group-students-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.group-students-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.group-student-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.group-student-checkbox:hover {
    background: var(--green-bg);
    border-color: var(--green);
}

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

.group-student-checkbox label {
    cursor: pointer;
    flex: 1;
    font-size: 0.9rem;
}

.group-empty-message {
    text-align: center;
    color: var(--muted);
    font-style: normal;
    font-weight: 600;
    padding: 3rem 1.5rem;
    background: var(--white);
    border: 2px dashed var(--green-mid);
    border-radius: 16px;
}

/* ===== ÜBERSICHT TAB ===== */
.filter-panel {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 14px;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--green-mid);
    margin-bottom: 1.5rem;
}

.filter-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 200px;
}

#overview-custom-dates {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

#overview-custom-dates label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 120px;
}

@media (max-width: 900px) {
    .filter-row {
        flex-direction: column;
    }
    
    .filter-group {
        min-width: unset;
        width: 100%;
    }
    
    #overview-custom-dates {
        width: 100%;
        flex-direction: row;
    }
    
    #overview-custom-dates label {
        flex: 1;
    }
}

.filter-group label {
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--green-d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Fullheight Modal Layout - für große Modals wie Export */
.modal-fullheight {
    max-height: 90vh;
}

.modal-fullheight .modal-content.modal-flex {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    padding: 0;
    overflow: hidden;
}

.modal-header-fixed {
    padding: 1.5rem 2rem 1rem 2rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-header-fixed h3 {
    margin: 0;
    font-size: 1.4rem;
}

.modal-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 2rem;
}

.modal-fullheight .modal-actions {
    position: relative;
    margin: 0;
    padding: 1rem 2rem 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

.export-classes-tree {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    background: var(--bg-color);
}

.export-class-item {
    margin-bottom: 0.5rem;
}

.export-class-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-weight: 600;
}

.export-class-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.export-class-checkbox label {
    cursor: pointer;
    flex: 1;
}

.export-groups-list {
    margin-left: 2rem;
    margin-top: 0.5rem;
}

.export-group-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.export-group-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.export-group-checkbox label {
    cursor: pointer;
    flex: 1;
    font-size: 0.9rem;
}

.export-students-list {
    margin-left: 3rem;
    margin-top: 0.25rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.export-students-list.expanded {
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.export-student-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.export-student-checkbox input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.export-student-checkbox label {
    cursor: pointer;
    flex: 1;
    font-size: 0.85rem;
}

.export-student-checkbox.hidden {
    display: none;
}

.toggle-students-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    margin-left: 2rem;
    text-decoration: underline;
}

.toggle-students-btn:hover {
    color: var(--primary-color);
}

.overview-results {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 14px;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--green-mid);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--green-bg);
}

.overview-header h3 {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink);
}

#overview-table-container {
    overflow-x: auto;
}

/* Print Styles for Overview */
/* Overview print rules merged into main @media print block above */

/* ===== COLOR PICKER (STUDENT MODAL) ===== */
.color-picker-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.color-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-option:hover {
    border-color: var(--accent-color);
    background: var(--bg-color);
}

.color-option input[type="radio"] {
    display: none;
}

.color-option input[type="radio"]:checked + .color-box {
    box-shadow: 0 0 0 3px white, 0 0 0 5px var(--accent-color);
}

.color-option input[type="radio"]:checked ~ span {
    font-weight: 600;
}

.color-box {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid var(--border-color);
    transition: box-shadow 0.2s ease;
}

.color-none {
    background: white;
    border: 2px dashed var(--border-color);
}

.color-green {
    background: #10b981;
    border-color: #059669;
}

.color-yellow {
    background: #f59e0b;
    border-color: #d97706;
}

.color-red {
    background: #ef4444;
    border-color: #dc2626;
}

/* ===== SEAT COLOR INDICATORS ===== */
.seat-card.color-indicator-green {
    border: 3px solid #10b981;
}

.seat-card.color-indicator-yellow {
    border: 3px solid #f59e0b;
}

.seat-card.color-indicator-red {
    border: 3px solid #ef4444;
}

.seat-card.color-indicator-green::before,
.seat-card.color-indicator-yellow::before,
.seat-card.color-indicator-red::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.seat-card.color-indicator-green::before {
    background: #10b981;
}

.seat-card.color-indicator-yellow::before {
    background: #f59e0b;
}

.seat-card.color-indicator-red::before {
    background: #ef4444;
}

/* Group student badge assessed indicator */
.group-student-badge.assessed-today {
    background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
    border-color: var(--green-d);
    border-width: 2px;
    font-weight: 900;
    color: white;
    box-shadow: 0 3px 10px rgba(26,158,84,0.35);
}

.group-student-badge.assessed-today:hover {
    background: linear-gradient(135deg, var(--green-d) 0%, var(--green) 100%);
}

.group-student-badge.assessed-historical {
    background: var(--green-bg);
    border-color: var(--green);
    border-width: 1.5px;
    font-weight: 700;
    color: var(--green-d);
}

.group-student-badge.never-assessed {
    background: var(--white);
    border-color: var(--green-mid);
    color: var(--muted);
    opacity: 0.75;
}

/* ===== BATCH ASSESSMENT & GROUP ASSESSMENT STYLES ===== */
.batch-assessment-header {
    margin-bottom: 1.5rem;
}

.batch-assessment-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.batch-assessment-header p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.batch-assessment-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
}

.batch-assessment-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--white);
    border: 2px solid var(--green-mid);
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.batch-assessment-item:hover {
    border-color: var(--green);
    box-shadow: 0 4px 12px rgba(46,204,113,0.12);
}

.batch-assessment-item.already-assessed {
    background: linear-gradient(135deg, var(--green-bg) 0%, var(--green-mid) 100%);
    border-color: var(--green-d);
    border-width: 2px;
}

.already-assessed-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #155724;
    background: rgba(40, 167, 69, 0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.batch-student-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.batch-student-info strong {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.batch-student-seat {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.grade-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
}

.grade-btn {
    background: var(--white);
    border: 2px solid var(--green-mid);
    border-radius: 12px;
    padding: 0.6rem;
    cursor: pointer;
    font-size: 1.9rem;
    transition: all 0.18s;
    min-width: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grade-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(46,204,113,0.20);
    border-color: var(--green);
    background: var(--green-bg);
}

.grade-btn:active {
    transform: scale(0.95);
}

.grade-btn.selected {
    background: var(--amber-bg);
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(249,168,37,0.30), 0 6px 14px rgba(249,168,37,0.30);
    transform: scale(1.08);
}

.quick-grade-btn {
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
}

.quick-grade-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-color);
}

.quick-grade-btn.selected {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 640px) {
    /* Kompaktere Kompetenz-Buttons auf Mobilgeräten */
    .competency-option-btn {
        padding: 0.85rem;
        font-size: 0.9rem;
        line-height: 1.4;
        min-height: 48px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .competency-options-list {
        gap: 0.5rem;
        max-height: 65vh;
        padding: 0.25rem;
    }
    
    .competency-select-btn {
        font-size: 0.9rem;
        padding: 0.85rem;
    }
    
    /* Dialog-Titel auf Mobilgeräten */
    dialog h2 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    dialog h3 {
        font-size: 1.1rem;
    }
}

/* ===== IMPROVED MODAL & TOUCH EXPERIENCE (v1.7.0) ===== */

/* Dialogs: Bessere Breite und kein verschwendeter Platz */
dialog {
    width: calc(100vw - 2rem);
    max-width: 550px;
    padding: 0;
}

dialog > div,
dialog > form {
    padding: 1.25rem;
    box-sizing: border-box;
}

/* Batch/Group Assessment Modal: Optimiert für Touch */
.batch-assessment-list {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-right: 0.5rem;
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
}

/* Kompaktere Schüler-Einträge */
.batch-assessment-item {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.batch-student-info strong {
    font-size: 1rem;
}

.batch-student-seat {
    font-size: 0.8rem;
}

/* Größere Touch-Bereiche für Emoji-Buttons */
.grade-btn {
    min-width: 52px;
    min-height: 52px;
    padding: 0.5rem;
    font-size: 1.75rem;
    touch-action: manipulation;
}

.grade-buttons {
    gap: 0.4rem;
    justify-content: center;
}

/* Quick-Grade Buttons im Header: Größer */
.quick-grade-section .grade-btn,
.quick-grade-btn {
    min-width: 48px;
    min-height: 48px;
    font-size: 1.6rem;
}

/* Sticky Footer für Modal-Actions */
.modal-sticky-footer {
    position: sticky;
    bottom: 0;
    background: var(--card-bg);
    padding: 1rem 0 0 0;
    margin: 1rem -1.25rem -1.25rem -1.25rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.modal-sticky-footer .modal-actions {
    margin-top: 0;
}

/* Schnellbewertung Header fixieren */
.quick-grade-section {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 5;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* Tablet & Desktop: Etwas mehr Platz */
@media (min-width: 641px) {
    dialog {
        max-width: 600px;
    }
    
    .grade-btn {
        min-width: 58px;
        min-height: 58px;
        font-size: 1.9rem;
    }
    
    .batch-assessment-list {
        max-height: 50vh;
    }
}

/* iPad/Tablet Landscape: Optimierte Nutzung */
@media (min-width: 768px) and (orientation: landscape) {
    dialog {
        max-width: 650px;
        max-height: 85vh;
    }
    
    .batch-assessment-list {
        max-height: 45vh;
    }
    
    .batch-assessment-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .batch-student-info {
        flex: 0 0 auto;
        min-width: 150px;
    }
    
    .grade-buttons {
        flex: 1;
        justify-content: flex-end;
    }
}

/* Extra Touch-Verbesserungen */
@media (pointer: coarse) {
    .grade-btn {
        min-width: 54px;
        min-height: 54px;
    }
    
    .btn {
        min-height: 48px;
    }
    
    .modal-actions .btn {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }
}

/* ===== SELF-ASSESSMENT MODE (Schüler-Modus) ===== */
.tab-btn-kids {
    background: var(--amber) !important;
    color: var(--ink) !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: 50px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 1.2rem !important;
    margin-left: auto !important;
    align-self: center !important;
    margin-bottom: 8px !important;
    box-shadow: 0 3px 10px rgba(249,168,37,0.30) !important;
    transition: all 0.18s !important;
}

.tab-btn-kids:hover {
    background: var(--amber-d) !important;
    color: #fff !important;
    transform: scale(1.04) !important;
}

.tab-btn-kids.active {
    background: var(--amber-d) !important;
    color: #fff !important;
    border-bottom: none !important;
}

.tab-btn-kids.active::after,
.tab-btn-kids::after {
    display: none !important;
}

.self-assessment-grade {
    color: var(--green-d);
    font-weight: 700;
    background-color: var(--green-bg);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--green);
}

@media print {
    .self-assessment-grade {
        color: var(--green-d) !important;
        font-weight: 700 !important;
        background-color: var(--green-bg) !important;
        border: 1px solid var(--green) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.self-assessment-container {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5rem;
    background: linear-gradient(180deg, var(--green-bg) 0%, #c8efd6 100%);
    border-radius: 16px;
}

/* Teacher Info Box */
.self-teacher-info {
    width: 100%;
    margin-bottom: 1.5rem;
}

.self-teacher-info details {
    background: #fffbeb;
    border: 3px solid #f59e0b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.self-teacher-info summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.1rem;
    color: #92400e;
    background: #fef3c7;
}

.self-teacher-info summary:hover {
    background: #dcfce7;
}

.self-teacher-content {
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.self-teacher-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.self-teacher-content li {
    margin-bottom: 0.3rem;
}

.self-competency-select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    background: white;
    margin-top: 0.5rem;
    cursor: pointer;
}

.self-competency-select:focus {
    outline: none;
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.self-info-hint {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #78716c;
}

/* iOS Install Dialog */
/* Install Modal - Fixed large size */
#modal-ios-install .modal-content {
    width: 90vw !important;
    max-width: 750px !important;
    padding: 2.5rem !important;
}

#modal-ios-install h3 {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    margin-bottom: 1.5rem !important;
}

#modal-ios-install .ios-step {
    font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
    padding: clamp(0.8rem, 2vw, 1.4rem) !important;
}

#modal-ios-install .install-tab {
    font-size: clamp(0.9rem, 2vw, 1.15rem) !important;
    padding: clamp(0.5rem, 1.5vw, 0.85rem) clamp(0.75rem, 2vw, 1.5rem) !important;
}

#modal-ios-install .install-intro,
#modal-ios-install .ios-install-note {
    font-size: clamp(1rem, 2vw, 1.15rem) !important;
}

.install-intro {
    text-align: center;
    color: #666;
    margin-bottom: 1rem;
}

.install-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.install-tab {
    padding: 0.5rem 0.75rem;
    border: 2px solid #ddd;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.install-tab:hover {
    border-color: #1F6D4A;
    background: #e8f5e9;
}

.install-tab.active {
    border-color: #1F6D4A;
    background: #1F6D4A;
    color: white;
}

.install-content {
    min-height: 140px;
}

.ios-install-steps {
    margin: 1rem 0;
}

.ios-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #f0fdf4;
    border-radius: 8px;
    font-size: 1rem;
}

.ios-step-icon {
    font-size: 1.25rem;
}

.ios-share-icon {
    display: inline-block;
    background: #007aff;
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.ios-install-note {
    text-align: center;
    color: #065f46;
    font-weight: 500;
    margin-top: 1rem;
}

.self-step {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.self-header {
    margin-bottom: 2rem;
    text-align: center;
}

.self-title {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    letter-spacing: 0.04em;
    color: var(--green-d);
    margin: 0 0 0.5rem 0;
}

.self-subtitle {
    font-size: 1.3rem;
    color: var(--green-d);
    margin: 0;
    font-weight: 600;
}

.self-question {
    font-size: 1.5rem;
    color: var(--green-d);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* Class and Student Grid */
.self-class-grid,
.self-student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    width: 100%;
}

.self-class-btn,
.self-student-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--white);
    border: 3px solid var(--green);
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 120px;
    box-shadow: 0 3px 10px rgba(46,204,113,0.15);
}

.self-class-btn:hover,
.self-student-btn:hover {
    transform: scale(1.05);
    border-color: var(--green-d);
    box-shadow: 0 10px 28px rgba(46,204,113,0.35);
}

.self-class-btn:active,
.self-student-btn:active {
    transform: scale(0.98);
}

.self-class-icon,
.self-student-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.self-class-name,
.self-student-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-d);
}

/* Emoji Grid for Kids */
.self-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.self-emoji-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--white);
    border: 4px solid var(--amber);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 120px;
    box-shadow: 0 3px 10px rgba(245,158,11,0.18);
}

.self-emoji-btn:hover {
    transform: scale(1.08);
    border-color: var(--amber-d);
    box-shadow: 0 10px 30px rgba(245,158,11,0.4);
}

.self-emoji-btn:active {
    transform: scale(0.95);
    background: var(--amber-bg);
}

.self-emoji {
    font-size: 3.5rem;
}

.self-emoji-label {
    font-size: 0.85rem;
    color: var(--amber-d);
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
}

/* Back Button for Kids */
.btn-back-kids {
    display: block;
    margin: 0 auto 1rem auto;
    background: var(--white);
    border: 2px solid var(--green);
    color: var(--green-d);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-back-kids:hover {
    background: var(--green-bg);
    transform: translateY(-1px);
}

/* Done Screen */
.self-done-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.self-done-icon {
    font-size: 5rem;
    animation: popIn 0.5s ease;
}

@keyframes popIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Confetti Animation */
.self-confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 12px;
    height: 12px;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-100px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

.self-done-title {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    letter-spacing: 0.04em;
    color: var(--green-d);
    margin: 0;
}

.self-done-text {
    font-size: 1.2rem;
    color: var(--green-d);
    margin: 0;
    font-weight: 600;
}

.btn-kids-primary {
    background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    margin-top: 1rem;
    box-shadow: 0 4px 14px rgba(26,158,84,0.35);
}

.btn-kids-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px rgba(26,158,84,0.45);
}

.btn-kids-secondary {
    background: var(--white);
    color: var(--green-d);
    border: 2px solid var(--green);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-kids-secondary:hover {
    background: var(--green-bg);
    transform: translateY(-1px);
}

.self-empty {
    color: #6b7280;
    font-size: 1.1rem;
    padding: 2rem;
}

/* Hide header/footer in self-assessment mode for cleaner iPad experience */
#tab-selbst.active ~ .app-header,
body.self-mode .app-header,
body.self-mode .app-footer {
    display: none;
}

/* Responsive adjustments for kids mode */
@media (max-width: 600px) {
    .self-title {
        font-size: 2rem;
    }
    
    .self-class-grid,
    .self-student-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .self-emoji-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .self-emoji {
        font-size: 2.5rem;
    }
    
    .self-emoji-btn {
        min-height: 90px;
        padding: 1rem;
    }
}

/* ===== GRADUIERUNG VIEW ===== */
.graduation-view {
    padding: 0.5rem 0;
}

.grad-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0 0.75rem 0;
    border-bottom: 1px solid #e5e0d8;
    margin-bottom: 0.75rem;
}

.grad-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #5A4A3A;
    white-space: nowrap;
}

.grad-comp-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.grad-comp-select {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d4ccc4;
    border-radius: 6px;
    background: #fff;
    color: #3d2c1e;
}

.grad-settings-btn {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    background: #f3ede6;
    border: 1px solid #c8bfb5;
    border-radius: 6px;
    color: #5A4A3A;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
}
.grad-settings-btn:hover {
    background: #e8ddd5;
}

.grad-columns-wrap {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: flex-start;
}

.grad-column {
    flex: 1;
    min-width: 140px;
    border-radius: 10px;
    overflow: hidden;
    background: #f9f7f5;
    border: 1px solid #e5ddd5;
}

.grad-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.grad-column-count {
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(0,0,0,0.12);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    min-width: 1.4rem;
    text-align: center;
}

.grad-column-body {
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 60px;
}

.grad-student-card {
    background: #fff;
    border: 1px solid #e5ddd5;
    border-radius: 7px;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.grad-student-card:hover {
    background: #f0ebe5;
    transform: translateY(-1px);
}
.grad-student-card:active {
    transform: translateY(0);
}

.grad-student-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #3d2c1e;
    line-height: 1.3;
}

.grad-unassigned-col .grad-column-header {
    border-bottom: 1px dashed #c8bfb5;
}

.grad-unassigned-col .grad-student-card {
    border-style: dashed;
    border-color: #c8bfb5;
    background: #faf8f5;
}

/* Level Picker Buttons */
.grad-picker-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}
.grad-picker-btn:hover {
    opacity: 0.92;
    transform: translateX(2px);
}
.grad-picker-btn.active {
    outline: 2.5px solid var(--green-d);
    outline-offset: 1px;
}
.grad-picker-assess {
    background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
    color: #fff;
    border: none;
    text-align: center;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(26,158,84,0.3);
}
.grad-picker-assess:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(26,158,84,0.4);
    opacity: 1;
}
.grad-picker-divider {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0 0.1rem;
    text-align: center;
}
.grad-picker-remove {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
    margin-top: 0.35rem;
    text-align: center;
}

/* Settings rows */
.grad-settings-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f9f7f5;
    border: 1px solid #e5ddd5;
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
}

.grad-settings-drag {
    color: #999;
    cursor: grab;
    font-size: 1rem;
    padding: 0 0.2rem;
}

.grad-settings-name {
    flex: 1;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid #d4ccc4;
    border-radius: 6px;
    min-width: 0;
}

.grad-settings-color {
    width: 36px;
    height: 32px;
    border: 1px solid #d4ccc4;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
}

.grad-settings-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem;
    color: #e74c3c;
    border-radius: 4px;
}
.grad-settings-del:hover {
    background: #fee2e2;
}

@media (max-width: 480px) {
    .grad-columns-wrap {
        gap: 0.4rem;
    }
    .grad-column {
        min-width: 110px;
    }
    .grad-column-header {
        font-size: 0.78rem;
        padding: 0.4rem 0.5rem;
    }
    .grad-student-name {
        font-size: 0.78rem;
    }
}

/* ============================================================
   NEUE MODULE: Notenspiegel, Halbjahr, Einschätzen, Alltag
   ============================================================ */

/* Tab-Button Stil für neue Module */
.tab-dropdown-wrapper {
    position: relative;
    flex: 0 0 auto;
}

.tab-btn-verwaltung {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    min-height: 48px;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    border-radius: 10px 10px 0 0;
}

.tab-btn-verwaltung::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #FFB84D;
    transition: width 0.3s ease;
    border-radius: 3px 3px 0 0;
}

@media (min-width: 768px) {
    .tab-btn-verwaltung {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        min-height: 52px;
    }
}

@media (min-width: 1024px) {
    .tab-btn-verwaltung {
        padding: 1.1rem 1.5rem;
        font-size: 1.1rem;
        min-height: 56px;
    }
}

.tab-btn-verwaltung:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.tab-btn-verwaltung.module-active {
    background: var(--bg);
    color: var(--ink);
    font-weight: 900;
    border-bottom-color: var(--amber);
}

.tab-btn-verwaltung.module-active::after {
    display: none;
}

.dropdown-arrow {
    font-size: 0.75em;
    opacity: 0.8;
    transition: transform 0.2s;
}

.tab-btn-verwaltung.open .dropdown-arrow {
    transform: rotate(180deg);
}

.tab-dropdown-menu {
    display: none;
    position: fixed;
    min-width: 220px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    overflow: hidden;
    border: 2px solid var(--green-mid);
    padding: 8px;
}

.tab-dropdown-menu.open {
    display: block;
    animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tab-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 11px 14px;
    text-align: left;
    background: none;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    color: var(--ink);
    min-height: 44px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.15s, color 0.15s;
}

.tab-dropdown-item:hover,
.tab-dropdown-item:active {
    background: var(--green-bg);
    color: var(--green-d);
}

.tab-dropdown-item.active {
    background: var(--green-bg);
    color: var(--green-d);
    font-weight: 900;
}

.tab-dropdown-item.active::before {
    content: '✓ ';
    font-size: 0.85em;
}

/* ---- Notenspiegel ---- */
.gb-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--green-mid);
    margin-bottom: 1.5rem;
    background: var(--white);
}
.gb-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    font-size: 0.88rem;
}
.gb-table thead th {
    background: var(--green-d);
    color: #fff;
    padding: 0.7rem 0.9rem;
    text-align: left;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}
.gb-table tbody tr:nth-child(even) {
    background: var(--green-bg);
}
.gb-table tbody tr:hover {
    background: #e8f7ef;
}
.gb-table td {
    padding: 0.55rem 0.9rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--green-mid);
    color: var(--ink);
}
.gb-table .grade-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
    font-weight: 900;
    font-size: 0.92rem;
    min-width: 2rem;
    text-align: center;
    background: var(--amber);
    color: var(--ink);
    box-shadow: 0 2px 6px rgba(249,168,37,0.30);
}
.gb-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* ===== Gradebook Stats v2 ===== */
.gb-stats { display: flex; flex-direction: column; gap: 1rem; }
.gb-stats-section {
    background: #fff;
    border: 1px solid var(--green-mid, #b8d8c4);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}
.gb-stats-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem;
}
.gb-stats-head h4 { margin: 0; font-size: 1rem; color: var(--green-d, #1F6D4A); }
.gb-stats-meta { font-size: 0.82rem; color: #6a6a6a; }
.gb-stats-meta strong { color: var(--ink); }

/* Notenverteilung als horizontale Balken */
.gb-dist-grid { display: flex; flex-direction: column; gap: 0.3rem; }
.gb-dist-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr 6rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}
.gb-dist-label { font-weight: 600; color: var(--ink); }
.gb-dist-bar {
    background: #f0f3f0; border-radius: 999px; height: 0.85rem; overflow: hidden;
}
.gb-dist-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.gb-dist-fill-1 { background: #2e7d32; }
.gb-dist-fill-2 { background: #66bb6a; }
.gb-dist-fill-3 { background: #ffca28; }
.gb-dist-fill-4 { background: #ffa726; }
.gb-dist-fill-5 { background: #ef5350; }
.gb-dist-fill-6 { background: #c62828; }
.gb-dist-count { text-align: right; color: #555; font-variant-numeric: tabular-nums; }
.gb-dist-count small { color: #999; margin-left: 0.15rem; }

/* Klick-Karten (Ø pro Notentyp / pro Termin) */
.gb-detail-list { display: flex; flex-direction: column; gap: 0.4rem; }
.gb-detail-card {
    border: 1px solid #d8e8de; border-radius: 10px; background: #fafdfa;
    overflow: hidden;
}
.gb-detail-card-event { background: #fffbf2; border-color: #f0e0bc; }
.gb-detail-card > summary {
    display: grid;
    grid-template-columns: 1fr auto auto 1.2rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
}
.gb-detail-card > summary::-webkit-details-marker { display: none; }
.gb-detail-card > summary:hover { background: rgba(0,0,0,0.03); }
.gb-detail-title { font-weight: 600; color: var(--ink); }
.gb-detail-avg strong { color: var(--green-d, #1F6D4A); font-size: 1rem; }
.gb-detail-meta { font-size: 0.78rem; color: #888; white-space: nowrap; }
.gb-detail-toggle { color: #999; transition: transform 0.2s; text-align: center; }
.gb-detail-card[open] > summary .gb-detail-toggle { transform: rotate(180deg); }
.gb-detail-body { border-top: 1px solid rgba(0,0,0,0.06); padding: 0.5rem 0.85rem 0.7rem; }
.gb-detail-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.gb-detail-table th, .gb-detail-table td {
    padding: 0.3rem 0.5rem; text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.gb-detail-table th { color: #777; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
.gb-detail-table td.right, .gb-detail-table th.right { text-align: right; }
.gb-detail-table td.muted { color: #999; font-size: 0.8rem; }
.gb-detail-table .grade-good { color: #2e7d32; }
.gb-detail-table .grade-bad { color: #c62828; }

@media (max-width: 720px) {
    .gb-dist-row { grid-template-columns: 3.6rem 1fr 5rem; font-size: 0.82rem; }
    .gb-detail-card > summary { grid-template-columns: 1fr auto 1.2rem; }
    .gb-detail-meta { display: none; }
}

/* Notenbuch View-Mode Toggle */
.gb-viewmode-toggle {
    display: inline-flex;
    border: 1.5px solid var(--green-mid, #b8d8c4);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.gb-mode-btn {
    background: #fff;
    border: 0;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: #5a4a3a;
    transition: background 0.15s, color 0.15s;
}
.gb-mode-btn + .gb-mode-btn { border-left: 1px solid var(--green-mid, #b8d8c4); }
.gb-mode-btn:hover { background: #f0f9f3; }
.gb-mode-btn.active {
    background: var(--green, #4caf80);
    color: #fff;
}

/* Matrix-Tabelle */
.gb-mx-hint {
    background: #f4faf6;
    border: 1px solid #c8e6d2;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    color: #4a5a4f;
}
.gb-mx-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e0e8e3;
    border-radius: 10px;
    background: #fff;
}
.gb-mx-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 100%;
}
.gb-mx-table th, .gb-mx-table td {
    border: 1px solid #e0e8e3;
    padding: 0.35rem 0.5rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.gb-mx-table thead th {
    background: #f4faf6;
    color: #2c4a36;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}
.gb-mx-table .gb-mx-group {
    background: #e8f3ec;
    border-bottom: 2px solid #b8d8c4;
}
.gb-mx-table .gb-mx-date {
    font-size: 0.75rem;
    color: #5a6a5f;
    font-weight: 500;
    min-width: 44px;
}
.gb-mx-table .gb-mx-avg-h {
    background: #fff7e6;
    color: #8a6a2f;
    font-weight: 600;
    min-width: 44px;
}
.gb-mx-table .gb-mx-name {
    text-align: left;
    font-weight: 600;
    background: #fafafa;
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 140px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gb-mx-table thead th.gb-mx-name { z-index: 3; }
.gb-mx-table .gb-mx-cell { min-width: 48px; }
.gb-mx-empty { background: #fcfcfc; }
.gb-mx-add {
    background: transparent;
    border: 1px dashed #c0d0c8;
    border-radius: 6px;
    width: 32px;
    height: 28px;
    color: #999;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
}
.gb-mx-add:hover, .gb-mx-add:active {
    background: var(--green, #4caf80);
    color: #fff;
    border-style: solid;
    border-color: var(--green, #4caf80);
}
.gb-mx-val {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: #fff7e6;
    border: 1px solid #f0d8a8;
    cursor: pointer;
    font-weight: 600;
}
.gb-mx-val:hover { background: #ffe9b8; }
.gb-mx-val.gb-mx-asm {
    background: #f0f4ff;
    border-color: #c8d4f0;
    cursor: default;
}
.gb-mx-avg {
    background: #fff7e6;
    font-weight: 600;
    color: #8a6a2f;
}
.gb-mx-total {
    background: #e8f3ec;
    font-weight: 700;
    color: #1f6d4a;
}
.gb-mx-foot td {
    background: #f4faf6;
    border-top: 2px solid #b8d8c4;
    font-size: 0.85rem;
}
.gb-mx-foot .gb-mx-name { background: #e8f3ec; }
@media (max-width: 700px) {
    .gb-mx-table { font-size: 0.78rem; }
    .gb-mx-table th, .gb-mx-table td { padding: 0.25rem 0.35rem; }
    .gb-mx-table .gb-mx-name { min-width: 100px; max-width: 130px; }
}
.gb-stat-card {
    flex: 1 1 140px;
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: border-color 0.15s, transform 0.15s;
}
.gb-stat-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
}
.gb-stat-value {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--green-d);
    line-height: 1;
}
.gb-stat-label {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}
.gb-student-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--green-d) 0%, var(--green) 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: default;
    letter-spacing: 0.01em;
}
.gb-student-section {
    margin-bottom: 1.25rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--green-mid);
    box-shadow: var(--shadow);
}
.gb-student-avg {
    font-size: 1.05rem;
    font-weight: 900;
}
.gb-student-name {
    font-weight: 800;
    font-size: 0.92rem;
    vertical-align: top;
    color: var(--ink);
}
.gb-avg {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green-d);
    margin-top: 0.2rem;
}
.gb-row-student {
    background: var(--green-bg) !important;
}
.gb-add-row td {
    background: transparent;
    border-bottom: 2px solid var(--green-mid);
}
.gb-col-grade { text-align: center; }
.grade-good { color: var(--green-d); font-weight: 900; }
.grade-bad  { color: var(--coral); font-weight: 900; }
.hj-badge {
    display: inline-block;
    border-radius: 50px;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid transparent;
}
.hj-badge.hj1 { background: var(--amber-bg); color: var(--amber-d); border-color: var(--amber); }
.hj-badge.hj2 { background: var(--green-bg); color: var(--green-d); border-color: var(--green); }
.eval-result-item {
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.eval-result-item:hover {
    transform: translateY(-1px);
    border-color: var(--green);
    box-shadow: 0 4px 12px rgba(46,204,113,0.15);
}
.eval-crit-count {
    font-size: 0.78rem;
    color: var(--muted);
    margin-left: 0.5rem;
    font-weight: 600;
}
.eval-template-info {
    flex: 1;
    min-width: 0;
}

/* ---- Halbjahr (Notenübersicht-Tabelle) ---- */
.hj-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    padding: 1rem 1.5rem;
    background: var(--green-bg);
    border-bottom: 1.5px solid var(--green-mid);
}
.hj-semester-toggle {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.hj-sem-btn {
    padding: 0.45rem 1rem;
    border: 1.5px solid var(--green-mid);
    background: var(--white);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    color: var(--ink);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.hj-sem-btn:hover {
    background: var(--green-bg);
    border-color: var(--green);
    transform: translateY(-1px);
}
.hj-sem-btn.active {
    background: var(--green-d);
    border-color: var(--green-d);
    color: #fff;
    box-shadow: 0 3px 10px rgba(26,158,84,0.30);
}
.hj-table-meta {
    padding: 0.75rem 1.5rem 0.4rem;
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
}
.hj-table-wrap {
    overflow-x: auto;
    padding: 0 1rem 2rem;
}
.hj-grade-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 380px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--green-mid);
}
.hj-grade-table thead th {
    background: var(--green-d);
    color: #fff;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hj-col-name { width: 55%; }
.hj-col-grade { width: 15%; text-align: center !important; }
.hj-col-action { width: 40px; text-align: center !important; }
.hj-table-row {
    border-bottom: 1px solid var(--green-mid);
    cursor: pointer;
    transition: background 0.12s;
}
.hj-table-row:hover { background: var(--green-bg); }
.hj-table-row:last-child { border-bottom: none; }
.hj-name-cell {
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hj-row-num {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 1.5rem;
}
.hj-grade-cell {
    text-align: center;
    padding: 0.75rem 0.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}
.hj-grade-cell.has-grade {
    color: var(--ink);
    font-weight: 800;
}
.hj-final.has-grade {
    color: var(--green-d);
    font-weight: 900;
    font-size: 1.1rem;
}
.hj-action-cell {
    text-align: center;
    padding: 0.7rem 0.5rem;
}
.hj-arrow {
    color: var(--green);
    font-size: 1.3rem;
    font-weight: 700;
}
.hj-class-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.hj-grade-box {
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-align: center;
    flex: 1;
    box-shadow: var(--shadow);
    transition: border-color 0.15s, transform 0.15s;
}
.hj-grade-box:hover {
    border-color: var(--green);
    transform: translateY(-2px);
}
.hj-grade-label {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.hj-grade-value {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--green-d);
    line-height: 1;
}

/* ---- Formular Einschätzen ---- */
.eval-template-card {
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.eval-template-card:hover {
    transform: translateY(-1px);
    border-color: var(--green);
    box-shadow: 0 4px 12px rgba(46,204,113,0.15);
}
.eval-template-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}
.eval-template-meta {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.2rem;
    font-weight: 600;
}
.eval-template-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.eval-criterion-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.eval-criterion-row:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.12);
}
.eval-criterion-row input,
.eval-criterion-row select {
    flex: 1;
    min-width: 0;
}
.eval-fill-criterion {
    background: var(--green-bg);
    border: 1.5px solid var(--green-mid);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
}
.eval-fill-criterion-name {
    font-weight: 700;
    margin-bottom: 0.45rem;
    color: var(--ink);
}
.eval-fill-criterion-input {
    width: 100%;
}
.eval-result-card {
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.eval-result-card:hover {
    transform: translateY(-1px);
    border-color: var(--green);
    box-shadow: 0 4px 12px rgba(46,204,113,0.15);
}
.eval-result-grade-display {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-size: 3.6rem;
    font-weight: 400;
    color: var(--green-d);
    text-align: center;
    padding: 0;
    background: var(--green-bg);
    border: 3px solid var(--green);
    border-radius: 50%;
    width: 110px;
    height: 110px;
    line-height: 104px;
    margin: 0 auto;
    box-shadow: 0 4px 16px rgba(46,204,113,0.25);
}

/* ---- Notizen Lehreralltag (Numbered List) ---- */
.alltag-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem 0.75rem;
}
.alltag-header h2 {
    margin: 0;
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.alltag-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.alltag-search-input {
    max-width: 200px;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--green-mid);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.alltag-search-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.18);
    outline: none;
}
.alltag-cat-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
    background: var(--white);
    padding: 0.6rem 1rem;
    border-bottom: 1.5px solid var(--green-mid);
}
.alltag-cat-tab {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--green-mid);
    background: var(--white);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.alltag-cat-tab:hover {
    background: var(--green-bg);
    border-color: var(--green);
    transform: translateY(-1px);
}
.alltag-cat-tab.active {
    background: var(--green-d);
    border-color: var(--green-d);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(26,158,84,0.30);
}
.alltag-list-container {
    padding: 0.5rem 0 2rem;
    background: var(--white);
}
.alltag-numbered-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.alltag-row {
    border-bottom: 1px solid var(--green-mid);
    transition: background 0.12s;
}
.alltag-row:hover { background: var(--green-bg); }
.alltag-row-done .alltag-row-title {
    opacity: 0.45;
    text-decoration: line-through;
}
.alltag-row-important .alltag-row-main {
    border-left: 4px solid var(--amber);
    background: var(--amber-bg);
}
.alltag-row-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem 0.8rem 1.25rem;
    cursor: pointer;
    min-height: 52px;
    border-left: 4px solid transparent;
}
.alltag-check-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.2rem;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    min-width: 32px;
    min-height: 32px;
}
.alltag-row-num {
    color: var(--muted);
    font-size: 0.78rem;
    min-width: 1.8rem;
    text-align: right;
    flex-shrink: 0;
    font-weight: 700;
}
.alltag-row-emoji { font-size: 1.15rem; flex-shrink: 0; }
.alltag-row-title {
    flex: 1;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alltag-row-date {
    font-size: 0.78rem;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
}
.alltag-star { font-size: 0.95rem; flex-shrink: 0; color: var(--amber-d); }
.alltag-row-arrow {
    color: var(--green);
    font-size: 1.3rem;
    font-weight: 600;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.alltag-row-detail {
    padding: 0.85rem 1.25rem 1rem 4.5rem;
    border-top: 1px dashed var(--green-mid);
    background: var(--green-bg);
}
.alltag-row-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.alltag-row-sub {
    font-size: 0.75rem;
    color: var(--green-d);
    background: var(--white);
    border: 1.5px solid var(--green-mid);
    border-radius: 50px;
    padding: 0.2rem 0.7rem;
    font-weight: 700;
}
.alltag-row-text {
    font-size: 0.88rem;
    color: var(--ink);
    white-space: pre-wrap;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}
.alltag-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.alltag-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    font-style: italic;
}
.alltag-note-title {
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--ink);
}
.alltag-note-meta {
    font-size: 0.78rem;
    color: var(--text-secondary, #7a6a5a);
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.alltag-tag-badge {
    display: inline-block;
    background: var(--bg-secondary, #f5ede0);
    border-radius: 12px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    color: var(--primary-color, #5A4A3A);
    font-weight: 600;
}
.alltag-note-body {
    margin-top: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-color, #333);
    white-space: pre-wrap;
}
.alltag-note-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
}
.alltag-done {
    opacity: 0.5;
    background: var(--bg-secondary, #f5ede0) !important;
}

/* Export-Dropdown Alltag */
.alltag-export-wrap {
    position: relative;
    flex-shrink: 0;
}
.alltag-export-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    z-index: 200;
    min-width: 190px;
    overflow: hidden;
}
.alltag-export-dropdown button {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color, #f0ebe4);
    text-align: left;
    font-size: 0.88rem;
    color: var(--text-color, #333);
    cursor: pointer;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}
.alltag-export-dropdown button:last-child { border-bottom: none; }
.alltag-export-dropdown button:hover { background: var(--bg-secondary, #f5ede0); }

/* Hilfskasse */
.hidden { display: none !important; }

@media (max-width: 600px) {
    .hj-overview-grid {
        grid-template-columns: 1fr;
    }
    .gb-stats-row {
        flex-direction: column;
    }
    .gb-stat-card {
        flex: 1 1 auto;
    }
    .eval-template-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .alltag-note-item {
        grid-template-columns: 1fr;
    }
    .alltag-note-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* ===== Notenspiegel: Kompetenz-Bewertungen & Template ===== */
.gb-row-assessment {
    background: var(--green-bg);
    color: var(--ink);
}
.gb-row-assessment td {
    border-left: 3px solid var(--green);
}
.comp-badge {
    background: var(--green-d);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.18rem 0.5rem;
    border-radius: 50px;
    font-weight: 800;
}
.gb-type-badge {
    font-size: 0.82rem;
    font-weight: 700;
}
.btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1.5px solid var(--green-mid);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.15s;
}
.btn-icon-sm:hover {
    background: var(--green-bg);
    border-color: var(--green);
    transform: translateY(-1px);
}
.btn-icon-sm.gb-template-active {
    background: var(--amber-bg);
    border-color: var(--amber);
    box-shadow: 0 0 0 2px rgba(249,168,37,0.25);
}
.gb-template-info {
    font-size: 0.82rem;
    color: var(--amber-d);
    background: var(--amber-bg);
    border: 1px solid var(--amber);
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.stt-table td, .stt-table th {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #f0ece6;
}
.stt-table tr:last-child td { border-bottom: none; }
.btn-danger-outline {
    background: #fff;
    border: 1.5px solid #dc3545;
    color: #dc3545;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.92rem;
}
.btn-danger-outline:hover { background: #fff0f0; }

/* Kompetenz badge variants */
.comp-badge-4 {
    background: var(--amber-d);
}
.comp-badge-6 {
    background: var(--green-d);
}
.gb-row-comp4 td {
    border-left-color: var(--amber);
}

/* ===== Mobile-Optimierung: Notenspiegel / Halbjahr / Einschätzen / Alltag ===== */
@media (max-width: 640px) {
    /* Notenspiegel-Tabelle: horizontaler Scroll mit haftender Schüler-Spalte */
    .gb-table-wrap {
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
    }
    .gb-table {
        font-size: 0.78rem;
        min-width: 560px;
    }
    .gb-table thead th,
    .gb-table td {
        padding: 0.35rem 0.45rem;
        white-space: nowrap;
    }
    .gb-table .gb-student-name {
        position: sticky;
        left: 0;
        background: var(--bg-secondary, #f9f4ee);
        z-index: 2;
        max-width: 110px;
        white-space: normal;
        font-size: 0.8rem;
    }
    .gb-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
    }
    .gb-table .gb-avg {
        font-size: 0.7rem;
    }
    .gb-add-row td button,
    .gb-row-student td button {
        font-size: 0.75rem;
        padding: 0.3rem 0.55rem;
    }
    /* Stats kompakter */
    .gb-stat-card { padding: 0.55rem 0.65rem; }
    .gb-stat-value { font-size: 1.4rem; }
    .gb-dist {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.25rem;
    }
    .gb-dist-item {
        font-size: 0.78rem;
        padding: 0.25rem;
    }
    /* Filter-Zeilen umbrechen */
    .gb-filters,
    .halbjahr-filters,
    .alltag-filters,
    .eval-filters {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }
    .gb-filters select,
    .gb-filters input,
    .halbjahr-filters select,
    .alltag-filters select,
    .alltag-filters input {
        flex: 1 1 45%;
        min-width: 0;
        font-size: 0.85rem;
    }
    /* Halbjahr-Karten / Listen */
    .halbjahr-student-card,
    .alltag-note-item,
    .eval-template-card {
        padding: 0.6rem 0.7rem !important;
    }
    /* Notiz-Modal-Body */
    #modal-alltag-edit .modal-body,
    #modal-halbjahr-student .modal-body,
    #modal-add-grade .modal-body {
        padding: 0.75rem !important;
    }
    /* Tag-Buttons in Notiz-Editor: in Grid statt Reihe */
    .alltag-tag-picker {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem !important;
    }
    .alltag-tag-picker button {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.5rem !important;
        white-space: normal !important;
    }
}

/* Graduierung: bessere Mobil-Darstellung — Karten fließen, Namen umbrechen */
@media (max-width: 480px) {
    .grad-columns-wrap {
        flex-wrap: wrap;
    }
    .grad-column {
        flex: 1 1 calc(50% - 0.2rem);
        min-width: 0;
    }
    .grad-student-name {
        font-size: 0.78rem;
        white-space: normal;
        word-break: break-word;
        line-height: 1.25;
    }
    .grad-student-card {
        padding: 0.4rem 0.5rem;
    }
    .grad-column-header {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ===== Heute-Tab: Tagesüberblick ===== */
.today-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 600;
    background: var(--white);
    border: 2px dashed var(--green-mid);
    border-radius: 16px;
}
.today-section {
    margin-bottom: 1.25rem;
    border: 1.5px solid var(--green-mid);
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.today-section:hover {
    border-color: var(--green);
    box-shadow: 0 4px 14px rgba(46,204,113,0.15);
}
.today-section-header {
    padding: 0.75rem 1rem;
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--green-bg);
    border-bottom: 1.5px solid var(--green-mid);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: 0.01em;
}
.today-section-count {
    background: var(--green-d);
    color: #fff;
    border-radius: 50px;
    padding: 0.1rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 900;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(26,158,84,0.25);
}
.today-section .assessment-item {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--green-bg);
    padding: 0.85rem 1rem;
    transition: background 0.15s;
}
.today-section .assessment-item:hover {
    background: var(--green-bg);
}
.today-section .assessment-item:last-child {
    border-bottom: none;
}
.today-subject-badge {
    background: var(--green-bg);
    color: var(--green-d);
    border: 1px solid var(--green-mid);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
}
.today-type-badge {
    background: var(--amber-bg);
    color: var(--amber-d);
    border: 1px solid var(--amber);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
}
.today-grade-item { background: #fafffd; }
.today-eval-item  { background: #fafdff; }
.today-alltag-item { background: #fffdf5; }
.today-alltag-tag {
    background: var(--amber-bg) !important;
    color: var(--amber-d) !important;
    border: 1px solid var(--amber) !important;
    border-radius: 50px !important;
    padding: 0.15rem 0.6rem !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
}

/* ===== Anhänge / Dokumente ===== */
.attach-section {
    border: 1px dashed #c8b89a;
    border-radius: 8px;
    overflow: hidden;
    background: #fdf9f4;
    font-size: 0.88rem;
}
.attach-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.75rem;
    background: #f0e6d6;
    font-weight: 600;
    color: #5a3e1b;
    border-bottom: 1px solid #ddd0c0;
}
.btn-attach-add {
    cursor: pointer;
    background: #8b6914;
    color: #fff;
    border-radius: 5px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    user-select: none;
    transition: background 0.15s;
}
.btn-attach-add:hover { background: #6e5110; }
.attach-list {
    padding: 0.4rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.attach-empty {
    color: #aaa;
    font-size: 0.82rem;
    font-style: italic;
}
.attach-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.35rem;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ece4d8;
}
.attach-icon { font-size: 1.1rem; flex-shrink: 0; }
.attach-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
.attach-size { color: #999; font-size: 0.76rem; white-space: nowrap; }
.btn-attach-action {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.1rem 0.2rem;
    border-radius: 4px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.btn-attach-action:hover { background: #f0e0c8; }

/* ===== Datei-Viewer Modal ===== */
.attach-viewer-item {
    border: 1px solid #e8e0d4;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    background: #fff;
}
.attach-viewer-item:last-child { margin-bottom: 0; }
.attach-preview-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #f5f0e8;
    cursor: zoom-in;
    display: block;
    border-bottom: 1px solid #e8e0d4;
}
.attach-viewer-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    flex-wrap: wrap;
}
.attach-viewer-row .attach-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Dokumente-Button auf Karten ===== */
.btn-attach-card {
    display: inline-block;
    margin-top: 0.4rem;
    background: #f0e6d6;
    border: 1px solid #d8c8a8;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: #5a3e1b;
    font-weight: 600;
    transition: background 0.15s;
}
.btn-attach-card:hover { background: #e0d0b8; }
.btn-attach-card.has-attachments {
    background: #8b6914;
    color: #fff;
    border-color: #6e5110;
}
.btn-attach-card.has-attachments:hover { background: #6e5110; }

/* ===== Dokument-Badge auf Sitzplan-Sitz ===== */
.attach-badge-seat {
    background: #8b6914 !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    padding: 0.05rem 0.3rem !important;
    border-radius: 4px !important;
}

/* ===== Anhang-Info-Badges (rein informativ, nicht klickbar) ===== */
.attach-info-badge {
    display: inline-block;
    margin-top: 0.35rem;
    background: #f0e6d6;
    border: 1px solid #d8c8a8;
    border-radius: 5px;
    padding: 0.1rem 0.5rem;
    font-size: 0.76rem;
    color: #7a5c1a;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}
.attach-info-seat {
    font-size: 0.82rem;
    color: #8b6914;
    pointer-events: none;
    user-select: none;
    margin-right: 0.15rem;
}

/* ===== Vollbild-Lightbox Dialog ===== */
#modal-lightbox {
    background: rgba(0,0,0,0.9);
    border: none;
    padding: 0.75rem;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    margin: 0;
    cursor: zoom-out;
}
#modal-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
}
#modal-lightbox::backdrop {
    background: transparent;
}

/* ===== Dokumente im Bewertungs-Popup ===== */
.assess-doc-wrap {
    background: #f7f4ee;
    border: 1px solid #d8cdb8;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    margin: 0.35rem 0 0.5rem;
    font-size: 0.82rem;
}
.assess-doc-header {
    font-weight: 600;
    color: #7a6a50;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.assess-doc-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid #e8e0d0;
}
.assess-doc-row:last-child { border-bottom: none; }
.assess-doc-icon { flex-shrink: 0; }
.assess-doc-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #444;
}
.assess-doc-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.1rem 0.35rem;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1.4;
}
.assess-doc-btn:hover { background: #e8e0d0; }

/* ===== WELCOME / WHATSNEW MODAL ===== */
.welcome-dialog { max-width: 440px; }
.whatsnew-dialog { max-width: 480px; }

.welcome-content { padding: 1.5rem; }

.welcome-logo-wrap {
    text-align: center;
    margin-bottom: 0.75rem;
}

.welcome-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(46,204,113,0.25);
}

.whatsnew-emoji {
    font-size: 2.75rem;
    line-height: 1;
}

.welcome-title {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0 0 0.25rem 0;
    color: var(--ink);
}

.welcome-subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}

.welcome-steps {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.welcome-step {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--green-bg);
    border: 1.5px solid var(--green-mid);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    transition: transform 0.15s, box-shadow 0.15s;
}

.welcome-step:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(46,204,113,0.15);
    border-color: var(--green);
}

.welcome-step-num {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(46,204,113,0.3);
}

.welcome-step-text { min-width: 0; }

.welcome-step-title {
    font-weight: 700;
    margin: 0;
    font-size: 0.98rem;
    color: var(--ink);
}

.welcome-step-desc {
    margin: 0.1rem 0 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.whatsnew-card {
    background: var(--amber-bg);
    border: 1.5px solid var(--amber);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    margin-bottom: 1.25rem;
}

.whatsnew-card-title {
    font-weight: 800;
    margin: 0 0 0.55rem 0;
    font-size: 0.95rem;
    color: var(--amber-d);
    letter-spacing: 0.02em;
}

.whatsnew-list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink);
}

.whatsnew-list-lg { font-size: 0.9rem; }

.whatsnew-list li { margin-bottom: 0.15rem; }
.whatsnew-list strong { color: var(--amber-d); }

.whatsnew-card-foot {
    margin: 0.6rem 0 0 0;
    font-size: 0.78rem;
    color: var(--amber-d);
    font-weight: 600;
}

.welcome-actions {
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-btn-primary {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 700;
}

.welcome-btn-link {
    width: 100%;
    padding: 0.6rem;
    background: transparent;
    color: var(--green-d);
    font-weight: 600;
}

.welcome-btn-link:hover {
    background: var(--green-bg);
    color: var(--green-d);
}

.welcome-btn-license {
    width: 100%;
    padding: 0.55rem;
    font-size: 0.85rem;
}

/* ===== PREMIUM UPGRADE MODAL ===== */
.upgrade-dialog { max-width: 520px; }
.upgrade-content { padding: 1.5rem; }

.upgrade-title {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0 0 0.5rem 0;
    color: var(--ink);
}

.upgrade-feature-name {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--green-d);
    margin: 0 0 0.4rem 0;
}

.upgrade-feature-desc {
    text-align: center;
    color: var(--muted);
    margin: 0 0 1.25rem 0;
    font-size: 0.92rem;
}

.upgrade-features-card {
    background: var(--amber-bg);
    border: 1.5px solid var(--amber);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.upgrade-features-title {
    font-weight: 800;
    margin: 0 0 0.6rem 0;
    color: var(--amber-d);
    font-size: 0.95rem;
}

.upgrade-features-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink);
}

.upgrade-features-list li { margin-bottom: 0.15rem; }

.upgrade-trial-box {
    background: linear-gradient(135deg, var(--green-bg) 0%, var(--green-mid) 100%);
    border: 2px dashed var(--green-d);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.upgrade-trial-text {
    font-weight: 800;
    color: var(--green-d);
    font-size: 0.9rem;
    margin: 0 0 0.6rem 0;
}

.upgrade-trial-btn {
    background: var(--green-d);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.2rem;
    font-weight: 900;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(26,158,84,0.3);
}

.upgrade-trial-btn:hover { background: var(--green); }

.welcome-btn-trial {
    border-radius: 12px;
    padding: 0.7rem 1rem;
    cursor: pointer;
}

.upgrade-plans {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.upgrade-plan {
    flex: 1;
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.upgrade-plan:hover { transform: translateY(-2px); }

.upgrade-plan-lifetime {
    background: var(--green-bg);
    border: 2px solid var(--green);
}
.upgrade-plan-lifetime:hover {
    box-shadow: 0 8px 22px rgba(46,204,113,0.25);
}

.upgrade-plan-care {
    background: var(--amber-bg);
    border: 2px solid var(--amber);
}
.upgrade-plan-care:hover {
    box-shadow: 0 8px 22px rgba(245,158,11,0.25);
}

.upgrade-plan-title {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    margin: 0 0 0.25rem 0;
    color: var(--ink);
}

.upgrade-plan-lifetime .upgrade-plan-title { color: var(--green-d); }
.upgrade-plan-care .upgrade-plan-title { color: var(--amber-d); }

.upgrade-plan-price {
    font-family: 'Bebas Neue', 'Figtree', sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0 0 0.2rem 0;
    color: var(--ink);
}

.upgrade-plan-price-note {
    font-family: 'Figtree', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0;
}

.upgrade-plan-sub {
    font-size: 0.82rem;
    color: var(--ink);
    margin: 0 0 0.4rem 0;
    font-weight: 600;
}

.upgrade-plan-meta {
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0 0 0.85rem 0;
}

.upgrade-plan-btn {
    width: 100%;
    text-decoration: none;
    display: block;
    font-weight: 700;
    padding: 0.6rem;
}

.upgrade-plan-btn-care {
    background: linear-gradient(135deg, var(--amber) 0%, var(--amber-d) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(245,158,11,0.3);
}

.upgrade-plan-btn-care:hover {
    box-shadow: 0 5px 14px rgba(245,158,11,0.4);
}

.upgrade-fineprint {
    font-size: 0.74rem;
    color: var(--muted);
    text-align: center;
    margin: 0 0 1rem 0;
}

.upgrade-actions {
    flex-direction: column;
    gap: 0.55rem;
}

.upgrade-btn-license {
    width: 100%;
    font-weight: 700;
}

.upgrade-btn-later {
    width: 100%;
    background: transparent;
    color: var(--muted);
    font-weight: 600;
}

.upgrade-btn-later:hover {
    background: var(--green-bg);
    color: var(--ink);
}

.upgrade-help {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    margin: 0.85rem 0 0 0;
}

.upgrade-link-yt { color: #c4302b; font-weight: 700; }
.upgrade-link-mail { color: var(--green-d); font-weight: 700; }

@media (max-width: 500px) {
    .upgrade-plans { flex-direction: column; }
}

/* ===== SCHULJAHRESWECHSEL ===== */
.sy-panel { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e2e2); border-radius: 12px; padding: 1rem; }
.sy-field-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.sy-checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; cursor: pointer; line-height: 1.4; }
.sy-checkbox-row input { margin-top: 0.2rem; flex-shrink: 0; width: 20px; height: 20px; }
.sy-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.sy-class-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sy-class-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border, #e2e2e2); border-radius: 8px; cursor: pointer; background: #fafafa; }
.sy-class-row input { width: 22px; height: 22px; flex-shrink: 0; }
.sy-class-info { display: flex; flex-direction: column; }
.sy-class-info small { color: #777; font-size: 0.8rem; margin-top: 2px; }
.sy-archive-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sy-archive-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border, #e2e2e2); border-radius: 8px; background: #fafafa; flex-wrap: wrap; }
.sy-archive-info { display: flex; flex-direction: column; }
.sy-archive-info small { color: #777; font-size: 0.8rem; margin-top: 2px; }
.sy-archive-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.archive-view-dialog { width: 92vw; max-width: 900px; border: none; border-radius: 14px; padding: 0; }
.archive-view-body { padding: 1rem; max-height: 65vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.archive-view-body table { width: 100%; }


/* ===== Suite & Termine ===== */
.suite-hint { color: var(--text-secondary, #666); font-size: 0.9rem; margin: 0.5rem 0 1rem; }
.suite-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.suite-card { border: 1px solid rgba(128,128,128,0.35); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.suite-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.suite-block { margin-top: 1rem; }
.suite-event { display: flex; gap: 1rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(128,128,128,0.25); }
.suite-event-today { background: rgba(255, 193, 7, 0.15); border-radius: 8px; }
.suite-event-date { min-width: 150px; }
@media (max-width: 600px) { .suite-event { flex-direction: column; gap: 0.2rem; } }

.heute-termine { border: 1px solid rgba(128,128,128,0.35); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1rem; }
.heute-termine h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.heute-termin { padding: 0.3rem 0; border-bottom: 1px solid rgba(128,128,128,0.2); }
.heute-termin:last-child { border-bottom: 0; }
.heute-termin-today { background: rgba(255, 193, 7, 0.15); border-radius: 6px; padding-left: 0.4rem; }
.heute-termin-when { color: var(--text-secondary, #666); font-size: 0.85rem; }
/* Notenspiegel-Matrix: neue Notenspalte + Schnelleingabe */
.gb-mx-toolbar { margin: 0 0 0.5rem; }
.gb-mx-input {
    width: 3.2rem;
    height: 2rem;
    text-align: center;
    font-size: 1rem;
    border: 1px dashed #c0d0c8;
    border-radius: 6px;
    background: transparent;
    padding: 0;
    -webkit-appearance: none;
}
.gb-mx-input:focus {
    outline: none;
    border: 2px solid var(--green, #4caf80);
    background: #fff;
}
.gb-mx-input::placeholder { color: #aaa; }
.gb-mx-addcol, .gb-mx-colx {
    background: transparent;
    border: 1px solid #c0d0c8;
    border-radius: 5px;
    min-width: 24px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 4px;
    color: inherit;
}
.gb-mx-addcol:hover, .gb-mx-colx:hover { background: var(--green, #4caf80); color: #fff; border-color: var(--green, #4caf80); }

/* Diktierfunktion */
.dictate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.dictate-hint { font-size: 0.78rem; color: #777; }
.dictate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0;
    padding: 0.4rem 0.8rem;
    min-height: 40px;
    border: 1px solid #c0d0c8;
    border-radius: 8px;
    background: #f4faf6;
    color: var(--green-d, #1F6D4A);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.dictate-btn.dictating {
    background: #fdecea;
    border-color: #d9534f;
    color: #b02a25;
    animation: dictate-pulse 1.2s ease-in-out infinite;
}
@keyframes dictate-pulse { 50% { opacity: 0.65; } }

/* Bewertungsstatus pro Karte: Text + Symbol, nicht nur Farbe */
.seat-status-label {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    min-height: 1.2em;
    margin-top: 2px;
    text-align: center;
}
.seat-status-label.status-today, .seat-legend-item.status-today { color: #0f7a43; }
.seat-status-label.status-before, .seat-legend-item.status-before { color: #8a6a00; }
.seat-status-label.status-open, .seat-legend-item.status-open { color: #5f6b66; }
.seat-card.assessed-today .seat-assessment-badge {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
    top: -12px;
    right: -12px;
    border: 2px solid #1b9e5a;
}
.seat-legend {
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.4rem 0.2rem;
}
.seat-legend-item { font-weight: 700; white-space: nowrap; }
.seat-legend-open { color: #444; }

/* Graduierung: mehrere Sets, Schüleransicht */
.grad-kind-tag { font-size: 0.8rem; color: #5f6b66; font-weight: 700; align-self: center; }
.assess-grad-details { margin: 0.6rem 0; border: 1px solid #d5e3db; border-radius: 10px; padding: 0.4rem 0.7rem; background: #fafdfb; }
.assess-grad-details summary { cursor: pointer; font-weight: 800; padding: 0.3rem 0; }
.assess-grad-hint { font-size: 0.85rem; color: #666; margin: 0.3rem 0 0.5rem; }
.assess-grad-row { margin: 0.4rem 0 0.6rem; }
.assess-grad-name { font-size: 0.85rem; font-weight: 800; margin-bottom: 0.25rem; }
.assess-grad-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.assess-grad-chip { border: 2px solid transparent; border-radius: 999px; padding: 0.45rem 0.9rem; min-height: 40px; font-weight: 700; font-size: 0.9rem; cursor: pointer; opacity: 0.75; }
.assess-grad-chip.active { opacity: 1; border-color: currentColor; box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }

/* Halbjahr: Graduierungs-Spalten */
.hj-col-grad { text-align: center !important; white-space: nowrap; }
.hj-grad-cell { text-align: center; padding: 0.5rem 0.6rem; }
.asv-row:hover { background: var(--green-bg); }


/* Diktieren: Live-Anzeige (Pegel-Balken + Zwischentext) */
.dictate-live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #14543a; background: #ecfdf3; border: 1px solid #b7ebcf; border-radius: 10px; padding: 0.25rem 0.6rem; max-width: 100%; }
.dictate-live[hidden] { display: none; }
.dictate-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.dictate-bars i { display: block; width: 3px; height: 4px; background: #1a9e54; border-radius: 2px; }
.dictate-live.hearing .dictate-bars i { animation: dictate-bar 0.7s ease-in-out infinite; }
.dictate-live.hearing .dictate-bars i:nth-child(2) { animation-delay: .1s; }
.dictate-live.hearing .dictate-bars i:nth-child(3) { animation-delay: .2s; }
.dictate-live.hearing .dictate-bars i:nth-child(4) { animation-delay: .3s; }
.dictate-live.hearing .dictate-bars i:nth-child(5) { animation-delay: .4s; }
@keyframes dictate-bar { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@media (prefers-reduced-motion: reduce) { .dictate-live.hearing .dictate-bars i { animation: none; height: 10px; } }