/* ===== CI-Farbschema: FuxNoten Corporate Identity ===== */
        :root {
            --ci-primary: #B8D430;
            --ci-primary-dark: #8BA621;
            --ci-primary-light: #D4E87A;
            --ci-secondary: #1B2A4A;
            --ci-accent: #2C3E6B;
            --ci-bg: #F5F7FA;
            --ci-text: #1B2A4A;
            --ci-text-muted: #4A5A7A;
            --ci-border: #C8D0E0;
            --ci-card-border: #D0D8E8;
        }

        /* ===== Grundlayout ===== */
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
            background-color: var(--ci-bg);
            color: var(--ci-text);
        }

        /* ===== Top-Header-Bar (Logo + Kind-Tabs + Logout) ===== */
        .top-header-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1010;
            height: 56px;
            background: var(--ci-secondary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
        }
        .top-header-bar .header-logo {
            height: 32px;
            flex-shrink: 0;
        }
        .top-header-bar .header-title {
            color: #fff;
            font-size: 0.9rem;
            font-weight: 600;
            margin-left: 10px;
            white-space: nowrap;
        }
        .top-header-bar .header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .top-header-bar .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Kind-Tabs im Header */
        .child-tabs {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .child-tabs .child-tab {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            color: rgba(255,255,255,0.7);
            background: transparent;
            border: 1px solid rgba(255,255,255,0.2);
            cursor: pointer;
            text-decoration: none;
            transition: all 150ms ease;
            white-space: nowrap;
        }
        .child-tabs .child-tab:hover {
            color: #fff;
            border-color: var(--ci-primary);
            background: rgba(184, 212, 48, 0.15);
        }
        .child-tabs .child-tab.active {
            color: var(--ci-secondary);
            background: var(--ci-primary);
            border-color: var(--ci-primary);
            font-weight: 600;
        }

        /* Logout-Button im Header */
        .header-logout-btn {
            background: var(--ci-primary);
            border: 1px solid var(--ci-primary);
            color: var(--ci-secondary);
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 150ms ease;
        }
        .header-logout-btn:hover {
            background: var(--ci-primary-dark);
            border-color: var(--ci-primary-dark);
            color: var(--ci-secondary);
        }

        /* ===== Bottom-Bar Navigation ===== */
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1010;
            height: 64px;
            background: var(--ci-secondary);
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
        }
        .bottom-bar .nav-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            text-decoration: none;
            color: rgba(255,255,255,0.5);
            font-size: 0.75rem;
            font-weight: 500;
            padding: 6px 4px;
            border-radius: 8px;
            transition: all 150ms ease;
            flex: 1;
        }
        .bottom-bar .nav-tab i {
            font-size: 1.6rem;
        }
        .bottom-bar .nav-tab:hover {
            color: rgba(255,255,255,0.85);
        }
        .bottom-bar .nav-tab.active {
            color: var(--ci-primary);
        }
        .bottom-bar .nav-tab.active i {
            color: var(--ci-primary);
        }

        /* Benachrichtigungspunkt */
        .nav-unread-dot {
            position: absolute;
            top: 6px;
            right: 50%;
            transform: translateX(12px);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #EF4444;
        }

        /* ===== Persönlich-Button im Header ===== */
        .header-personal-btn {
            background: var(--ci-primary);
            border: 1px solid var(--ci-primary);
            color: var(--ci-secondary);
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 150ms ease;
            text-decoration: none;
        }
        .header-personal-btn:hover {
            background: var(--ci-primary-dark);
            border-color: var(--ci-primary-dark);
            color: var(--ci-secondary);
        }
        .header-personal-btn.active {
            background: var(--ci-primary-dark);
            border-color: var(--ci-primary-dark);
            color: var(--ci-secondary);
        }

        /* Responsiver Button-Text (global) */
        .btn-label { display: none; }
        @media (min-width: 576px) { .btn-label { display: inline; } }

        /* ===== Kinder-Tabs Scroll-Wrapper ===== */
        .child-tabs-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            max-width: 340px;
        }
        .child-tabs-wrapper .child-tabs {
            overflow-x: auto;
            flex-wrap: nowrap;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .child-tabs-wrapper .child-tabs::-webkit-scrollbar { display: none; }
        .child-tabs-scroll-hint {
            position: absolute;
            right: -4px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255,255,255,0.5);
            font-size: 1rem;
            pointer-events: none;
            transition: opacity 200ms ease;
            background: linear-gradient(to right, transparent, var(--ci-secondary) 40%);
            padding-left: 12px;
            padding-right: 2px;
        }
        .child-tabs-scroll-hint.hidden { opacity: 0; }

        /* Header-Slider (global) */
        .header-slider {
            display: flex !important;
            align-items: center !important;
            gap: 2px !important;
            flex-shrink: 0 !important;
        }
        .header-slider-arrow {
            background: none !important;
            border: none !important;
            color: rgba(255,255,255,0.5) !important;
            font-size: 14px !important;
            cursor: pointer !important;
            padding: 0 2px !important;
            height: auto !important;
            min-height: 0 !important;
            line-height: 1 !important;
        }
        .header-slider-arrow.hidden { visibility: hidden; }
        .header-slider-arrow:hover { color: #fff !important; }
        .header-slider-items {
            display: flex !important;
            gap: 3px !important;
            overflow: hidden !important;
        }

        /* ===== Hauptinhalt — volle Breite, Padding für Header + Bottom-Bar ===== */
        .main-content-area {
            position: absolute;
            top: 56px;
            left: 0;
            right: 0;
            bottom: 64px;
            overflow-y: auto;
            overflow-x: hidden;
            background: var(--ci-bg);
        }

        /* Scroll-to-top Button */
        .scroll-to-top-btn {
            position: fixed;
            bottom: 80px;
            right: 24px;
            z-index: 1000;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: var(--ci-secondary);
            color: var(--ci-primary);
            border: 2px solid var(--ci-primary);
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            transition: opacity 200ms ease;
        }
        .scroll-to-top-btn.visible { display: flex; }
        .scroll-to-top-btn:hover {
            background-color: var(--ci-primary);
            color: var(--ci-secondary);
        }

        /* ===== Dashboard Grid ===== */
        .dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: auto;
            row-gap: 16px;
            column-gap: 16px;
            height: auto;
            padding: 0 16px 16px 16px;
            max-width: 1400px;
            margin: 0 auto;
            box-sizing: border-box;
            width: 100%;
        }
        .dashboard-grid .card {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 10px;
            border: 1px solid var(--ci-card-border);
            min-height: 0;
        }
        .dashboard-grid .card-header {
            padding: 10px 16px;
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            text-align: center;
        }
        .dashboard-grid .card-header .badge {
            font-size: 0.7rem;
            padding: 3px 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.2);
            color: #fff;
            margin-left: 8px;
        }
        .dashboard-grid .card-body {
            flex: 1;
            overflow: hidden;
            padding: 10px 16px;
            background: #fff;
            font-size: 0.82rem;
        }
        .dashboard-grid .card-footer {
            flex-shrink: 0;
            padding: 8px 16px;
            background: #fff;
            border-top: 1px solid var(--ci-card-border);
            text-align: right;
        }
        .dashboard-grid .card-footer a {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--ci-primary-dark);
            text-decoration: none;
        }
        .dashboard-grid .card-footer a:hover {
            color: var(--ci-primary);
        }

        /* Dashboard-Listen (Termine, Fehlzeiten) */
        .dashboard-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .dashboard-list-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
            border-bottom: 1px solid rgba(27, 42, 74, 0.06);
            font-size: 0.82rem;
            line-height: 1.3;
        }
        .dashboard-list-item:last-child { border-bottom: none; }
        .homework-card .dashboard-list-item:last-child .highlight-cell {
            border-bottom-left-radius: 6px;
        }
        .forgotten-card .dashboard-list-item:last-child .highlight-cell {
            border-bottom-right-radius: 6px;
        }
        .forgotten-card .dashboard-list-item .highlight-cell {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 5px 8px;
        }
        /* Alle Hausaufgaben — 2-Zeilen-Layout */
        .homework-full-list { gap: 10px; display: flex; flex-direction: column; }
        .hw-item {
            display: flex;
            flex-direction: column;
            border: 2px solid var(--ci-secondary);
            border-radius: 22px;
            overflow: hidden;
        }
        .hw-row-subject {
            background-color: var(--ci-secondary);
            padding: 6px 12px;
            font-size: 0.82rem;
            font-weight: 600;
            color: #fff;
        }
        .hw-row-details {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            padding: 8px 12px;
            gap: 4px;
            background: #fff;
        }
        .hw-col-task {
            flex: 1;
            font-size: 0.82rem;
            word-break: break-word;
        }
        .hw-col-assigned {
            white-space: nowrap;
            font-size: 0.78rem;
            color: rgba(27,42,74,0.6);
        }
        .hw-col-due {
            white-space: nowrap;
            font-size: 0.78rem;
            padding-left: 4px;
        }

        /* Abschnittstitel */
        .hw-section-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--ci-secondary);
            margin: 0;
            padding: 4px 0;
        }
        .hw-section-title .bi { font-size: 0.85rem; }

        /* Fach-Gruppen (Vergangene) */
        .hw-subjects-list { display: flex; flex-direction: column; gap: 6px; }
        .hw-subject-group {
            border: 2px solid var(--ci-secondary);
            border-radius: 22px;
            overflow: hidden;
        }
        .hw-subject-header {
            background-color: var(--ci-secondary);
            color: #fff;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            font-size: 0.88rem;
            font-weight: 600;
        }
        .hw-subject-chevron {
            transition: transform 200ms ease;
            display: inline-block;
            font-size: 0.75em;
        }
        [aria-expanded="true"] .hw-subject-chevron {
            transform: rotate(90deg);
        }
        .hw-subject-count {
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 1px 8px;
            font-size: 0.75rem;
        }
        .hw-past-items {
            gap: 0 !important;
        }
        .hw-past-items .hw-item {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid var(--ci-secondary);
        }
        .hw-past-items .hw-item:last-child { border-bottom: none; }
        .hw-past-items .hw-row-subject {
            padding: 4px 12px;
            font-size: 0.78rem;
            background-color: rgba(27,42,74,0.06);
            color: var(--ci-secondary);
        }
        /* Vergessen-Tabelle */
        .fg-table { display: flex; flex-direction: column; }
        .fg-header-row {
            display: flex;
            background-color: var(--ci-secondary);
            color: #fff;
            font-weight: 600;
            font-size: 0.82rem;
            padding: 8px 12px;
            border-radius: 22px 22px 0 0;
        }
        .fg-col-subject { flex: 1; }
        .fg-col-type { flex: 0 0 90px; text-align: center; }
        .fg-subject-group {
            border-left: 2px solid var(--ci-secondary);
            border-right: 2px solid var(--ci-secondary);
        }
        .fg-subject-group:last-child {
            border-bottom: 2px solid var(--ci-secondary);
        }
        .fg-subject-row {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 0.85rem;
            border-bottom: 1px solid rgba(27,42,74,0.08);
        }
        .fg-subject-row:hover { background: rgba(27,42,74,0.03); }
        .fg-chevron {
            transition: transform 200ms ease;
            display: inline-block;
            font-size: 0.7em;
            margin-right: 4px;
        }
        [aria-expanded="true"] .fg-chevron {
            transform: rotate(90deg);
        }
        .fg-count-active {
            font-weight: 600;
            color: var(--ci-secondary);
        }
        .fg-count-zero {
            color: var(--ci-secondary);
        }
        .fg-count-total {
            font-weight: 700;
            color: #fff;
        }
        .fg-total-row {
            display: flex;
            padding: 8px 12px;
            font-weight: 700;
            font-size: 0.85rem;
            background-color: var(--ci-secondary);
            color: #fff;
        }
        .fg-detail-list {
            background: rgba(27,42,74,0.03);
            padding: 4px 0;
        }
        .fg-detail-item {
            display: flex;
            flex-direction: column;
            padding: 6px 12px 6px 28px;
            font-size: 0.82rem;
            border-bottom: 1px solid rgba(27,42,74,0.08);
        }
        .fg-detail-item:last-child { border-bottom: none; }
        .fg-detail-row1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .fg-detail-badge {
            font-size: 0.68rem !important;
            padding: 2px 6px !important;
            flex-shrink: 0;
        }
        .fg-detail-date {
            font-size: 0.78rem;
            color: rgba(27,42,74,0.6);
        }
        .fg-detail-row2 {
            font-size: 0.82rem;
            color: #1B2A4A;
            word-break: break-word;
            padding-top: 2px;
        }

        .hw-row-dates {
            display: flex;
            justify-content: space-between;
            padding: 4px 12px;
            background-color: rgba(27,42,74,0.06);
            font-size: 0.78rem;
            color: rgba(27,42,74,0.6);
        }

        .homework-card .dashboard-list,
        .forgotten-card .dashboard-list {
            gap: 0;
        }
        .homework-card .dashboard-list-item,
        .forgotten-card .dashboard-list-item {
            align-items: stretch;
            padding: 0;
        }
        .homework-card .dashboard-list-item .highlight-cell {
            display: flex;
            align-items: center;
            padding: 5px 8px;
        }
        .homework-card .dashboard-list-item > span:not(.highlight-cell),
        .forgotten-card .dashboard-list-item > span {
            padding: 5px 0;
        }
        .forgotten-card .dashboard-list-item > .badge {
            align-self: center;
            padding: 2px 6px !important;
        }
        .homework-card .dashboard-date,
        .forgotten-card .dashboard-date {
            width: auto;
            white-space: nowrap;
        }
        .dashboard-date {
            flex-shrink: 0;
            width: 70px;
            font-weight: 600;
            color: var(--ci-secondary);
            font-size: 0.78rem;
        }
        .dashboard-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .dashboard-meta {
            flex-shrink: 0;
            font-size: 0.75rem;
            color: var(--ci-text-muted);
        }

        /* Dashboard-Mitteilungen */
        .dashboard-msg-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
        .dashboard-msg-header {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        .dashboard-msg-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.82rem;
        }
        .dashboard-msg-unread {
            font-weight: 700;
        }
        .dashboard-msg-badge {
            font-size: 0.65rem !important;
            padding: 2px 6px !important;
        }
        .dashboard-msg-preview {
            font-size: 0.75rem;
            color: var(--ci-text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            line-height: 1.3;
        }

        /* Dashboard-Noten-Tabelle */
        .dashboard-grades-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
        .dashboard-grades-table thead th {
            background: var(--ci-secondary);
            color: #fff;
            padding: 6px 10px;
            font-weight: 600;
            font-size: 0.75rem;
            text-align: left;
        }
        .dashboard-grades-table tbody td {
            padding: 5px 10px;
            border-bottom: 1px solid rgba(27, 42, 74, 0.06);
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            font-size: 0.8rem;
        }
        .dashboard-grades-table thead th {
            border-left: none !important;
            border-right: none !important;
        }
        .dashboard-grade-value {
            font-weight: 700;
            text-align: center;
        }

        /* Dashboard-Fehlzeiten-Statistik */
        .dashboard-absence-stats {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .dashboard-absence-stats .badge {
            font-size: 0.72rem;
            padding: 4px 10px;
            border-radius: 12px;
        }
        .dashboard-absence-badge {
            font-size: 0.7rem !important;
            padding: 2px 8px !important;
        }

        /* Tablet: 2x2 aber kompakter */
        @media (min-width: 768px) and (max-width: 1024px) {
            .dashboard-grid {
                height: auto;
                padding: 12px;
                gap: 12px;
            }
            .dashboard-grid .card-body { font-size: 0.78rem; padding: 8px 12px; }
            .dashboard-grid .card-header { font-size: 0.8rem; padding: 8px 12px; }
        }

        /* Tablet-Querformat (11" Android etc.): kompakter Header + Bottom-Bar + Karten */
        @media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
            .top-header-bar { height: 44px !important; padding: 0 12px !important; }
            .top-header-bar .header-logo { height: 24px !important; }
            .top-header-bar .header-title { font-size: 0.82rem !important; margin-left: 6px !important; }
            .header-logout-btn,
            .header-personal-btn { padding: 4px 10px !important; font-size: 0.72rem !important; }
            .child-tabs .child-tab { padding: 4px 10px !important; font-size: 0.72rem !important; }
            .main-content-area { padding-top: 44px !important; padding-bottom: 50px !important; }

            .bottom-bar { height: 50px !important; }
            .bottom-bar .nav-tab { font-size: 0.65rem !important; padding: 4px 4px !important; }
            .bottom-bar .nav-tab i { font-size: 1.3rem !important; }

            .dashboard-grid {
                padding: 10px !important;
                gap: 10px !important;
            }
            .dashboard-grid .card { border-radius: 16px !important; }
            .dashboard-grid .card-header {
                font-size: 0.78rem !important;
                padding: 6px 10px !important;
                min-height: 0 !important;
            }
            .dashboard-grid .card-body {
                font-size: 0.74rem !important;
                padding: 6px 10px !important;
            }
            .dashboard-grid .card-footer {
                padding: 4px 10px !important;
                font-size: 0.72rem !important;
            }
            .dashboard-grid .card-footer a { font-size: 0.72rem !important; }
            #dashboard-greeting { font-size: 1.1rem !important; }
            .webinfo-page-header { padding: 8px 12px 0 12px !important; }
            .v2-daily-box { padding: 8px 14px !important; }
            .v2-daily-greeting { font-size: 0.9rem !important; }
            .v2-daily-stat { font-size: 0.74rem !important; }
            .v2-daily-stat .v2-stat-count { font-size: 0.95rem !important; }

            /* ===== Profil-Seite kompakt im Tablet-Querformat =====
               Alle Regeln mit :has(#info-tabs) scoped — damit diese NICHT auf
               Kalender, Postfach, Abwesenheiten etc. greifen (dort wird auch
               .webinfo-account-container verwendet). */
            .webinfo-account-container:has(#info-tabs) { gap: 6px !important; padding: 0 12px !important; font-size: 0.78rem !important; }
            .webinfo-account-container:has(#info-tabs) .webinfo-page-header { padding: 0 !important; }
            .webinfo-account-container:has(#info-tabs) .webinfo-page-header h1 { font-size: 0.95rem !important; margin: 0 !important; }
            #info-tabs { margin-bottom: 4px !important; }
            #info-tabs .nav-link { padding: 3px 10px !important; font-size: 0.74rem !important; }

            .webinfo-account-container:has(#info-tabs) .card { border-radius: 14px !important; }
            .webinfo-account-container:has(#info-tabs) .card + .card,
            .webinfo-account-container:has(#info-tabs) .mt-3 { margin-top: 0 !important; }
            .webinfo-account-container:has(#info-tabs) .card-header {
                font-size: 0.76rem !important;
                padding: 5px 12px !important;
                min-height: 0 !important;
            }
            .webinfo-account-container:has(#info-tabs) .card-body { padding: 8px 12px !important; font-size: 0.76rem !important; }
            .webinfo-account-container:has(#info-tabs) .card-body p,
            .webinfo-account-container:has(#info-tabs) .card-body span,
            .webinfo-account-container:has(#info-tabs) .card-body label,
            .webinfo-account-container:has(#info-tabs) .card-body dt,
            .webinfo-account-container:has(#info-tabs) .card-body dd,
            .webinfo-account-container:has(#info-tabs) .card-body li { font-size: 0.76rem !important; }
            .webinfo-account-container:has(#info-tabs) .row > [class*="col-"] { margin-bottom: 4px !important; }

            /* Info-Buttons (Bearbeiten / Per Authenticator-App / Per E-Mail-Code) auf Abmelden-Größe */
            .webinfo-account-container:has(#info-tabs) #info-content .btn,
            .webinfo-account-container:has(#info-tabs) #info-content button.btn,
            .webinfo-account-container:has(#info-tabs) #info-content a.btn,
            .webinfo-account-container:has(#info-tabs) #info-content input[type="submit"] {
                padding: 4px 10px !important;
                font-size: 0.72rem !important;
                min-height: 0 !important;
                height: auto !important;
                line-height: 1.3 !important;
                border-radius: 20px !important;
            }
            .webinfo-account-container:has(#info-tabs) #info-content .btn i { font-size: 0.8rem !important; }

            /* Save-Button-Gruppe im Header */
            .info-save-group #settings-save-btn { padding: 5px 14px !important; font-size: 0.76rem !important; }
            .info-save-group #settings-reset-btn { padding: 4px 10px !important; font-size: 0.7rem !important; }
            .info-save-group #settings-save-status { font-size: 0.68rem !important; }

            /* Karten-Reihenfolge kompakter */
            #card-order-list { gap: 3px !important; }
            #card-order-list li {
                padding: 3px 8px !important;
                font-size: 0.76rem !important;
            }
            #card-order-reset { padding: 3px 10px !important; font-size: 0.7rem !important; }

            /* Anzeige-Einstellungen kompakter */
            #v2-settings-list > div { padding: 4px 0 !important; }
            #v2-settings-list > div > div > div:first-child { font-size: 0.78rem !important; }
            #v2-settings-list > div > div > div:last-child { font-size: 0.68rem !important; line-height: 1.2 !important; }
            #settings-save-btn { padding: 5px 14px !important; font-size: 0.78rem !important; }
            #settings-reset-btn { padding: 4px 10px !important; font-size: 0.72rem !important; }
            #settings-save-status { font-size: 0.7rem !important; }

            /* Zwei-Spalten-Layout NUR auf der Profil-Seite */
            .webinfo-account-container:has(#info-tabs) {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 8px 10px !important;
                align-items: start !important;
            }
            .webinfo-account-container:has(#info-tabs) > .webinfo-page-header,
            .webinfo-account-container:has(#info-tabs) > #info-tabs,
            .webinfo-account-container:has(#info-tabs) > #info-content { grid-column: 1 / -1 !important; }
            .webinfo-account-container:has(#info-tabs) > #watchlist-config-card { grid-column: 1 / -1 !important; }
        }

        /* Tablet-Querformat: Kalender kompakter — alle Wochen sichtbar */
        @media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
            .fc .fc-daygrid-day { min-height: 60px !important; height: 60px !important; }
            .fc .fc-daygrid-day-frame { min-height: 60px !important; height: 60px !important; }
            .fc .fc-scroller-liquid-absolute,
            .fc .fc-scroller { overflow: visible !important; }
            .fc .fc-daygrid-body,
            .fc .fc-daygrid-body table { width: 100% !important; height: auto !important; }
            #calendar { max-height: calc(100vh - 180px); overflow-y: auto; }

            /* FullCalendar Toolbar kompakter aber mit genug Höhe */
            .fc .fc-toolbar {
                padding: 8px 14px !important;
                margin-bottom: 16px !important;
                min-height: 36px !important;
                position: relative !important;
                z-index: 5 !important;
            }
            .fc .fc-button {
                padding: 4px 12px !important;
                font-size: 0.78rem !important;
                height: auto !important;
                min-height: 0 !important;
                line-height: 1.3 !important;
            }
            .fc .fc-toolbar-title {
                font-size: 0.95rem !important;
                padding: 0 8px !important;
                line-height: 1.3 !important;
            }
            /* Legende kompakter + klarer Abstand */
            .calendar-legend-wrapper {
                margin-bottom: 8px !important;
                position: relative;
                clear: both;
            }
            .calendar-legend {
                gap: 0 12px !important;
                font-size: 0.65rem !important;
                padding: 0 !important;
                line-height: 1 !important;
                flex-wrap: nowrap !important;
                overflow-x: auto;
            }
            .legend-item {
                font-size: 0.65rem !important;
                line-height: 1 !important;
                padding: 2px 0 !important;
                white-space: nowrap !important;
            }
            .legend-color {
                width: 7px !important;
                height: 7px !important;
                margin-right: 3px !important;
            }
            /* FullCalendar-Toolbar bekommt Abstand nach oben */
            .fc .fc-toolbar {
                margin-top: 0 !important;
                margin-bottom: 8px !important;
                position: relative !important;
                z-index: 1 !important;
            }
            /* Kalender-Container etwas Luft nach oben */
            #cal-fc-wrapper { margin-top: 12px; clear: both; position: relative; }
            /* Container-Padding erhöhen damit FC-Toolbar nicht hinter Header verschwindet */
            .webinfo-account-container { padding-top: 8px !important; }

            /* Kalendereinträge kleiner */
            .fc .fc-daygrid-event {
                font-size: 0.62rem !important;
                padding: 1px 4px !important;
                line-height: 1.2 !important;
            }
            .fc .fc-daygrid-event .fc-event-title { font-size: 0.62rem !important; }
            .fc .fc-daygrid-event .fc-event-main { font-size: 0.62rem !important; }
            .fc .fc-daygrid-day-number {
                font-size: 0.72rem !important;
                padding: 4px 6px !important;
            }

            /* Abwesenheits-Liste kompakter */
            .absence-list-header,
            .absence-list-header .abl-status-col,
            .absence-list-header .abl-zeitraum,
            .absence-list-header .abl-grund,
            .absence-list-header .abl-bemerkungen,
            .absence-list-header .abl-doc {
                font-size: 0.72rem !important;
                padding: 4px 6px !important;
            }
            .absence-list-header .abl-status-col { flex: 0 0 100px !important; }
            .absence-list-header .abl-zeitraum { flex: 0 0 130px !important; }
            .absence-list-header .abl-doc { flex: 0 0 60px !important; }

            .absence-list .abl-row,
            .absence-list .absence-list-item {
                font-size: 0.78rem !important;
            }
            .abl-status-col {
                flex: 0 0 100px !important;
                padding: 4px 6px !important;
            }
            .abl-status-col .badge {
                font-size: 0.7rem !important;
                padding: 2px 6px !important;
            }
            .abl-main {
                padding: 4px 6px !important;
                gap: 4px !important;
            }
            .abl-zeitraum {
                flex: 0 0 130px !important;
                font-size: 0.78rem !important;
            }
            .abl-zeitraum small { font-size: 0.7rem !important; }
            .abl-grund {
                font-size: 0.78rem !important;
            }
            .abl-bemerkungen {
                font-size: 0.72rem !important;
            }
            .abl-doc {
                flex: 0 0 60px !important;
                font-size: 0.72rem !important;
            }

            /* Statistik-Badges + Header */
            .absence-stats { font-size: 0.78rem !important; gap: 4px !important; }
            .absence-stats .btn { padding: 4px 10px !important; font-size: 0.75rem !important; }
            .absence-stats .badge-stat { padding: 4px 8px !important; font-size: 0.72rem !important; }
            #absence-today-date { font-size: 0.85rem !important; }

            /* Abwesenheit-Modal kompakter */
            #absence-report-modal .modal-dialog {
                max-width: 460px !important;
                margin: 20px auto !important;
            }
            #absence-report-modal .modal-header {
                padding: 6px 12px !important;
            }
            #absence-report-modal .modal-title {
                font-size: 0.85rem !important;
            }
            #absence-report-modal .modal-body {
                padding: 8px 12px !important;
                font-size: 0.78rem !important;
            }
            #absence-report-modal .modal-body label {
                font-size: 0.7rem !important;
                margin-bottom: 1px !important;
            }
            #absence-report-modal .modal-body .form-control,
            #absence-report-modal .modal-body .form-select {
                font-size: 0.78rem !important;
                padding: 3px 6px !important;
                height: auto !important;
            }
            #absence-report-modal .modal-body textarea.form-control {
                min-height: 44px !important;
            }
            #absence-report-modal .modal-body .mb-3 { margin-bottom: 5px !important; }
            #absence-report-modal .modal-footer {
                padding: 4px 10px !important;
            }
            #absence-report-modal .modal-footer .btn {
                padding: 3px 10px !important;
                font-size: 0.75rem !important;
            }
            #absence-report-modal .absence-type-tabs .nav-link {
                padding: 4px 8px !important;
                font-size: 0.75rem !important;
            }
            #absence-report-modal .absence-lesson-item {
                padding: 4px 8px !important;
                font-size: 0.75rem !important;
            }

            /* Kalenderwoche in Monatsansicht: kleiner + im Eck statt überlagernd */
            .fc-dayGridMonth-view .fc-daygrid-week-number {
                display: block !important;
                position: absolute !important;
                top: 2px !important;
                left: 2px !important;
                font-size: 0.55rem !important;
                color: var(--ci-text-muted) !important;
                background: transparent !important;
                padding: 0 3px !important;
                border-radius: 3px !important;
                z-index: 1;
            }
            .fc-dayGridMonth-view .fc-daygrid-day-frame {
                position: relative;
                padding-top: 14px !important;
            }
            .fc-dayGridMonth-view .fc-daygrid-day-top {
                justify-content: flex-end !important;
            }
        }

        /* Timer-Button: zentriert + kleiner auf Tablet/PC (≥768px) */
        @media (min-width: 768px) {
            #lesson-timer-btn {
                position: absolute !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                padding: 4px 10px !important;
                font-size: 0.72rem !important;
                gap: 4px !important;
            }
            #lesson-timer-btn .bi { font-size: 0.8rem !important; }
            .webinfo-page-header { position: relative; }
        }

        /* Mobile: 1 Spalte, darf scrollen */
        @media (max-width: 767.98px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                height: auto;
                padding: 10px;
                gap: 12px;
            }
            .dashboard-grid .card {
                overflow: visible;
                min-height: 120px;
            }
            .dashboard-grid .card-body {
                overflow: visible;
            }
        }

        /* Notification styling — CI-Farben
           Gelesene Nachrichten: grüner linker Rand
           Ungelesene Nachrichten: roter linker Rand (überschreibt Grün) */
        .notification-card {
            border-left: 3px solid var(--ci-primary) !important;
        }
        .notification-unread {
            border-left: 3px solid #E53935 !important;
        }
        .notification-meta .badge { font-size: 0.75rem; font-weight: 500; }
        /* Postfach-Karten: Kartenheader-Layout */
        /* Nachrichtenfenster Footer: Beschriftung auf Mobile ausblenden */
        @media (max-width: 767.98px) {
            .msg-modal-btn-label { display: none !important; }
            #msg-modal-btn-important,
            #msg-modal-btn-delete,
            #msg-modal-btn-close { font-size: 1.1rem !important; padding: 8px 0 !important; }
        }

        .msg-card-header {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
            padding: 6px 12px !important;
            align-items: stretch !important;
        }
        .msg-header-row {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 6px !important;
            width: 100% !important;
        }
        .msg-header-left {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            overflow: hidden !important;
            flex: 1 !important;
            min-width: 0 !important;
        }
        .msg-header-left .bi {
            flex-shrink: 0 !important;
            font-size: 1rem !important;
        }
        .msg-header-left span {
            font-size: 0.95rem !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            font-weight: 500 !important;
        }
        .msg-header-actions {
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
            flex-shrink: 0 !important;
        }
        .msg-btn-important,
        .msg-btn-delete {
            background: none !important;
            border: none !important;
            cursor: pointer !important;
            padding: 0 3px !important;
            height: auto !important;
            display: flex !important;
            align-items: center !important;
            color: rgba(255,255,255,0.6) !important;
            font-size: 0.95rem !important;
        }
        .msg-btn-important .bi,
        .msg-btn-delete .bi {
            font-size: 0.95rem !important;
        }
        .msg-header-date {
            font-size: 0.75rem !important;
            opacity: 0.75 !important;
            padding-left: 22px !important;
        }
        .notification-card .card-body,
        .card .notification-card .card-body {
            font-weight: 400 !important;
            font-size: 0.9rem !important;
            color: #1B2A4A !important;
            padding-bottom: 8px !important;
        }

        /* FuxMedia Logo */
        .fm-logo {
            filter: none !important;
            opacity: 1 !important;
            max-width: 80px;
        }

        /* ===== CI-Überschreibungen für FuxNoten CSS ===== */

        /* Card-Header: Einheitlich Dunkelblau (CI-Secondary) — keine Gradienten! */
        .card-header,
        .dashboard-grades-table thead th,
        .table thead th {
            background-color: var(--ci-secondary) !important;
            background-image: none !important;
            color: #fff !important;
            border-bottom: none !important;
        }
        /* Card-Body: Einheitlich weißer Hintergrund */
        .card-body {
            background-color: #fff !important;
        }
        /* Card-Footer: Einheitlich */
        .card-footer {
            background-color: #fff !important;
            border-top: 1px solid var(--ci-border) !important;
        }

        /* Buttons: Grün/Gelb */
        .btn-primary {
            background-color: var(--ci-primary) !important;
            border-color: var(--ci-primary) !important;
            color: var(--ci-secondary) !important;
            font-weight: 600;
        }
        .btn-primary:hover, .btn-primary:focus {
            background-color: var(--ci-primary-dark) !important;
            border-color: var(--ci-primary-dark) !important;
            color: var(--ci-secondary) !important;
        }
        .btn-outline-danger {
            border-color: #E53935;
            color: #E53935;
        }
        .btn-outline-danger:hover {
            background-color: #E53935;
            color: #fff;
        }

        /* Links: CI-Primärfarbe */
        a { color: var(--ci-primary-dark); }
        a:hover { color: var(--ci-primary); }

        /* Noten-Tabelle: horizontal scrollbar bei zu kleinem Display */
        .table-responsive-webinfo {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }
        .grades-table {
            min-width: 320px;
        }

        /* Noten-Tabelle Header */
        .grades-table .primary-header th,
        .grades-table .secondary-header th,
        .calendar-table .primary-header th {
            background-color: var(--ci-secondary) !important;
            color: #fff !important;
        }

        /* Highlight-Cells: Blau-Grau statt Grau */
        .highlight-cell {
            background-color: rgba(27, 42, 74, 0.06) !important;
            color: var(--ci-text) !important;
        }

        /* Average-Cell */
        .average-cell {
            background-color: rgba(184, 212, 48, 0.12) !important;
            font-weight: 700;
        }

        /* Action-Header (Semester-Klapptitel) */
        .action-header,
        .webinfo-period-container .action-header {
            background-color: var(--ci-accent) !important;
            background-image: none !important;
            background: var(--ci-accent) !important;
            color: #fff !important;
        }
        .action-header h1 {
            color: #fff !important;
        }

        /* Grade-Chips und Fach-Zeilen: kein Kontextmenü bei Long-Press */
        .grade-chip,
        .landscape-grid-table td[data-subj-name] {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Semester-Blasen */
        .sem-bubble {
            border: 2px solid var(--ci-secondary);
            border-radius: 22px;
            overflow: hidden;
        }
        .sem-bubble-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--ci-secondary);
            color: #fff;
            padding: 8px 12px;
            cursor: pointer;
            gap: 8px;
            flex-wrap: nowrap;
        }
        .sem-btn-area {
            display: flex !important;
            gap: 6px !important;
            flex-shrink: 0 !important;
            flex-wrap: nowrap !important;
        }
        .sem-bubble-title {
            font-size: 0.88rem;
            font-weight: 600;
        }

        .sem-bubble .collapse,
        .sem-bubble .collapsing {
            background: #fff;
        }
        .sem-bubble table td,
        .sem-bubble table th {
            border-width: 1px !important;
        }
        .sem-bubble table tr.compact-row td {
            border-bottom-width: 1px !important;
        }

        /* Semester-Buttons: Kreis auf Mobile (nur Icon), Pille auf Tablet (Icon + Text) */
        .sem-btn-area .btn {
            padding: 6px 8px !important;
            font-size: 0.72rem !important;
            font-weight: 600 !important;
            height: auto !important;
            min-height: 0 !important;
            border-radius: 50% !important;
            line-height: 1 !important;
            aspect-ratio: 1 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        @media (min-width: 576px) {
            .sem-btn-area .btn {
                border-radius: 20px !important;
                aspect-ratio: auto !important;
                padding: 5px 12px !important;
            }
        }

        /* Querformat: Semester-Blasen kompakt wie im Hochformat (nur Smartphone) */
        @media (orientation: landscape) and (max-width: 767.98px) {
            .sem-btn-area .btn-label,
            .header-logout-btn .btn-label {
                display: none !important;
            }
        }
        @media (orientation: landscape) {
            .sem-bubble-header {
                padding: 4px 10px !important;
            }
            .sem-bubble-title {
                font-size: 0.78rem !important;
            }
        }
        @media (orientation: landscape) and (max-width: 767.98px) {
            .sem-btn-area .btn {
                padding: 6px 8px !important;
                font-size: 0.72rem !important;
                font-weight: 600 !important;
                height: auto !important;
                min-height: 0 !important;
                border-radius: 50% !important;
                line-height: 1 !important;
                aspect-ratio: 1 !important;
            }
        }
        /* Tablet/PC: Sem-Buttons im Profil/Abmelden-Stil */
        @media (min-width: 768px) {
            .sem-btn-area .btn {
                padding: 5px 12px !important;
                font-size: 0.78rem !important;
                font-weight: 600 !important;
                height: auto !important;
                min-height: 0 !important;
                border-radius: 20px !important;
                aspect-ratio: auto !important;
                line-height: 1 !important;
                gap: 5px !important;
            }
        }

        /* Semester-Chevron Rotation */
        .semester-chevron {
            transition: transform 200ms ease;
            display: inline-block;
            font-size: 0.8em;
        }
        [aria-expanded="true"] .semester-chevron {
            transform: rotate(90deg);
        }

        /* Kleine Noten: Unterkategorie-Badge */
        .grade-chip .badge-subcategory {
            display: none;
            position: absolute;
            bottom: calc(100% + 4px);
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            font-size: 0.65rem;
            padding: 2px 6px;
            z-index: 10;
            pointer-events: none;
        }
        .grade-chip { position: relative; }
        .grade-chip:hover .badge-subcategory,
        .grade-chip.show-badge .badge-subcategory {
            display: block;
        }

        /* HJ1/HJ2 Hintergrundfarbe + vertikales Label in der Jahresübersicht */
        .grade-type-section-hj1,
        .grade-type-section-hj2 {
            display: flex;
            flex-direction: row;
            align-items: stretch;
        }
        .grade-type-section-hj1 {
            background: rgba(184,212,48,0.06);
        }
        .grade-type-section-hj2 {
            background: rgba(80,140,210,0.06);
        }
        .grade-type-section-content {
            flex: 1;
        }
        .hj-vertical-label {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-align: center;
            padding: 6px 3px;
            flex-shrink: 0;
            user-select: none;
        }
        .grade-type-section-hj1 .hj-vertical-label {
            color: rgba(120,160,30,0.85);
            border-right: 2px solid rgba(184,212,48,0.4);
        }
        .grade-type-section-hj2 .hj-vertical-label {
            color: rgba(60,110,190,0.85);
            border-right: 2px solid rgba(80,140,210,0.35);
        }

        /* Status-Badges: Spezifische Farben bleiben */
        /* Fehlzeiten-Tags */
        .badge-entschuldigt { background-color: #A5D6A7 !important; color: #1B5E20 !important; }
        .badge-unentschuldigt { background-color: #FFCDD2 !important; color: #B71C1C !important; }
        .badge-arbeitsmittel { background-color: #BBDEFB !important; color: #0D47A1 !important; }
        .badge-msg-unread    { background-color: #FFCDD2 !important; color: #B71C1C !important; }
        .badge-msg-read      { background-color: #A5D6A7 !important; color: #1B5E20 !important; }
        .badge-msg-important { background-color: #FFF9C4 !important; color: #F57F17 !important; }
        #btn-mark-all-read {
            height: auto !important;
            padding: 8px 12px !important;
            font-size: 0.85rem !important;
            line-height: 1 !important;
            border-radius: 24px !important;
            background-color: #1B2A4A !important;
            border-color: #1B2A4A !important;
            color: #fff !important;
            font-weight: 600 !important;
        }

        /* Absence-Stats Badges */
        .badge-stat {
            padding: 8px 14px;
            font-size: 0.85rem;
            border-radius: 20px;
        }

        /* Abwesenheit melden — Typ-Tabs */
        .absence-type-tabs {
            display: flex;
            gap: 8px;
            border-bottom: 2px solid rgba(0,0,0,0.1);
            padding-bottom: 0;
        }
        .absence-type-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 8px 16px;
            border: none;
            background: none;
            color: #666;
            font-size: 0.82rem;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.15s, border-color 0.15s;
        }
        .absence-type-btn i { font-size: 1.2rem; }
        .absence-type-btn.active {
            color: var(--ci-green, #b8d430);
            border-bottom-color: var(--ci-green, #b8d430);
            font-weight: 600;
        }
        .absence-type-btn:hover:not(.active) { color: #333; }

        /* Stundenraster */
        .absence-lessons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 8px;
        }
        .absence-lesson-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border: 1.5px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.82rem;
            transition: border-color 0.15s, background 0.15s;
        }
        .absence-lesson-item input[type=checkbox] { flex-shrink: 0; }
        .absence-lesson-item:has(input:checked) {
            border-color: var(--ci-green, #b8d430);
            background: rgba(184,212,48,0.08);
        }
        .absence-lesson-item .lesson-time { color: #888; font-size: 0.75rem; }
        /* Abwesenheiten-Liste: Flex-Div-Layout */
        .absence-list { width: 100%; }
        .absence-list-header {
            display: none;
            background: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
            padding: 6px 12px 6px 8px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #666;
            align-items: center;
        }
        .absence-row {
            display: flex;
            border-bottom: 1px solid #dee2e6;
            align-items: stretch;
            min-height: 54px;
        }
        .absence-row:last-child { border-bottom: none; }
        /* Linke Statusspalte: schmal, Badge hochkant */
        .abl-status-col {
            flex: 0 0 30px;
            display: flex;
            align-items: stretch;
            padding: 4px 3px;
        }
        .abl-status-col .badge {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            padding: 6px 4px;
            font-size: 0.72rem;
            letter-spacing: 0.03em;
            border-radius: 6px;
            width: 22px;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Rechter Inhaltsbereich: auf Mobile spaltenweise */
        .abl-main {
            flex: 1;
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto auto;
            gap: 0 8px;
            padding: 6px 8px;
            font-size: 0.85rem;
            overflow: hidden;
        }
        .abl-zeitraum { grid-column: 1; grid-row: 1; font-weight: 500; white-space: nowrap; line-height: 1.3; min-width: 90px; }
        .abl-zeitraum small { display: block; font-weight: 400; color: #888; font-size: 0.78rem; }
        .abl-grund { grid-column: 2; grid-row: 1; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: start; padding-top: 1px; }
        .abl-doc { grid-column: 3; grid-row: 1; color: #666; align-self: center; }
        .abl-bemerkungen { grid-column: 1 / -1; grid-row: 2; color: #888; font-size: 0.85rem; padding-top: 2px; }
        /* Desktop: Statusspalte breiter, Inhalt zeilenweise */
        @media (min-width: 769px) {
            .absence-list-header { display: flex; }
            .absence-list-header .abl-status-col { flex: 0 0 130px; align-items: center; padding: 6px 8px; }
            .absence-list-header .abl-zeitraum { flex: 0 0 160px; }
            .absence-list-header .abl-grund { flex: 1; }
            .absence-list-header .abl-bemerkungen { flex: 1; text-align: center; }
            .absence-list-header .abl-doc { flex: 0 0 80px; text-align: center; }
            .abl-status-col {
                flex: 0 0 130px;
                align-items: center;
                justify-content: flex-start;
                padding: 8px;
            }
            .abl-status-col .badge {
                writing-mode: horizontal-tb;
                transform: none;
                width: auto;
                font-size: 0.8rem;
                padding: 4px 10px;
            }
            .abl-main {
                flex-direction: row;
                align-items: center;
                gap: 0;
                padding: 8px;
            }
            .abl-zeitraum { flex: 0 0 160px; font-weight: 400; }
            .abl-grund { flex: 1; color: #444; }
            .abl-bemerkungen { flex: 1; text-align: center; color: #555; font-size: 0.85rem; }
            .abl-doc { flex: 0 0 80px; text-align: center; }
        }

        /* Abwesenheits-Hinweisbox */
        .absence-notice {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 14px;
            background: rgba(255, 193, 7, 0.12);
            border-left: 3px solid #FFC107;
            border-radius: 6px;
            font-size: 0.83rem;
            color: #5a4000;
            margin-top: 4px;
        }
        .absence-notice i { color: #FFC107; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

        @media (max-width: 480px) {
            .absence-type-btn span { display: none; }
            .absence-type-btn { padding: 8px 12px; }
            .absence-lessons-grid { grid-template-columns: 1fr 1fr; }
        }

        /* Text-Muted: Blau-Grau statt Grau */
        .text-muted { color: var(--ci-text-muted) !important; }

        /* Modal-Header: CI-Farben */
        .modal-header {
            background-color: var(--ci-secondary) !important;
            color: #fff !important;
            justify-content: center !important;
        }
        .modal-header .modal-title { color: #fff !important; }
        .modal-header .btn-close {
            filter: brightness(0) invert(1);
        }

        /* Info-Tabs auf Info-Seite */
        .nav-tabs .nav-link {
            color: var(--ci-text-muted);
            border: none;
            border-bottom: 2px solid transparent;
        }
        .nav-tabs .nav-link:hover {
            color: var(--ci-text);
            border-bottom-color: var(--ci-primary-light);
        }
        .nav-tabs .nav-link.active {
            color: var(--ci-secondary) !important;
            background-color: transparent !important;
            border-bottom: 3px solid var(--ci-primary) !important;
            font-weight: 600;
        }

        /* Webinfo Page Header */
        .webinfo-page-header h1 {
            color: var(--ci-secondary);
            font-weight: 700;
        }

        /* Seitenspezifische Container */
        .webinfo-account-container,
        .webinfo-period-container {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* ===== MOBILE/TABLET RESPONSIVE ===== */
        @media (max-width: 1024px) {
            html, body {
                height: auto !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }
            .main-content-area {
                position: static;
                padding-top: 56px;
                padding-bottom: 72px;
                min-height: 100vh;
                overflow: visible;
            }
            .webinfo-account-container,
            .webinfo-period-container {
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                padding-bottom: 40px;
            }
            .cards-wrapper {
                max-height: none !important;
            }
            .cards-wrapper .card {
                max-height: none !important;
                max-width: 100% !important;
            }
        }

        @media (max-width: 767.98px) {
            .top-header-bar {
                height: 50px;
                padding: 0 10px;
            }
            .top-header-bar .header-title {
                display: none;
            }
            .top-header-bar .header-logo {
                height: 28px;
            }
            .main-content-area {
                padding-top: 50px;
            }
            .header-left { gap: 4px !important; }
            .header-left .header-logo { height: 24px !important; }
            .header-right { gap: 4px !important; }
            .header-logout-btn { padding: 4px 8px !important; }
            .header-personal-btn { padding: 4px 8px !important; }
            .header-personal-btn span { display: none; }
            .child-tabs-wrapper {
                max-width: calc(100vw - 180px);
            }
            .child-tabs .child-tab {
                padding: 3px 7px;
                font-size: 0.6rem;
                border-width: 1px;
            }
            .bottom-bar {
                height: 56px;
            }
            .bottom-bar .nav-tab {
                flex: 1 1 0;
                max-width: none;
                min-width: 0;
                padding: 4px 2px;
                text-align: center;
                overflow: hidden;
            }
            .bottom-bar .nav-tab i {
                font-size: 1.35rem;
                display: block;
                margin-bottom: 1px;
            }
            .bottom-bar .nav-tab span {
                display: block;
                font-size: 0.6rem;
                line-height: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /* Kind-Kontext ausblenden — Info steckt schon im Kind-Tab */
            .child-context { display: none; }
            /* Begruessung kleiner auf Mobile */
            #dashboard-greeting { font-size: 1.3rem !important; }
            /* Dashboard-Cards: volle Breite, weniger Padding */
            .dashboard-grid {
                padding: 8px !important;
                gap: 12px !important;
            }
            .webinfo-page-header {
                flex-direction: row !important;
                align-items: center !important;
                justify-content: space-between !important;
                min-height: 44px;
            }
            .webinfo-page-header h1 {
                font-size: 1.3rem;
                margin: 0;
            }
            .cards-wrapper {
                gap: 1rem !important;
                flex-direction: column !important;
            }
            .cards-wrapper .card {
                width: 100% !important;
                min-width: 0 !important;
                flex: none !important;
            }
            .card-header {
                flex-wrap: wrap !important;
                gap: 8px;
            }
            .card-header .btn {
                font-size: 0.75rem;
                padding: 4px 10px;
            }
            .notification-card .card-header {
                flex-direction: column !important;
                gap: 4px;
            }
            .notification-card .card-header .text-nowrap {
                font-size: 0.75rem;
                opacity: 0.7;
            }
            .notification-card .card-body { font-size: 0.85rem; }
            .calendar-table td, .calendar-table th {
                font-size: 0.8rem;
                padding: 6px 8px !important;
            }
            .absence-stats .btn { margin-left: 0 !important; width: 100%; }
            .bundesland-selector { flex-direction: column !important; width: 100%; }
            .bundesland-selector select { width: 100% !important; min-width: 0 !important; }
            .calendar-legend { font-size: 0.75rem; gap: 4px 12px !important; }
            .legend-item { font-size: 0.7rem; }
            .fc .fc-toolbar {
                gap: 0 !important;
                margin-bottom: 4px !important;
                background-color: var(--ci-secondary) !important;
                border-radius: 22px !important;
                padding: 8px 12px !important;
                align-items: center !important;
                border: 2px solid var(--ci-secondary) !important;
            }
            .fc .fc-toolbar-chunk { display: flex; align-items: center; }
            .fc .fc-button {
                font-size: 0.8rem !important;
                padding: 2px 8px !important;
                border-radius: 20px !important;
                background: none !important;
                border: none !important;
                color: rgba(255,255,255,0.6) !important;
                box-shadow: none !important;
                height: auto !important;
                min-height: 0 !important;
            }
            .fc .fc-button:hover { color: #fff !important; }
            .fc .fc-button-active { font-weight: 600 !important; }
            .fc .fc-toolbar-title {
                font-size: 0.88rem !important;
                font-weight: 600 !important;
                color: #fff !important;
                padding: 0 8px !important;
            }
            /* Kalenderwochen nur in Wochen-/Tagesansicht, nicht in Monatsansicht */
            .fc-dayGridMonth-view .fc-daygrid-week-number { display: none !important; }
            /* KW-Nummer im Wochen-Header sichtbar machen */
            .fc .fc-timegrid-axis-cushion,
            .fc .fc-col-header .fc-week-number,
            .fc .fc-col-header-cell.fc-day a,
            .fc .fc-col-header-cell a,
            .fc .fc-week-number { color: #fff !important; font-size: 0.6rem !important; }

            /* Wochen-/Tagesansicht: kompakter auf Smartphone */
            .fc .fc-col-header-cell-cushion { font-size: 0.65rem !important; padding: 2px 0 !important; }
            .fc .fc-timegrid-slot { height: 1em !important; }
            .fc .fc-timegrid-slot-label-cushion { font-size: 0.6rem !important; padding: 0 !important; text-align: center !important; width: 100% !important; display: block !important; }
            .fc .fc-timegrid-slot-label { text-align: center !important; }
            .fc .fc-timegrid-axis-cushion { text-align: center !important; width: 100% !important; display: block !important; }
            .fc .fc-timegrid-axis-frame { justify-content: center !important; text-align: center !important; }
            .fc .fc-timegrid-axis,
            .fc td.fc-timegrid-axis,
            .fc th.fc-timegrid-axis,
            .fc col.fc-timegrid-axis { width: 42px !important; min-width: 42px !important; }
            .fc .fc-timegrid-event { font-size: 0.55rem !important; line-height: 1.2 !important; }
            .fc .fc-timegrid-event .fc-event-main { padding: 1px 2px !important; }
            .fc .fc-timegrid-event .fc-event-title { font-size: 0.55rem !important; }
            .fc .fc-timegrid-axis-cushion { font-size: 0.6rem !important; padding: 0 4px !important; }
            .fc .fc-daygrid-day-number { font-size: 0.65rem !important; padding: 2px 4px !important; }
            .fc .fc-daygrid-event { font-size: 0.52rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 3px !important; line-height: 1.3 !important; }
            .fc .fc-daygrid-event .fc-event-title { font-size: 0.52rem !important; }
            .fc .fc-daygrid-event .fc-event-main { font-size: 0.52rem !important; }

            /* Kalender-Custom-Liste: Blasen wie Postfach */
            .cal-custom-list { display: flex; flex-direction: column; gap: 8px; }
            .cal-custom-list .notification-card {
                border: 2px solid var(--ci-secondary) !important;
                border-radius: 22px !important;
                overflow: hidden;
            }
            .cal-custom-list .card-header {
                padding: 6px 12px !important;
                font-size: 0.82rem !important;
            }
            .cal-custom-list .card-body {
                padding: 8px 12px !important;
                font-size: 0.85rem !important;
                color: #1B2A4A !important;
                font-weight: 400 !important;
            }
            .fc .fc-col-header-cell-cushion { font-size: 0.7rem !important; }
            .fc .fc-daygrid-day-number { font-size: 0.75rem !important; padding: 2px 4px !important; }
            .fc .fc-daygrid-event { font-size: 0.52rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 3px !important; line-height: 1.3 !important; }
            .fc .fc-daygrid-event .fc-event-title { font-size: 0.52rem !important; }
            .fc .fc-daygrid-event .fc-event-main { font-size: 0.52rem !important; }
            .fc, .fc .fc-scroller { overflow: visible !important; }
            .webinfo-account-container,
            .webinfo-period-container {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
        }

        /* ===== Extra-kompakt fuer kleine Smartphones (<=480px) ===== */
        @media (max-width: 480px) {
            h1 { font-size: 1.1rem !important; }
            .card-header { font-size: 0.8rem; padding: 8px 12px; }
            .card-body { padding: 8px 12px; font-size: 0.85rem; }
            .child-tabs .child-tab {
                font-size: 0.65rem;
                padding: 3px 8px;
            }
            .child-tabs {
                max-width: 50vw;
            }
            #dashboard-greeting { font-size: 1.1rem !important; }
        }

        /* ===== Quick Win 1: Kind-Kontext unter Seitentitel ===== */
        .child-context { font-size: 0.9rem; color: #6B7A99; margin-top: -8px; margin-bottom: 12px; }

        /* ===== Quick Win 2: Noten farblich kodiert ===== */
        .grade-excellent { color: #2E7D32; font-weight: 700; }
        .grade-good { color: #558B2F; font-weight: 700; }
        .grade-ok { color: #F9A825; font-weight: 700; }
        .grade-warning { color: #EF6C00; font-weight: 700; }
        .grade-bad { color: #C62828; font-weight: 700; }

        /* ===== Professionelle Fußzeile ===== */
        .site-footer {
            padding: 16px 24px;
            margin-top: 24px;
            border-top: 1px solid rgba(27, 42, 74, 0.1);
        }
        /* Dashboard: Footer verstecken damit alles ohne Scrollbar passt */
        .dashboard-page .site-footer {
            display: none;
        }
        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        .footer-school {
            font-size: 0.78rem;
            color: #8B96A9;
        }
        .footer-school-name {
            font-weight: 600;
        }
        .footer-divider {
            margin: 0 6px;
            opacity: 0.4;
        }
        .footer-powered {
            display: flex;
            align-items: center;
        }
        .footer-fm-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            opacity: 0.35;
            transition: opacity 200ms ease;
        }
        .footer-fm-link:hover {
            opacity: 0.6;
        }
        .footer-fm-logo {
            height: 22px;
            filter: grayscale(100%);
        }
        @media (max-width: 768px) {
            .footer-content {
                flex-direction: column;
                text-align: center;
            }
            .footer-school { font-size: 0.72rem; }
            .footer-divider { display: none; }
            .footer-school span { display: block; }
        }

        /* Noten-Hover: sanft statt komplett dunkelblau, Noten-Farben bleiben lesbar */
        .grades-table-compact .compact-row:hover {
            background-color: rgba(27, 42, 74, 0.08) !important;
        }
        .grades-table-compact .compact-row:hover td {
            color: inherit !important;
        }

        /* ===== DESIGN VERSION 2 (Bellmatec-Stil) ===== */
        /* Exakte Farben: --fux-dark:#051422, --fux-yellow:#CBD300, --fux-blue:#1D3143,
           --fux-blue_normal:#254F7B, --yellow-light:#F5F5E7, --fux-dark_normal:#0E2237 */

        /* Seiten-Hintergrund */
        .design-v2 .main-content-area,
        .design-v2 .webinfo-account-container,
        .design-v2 .webinfo-period-container { background: #1B2A4A !important; }
        .design-v2 { background: #1B2A4A !important; }

        /* Header & Bottom-Bar */
        .design-v2 .top-header-bar { background: rgba(20,35,55,0.9) !important; }
        .design-v2 .bottom-bar { background: rgba(20,35,55,0.9) !important; }

        /* Card-Header: dunkel mit lime-gelbem Text (wie Bellmatec) */
        .design-v2 .card-header,
        .design-v2 .dashboard-grid .card-header,
        .design-v2 .dashboard-grades-table thead th {
            background-color: #051422 !important;
            background-image: none !important;
            color: #CBD300 !important;
        }

        /* Tabellen-Header: dunkel wie Bellmatec */
        .design-v2 .grades-table thead th,
        .design-v2 .table thead th {
            background-color: #051422 !important;
            color: #fff !important;
        }

        /* Card-Body: transparent für Glasmorphism */
        .design-v2 .card-body { background-color: transparent !important; color: #E0E8F0 !important; }
        .design-v2 .card-footer { background-color: transparent !important; }
        .design-v2 .card-footer a { color: #CBD300 !important; }

        /* Karten: lime Rahmen + Schatten wie Bellmatec */
        .design-v2 .dashboard-grid .card {
            border: 2px solid #CBD300 !important;
            box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.1) !important;
            border-radius: 24px !important;
            overflow: hidden;
        }
        .design-v2 .notification-card {
            border-color: #051422 !important;
            background: #F5F5E7 !important;
        }
        .design-v2 .notification-unread { border-left-color: #fff !important; }

        /* Dashboard-Karten Header Badges */
        .design-v2 .dashboard-grid .card-header .badge {
            background: rgba(5,20,34,0.25) !important;
            color: #fff !important;
        }

        /* Semester-Blasen: dunkel mit lime Text */
        .design-v2 .sem-bubble { border-color: #051422 !important; }
        .design-v2 .sem-bubble-header { background-color: #051422 !important; color: #CBD300 !important; }
        .design-v2 .sem-bubble-title { color: #CBD300 !important; }
        .design-v2 .sem-bubble .semester-chevron { color: #CBD300 !important; }
        .design-v2 .sem-bubble .collapse,
        .design-v2 .sem-bubble .collapsing { background: rgba(20,40,65,0.4) !important; color: #E0E8F0 !important; }

        /* Sem-Buttons */
        .design-v2 .sem-btn-area .btn {
            background-color: rgba(203,211,0,0.15) !important;
            color: #CBD300 !important;
            border-color: rgba(203,211,0,0.3) !important;
        }

        /* Überschriften auf dunklem Hintergrund */
        .design-v2 h1,
        .design-v2 .webinfo-page-header h1 { color: #CBD300 !important; }
        .design-v2 .child-context { color: #6B8099 !important; }
        .design-v2 #dashboard-greeting { color: #E0E8F0 !important; }

        /* Buttons: Bellmatec lime */
        .design-v2 #btn-mark-all-read {
            background-color: #CBD300 !important;
            border-color: #CBD300 !important;
            color: #051422 !important;
        }
        .design-v2 [data-bs-target="#absence-report-modal"] {
            background-color: #CBD300 !important;
            color: #051422 !important;
        }
        .design-v2 .btn-primary {
            background-color: #CBD300 !important;
            border-color: #CBD300 !important;
            color: #051422 !important;
        }
        .design-v2 .btn-primary:hover {
            background-color: #1D3143 !important;
            border-color: #1D3143 !important;
            color: #fff !important;
        }

        /* Postfach Unread Badge */
        .design-v2 .messages-unread-badge {
            background-color: #CBD300 !important;
            color: #051422 !important;
        }

        /* Header Buttons: lime */
        .design-v2 .header-logout-btn {
            background: #CBD300 !important;
            border-color: #CBD300 !important;
            color: #051422 !important;
        }
        .design-v2 .header-personal-btn {
            background: #CBD300 !important;
            border-color: #CBD300 !important;
            color: #051422 !important;
        }

        /* Kind-Tabs */
        .design-v2 .child-tabs .child-tab.active {
            background: #CBD300 !important;
            border-color: #CBD300 !important;
            color: #051422 !important;
        }
        .design-v2 .child-tabs .child-tab {
            color: #CBD300 !important;
            border-color: rgba(203,211,0,0.3) !important;
        }

        /* Bottom-Bar Tabs */
        .design-v2 .bottom-bar .nav-tab { color: rgba(203,211,0,0.4) !important; }
        .design-v2 .bottom-bar .nav-tab.active,
        .design-v2 .bottom-bar .nav-tab.active i { color: #CBD300 !important; }

        /* Nav Unread Dot */
        .design-v2 .nav-unread-dot { background-color: #CBD300 !important; }

        /* Highlight-Cells (Fach-Spalte): wie Bellmatec --fux-blue_normal */
        .design-v2 .highlight-cell {
            background-color: #254F7B !important;
            color: #fff !important;
        }

        /* Average-Cells: lime auf dunkel */
        .design-v2 .average-cell {
            background-color: #051422 !important;
            color: #CBD300 !important;
            font-weight: 700 !important;
        }

        /* Noten-Tabellen */
        .design-v2 .grades-table .highlight-cell {
            background-color: #254F7B !important;
            color: #fff !important;
        }
        .design-v2 .grades-table .average-cell {
            background-color: #051422 !important;
            color: #CBD300 !important;
        }

        /* Notification-Card */
        .design-v2 .notification-card .card-body {
            background-color: rgba(20,40,65,0.55) !important;
            color: #E0E8F0 !important;
        }

        /* Nachrichten Msg-Card-Header: dunkel mit lime Text */
        .design-v2 .msg-card-header { background-color: #051422 !important; }
        .design-v2 .msg-card-header * { color: #CBD300 !important; }
        .design-v2 .msg-header-left span { color: #fff !important; }
        .design-v2 .msg-header-actions button { color: rgba(203,211,0,0.5) !important; }
        .design-v2 .msg-header-date { color: rgba(255,255,255,0.5) !important; }

        /* Kalender Custom-Liste */
        .design-v2 .cal-custom-list .notification-card { border-color: #051422 !important; }
        .design-v2 .cal-custom-list .card-header { background-color: #051422 !important; color: #CBD300 !important; }
        .design-v2 .cal-custom-list .card-body { background-color: rgba(20,40,65,0.4) !important; color: #E0E8F0 !important; }

        /* Kalender Nav-Buttons */
        .design-v2 #cal-nav-prev,
        .design-v2 #cal-nav-next { background-color: #CBD300 !important; color: #051422 !important; }
        .design-v2 #calendar-month-label,
        .design-v2 #calendar-month-label * { color: #E0E8F0 !important; }

        /* Kalender FC-Toolbar */
        .design-v2 .fc .fc-toolbar { background-color: #051422 !important; }
        .design-v2 .fc .fc-toolbar-title { color: #CBD300 !important; }
        .design-v2 .fc .fc-button { color: rgba(203,211,0,0.5) !important; }
        .design-v2 .fc .fc-button:hover { color: #CBD300 !important; }

        /* Kalender Tagesheader */
        .design-v2 .fc .fc-col-header-cell { background-color: #0E2237 !important; }
        .design-v2 .fc .fc-col-header-cell-cushion { color: #CBD300 !important; }
        .design-v2 .fc .fc-daygrid-day-number { color: #051422 !important; }
        .design-v2 .fc .fc-daygrid-day-frame { background-color: #fff !important; }

        /* Kalender Wochenende */
        .design-v2 .fc .fc-day-sat,
        .design-v2 .fc .fc-day-sun { background-color: #F5F5E7 !important; }
        .design-v2 .fc .fc-day-today .fc-daygrid-day-frame { background-color: rgba(203,211,0,0.12) !important; }

        /* Kalender View-Buttons */
        .design-v2 .cal-view-btn {
            background: transparent !important;
            color: #E0E8F0 !important;
            border-color: rgba(203,211,0,0.3) !important;
        }
        .design-v2 .cal-view-btn.active {
            background: #CBD300 !important;
            color: #051422 !important;
            border-color: #CBD300 !important;
        }

        /* Homework Blasen */
        .design-v2 .hw-item { border-color: #051422 !important; }
        .design-v2 .hw-row-subject { background-color: #051422 !important; color: #CBD300 !important; }
        .design-v2 .hw-row-details { background-color: rgba(20,40,65,0.4) !important; color: #E0E8F0 !important; }
        .design-v2 .hw-row-dates { background-color: rgba(203,211,0,0.08) !important; }
        .design-v2 .hw-subject-group { border-color: #051422 !important; }
        .design-v2 .hw-subject-header { background-color: #051422 !important; color: #CBD300 !important; }
        .design-v2 .hw-subject-chevron { color: #CBD300 !important; }
        .design-v2 .hw-section-title { color: #E0E8F0 !important; }

        /* Vergessen-Tabelle */
        .design-v2 .fg-header-row { background-color: #051422 !important; color: #CBD300 !important; }
        .design-v2 .fg-total-row { background-color: #051422 !important; color: #CBD300 !important; }
        .design-v2 .fg-subject-group { border-color: #051422 !important; }
        .design-v2 .fg-subject-row { background-color: rgba(20,40,65,0.4) !important; color: #E0E8F0 !important; }
        .design-v2 .fg-detail-list { background-color: rgba(20,40,65,0.3) !important; color: #E0E8F0 !important; }

        /* Modals */
        .design-v2 .modal-content { border-color: #CBD300 !important; border-radius: 4px !important; }
        .design-v2 .modal-header {
            background-color: #051422 !important;
            color: #CBD300 !important;
        }
        .design-v2 .modal-header * { color: #CBD300 !important; }
        .design-v2 .modal-footer { background-color: #051422 !important; }
        .design-v2 .modal-body { background-color: rgba(20,40,65,0.8) !important; color: #E0E8F0 !important; }
        .design-v2 #msg-modal-btn-close,
        .design-v2 #calendar-day-modal .modal-footer button {
            background-color: #CBD300 !important;
            color: #051422 !important;
        }
        .design-v2 .modal-header .btn-close {
            background-color: #CBD300 !important;
            border-radius: 4px !important;
            opacity: 1 !important;
        }

        /* Löschen-Bestätigung */
        .design-v2 #msg-delete-confirm-modal .modal-header { background-color: #051422 !important; }
        .design-v2 #msg-delete-confirm-modal .modal-header h6 { color: #CBD300 !important; }
        .design-v2 #msg-delete-confirm-modal button { background-color: #CBD300 !important; color: #051422 !important; }

        /* Version-Badge */
        .design-v2 #design-version-badge { background: rgba(203,211,0,0.3) !important; color: #CBD300 !important; }

        /* Scroll-to-top */
        .design-v2 .scroll-to-top-btn { background: #CBD300 !important; color: #051422 !important; border-color: #CBD300 !important; }

        /* Footer */
        .design-v2 .site-footer { border-top-color: rgba(203,211,0,0.15) !important; }
        .design-v2 .footer-school { color: #6B8099 !important; }

        /* Legende & Outline-Buttons */
        .design-v2 .btn-outline-secondary { border-color: rgba(203,211,0,0.4) !important; color: #CBD300 !important; }
        .design-v2 .legend-item { color: #E0E8F0 !important; }

        /* --- V2 UX: Noten-Trend-Indikator --- */
        /* Toggle-Switch */
        .setting-toggle-on { background: var(--ci-primary) !important; }
        .setting-toggle-on::before {
            content: ''; position: absolute; width: 18px; height: 18px; left: 23px; bottom: 3px;
            background: #fff; border-radius: 50%; transition: 0.2s;
        }
        .setting-toggle-off::before {
            content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px;
            background: #fff; border-radius: 50%; transition: 0.2s;
        }

        .v2-trend-up { color: #4CAF50 !important; font-size: 0.7rem; margin-left: 2px; font-weight: 500; }
        .v2-trend-down { color: #EF4444 !important; font-size: 0.7rem; margin-left: 2px; font-weight: 500; }
        .v2-trend-stable { color: rgba(203,211,0,0.7) !important; font-size: 0.7rem; margin-left: 2px; font-weight: 500; }
        /* Trend in Semester-/Gesamtjahr-Blasen: einheitliche Darstellung */
        .sem-bubble-title .v2-trend-up,
        .sem-bubble-title .v2-trend-down,
        .sem-bubble-title .v2-trend-stable {
            font-size: 0.72rem !important;
            font-weight: 500 !important;
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }
        .sem-bubble-title .v2-trend-up i,
        .sem-bubble-title .v2-trend-down i {
            font-size: 0.95rem;
            line-height: 1;
        }

        /* --- V2 UX: Micro-Interactions --- */
        .design-v2 .v2-pulse {
            animation: v2-pulse-anim 300ms ease;
        }
        @keyframes v2-pulse-anim {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        .design-v2 .v2-slide-out {
            animation: v2-slide-out-anim 300ms ease forwards;
        }
        @keyframes v2-slide-out-anim {
            to { transform: translateX(-100%); opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
        }
        .design-v2 .v2-fade-read {
            animation: v2-fade-read-anim 400ms ease;
        }
        @keyframes v2-fade-read-anim {
            0% { background: rgba(203,211,0,0.15); }
            100% { background: transparent; }
        }

        /* --- V2 UX: Toast-Benachrichtigungen --- */
        .v2-toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: #051422;
            color: #CBD300;
            padding: 8px 20px;
            border-radius: 24px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 9999;
            opacity: 0;
            transition: opacity 200ms ease, transform 200ms ease;
            pointer-events: none;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            border: 1px solid rgba(203,211,0,0.2);
        }
        .v2-toast.v2-toast-show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .design-v1 .v2-toast {
            background: var(--ci-secondary);
            color: #fff;
            border-color: rgba(255,255,255,0.1);
        }

        /* --- V2 UX: Animierte Zähler --- */
        .v2-count-anim {
            display: inline-block;
            transition: all 300ms ease;
        }

        /* --- V2 UX: Ripple-Effekt --- */
        .design-v2 .v2-ripple {
            position: relative;
            overflow: hidden;
        }
        .design-v2 .v2-ripple-wave {
            position: absolute;
            border-radius: 50%;
            background: rgba(203,211,0,0.25);
            transform: scale(0);
            animation: v2-ripple-anim 500ms ease-out;
            pointer-events: none;
        }
        @keyframes v2-ripple-anim {
            to { transform: scale(4); opacity: 0; }
        }

        /* Abwesenheiten */
        .design-v2 .absence-stats { color: #E0E8F0 !important; }

        /* Dashboard Text auf dunkel */
        .design-v2 .dashboard-meta { color: #8BA0B8 !important; }
        .design-v2 .dashboard-date { color: #E0E8F0 !important; }
        .design-v2 .dashboard-msg-title { color: #E0E8F0 !important; }
        .design-v2 .dashboard-msg-unread { color: #fff !important; }
        .design-v2 .dashboard-msg-preview { color: #8BA0B8 !important; }
        .design-v2 #lesson-timer-container { color: #E0E8F0 !important; }
        .design-v2 .text-muted { color: #6B8099 !important; }

        /* Semester Detail */
        .design-v2 .grade-detail-content { background-color: #F5F5E7 !important; }
        .design-v2 .grade-type-header { border-bottom-color: rgba(203,211,0,0.3) !important; }
        .design-v2 .grade-type-avg { color: #CBD300 !important; }

        /* PDF-Button nur in V2 sichtbar */
        .design-v2 .v2-pdf-btn { display: flex !important; }

        /* Stundenplan: View-Buttons */
        .tt-view-btn {
            background: transparent;
            border: 1px solid var(--ci-border);
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--ci-text-muted);
            cursor: pointer;
            transition: all 150ms ease;
        }
        .tt-view-btn.tt-view-active {
            background: var(--ci-secondary);
            border-color: var(--ci-secondary);
            color: #fff;
            font-weight: 600;
        }
        .design-v2 .tt-view-btn.tt-view-active {
            background: #CBD300 !important;
            border-color: #CBD300 !important;
            color: #051422 !important;
        }

        /* Stundenplan: Timeline */
        .tt-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
        .tt-timeline::before {
            content: '';
            position: absolute;
            left: 38px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--ci-border);
        }
        .design-v2 .tt-timeline::before { background: rgba(203,211,0,0.15); }

        .tt-lesson {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            position: relative;
            padding: 0 0 0 0;
        }
        .tt-time {
            flex: 0 0 34px;
            text-align: right;
            font-size: 0.68rem;
            color: var(--ci-text-muted);
            padding-top: 8px;
            line-height: 1.2;
        }
        .design-v2 .tt-time { color: rgba(224,232,240,0.5); }

        .tt-dot {
            flex: 0 0 10px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--ci-primary);
            margin-top: 10px;
            z-index: 1;
            box-shadow: 0 0 0 3px var(--ci-bg);
        }
        .design-v2 .tt-dot { background: #CBD300; box-shadow: 0 0 0 3px #1B2A4A; }

        .tt-card {
            flex: 1;
            background: #fff;
            border: 2px solid var(--ci-secondary);
            border-radius: 22px;
            padding: 10px 14px;
            margin-bottom: 8px;
        }
        .design-v2 .tt-card {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(203,211,0,0.12);
            border-radius: 4px !important;
        }
        .tt-subject { font-size: 0.88rem; font-weight: 600; color: var(--ci-secondary); }
        .design-v2 .tt-subject { color: #CBD300 !important; }
        .tt-details { font-size: 0.75rem; color: var(--ci-text-muted); margin-top: 2px; }
        .design-v2 .tt-details { color: rgba(224,232,240,0.6) !important; }
        .tt-current .tt-card {
            border-color: var(--ci-primary);
            box-shadow: 0 0 12px rgba(184,212,48,0.2);
        }
        .design-v2 .tt-current .tt-card {
            border-color: #CBD300 !important;
            box-shadow: 0 0 16px rgba(203,211,0,0.15) !important;
        }

        .tt-pause {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 2px 0 2px 0;
        }
        .tt-pause-line {
            flex: 0 0 34px;
        }
        .tt-pause-dot {
            flex: 0 0 6px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--ci-border);
            z-index: 1;
            margin-left: 2px;
        }
        .tt-pause-text {
            font-size: 0.68rem;
            color: var(--ci-text-muted);
            font-style: italic;
        }
        .design-v2 .tt-pause-text { color: rgba(224,232,240,0.35); }

        /* Stundenplan: Wochenansicht */
        .tt-week-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
        }
        .tt-week-tab {
            flex: 1;
            text-align: center;
            padding: 6px 4px;
            font-size: 0.72rem;
            font-weight: 500;
            border-radius: 20px;
            cursor: pointer;
            background: transparent;
            border: 1px solid var(--ci-border);
            color: var(--ci-text-muted);
            transition: all 150ms ease;
        }
        .tt-week-tab.tt-week-active {
            background: var(--ci-secondary);
            border-color: var(--ci-secondary);
            color: #fff;
            font-weight: 600;
        }
        .design-v2 .tt-week-tab.tt-week-active {
            background: #CBD300 !important;
            border-color: #CBD300 !important;
            color: #051422 !important;
        }
        .tt-week-tab.tt-week-today {
            border-color: var(--ci-primary);
        }

        /* Stundenplan: Gesamtansicht Grid */
        .tt-grid {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.65rem;
        }
        .tt-grid th {
            background: var(--ci-secondary);
            color: #fff;
            padding: 6px 2px;
            text-align: center;
            font-weight: 600;
            font-size: 0.65rem;
        }
        .tt-grid td {
            padding: 4px 2px;
            text-align: center;
            border-bottom: 1px solid rgba(27,42,74,0.08);
            font-size: 0.65rem;
            vertical-align: middle;
        }
        .tt-grid .tt-grid-time {
            background: var(--ci-secondary);
            color: #fff;
            font-size: 0.58rem;
            padding: 4px 3px;
            white-space: nowrap;
        }
        .tt-grid .tt-grid-cell {
            background: rgba(184,212,48,0.08);
            border-radius: 4px;
            font-weight: 600;
            color: var(--ci-secondary);
            padding: 5px 2px;
        }
        .tt-grid .tt-grid-empty {
            color: var(--ci-border);
        }
        .tt-grid .tt-grid-current {
            background: var(--ci-primary) !important;
            color: var(--ci-secondary) !important;
            font-weight: 700;
        }
        .design-v2 .tt-grid th { background: #051422; }
        .design-v2 .tt-grid .tt-grid-time { background: #051422; }
        .design-v2 .tt-grid td { border-bottom-color: rgba(203,211,0,0.06); }
        .design-v2 .tt-grid .tt-grid-cell {
            background: rgba(203,211,0,0.1);
            color: #CBD300;
        }
        .design-v2 .tt-grid .tt-grid-empty { color: rgba(224,232,240,0.15); }
        .design-v2 .tt-grid .tt-grid-current {
            background: #CBD300 !important;
            color: #051422 !important;
        }

        /* Optionale Karten: V1 Basis-Styles */
        .v2-opt-card {
            border: 2px solid var(--ci-secondary) !important;
            border-radius: 24px !important;
        }
        .v2-opt-card .card-header {
            font-size: 0.85rem !important;
        }
        .v2-opt-card .card-body {
            padding: 10px 14px !important;
            font-size: 0.82rem !important;
        }
        .v2-weekly-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
        .v2-weekly-icon { font-size: 0.75rem; color: var(--ci-primary); flex-shrink: 0; }
        .v2-weekly-text { font-size: 0.8rem; color: var(--ci-text); }
        .v2-countdown-big { font-size: 1.8rem; font-weight: 700; color: var(--ci-primary); }
        .v2-countdown-label { font-size: 0.82rem; color: var(--ci-text); }
        .v2-watchlist-item { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(27,42,74,0.06); }
        .v2-watchlist-item:last-child { border-bottom: none; }
        .v2-watchlist-subj { font-weight: 500; color: var(--ci-text); }
        .v2-watchlist-avg { color: var(--ci-secondary); font-weight: 700; }
        .v2-recent-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.82rem; color: var(--ci-text); cursor: pointer; }
        .v2-recent-item:hover { color: var(--ci-primary); }
        .v2-recent-icon { color: var(--ci-secondary); }

        /* V2: Optionale Karten Override */
        .design-v2 .v2-opt-card {
            border: 2px solid rgba(203,211,0,0.2) !important;
            border-radius: 24px !important;
            box-shadow: 0 0 0 1px rgba(203,211,0,0.1), 0 4px 20px rgba(0,0,0,0.3) !important;
        }
        .design-v2 .v2-opt-card .card-header {
            background-color: rgba(203,211,0,0.1) !important;
            color: #CBD300 !important;
            font-size: 0.85rem !important;
        }
        .design-v2 .v2-opt-card .card-body {
            background-color: transparent !important;
            color: #E0E8F0 !important;
        }
        .design-v2 .v2-weekly-icon { color: #CBD300 !important; }
        .design-v2 .v2-weekly-text { color: #E0E8F0 !important; }
        .design-v2 .v2-countdown-big { color: #CBD300 !important; }
        .design-v2 .v2-countdown-label { color: rgba(224,232,240,0.6) !important; }
        .design-v2 .v2-watchlist-subj { color: #E0E8F0 !important; }
        .design-v2 .v2-watchlist-avg { color: #CBD300 !important; }
        .design-v2 .v2-watchlist-item { border-bottom-color: rgba(203,211,0,0.08) !important; }
        .design-v2 .v2-recent-item { color: rgba(224,232,240,0.7) !important; }
        .design-v2 .v2-recent-item:hover { color: #CBD300 !important; }
        .design-v2 .v2-recent-icon { color: #CBD300 !important; }

        /* Barrierefreiheit (aktivierbar per Einstellung) */
        .a11y-on .btn,
        .a11y-on .badge-stat,
        .a11y-on .nav-tab,
        .a11y-on .child-tab,
        .a11y-on .cal-view-btn {
            min-height: 44px !important;
            min-width: 44px !important;
        }
        .a11y-on .card-header { min-height: 48px !important; }
        .a11y-on :focus-visible {
            outline: 3px solid currentColor !important;
            outline-offset: 2px !important;
        }
        .a11y-on .card-body,
        .a11y-on .dashboard-list-item,
        .a11y-on .notification-card .card-body {
            font-size: 1rem !important;
            line-height: 1.5 !important;
        }
        .design-v2.a11y-on :focus-visible {
            outline-color: #CBD300 !important;
        }

        /* Formular-Select: Bellmatec-Stil */
        .design-v2 .form-select {
            border-color: #CBD300 !important;
            background-color: #F5F5E7 !important;
        }

        /* Forgotten Fach-Highlight */
        .design-v2 .forgotten-card .highlight-cell {
            background-color: #254F7B !important;
            color: #fff !important;
        }

        /* --- V2 Premium UI Enhancements --- */

        /* Glassmorphism Header + Bottom-Bar */
        .design-v2 .top-header-bar {
            background: rgba(3,13,24,0.85) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border-bottom: 1px solid rgba(203,211,0,0.1) !important;
        }
        .design-v2 .bottom-bar {
            background: rgba(3,13,24,0.85) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border-top: 1px solid rgba(203,211,0,0.1) !important;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
        }

        /* Smooth Transitions auf alle interaktiven Elemente */
        .design-v2 .card,
        .design-v2 .notification-card,
        .design-v2 .sem-bubble,
        .design-v2 .hw-item,
        .design-v2 .hw-subject-group,
        .design-v2 .fg-subject-group,
        .design-v2 .btn,
        .design-v2 .badge,
        .design-v2 .nav-tab {
            transition: all 200ms ease !important;
        }

        /* Lime-Glow auf Dashboard-Karten */
        .design-v2 .dashboard-grid .card {
            box-shadow: 0 0 0 1px rgba(203,211,0,0.15), 0 4px 20px rgba(0,0,0,0.3) !important;
            border-color: rgba(203,211,0,0.25) !important;
        }
        .design-v2 .dashboard-grid .card:hover {
            box-shadow: 0 0 0 1px rgba(203,211,0,0.3), 0 8px 30px rgba(203,211,0,0.1), 0 4px 20px rgba(0,0,0,0.3) !important;
            transform: translateY(-2px);
        }

        /* Notification-Cards: Glow + Hover */
        .design-v2 .notification-card {
            box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
            border-color: rgba(5,20,34,0.6) !important;
        }
        .design-v2 .notification-card:hover {
            box-shadow: 0 4px 20px rgba(203,211,0,0.08), 0 2px 12px rgba(0,0,0,0.3) !important;
            transform: translateY(-1px);
        }

        /* Semester-Blasen: dezenter Glow */
        .design-v2 .sem-bubble {
            box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
        }
        .design-v2 .sem-bubble:hover {
            box-shadow: 0 4px 24px rgba(203,211,0,0.08), 0 2px 16px rgba(0,0,0,0.3) !important;
        }

        /* Homework-Blasen */
        .design-v2 .hw-item {
            box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
        }
        .design-v2 .hw-item:hover {
            box-shadow: 0 4px 20px rgba(203,211,0,0.08), 0 2px 12px rgba(0,0,0,0.3) !important;
            transform: translateY(-1px);
        }

        /* Buttons: lime Glow auf Hover */
        .design-v2 #btn-mark-all-read:hover,
        .design-v2 [data-bs-target="#absence-report-modal"]:hover,
        .design-v2 .btn-primary:hover {
            box-shadow: 0 0 16px rgba(203,211,0,0.3) !important;
        }

        /* Header-Buttons: Glow */
        .design-v2 .header-logout-btn:hover,
        .design-v2 .header-personal-btn:hover {
            box-shadow: 0 0 12px rgba(203,211,0,0.25) !important;
        }

        /* Bottom-Bar Active: dezenter Glow unter aktivem Icon */
        .design-v2 .bottom-bar .nav-tab.active {
            text-shadow: 0 0 8px rgba(203,211,0,0.4) !important;
        }

        /* Dashboard-Grid: mehr Abstand auf dunkel */
        .design-v2 .dashboard-grid {
            gap: 16px !important;
        }

        /* Kalender Custom-Liste: mehr Abstand */
        .design-v2 .cal-custom-list {
            gap: 12px !important;
        }
        .design-v2 .cal-custom-list .notification-card {
            box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
        }

        /* Badge-Stat Filter: leichte Glasmorphism */
        .design-v2 .badge-stat {
            backdrop-filter: blur(4px) !important;
            -webkit-backdrop-filter: blur(4px) !important;
        }

        /* Scroll-Verhalten: smooth */
        .design-v2 .main-content-area { scroll-behavior: smooth; }

        /* Nav Unread Dot: Glow-Effekt */
        .design-v2 .nav-unread-dot {
            box-shadow: 0 0 6px rgba(203,211,0,0.6) !important;
        }

        /* Postfach Unread Badge: Glow */
        .design-v2 .messages-unread-badge {
            box-shadow: 0 0 8px rgba(203,211,0,0.3) !important;
        }

        /* Modals: Premium Schatten */
        .design-v2 .modal-content {
            box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(203,211,0,0.15) !important;
        }

        /* Vergessen-Tabelle: Schatten */
        .design-v2 .fg-subject-group {
            box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
        }

        /* Header-Title in V2: lime Akzent */
        .design-v2 .header-title { color: #CBD300 !important; }

        /* Scroll-Animationen (beide Versionen) */
        .v2-animate {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 400ms ease, transform 400ms ease;
        }
        .v2-animate.v2-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- V2 UX: Quick-Stats Badges an Bottom-Bar --- */
        .v2-nav-badge {
            display: none;
            position: absolute;
            top: 2px;
            right: 50%;
            transform: translateX(16px);
            background: #CBD300;
            color: #051422;
            font-size: 0.5rem;
            font-weight: 700;
            border-radius: 8px;
            padding: 0 4px;
            min-width: 14px;
            text-align: center;
            line-height: 14px;
            height: 14px;
        }
        .design-v2 .v2-nav-badge { display: block; }
        .design-v1 .v2-nav-badge { display: none !important; }

        /* --- V2 UX: Fortschrittsbalken Noten --- */
        .v2-semester-progress {
            display: block;
            height: 4px;
            background: rgba(27,42,74,0.1);
            border-radius: 2px;
            margin: 0;
            overflow: hidden;
        }
        .v2-semester-progress-bar {
            height: 100%;
            background: var(--ci-primary);
            border-radius: 2px;
            transition: width 600ms ease;
        }
        .design-v2 .v2-semester-progress { background: rgba(203,211,0,0.15); }
        .design-v2 .v2-semester-progress-bar { background: #CBD300; }

        /* --- V2 UX: Offline-Indikator --- */
        .v2-offline-bar {
            display: none;
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            z-index: 1020;
            background: #B71C1C;
            color: #fff;
            text-align: center;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 4px;
        }
        .design-v2 .v2-offline-bar.v2-offline-show { display: block; }
        .design-v1 .v2-offline-bar.v2-offline-show { display: block; }

        /* --- V2 UX: Leer-Zustände --- */
        .design-v2 .v2-empty-state {
            text-align: center;
            padding: 24px 16px;
            color: rgba(224,232,240,0.5);
        }
        .design-v2 .v2-empty-state i {
            font-size: 2rem;
            display: block;
            margin-bottom: 8px;
            color: rgba(203,211,0,0.4);
        }

        /* Page-Transitions (beide Versionen) */
        .main-content-area {
            animation: v2-page-in 300ms ease;
        }
        .webinfo-account-container,
        .webinfo-period-container {
            animation: v2-page-in 300ms ease;
        }
        @keyframes v2-page-in {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* V2: Tagesübersicht dunkel + Glasmorphism */
        .design-v2 .v2-daily-box {
            background: rgba(5,20,34,0.6) !important;
            border-color: rgba(203,211,0,0.15) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .design-v2 .v2-daily-greeting { color: #E0E8F0 !important; }
        .design-v2 .card-body > .text-center.text-muted:only-child {
            background: linear-gradient(90deg, rgba(203,211,0,0.05) 25%, rgba(203,211,0,0.1) 50%, rgba(203,211,0,0.05) 75%) !important;
        }
        .design-v2 .v2-daily-stat { color: rgba(224,232,240,0.7) !important; }
        .design-v2 .v2-daily-stat .v2-stat-count { color: #CBD300 !important; }

        /* Dashboard Karten-Reihenfolge wird per JS gesetzt (_applyCardOrder) */

        /* V2: Eckiges Design — alle Rundungen auf 4px */
        .design-v2 .card,
        .design-v2 .dashboard-grid .card,
        .design-v2 .notification-card,
        .design-v2 .sem-bubble,
        .design-v2 .hw-item,
        .design-v2 .hw-subject-group,
        .design-v2 .fg-subject-group,
        .design-v2 .fg-header-row,
        .design-v2 .fg-total-row,
        .design-v2 .v2-opt-card,
        .design-v2 .v2-daily-box,
        .design-v2 .modal-content,
        .design-v2 .cal-custom-list .notification-card {
            border-radius: 4px !important;
        }
        .design-v2 .card-header {
            border-radius: 0 !important;
        }
        .design-v2 .btn,
        .design-v2 .badge,
        .design-v2 .badge-stat,
        .design-v2 .cal-view-btn,
        .design-v2 .child-tabs .child-tab,
        .design-v2 .header-logout-btn,
        .design-v2 .header-personal-btn,
        .design-v2 #cal-today-btn,
        .design-v2 #btn-mark-all-read,
        .design-v2 .sem-btn-area .btn,
        .design-v2 .lps-tab {
            border-radius: 4px !important;
        }
        .design-v2 .nav-unread-dot,
        .design-v2 .nav-grades-dot {
            border-radius: 50% !important; /* Dots bleiben rund */
        }
        .design-v2 .fc .fc-toolbar {
            border-radius: 4px !important;
        }
        .design-v2 #msg-delete-confirm-modal .modal-content {
            border-radius: 4px !important;
        }

        /* V2: Aurora UI — Mesh-Gradient Hintergrund (heller) + Glasmorphism-Karten */
        .design-v2 .main-content-area,
        .design-v2 .webinfo-account-container,
        .design-v2 .webinfo-period-container {
            background:
                radial-gradient(ellipse at 20% 15%, rgba(203,211,0,0.12) 0%, transparent 45%),
                radial-gradient(ellipse at 80% 10%, rgba(184,212,48,0.1) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 70%, rgba(30,60,90,0.3) 0%, transparent 50%),
                radial-gradient(ellipse at 90% 85%, rgba(203,211,0,0.06) 0%, transparent 40%),
                #1B2A4A !important;
            background-attachment: fixed !important;
        }

        /* Aurora: Karten als Glasmorphism */
        .design-v2 .dashboard-grid .card {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(203,211,0,0.12) !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
        }
        .design-v2 .dashboard-grid .card:hover {
            border-color: rgba(203,211,0,0.25) !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(203,211,0,0.06) !important;
        }
        .design-v2 .dashboard-grid .card .card-header {
            background: rgba(203,211,0,0.08) !important;
            border-bottom: 1px solid rgba(203,211,0,0.08) !important;
            backdrop-filter: none !important;
        }
        .design-v2 .dashboard-grid .card .card-body {
            background: transparent !important;
            color: #E0E8F0 !important;
        }
        .design-v2 .dashboard-grid .card .card-body * {
            color: inherit;
        }
        .design-v2 .dashboard-grades-table tbody td {
            color: #E0E8F0 !important;
        }
        .design-v2 .dashboard-grade-value {
            color: #E0E8F0 !important;
        }
        .design-v2 .grade-bad { color: #EF5350 !important; }
        .design-v2 .grade-warning { color: #FFA726 !important; }
        .design-v2 .dashboard-grid .card .card-footer {
            background: transparent !important;
            border-top: 1px solid rgba(203,211,0,0.06) !important;
        }

        /* Aurora: Notification-Cards (Postfach, Kalender) */
        .design-v2 .notification-card {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(203,211,0,0.12) !important;
        }
        .design-v2 .notification-card:hover {
            border-color: rgba(203,211,0,0.2) !important;
        }

        /* Aurora: Semester-Blasen */
        .design-v2 .sem-bubble {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(203,211,0,0.12) !important;
        }

        /* Aurora: Homework/Forgotten Blasen */
        .design-v2 .hw-item {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(203,211,0,0.12) !important;
        }
        .design-v2 .hw-subject-group {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(203,211,0,0.12) !important;
        }

        /* Aurora: Optionale Karten */
        .design-v2 .v2-opt-card {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(203,211,0,0.12) !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
        }

        /* Aurora: Tagesübersicht */
        .design-v2 .v2-daily-box {
            background: rgba(5,20,34,0.4) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(203,211,0,0.1) !important;
        }

        /* Aurora: Modals */
        .design-v2 .modal-content {
            background: rgba(20,40,65,0.9) !important;
            backdrop-filter: blur(24px) !important;
            -webkit-backdrop-filter: blur(24px) !important;
            border: 1px solid rgba(203,211,0,0.15) !important;
        }

        /* Aurora: Vergessen-Tabelle */
        .design-v2 .fg-subject-group {
            background: rgba(20,40,65,0.55) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(203,211,0,0.12) !important;
        }

        /* Tagesübersicht (beide Versionen) */
        #v2-daily-summary { display: block !important; width: 100%; }
        .dashboard-grid #v2-daily-summary { grid-column: 1 / -1; }
        .v2-daily-box {
            background: var(--ci-bg);
            border: 2px solid var(--ci-secondary);
            border-radius: 22px;
            padding: 12px 16px;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .v2-daily-greeting {
            font-size: 1rem;
            font-weight: 600;
            color: var(--ci-secondary);
        }
        .v2-daily-stats {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .v2-daily-stat {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.78rem;
            color: var(--ci-text-muted);
        }
        .v2-daily-stat .v2-stat-count {
            font-weight: 700;
            color: var(--ci-secondary);
            font-size: 1rem;
        }

        /* Skeleton-Screens (nur auf Lade-Platzhalter mit "Laden..." Text) */
        .card-body > .text-center.text-muted:only-child {
            color: transparent !important;
            background: linear-gradient(90deg, rgba(27,42,74,0.04) 25%, rgba(27,42,74,0.08) 50%, rgba(27,42,74,0.04) 75%) !important;
            background-size: 200% 100% !important;
            animation: v2-skeleton 1.5s ease infinite !important;
            border-radius: 8px !important;
            min-height: 20px;
        }
        @keyframes v2-skeleton {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* V2: Kalender Heute-Button */
        /* V2: Noten-Dot in Bottom-Bar (V1: versteckt, V2: sichtbar wenn JS aktiviert) */
        .nav-grades-dot {
            display: none;
            position: absolute;
            top: 6px;
            right: 50%;
            transform: translateX(12px);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #CBD300;
        }
        .design-v2 .nav-grades-dot {
            box-shadow: 0 0 6px rgba(203,211,0,0.6);
        }
        /* V1: Noten-Dot auch sichtbar (rot wie Postfach-Dot) */
        .design-v1 .nav-grades-dot {
            background-color: #EF4444 !important;
        }

        /* Kalender Heute-Button (beide Versionen) */
        #cal-today-btn {
            display: inline-flex !important;
            background-color: var(--ci-secondary);
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 4px 10px;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
        }
        .design-v2 #cal-today-btn {
            background-color: #CBD300 !important;
            color: #051422 !important;
        }