:root { /* Grundfarben (white-label-fähig: per Admin-Panel überschreibbar via theme.css.php) */ --primary-color: #4CAF50; --primary-hover: #3d8c40; --secondary-color: #2E7D32; /* Verlauf nutzt die Variablen -> ändert sich automatisch mit Primär/Sekundär */ --primary-gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); --text-main: #ffffff; --text-muted: #94a3b8; /* Glassmorphism Farben & Effekte */ --glass-bg: rgba(25, 25, 35, 0.55); --glass-border-light: rgba(255, 255, 255, 0.15); --glass-border-dark: rgba(0, 0, 0, 0.2); --glass-hover: rgba(255, 255, 255, 0.08); /* Systemfarben */ --success: #4ade80; --danger: #f87171; --warning: #fbbf24; /* NEU: App-Variablen für Android Fullscreen */ --bottom-nav-height: 80px; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* FIX: html Ebene dunkel färben, damit auf Tablets (iPad/Android) der Statusbalken/Sichere Bereich oben nicht weiß durchschimmert */ html { /* Verlauf liegt auf und füllt damit IMMER den ganzen Viewport – auch wenn der Body (bei kurzem Inhalt) kürzer ist. Verhindert den dunklen Streifen unten. */ background-color: #0f172a; background-image: linear-gradient(135deg, #1e3c72, #2a5298, #1a2a6c); background-attachment: fixed; background-size: 200% 200%; overflow-x: hidden; /* kappt horizontalen Überlauf OHNE position:sticky zu brechen (body bleibt frei) */ } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: transparent; /* Verlauf liegt auf (füllt immer den Viewport) */ color: var(--text-main); line-height: 1.7; /* KEIN min-height:100vh: würde mit dem Lesbarkeits-Zoom zu 115vh und damit zu Leerraum/zu-weitem-Scrollen führen. */ /* Text-Markierung plattformweit deaktiviert (Ausnahme: admin_dashboard via admin_dashboard.css) */ -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Eingabefelder & Editoren MÜSSEN markierbar bleiben (sonst kein Tippen/Bearbeiten) */ input, textarea, select, [contenteditable], [contenteditable] *, .ow-editor-area, .ow-editor-area * { -webkit-user-select: text; -moz-user-select: text; user-select: text; } .mr-2 { margin-right: 8px; } .mb-4 { margin-bottom: 16px; } /* Color Overrides */ .text-gray-800, .text-gray-700 { color: #ffffff !important; } .text-blue-600 { color: #60a5fa !important; } .text-red-600 { color: #f87171 !important; } .text-green-600 { color: #4ade80 !important; } .text-purple-600 { color: #c084fc !important; } .text-orange-600 { color: #fb923c !important; } /* Premium Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;} ::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); } /* App Header (Sticky & Frosted) */ .app-header { background: rgba(15, 15, 25, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: calc(env(safe-area-inset-top, 0px) + 16px) 32px 16px 32px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; box-shadow: 0 4px 30px rgba(0,0,0,0.4); } .header-left, .header-right { display: flex; align-items: center; gap: 16px; } .back-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); } .back-btn:hover { background: var(--primary-color); border-color: var(--primary-color); transform: scale(1.1) rotate(-5deg); box-shadow: 0 0 15px rgba(76, 175, 80, 0.4); } .header-title { font-weight: 800; font-size: 22px; color: var(--text-main); flex: 1; margin: 0; letter-spacing: 0.5px;} /* Buttons & Badges */ .badge-warning { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); padding: 6px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(239,68,68,0.1);} .badge-xp { background: rgba(250, 204, 21, 0.15); color: #fef08a; border: 1px solid rgba(250, 204, 21, 0.3); padding: 8px 18px; border-radius: 20px; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(250,204,21,0.1);} .btn-primary { background: var(--primary-gradient); color: white; border: 1px solid rgba(255,255,255,0.1); padding: 12px 28px; border-radius: 12px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1rem; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5); border-color: rgba(255,255,255,0.3); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; filter: grayscale(50%);} .btn-outline { background: rgba(255,255,255,0.03); color: var(--text-main); border: 1px solid rgba(255,255,255,0.15); padding: 12px 28px; border-radius: 12px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--text-main); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .btn-finish { background: var(--primary-gradient); color: white; border: 1px solid rgba(255,255,255,0.2); padding: 18px 48px; font-size: 20px; font-weight: 800; border-radius: 40px; cursor: pointer; box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; letter-spacing: 0.5px; } .btn-finish:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(76, 175, 80, 0.6); } /* Fortschrittsbalken (Glowing) */ .lesson-progress-bar-container { width: 100%; height: 4px; background: rgba(0,0,0,0.4); position: sticky; top: 77px; z-index: 49; } .lesson-progress-fill { height: 100%; background: var(--success); width: 0%; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 12px var(--success), 0 0 4px white; } /* --- Hauptcontainer --- */ .main-content { padding: 40px 20px; } .lesson-container { max-width: 1200px; margin: 0 auto; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--glass-border-light); border-radius: 32px; padding: 60px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); position: relative; } /* Base Layout */ .block-container { position: relative; margin-bottom: 24px; display: flex; gap: 20px; align-items: flex-start; } /* Element .block-content ist komplett unsichtbar und bereitet nur den Raum */ .block-content { flex: 1; min-width: 0; } .completion-status { width: 32px; height: 32px; border-radius: 50%; color: rgba(255,255,255,0.15); font-size: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 4px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: help; } .completion-status.completed { color: var(--success); text-shadow: 0 0 15px rgba(74, 222, 128, 0.6); transform: scale(1.15); } .completion-status.completed i::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; } .block-hidden-teacher { border: 2px dashed rgba(239, 68, 68, 0.4); padding: 24px; border-radius: 16px; background: repeating-linear-gradient(45deg, rgba(239,68,68,0.05), rgba(239,68,68,0.05) 10px, transparent 10px, transparent 20px); } .hidden-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--danger); color: white; padding: 4px 16px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; z-index: 10; display:flex; align-items:center; gap:6px; box-shadow: 0 4px 15px rgba(239,68,68,0.4); } /* Typography & Basic Blocks (Schweben jetzt völlig frei) */ .block-heading { font-size: 32px; font-weight: 800; margin-bottom: 12px; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.5); letter-spacing: -0.5px;} .block-text { font-size: 18px; line-height: 1.8; margin-bottom: 12px; color: var(--text-muted); font-weight: 400;} .block-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(0,0,0,0.2); margin: 32px 0; } /* KORREKTUR: Zitat-Icon rutscht nicht mehr raus, saubere Padding-Struktur */ .block-quote { background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(255,255,255,0.02)); border-left: 4px solid var(--primary-color); padding: 32px 40px 32px 72px; /* Extra Platz nach links für das Icon */ border-radius: 0 16px 16px 0; position: relative; margin-bottom: 24px; box-shadow: inset 0 2px 15px rgba(0,0,0,0.2); } .quote-icon { position: absolute; top: 32px; left: 24px; /* Sicher innerhalb der Box platziert! */ font-size: 28px; color: var(--primary-color); opacity: 0.5; } .quote-text { font-size: 20px; font-style: italic; color: var(--text-main); position: relative; z-index: 2; line-height: 1.7;} .quote-author { margin-top: 12px; font-weight: 800; color: var(--primary-color); font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; position: relative; z-index: 2;} .block-alert { padding: 20px; border-radius: 12px; display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; background: rgba(0,0,0,0.2); border-left: 4px solid; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .block-alert i { font-size: 28px; margin-top: 2px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));} .alert-content { font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--text-main); } .block-math { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); color: white; padding: 24px; border-radius: 16px; margin-bottom: 24px; overflow-x: auto; text-align: center; font-size: 24px; box-shadow: inset 0 4px 15px rgba(0,0,0,0.5); } /* Multimedia */ .block-image { width: 100%; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.1);} .block-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.1);} .block-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .block-audio { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); padding: 20px 24px; border-radius: 16px; display: flex; align-items: center; gap: 20px; margin-bottom: 24px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);} .audio-icon { font-size: 32px; color: var(--primary-color); filter: drop-shadow(0 2px 5px rgba(76,175,80,0.4));} .block-iframe { border-radius: 16px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); background: white; border: 1px solid rgba(255,255,255,0.1);} .block-iframe iframe { width: 100%; min-height: 500px; border: none; display: block; } .block-download { display: flex; align-items: center; gap: 24px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.15); padding: 20px 24px; border-radius: 16px; text-decoration: none; margin-bottom: 24px; transition: all 0.3s; box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .block-download:hover { transform: translateY(-4px); background: rgba(255,255,255,0.12); border-color: var(--primary-color); box-shadow: 0 12px 25px rgba(0,0,0,0.3);} .dl-icon { font-size: 44px; color: var(--primary-color); filter: drop-shadow(0 4px 8px rgba(76,175,80,0.4));} .dl-name { font-size: 18px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; } .dl-sub { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;} /* ========================================================= DAS PREMIUM-DESIGN FÜR INTERAKTIVE KARTEN (ABGABEN ETC.) ========================================================= */ .block-upload, .block-poll, .block-forum, .block-cloze, .block-checklist, .block-flashcard, .block-glossary { background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2)); border: 1px solid rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); margin-bottom: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .block-upload:hover, .block-poll:hover, .block-forum:hover, .block-cloze:hover, .block-checklist:hover, .block-flashcard:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.15); } /* Nahtlose Verbindung von Aufgabe und Lehrer-Auswertung */ .block-upload:has(+ .teacher-eval-footer), .block-poll:has(+ .teacher-eval-footer), .block-forum:has(+ .teacher-eval-footer), .block-cloze:has(+ .teacher-eval-footer), .block-checklist:has(+ .teacher-eval-footer), .block-flashcard:has(+ .teacher-eval-footer), .block-glossary:has(+ .teacher-eval-footer) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; border-bottom: none; } /* Glossary inside Card */ .block-glossary { padding: 24px 32px; border-left: 4px solid var(--primary-color); border-radius: 0 20px 20px 0; } .glossary-term { font-size: 22px; font-weight: 800; color: var(--text-main); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px;} .glossary-term i { color: var(--primary-color); } .glossary-def { font-size: 16px; color: var(--text-muted); line-height: 1.7; } /* Poll inside Card */ .poll-question { font-size: 20px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; line-height: 1.4;} .poll-options { display: flex; flex-direction: column; gap: 12px; } .poll-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 14px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--text-main); text-align: left; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; } .poll-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--primary-color); transform: translateX(5px);} .poll-btn.voted { background: var(--primary-gradient); color: white; border-color: transparent; box-shadow: 0 4px 15px rgba(76,175,80,0.4); transform: scale(1.02);} /* Forum inside Card */ .forum-topic { font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px;} .forum-desc { font-size: 16px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.7;} .forum-comments { display: flex; flex-direction: column; gap: 12px; } .forum-comment { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 16px; border-left: 4px solid var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.1);} .forum-comment-name { font-size: 12px; color: var(--primary-color); font-weight: 800; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;} .forum-comment-text { font-size: 15px; color: var(--text-main); line-height: 1.6;} .forum-textarea { width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 16px; border-radius: 12px; min-height: 80px; outline: none; font-family: inherit; resize: vertical; margin-bottom: 12px; font-size: 15px;} .forum-textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(76,175,80,0.2);} /* Cloze inside Card */ .cloze-header { font-size: 13px; font-weight: 800; color: var(--primary-color); text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1.5px; } .cloze-body { font-size: 20px; line-height: 2.4; color: var(--text-main); margin-bottom: 24px; font-weight: 500;} .cloze-input { border: none; border-bottom: 3px solid var(--primary-color); background: rgba(255,255,255,0.08); padding: 4px 12px; font-family: inherit; font-size: inherit; color: white; font-weight: 800; width: 140px; text-align: center; transition: all 0.3s; outline: none; border-radius: 8px 8px 0 0; margin: 0 6px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } .cloze-input:focus { background: rgba(255,255,255,0.15); border-bottom-color: var(--success);} .cloze-input.correct { border-bottom-color: var(--success); color: var(--success); background: rgba(76, 175, 80, 0.15); text-shadow: 0 0 10px rgba(76,175,80,0.4);} /* Checklist inside Card */ .checklist-title { font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; } .checklist-items { display: flex; flex-direction: column; gap: 12px; } .checklist-item { display: flex; align-items: center; gap: 16px; cursor: pointer; user-select: none; padding: 4px 0; transition: 0.2s;} .checklist-item:hover { transform: translateX(5px); } .checklist-item input { display: none; } .checkmark { width: 28px; height: 28px; border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s; } .checklist-item:hover .checkmark { border-color: var(--primary-color); } .checklist-item input:checked ~ .checkmark { background: var(--primary-color); border-color: var(--primary-color); box-shadow: 0 0 15px rgba(76,175,80,0.5);} .checklist-item input:checked ~ .checkmark::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: white; font-size: 14px; } .check-text { font-size: 17px; color: var(--text-main); transition: 0.3s; line-height: 1.5; font-weight: 500;} .checklist-item input:checked ~ .check-text { color: var(--text-muted); text-decoration: line-through; opacity: 0.5;} /* Flashcard */ .block-flashcard { background-color: transparent; perspective: 1000px; height: 260px; cursor: pointer; } .flashcard-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; } .block-flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); } .flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); } .flashcard-front { background: linear-gradient(145deg, rgba(40, 40, 55, 0.9), rgba(20, 20, 30, 0.8)); border: 1px solid rgba(255,255,255,0.1); color: white; font-size: 22px; font-weight: 800; backdrop-filter: blur(10px);} .flashcard-hint { position: absolute; bottom: 16px; font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; display:flex; align-items:center; gap:8px; letter-spacing: 1px;} .flashcard-back { background: var(--primary-gradient); border: 1px solid rgba(255,255,255,0.2); color: white; transform: rotateY(180deg); font-size: 20px; font-weight: 500; } /* Upload inside Card */ .upload-title { font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; } .teacher-view .upload-title { justify-content: flex-start; margin-bottom: 0; } .mode-badge { background: rgba(255,255,255,0.1); color: var(--text-main); padding: 4px 10px; border-radius: 8px; font-size: 12px; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; display: inline-block; border: 1px solid rgba(255,255,255,0.1);} .upload-desc { font-size: 17px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.7; } .teacher-view .upload-desc { margin: 16px 0; color: var(--text-main); } .file-name-display { font-size: 15px; font-weight: 700; color: var(--primary-color); margin-top:16px;} .upload-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; margin-bottom: 20px; } .team-status-box { text-align: left; } /* ========================================================= DAS ACCORDION (Themenbereich - Dünn & Elegant befreit) ========================================================= */ .block-section { margin-bottom: 40px; /* BEFREITES DESIGN: Kein Kasten, kein Kasten-im-Kasten mehr! */ background: transparent; border: none; box-shadow: none; overflow: visible; } .section-summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(0,0,0,0.2)); border: 1px solid rgba(255,255,255,0.15); border-left: 4px solid var(--primary-color); border-radius: 12px; cursor: pointer; color: var(--text-main); list-style: none; transition: 0.3s; outline: none; box-shadow: 0 6px 15px rgba(0,0,0,0.15); } .section-summary::-webkit-details-marker { display: none; } .section-summary:hover { background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(0,0,0,0.3)); transform: translateX(4px); border-color: rgba(255,255,255,0.25); } .summary-content { display: flex; align-items: center; gap: 16px; } .summary-content span { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; text-shadow: 0 2px 5px rgba(0,0,0,0.4); } .summary-content i { font-size: 24px; color: var(--primary-color); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));} .toggle-icon { color: var(--text-muted); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size: 20px;} .block-section[open] .toggle-icon { transform: rotate(180deg); color: var(--primary-color);} .block-section[open] .section-summary { border-bottom-color: rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); margin-bottom: 16px; } .section-body { /* Nur noch eine dezente Einrückung mit Führungslinie, KEINE innere Box mehr! */ padding: 12px 0 8px 32px; margin-left: 12px; border-left: 2px dashed rgba(255,255,255,0.15); animation: slideDown 0.4s ease-out; } .empty-section { color: var(--text-muted); font-style: italic; font-weight: 600; padding: 16px 0; text-align: left; font-size: 16px;} /* ========================================================= NAHTLOSE LEHRER AUSWERTUNG (Dockt sich unten an) ========================================================= */ .teacher-eval-footer { padding: 16px 32px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 0 0 20px 20px; /* Passt genau zum Radius der Karten */ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .teacher-eval-footer .eval-stats { font-weight: 800; color: var(--warning); font-size: 15px; display: flex; align-items: center; gap: 12px; letter-spacing: 0.5px; } .teacher-eval-footer .eval-stats i { font-size: 18px; filter: drop-shadow(0 2px 4px rgba(251,191,36,0.4)); } /* Modals (Popups z.B. für Teamwahl) */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: 0.3s; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background: linear-gradient(145deg, #2a2a35, #1f1f2a); width: 90%; max-width: 480px; border-radius: 24px; box-shadow: 0 25px 50px rgba(0,0,0,0.6); color: var(--text-main); transform: scale(0.95); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; border: 1px solid rgba(255,255,255,0.1);} .modal-overlay.active .modal { transform: scale(1); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.05); } .modal-header h3 { margin: 0; font-size: 20px; color: var(--text-main); font-weight: 800;} .modal-body { padding: 24px; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================== APP NAVIGATION (Unten am Handy & Tablet) ========================================== */ .mobile-app-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; /* MASSIVE FARBE: Sperrt alles ab, was "dahinter" weiterrutscht */ background: #0f172a; border-top: 1px solid rgba(255,255,255,0.1); z-index: 1000; padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-app-nav-inner { display: flex; justify-content: space-around; padding: 10px 0; } .app-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); text-decoration: none; font-size: 11px; font-weight: 700; flex: 1; transition: 0.2s; text-transform: uppercase; } .app-nav-item i { font-size: 20px; margin-bottom: 2px; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .app-nav-item.active { color: var(--primary-color); } .app-nav-item.active i { transform: scale(1.15) translateY(-2px); filter: drop-shadow(0 4px 6px rgba(76, 175, 80, 0.5)); } /* ========================================== ANPASSUNGEN FÜR SMARTPHONES, TABLETS & VERKLEINERTE PC-FENSTER ========================================== */ @media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) { /* Header auf Mobile/Tablet optimieren. env() für die Notch! */ .app-header { padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px 16px !important; } .header-title { font-size: 18px !important; } .back-btn { width: 36px !important; height: 36px !important; } /* App Navigation immer erzwingen */ .mobile-app-nav { display: block !important; } /* Buttons auf Mobile in voller Breite */ .btn-primary, .btn-outline, .btn-danger { width: 100%; justify-content: center; } /* Modals auf Mobile auf 100% Breite setzen */ .modal { width: 95%; max-height: 95vh; margin: 10px; border-radius: 16px; } .modal-header { padding: 16px; } .modal-body { padding: 16px; } .modal-footer { padding: 16px; flex-direction: column; } /* Toasts in der Mitte anzeigen & über der Navigation halten */ #toast-container { bottom: 80px; right: 10px; left: 10px; } .toast { width: 100%; justify-content: center; } /* Etwas weniger Padding nach unten für den gesamten Inhalt */ body { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 10px) !important; } /* --- OVERRIDES GEGEN DIE DASHBOARD.CSS FÜR TABLETS --- */ .hide-on-mobile { display: none !important; } .mobile-menu-btn { display: flex !important; } /* Profil-Widget in einen kleinen, runden Button verwandeln */ .profile-widget { padding: 4px !important; border-radius: 50% !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .header-avatar { width: 42px !important; height: 42px !important; border-color: rgba(255,255,255,0.2) !important; } /* Den Hauptinhalt auf volle Breite zwingen, da die Sidebar ja jetzt schwebt */ .dashboard-wrapper { display: block !important; margin-left: 0 !important; } .dashboard-main { width: 100% !important; margin-left: 0 !important; } /* Das Dashboard/Menü von der Seite (Sidebar) ZWINGEND als Mobile-Overlay anzeigen */ .dashboard-sidebar { position: fixed !important; top: 0 !important; left: -100% !important; /* Versteckt außerhalb des Bildschirms */ width: 280px !important; height: 100vh !important; z-index: 2000 !important; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; padding-top: calc(env(safe-area-inset-top, 0px) + 20px) !important; padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 20px) !important; background: #0f172a !important; /* Dunkler Hintergrund zur Sicherheit */ } .dashboard-sidebar.open { left: 0 !important; /* Bei Klick auf Hamburger-Menü einfahren */ } } /* ========================================== PC LESBARKEITS-ZOOM (bessere Lesbarkeit, v.a. für ältere Nutzer) Vergrößert auf Desktop alles um 15%. Das ist jetzt SICHER, weil KEIN Layout mehr height:100vh / min-height:100vh verwendet – sonst würde der Zoom diese vh-Höhen auf 115vh aufblähen (Leerraum bzw. abgeschnittene Inhalte). Der fixe Hintergrund füllt den Bildschirm unabhängig vom Zoom. ========================================== */ @media (min-width: 1025px) and (pointer: fine) { body { zoom: 1.15; } } /* ========================================== OKTOWISE UX: Lade-Balken, Offline-Banner, Spinner, Skeleton, Fehler-Overlay (global; Verhalten via assets/js/oktowise-ux.js) ========================================== */ #ow-loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--primary-color), #8b5cf6); box-shadow: 0 0 10px var(--primary-color); z-index: 99999; opacity: 0; transition: width .25s ease, opacity .4s ease; pointer-events: none; } #ow-loadbar.active { opacity: 1; } .ow-offline-banner { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%) translateY(-160%); background: linear-gradient(145deg, #7f1d1d, #b91c1c); color: #fff; padding: 12px 22px; border-radius: 30px; font-weight: 800; font-size: 14px; z-index: 99999; box-shadow: 0 12px 30px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 10px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); max-width: 92vw; } .ow-offline-banner.show { transform: translateX(-50%) translateY(0); } .ow-offline-banner.online { background: linear-gradient(145deg, #065f46, #059669); } .ow-spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--primary-color); animation: ow-spin .8s linear infinite; display: inline-block; } .ow-spinner.lg { width: 56px; height: 56px; border-width: 5px; } @keyframes ow-spin { to { transform: rotate(360deg); } } .ow-loading-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 16px; color: var(--text-muted); font-weight: 600; } .ow-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%); background-size: 400% 100%; animation: ow-shimmer 1.4s ease infinite; border-radius: 10px; } .ow-skeleton.line { height: 14px; margin-bottom: 10px; } .ow-skeleton.circle { border-radius: 50%; } @keyframes ow-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .ow-error-overlay { position: fixed; inset: 0; background: rgba(8,12,22,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 24px; animation: ow-fade .25s ease; } @keyframes ow-fade { from { opacity: 0; } to { opacity: 1; } } .ow-error-card { max-width: 420px; width: 100%; text-align: center; background: linear-gradient(145deg, rgba(30,41,59,0.92), rgba(15,23,42,0.96)); border: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.22); border-radius: 24px; padding: 40px 32px; box-shadow: 0 25px 60px rgba(0,0,0,0.6); animation: ow-pop-in .4s cubic-bezier(.34,1.56,.64,1) both; } @keyframes ow-pop-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .ow-error-card i { font-size: 52px; color: #f87171; margin-bottom: 18px; } .ow-error-card h2 { color: #fff; font-size: 22px; font-weight: 900; margin: 0 0 10px; } .ow-error-card p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; } .ow-error-card button { background: var(--primary-gradient); color: #fff; border: none; padding: 12px 26px; border-radius: 12px; font-weight: 800; cursor: pointer; font-size: 15px; transition: transform .2s; } .ow-error-card button:hover { transform: translateY(-2px); } /* ========================================== PROFIL: LIVE-HINTERGRÜNDE, VIDEO & RAHMEN (Steam-Stil) ========================================== */ /* Live-Hintergründe: fließende Verläufe (generisch für Shop-Vorschau) */ .bganim-aurora { background: linear-gradient(120deg,#052e2b,#0e7490,#1e3a8a,#134e4a,#0e7490); background-size: 300% 300%; animation: ow-bgflow 16s ease infinite; } .bganim-ocean { background: linear-gradient(120deg,#082f49,#0e7490,#155e75,#0c4a6e); background-size: 300% 300%; animation: ow-bgflow 14s ease infinite; } .bganim-sunset { background: linear-gradient(120deg,#7c2d12,#b45309,#db2777,#b45309); background-size: 300% 300%; animation: ow-bgflow 15s ease infinite; } .bganim-galaxy { background: linear-gradient(120deg,#1e1b4b,#4c1d95,#831843,#1e1b4b); background-size: 300% 300%; animation: ow-bgflow 18s ease infinite; } .bganim-lava { background: linear-gradient(120deg,#450a0a,#b91c1c,#ea580c,#7f1d1d); background-size: 300% 300%; animation: ow-bgflow 9s ease infinite; } @keyframes ow-bgflow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } /* … am Banner mit Vorrang vor dem Inline-Hintergrund */ .steam-banner.bganim-aurora { background: linear-gradient(120deg,#052e2b,#0e7490,#1e3a8a,#134e4a,#0e7490) !important; background-size: 300% 300% !important; animation: ow-bgflow 16s ease infinite; } .steam-banner.bganim-ocean { background: linear-gradient(120deg,#082f49,#0e7490,#155e75,#0c4a6e) !important; background-size: 300% 300% !important; animation: ow-bgflow 14s ease infinite; } .steam-banner.bganim-sunset { background: linear-gradient(120deg,#7c2d12,#b45309,#db2777,#b45309) !important; background-size: 300% 300% !important; animation: ow-bgflow 15s ease infinite; } .steam-banner.bganim-galaxy { background: linear-gradient(120deg,#1e1b4b,#4c1d95,#831843,#1e1b4b) !important; background-size: 300% 300% !important; animation: ow-bgflow 18s ease infinite; } .steam-banner.bganim-lava { background: linear-gradient(120deg,#450a0a,#b91c1c,#ea580c,#7f1d1d) !important; background-size: 300% 300% !important; animation: ow-bgflow 9s ease infinite; } /* Ziehende Sterne für die Galaxie */ .bganim-galaxy::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.75; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 22%, rgba(255,255,255,.7), transparent); background-size: 220px 220px; animation: ow-stars 16s linear infinite; } @keyframes ow-stars { from{background-position:0 0,0 0,0 0,0 0} to{background-position:220px 110px,-180px 90px,140px -120px,-90px 160px} } /* Video-Hintergrund */ .banner-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; } /* PROFIL-RAHMEN – generisch (.frame-::before): wirkt am Avatar UND in der Shop-Vorschau */ .steam-avatar-container[class*="frame-"] { box-shadow: none; } .frame-fr_glow::before, .frame-fr_gold::before, .frame-fr_neon::before, .frame-fr_fire::before, .frame-fr_rainbow::before { content:''; position:absolute; inset:-9px; border-radius:50%; pointer-events:none; } .frame-fr_glow::before { border:4px solid rgba(76,175,80,.6); box-shadow:0 0 22px rgba(76,175,80,.65); animation: ow-frame-pulse 2.4s ease-in-out infinite; } @keyframes ow-frame-pulse { 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:1; transform:scale(1.03);} } .frame-fr_gold::before { background: conic-gradient(#fff3c4,#fbbf24,#b45309,#fde68a,#fbbf24,#fff3c4); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); animation: ow-frame-spin 4s linear infinite; filter: drop-shadow(0 0 8px rgba(251,191,36,.5)); } .frame-fr_neon::before { background: conic-gradient(#22d3ee,#a855f7,#22d3ee,#ec4899,#22d3ee); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); animation: ow-frame-spin 3s linear infinite; filter: drop-shadow(0 0 10px rgba(168,85,247,.7)); } .frame-fr_fire::before { background: conic-gradient(#fde047,#f97316,#dc2626,#f97316,#fde047); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); animation: ow-frame-spin 2.2s linear infinite; filter: drop-shadow(0 0 10px rgba(249,115,22,.7)); } .frame-fr_rainbow::before { background: conic-gradient(#ef4444,#f59e0b,#eab308,#22c55e,#3b82f6,#a855f7,#ef4444); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); animation: ow-frame-spin 5s linear infinite; } @keyframes ow-frame-spin { to { transform: rotate(360deg); } } /* Vorschau-Plättchen im Shop */ .frame-preview { position:relative; width:74px; height:74px; border-radius:50%; background:linear-gradient(145deg,#1e293b,#0f172a); display:flex; align-items:center; justify-content:center; color:var(--text-muted); } .frame-preview i { font-size:24px; } .bganim-tile { width:100%; height:100%; position:relative; overflow:hidden; } /* Formatierte Bio (Rich-Text-Anzeige) */ .bio-content ul, .bio-content ol, .dp-bio ul, .dp-bio ol { padding-left: 22px; margin: 6px 0; } .bio-content ul, .dp-bio ul { list-style: disc; } .bio-content ol, .dp-bio ol { list-style: decimal; } .bio-content li, .dp-bio li { margin: 3px 0; } .bio-content p, .dp-bio p { margin: 0 0 8px; } .bio-content p:last-child, .dp-bio p:last-child { margin-bottom: 0; } .bio-content font[size="4"] { font-size: 1.2em; } .bio-content font[size="5"] { font-size: 1.5em; }