/* frontend/app/app.css - Stile der App (frueher inline in index.html) */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
        
        /* Login Styles */
        .login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        .login-box { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 400px; width: 100%; }
        .login-box h2 { text-align: center; margin-bottom: 30px; color: #333; }
        .login-box input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
        .login-box button { width: 100%; padding: 12px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 10px; }
        .login-box button:hover { opacity: 0.9; }
        .message { margin-top: 15px; padding: 10px; border-radius: 5px; text-align: center; }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

        /* Main App Styles */
        .main-app { display: none; min-height: 100vh; background: #f5f5f5; }
        .header { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
        .header-brand { display: flex; align-items: center; gap: 1rem; }
        .header-logo { width: 50px; height: 50px; }
        .header-title { font-family: 'Pacifico', cursive; font-size: 2rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); margin: 0; }
        /* Umbrechen statt ueberlaufen: auf Tablet-/Beamerbreite schob die
           Menueleiste sonst die ganze Seite seitlich aus dem Bild. */
        .header { flex-wrap: wrap; gap: 0.75rem 1rem; }
        .nav-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; flex: 1 1 0; min-width: 0; }
        /* Unter 1400px passt die Leiste (v. a. bei Lehrkraeften mit Klassen-
           auswahl) nicht neben Logo und Benutzerbereich: eigene Zeile ueber
           die volle Breite statt vierfach gestapelter Knoepfe. */
        @media (min-width: 768px) and (max-width: 1399px) {
            .nav-buttons { order: 2; flex-basis: 100%; }
        }
        .nav-buttons button { background: rgba(255,255,255,0.2); color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; }
        .nav-buttons button:hover, .nav-buttons button.active { background: rgba(255,255,255,0.3); }
        .content { padding: 2rem; max-width: 1200px; margin: 0 auto; }
        .section-content { display: none; }
        .section-content.active { display: block; }
        .card { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 2rem; }
        .btn { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 5px; cursor: pointer; margin: 0.5rem; }
        .btn:hover { opacity: 0.9; }
        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); }
        .btn-secondary { background: #6c757d; }

        /* Toggle-Switch für Grammatik-Klassen-Einstellungen */
        .grammar-toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
        .grammar-toggle-switch input { opacity:0; width:0; height:0; }
        .grammar-toggle-slider {
            position:absolute; cursor:pointer; inset:0;
            background:#ccc; border-radius:24px; transition:.25s;
        }
        .grammar-toggle-slider:before {
            content:""; position:absolute;
            width:18px; height:18px; left:3px; bottom:3px;
            background:white; border-radius:50%; transition:.25s;
        }
        .grammar-toggle-switch input:checked + .grammar-toggle-slider { background:#27ae60; }
        .grammar-toggle-switch input:checked + .grammar-toggle-slider:before { transform:translateX(20px); }
        .btn-success { background: #28a745; }
        .btn-danger { background: #dc3545; }
        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        .stat-card { background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; }
        .stat-number { font-size: 2rem; font-weight: bold; color: #667eea; }
        .stat-label { color: #666; margin-top: 0.5rem; }
        .game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; }
        /* ---- Abschlussbildschirm (alle Spiele) ---- */
        .ng-endscreen { position: absolute; inset: 0; display: flex; align-items: center;
                        justify-content: center; padding: 1rem; z-index: 50;
                        background: rgba(20, 24, 48, 0.82); backdrop-filter: blur(3px);
                        animation: ngFadeIn 0.25s ease; }
        @keyframes ngFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes ngPop { 0% { transform: scale(0.85); opacity: 0; }
                           70% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }
        .ng-endcard { background: white; border-radius: 20px; padding: 1.75rem 1.5rem;
                      width: min(420px, 92vw); max-height: 92%; overflow-y: auto; text-align: center;
                      box-shadow: 0 18px 50px rgba(0,0,0,0.35); animation: ngPop 0.35s ease; }
        .ng-end-emoji { font-size: clamp(3rem, 14vw, 4.5rem); line-height: 1; }
        .ng-end-title { font-size: clamp(1.4rem, 6vw, 1.9rem); font-weight: 700; color: #333;
                        margin: 0.35rem 0 0.75rem; }
        .ng-end-score { font-size: clamp(2.2rem, 11vw, 3.2rem); font-weight: 800; color: #667eea;
                        line-height: 1.1; }
        .ng-end-score small { display: block; font-size: clamp(0.85rem, 3.6vw, 1rem);
                              font-weight: 600; color: #888; margin-top: 0.25rem; }
        .ng-end-praise { margin: 1rem 0 0.35rem; font-size: clamp(1rem, 4vw, 1.15rem);
                         font-weight: 600; color: #444; }
        .ng-end-detail { font-size: clamp(0.85rem, 3.4vw, 0.95rem); color: #888; }
        .ng-end-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap;
                          justify-content: center; margin-top: 1.5rem; }
        .ng-end-buttons button { flex: 1 1 140px; min-height: 50px; border-radius: 12px;
                                 border: none; font-size: 1rem; font-weight: 600; cursor: pointer;
                                 touch-action: manipulation; }
        .ng-end-again { background: #667eea; color: white; }
        .ng-end-close { background: #e9ecef; color: #444; }

        /* ---- Neue Spiele: Blitz, Tempo, Wortsalat, Hoerquiz, Tipp-Meister ---- */
        .ng-stage { text-align: center; padding: 0.5rem 0 1rem; }
        .ng-prompt { font-size: clamp(1.1rem, 4vw, 1.4rem); color: #555; margin-bottom: 0.35rem; }
        .ng-word { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700; color: #667eea; word-break: break-word; }
        .ng-flash { display: flex; align-items: center; justify-content: center;
                    min-height: clamp(90px, 22vw, 130px); margin: 0.75rem auto; max-width: 560px;
                    border-radius: 16px; background: linear-gradient(135deg, #1f2a5a, #3b4c93);
                    color: white; font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 700;
                    letter-spacing: 0.04em; box-shadow: inset 0 0 40px rgba(0,0,0,0.35); }
        .ng-flash.is-hidden { color: transparent; text-shadow: none; }
        .ng-flash .ng-dots { font-size: clamp(1.2rem, 5vw, 1.8rem); opacity: 0.55; letter-spacing: 0.3em; }
        .ng-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                      gap: 0.6rem; max-width: 620px; margin: 0 auto; }
        .ng-option { min-height: 52px; padding: 0.8rem 0.6rem; font-size: clamp(0.95rem, 3.6vw, 1.15rem);
                     font-weight: 600; border: 2px solid #667eea; background: white; color: #4a54c4;
                     border-radius: 12px; cursor: pointer; transition: transform 0.12s, background 0.2s;
                     touch-action: manipulation; word-break: break-word; }
        .ng-option:active { transform: scale(0.97); }
        .ng-option.correct { background: #28a745; border-color: #28a745; color: white; }
        .ng-option.wrong { background: #dc3545; border-color: #dc3545; color: white; }
        .ng-option:disabled { cursor: default; opacity: 0.85; }
        .ng-judge { display: flex; gap: 1rem; justify-content: center; max-width: 480px; margin: 0 auto; }
        .ng-judge button { flex: 1; min-height: 72px; font-size: clamp(1.6rem, 7vw, 2.2rem);
                           border-radius: 16px; border: none; cursor: pointer; color: white;
                           touch-action: manipulation; transition: transform 0.12s; }
        .ng-judge button:active { transform: scale(0.96); }
        .ng-yes { background: #28a745; }
        .ng-no { background: #dc3545; }
        .ng-pair { font-size: clamp(1.3rem, 5.5vw, 1.9rem); font-weight: 700; margin: 0.75rem 0 1.25rem;
                   color: #333; word-break: break-word; }
        .ng-pair .ng-arrow { color: #999; margin: 0 0.5rem; }
        .ng-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
                    max-width: 560px; margin: 0 auto; }
        .ng-tile { min-width: 46px; min-height: 52px; padding: 0.5rem 0.7rem;
                   font-size: clamp(1.1rem, 4.5vw, 1.5rem); font-weight: 700;
                   border-radius: 10px; border: 2px solid #d9b978; cursor: pointer;
                   background: linear-gradient(180deg, #fff6e0, #f2d9a4); color: #8a5a1e;
                   touch-action: manipulation; transition: transform 0.12s; }
        .ng-tile:active { transform: scale(0.94); }
        .ng-tile.used { visibility: hidden; }
        .ng-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
                    min-height: 62px; padding: 0.5rem; margin: 0 auto 1rem; max-width: 560px;
                    background: #f4f6fb; border-radius: 12px; border: 2px dashed #c3cbe4; }
        .ng-slots.shake { animation: ngShake 0.35s; }
        @keyframes ngShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); }
                             75% { transform: translateX(8px); } }
        .ng-feedback { min-height: 1.8rem; margin-top: 0.75rem; font-weight: 600;
                       font-size: clamp(0.95rem, 3.6vw, 1.1rem); }
        .ng-feedback.ok { color: #1e7a3f; }
        .ng-feedback.no { color: #b32430; }
        .ng-input { width: min(420px, 90%); padding: 0.85rem 1rem; font-size: clamp(1rem, 4vw, 1.3rem);
                    border: 2px solid #667eea; border-radius: 12px; text-align: center; }
        .ng-speak { min-height: 64px; min-width: 64px; font-size: 1.8rem; border-radius: 50%;
                    border: none; background: #667eea; color: white; cursor: pointer;
                    touch-action: manipulation; }
        .ng-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

        /* Mindestgroesse fuer Touch-Ziele (Daumen brauchen ~44 px) */
        .hangman-key { min-height: 44px; min-width: 36px; touch-action: manipulation; }
        .match-word { min-height: 48px; touch-action: manipulation; }
        .quiz-option { min-height: 48px; touch-action: manipulation; }
        .soup-bowl-wrap { position: relative; width: min(600px, 94vw); aspect-ratio: 3 / 2; max-height: 46vh; margin: 0 auto; }
        .soup-bowl-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }

        .game-card { background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; cursor: pointer; transition: transform 0.3s; }
        .game-card:hover { transform: translateY(-5px); }
        .game-icon { font-size: 3rem; margin-bottom: 1rem; }

        /* Game Specific Styles */
        .game-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; overflow: hidden; }
        .game-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 1.5rem; border-radius: 15px; width: 1000px !important; height: 700px !important; max-width: 95vw; max-height: 95vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }

        /* Memory Layout Tweaks */
        #memory-game .game-content { width: min(960px, 95vw); height: auto; max-height: 90vh; }
        .game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
        .close-game { background: #dc3545; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; }

        /* Quiz Styles */
        .quiz-question { font-size: 1.5rem; margin-bottom: 2rem; text-align: center; }
        .quiz-options { display: grid; gap: 1rem; margin-bottom: 2rem; }
        .quiz-option { padding: 1rem; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.3s; }
        .quiz-option:hover { border-color: #667eea; background: #f8f9fa; }
        .quiz-option.correct { border-color: #28a745; background: #d4edda; }
        .quiz-option.wrong { border-color: #dc3545; background: #f8d7da; }
        .quiz-timer { font-size: 1.2rem; font-weight: bold; color: #dc3545; }
        .quiz-progress { margin-bottom: 1rem; }
        .progress-bar { width: 100%; height: 20px; background: #e9ecef; border-radius: 10px; overflow: hidden; }
        .progress-fill { height: 100%; background: linear-gradient(135deg, #667eea, #764ba2); transition: width 0.3s; }

        /* Memory Styles */
        .memory-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            width: min(640px, 90%);
            aspect-ratio: 1;
            max-height: calc(90vh - 220px);
            margin: 0 auto;
        }
        .memory-card {
            aspect-ratio: 1;
            background: #667eea;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            transition: all 0.3s;
            font-size: clamp(10px, 1.2vw, 15px);
            line-height: 1.2;
            padding: 6px;
            text-align: center;
            word-break: break-word;
        }
        .memory-card.flipped { background: white; color: #333; border: 2px solid #667eea; }
        .memory-card.matched { background: #28a745; color: white; }
        .memory-stats { display: flex; justify-content: space-between; margin-bottom: 1rem; }

        /* Word Search Styles */
        .word-search-container { display: flex; gap: 2rem; }
        /* Fluid statt 450 px fest: auf dem Handy skaliert das Gitter mit der
           Bildschirmbreite, die Zellen bleiben quadratisch (aspect-ratio). */
        .word-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; width: min(450px, 96vw); max-width: 100%; margin: 0 auto; touch-action: manipulation; }
        .word-cell { width: 100%; aspect-ratio: 1; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: clamp(9px, 2.2vw, 13px); font-weight: bold; user-select: none; -webkit-user-select: none; }
        .word-cell.found { background: #28a745; color: white; }
        .word-cell.selected { background: #ffc107 !important; color: #333 !important; border: 2px solid #ff8c00 !important; }
        .word-list { flex: 1; }
        .word-item { padding: 0.5rem; margin: 0.25rem 0; border: 1px solid #ddd; border-radius: 4px; }
        .word-item.found { background: #28a745; color: white; }

        /* Car Race Styles */
        .race-track { position: relative; width: 100%; height: min(400px, 50vh); min-height: 240px; background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 100%); border-radius: 10px; overflow: hidden; }
        .race-lanes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; }
        .race-lane { flex: 1; border-right: 2px dashed white; position: relative; cursor: pointer; transition: background 0.2s; }
        .race-lane:hover { background: rgba(255, 255, 255, 0.1); }
        .race-lane:last-child { border-right: none; }
        .race-car { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; font-size: 60px; display: flex; align-items: center; justify-content: center; transition: left 0.3s; }
        .race-word { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: white; padding: 0.5rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); animation: moveDown 4s linear infinite; }
        @keyframes moveDown { from { top: -50px; } to { top: 420px; } }
        .race-controls { margin-top: 1rem; display: none; justify-content: center; gap: 1rem; }
        .race-question { text-align: center; margin-bottom: 1rem; font-size: 1.2rem; font-weight: bold; }

        /* Balloon Game Styles */
        /* Frueher 800x600 mit !important - auf dem Handy ragte die Haelfte
           aus dem Bild. Jetzt haelt die Flaeche ihr Seitenverhaeltnis und
           passt sich Breite und Hoehe des Geraets an. */
        .balloon-container { position: relative; width: min(800px, 96vw); max-width: 100%; margin: 0 auto; aspect-ratio: 4 / 3; max-height: 60vh; background: linear-gradient(to bottom, #87CEEB, #E0F6FF); overflow: hidden; border-radius: 12px; touch-action: manipulation; }
        .balloon { position: absolute; width: clamp(44px, 9vw, 58px); height: clamp(57px, 11.7vw, 75px); z-index: 10; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: clamp(10px, 2.4vw, 13px); text-align: center; padding: 3px; animation: floatUp 6s linear infinite; box-shadow: inset -6px -6px 12px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.2); }
        @keyframes floatUp { from { bottom: -50px; } to { bottom: 750px; } }
        .balloon.red { background: #dc3545; }
        .balloon.blue { background: #007bff; }
        .balloon.green { background: #28a745; }
        .balloon.yellow { background: #ffc107; color: #333; }
        .balloon.purple { background: #6f42c1; }
        .balloon-question { text-align: center; margin-bottom: 1rem; font-size: 1.2rem; font-weight: bold; }
        .balloon-score { text-align: center; margin-bottom: 1rem; }

        /* Theater Game Styles */
        .theater-stage {
            height: 280px !important;
            min-height: 280px !important;
            max-height: 280px !important;
            overflow: visible !important;
        }
        .theater-character {
            flex-shrink: 0;
        }

        table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
        th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #ddd; }
        th { background: #f8f9fa; font-weight: 600; }
        td { color: #000; }
        .vocabulary-card { background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 1rem; }
        .vocabulary-front { font-size: 1.5rem; font-weight: bold; text-align: center; padding: 2rem; }
        .vocabulary-back { font-size: 1.2rem; text-align: center; padding: 1rem; color: #666; }
        .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
        .pagination button { padding: 0.5rem 1rem; border: 1px solid #ddd; background: white; cursor: pointer; }
        .pagination button.active { background: #667eea; color: white; }
        .lernaufgaben-item { background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 1rem; border-left: 4px solid #667eea; }
        .lernaufgaben-due { color: #dc3545; font-weight: bold; }
        .lernaufgaben-completed { color: #28a745; font-weight: bold; }
    
        /* Password Change Modal Styles */
        .password-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; }
        .password-modal-inner { background: white; padding: 40px; border-radius: 15px; max-width: 500px; width: 90%; }
        .password-modal h2 { margin-bottom: 20px; color: #333; }
        .password-modal p { margin-bottom: 20px; color: #666; }
        .password-modal .form-field { margin-bottom: 15px; }
        .password-modal .form-field.last { margin-bottom: 20px; }
        .password-modal label { display: block; margin-bottom: 5px; font-weight: 500; }
        .password-modal input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
        .password-error { margin-bottom: 15px; padding: 10px; border-radius: 5px; display: none; }
        .submit-btn-full { width: 100%; padding: 12px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
        
        /* Utility Classes */
        .flex-row { display: flex; align-items: center; gap: 1rem; }
        .flex-wrap { display: flex; gap: 1rem; flex-wrap: wrap; }
        .flex-between { display: flex; justify-content: space-between; align-items: center; }
        .mt-1 { margin-top: 1rem; }
        .mt-2 { margin-top: 2rem; }
        .mb-1 { margin-bottom: 1rem; }
        .mb-2 { margin-bottom: 2rem; }
        .text-center { text-align: center; }
        .text-small { font-size: 0.9rem; }
        .text-muted { color: #666; }
        .hidden { display: none; }
        .block { display: block; }
        .w-full { width: 100%; }
        .p-half { padding: 0.5rem; }
        .border-rounded { border: 1px solid #ddd; border-radius: 5px; }
        .bg-light { background: #f8f9fa; }
        .border-top { border-top: 1px solid #ddd; }
        .pt-1 { padding-top: 1rem; }
        .p-1 { padding: 1rem; }
        .font-bold { font-weight: 600; }
        .font-small { font-size: 0.9rem; }
        .font-large { font-size: 1.2rem; }
        .color-primary { color: #667eea; }
        .color-dark { color: #333; }
        .border-radius-8 { border-radius: 8px; }
        .border-radius-4 { border-radius: 4px; }
        .padding-input { padding: 0.4rem; }
        .padding-input-sm { padding: 0.5rem; }
        .cursor-pointer { cursor: pointer; }
        .ml-auto { margin-left: auto; }
        .ml-1 { margin-left: 1rem; }
        .gap-sm { gap: 0.5rem; }
        .select-input { padding: 0.5rem; border-radius: 5px; border: 1px solid #ddd; background: white; cursor: pointer; }
        .flex-col-wrap { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
        .font-fw-600 { font-weight: 600; }
        .language-selector-container { display: none; margin-top: 1rem; padding: 1rem; background: #f8f9fa; border-radius: 8px; }
        .query-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ddd; }
        .query-label { font-weight: 600; color: #333; display: block; margin-bottom: 0.5rem; }
        .query-arrow { font-size: 1.2rem; color: #667eea; }
        .query-control { padding: 0.4rem; border: 1px solid #ddd; border-radius: 4px; }
        .query-mode { padding: 0.4rem; border: 1px solid #ddd; border-radius: 4px; font-weight: 600; }
        .label-bold { font-weight: 600; color: #333; }
        .flashcard-container { display: none; margin-top: 2rem; }
        .flashcard-progress { font-size: 1.1rem; font-weight: bold; }
        .flashcard-card { min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .flashcard-front { font-size: 2.5rem; font-weight: bold; text-align: center; }
        .flashcard-back { display: none; text-align: center; }
        .flashcard-back-main { font-size: 2rem; font-weight: bold; margin-bottom: 1rem; }
        .flashcard-back-sub { font-size: 1.2rem; margin-bottom: 0.5rem; }
        .flashcard-back-note { font-size: 0.9rem; opacity: 0.9; margin-top: 1rem; }
        .flashcard-buttons { text-align: center; margin-top: 2rem; }
        .flashcard-reveal { display: block; }
        .flashcard-answers { display: none; }
        .btn-flashcard { font-size: 1.2rem; padding: 1rem 2rem; }
        .btn-flashcard-answer { font-size: 1.1rem; padding: 0.8rem 1.5rem; margin: 0.5rem; }
        .flashcard-mastery-container { text-align: center; margin-top: 1.5rem; }
        .flashcard-mastery { font-size: 0.9rem; color: #666; }
        .writing-container { display: none; margin-top: 2rem; }
        .writing-card { min-height: 400px; padding: 2rem; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .writing-prompt { font-size: 1.2rem; opacity: 0.9; margin-bottom: 1rem; }
        .writing-german { font-size: 2.5rem; font-weight: bold; margin-bottom: 2rem; }
        .writing-input-container { margin-bottom: 1.5rem; }
        .writing-input { font-size: 1.5rem; padding: 1rem; width: 80%; max-width: 500px; border: 3px solid white; border-radius: 10px; text-align: center; }
        .writing-btn-check { font-size: 1.2rem; padding: 1rem 2rem; background: white; color: #11998e; }
        .writing-feedback { margin-top: 2rem; font-size: 1.3rem; min-height: 60px; }
        .writing-correct-answer { display: none; margin-top: 1rem; padding: 1rem; background: rgba(255,255,255,0.2); border-radius: 10px; }
        .writing-correct-label { font-size: 0.9rem; opacity: 0.9; }
        .writing-correct-text { font-size: 1.5rem; font-weight: bold; margin-top: 0.5rem; }
        .writing-mastery-container { text-align: center; margin-top: 1.5rem; }
        .writing-mastery { font-size: 1.1rem; color: #666; font-weight: bold; }
        .writing-stats { font-size: 0.9rem; color: #999; margin-top: 0.5rem; }
        .list-container-scroll { max-height: 600px; overflow-y: auto; }
        .lernaufgaben-admin { display: none; }
        .lernaufgaben-form { display: none; margin-top: 2rem; padding: 2rem; background: #f8f9fa; border-radius: 10px; }
        .btn-info { background: #17a2b8; }
        .btn-gray { background: #6c757d; }
        .form-label-small { font-size: 14px; margin-bottom: 5px; display: block; }
        .select-full { width: 100%; margin-bottom: 1rem; padding: 8px; }
        .input-search { width: 100%; margin-bottom: 0.5rem; padding: 8px; }
        .btn-select-group { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
        .btn-small { font-size: 12px; padding: 0.25rem 0.5rem; }
        .vocab-count { align-self: center; font-size: 12px; color: #2196F3; font-weight: bold; }
        .table-container { max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; }
        .table-small { width: 100%; border-collapse: collapse; font-size: 12px; }
        .thead-sticky { position: sticky; top: 0; background: #fff; z-index: 1; }
        .th-cell { padding: 8px; border-bottom: 2px solid #ddd; cursor: pointer; -webkit-user-select: none; user-select: none; }
        .th-center { padding: 8px; border-bottom: 2px solid #ddd; text-align: center; width: 40px; }
        .messages-section { margin-bottom: 2rem; }
        .messages-section-top { margin-top: 2rem; }
        .messages-empty { text-align: center; padding: 2rem; color: #999; display: none; }
        .empty-icon { font-size: 3rem; margin-bottom: 1rem; }
        .flex-row-wrap { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
        .flex-row-wrap-center { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; align-items: center; }
        .btn-archive { background: #95a5a6; }
        .calendar-month-year { font-size: 1.2rem; font-weight: bold; min-width: 200px; text-align: center; }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-top: 1.5rem; }
        .calendar-events { margin-top: 2rem; padding: 1.5rem; background: #f8f9fa; border-radius: 10px; }
        .statistics-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
        .statistics-charts { margin-top: 2rem; }
        .user-form { display: none; margin-top: 2rem; padding: 2rem; background: #f8f9fa; border-radius: 10px; }
        .btn-purple { background: #9c27b0; color: white; }
        .btn-green { background: #4caf50; color: white; }
        .select-hidden { display: none; }
        .select-multi { display: none; height: 120px; }
        .hint-text { color: #666; display: block; margin-top: 0.25rem; }
        .hint-class { display: none; color: #666; margin-top: 0.5rem; }
        .enrollment-year-group { display: none; }
        .users-table { margin-top: 2rem; }
        .mb-2-flex { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center; }
        .input-class-name { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; width: 200px; }
        .class-list { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
        .hr-divider { margin: 2rem 0; border: none; border-top: 1px solid #ddd; }
        .class-filter { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; margin-right: 1rem; min-width: 200px; }
        .file-input-hidden { display: none; }
        .table-full { width: 100%; }
        .search-input { width: 300px; margin-right: 0.5rem; }
        .filter-select { padding: 0.6rem; }
        .filter-select-left { margin-left: 1rem; padding: 0.6rem; }
        .float-right { float: right; }
        .clear-both { clear: both; }
        .th-narrow { width: 40px; }
        .empty-state { display: none; }
        .empty-cell { text-align: center; padding: 3rem; color: #666; }
        .empty-text { font-size: 1.2rem; font-weight: 500; }
        .selected-count { margin-left: 1rem; font-weight: bold; }
        .streak-display { padding: 1rem; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 10px; text-align: center; font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem; }
        .streak-icon { font-size: 2rem; margin-right: 0.5rem; }
        .mastery-summary { display: block; font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.9; }
        .mastery-badge { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 15px; margin: 0.2rem; font-size: 0.85rem; }
        .mastery-new { background: #e74c3c; }
        .mastery-learning { background: #e67e22; }
        .mastery-practiced { background: #f39c12; }
        .mastery-mastered { background: #27ae60; }
        .mastery-perfect { background: #9b59b6; }
        .vocab-mastery-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 0.5rem; }
        .spaced-rep-info { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }
        .spaced-rep-boxes { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 0.5rem; padding: 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; margin-bottom: 1rem; }
        .spaced-box { flex: 1; min-width: 80px; text-align: center; padding: 0.8rem; border-radius: 8px; background: rgba(255,255,255,0.15); box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: all 0.3s ease; }
        .spaced-box:hover { background: rgba(255,255,255,0.25); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
        .spaced-box.active { background: rgba(255,255,255,0.35); border: 2px solid white; }
        .spaced-box-title { font-size: 0.75rem; color: rgba(255,255,255,0.8); margin-bottom: 0.3rem; }
        .spaced-box-count { font-size: 1.5rem; font-weight: bold; color: white; }
        .spaced-box-label { font-size: 0.7rem; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }
        .next-review { font-weight: bold; color: rgba(255,255,255,0.7); }
        .audio-controls { margin-top: 1rem; text-align: center; }
        .audio-btn { font-size: 2rem; padding: 1rem; background: rgba(255,255,255,0.2); border: none; border-radius: 50%; cursor: pointer; margin: 0.5rem; transition: transform 0.2s; }
        .audio-btn:hover { transform: scale(1.1); }
        .recording-indicator { display: none; position: fixed; top: 20px; right: 20px; background: #e74c3c; color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: bold; font-size: 1.1rem; z-index: 1000; box-shadow: 0 4px 12px rgba(231,76,60,0.5); animation: pulse 1.5s infinite; }
        .recording-indicator.active { display: block; }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } }
        .multiple-choice-options { display: grid; gap: 1rem; margin: 2rem 0; }
        .choice-btn { padding: 1.5rem; border: 2px solid white; background: rgba(255,255,255,0.1); color: white; border-radius: 10px; cursor: pointer; font-size: 1.1rem; transition: all 0.3s; }
        .choice-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
        .choice-btn.correct { background: #27ae60; border-color: #27ae60; }
        .choice-btn.wrong { background: #e74c3c; border-color: #e74c3c; }
        .bidirectional-direction { font-size: 1rem; color: rgba(255,255,255,0.8); margin-bottom: 1rem; }
        
        /* Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 8px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #ddd;
        }
        
        .modal-header h2 {
            margin: 0;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #666;
        }
        
        .close-btn:hover {
            color: #333;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        
        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group input[type="datetime-local"],
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .form-group textarea {
            resize: vertical;
        }
        
        .form-actions {
            display: flex;
            gap: 10px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }
        
        .form-actions button {
            flex: 1;
            padding: 12px;
        }

        /* Test-Cards */
        .test-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .test-card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .test-card h4 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .test-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .test-info {
            display: flex;
            gap: 15px;
            margin: 15px 0;
            font-size: 14px;
            color: #666;
        }
        
        .test-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .test-actions button {
            flex: 1;
            padding: 8px;
            font-size: 14px;
        }
        
        .badge {
            background: #28a745;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .btn-danger {
            background: #dc3545;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .btn-danger:hover {
            background: #c82333;
        }

        /* Test Execution Styles */
        .test-execution-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px;
            border-radius: 8px 8px 0 0;
        }
        
        .test-info h2 {
            margin: 0 0 10px 0;
        }
        
        .test-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
        }
        
        .timer {
            font-weight: bold;
            font-size: 18px;
        }
        
        .timer.warning {
            color: #ffc107;
            animation: pulse 1s infinite;
        }
        
        .timer.danger {
            color: #dc3545;
            animation: pulse 0.5s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .progress-text {
            font-weight: 500;
        }
        
        .test-execution-body {
            padding: 30px;
        }
        
        .progress-bar-container {
            margin-bottom: 30px;
        }
        
        .question-container {
            min-height: 300px;
            margin-bottom: 30px;
        }
        
        .question-text {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            color: #333;
            text-align: center;
        }
        
        .answer-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .answer-option {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border: 2px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
        }
        
        .answer-option:hover {
            border-color: #667eea;
            background: #f8f9fa;
        }
        
        .answer-option input[type="radio"] {
            margin-right: 15px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .answer-option label {
            flex: 1;
            cursor: pointer;
            font-size: 18px;
            margin: 0;
        }
        
        .answer-option.selected {
            border-color: #667eea;
            background: #e7f0ff;
        }
        
        .answer-input {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .answer-input input[type="text"] {
            width: 100%;
            padding: 15px;
            font-size: 18px;
            border: 2px solid #ddd;
            border-radius: 8px;
            transition: border-color 0.3s;
        }
        
        .answer-input input[type="text"]:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .test-navigation {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }
        
        .test-navigation button {
            flex: 1;
            max-width: 200px;
        }
        
        /* Test Result Styles */
        .result-summary {
            text-align: center;
            padding: 30px 0;
        }
        
        .result-score {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .score-circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .score-number {
            font-size: 36px;
            font-weight: bold;
            color: white;
        }
        
        .result-text {
            font-size: 20px;
            color: #666;
            margin: 0;
        }
        
        .result-details {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid #ddd;
        }
        
        .result-details h3 {
            margin-bottom: 20px;
            color: #333;
        }
        
        .result-question-item {
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            border-left: 4px solid #ddd;
        }
        
        .result-question-item.correct {
            background: #d4edda;
            border-left-color: #28a745;
        }
        
        .result-question-item.incorrect {
            background: #f8d7da;
            border-left-color: #dc3545;
        }
        
        .result-question-text {
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .result-answer {
            margin: 5px 0;
            font-size: 14px;
        }
        
        .result-answer.user-answer {
            color: #666;
        }
        
        .result-answer.correct-answer {
            color: #28a745;
            font-weight: 500;
        }
        
        .result-actions {
            margin-top: 30px;
            text-align: center;
        }
        
        /* Test Card Styles */
        .test-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 15px;
            border-left: 4px solid #667eea;
        }
        
        .test-card.expired {
            border-left-color: #dc3545;
            opacity: 0.7;
        }
        
        .test-card.completed {
            border-left-color: #28a745;
        }
        
        .test-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .test-card-title {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }
        
        .test-card-body {
            margin-bottom: 15px;
        }
        
        .test-card-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #666;
        }
        
        .test-card-actions {
            display: flex;
            gap: 10px;
        }

        /* Statistics Modal */
        .statistics-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 10px;
        }
        
        .statistics-section h3 {
            margin-top: 0;
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .stat-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-card .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #667eea;
            margin: 10px 0;
        }
        
        .stat-card .stat-label {
            font-size: 14px;
            color: #666;
        }
        
        /* Leaderboard */
        .leaderboard-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .leaderboard-table th,
        .leaderboard-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .leaderboard-table th {
            background: #667eea;
            color: white;
            font-weight: bold;
        }
        
        .leaderboard-table tr:hover {
            background: #f5f5f5;
        }
        
        .rank-badge {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            font-weight: bold;
            color: white;
        }
        
        .rank-1 { background: #ffd700; color: #333; }
        .rank-2 { background: #c0c0c0; color: #333; }
        .rank-3 { background: #cd7f32; color: white; }
        .rank-other { background: #999; }

        /* Badges */
        .badge-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 1rem 0; }
        .badge-card { background: white; border: 1px solid #e0e0e0; border-radius: 10px; padding: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.06); display: flex; gap: 10px; align-items: center; }
        .badge-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, #667eea, #764ba2); }
        .badge-meta { flex: 1; min-width: 0; }
        .badge-meta h4 { margin: 0; font-size: 14px; color: #333; }
        .badge-meta p { margin: 3px 0 0 0; font-size: 12px; color: #666; line-height: 1.3; }
        
        /* Charts */
        .chart-container {
            margin-top: 20px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .bar-chart {
            display: flex;
            align-items: flex-end;
            height: 300px;
            gap: 10px;
            padding: 20px;
            border-left: 2px solid #333;
            border-bottom: 2px solid #333;
        }
        
        .bar {
            flex: 1;
            background: linear-gradient(to top, #667eea, #764ba2);
            border-radius: 5px 5px 0 0;
            position: relative;
            min-width: 30px;
            transition: all 0.3s;
        }
        
        .bar:hover {
            opacity: 0.8;
            transform: translateY(-5px);
        }
        
        .bar-label {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            white-space: nowrap;
        }
        
        .bar-value {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            font-size: 14px;
        }
        
        .pie-chart {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            margin: 20px auto;
            position: relative;
        }
        
        .pie-legend {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 3px;
        }
        
        /* Question Analysis */
        .question-analysis {
            margin-top: 15px;
        }
        
        .question-item {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .question-header {
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .difficulty-bar {
            height: 30px;
            background: #f0f0f0;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }
        
        .difficulty-fill {
            height: 100%;
            transition: width 0.5s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .difficulty-easy { background: #4caf50; }
        .difficulty-medium { background: #ff9800; }
        .difficulty-hard { background: #f44336; }
        
        .difficulty-label {
            margin-top: 5px;
            font-size: 12px;
            color: #666;
        }
        
        /* Student Comparison Table */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .comparison-table th,
        .comparison-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .comparison-table th {
            background: #667eea;
            color: white;
            cursor: pointer;
                -webkit-user-select: none;
            user-select: none;
        }
        
        .comparison-table th:hover {
            background: #5568d3;
        }
        
        .comparison-table tr:hover {
            background: #f5f5f5;
        }
        
        .score-good { background: #e8f5e9; }
        .score-medium { background: #fff3e0; }
        .score-bad { background: #ffebee; }

        /* ========== PROFESSIONAL RESPONSIVE DESIGN V7.24 ========== */

        /* Mobile Portrait - NO SCROLLING */
        @media (max-width: 767px) and (orientation: portrait) {
            /* Full viewport usage */
            html, body {
                width: 100vw;
                height: 100vh;
                overflow-x: hidden;
                font-size: 14px;
            }
            
            /* Header - Ultra Compact */
            .header {
                padding: 0.5rem 1rem;
                flex-direction: column;
                flex-wrap: nowrap; /* Spalte: kein Umbruch in eine zweite Spalte */
                gap: 0.5rem;
            }
            
            .header h1 {
                font-size: 1.2rem !important;
                margin: 0;
            }
            
            .user-info {
                font-size: 0.75rem;
            }
            
            /* Navigation - Horizontal Scroll */
            .nav-buttons {
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-start;
                gap: 0.5rem;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                padding-bottom: 0.25rem;
            }
            
            .nav-buttons::-webkit-scrollbar {
                display: none; /* Chrome, Safari */
            }
            
            .nav-buttons button {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
                flex-shrink: 0;
            }
            
            /* Content Area - Fit to viewport */
            .content {
                padding: 0.5rem;
                height: calc(100vh - 120px); /* Subtract header height */
                overflow-y: auto;
                overflow-x: hidden;
            }
            
            /* Cards - Compact */
            .card {
                padding: 1rem;
                margin-bottom: 0.75rem;
                border-radius: 8px;
            }
            
            .card h2 {
                font-size: 1.3rem;
                margin-bottom: 0.75rem;
            }
            
            .card h3 {
                font-size: 1.1rem;
                margin-bottom: 0.5rem;
            }
            
            /* Stats - Compact Grid */
            .grid {
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }
            
            .stat-card {
                padding: 0.75rem;
            }
            
            .stat-number {
                font-size: 1.5rem;
            }
            
            .stat-label {
                font-size: 0.75rem;
            }
            
            /* Buttons - Touch Friendly */
            .btn {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
                margin: 0.25rem;
                min-height: 44px; /* iOS touch target */
            }
            
            /* Tables - Responsive */
            table {
                font-size: 0.75rem;
                width: 100%;
                border-collapse: collapse;
            }
            
            /* Table wrapper for horizontal scroll */
            .table-responsive {
                overflow-x: auto;
            }
            
            th, td {
                padding: 0.4rem;
                white-space: nowrap;
            }
            
            /* Forms - Touch Optimized */
            input, select, textarea {
                font-size: 16px !important; /* Prevent iOS zoom */
                padding: 0.6rem;
            }
            
            /* Game Cards */
            .game-grid {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }
            
            .game-card {
                padding: 1rem;
            }
            
            .game-icon {
                font-size: 2rem;
            }
            
            /* Modals - Full Screen */
            .modal-content {
                width: 100vw !important;
                height: 100vh !important;
                max-width: 100vw !important;
                max-height: 100vh !important;
                border-radius: 0;
                margin: 0;
            }
            
            .modal-body {
                padding: 1rem;
                height: calc(100vh - 80px);
                overflow-y: auto;
            }
            
            /* Game Containers - Full Screen */
            .game-content {
                width: 100vw !important;
                height: 100vh !important;
                max-width: 100vw !important;
                max-height: 100vh !important;
                border-radius: 0 !important;
                padding: 0.75rem !important;
            }
            
            .game-header {
                margin-bottom: 0.75rem;
            }
            
            .game-header h2 {
                font-size: 1.2rem;
            }
            
            /* Quiz - Compact */
            .quiz-question {
                font-size: 1.1rem;
                margin-bottom: 1rem;
            }
            
            .quiz-option {
                padding: 0.75rem;
                font-size: 0.9rem;
            }
            
            /* Memory Game - Fit Screen */
            .memory-grid {
                width: 90vw !important;
                max-width: 360px !important;
                height: auto !important;
                aspect-ratio: 1;
            }
            
            /* Test Execution - Optimized */
            .question-text {
                font-size: 1.2rem;
                margin-bottom: 1rem;
            }
            
            .answer-option label {
                font-size: 0.95rem;
            }
        }

        /* Tablet Landscape - Optimized Layout */
        @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
            /* Header */
            .header {
                padding: 0.75rem 1.5rem;
            }
            
            .header h1 {
                font-size: 1.5rem;
            }
            
            /* Navigation */
            .nav-buttons button {
                padding: 0.5rem 1rem;
                font-size: 0.9rem;
            }
            
            /* Content */
            .content {
                padding: 1rem;
                max-width: 100%;
            }
            
            /* Grid - Two Columns */
            .grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            
            .game-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            /* Cards */
            .card {
                padding: 1.5rem;
            }
            
            /* Tables */
            table {
                font-size: 0.9rem;
            }
            
            th, td {
                padding: 0.6rem;
            }
            
            /* Game Content */
            .game-content {
                width: 90vw !important;
                height: 85vh !important;
                max-width: 900px !important;
                max-height: 700px !important;
            }
        }

        /* Desktop - Maximum Usability */
        @media (min-width: 1025px) {
            /* Content - Wider */
            .content {
                max-width: 1400px;
                padding: 2rem;
            }
            
            /* Grid - Three Columns where appropriate */
            .grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 1.5rem;
            }
            
            .game-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 2rem;
            }
            
            /* Larger Text */
            .stat-number {
                font-size: 2.5rem;
            }
            
            /* Game Content - Optimal Size */
            .game-content {
                width: 1000px !important;
                height: 700px !important;
            }
        }

        /* Very Small Phones (< 375px) */
        @media (max-width: 374px) {
            html {
                font-size: 12px;
            }
            
            .header h1 {
                font-size: 1rem !important;
            }
            
            .nav-buttons button {
                padding: 0.3rem 0.6rem;
                font-size: 0.7rem;
            }
            
            .stat-number {
                font-size: 1.2rem;
            }
            
            .btn {
                font-size: 0.8rem;
                padding: 0.5rem 0.8rem;
            }
        }

        /* Large Desktop (> 1440px) */
        @media (min-width: 1441px) {
            .content {
                max-width: 1600px;
            }
            
            .grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .game-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Landscape Mode Optimization for All Devices */
        @media (orientation: landscape) and (max-height: 600px) {
            .header {
                padding: 0.4rem 1rem;
            }
            
            .header h1 {
                font-size: 1.1rem !important;
            }
            
            .content {
                height: calc(100vh - 80px);
            }
            
            .card {
                padding: 0.75rem;
                margin-bottom: 0.5rem;
            }
            
            .game-content {
                height: 95vh !important;
                padding: 0.5rem !important;
            }
        }

        /* Print Styles */
        @media print {
            .header, .nav-buttons, .btn, .close-game {
                display: none !important;
            }
            
            .content {
                max-width: 100%;
                padding: 0;
            }
            
            .card {
                page-break-inside: avoid;
            }
        }

        /* High DPI Displays */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            /* Sharper text rendering */
            body {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }

        /* Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        /* Test-Vokabel-Tabellen Checkbox-Ausrichtung */
        #test-vocab-tbody td { vertical-align: middle; }
        .test-vocab-checkbox, #test-vocab-select-all { width: 16px; height: 16px; vertical-align: middle; }

/* ===================== Grammatik =====================
   .ge-*  Aufgaben-Darstellung von GrammarEngine (grammar-engine.js) – auch in
          Spielen, Tests und Lernaufgaben verwendbar
   .gx-*  Grammatik-Bereich (grammar.js, grammar-teacher.js, grammar-editor.js) */

.ge-ex { --ge-accent: #667eea; --ge-right: #1e8e4e; --ge-right-bg: #e6f6ec; --ge-wrong: #c62828; --ge-wrong-bg: #fdecec; font-size: 1.05rem; color: #222; }
.ge-prompt { margin: 0 0 .6rem; font-weight: 600; color: #444; }
.ge-instruction { margin: -.3rem 0 .6rem; color: #555; }
.ge-question, .ge-source { margin: 0 0 .9rem; font-size: 1.2rem; line-height: 1.7; }
.ge-source { padding: .6rem .8rem; background: #f4f5fb; border-left: 4px solid var(--ge-accent); border-radius: 6px; }
.ge-hint { margin: -.4rem 0 .8rem; color: #666; font-size: .95rem; }
.ge-body { margin-bottom: .8rem; }
.ge-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ge-msg { color: #666; }

.ge-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 44px; padding: .55rem 1.1rem; border: 2px solid #c9cdf0; border-radius: 8px; background: #fff; color: #333; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.ge-btn:hover:not(:disabled) { border-color: #667eea; }
.ge-btn:disabled { opacity: .5; cursor: not-allowed; }
.ge-btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
.ge-btn-light { background: #f4f5fb; border-color: #e1e3f3; font-weight: 500; }
.ge-btn-danger { color: #c62828; border-color: #f0c2c2; }
.ge-ex button:focus-visible, .ge-ex input:focus-visible, .ge-ex textarea:focus-visible,
.gx-root button:focus-visible, .gx-root input:focus-visible, .gx-root select:focus-visible, .gx-root textarea:focus-visible, .gx-root summary:focus-visible {
    outline: 3px solid #ffb300; outline-offset: 2px; }

/* choice */
.ge-options { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ge-option { min-height: 48px; padding: .6rem .9rem; border: 2px solid #d6d9ee; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.ge-option[aria-pressed="true"] { border-color: var(--ge-accent); background: #eef0ff; box-shadow: inset 0 0 0 1px var(--ge-accent); }

/* gap */
.ge-gap-line { line-height: 2.4; }
.ge-ex .ge-gap-input { display: inline-block; min-width: 5ch; max-width: 100%; margin: 0 .25rem; padding: .2rem .4rem; border: none; border-bottom: 3px solid var(--ge-accent); border-radius: 4px 4px 0 0; background: #f4f5fb; font: inherit; font-size: 1.1rem; text-align: center; }

/* transform / translate */
.ge-source-de::before { content: "DE  "; font-size: .75rem; font-weight: 700; color: #888; }
.ge-text-input { width: 100%; min-height: 3.2rem; padding: .6rem .7rem; border: 2px solid #d6d9ee; border-radius: 8px; font: inherit; resize: vertical; }

/* order */
.ge-order-line { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 56px; padding: .5rem; margin-bottom: .6rem; border: 2px dashed #b9bde6; border-radius: 10px; background: #fafbff; }
.ge-order-pool { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 48px; }
.ge-order-tools { margin-top: .5rem; }
.ge-tile, .ge-chip { min-height: 44px; padding: .4rem .8rem; border: 2px solid #c9cdf0; border-radius: 8px; background: #fff; font: inherit; cursor: pointer; box-shadow: 0 1px 0 #c9cdf0; }
.ge-order-line .ge-tile { background: #eef0ff; border-color: var(--ge-accent); }
.ge-placeholder { align-self: center; color: #999; font-size: .95rem; }

/* error */
.ge-tokens { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.ge-token { min-height: 44px; padding: .3rem .55rem; border: 2px solid transparent; border-radius: 6px; background: #f4f5fb; font: inherit; font-size: 1.1rem; cursor: pointer; }
.ge-token[aria-pressed="true"] { border-color: var(--ge-wrong); background: #fff3f3; text-decoration: line-through; text-decoration-color: var(--ge-wrong); }
.ge-fix { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.ge-fix[hidden] { display: none; }
.ge-fix-input { flex: 1 1 10rem; max-width: 18rem; padding: .5rem .6rem; border: 2px solid var(--ge-accent); border-radius: 8px; font: inherit; }

/* match */
.ge-match { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.ge-match-col { display: flex; flex-direction: column; gap: .5rem; }
.ge-match-item { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem .6rem; border: 2px solid #d6d9ee; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.ge-match-item[aria-pressed="true"] { border-style: dashed; border-color: #333; background: #fffbe6; }
.ge-badge { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; background: #eceef7; color: #fff; font-size: .85rem; font-weight: 700; line-height: 1.6rem; text-align: center; }
.ge-match-text { flex: 1; overflow-wrap: anywhere; }
.ge-pair-0 { border-color: #2563eb; background: #eaf1ff; } .ge-pair-0 .ge-badge { background: #2563eb; }
.ge-pair-1 { border-color: #d97706; background: #fff4e0; } .ge-pair-1 .ge-badge { background: #d97706; }
.ge-pair-2 { border-color: #059669; background: #e5f7ef; } .ge-pair-2 .ge-badge { background: #059669; }
.ge-pair-3 { border-color: #7c3aed; background: #f1eaff; } .ge-pair-3 .ge-badge { background: #7c3aed; }
.ge-pair-4 { border-color: #db2777; background: #fde8f2; } .ge-pair-4 .ge-badge { background: #db2777; }
.ge-pair-5 { border-color: #0d9488; background: #e2f6f4; } .ge-pair-5 .ge-badge { background: #0d9488; }

/* sort */
.ge-sort-pool { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 48px; padding: .5rem; margin-bottom: .6rem; border-radius: 10px; background: #fafbff; }
.ge-chip[aria-pressed="true"] { border-color: #333; border-style: dashed; background: #fffbe6; }
.ge-sort-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.ge-bucket { border: 2px solid #d6d9ee; border-radius: 10px; background: #fff; overflow: hidden; }
.ge-bucket-head { display: block; width: 100%; min-height: 44px; padding: .5rem; border: none; background: #eef0ff; font: inherit; font-weight: 700; cursor: pointer; }
.ge-sort-buckets.ge-armed .ge-bucket { border-color: var(--ge-accent); }
.ge-sort-buckets.ge-armed .ge-bucket-head::after { content: "  – hier ablegen"; font-weight: 400; font-size: .85rem; color: #555; }
.ge-bucket-items { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 52px; padding: .5rem; }

/* Rueckmeldung */
.ge-locked button { cursor: default; }
.ge-ex .ge-option:disabled, .ge-ex .ge-token:disabled, .ge-ex .ge-tile:disabled, .ge-ex .ge-chip:disabled,
.ge-ex .ge-match-item:disabled, .ge-ex .ge-bucket-head:disabled, .ge-ex .ge-gap-input:disabled, .ge-ex .ge-text-input:disabled, .ge-ex .ge-fix-input:disabled { color: #222; opacity: 1; }
.ge-is-right .ge-actions, .ge-is-wrong .ge-actions { display: none; }
.ge-ex .ge-right { border-color: var(--ge-right) !important; background: var(--ge-right-bg) !important; }
.ge-ex .ge-wrong { border-color: var(--ge-wrong) !important; background: var(--ge-wrong-bg) !important; }
.ge-ex button.ge-right::after { content: " \2713"; color: var(--ge-right); font-weight: 700; }
.ge-ex button.ge-wrong::after { content: " \2717"; color: var(--ge-wrong); font-weight: 700; }
.ge-ex input.ge-right, .ge-ex textarea.ge-right, .ge-ex input.ge-wrong, .ge-ex textarea.ge-wrong { border-width: 2px; border-style: solid; }
.ge-ex .ge-token.ge-target { text-decoration: none; outline: 2px dotted var(--ge-right); }
.ge-feedback:empty { display: none; }
.ge-feedback-box { margin-top: .9rem; padding: .8rem 1rem; border-radius: 10px; border-left: 6px solid; }
.ge-fb-right { background: var(--ge-right-bg); border-color: var(--ge-right); }
.ge-fb-wrong { background: var(--ge-wrong-bg); border-color: var(--ge-wrong); }
.ge-feedback-box p { margin: .25rem 0; }
.ge-fb-title { font-weight: 700; font-size: 1.1rem; }
.ge-fb-right .ge-fb-title { color: var(--ge-right); }
.ge-fb-wrong .ge-fb-title { color: var(--ge-wrong); }
.ge-fb-expl { color: #333; }

/* ---------- Grammatik-Bereich ---------- */
.gx-root h2 { margin-bottom: .8rem; }
.gx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gx-tabs { display: flex; gap: .25rem; margin-bottom: 1.2rem; border-bottom: 2px solid #e4e6f2; overflow-x: auto; }
.gx-tabs[hidden] { display: none; }
.gx-tab { flex: 0 0 auto; min-height: 44px; padding: .5rem 1rem; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; color: #666; font: inherit; font-weight: 600; cursor: pointer; }
.gx-tab-active { color: #4c5bd4; border-bottom-color: #667eea; }
.gx-loading, .gx-empty, .gx-muted { color: #777; }
.gx-help { margin: 0 0 1rem; color: #666; font-size: .95rem; }
.gx-notice { margin: .6rem 0; padding: .7rem 1rem; border-radius: 8px; border-left: 5px solid #667eea; background: #f0f2ff; }
.gx-notice ul { margin: .4rem 0 0 1.2rem; }
.gx-notice-error { border-color: #c62828; background: #fdecec; color: #7a1c1c; }
.gx-notice-ok { border-color: #1e8e4e; background: #e6f6ec; color: #155a33; }
.gx-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #eceef7; color: #444; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.gx-badge-curr { background: #e3f2fd; color: #1565c0; }
.gx-badge-own { background: #fff3e0; color: #b45309; }
.gx-badge-warn { background: #fdecec; color: #c62828; }
.gx-badge[hidden] { display: none; }
.gx-back, .gx-link { min-height: 40px; padding: .3rem .2rem; border: none; background: none; color: #4c5bd4; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.gx-link:hover, .gx-back:hover { text-decoration: underline; }
.gx-small { min-height: 36px; padding: .3rem .7rem; font-size: .9rem; }
.gx-view-title { margin: .2rem 0 .8rem; }
.gx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .8rem; }
.gx-classpick { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.gx-classpick select { min-height: 40px; padding: .3rem .5rem; border: 2px solid #d6d9ee; border-radius: 8px; font: inherit; }
.gx-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* Uebersicht */
.gx-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.gx-quick-card { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .8rem 1rem; border: 2px solid #e1e3f3; border-radius: 12px; background: #fafbff; font: inherit; text-align: left; cursor: pointer; }
.gx-quick-card:hover:not(:disabled) { border-color: #667eea; }
.gx-quick-card:disabled { opacity: .65; cursor: default; }
.gx-quick-review:not(:disabled) { border-color: #f5b041; background: #fff8ec; }
.gx-quick-icon { font-size: 1.8rem; }
.gx-grades { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: .7rem; padding-bottom: .2rem; }
.gx-grade { flex: 0 0 auto; min-height: 44px; padding: .4rem .9rem; border: 2px solid #d6d9ee; border-radius: 999px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.gx-grade.gx-active { background: #667eea; border-color: #667eea; color: #fff; }
.gx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.gx-chips { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1 1 320px; }
.gx-chip { min-height: 36px; padding: .25rem .7rem; border: 1px solid #d6d9ee; border-radius: 999px; background: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.gx-chip.gx-active { background: #eef0ff; border-color: #667eea; color: #3843a8; font-weight: 600; }
.gx-search { flex: 1 1 220px; }
.gx-search input { width: 100%; min-height: 40px; padding: .4rem .7rem; border: 2px solid #d6d9ee; border-radius: 999px; font: inherit; }
.gx-area-group { margin-bottom: 1.3rem; }
.gx-area-title { margin: 0 0 .5rem; color: #4c5bd4; font-size: 1.05rem; }
.gx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.gx-card { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; border: 2px solid #e4e6f2; border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.gx-card:hover { border-color: #667eea; transform: translateY(-2px); }
.gx-card-title { font-weight: 700; font-size: 1.05rem; color: #222; }
.gx-card-summary { color: #555; font-size: .92rem; }
.gx-card-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: #777; font-size: .85rem; }
.gx-card-progress { display: flex; align-items: center; gap: .5rem; }
.gx-bar { position: relative; display: inline-block; flex: 1 1 80px; min-width: 60px; height: 10px; border-radius: 999px; background: #eceef7; overflow: hidden; vertical-align: middle; }
.gx-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: #e57373; }
.gx-bar-mid .gx-bar-fill { background: #f5b041; }
.gx-bar-good .gx-bar-fill { background: #43a047; }
.gx-bar-label { flex: 0 0 auto; color: #666; font-size: .85rem; white-space: nowrap; }

/* Themenseite */
.gx-topic-head { margin-bottom: 1rem; }
.gx-topic-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.gx-topic-title { margin: 0 0 .3rem; font-size: 1.5rem; }
.gx-topic-summary { margin: 0 0 .7rem; color: #444; font-size: 1.05rem; }
.gx-topic-progress { display: flex; align-items: center; gap: .6rem; max-width: 460px; margin-bottom: .8rem; }
.gx-topic-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.gx-topic-actions-bottom { margin-top: 1.4rem; }
.gx-section { margin: 1.2rem 0; }
.gx-section h4, .gx-merke h4 { margin: 0 0 .5rem; color: #333; }
.gx-explanation p { margin: 0 0 .7rem; line-height: 1.6; }
.gx-merke { margin: 1.2rem 0; padding: .9rem 1.1rem; border: 2px solid #f5b041; border-radius: 12px; background: #fff8ec; }
.gx-merke ul { margin: 0; padding-left: 1.2rem; }
.gx-merke li { margin: .3rem 0; line-height: 1.5; }
.gx-signal { display: flex; flex-wrap: wrap; gap: .4rem; }
.gx-signal-word { padding: .25rem .7rem; border-radius: 999px; background: #e3f2fd; color: #0d47a1; font-weight: 600; }
.gx-examples, .gx-mistakes { list-style: none; margin: 0; padding: 0; }
.gx-example { display: flex; flex-direction: column; padding: .45rem 0; border-bottom: 1px solid #eee; }
.gx-example-en { padding: .2rem 0; border: none; background: none; font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer; }
.gx-example-de { display: none; color: #666; }
.gx-show-de .gx-example-de, .gx-example.gx-open .gx-example-de { display: block; }
.gx-example-note { color: #8a6d00; font-size: .85rem; }
.gx-mistake { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; padding: .6rem 0; border-bottom: 1px solid #eee; }
.gx-mistake-wrong { color: #c62828; text-decoration: line-through; }
.gx-mistake-right { color: #1e8e4e; font-weight: 600; }
.gx-mistake-why { flex-basis: 100%; color: #555; font-size: .92rem; }

/* Uebungsrunde */
.gx-session { max-width: 760px; margin: 0 auto; }
.gx-session-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.gx-session-title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-session-count { color: #666; font-weight: 600; white-space: nowrap; }
.gx-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 1rem; padding: 0; list-style: none; }
.gx-dot { width: 14px; height: 14px; border-radius: 50%; background: #e0e2ef; }
.gx-dot-current { background: #fff; box-shadow: 0 0 0 3px #667eea; }
.gx-dot-right { background: #43a047; }
.gx-dot-wrong { background: #e53935; }
.gx-dot-retry { border-radius: 3px; }
.gx-ex-meta { margin: 0 0 .5rem; color: #888; font-size: .85rem; }
.gx-ex-host { padding: 1rem; border: 1px solid #e4e6f2; border-radius: 12px; background: #fff; }
.gx-session-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; min-height: 48px; }
.gx-session-foot .ge-btn[hidden] { display: none; }
.gx-save-state { color: #888; font-size: .85rem; }
.gx-save-error { color: #c62828; }
.gx-summary { max-width: 640px; margin: 0 auto; text-align: center; }
.gx-summary-praise { margin: .5rem 0; font-size: 1.6rem; font-weight: 700; }
.gx-summary-score strong { color: #4c5bd4; font-size: 2rem; }
.gx-summary-mastery { margin: 1rem 0; padding: 0; list-style: none; text-align: left; }
.gx-summary-mastery li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .5rem 0; border-bottom: 1px solid #eee; }
.gx-summary-topic { flex-basis: 100%; font-weight: 600; }
.gx-summary .gx-topic-actions { justify-content: center; }

/* Mein Lernstand */
.gx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.gx-stat { display: flex; flex-direction: column; padding: .8rem; border-radius: 12px; background: #f4f5fb; text-align: center; }
.gx-stat strong { color: #4c5bd4; font-size: 1.6rem; }
.gx-area-stat { margin-bottom: .4rem; border: 1px solid #e4e6f2; border-radius: 10px; }
.gx-area-stat summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-height: 48px; padding: .4rem .8rem; cursor: pointer; list-style: none; }
.gx-area-stat summary::-webkit-details-marker { display: none; }
.gx-area-stat summary::before { content: "▸"; color: #888; }
.gx-area-stat[open] summary::before { content: "▾"; }
.gx-area-stat-name { flex: 0 0 40%; font-weight: 600; }
.gx-area-stat ul { margin: 0; padding: 0 .8rem .6rem; list-style: none; }
.gx-area-stat li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .3rem 0; border-top: 1px solid #f0f0f0; }
.gx-area-stat li .gx-link { flex: 1 1 200px; }

/* Lehrkraft: Klassen-Einstellungen */
.gx-legend { display: flex; gap: .5rem; margin-bottom: .6rem; }
.gx-vis { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.gx-vis-on { background: #e6f6ec; color: #1e8e4e; }
.gx-vis-off { background: #f1f1f1; color: #777; }
.gx-set-grade { margin-bottom: .7rem; border: 1px solid #e4e6f2; border-radius: 10px; background: #fff; }
.gx-set-grade > summary::-webkit-details-marker { display: none; }
.gx-set-grade > summary::before { content: "▸"; color: #888; }
.gx-set-grade[open] > summary::before { content: "▾"; }
.gx-set-grade > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem .8rem; background: #f4f5fb; border-radius: 10px; cursor: pointer; }
.gx-set-grade > .gx-bulk { display: flex; padding: .5rem .8rem 0; }
.gx-set-area { padding: .3rem .8rem .6rem; }
.gx-set-area-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin: .5rem 0 .2rem; color: #4c5bd4; font-weight: 700; }
.gx-bulk { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.gx-bulk-btn { min-height: 32px; padding: .15rem .55rem; border: 1px solid #d6d9ee; border-radius: 6px; background: #fff; font: inherit; font-size: .8rem; cursor: pointer; }
.gx-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .45rem .3rem; border-bottom: 1px solid #f0f0f0; }
.gx-set-row.gx-dirty { background: #fffbe6; }
.gx-set-title { flex: 1 1 220px; }
.gx-seg { display: inline-flex; border: 2px solid #d6d9ee; border-radius: 8px; overflow: hidden; }
.gx-seg-btn { min-height: 38px; padding: .25rem .7rem; border: none; border-right: 1px solid #d6d9ee; background: #fff; font: inherit; font-size: .88rem; cursor: pointer; }
.gx-seg-btn:last-child { border-right: none; }
.gx-seg-btn.gx-on { background: #667eea; color: #fff; font-weight: 700; }
.gx-seg-btn.gx-seg-on.gx-on { background: #1e8e4e; }
.gx-seg-btn.gx-seg-off.gx-on { background: #c62828; }
.gx-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 1rem; padding: .6rem .8rem; border-radius: 10px; background: #f4f5fb; box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
.gx-savebar > span { flex: 1 1 160px; color: #666; }
.gx-savebar-dirty { background: #fff8ec; }
.gx-savebar-dirty > span, .gx-dirty-text { color: #b45309; font-weight: 600; }

/* Lehrkraft: Lernstand */
.gx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
.gx-heatmap, .gx-table { margin-top: 0; font-size: .9rem; }
.gx-heatmap th, .gx-heatmap td { padding: .35rem .45rem; border: 1px solid #fff; text-align: center; }
.gx-heatmap thead th { vertical-align: bottom; max-width: 7rem; font-size: .8rem; }
.gx-th-rot { display: block; max-height: 4.5em; overflow: hidden; }
.gx-heatmap tbody th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; white-space: nowrap; }
.gx-heat { min-width: 2.8rem; font-weight: 600; }
.gx-heatmap td.gx-heat-none { background: #f6f6f8; color: #aaa; font-weight: 400; }
.gx-heatmap td.gx-heat-0 { background: #f8d7da; color: #7a1c1c; }
.gx-heatmap td.gx-heat-1 { background: #fbe3c8; color: #7a4a00; }
.gx-heatmap td.gx-heat-2 { background: #fff1b8; color: #6b5800; }
.gx-heatmap td.gx-heat-3 { background: #d6f0d0; color: #245c1d; }
.gx-heatmap td.gx-heat-4 { background: #a8dfa0; color: #174d12; }
.gx-row-active th, .gx-row-active td { box-shadow: inset 0 2px 0 #667eea, inset 0 -2px 0 #667eea; }
.gx-detail { margin-top: 1rem; padding: 1rem; border: 1px solid #e4e6f2; border-radius: 12px; }
.gx-table td .gx-bar { width: 80px; flex: none; }

/* Eigene Themen */
.gx-own-list { margin: 0; padding: 0; list-style: none; }
.gx-own { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid #eee; }
.gx-own-main { display: flex; flex-direction: column; }
.gx-own-actions { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Editor */
.gx-editor fieldset { min-width: 0; }
.gx-ed-section { margin: 0 0 1.2rem; padding: .9rem 1rem; border: 1px solid #e4e6f2; border-radius: 12px; }
.gx-ed-section > legend, .gx-ed-section > h4 { padding: 0 .3rem; font-weight: 700; color: #4c5bd4; }
.gx-ed-section > h4 { margin: 0 0 .6rem; }
.gx-ed-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.gx-ed-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; }
.gx-ed-field label, .gx-ed-label { font-weight: 600; font-size: .92rem; color: #444; }
.gx-editor input[type="text"], .gx-editor textarea, .gx-editor select { width: 100%; min-height: 40px; padding: .4rem .55rem; border: 1px solid #cfd3ea; border-radius: 7px; font: inherit; font-size: .95rem; }
.gx-editor textarea { resize: vertical; }
.gx-ed-help { color: #777; font-size: .82rem; }
.gx-ed-list { margin: 0 0 .8rem; padding: 0; border: none; }
.gx-ed-list > legend { margin-bottom: .3rem; font-weight: 600; font-size: .92rem; color: #444; }
.gx-ed-li { display: flex; align-items: center; gap: .3rem; margin-bottom: .3rem; }
.gx-ed-li input[type="text"] { flex: 1; min-width: 0; }
.gx-ed-radio { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #1e8e4e; }
.gx-ed-obj { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto; gap: .3rem .5rem; align-items: end; margin-bottom: .5rem; padding: .5rem; border-radius: 8px; background: #fafbff; }
.gx-ed-sub { display: flex; flex-direction: column; font-size: .8rem; color: #666; }
.gx-ed-rowbtns { display: inline-flex; gap: .2rem; flex: 0 0 auto; }
.gx-ed-icon { min-width: 36px; min-height: 36px; border: 1px solid #d6d9ee; border-radius: 6px; background: #fff; font: inherit; cursor: pointer; }
.gx-ed-icon:disabled { opacity: .35; cursor: default; }
.gx-ed-del { color: #c62828; }
.gx-ed-add { min-height: 36px; padding: .2rem .7rem; border: 1px dashed #9aa2e0; border-radius: 6px; background: #fff; color: #4c5bd4; font: inherit; font-size: .9rem; cursor: pointer; }
.gx-ed-gap { margin-bottom: .6rem; padding: .5rem; border-left: 3px solid #c9cdf0; }
.gx-ed-gapdel { width: auto; padding: 0 .6rem; font-size: .85rem; }
.gx-ed-tokens { display: flex; flex-wrap: wrap; gap: .3rem; }
.gx-ed-tokens .ge-token.gx-ed-wrongtok { border-color: #c62828; background: #fdecec; text-decoration: line-through; }
.gx-ed-ex { margin-bottom: .5rem; border: 1px solid #e4e6f2; border-radius: 10px; background: #fff; }
.gx-ed-ex.gx-invalid { border-color: #f0b4b4; }
.gx-ed-exhead { display: flex; align-items: center; gap: .3rem; padding: .3rem .4rem; }
.gx-ed-extoggle { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-height: 44px; min-width: 0; padding: .2rem .3rem; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
.gx-ed-exid { font-family: monospace; font-weight: 700; color: #4c5bd4; }
.gx-ed-snippet { flex: 1 1 180px; min-width: 0; overflow: hidden; color: #555; text-overflow: ellipsis; white-space: nowrap; }
.gx-ed-exbody { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; padding: .6rem .9rem 1rem; border-top: 1px solid #eee; }
.gx-ed-previewbox { align-self: start; position: sticky; top: .5rem; padding: .7rem; border: 2px dashed #c9cdf0; border-radius: 10px; background: #fcfcff; }
.gx-ed-preview .ge-ex { font-size: .95rem; }
.gx-ed-errlist { margin: 0; padding: .5rem .5rem .5rem 1.6rem; border-radius: 8px; background: #fdecec; color: #7a1c1c; font-size: .9rem; }
.gx-ed-ok { margin: 0; color: #1e8e4e; font-size: .9rem; }
.gx-ed-addex { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
.gx-editor .gx-ed-addex select { width: auto; }

@media (max-width: 767px) {
    .gx-ed-exbody { grid-template-columns: 1fr; }
    .gx-ed-previewbox { position: static; }
    .gx-ex-host { padding: .7rem; }
    .ge-question, .ge-source { font-size: 1.1rem; }
    .ge-ex .ge-gap-input { padding: .15rem .3rem; }
    .gx-area-stat-name { flex-basis: 100%; }
    .gx-topic-title { font-size: 1.25rem; }
    .gx-savebar { padding: .4rem .5rem; gap: .3rem; }
    .gx-savebar > span { flex-basis: 100%; font-size: .85rem; }
    .gx-savebar .ge-btn { min-height: 40px; padding: .35rem .8rem; font-size: .9rem; }
}
@media (max-width: 400px) {
    .ge-match { gap: .4rem; }
    .ge-match-item { padding: .35rem .4rem; gap: .3rem; font-size: .95rem; }
    .ge-badge { flex-basis: 1.3rem; height: 1.3rem; line-height: 1.3rem; font-size: .75rem; }
    .gx-seg-btn { padding: .25rem .45rem; font-size: .8rem; }
}

/* ==========================================================================
   Grammatik-Spiele (games-grammar.js): .gg-*
   Grammatik in Tests und Lernaufgaben (grammar-tasks.js, tests.js,
   lernaufgaben.js): .gt-*, .gla-*
   ========================================================================== */
.gg-menu h2 { margin-bottom: .5rem; }
.gg-grade-info { color: #666; margin: 0; }
.gg-menu #grammar-game-grade { max-width: 220px; }
.gg-game .game-header { margin-bottom: .75rem; }
.gg-stats { display: flex; flex-wrap: wrap; justify-content: space-around; gap: .5rem 1rem; margin-bottom: .75rem; font-size: clamp(.9rem, 3.4vw, 1.05rem); }
.gg-stats:empty { display: none; }
.gg-stat-label { color: #666; }
.gg-stage { flex: 1; text-align: center; max-width: 760px; width: 100%; margin: 0 auto; }
.gg-stage .ge-ex { text-align: left; }
.gg-loading { color: #888; padding: 2rem 0; }
.gg-empty { padding: 2rem 1rem; color: #555; }
.gg-empty-icon { font-size: 3rem; }
.gg-empty p { font-size: 1.1rem; margin: .75rem 0 1.25rem; }
.gg-after { margin-top: .5rem; }
.gg-next { margin-top: .75rem; }
.gg-next-btn { min-height: 48px; padding: .6rem 1.4rem; font-size: 1.05rem; }
.gg-timebar { height: 10px; max-width: 560px; margin: .5rem auto 1rem; background: #eee; border-radius: 5px; overflow: hidden; }
.gg-timefill { height: 100%; width: 100%; background: #28a745; transition: width .1s linear, background .3s; }
.gg-timefill.gg-time-low { background: #dc3545; }
/* Fehlerjaeger */
.gg-tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1rem auto; max-width: 680px; }
.gg-token { min-height: 52px; min-width: 44px; padding: .5rem .8rem; border: 2px solid #c9cdf0; border-radius: 10px; background: #fff; font: inherit; font-size: clamp(1.05rem, 4.2vw, 1.35rem); font-weight: 600; color: #333; cursor: pointer; touch-action: manipulation; transition: transform .12s; }
.gg-token:active { transform: scale(.95); }
.gg-token:disabled { cursor: default; opacity: 1; }
.gg-token.gg-right { background: #28a745; border-color: #28a745; color: #fff; }
.gg-token.gg-wrong { background: #dc3545; border-color: #dc3545; color: #fff; }
.gg-token.gg-target { border-color: #28a745; border-style: dashed; background: #e6f6ec; }
.gg-solution { margin: .75rem auto 0; max-width: 620px; padding: .75rem 1rem; border-radius: 10px; background: #f4f6fb; text-align: left; }
.gg-solution-sentence { margin-top: .35rem; font-size: 1.1rem; }
.gg-explanation { margin-top: .5rem; color: #555; }
/* Zeiten-Sortierer */
.gg-fall-shaft { position: relative; height: clamp(150px, 30vh, 220px); max-width: 620px; margin: 0 auto .75rem; border-radius: 14px; background: linear-gradient(180deg, #eef1ff, #fff); border: 2px dashed #c3cbe4; overflow: hidden; }
.gg-fall-card { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: min(92%, 560px); padding: .75rem 1rem; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(60, 70, 140, .18); font-size: clamp(1.05rem, 4vw, 1.3rem); font-weight: 600; color: #333; animation-name: ggFall; animation-timing-function: linear; animation-fill-mode: forwards; }
.gg-fall-card.gg-fall-stop { animation-play-state: paused; }
.gg-fall-card.gg-fall-right { background: #e6f6ec; color: #1e7a3f; }
.gg-fall-card.gg-fall-wrong { background: #fdecec; color: #b71c1c; }
@keyframes ggFall { from { top: 0; } to { top: calc(100% - 4.5rem); } }
.gg-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; max-width: 620px; margin: 0 auto; }
.gg-bucket { min-height: 60px; }
/* Signalwort-Blitz */
.gg-signal-word.gg-pop { animation: ngPop .3s ease; }
.gg-signal-options { max-width: 620px; }
/* Grammatik-Memory */
.gg-set-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; max-width: 680px; margin: 0 auto; }
.gg-set { display: flex; flex-direction: column; gap: .2rem; align-items: center; }
.gg-set-meta { font-weight: 400; color: #777; }
.gg-set-random { background: #667eea; color: #fff; }
.gg-memory-set { font-weight: 700; color: #667eea; }
.gg-memory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 28vw), 1fr)); gap: .5rem; max-width: 760px; margin: 0 auto; }
.gg-card { position: relative; min-height: clamp(70px, 14vw, 96px); padding: .4rem; border-radius: 12px; border: 2px solid #c3cbe4; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font: inherit; cursor: pointer; touch-action: manipulation; transition: transform .15s, background .2s; word-break: break-word; }
.gg-card:active { transform: scale(.96); }
.gg-card-back { font-size: 1.8rem; font-weight: 700; }
.gg-card-front { display: none; font-size: clamp(.8rem, 3.2vw, 1rem); font-weight: 600; line-height: 1.25; }
.gg-card.gg-flipped { background: #fff; color: #333; }
.gg-card.gg-flipped.gg-card-b { background: #fff8e6; }
.gg-card.gg-flipped .gg-card-back { display: none; }
.gg-card.gg-flipped .gg-card-front { display: block; }
.gg-card.gg-matched { background: #e6f6ec !important; border-color: #28a745; color: #1e7a3f; cursor: default; }
/* Themenauswahl (Tests, Lernaufgaben) */
.gt-picker { padding: .6rem; background: #f8f9fa; border-radius: 6px; }
.gt-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.gt-filters select { flex: 1 1 160px; width: auto; padding: .4rem; }
.gt-topic-list { max-height: 280px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.gt-topic { display: flex !important; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .6rem; margin: 0 !important; border-bottom: 1px solid #f0f0f0; font-weight: 400 !important; cursor: pointer; }
.gt-topic input { width: auto !important; }
.gt-topic-title { flex: 1 1 200px; }
.gt-topic-meta { color: #888; font-size: .85rem; }
.gt-count { margin: .4rem 0; font-size: .85rem; color: #2196F3; font-weight: 600; }
.gt-muted { color: #888; padding: .5rem; margin: 0; }
.gt-row { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.gt-row label { margin: 0 !important; }
.gt-row input { width: 90px !important; }
.gt-types { margin-top: .4rem; }
.gt-types-title { font-weight: 500; margin-bottom: .25rem; }
.gt-type { display: inline-flex !important; align-items: center; gap: .25rem; margin: 0 .9rem .3rem 0 !important; font-weight: 400 !important; }
.gt-type input { width: auto !important; }
.gt-type-switch { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.gt-type-switch label { display: inline-flex !important; align-items: center; gap: .35rem; font-weight: 400 !important; margin: 0 !important; }
.gt-type-switch input { width: auto !important; }
.gt-test-hint { display: inline-block; margin-bottom: .5rem; padding: .15rem .6rem; border-radius: 999px; background: #eef0ff; color: #4a54c4; font-size: .85rem; font-weight: 600; }
.gt-saved { min-height: 1.4rem; margin-top: .4rem; font-size: .9rem; color: #888; }
.gt-saved.gt-saved-ok { color: #1e7a3f; font-weight: 600; }
/* Grammatik-Lernaufgabe (Dialog) */
.gla-modal { z-index: 1100; }
.gla-content { max-width: 760px; width: 95vw; max-height: 92vh; overflow-y: auto; }
.gla-progress { padding: .4rem 1.5rem 0; color: #666; font-weight: 600; }
.gla-progress:empty { display: none; }
.gla-after { margin-top: .75rem; text-align: right; }
.gla-note { color: #8a5a1e; background: #fff6e0; padding: .5rem .75rem; border-radius: 6px; }
.gla-result { text-align: center; padding: 1rem 0; }
.gla-result-emoji { font-size: 3.5rem; }
.gla-result-score { font-size: 1.6rem; font-weight: 700; color: #333; margin-top: .5rem; }
.gla-result-percent { font-size: 2.4rem; font-weight: 800; color: #667eea; }
.gla-res-item { border: 1px solid #e3e5f0; border-radius: 8px; margin-bottom: .5rem; padding: .4rem .7rem; }
.gla-res-summary { cursor: pointer; padding: .25rem 0; }
.gla-res-answers { margin: .4rem 0 .2rem 1.2rem; padding: 0; }
.gla-res-answers li { margin-bottom: .45rem; }
.gla-res-q { font-weight: 600; }
.gla-ok .gla-res-q { color: #1e7a3f; }
.gla-no .gla-res-q { color: #b71c1c; }
.gla-res-a { color: #555; font-size: .92rem; }
@media (max-width: 600px) {
    .gg-token { padding: .4rem .55rem; }
    .gg-memory-grid { gap: .35rem; }
    .gla-progress { padding: .3rem .8rem 0; }
}

/* Benutzerverwaltung: Klassenfilter ueber der Tabelle */
.users-class-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.5rem; }
.users-class-filter .uc-label { font-weight: 600; margin-right: .25rem; }
.uc-chip { min-height: 36px; padding: .25rem .8rem; border: 1px solid #d6d9ee; border-radius: 999px; background: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.uc-chip:hover { border-color: #667eea; }
.uc-chip.uc-active { background: #eef0ff; border-color: #667eea; color: #3843a8; font-weight: 600; }
.uc-chip.uc-all { margin-left: .5rem; }
.users-class-filter .uc-info { color: #666; font-size: .85rem; margin-left: .5rem; }
.users-class-filter + .users-table { margin-top: 1rem; }
.uc-cell-link { background: none; border: none; padding: 0; font: inherit; color: #3843a8; text-decoration: underline; cursor: pointer; }
.uc-empty { text-align: center; color: #666; padding: 1.5rem; }