:root{--primary:#e63946;--secondary:#dd0000;--dark:#1a1a1a;--light:#f8f9fa;--white:#ffffff;--gray:#6c757d;--glass-bg:rgba(255,255,255,0.7);--glass-border:rgba(255,255,255,0.6);--gradient-bg:linear-gradient(135deg,#fdfbfb 0%,#ebedee 100%);--success:#28a745;--card-w:300px;--card-h:350px;--card-bg:#ffffff;--border:#e9ecef;} .flashcards-grid,.grammar-list,#examContent,#readingContainer{content-visibility:auto;contain-intrinsic-size:1px 500px;} [data-theme="dark"]{--light:#121212;--white:#1e1e1e;--gray:#aaa;--glass-bg:rgba(30,30,30,0.7);--glass-border:rgba(255,255,255,0.1);--gradient-bg:linear-gradient(135deg,#121212 0%,#000000 100%);--dark:#f4f6f8;--border:#333333;} *{box-sizing:border-box;margin:0;padding:0;outline:none;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} body{background:var(--gradient-bg);color:var(--dark);min-height:100vh;padding-top:130px;transition:background 0.3s;} button{cursor:pointer;border:none;font-family:inherit;} header{background:var(--white);padding:15px 30px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;top:0;left:0;width:100%;z-index:1000;} .logo{font-size:1.4rem;font-weight:800;color:var(--secondary);display:flex;align-items:center;gap:10px;} .user-controls{display:flex;gap:15px;align-items:center;} .user-input{padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--light);color:var(--dark);font-weight:600;width:150px;} .admin-btn{padding:8px 15px;background:var(--dark);color:var(--white);border-radius:6px;font-size:0.9rem;transition:0.3s;} .admin-btn:hover{background:var(--secondary);} .header-right{display:flex;gap:20px;align-items:center;} .lang-flags{display:flex;gap:8px;} .flag-btn{font-size:1.4rem;background:none;opacity:0.5;transition:0.2s;} .flag-btn.active{opacity:1;transform:scale(1.1);} .theme-toggle{font-size:1.2rem;background:none;color:var(--dark);} .status-bar{background:var(--white);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid rgba(0,0,0,0.05);position:fixed;top:60px;left:0;width:100%;z-index:999;box-shadow:0 2px 5px rgba(0,0,0,0.02);} .timer-section{display:flex;align-items:center;gap:15px;} .timer-display{font-family:"Courier New",monospace;font-size:1.2rem;font-weight:700;color:var(--dark);min-width:80px;} .timer-controls button{padding:5px 12px;border-radius:4px;font-weight:bold;font-size:0.8rem;} .btn-start{background:#e8f5e9;color:#2e7d32;padding-left:5px;} .btn-pause{background:#fff3e0;color:#ef6c00;} .progress-section{flex:1;max-width:600px;margin:0 30px;display:flex;flex-direction:column;gap:2px;} .progress-info{font-size:0.85rem;display:flex;justify-content:space-between;align-items:center;width:100%;} .progress-track{width:100%;height:8px;background:#eee;border-radius:4px;overflow:hidden;} .progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width 0.5s ease;} .stars-display{font-size:1.1rem;color:var(--primary);letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,0.1);} .welcome-msg{font-weight:bold;color:var(--secondary);margin-right:10px;} .ad-space{background:#f4f6f8;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;font-weight:bold;border-radius:8px;transition:0.3s;} .ad-space:hover{background:#e9ecef;border-color:var(--secondary);} .ad-header-banner{width:100%;max-width:1200px;height:90px;margin:10px auto 20px auto;} .ad-sidebar-rect{width:100%;height:250px;margin-top:20px;} .app-container{display:flex;max-width:1400px;margin:0 auto;padding:0 20px 20px 20px;gap:30px;} .sidebar{width:260px;flex-shrink:0;position:sticky;top:140px;height:calc(100vh - 150px);display:flex;flex-direction:column;} .nav-menu{background:var(--white);padding:20px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.03);flex:1;display:flex;flex-direction:column;gap:5px;overflow-y:auto;} .nav-group-title{font-size:0.75rem;text-transform:uppercase;color:#999;margin:10px 0 5px 10px;font-weight:700;} .nav-item{display:flex;align-items:center;padding:12px 15px;border-radius:10px;color:var(--gray);font-weight:600;cursor:pointer;transition:0.2s;font-size:0.95rem;} .nav-item:hover{background:var(--light);color:var(--secondary);} .nav-item.active{background:var(--secondary);color:var(--white);box-shadow:0 4px 15px rgba(221,0,0,0.2);} .nav-sub-item{padding-left:30px;font-size:0.9rem;} .main-content{flex:1;min-width:0;} .section{display:none;animation:fadeIn 0.4s ease;} .section.active{display:block;} .filter-container{margin-bottom:25px;padding:20px;border-radius:16px;background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-border);} .filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;} .glass-btn{background:rgba(255,255,255,0.5);padding:8px 16px;border-radius:8px;font-weight:600;font-size:0.9rem;border:1px solid var(--glass-border);transition:0.2s;} .glass-btn:hover{background:rgba(255,255,255,0.8);} .glass-btn.active{background:var(--secondary);color:var(--white);border-color:var(--secondary);} .glass-btn.type-active{background:linear-gradient(135deg,var(--secondary),#ff4d4d);color:white;border:none;} .flashcards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-w),1fr));gap:25px;} .flashcard{background-color:transparent;width:100%;height:var(--card-h);perspective:1000px;cursor:pointer;} .flashcard-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform 0.6s;transform-style:preserve-3d;box-shadow:0 4px 15px rgba(0,0,0,0.05);border-radius:16px;} .flashcard.flipped .flashcard-inner{transform:rotateY(180deg);} .flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background:var(--white);border:1px solid rgba(0,0,0,0.05);} .fc-type{font-size:0.8rem;text-transform:uppercase;color:var(--gray);margin-bottom:10px;} .fc-word{font-size:2.5rem;font-weight:800;color:var(--secondary);margin-bottom:5px;} .fc-level{position:absolute;top:15px;right:15px;font-weight:bold;color:var(--primary);background:#fff8e1;padding:4px 10px;border-radius:20px;} .fc-hint{font-size:0.85rem;color:#aaa;margin-top:20px;} .flashcard-back{transform:rotateY(180deg);background:#fdfdfd;} .fc-german{font-size:2rem;font-weight:bold;color:var(--dark);font-family:"Courier New",monospace;margin-bottom:15px;} .fc-sentences{text-align:left;width:100%;font-size:0.9rem;color:#28a745;margin-bottom:20px;line-height:1.5;} .fc-sent-row{margin-bottom:5px;} .fc-label{font-weight:bold;color:var(--secondary);display:block;margin-bottom:2px;} .btn-learn{width:100%;padding:12px;background:var(--success);color:white;border-radius:8px;font-weight:bold;display:flex;align-items:center;justify-content:center;gap:8px;transition:0.3s;} .btn-learn:hover{background:#218838;transform:translateY(-2px);} .btn-learn.learned{background:#ddd;color:#666;cursor:default;} .grammar-list{display:flex;flex-direction:column;gap:15px;} .grammar-item{background:var(--white);border-radius:12px;border:1px solid var(--border);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.03);} .grammar-header{padding:15px 20px;background:#fcfcfc;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.2s;border-bottom:1px solid transparent;} .grammar-header:hover{background:#f1f1f1;} .grammar-title{font-weight:700;font-size:1.1rem;color:var(--dark);} .grammar-badge{background:var(--secondary);color:white;padding:2px 10px;border-radius:12px;font-size:0.75rem;margin-left:10px;} .grammar-toggle-icon{transition:transform 0.3s ease;color:var(--gray);} .grammar-toggle-icon.rotate{transform:rotate(180deg);} .grammar-body p{white-space:pre-line;} .grammar-body{display:none;padding:20px;border-top:1px solid #eee;color:#444;line-height:1.6;background:#fff;animation:slideDown 0.3s ease;} .grammar-body.open{display:block;} .reading-content{background:var(--white);padding:30px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.03);line-height:1.8;margin-bottom:20px;} .vocab-list-reading{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;} .vocab-item-read{background:var(--light);padding:10px;border-radius:8px;border:1px solid #eee;} .vocab-de-bold{font-weight:bold;color:var(--secondary);display:block;} .exam-item{background:var(--white);padding:30px;border-radius:16px;border:1px solid var(--border);margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,0.03);transition:transform 0.2s ease,box-shadow 0.2s ease;} .exam-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.06);} .exam-q{font-weight:400;margin-bottom:20px;color:var(--dark);font-size:1.15rem;line-height:1.7;letter-spacing:0.015em;} .exam-q strong{font-weight:700;display:inline-block;margin-bottom:8px;color:var(--secondary);} .exam-opt{display:block;padding:8px 12px;border:1px solid #eee;border-radius:6px;margin-bottom:8px;cursor:pointer;transition:0.2s;} .exam-opt:hover{background:var(--light);border-color:#ccc;} .exam-opt.correct{background:#d4edda;border-color:#c3e6cb;color:#155724;} [data-theme="dark"] .exam-opt.correct{background:rgba(40,167,69,0.2);border-color:#28a745;color:#fff;} .exam-opt.wrong{background:#f8d7da;border-color:#f5c6cb;color:#721c24;} [data-theme="dark"] .exam-opt.wrong{background:rgba(220,53,69,0.2);border-color:#dc3545;color:#fff;} .sb-a2-p2-container{padding:20px;background:#fff;border-radius:8px;border:1px solid #ccc;margin-top:20px;} .word-bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:20px;padding:15px;background:#f8f9fa;border:1px solid #ddd;border-radius:8px;} .word-bank-item{background:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:0.95rem;display:flex;align-items:center;gap:8px;transition:all 0.2s;} .word-bank-item:hover{background:#e9ecef;border-color:#adb5bd;} .word-bank-item.selected{background:var(--secondary);color:#fff;border-color:var(--secondary);} .gap-clickable{display:inline-block;border-bottom:2px solid #c0392b;min-width:40px;padding:0 5px;text-align:center;cursor:pointer;font-weight:bold;color:#c0392b;margin:0 5px;transition:background 0.2s;} .gap-clickable:hover{background:rgba(192,57,43,0.1);} .gap-clickable.active-gap{background:rgba(192,57,43,0.2);border-bottom-width:3px;} .gap-clickable.filled{background:#d4edda;border-bottom:2px solid #28a745;color:#155724;} [data-theme="dark"] .sb-a2-p2-container{background:#222;border-color:#444;} [data-theme="dark"] .word-bank-grid{background:#1a1a1a;border-color:#333;} [data-theme="dark"] .word-bank-item{background:#333;border-color:#444;color:#fff;} [data-theme="dark"] .gap-clickable{border-bottom-color:#ff4d4d;color:#ff4d4d;} .admin-wrapper{background:var(--white);padding:30px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.05);} .admin-tabs{display:flex;border-bottom:2px solid #eee;margin-bottom:20px;overflow-x:auto;} .admin-tab{padding:10px 20px;cursor:pointer;font-weight:600;color:var(--gray);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;} .admin-tab.active{color:var(--secondary);border-bottom-color:var(--secondary);} .admin-content{display:none;} .admin-content.active{display:block;} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;} .form-group label{display:block;font-size:0.85rem;font-weight:bold;margin-bottom:5px;} .form-control{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;background:var(--light);} .btn-submit{grid-column:1/-1;background:var(--secondary);color:white;padding:12px;border-radius:6px;font-weight:bold;} .hidden{display:none;} @media (max-width:768px){.status-bar{flex-direction:column;height:auto;padding:15px;gap:10px;} .progress-section{width:100%;margin:0;} .app-container{flex-direction:column;} .sidebar{width:100%;position:static;height:auto;} .nav-menu{display:flex;flex-direction:column;padding:10px;} .nav-item{white-space:nowrap;} .nav-sub-item{padding-left:20px;} .flashcard{height:400px;} .ad-header-banner{height:60px;} .form-grid{grid-template-columns:1fr;} } @keyframes fadeIn{from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} } @keyframes slideDown{from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} } .reading-index-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;} [data-theme="dark"] .flashcard .fc-german{color:#ff4d4d;} .reading-index-box{width:28px;height:28px;border-radius:4px;background:#e8f5e9;color:#2e7d32;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:600;font-size:0.8rem;border:1px solid #c8e6c9;transition:none;} .reading-index-box:hover{transform:none !important;box-shadow:none !important;} .reading-index-box.read{background:#28a745 !important;color:white !important;border:none;} .reading-index-box.active{border:2px solid #1b5e20;background:#e8f5e9;} .reading-index-box.read.active{background:#28a745 !important;border:2px solid #145a32;} .reading-read-btn{margin-top:25px;padding:10px 20px;border-radius:6px;font-weight:bold;border:none;cursor:pointer;font-size:0.9rem;} .reading-read-btn.not-read{background:var(--secondary);color:white;} .reading-read-btn.is-read{background:#b30000;color:white;opacity:1;cursor:default;} .vocab-item-read strong{font-weight:700;color:#000;} [data-theme="dark"] .flashcard-back{background:#333;color:#f1f1f1;border:1px solid rgba(255,255,255,0.08);} [data-theme="dark"] .vocab-item-read strong{color:#ffffff;} [data-theme="dark"] .reading-index-box{color:#2e7d32;} [data-theme="dark"] .grammar-item{background:var(--white) !important;border:1px solid rgba(255,255,255,0.08) !important;box-shadow:0 4px 15px rgba(0,0,0,0.4);} [data-theme="dark"] .grammar-header{background:rgba(255,255,255,0.03) !important;border-bottom:1px solid rgba(255,255,255,0.05);} [data-theme="dark"] .grammar-header:hover{background:rgba(255,255,255,0.07) !important;} [data-theme="dark"] .grammar-title{color:#ffffff !important;} [data-theme="dark"] .grammar-body{background:transparent !important;color:#cccccc !important;border-top:1px solid rgba(255,255,255,0.05) !important;} [data-theme="dark"] .grammar-badge{background:var(--secondary);color:white;} [data-theme="dark"] .grammar-examples .example{background:rgba(255,255,255,0.03);color:var(--primary) !important;border-left:3px solid var(--primary);padding:8px;margin-top:5px;border-radius:4px;} [data-theme="dark"] .grammar-toggle-icon{color:var(--gray) !important;} @media (max-width:768px){body{padding-top:140px;padding-bottom:20px;} .app-container{flex-direction:column;padding:0 10px;gap:15px;} .sidebar{width:100%;height:auto;position:fixed;top:70px;left:0;z-index:998;background:var(--white);border-bottom:1px solid #ddd;box-shadow:0 4px 10px rgba(0,0,0,0.05);} .nav-menu{flex-direction:row;overflow-x:auto;white-space:nowrap;padding:10px;gap:10px;background:transparent;box-shadow:none;-webkit-overflow-scrolling:touch;border-radius:0;} .nav-item{font-size:0.85rem;padding:8px 12px;border-radius:20px;background:#f1f3f5;flex-shrink:0;} .nav-sub-item{padding-left:12px;} .nav-group-title{display:none;} .status-bar{top:auto;bottom:0;border-top:1px solid #ddd;border-bottom:none;padding:5px 15px;height:50px;flex-direction:row;gap:10px;z-index:1001;} .timer-section{font-size:0.8rem;} .flashcards-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:15px;padding-bottom:20px;grid-template-columns:none;} .flashcard{min-width:85vw;scroll-snap-align:center;height:60vh;} } .mobile-menu-btn{display:none;font-size:1.5rem;background:none;color:var(--dark);padding:5px;margin-left:10px;} .mobile-flashcard-controls{display:none;justify-content:center;gap:15px;margin-top:15px;margin-bottom:15px;} .arrow-btn{background:var(--primary);color:white;border-radius:50%;width:50px;height:50px;font-size:1.5rem;box-shadow:0 4px 10px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;transition:transform 0.2s;} .arrow-btn:active{transform:scale(0.9);} @media (max-width:768px){.mobile-menu-btn{display:block;} .sidebar{width:280px;height:100vh;position:fixed;top:0;left:-280px;z-index:1100;transition:left 0.3s ease;border-right:1px solid #ddd;padding-top:60px;} .sidebar.open{left:0;} #sidebarOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1099;} #sidebarOverlay.active{display:block;} .nav-menu{flex-direction:column;overflow-x:hidden;white-space:normal;background:var(--white);height:100%;border-radius:0;padding:20px;} .nav-item{background:transparent;border-radius:10px;} .nav-group-title{display:block;} .status-bar{position:relative;top:0;margin-top:-10px;margin-bottom:10px;background:transparent;border:none;box-shadow:none;justify-content:space-between;padding:0;} .status-bar .timer-section{background:var(--white);padding:5px 10px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.05);} .status-bar .stars-display{background:var(--white);padding:5px 10px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.05);display:block !important;} .mobile-flashcard-controls{display:flex;} } @media (max-width:768px){body{padding-top:60px;} .mobile-menu-btn{display:block !important;font-size:1.8rem !important;} .sidebar{width:100% !important;height:auto !important;max-height:0 !important;position:fixed !important;top:60px !important;left:0 !important;right:0 !important;z-index:1100 !important;overflow:hidden !important;transition:max-height 0.3s ease !important;background:var(--white) !important;border-bottom:1px solid #ddd !important;border-right:none !important;box-shadow:0 4px 10px rgba(0,0,0,0.1) !important;padding-top:0 !important;} .sidebar.open{max-height:70vh !important;overflow-y:auto !important;} #sidebarOverlay{top:60px !important;} .nav-menu{flex-direction:column !important;padding:15px !important;border-radius:0 !important;box-shadow:none !important;max-height:none !important;overflow-y:visible !important;overflow-x:hidden !important;white-space:normal !important;background:transparent !important;} .nav-item{font-size:0.9rem !important;padding:10px 15px !important;background:transparent !important;border-radius:10px !important;flex-shrink:1 !important;} .nav-sub-item{padding-left:25px !important;} .nav-group-title{display:block !important;margin-top:10px !important;} .ad-sidebar-rect{display:none !important;} .status-bar{position:fixed !important;top:60px !important;left:0 !important;bottom:auto !important;width:100% !important;height:auto !important;padding:8px 15px !important;flex-direction:row !important;justify-content:space-between !important;align-items:center !important;gap:10px !important;z-index:998 !important;background:var(--white) !important;border-bottom:1px solid rgba(0,0,0,0.05) !important;border-top:none !important;} .timer-section{flex-direction:row !important;gap:8px !important;font-size:0.85rem !important;} .timer-display{font-size:1rem !important;min-width:60px !important;} .timer-controls{display:flex !important;gap:5px !important;} .timer-controls button{padding:4px 8px !important;font-size:0.7rem !important;} .stars-display{font-size:0.9rem !important;} .app-container{padding-top:60px !important;padding-bottom:20px !important;flex-direction:column !important;gap:15px !important;} .main-content{width:100% !important;} .mobile-flashcard-controls{display:flex !important;} .flashcards-grid{display:flex !important;overflow-x:auto !important;scroll-snap-type:x mandatory !important;gap:15px !important;padding-bottom:10px !important;-webkit-overflow-scrolling:touch !important;grid-template-columns:none !important;} .flashcard{min-width:85vw !important;max-width:85vw !important;scroll-snap-align:center !important;flex-shrink:0 !important;} } @media (max-width:768px){body{padding-top:60px !important;} header{flex-wrap:wrap;padding:10px 15px;} .logo{font-size:1.2rem;} .user-controls{display:none !important;} .mobile-menu-btn{display:block !important;font-size:1.5rem !important;} .status-bar{position:fixed !important;top:60px !important;left:0 !important;width:100% !important;height:auto !important;padding:10px 15px !important;flex-direction:column !important;gap:8px !important;z-index:998 !important;background:var(--white) !important;border-bottom:1px solid rgba(0,0,0,0.05) !important;} .status-bar .timer-section{display:flex !important;flex-direction:row !important;align-items:center !important;gap:10px !important;width:100% !important;justify-content:space-between !important;} .timer-display{font-size:0.9rem !important;} .timer-controls{display:flex !important;gap:5px !important;} .timer-controls button{padding:3px 8px !important;font-size:0.7rem !important;} .stars-display{font-size:0.9rem !important;} .status-bar::after{content:'';display:block;width:100%;} .status-bar{display:flex !important;flex-wrap:wrap !important;} .sidebar{width:100% !important;height:auto !important;max-height:0 !important;position:fixed !important;top:120px !important;left:0 !important;z-index:1100 !important;overflow:hidden !important;transition:max-height 0.3s ease !important;background:var(--white) !important;border-bottom:1px solid #ddd !important;box-shadow:0 4px 10px rgba(0,0,0,0.1) !important;} .sidebar.open{max-height:60vh !important;overflow-y:auto !important;} #sidebarOverlay{top:120px !important;} .nav-menu{flex-direction:column !important;padding:15px !important;overflow-x:hidden !important;} .nav-item{background:transparent !important;border-radius:10px !important;color:var(--dark) !important;} .nav-item.active{background:var(--secondary) !important;color:#fff !important;font-weight:bold;} .nav-group-title{display:block !important;} .app-container{padding-top:130px !important;} .flashcards-grid{display:flex !important;overflow-x:auto !important;scroll-snap-type:x mandatory !important;gap:15px !important;-webkit-overflow-scrolling:touch !important;} .flashcard{min-width:85vw !important;max-width:85vw !important;scroll-snap-align:center !important;flex-shrink:0 !important;} .mobile-flashcard-controls{display:flex !important;} .ad-sidebar-rect{display:none !important;} } .user-input-mobile{display:none;width:100%;margin-top:5px;} .stars-display-desktop{display:inline;} @media (max-width:768px){.user-input-mobile{display:block !important;} .stars-display-desktop{display:none !important;} } .btn-timer-toggle{padding:5px 12px;border-radius:4px;font-weight:bold;font-size:0.8rem;background:#e8f5e9;color:#2e7d32;transition:all 0.2s;border:none;cursor:pointer;} .btn-timer-toggle:hover{background:#c8e6c9;transform:translateY(-1px);} .btn-timer-toggle:active{transform:translateY(1px);} @media (max-width:768px){.timer-section{gap:5px !important;} .timer-display{margin-right:0px;} .btn-timer-toggle{padding:4px 8px;margin-left:-5px;} } @media (max-width:768px){.timer-section{gap:5px !important;} .btn-timer-toggle{font-size:0.75rem !important;padding:4px 10px !important;margin:0 5px !important;} } .grammar-learned{opacity:0.7;background:#f0f0f0;} .rank-display{display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 15px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px;color:white;position:relative;} .rank-points{font-size:1rem;font-weight:bold;} .rank-name{font-size:0.85rem;opacity:0.9;text-transform:uppercase;letter-spacing:1px;} .info-btn{position:absolute;top:-5px;right:-5px;background:white;border:2px solid #667eea;border-radius:50%;width:24px;height:24px;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s;} .info-btn:hover{transform:scale(1.1);} .modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn 0.3s;} .modal-content{background:white;padding:30px;border-radius:15px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,0.3);animation:slideUp 0.3s;} @keyframes fadeIn{from{opacity:0;} to{opacity:1;} } @keyframes slideUp{from{transform:translateY(50px);opacity:0;} to{transform:translateY(0);opacity:1;} } @media (max-width:768px){.rank-display{padding:5px 10px;gap:3px;} .rank-points{font-size:0.85rem;} .rank-name{font-size:0.7rem;} .info-btn{width:20px;height:20px;font-size:0.8rem;} .modal-content{padding:20px;} } @media (max-width:768px){.status-bar{position:fixed !important;top:60px !important;left:0 !important;width:100% !important;padding:10px 15px !important;flex-direction:column !important;gap:10px !important;z-index:998 !important;background:var(--white) !important;border-bottom:1px solid rgba(0,0,0,0.05) !important;} .timer-section{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;width:100% !important;gap:0 !important;} .timer-display{font-size:1rem !important;min-width:70px !important;flex-shrink:0 !important;} .btn-timer-toggle{font-size:0.75rem !important;padding:6px 12px !important;margin:0 !important;margin-left:5px !important;flex-shrink:0 !important;} .rank-display{padding:8px 12px !important;gap:4px !important;flex-shrink:0 !important;margin-left:auto !important;} .rank-points{font-size:0.85rem !important;} .rank-name{font-size:0.7rem !important;} .info-btn{width:20px !important;height:20px !important;font-size:0.75rem !important;} .progress-section{display:block !important;margin-top:10px;padding:8px 0;} .progress-info{font-size:0.75rem !important;margin-bottom:5px !important;} .progress-track{height:6px !important;} #welcomeContainer{display:none !important;} .stars-display-desktop{display:none !important;} .app-container{padding-top:180px !important;} } .section-progress-container{background:#f8f9fa;padding:15px;border-radius:10px;margin-bottom:20px;box-shadow:0 2px 5px rgba(0,0,0,0.05);} .section-progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:0.9rem;color:#666;} .section-progress-info strong{color:var(--primary);font-size:1rem;} .section-progress-track{width:100%;height:12px;background:#e0e0e0;border-radius:20px;overflow:hidden;position:relative;} .section-progress-fill{height:100%;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:20px;transition:width 0.5s ease;width:0%;box-shadow:0 2px 5px rgba(102,126,234,0.3);} @media (max-width:768px){.section-progress-container{padding:10px;margin-bottom:15px;} .section-progress-info{font-size:0.8rem;} .section-progress-info strong{font-size:0.9rem;} .section-progress-track{height:10px;} } .brief-container{display:flex;flex-direction:column;gap:15px;} .brief-header{font-weight:700;color:var(--secondary);font-size:1.1rem;margin-bottom:5px;border-bottom:2px solid var(--border);padding-bottom:5px;} .brief-label{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray);margin-bottom:5px;display:block;font-weight:600;} .brief-task-box{background:var(--bg-body);padding:15px;border-radius:8px;border-left:4px solid var(--secondary);color:var(--dark);font-size:1rem;line-height:1.6;} .brief-answer-trigger{margin-top:15px;} .brief-answer-box{background:var(--card-bg);padding:20px;border-radius:8px;border:1px solid var(--border);margin-top:15px;color:var(--dark);font-family:inherit;line-height:1.7;display:none;box-shadow:inset 0 2px 5px rgba(0,0,0,0.03);position:relative;} .brief-answer-box::before{content:"📝";position:absolute;top:10px;right:15px;opacity:0.5;font-size:1.5rem;} [data-theme="dark"] .brief-task-box{background:rgba(255,255,255,0.05);border-left-color:var(--secondary);} [data-theme="dark"] .brief-answer-box{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.1);} .btn-timer-coffee{background:#fff;border:1px solid #ddd;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:transform 0.2s;box-shadow:0 2px 5px rgba(0,0,0,0.05);margin-left:5px;} .btn-timer-coffee:hover{transform:scale(1.1);background:#fdfdfd;} .btn-timer-coffee:active{transform:scale(0.95);} @media (max-width:768px){.btn-timer-coffee{width:28px;height:28px;font-size:1rem;margin-left:0;} } .reading-card{background:var(--white);border-radius:16px;padding:25px;margin-bottom:20px;box-shadow:0 4px 15px rgba(0,0,0,0.03);border:1px solid var(--border);} .reading-header{display:flex;align-items:center;margin-bottom:15px;border-bottom:2px solid var(--light);padding-bottom:10px;} .reading-badge{background:var(--primary);color:white;padding:4px 10px;border-radius:12px;font-size:0.75rem;font-weight:bold;margin-right:15px;} .reading-title{font-size:1.2rem;font-weight:700;color:var(--dark);} .reading-instruction{font-weight:600;color:var(--secondary);margin-bottom:15px;font-style:italic;} .reading-body{line-height:1.8;color:var(--dark);font-size:1rem;} .reading-questions-box{background:var(--bg-body);border-radius:12px;padding:20px;margin-bottom:20px;border-left:4px solid var(--secondary);} .reading-question-item{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid rgba(0,0,0,0.05);} .reading-question-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;} .rq-text{font-weight:500;color:var(--dark);} .reading-answer-section{text-align:center;} .btn-show-reading-answer{background:var(--white);border:1px solid var(--border);padding:10px 25px;border-radius:30px;color:var(--gray);font-size:0.9rem;font-weight:600;cursor:pointer;transition:0.3s;box-shadow:0 2px 5px rgba(0,0,0,0.05);} .btn-show-reading-answer:hover{background:var(--secondary);color:white;border-color:var(--secondary);} .reading-answer-content{margin-top:20px;background:#e8f5e9;color:#2e7d32;padding:20px;border-radius:12px;text-align:left;line-height:1.6;border:1px solid #c8e6c9;animation:slideDown 0.3s ease;} @keyframes slideDown{from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} } [data-theme="dark"] .reading-nav-btn{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);} [data-theme="dark"] .reading-card{background:rgba(255,255,255,0.03);} [data-theme="dark"] .reading-answer-content{background:rgba(46,125,50,0.2);color:#a5d6a7;border-color:rgba(46,125,50,0.4);} .phrases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px;} .phrase-card{background:var(--white);padding:25px;border-radius:16px;border:1px solid var(--border);box-shadow:0 4px 15px rgba(0,0,0,0.03);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:120px;} .phrase-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px rgba(0,0,0,0.08);border-color:var(--primary);} .phrase-de{font-size:1.15rem;font-weight:700;color:var(--dark);line-height:1.4;margin-bottom:12px;} .phrase-translation{font-size:0.95rem;color:var(--gray);font-style:italic;opacity:0.6;transition:opacity 0.3s;} .phrase-card:hover .phrase-translation{opacity:1;color:var(--secondary);} .phrase-badge{position:absolute;top:12px;right:12px;font-size:0.65rem;font-weight:800;padding:3px 8px;border-radius:20px;background:var(--light);color:var(--gray);text-transform:uppercase;} .phrase-cat{font-size:0.65rem;text-transform:uppercase;color:var(--primary);font-weight:700;margin-bottom:5px;letter-spacing:0.5px;} [data-theme="dark"] .phrase-card{background:#1e1e1e;border-color:#333;} [data-theme="dark"] .phrase-de{color:#fff;} .reading-nav-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:25px;padding:15px;background:var(--white);border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.03);border:1px solid var(--border);} .reading-nav-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg-body);color:var(--dark);font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;font-size:0.9rem;} .reading-nav-btn:hover{border-color:var(--secondary);color:var(--secondary);} .reading-nav-btn.active{background:var(--secondary);color:white;border-color:var(--secondary);transform:scale(1.1);box-shadow:0 2px 5px rgba(0,0,0,0.1);} .site-footer{background:var(--white);padding:40px 20px;margin-top:60px;border-top:1px solid var(--border);text-align:center;transition:background 0.3s,border-color 0.3s;} .footer-content{max-width:1200px;margin:0 auto;} .footer-links{display:flex;justify-content:center;gap:30px;margin-bottom:20px;flex-wrap:wrap;} .footer-links a{color:var(--gray);text-decoration:none;font-weight:500;transition:color 0.2s;font-size:0.95rem;} .footer-links a:hover{color:var(--secondary);} .copyright{color:#999;font-size:0.85rem;} .legal-card{background:var(--white);padding:40px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.05);max-width:900px;margin:30px auto;line-height:1.6;} .legal-card h2{font-size:2rem;margin-bottom:25px;color:var(--dark);border-bottom:3px solid var(--primary);display:inline-block;padding-bottom:5px;} .legal-content h3{margin-top:25px;margin-bottom:15px;color:var(--dark);font-size:1.2rem;} .legal-content p{margin-bottom:15px;color:var(--gray);} .legal-content ul{margin-bottom:20px;padding-left:20px;color:var(--gray);} .legal-content li{margin-bottom:8px;} .contact-methods{display:flex;flex-direction:column;gap:15px;margin-top:20px;} .contact-item{display:flex;align-items:center;gap:15px;font-size:1.1rem;color:var(--dark);} .contact-item i{color:var(--secondary);font-size:1.4rem;width:25px;} [data-theme="dark"] .site-footer{background:#111;border-top-color:#222;} [data-theme="dark"] .legal-card{background:#1e1e1e;box-shadow:0 10px 30px rgba(0,0,0,0.2);} [data-theme="dark"] .legal-card h2,[data-theme="dark"] .legal-content h3,[data-theme="dark"] .contact-item{color:#eee;} [data-theme="dark"] .legal-content p,[data-theme="dark"] .legal-content ul,[data-theme="dark"] .footer-links a,[data-theme="dark"] .copyright{color:#bbb;} @media (max-width:768px){.legal-card{padding:25px;margin:15px;} .footer-links{gap:15px;} }