/* Vorschau „Formell v2“ (3.10.2026, Auftrag Emanuel): Eine Schule fand den formellen Modus „noch zu kindisch“. Diese Datei wird nur geladen, wenn die Verwaltung die Vorschau gestartet hat (session['vorschau_formell'] → Klasse design-formell-v2 am , Stylesheet in base.html und train.html). Grundsätze: - Bürotypografie: Inter (selbst gehostet) statt Fredoka One/Nunito, Überschriften halbfett, keine Emojis in Titeln - flache Knöpfe in einer Farbe, keine Verläufe, keine Sprungeffekte - ruhige Flächen: einfarbiger Grund, weiße bzw. dunkle Karten mit feiner Linie, kleine Radien, kein Schatten - keine Spiele: erledigt der Server (student_restricted) – hier nur die Reste (Symbole, Spielbereiche) Alle Regeln liegen in der Kaskadenebene „vorschau“ mit !important: Wichtige Deklarationen in einer Ebene gehen den wichtigen Deklarationen außerhalb jeder Ebene (main.css, Theme-Regeln) vor – unabhängig von der Spezifität. */ @layer vorschau; @layer vorschau { html.design-formell-v2 { --v2-bg: #f3f4f6; --v2-surface: #ffffff; --v2-surface-2: #f3f4f6; --v2-border: #d1d5db; --v2-text: #1f2937; --v2-muted: #4b5563; --v2-accent: #1f4e79; --v2-accent-hover: #173b5c; --v2-accent-text: #ffffff; --v2-accent-soft: #1f4e79; /* Text und Rand der Zweitknöpfe */ --v2-danger: #b42318; --v2-link: #1d4ed8; --v2-font: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif; color-scheme: light; } html.design-formell-v2:not(.light-mode) { --v2-bg: #14181f; --v2-surface: #1c222c; --v2-surface-2: #242c38; --v2-border: #3a4556; --v2-text: #e5e7eb; --v2-muted: #b6bec9; --v2-accent: #2f6fb3; /* weiß darauf 5,2:1 (3b7dc4 lag bei 4,27) */ --v2-accent-hover: #27609c; --v2-accent-text: #ffffff; --v2-accent-soft: #9cc4ec; /* auf der dunklen Fläche 9:1 (2f6fb3 läge bei 3,1) */ --v2-danger: #fca5a5; --v2-link: #93c5fd; color-scheme: dark; } /* ---------- Grund und Schrift ---------- */ html.design-formell-v2, html.design-formell-v2 body { background: var(--v2-bg) !important; background-image: none !important; background-attachment: scroll !important; color: var(--v2-text) !important; } html.design-formell-v2 body, html.design-formell-v2 button, html.design-formell-v2 input, html.design-formell-v2 select, html.design-formell-v2 textarea, html.design-formell-v2 .btn, html.design-formell-v2 .nav-pill { font-family: var(--v2-font) !important; } html.design-formell-v2 h1, html.design-formell-v2 h2, html.design-formell-v2 h3, html.design-formell-v2 h4, html.design-formell-v2 .logo, html.design-formell-v2 .section-title, html.design-formell-v2 .stat-value { font-family: var(--v2-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-shadow: none !important; } html.design-formell-v2 h1 { font-size: 1.5rem !important; } html.design-formell-v2 h2 { font-size: 1.15rem !important; } html.design-formell-v2 h3 { font-size: 1rem !important; } html.design-formell-v2 a { color: var(--v2-link) !important; } html.design-formell-v2 h1 > span[aria-hidden="true"]:not(:has(.fv2-ikon)):not(.fv2-ikon), html.design-formell-v2 h2 > span[aria-hidden="true"]:not(:has(.fv2-ikon)):not(.fv2-ikon), html.design-formell-v2 h3 > span[aria-hidden="true"]:not(:has(.fv2-ikon)):not(.fv2-ikon), html.design-formell-v2 .nav-pill .nav-icon:not(:has(.fv2-ikon)), html.design-formell-v2 .mobile-nav-overlay .nav-icon:not(:has(.fv2-ikon)), html.design-formell-v2 .theme-icons, html.design-formell-v2 .mascot, html.design-formell-v2 .mascot-hint, html.design-formell-v2 .game-area, html.design-formell-v2 .game-scene { display: none !important; } /* ---------- Kopfzeile und Navigation ---------- */ html.design-formell-v2 .header, html.design-formell-v2 .dashboard-header { background: var(--v2-surface) !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--v2-border) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } html.design-formell-v2 .logo { color: var(--v2-text) !important; font-weight: 700 !important; } html.design-formell-v2 .nav-pill { background: transparent !important; background-image: none !important; color: var(--v2-muted) !important; border: 1px solid transparent !important; border-radius: 4px !important; font-weight: 500 !important; box-shadow: none !important; transform: none !important; } html.design-formell-v2 .nav-pill:hover { color: var(--v2-text) !important; background: var(--v2-surface-2) !important; } html.design-formell-v2 .nav-pill.active { color: var(--v2-accent-text) !important; background: var(--v2-accent) !important; } html.design-formell-v2 .mobile-nav-overlay { background: var(--v2-surface) !important; } html.design-formell-v2 .mobile-nav-overlay a { color: var(--v2-text) !important; font-weight: 500 !important; } /* ---------- Karten und Flächen ---------- */ html.design-formell-v2 .card, html.design-formell-v2 .stat-card, html.design-formell-v2 .typing-area, html.design-formell-v2 .formal-stats-header, html.design-formell-v2 .modal-content, html.design-formell-v2 .typr-dialog, html.design-formell-v2 .dark-dialog { background: var(--v2-surface) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; color: var(--v2-text) !important; } html.design-formell-v2 .card h1, html.design-formell-v2 .card h2, html.design-formell-v2 .card h3, html.design-formell-v2 .card h4, html.design-formell-v2 .card p, html.design-formell-v2 .card li, html.design-formell-v2 .card td, html.design-formell-v2 .card th, html.design-formell-v2 .card label, html.design-formell-v2 .card .empty-state, /* Inline-Farben der Vorlagen (weiß, gelb, türkis) auf die Textfarbe — nur Textelemente, nie Knöpfe oder Links */ html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="rgba(255,255,255"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="rgba(255, 255, 255"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="color: #fff"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="color:#fff"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="color: white"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="color:white"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="#FFD93D"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="#00D9A5"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="#1a1a2e"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="#FF6B6B"], html.design-formell-v2 .card :is(span, div, p, h3, h4, small, strong, em, li, td)[style*="#6C63FF"] { color: var(--v2-text) !important; } html.design-formell-v2 .card .empty-state, html.design-formell-v2 .card small, html.design-formell-v2 .stat-label { color: var(--v2-muted) !important; } /* ---------- Knöpfe: eine Farbe, flach ---------- */ html.design-formell-v2 .btn, html.design-formell-v2 a.btn, html.design-formell-v2 button.btn, html.design-formell-v2 .btn-primary, html.design-formell-v2 .btn-success, html.design-formell-v2 .btn-warning, html.design-formell-v2 .start-btn, html.design-formell-v2 .action-btn, html.design-formell-v2 .mode-btn.active, html.design-formell-v2 .task-btn.active, html.design-formell-v2 a[style*="linear-gradient"], html.design-formell-v2 button[style*="linear-gradient"], html.design-formell-v2 #tz-banner a.tz-knopf { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; -webkit-text-fill-color: var(--v2-accent-text) !important; border: 1px solid transparent !important; border-radius: 4px !important; font-family: var(--v2-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-shadow: none !important; box-shadow: none !important; transform: none !important; transition: background-color 0.15s !important; } html.design-formell-v2 .btn:hover, html.design-formell-v2 a[style*="linear-gradient"]:hover, html.design-formell-v2 button[style*="linear-gradient"]:hover, html.design-formell-v2 #tz-banner a.tz-knopf:hover { background: var(--v2-accent-hover) !important; transform: none !important; box-shadow: none !important; } html.design-formell-v2 .btn.btn-secondary, html.design-formell-v2 button.btn-secondary, html.design-formell-v2 a.btn-secondary, html.design-formell-v2 .btn.btn-gray, html.design-formell-v2 button.btn-gray, html.design-formell-v2 .mode-btn:not(.active), html.design-formell-v2 .task-btn:not(.active) { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 4px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; } html.design-formell-v2 .btn-danger { background: var(--v2-danger) !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-radius: 4px !important; } /* Emoji vor der Beschriftung der bunten Knöpfe (erster span mit großer Schrift) */ html.design-formell-v2 a[style*="linear-gradient"] > span[style*="font-size"]:first-child, html.design-formell-v2 button[style*="linear-gradient"] > span[style*="font-size"]:first-child { display: none !important; } html.design-formell-v2 .card a[style*="linear-gradient"], html.design-formell-v2 .card button[style*="linear-gradient"] { padding: 12px 14px !important; font-size: 0.95rem !important; } /* ---------- Eingabefelder ---------- */ html.design-formell-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.design-formell-v2 select, html.design-formell-v2 textarea { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; border-radius: 4px !important; box-shadow: none !important; } html.design-formell-v2 input:focus, html.design-formell-v2 select:focus, html.design-formell-v2 textarea:focus { outline: 2px solid var(--v2-accent) !important; outline-offset: 1px !important; border-color: var(--v2-accent) !important; } /* ---------- Testzugang-Hinweis ---------- */ html.design-formell-v2 #tz-banner .tz-box { background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; } html.design-formell-v2 #tz-banner .tz-titel { color: var(--v2-text) !important; } html.design-formell-v2 #tz-banner .tz-info { color: var(--v2-muted) !important; } html.design-formell-v2 #tz-banner > .tz-box > span[aria-hidden="true"] { display: none !important; } /* Gleicher Abstand über und unter dem Hinweis (Emanuel 4.10.2026: „oben und unten gleich viel Abstand“; vorher 16 px oben, 0 px zum Kopfblock) — nur der äußere Hinweis, der innere (.innen) sitzt im Inhalt */ html.design-formell-v2 #tz-banner:not(.innen) { margin: 16px auto 16px !important; } /* ---------- Training ---------- */ html.design-formell-v2 .typing-area { padding: 20px !important; } html.design-formell-v2 .progress-bar, html.design-formell-v2 .progress-fill, html.design-formell-v2 .progress { border-radius: 3px !important; } /* Kopfzeile der Trainingsseite: Zurück, Level-Abzeichen, Neustart */ html.design-formell-v2 .level-badge { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; border: 1px solid transparent !important; border-radius: 4px !important; box-shadow: none !important; font-family: var(--v2-font) !important; font-weight: 600 !important; } html.design-formell-v2 .back-btn, html.design-formell-v2 .restart-btn { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 4px !important; box-shadow: none !important; font-family: var(--v2-font) !important; font-weight: 600 !important; transform: none !important; } /* Verspielte Reste in Karten: Schmuckschrift per Inline-Stil, bunte Kennzahlen, Serie-Kasten */ html.design-formell-v2 [style*="Fredoka"] { font-family: var(--v2-font) !important; font-weight: 600 !important; } html.design-formell-v2 .glance-block [style*="color"], html.design-formell-v2 .glance-block .glance-label { color: var(--v2-text) !important; } /* :not(.btn): der Feedback-Knopf der Schülerzeile (türkiser Inline-Grund) bekam sonst die helle Fläche bei weißem Symbol (Emanuel 4.10.2026) */ html.design-formell-v2 .card [style*="background: rgba(0,217,165"]:not(.btn), html.design-formell-v2 .card [style*="background:rgba(0,217,165"]:not(.btn), html.design-formell-v2 .card [style*="background: rgba(0, 217, 165"]:not(.btn) { background: var(--v2-surface-2) !important; border-color: var(--v2-border) !important; } /* ---------- Keine Avatare im formellen Design (Vorgabe Emanuel 3.10.2026) ---------- */ html.design-formell-v2 .user-avatar { font-size: 0 !important; color: transparent !important; background-color: var(--v2-surface-2) !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; animation: none !important; } html.design-formell-v2:not(.light-mode) .user-avatar { background-image: url("data:image/svg+xml;utf8,") !important; } html.design-formell-v2 .user-avatar-small, html.design-formell-v2 .student-avatar, html.design-formell-v2 #avatar-section, html.design-formell-v2 .avatar-grid, html.design-formell-v2 .avatar-dropdown-menu a[href*="avatar-section"], html.design-formell-v2 .card h1 > span[style*="font-size: 1.2em"] { display: none !important; } /* Zeitraum-Schalter der Statistik (Gesamt · Jahr · Monat · Woche) */ html.design-formell-v2 .stats-filter-btn { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 4px !important; box-shadow: none !important; font-family: var(--v2-font) !important; font-weight: 600 !important; transform: none !important; } html.design-formell-v2 .stats-filter-btn.active { background: var(--v2-accent) !important; color: var(--v2-accent-text) !important; border-color: transparent !important; } /* ======== Runde 2 (3.10.2026, „das ganze UI professioneller“): Befunde der Kontrast- und Verspieltheitsmessung ======== */ /* Eine Schrift für alles – außer Tipptext, Tastatur, Code und Schriftvorschau der Einstellungen */ html.design-formell-v2 body *:not(code):not(pre):not(kbd):not(.font-preview):not(.typing-area):not(.typing-area *):not(#typing-text):not(#typing-text *):not(.text-display):not(.text-display *):not(.keyboard):not(.keyboard *) { font-family: var(--v2-font) !important; } /* Aktive Navigation: auch der innere Text weiß */ html.design-formell-v2 .nav-pill.active, html.design-formell-v2 .nav-pill.active * { color: var(--v2-accent-text) !important; } /* Flächen: kleine Radien, keine Schatten, keine Verläufe */ html.design-formell-v2 .welcome-section, html.design-formell-v2 .glance-block, html.design-formell-v2 .class-card, html.design-formell-v2 .classroom-card, html.design-formell-v2 .info-section, html.design-formell-v2 .create-section, html.design-formell-v2 .design-option, html.design-formell-v2 .font-option, html.design-formell-v2 .formal-theme-item, html.design-formell-v2 .level-item, html.design-formell-v2 .level-option, html.design-formell-v2 .activity-item, html.design-formell-v2 .teacher-card, html.design-formell-v2 .quick-link, html.design-formell-v2 .formal-stats-header, html.design-formell-v2 .formal-stat-item, html.design-formell-v2 .dropdown-menu, html.design-formell-v2 .avatar-dropdown-menu { border-radius: 6px !important; box-shadow: none !important; background-image: none !important; } html.design-formell-v2 .welcome-section, html.design-formell-v2 .glance-block, html.design-formell-v2 .info-section, html.design-formell-v2 .create-section, html.design-formell-v2 .class-card, html.design-formell-v2 .classroom-card, html.design-formell-v2 .formal-stats-header, html.design-formell-v2 .avatar-dropdown-menu { background-color: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; color: var(--v2-text) !important; } html.design-formell-v2 .formal-stat-item, html.design-formell-v2 .level-item, html.design-formell-v2 .level-option, html.design-formell-v2 .activity-item, html.design-formell-v2 .design-option, html.design-formell-v2 .font-option, html.design-formell-v2 .formal-theme-item { background-color: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; } html.design-formell-v2 .design-option.active, html.design-formell-v2 .font-option.active, html.design-formell-v2 .formal-theme-item.active, html.design-formell-v2 .level-item.current, html.design-formell-v2 .level-option.current { border: 2px solid var(--v2-accent) !important; } /* Textfarben: Werte, Namen, Überschriften in der Textfarbe; Beschriftungen gedämpft */ html.design-formell-v2 .class-stat-val, html.design-formell-v2 .class-mini-val, html.design-formell-v2 .activity-stat-val, html.design-formell-v2 .stat-value, html.design-formell-v2 .formal-stat-value, html.design-formell-v2 .level-option-number, html.design-formell-v2 .level-category-header, html.design-formell-v2 .level-section-header, html.design-formell-v2 .level-item-name, html.design-formell-v2 .level-item span, html.design-formell-v2 .info-icon, html.design-formell-v2 .class-name, html.design-formell-v2 .classroom-name, html.design-formell-v2 .class-desc, html.design-formell-v2 .activity-name, html.design-formell-v2 .top-name, html.design-formell-v2 .top-rank, html.design-formell-v2 .page-title, html.design-formell-v2 .glance-block *, html.design-formell-v2 .welcome-section h1, html.design-formell-v2 .welcome-section p, html.design-formell-v2 .welcome-section div, html.design-formell-v2 .card [style*="#333"], html.design-formell-v2 .card [style*="rgb(51, 51, 51)"] { color: var(--v2-text) !important; font-weight: 600 !important; } html.design-formell-v2 .level-item span, html.design-formell-v2 .welcome-section p, html.design-formell-v2 .welcome-section div, html.design-formell-v2 .class-desc, html.design-formell-v2 .glance-block .glance-label { font-weight: 400 !important; } html.design-formell-v2 .page-subtitle, html.design-formell-v2 .section-label, html.design-formell-v2 .section-hint, html.design-formell-v2 .activity-detail, html.design-formell-v2 .activity-stat-label, html.design-formell-v2 .class-mini-label, html.design-formell-v2 .class-stat-label, html.design-formell-v2 .formal-stat-label, html.design-formell-v2 .top-class, html.design-formell-v2 .info-section p, html.design-formell-v2 .create-section p, html.design-formell-v2 .font-name, html.design-formell-v2 .glance-block .glance-label { color: var(--v2-muted) !important; } html.design-formell-v2 #visible-lines-value, html.design-formell-v2 #level-length-value { color: var(--v2-accent-soft) !important; } /* Linkzeilen mit Hintergrund (Aufgabenliste, Prüfungen): Zeile, kein Knopf */ html.design-formell-v2 .card a[style*="background"]:has(div) { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; color: var(--v2-text) !important; } html.design-formell-v2 .card a[style*="background"]:has(div) *:not(.aufgabe-abzeichen):not(.aufgabe-start) { color: var(--v2-text) !important; } /* Der weiße „Starten →“-Kasten in der Zeile wird ein Zweitknopf */ html.design-formell-v2 .card a[style*="background"]:has(div) div[style*="background:#fff"], html.design-formell-v2 .card a[style*="background"]:has(div) div[style*="background: #fff"] { background: var(--v2-surface) !important; color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 4px !important; } /* In Linkknöpfen mit Akzentgrund ist alles Weiß – auch Pfeile und Zusätze mit eigener Inline-Farbe */ html.design-formell-v2 .card a[style*="background"]:not(:has(div)) *, html.design-formell-v2 a[style*="linear-gradient"] *, html.design-formell-v2 button[style*="linear-gradient"] * { color: var(--v2-accent-text) !important; } /* Knöpfe und Linkknöpfe der Lehrerseiten */ html.design-formell-v2 .class-action-primary, html.design-formell-v2 .aufgabe-start, html.design-formell-v2 .create-btn, html.design-formell-v2 .card a[style*="background"]:not([style*="transparent"]):not([style*="linear-gradient"]):not(:has(div)) { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; -webkit-text-fill-color: var(--v2-accent-text) !important; border: 1px solid transparent !important; border-radius: 4px !important; box-shadow: none !important; font-weight: 600 !important; } html.design-formell-v2 .class-action-secondary, html.design-formell-v2 .class-action-export, html.design-formell-v2 .btn-print-class, html.design-formell-v2 .btn-msg-class { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 4px !important; box-shadow: none !important; font-weight: 600 !important; } html.design-formell-v2 .class-action-danger { background: var(--v2-surface) !important; color: var(--v2-danger) !important; -webkit-text-fill-color: var(--v2-danger) !important; border: 1px solid var(--v2-danger) !important; border-radius: 4px !important; box-shadow: none !important; } /* Schalter in den Einstellungen */ html.design-formell-v2 .toggle-slider { background: var(--v2-border) !important; box-shadow: none !important; } html.design-formell-v2 .toggle-switch input:checked + .toggle-slider { background: var(--v2-accent) !important; } /* Trainingskopf: Schalter ohne Schatten, Fortschritt ohne Leuchten, Nutzerfeld eckig, kein Pulsieren */ html.design-formell-v2 .view-toggle, html.design-formell-v2 .sound-toggle, html.design-formell-v2 .header-progress-bar, html.design-formell-v2 .keyboard-container, html.design-formell-v2 .user-info-display { box-shadow: none !important; border-radius: 6px !important; } html.design-formell-v2 .progress-percentage, html.design-formell-v2 #level-progress-text { color: var(--v2-text) !important; } html.design-formell-v2 .level-item.current, html.design-formell-v2 .level-option.current, html.design-formell-v2 .pulse, html.design-formell-v2 [class*="bounce"] { animation: none !important; } /* Tastatur: Fingerfarben bleiben (Lernzweck), alle Beschriftungen dunkel, keine Schatten */ html.design-formell-v2 .key { box-shadow: none !important; border-radius: 4px !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; } html.design-formell-v2 .key, html.design-formell-v2 .key span, html.design-formell-v2 .key .key-main, html.design-formell-v2 .key .key-shift, html.design-formell-v2 .key .key-altgr { color: #1f2937 !important; text-shadow: none !important; } } /* ---------- Hintergründe (4.10.2026, Wunsch Emanuel: „irgendeinen unscheinbaren, aber trotzdem passenden Hintergrund“, am besten mehrere zur Wahl) ---------- Klasse fv2-hg- am : gesetzt im frühen Skript von base.html und train.html aus localStorage „fv2Hintergrund“ (ohne Wahl: tasten), gewählt in den Einstellungen (Abschnitt „Hintergrund“, nur in der Vorschau, Skript in formell_v2.js). Das Muster liegt am und füllt damit die ganze Fläche, der body wird durchsichtig. Linien und Punkte decken nur 6–15 %, Karten bleiben deckend: Text direkt auf dem Grund behält mindestens 4,5:1 (gemessen, hell und dunkel). Namen: tasten, kariert, liniert, punkte, papier, verlauf, schlicht. */ @layer vorschau { html.design-formell-v2 { --v2-muster: rgba(31, 41, 55, 0.06); --v2-muster-punkt: rgba(31, 41, 55, 0.15); --v2-papier-bg: #f6f5f1; --v2-hg-tasten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='132' fill='none' stroke='rgba(31,41,55,0.075)' stroke-width='1.2'%3E%3Crect x='2.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='46.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='90.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='134.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='178.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='222.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='-19.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='24.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='68.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='112.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='156.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='200.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='244.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='-30.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='13.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='57.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='101.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='145.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='189.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='233.5' y='90.5' width='39' height='39' rx='6'/%3E%3C/svg%3E"); --v2-hg-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.22 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --v2-hg-verlauf: linear-gradient(180deg, #e2e9f3 0, rgba(226, 233, 243, 0) 480px); } html.design-formell-v2:not(.light-mode) { --v2-muster: rgba(229, 231, 235, 0.06); --v2-muster-punkt: rgba(229, 231, 235, 0.15); --v2-papier-bg: #16181d; --v2-hg-tasten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='132' fill='none' stroke='rgba(229,231,235,0.075)' stroke-width='1.2'%3E%3Crect x='2.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='46.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='90.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='134.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='178.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='222.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='-19.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='24.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='68.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='112.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='156.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='200.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='244.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='-30.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='13.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='57.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='101.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='145.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='189.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='233.5' y='90.5' width='39' height='39' rx='6'/%3E%3C/svg%3E"); --v2-hg-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.92 0 0 0 0 0.95 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --v2-hg-verlauf: linear-gradient(180deg, #1d2736 0, rgba(29, 39, 54, 0) 480px); } html.design-formell-v2 { --v2-hg-kariert: linear-gradient(var(--v2-muster) 1px, transparent 1px), linear-gradient(90deg, var(--v2-muster) 1px, transparent 1px); --v2-hg-liniert: repeating-linear-gradient(180deg, transparent 0 31px, var(--v2-muster) 31px 32px); --v2-hg-punkte: radial-gradient(circle, var(--v2-muster-punkt) 1.1px, transparent 1.7px); } html.design-formell-v2[class*="fv2-hg-"]:not(.fv2-hg-schlicht) body { background: transparent !important; } html.design-formell-v2.fv2-hg-tasten { background-image: var(--v2-hg-tasten) !important; background-size: 264px 132px !important; } html.design-formell-v2.fv2-hg-kariert { background-image: var(--v2-hg-kariert) !important; background-size: 24px 24px !important; } html.design-formell-v2.fv2-hg-liniert { background-image: var(--v2-hg-liniert) !important; } html.design-formell-v2.fv2-hg-punkte { background-image: var(--v2-hg-punkte) !important; background-size: 22px 22px !important; } html.design-formell-v2.fv2-hg-papier { --v2-bg: var(--v2-papier-bg); background-image: var(--v2-hg-papier) !important; background-size: 180px 180px !important; } html.design-formell-v2.fv2-hg-verlauf { background-image: var(--v2-hg-verlauf) !important; background-repeat: no-repeat !important; } /* Auswahl in den Einstellungen: Kacheln mit Musterprobe */ /* Design-Dialog aus main.js: im formellen Design keine Farbschemata (Emanuel 4.10.2026: „da sollte man nicht noch einzelne Farbschemen innerhalb von Formell auswählen können“) — der Abschnitt bleibt aus, die Hintergründe stehen in den Einstellungen */ html.design-formell-v2 #formal-themes-section { display: none !important; } /* Zertifikat des Dschungelkönigs (Level-geschafft-Fenster, ab 300 Anschlägen/min und 95 %) ist ein Spielelement — im formellen Design aus (Emanuel 4.10.2026); die Zertifikate Bronze–Diamant auf dem Dashboard bleiben */ html.design-formell-v2 #certificate-reward { display: none !important; } /* Vorschauproben der Hintergrund-Auswahl (5.10.2026, Emanuel: „hier sieht man fast nicht was gemeint ist“): die Probe zeigt das Muster verstärkt und vergrößert — nur in der Auswahl, der Seitenhintergrund bleibt dezent. Tinte Mittelgrau (hell 3,2:1, dunkel 5,1:1 gegen den Grund), Papier mit warmem Ton und sichtbarer Körnung, Verlauf kräftig, Schlicht mit „ohne“-Zeichen. Gemessen mit hg_messen.py (Kontrast Muster↔Grund, paarweise Bildunterschiede). */ html.design-formell-v2 { --v2-probe-tinte: #7f8a9c; --v2-probe-papier: #f0e8d4; --v2-probe-verlauf-oben: #8fafd9; --v2-probe-verlauf-mitte: #d3dff0; --v2-probe-tasten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='132' fill='none' stroke='%237f8a9c' stroke-width='2.6'%3E%3Crect x='2.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='46.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='90.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='134.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='178.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='222.5' y='2.5' width='39' height='39' rx='6'/%3E%3Crect x='-19.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='24.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='68.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='112.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='156.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='200.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='244.5' y='46.5' width='39' height='39' rx='6'/%3E%3Crect x='-30.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='13.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='57.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='101.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='145.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='189.5' y='90.5' width='39' height='39' rx='6'/%3E%3Crect x='233.5' y='90.5' width='39' height='39' rx='6'/%3E%3C/svg%3E"); --v2-probe-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 5 -2.35'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.78'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23k)'/%3E%3C/svg%3E"); } html.design-formell-v2:not(.light-mode) { --v2-probe-papier: #25211a; --v2-probe-verlauf-oben: #4a6fa5; --v2-probe-verlauf-mitte: #223048; --v2-probe-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.72 0 0 0 4 -2.0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23k)'/%3E%3C/svg%3E"); } html.design-formell-v2 .fv2-hg-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } html.design-formell-v2 .fv2-hg-wahl { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; padding: 8px !important; margin: 0 !important; min-height: 0 !important; cursor: pointer; background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; border-radius: 8px !important; box-shadow: none !important; font-size: 0.875rem !important; font-weight: 500 !important; text-align: center !important; transform: none !important; } html.design-formell-v2 .fv2-hg-wahl:hover { border-color: var(--v2-accent) !important; } html.design-formell-v2 .fv2-hg-wahl[aria-pressed="true"] { outline: 2px solid var(--v2-accent) !important; outline-offset: 1px; border-color: var(--v2-accent) !important; } html.design-formell-v2 .fv2-hg-wahl:focus-visible { outline: 2px solid var(--v2-link) !important; outline-offset: 2px; } html.design-formell-v2 .fv2-hg-probe { display: block; position: relative; overflow: hidden; height: 72px; border-radius: 5px; border: 1px solid var(--v2-border); background-color: var(--v2-bg); background-repeat: repeat; } html.design-formell-v2 .fv2-probe-tasten { background-image: var(--v2-probe-tasten); background-size: 132px 66px; background-repeat: repeat-x; background-position: center; } html.design-formell-v2 .fv2-probe-kariert { background-image: linear-gradient(var(--v2-probe-tinte) 1px, transparent 1px), linear-gradient(90deg, var(--v2-probe-tinte) 1px, transparent 1px); background-size: 14px 14px; background-position: 6px 7px; } html.design-formell-v2 .fv2-probe-liniert { background-image: repeating-linear-gradient(180deg, transparent 0 13px, var(--v2-probe-tinte) 13px 14px); background-position: 0 -3px; } html.design-formell-v2 .fv2-probe-punkte { background-image: radial-gradient(circle, var(--v2-probe-tinte) 1.7px, transparent 2.3px); background-size: 14px 14px; background-position: 0 0; } html.design-formell-v2 .fv2-probe-papier { background-color: var(--v2-probe-papier); background-image: var(--v2-probe-korn); background-size: 120px 120px; } html.design-formell-v2 .fv2-probe-verlauf { background-image: linear-gradient(180deg, var(--v2-probe-verlauf-oben) 0%, var(--v2-probe-verlauf-mitte) 55%, var(--v2-bg) 100%); background-repeat: no-repeat; } html.design-formell-v2 .fv2-probe-schlicht::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border: 1.5px solid var(--v2-probe-tinte); border-radius: 50%; background: linear-gradient(to top right, transparent calc(50% - 0.8px), var(--v2-probe-tinte) calc(50% - 0.8px), var(--v2-probe-tinte) calc(50% + 0.8px), transparent calc(50% + 0.8px)); } } /* Cookie-Hinweis (4.10.2026): folgte im dunklen Modus nicht – weiße Leiste (body.design-formell .cc-banner) mit dem hellen Verweisblau der dunklen Fassung („Mehr erfahren“ kaum lesbar). Jetzt Fläche, Schrift und Verweis aus den Vorschau-Farben, „Verstanden“ in der Akzentfarbe statt Grün. */ @layer vorschau { html.design-formell-v2 .cc-banner { background: var(--v2-surface) !important; color: var(--v2-text) !important; border-top: 1px solid var(--v2-border) !important; box-shadow: none !important; } html.design-formell-v2 .cc-banner p { color: var(--v2-text) !important; } html.design-formell-v2 .cc-banner a { color: var(--v2-link) !important; } html.design-formell-v2 .cc-btn-accept { background: var(--v2-accent) !important; color: var(--v2-accent-text) !important; border-radius: 6px !important; } html.design-formell-v2 .cc-btn-accept:hover { background: var(--v2-accent-hover) !important; } } /* Kontrast auf den Mustern (4.10.2026, Pixelmessung aller Hintergründe): Der Zurück-Verweis der Lehrerseiten (hellblau getönt, durchscheinend) fiel auf Kariert bis 4,36:1, „Ton“ im Training (weiß 85 % auf grauem, halb deckendem Knopf mit Deckkraft 0,7) lag auf jedem Grund bei 3,2:1. Beide bekommen eine deckende Fläche aus den Vorschau-Farben. */ @layer vorschau { html.design-formell-v2 .back-link { background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; color: var(--v2-accent-soft) !important; border-radius: 6px !important; box-shadow: none !important; } html.design-formell-v2 .back-link:hover { border-color: var(--v2-accent) !important; } /* Tonknopf (4.10.2026, Emanuel: „der bisherige Tonbutton hat mir schon gefallen“): dunkle Pille mit Lautsprecher und weißer Schrift wie live — nur deckend statt 70 % durchscheinend, damit „Ton“ auf jedem Grund 6:1 erreicht (live 3,2:1) */ html.design-formell-v2 .sound-toggle { background: #5b6270 !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; backdrop-filter: none !important; } html.design-formell-v2 .sound-toggle:hover { background: #4b5160 !important; } html.design-formell-v2 .sound-label { color: #ffffff !important; } } /* Trainingskopf (4.10.2026, Rückmeldung Emanuel: „Der Name … ist nicht mittig in der Box“): Das Namensfeld hatte links wenig Rand für den runden Avatar (0,3 0,8 0,3 0,4 rem) — ohne Avatar stand der Name links. Unter 1200 px blendet das Training den Namen aus; ohne Avatar bliebe ein leerer Kasten, deshalb dort ganz weg. */ @layer vorschau { html.design-formell-v2 .user-info-display { padding: 0.35rem 0.8rem !important; justify-content: center !important; } @media (max-width: 1200px) { html.design-formell-v2 .user-info-display { display: none !important; } } } /* Farbschemata (4.10.2026, Messung aller 15 formellen Farbschemata × hell/dunkel auf den 6 Vorschauseiten, 32.252 Texte): Die Schemata färben Teile der Kopfzeile, die nächste Taste und die Fußzeile – auf den Flächen der Vorschau unlesbar (Standard hell: Name, Levelname, Punkte weiß auf Weiß 1,0–1,1:1; nächste Taste dunkle Schrift auf kräftiger Farbe 2,5–3,0:1; Ivory dunkel: Fußzeile 1,04:1). Die Vorschau setzt diese Farben jetzt selbst, unabhängig vom Schema. */ @layer vorschau { html.design-formell-v2 .header #level-name, html.design-formell-v2 .header .level-info, html.design-formell-v2 .header .punkte-display, html.design-formell-v2 .header .punkte-display *, html.design-formell-v2 .header .user-info-display, html.design-formell-v2 .header .user-name, html.design-formell-v2 .header .skip-error-toggle, html.design-formell-v2 .header .skip-error-toggle *, html.design-formell-v2 .header .view-toggle, html.design-formell-v2 .header .view-toggle *, html.design-formell-v2 .header .design-mode-toggle, html.design-formell-v2 .header .design-mode-toggle * { color: var(--v2-text) !important; text-shadow: none !important; } html.design-formell-v2 .header .punkte-display, html.design-formell-v2 .header .user-info-display { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; } /* nächste Taste und ihre Umschalttaste: Akzentfarbe mit weißer Schrift (statt Schemafarbe mit dunkler Schrift) */ html.design-formell-v2 #keyboard .key.active, html.design-formell-v2 #keyboard .key.shift-active, html.design-formell-v2 #keyboard .key.altgr-active { background: var(--v2-accent) !important; background-image: none !important; border: 1px solid var(--v2-accent) !important; outline: 2px solid var(--v2-accent) !important; outline-offset: 2px !important; box-shadow: none !important; } html.design-formell-v2 #keyboard .key.active, html.design-formell-v2 #keyboard .key.active :is(span, .key-main, .key-shift, .key-altgr), html.design-formell-v2 #keyboard .key.shift-active, html.design-formell-v2 #keyboard .key.shift-active :is(span, .key-main, .key-shift, .key-altgr), html.design-formell-v2 #keyboard .key.altgr-active, html.design-formell-v2 #keyboard .key.altgr-active :is(span, .key-main, .key-shift, .key-altgr) { color: var(--v2-accent-text) !important; } /* Fußzeile mit den Rechtstexten: Fläche und Verweise aus den Vorschau-Farben */ html.design-formell-v2 .legal-footer { background: var(--v2-surface) !important; background-image: none !important; border-top: 1px solid var(--v2-border) !important; } html.design-formell-v2 .legal-footer a { color: var(--v2-link) !important; } } /* ---------- Liniensymbole (4.10.2026, Emanuel: „Icons, jedoch professionellere und keine kindischen“) ---------- formell_v2.js ersetzt Emojis durch … in der Textfarbe, 1 em groß. */ @layer vorschau { html.design-formell-v2 .fv2-ikon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex: none; line-height: 1; color: var(--v2-accent-soft); } html.design-formell-v2 .fv2-ikon svg { display: block; width: 100%; height: 100%; } /* in gefüllten Knöpfen und Pillen erbt das Symbol die Schriftfarbe (weiß auf Akzent), sonst Akzentfarbe (Emanuel: „ein klein wenig farbig“) */ html.design-formell-v2 :is(.btn, .nav-pill.active, .start-btn, .aufgabe-start, .class-action-primary, .create-btn, .stats-filter-btn.active, button[type="submit"], .sound-icon, .tz-knopf, .level-badge) .fv2-ikon { color: inherit; } html.design-formell-v2 h1 > span[aria-hidden="true"]:has(.fv2-ikon), html.design-formell-v2 h2 > span[aria-hidden="true"]:has(.fv2-ikon), html.design-formell-v2 h3 > span[aria-hidden="true"]:has(.fv2-ikon) { display: inline-block !important; color: var(--v2-accent-soft) !important; } html.design-formell-v2 .nav-pill .nav-icon:has(.fv2-ikon), html.design-formell-v2 .mobile-nav-overlay .nav-icon:has(.fv2-ikon) { display: inline-block !important; } html.design-formell-v2 .quick-action-icon { color: var(--v2-accent-soft) !important; display: inline-flex !important; } /* Symbolknoepfe im Trainingskopf: Symbol in der Textfarbe, mittig */ html.design-formell-v2 .view-toggle .fv2-ikon, html.design-formell-v2 .skip-error-toggle .fv2-ikon, html.design-formell-v2 .design-mode-icon .fv2-ikon { vertical-align: -0.2em; color: inherit; } html.design-formell-v2 .sound-icon { display: inline-flex !important; align-items: center; font-size: 1.1rem !important; color: #ffffff !important; } /* Kennzahlen im Trainingskopf: Kacheln ohne Rand, nur Flaeche und Abstand (Emanuel: zwischen den Kacheln standen Striche) */ html.design-formell-v2 .formal-stats-header { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 6px !important; box-shadow: none !important; } html.design-formell-v2 .formal-stats-header .formal-stat-item { border: 0 !important; background-color: var(--v2-surface-2) !important; border-radius: 6px !important; } /* Fortschrittsbalken: flache Akzentfarbe statt Regenbogenverlauf */ html.design-formell-v2 .header-progress-bar { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; border-radius: 4px !important; } html.design-formell-v2 .header-progress-fill, html.design-formell-v2 .level-progress-fill, html.design-formell-v2 .progress-fill { background: var(--v2-accent) !important; background-image: none !important; border-radius: 3px !important; box-shadow: none !important; } /* naechstes Zeichen: Akzentflaeche mit weisser Schrift statt gelbem Leuchten. Die Flaeche ist ein ::before (5.10.2026, Emanuel: mit Serif, Sans oder Handschrift war der zu tippende Buchstabe kaum zu sehen — die Flaeche war nur so breit wie der Vorschub der Glyphe, 7–11 px, und die weisse Tinte des „j“ ragte 2–4 px links hinaus auf weissen Grund). Ueberstand links/rechts (--zm-l/--zm-r) setzt partials/train_zeichenmarke.html je Zeichen: Tintenueberstand + --zm-luft, mindestens --zm-min breit; alles in em, waechst also mit Schriftgroesse und Zoom. Ohne Skript gelten die Vorgaben. Absolut positioniert: kein Platzbedarf, die Zeile bewegt sich nicht. Die hellblaue Unterkante kam bisher als 2 px border-bottom aus main.css (body.design-formell .char.current) und war nur so breit wie die Glyphe — jetzt Teil der Markierung. Grundregel und Erklaerung: train_styles_kontrast.html. */ html.design-formell-v2 .char.current { --zm-luft: 0.05em !important; --zm-min: 0.5em !important; background: transparent !important; color: #ffffff !important; box-shadow: none !important; animation: none !important; border-radius: 0 !important; text-shadow: none !important; outline: none !important; border: 0 !important; position: relative !important; z-index: 0 !important; } html.design-formell-v2 .char.current::before { content: "" !important; position: absolute !important; z-index: -1 !important; pointer-events: none !important; left: calc(-1 * var(--zm-l, 0.12em)) !important; right: calc(-1 * var(--zm-r, 0.12em)) !important; top: -0.04em !important; bottom: -0.13em !important; background: var(--v2-accent) !important; border-bottom: 0.08em solid #3498db !important; border-radius: 0.14em !important; } /* Abschlussfenster: ruhige Flaechen statt Verlauf und Leuchten */ html.design-formell-v2 .celebration-icon { display: none !important; } html.design-formell-v2 .stat-box { background: var(--v2-surface-2) !important; border-radius: 6px !important; } html.design-formell-v2 .stat-box-value { font-family: var(--v2-font) !important; font-weight: 600 !important; color: var(--v2-text) !important; text-shadow: none !important; } html.design-formell-v2 .stat-box-wpm { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-accent-soft) !important; box-shadow: none !important; } html.design-formell-v2 .stat-box-wpm .stat-box-value, html.design-formell-v2 .stat-box-wpm .stat-box-label { color: var(--v2-accent-soft) !important; } html.design-formell-v2 .next-level-preview { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; } html.design-formell-v2 .next-level-header, html.design-formell-v2 .next-level-desc { color: var(--v2-muted) !important; } html.design-formell-v2 .next-level-number { font-family: var(--v2-font) !important; font-weight: 600 !important; color: var(--v2-accent-soft) !important; } html.design-formell-v2 .next-level-name { font-family: var(--v2-font) !important; font-weight: 600 !important; color: var(--v2-text) !important; } /* bunte Abzeichen und Kaesten: Serie, Aufgaben-Level, „Beispielklasse“ */ html.design-formell-v2 .streak-widget { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; } html.design-formell-v2 .aufgabe-abzeichen { background: var(--v2-surface) !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-border) !important; } html.design-formell-v2 span[style*="background:#fde68a"] { background: var(--v2-surface-2) !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-border) !important; } /* die 15 bunten Farbschemata haben in der Vorschau keine Wirkung mehr: Auswahl ausgeblendet */ html.design-formell-v2 #formal-theme-row { display: none !important; } } /* fv2-ikon-nachtrag (4.10.2026): aktive Taste ohne Vergrößerung (die Leertaste wuchs über die Nachbarn), Legenden-Balken der Level-Übersicht ohne gelb-grünen Verlauf */ @layer vorschau { html.design-formell-v2 #keyboard .key.active, html.design-formell-v2 #keyboard .key.shift-active, html.design-formell-v2 #keyboard .key.altgr-active { transform: none !important; font-size: inherit !important; font-weight: 700 !important; } html.design-formell-v2 span[style*="#FFD93D,#56ab2f"] { background: var(--v2-accent) !important; } } /* Trainingskopf einheitlich (4.10.2026, Emanuel: „gleiche Umrahmung, gleiche Höhe“) */ @layer vorschau { html.design-formell-v2 .header .header-right { gap: 8px !important; align-items: center !important; } html.design-formell-v2 .header .back-btn, html.design-formell-v2 .header .level-badge, html.design-formell-v2 .header .restart-btn, html.design-formell-v2 .header .skip-error-toggle, html.design-formell-v2 .header .view-toggle, html.design-formell-v2 .header .design-mode-toggle, html.design-formell-v2 .header .punkte-display, html.design-formell-v2 .header .user-info-display { box-sizing: border-box !important; height: 40px !important; min-height: 40px !important; padding: 0 14px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: 6px !important; border: 1px solid var(--v2-border) !important; background: var(--v2-surface) !important; color: var(--v2-text) !important; font-family: var(--v2-font) !important; font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; text-shadow: none !important; animation: none !important; } html.design-formell-v2 .header .skip-error-toggle, html.design-formell-v2 .header .view-toggle, html.design-formell-v2 .header .design-mode-toggle { width: 40px !important; min-width: 40px !important; padding: 0 !important; font-size: 1.15rem !important; color: var(--v2-muted) !important; } @media (min-width: 1501px) { html.design-formell-v2 .header .design-mode-toggle { width: auto !important; padding: 0 12px !important; font-size: 0.95rem !important; } } html.design-formell-v2 .header .design-mode-label { color: inherit !important; font-family: var(--v2-font) !important; font-size: 0.95rem !important; } html.design-formell-v2 .header .design-mode-icon { font-size: 1.15rem !important; display: inline-flex !important; } html.design-formell-v2 .header .skip-error-toggle *, html.design-formell-v2 .header .view-toggle *, html.design-formell-v2 .header .design-mode-toggle * { color: inherit !important; } html.design-formell-v2 .header .view-toggle.active, html.design-formell-v2 .header .skip-error-toggle.active { border-color: var(--v2-accent-soft) !important; color: var(--v2-accent-soft) !important; background: var(--v2-surface) !important; } html.design-formell-v2 .header .view-toggle:hover, html.design-formell-v2 .header .skip-error-toggle:hover, html.design-formell-v2 .header .design-mode-toggle:hover { border-color: var(--v2-accent-soft) !important; } html.design-formell-v2 .header .level-badge { background: var(--v2-accent) !important; border-color: var(--v2-accent) !important; color: var(--v2-accent-text) !important; } html.design-formell-v2 .header .restart-btn, html.design-formell-v2 .header .back-btn { border-color: var(--v2-accent-soft) !important; color: var(--v2-accent-soft) !important; } html.design-formell-v2 .header .restart-btn *, html.design-formell-v2 .header .back-btn * { color: inherit !important; } html.design-formell-v2 .header .punkte-display * { color: inherit !important; font-family: var(--v2-font) !important; } html.design-formell-v2 .header .header-right > [style*="display:none"], html.design-formell-v2 .header .header-right > [style*="display: none"] { display: none !important; } } /* Level-Karten (4.10.2026): Marker der Theme-Freischaltung (gelber Rand, 🎨 aus CSS-Inhalt) in der Vorschau neutral; Symbol-Spans in den großen Trainingsknöpfen des Dashboards sichtbar, sobald sie ein Liniensymbol enthalten */ @layer vorschau { html.design-formell-v2 .level-item.theme-unlock { border: 1px solid var(--v2-border) !important; box-shadow: none !important; } html.design-formell-v2 .level-item.theme-unlock::after { display: none !important; content: none !important; } html.design-formell-v2 a[style*="linear-gradient"] > span[style*="font-size"]:first-child:has(.fv2-ikon), html.design-formell-v2 button[style*="linear-gradient"] > span[style*="font-size"]:first-child:has(.fv2-ikon) { display: inline-flex !important; font-size: 1.25rem !important; line-height: 1 !important; } } /* Kopfzeile schmal (4.10.2026): bis 1500 px „Level neu starten“ als Symbolknopf — mit 40-px-Knöpfen rutschte der Name bei 1366 px in eine zweite Zeile; Schieberegler (Sichtbare Zeilen, Level-Länge) in der Akzentfarbe */ @layer vorschau { @media (max-width: 1500px) { html.design-formell-v2 .header .restart-btn { width: 40px !important; min-width: 40px !important; padding: 0 !important; font-size: 0 !important; } html.design-formell-v2 .header .restart-btn .fv2-ikon { font-size: 1.15rem !important; width: 1.15rem !important; height: 1.15rem !important; } } html.design-formell-v2 input[type="range"] { accent-color: var(--v2-accent) !important; } } /* Schnellzugriff (4.10.2026, Emanuel: „links heller Hintergrund, zum rechten Rand hin ein passendes Hintergrundbild“, dann „etwas mehr Farbe“): je Kachel ein gezeichnetes Motiv in gedämpftem Blau mit gedämpften Zusatzfarben, rechts angesetzt und nach links ausgeblendet; die Kachel wird nach rechts leicht getönt. Zuordnung über das Liniensymbol der Kachel (.fv2-ikon- aus formell_v2.js). Quelle: kacheln.py (Scratchpad-Muster). */ @layer vorschau { html.design-formell-v2 { --fv2-kachel-tint: #e4ebf3; } html.design-formell-v2:not(.light-mode) { --fv2-kachel-tint: #2a3542; } html.design-formell-v2 .quick-action { position: relative !important; overflow: hidden !important; min-height: 84px !important; isolation: isolate; background: linear-gradient(90deg, var(--v2-surface) 0%, var(--v2-surface) 40%, var(--fv2-kachel-tint) 100%) !important; } html.design-formell-v2 .quick-action > * { position: relative; z-index: 1; } html.design-formell-v2 .quick-action::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 60%; pointer-events: none; background: var(--fv2-motiv, none) right 12px center / auto 84% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); } html.design-formell-v2 .quick-action:has(.fv2-ikon-school) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='110' y='8' width='80' height='30' rx='2' fill='%234f9c9a' fill-opacity='.4' stroke='%234f9c9a'/%3E%3Cpath d='M120 18h32M120 27h46' stroke='%23ffffff' stroke-opacity='.75'/%3E%3Cpath d='M104 42h96' stroke='%238fb3d6' stroke-opacity='.6'/%3E%3Cpath d='M109 72a10 10 0 0 1 20 0' fill='%235a86b0' fill-opacity='.4' stroke='%235a86b0'/%3E%3Ccircle cx='119' cy='57' r='6.5' fill='%235a86b0' fill-opacity='.55' stroke='%235a86b0'/%3E%3Cpath d='M139 72a10 10 0 0 1 20 0' fill='%234f9c9a' fill-opacity='.4' stroke='%234f9c9a'/%3E%3Ccircle cx='149' cy='57' r='6.5' fill='%234f9c9a' fill-opacity='.55' stroke='%234f9c9a'/%3E%3Cpath d='M169 72a10 10 0 0 1 20 0' fill='%23e0944a' fill-opacity='.4' stroke='%23e0944a'/%3E%3Ccircle cx='179' cy='57' r='6.5' fill='%23e0944a' fill-opacity='.55' stroke='%23e0944a'/%3E%3Crect x='105' y='71' width='28' height='6' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Crect x='135' y='71' width='28' height='6' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Crect x='165' y='71' width='28' height='6' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Cpath d='M124 96a10 10 0 0 1 20 0' fill='%23e0944a' fill-opacity='.4' stroke='%23e0944a'/%3E%3Ccircle cx='134' cy='81' r='6.5' fill='%23e0944a' fill-opacity='.55' stroke='%23e0944a'/%3E%3Cpath d='M154 96a10 10 0 0 1 20 0' fill='%235a86b0' fill-opacity='.4' stroke='%235a86b0'/%3E%3Ccircle cx='164' cy='81' r='6.5' fill='%235a86b0' fill-opacity='.55' stroke='%235a86b0'/%3E%3Crect x='120' y='95' width='28' height='5' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Crect x='150' y='95' width='28' height='5' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-key) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='112' cy='72' r='16' fill='%23d9a441' fill-opacity='.35' stroke='%23d9a441'/%3E%3Ccircle cx='112' cy='72' r='5' fill='%23ffffff' fill-opacity='.6' stroke='%23d9a441'/%3E%3Cpath d='M124 60l46-46' stroke='%23d9a441' stroke-width='6'/%3E%3Cpath d='M158 26l8 8M148 36l8 8' stroke='%23d9a441' stroke-width='5'/%3E%3Crect x='148' y='62' width='40' height='28' rx='4' fill='%235a86b0' fill-opacity='.18'/%3E%3Cpath d='M156 72h22M156 80h12' stroke='%238fb3d6'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-users) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='124' cy='42' r='10' fill='%234f9c9a' fill-opacity='.35' stroke='%234f9c9a'/%3E%3Cpath d='M106 80a18 18 0 0 1 36 0' fill='%234f9c9a' fill-opacity='.25' stroke='%234f9c9a'/%3E%3Ccircle cx='176' cy='42' r='10' fill='%23e0944a' fill-opacity='.35' stroke='%23e0944a'/%3E%3Cpath d='M158 80a18 18 0 0 1 36 0' fill='%23e0944a' fill-opacity='.25' stroke='%23e0944a'/%3E%3Ccircle cx='150' cy='48' r='12' fill='%235a86b0' fill-opacity='.35'/%3E%3Cpath d='M128 92a22 22 0 0 1 44 0' fill='%235a86b0' fill-opacity='.3'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-filetext) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='120' y='12' width='52' height='66' rx='3' fill='%235a86b0' fill-opacity='.12'/%3E%3Crect x='104' y='24' width='52' height='66' rx='3' fill='%23ffffff' fill-opacity='.35'/%3E%3Cpath d='M114 40h32M114 50h32M114 60h22' stroke='%238fb3d6'/%3E%3Cpath d='M158 90l26-26 7 7-26 26h-7z' fill='%23e0944a' fill-opacity='.7' stroke='%23e0944a'/%3E%3Cpath d='M184 64l7 7' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-timer) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M58 40h48M58 52h38M58 64h44' stroke='%238fb3d6'/%3E%3Ccircle cx='150' cy='58' r='30' stroke-width='3' fill='%235a86b0' fill-opacity='.1'/%3E%3Cpath d='M150 28v-8M143 20h14M172 37l7-7'/%3E%3Cpath d='M150 34v4M150 78v4M126 58h4M170 58h4' stroke='%238fb3d6'/%3E%3Cpath d='M150 58V40' stroke='%23c96a5a' stroke-width='3'/%3E%3Ccircle cx='150' cy='58' r='3.5' fill='%23c96a5a' stroke='%23c96a5a'/%3E%3Cpath d='M150 58a22 22 0 0 1 11 -19' stroke='%23c96a5a' stroke-opacity='.5' stroke-width='5'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-clipboard) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='116' y='16' width='62' height='78' rx='5' fill='%235a86b0' fill-opacity='.12'/%3E%3Crect x='136' y='10' width='22' height='12' rx='3' fill='%23c9a06d' fill-opacity='.8' stroke='%23c9a06d'/%3E%3Cpath d='M126 42l5 5 9-9M126 60l5 5 9-9' stroke='%235fa37a' stroke-width='3'/%3E%3Cpath d='M146 44h22M146 62h22M146 80h14' stroke='%238fb3d6'/%3E%3Crect x='126' y='74' width='12' height='12' rx='2'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-chart) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 90h90M100 90V20'/%3E%3Crect x='110' y='62' width='14' height='28' fill='%235a86b0' fill-opacity='.45' stroke='%235a86b0'/%3E%3Crect x='132' y='48' width='14' height='42' fill='%234f9c9a' fill-opacity='.5' stroke='%234f9c9a'/%3E%3Crect x='154' y='34' width='14' height='56' fill='%235fa37a' fill-opacity='.5' stroke='%235fa37a'/%3E%3Cpath d='M106 72l24-16 22 6 24-30' stroke='%23e0944a' stroke-width='3'/%3E%3Ccircle cx='130' cy='56' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3Ccircle cx='152' cy='62' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3Ccircle cx='176' cy='32' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-trend) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 30h90M100 50h90M100 70h90' stroke='%238fb3d6' stroke-opacity='.5'/%3E%3Cpath d='M100 82l22-14 20 6 22-22 26-10V90H100z' fill='%234f9c9a' fill-opacity='.3' stroke='none'/%3E%3Cpath d='M100 82l22-14 20 6 22-22 26-10' stroke='%234f9c9a' stroke-width='3'/%3E%3Ccircle cx='122' cy='68' r='3.5' fill='%23ffffff' stroke='%234f9c9a'/%3E%3Ccircle cx='142' cy='74' r='3.5' fill='%23ffffff' stroke='%234f9c9a'/%3E%3Ccircle cx='164' cy='52' r='3.5' fill='%23ffffff' stroke='%234f9c9a'/%3E%3Ccircle cx='190' cy='42' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-monitor) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='104' y='14' width='84' height='50' rx='4' fill='%235a86b0' fill-opacity='.18'/%3E%3Cpath d='M116 28h40M116 38h56M116 48h30' stroke='%238fb3d6'/%3E%3Cpath d='M146 64v10M130 74h32'/%3E%3Crect x='106' y='84' width='22' height='8' rx='2' fill='%23c9a06d' fill-opacity='.7' stroke='%23c9a06d'/%3E%3Crect x='135' y='84' width='22' height='8' rx='2' fill='%23c9a06d' fill-opacity='.7' stroke='%23c9a06d'/%3E%3Crect x='164' y='84' width='22' height='8' rx='2' fill='%23c9a06d' fill-opacity='.7' stroke='%23c9a06d'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-book) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 30q24-10 46 0v56q-22-8-46 0z' fill='%235a86b0' fill-opacity='.14'/%3E%3Cpath d='M146 30q24-10 46 0v56q-22-8-46 0z' fill='%235a86b0' fill-opacity='.14'/%3E%3Cpath d='M146 30v56'/%3E%3Cpath d='M110 44h26M110 54h26M110 64h18M156 44h26M156 54h26M156 64h18' stroke='%238fb3d6'/%3E%3Cpath d='M176 26v22l5-4 5 4V26' fill='%23c96a5a' fill-opacity='.8' stroke='%23c96a5a'/%3E%3C/svg%3E"); } html.design-formell-v2 .quick-action:has(.fv2-ikon-sliders) { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M104 36h86M104 58h86M104 80h86' stroke='%238fb3d6' stroke-width='4'/%3E%3Cpath d='M104 36h46' stroke='%235a86b0' stroke-width='4'/%3E%3Cpath d='M104 58h18' stroke='%234f9c9a' stroke-width='4'/%3E%3Cpath d='M104 80h64' stroke='%23e0944a' stroke-width='4'/%3E%3Ccircle cx='150' cy='36' r='8' fill='%23ffffff' fill-opacity='.9' stroke='%235a86b0'/%3E%3Ccircle cx='122' cy='58' r='8' fill='%23ffffff' fill-opacity='.9' stroke='%234f9c9a'/%3E%3Ccircle cx='168' cy='80' r='8' fill='%23ffffff' fill-opacity='.9' stroke='%23e0944a'/%3E%3C/svg%3E"); } } /* Kacheln schmal (Handy): Motiv auf das rechte Drittel begrenzt, damit es nicht unter die Beschriftung gerät */ @layer vorschau { @media (max-width: 700px) { html.design-formell-v2 .quick-action::after { width: 38%; } } } /* ---------- produktiv seit 4.10.2026 (Emanuel: „Mache es live!“) ---------- Diese Datei gilt jetzt für jedes angemeldete Konto im formellen Design (Klasse design-formell-v2 setzt base.html/train.html, wenn der Design-Modus formell ist; formell_v2.js spiegelt einen Moduswechsel zur Laufzeit). Außerhalb des formellen Designs: Symbol-Spans behalten ihre Größe (bis zum Neuladen nach dem Wechsel), die Hintergrund-Auswahl bleibt verborgen. */ .fv2-ikon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; } .fv2-ikon svg { display: block; width: 100%; height: 100%; } html:not(.design-formell-v2) #fv2-hintergrund { display: none !important; } /* Formelles Design ohne Spiele und Ranglisten (Vorgabe Emanuel 3.10.2026): Verweise auf Duell, Rangliste, Freunde, Belohnungen sowie Münzen/Punkte-Abzeichen im Menü ausgeblendet — serverseitig gesperrt sind sie nur für Schulkonten */ @layer vorschau { /* Ausnahme seit 9.10.2026 (Emanuel: „Hier sollte auch Duelle verfügbar sein“): die Kachel „Duelle“ in der Karte „Training“ */ html.design-formell-v2 a[href$="/train/duel"]:not(.kachel-duell), html.design-formell-v2 a[href$="/leaderboard"], html.design-formell-v2 a[href$="/duel-leaderboard"], /* Freunde seit 9.10.2026 nicht mehr ausgeblendet (Emanuel: „formelles design bei privatkonten sollte auch zugriff zu freunde haben“): Die drei Verweise (Menü, mobiles Menü, Dashboard-Karte) gibt die Vorlage nur Privatkonten aus (not school_account) — Schulkonten bleiben ohne Verweis und serverseitig gesperrt. Rangliste und Duell-Rangliste bleiben ausgeblendet. */ html.design-formell-v2 a[href$="/rewards"], html.design-formell-v2 .stat-badge, html.design-formell-v2 button[onclick*="openDashboardDuelLobby"], html.design-formell-v2 div:has(> a.leaderboard-link) { display: none !important; } } /* ---------- Seiten der Produktionsprüfung (4.10.2026): Klasse, Schularbeiten, Abschriften, Auswertung, Statistiken, Texte, Lizenz, Schüler-Statistik, Belohnungen — Beschriftungen in der Textfarbe, Nebentexte gedämpft, Knöpfe flach ---------- */ @layer vorschau { /* Klassenseite */ html.design-formell-v2 .setting-label-cls, html.design-formell-v2 .csv-import-title, html.design-formell-v2 .csv-format-label, html.design-formell-v2 .stat-box-value, html.design-formell-v2 details > summary { color: var(--v2-text) !important; } html.design-formell-v2 .setting-desc-cls, html.design-formell-v2 .csv-import-desc, html.design-formell-v2 .stat-box-label, html.design-formell-v2 .header-actions > span, html.design-formell-v2 .csv-import-details summary { color: var(--v2-muted) !important; } html.design-formell-v2 .csv-import-box, html.design-formell-v2 .csv-format-example { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; } html.design-formell-v2 .csv-import-btn, html.design-formell-v2 .btn-create, html.design-formell-v2 .aw-knopf-haupt, html.design-formell-v2 .class-tab.active, html.design-formell-v2 .aw-chip.aktiv, html.design-formell-v2 .toggle-btn.active, html.design-formell-v2 .time-filter-btn.active { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent) !important; border-radius: 6px !important; box-shadow: none !important; text-shadow: none !important; } html.design-formell-v2 .class-tab.active *, html.design-formell-v2 .aw-chip.aktiv *, html.design-formell-v2 .time-filter-btn.active * { color: inherit !important; } html.design-formell-v2 .page-title > button, html.design-formell-v2 button[onclick*="editClassroom"], html.design-formell-v2 .toggle-btn:not(.active), html.design-formell-v2 .btn-import-file, html.design-formell-v2 .btn-new-folder, html.design-formell-v2 .class-tab:not(.active), html.design-formell-v2 .aw-chip:not(.aktiv), html.design-formell-v2 .time-filter-btn:not(.active) { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 6px !important; box-shadow: none !important; } html.design-formell-v2 .class-tab:not(.active) *, html.design-formell-v2 .aw-chip:not(.aktiv) * { color: inherit !important; } /* Klassenkopf (Emanuel 4.10.2026 „schaut etwas unruhig aus“): Umbenennen/Untertitel als stille Stift-Knöpfe — nur das Liniensymbol, der Text bleibt für Vorleser und als Tooltip (title); erst beim Zeigen Fläche und Rahmen */ html.design-formell-v2 button[onclick*="renameClassroom"], html.design-formell-v2 button[onclick*="editClassroomSubtitle"] { background: transparent !important; border: 1px solid transparent !important; color: transparent !important; font-size: 0 !important; padding: 4px !important; line-height: 0 !important; border-radius: 6px !important; gap: 0 !important; } html.design-formell-v2 button[onclick*="renameClassroom"] .fv2-ikon, html.design-formell-v2 button[onclick*="editClassroomSubtitle"] .fv2-ikon { font-size: 1rem !important; width: 1.05em !important; height: 1.05em !important; color: var(--v2-muted) !important; margin: 0 !important; } html.design-formell-v2 button[onclick*="renameClassroom"]:hover, html.design-formell-v2 button[onclick*="editClassroomSubtitle"]:hover, html.design-formell-v2 button[onclick*="renameClassroom"]:focus-visible, html.design-formell-v2 button[onclick*="editClassroomSubtitle"]:focus-visible { background: var(--v2-surface) !important; border-color: var(--v2-border) !important; } html.design-formell-v2 button[onclick*="renameClassroom"]:hover .fv2-ikon, html.design-formell-v2 button[onclick*="editClassroomSubtitle"]:hover .fv2-ikon { color: var(--v2-accent-soft) !important; } html.design-formell-v2 .msg-toolbar .btn[disabled] { opacity: 0.55 !important; } /* Weiße Dialoge der Klassenseite (Schüler bearbeiten, In andere Klasse verschieben): die dunklen Formell-Regeln aus main.css färbten Überschrift und Beschriftungen weiß auf Weiß und die Felder dunkel (gemessen 4.10.2026) */ html.design-formell-v2 #move-modal h3, html.design-formell-v2 #student-modal h3, html.design-formell-v2 #move-modal strong, html.design-formell-v2 #student-modal strong { color: #1a1a2e !important; } html.design-formell-v2 #move-modal label, html.design-formell-v2 #student-modal label, html.design-formell-v2 #move-modal p, html.design-formell-v2 #student-modal p { color: #4b5563 !important; } html.design-formell-v2 #move-modal select, html.design-formell-v2 #student-modal input[type="text"] { background: #ffffff !important; color: #1a1a2e !important; border: 1px solid #cbd5e1 !important; } /* Schularbeiten, Abschriften: Notenschema und Noten-Abzeichen */ html.design-formell-v2 .grading-header span, html.design-formell-v2 .dict-grading-row span, html.design-formell-v2 .grading-summary, html.design-formell-v2 .mehrfach-hinweis { color: var(--v2-text) !important; } html.design-formell-v2 .grade-badge { background: var(--v2-surface-2) !important; background-image: none !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; } /* Statistiken der Lehrkraft, Texte */ html.design-formell-v2 .stat-card .stat-lbl, html.design-formell-v2 .folder-count { color: var(--v2-muted) !important; } html.design-formell-v2 .folder-item.active .folder-count { color: inherit !important; } html.design-formell-v2 .sidebar-title { color: var(--v2-text) !important; } /* Lizenzseite */ html.design-formell-v2 .plan-card { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; color: var(--v2-text) !important; box-shadow: none !important; } html.design-formell-v2 .plan-card.recommended { border-color: var(--v2-accent-soft) !important; } html.design-formell-v2 .plan-name, html.design-formell-v2 .plan-price { color: var(--v2-text) !important; } html.design-formell-v2 .hinweis-links { color: var(--v2-muted) !important; } /* Schüler-Statistik: Platzierung, Serien, Bestleistungen */ html.design-formell-v2 .ranking-display { background: var(--v2-accent) !important; background-image: none !important; color: #ffffff !important; border-radius: 6px !important; box-shadow: none !important; } html.design-formell-v2 .ranking-display * { color: #ffffff !important; text-shadow: none !important; } html.design-formell-v2 .ranking-detail, html.design-formell-v2 .best-item, html.design-formell-v2 .streak-item, html.design-formell-v2 .streak-hint, html.design-formell-v2 .error-empty { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; } html.design-formell-v2 .ranking-detail-value, html.design-formell-v2 .best-value, html.design-formell-v2 .streak-value, html.design-formell-v2 .streak-hint { color: var(--v2-text) !important; } html.design-formell-v2 .ranking-detail-label, html.design-formell-v2 .best-label, html.design-formell-v2 .best-detail, html.design-formell-v2 .streak-label, html.design-formell-v2 .error-empty, html.design-formell-v2 #progress-tracking-content { color: var(--v2-muted) !important; } html.design-formell-v2 .info-tooltip { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; } html.design-formell-v2 h1 > span[style*="gradient"], html.design-formell-v2 h1 > .pro-badge { background: var(--v2-accent) !important; background-image: none !important; color: #ffffff !important; border-radius: 4px !important; } /* Belohnungen (im formellen Design nicht verlinkt, aber erreichbar) */ html.design-formell-v2 .achievement-card { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; color: var(--v2-text) !important; } html.design-formell-v2 .achievement-info h3, html.design-formell-v2 .achievement-info p { color: var(--v2-text) !important; } } /* Nachtrag Produktionsprüfung 2 (4.10.2026): Notenschlüssel der Abschriften, CSV-Beispiel der Klassenseite, Belohnungen */ @layer vorschau { html.design-formell-v2 #dict-grading-table span, html.design-formell-v2 #dict-grading-table label { color: var(--v2-text) !important; } html.design-formell-v2 .csv-format-example code { color: var(--v2-text) !important; background: var(--v2-surface) !important; } html.design-formell-v2 .shop-item .select-btn { background: var(--v2-accent) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--v2-accent) !important; opacity: 1 !important; } html.design-formell-v2 .shop-item .select-btn[disabled] { opacity: 0.55 !important; } html.design-formell-v2 .coins-text h3, html.design-formell-v2 .shop-item, html.design-formell-v2 .shop-item h3 { color: var(--v2-text) !important; } html.design-formell-v2 .section-count { color: var(--v2-muted) !important; } /* Belohnungen, Kacheln „nur mit Pro“ (9.10.2026, Abnahme am Livestand): „Nur mit Pro“ stand mit #a89cff auf der hellen Kachel (2,17:1), der Knopf „Pro freischalten“ weiß auf dem durchscheinenden Verlauf (2,82:1) — gesperrte Kacheln sind im hellen Modus zu 70 % durchsichtig. Hier deckend. Die Kachel ist im formellen Design in beiden Farbmodi hell (main.css: body.design-formell .shop-grid .shop-item) — Schrift und Symbole darauf deshalb in festen dunklen Farben, nicht in den Variablen des dunklen Modus (dort hell: „Nur mit Pro“ 2,86:1, Stern 1,50:1). */ html.design-formell-v2 .shop-item.locked { opacity: 1 !important; } html.design-formell-v2 .shop-item .item-name, html.design-formell-v2 .shop-item .lock-overlay { opacity: 1 !important; } html.design-formell-v2 .shop-item .item-price { color: #374151 !important; opacity: 1 !important; } html.design-formell-v2 .shop-item .fv2-ikon { color: #1f4e79 !important; } html.design-formell-v2 .shop-item .buy-btn { background: var(--v2-accent) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--v2-accent) !important; opacity: 1 !important; box-shadow: none !important; } html.design-formell-v2 .rarity-badge, html.design-formell-v2 .owned-badge { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; } } /* Nachtrag Produktionsprüfung 3 (4.10.2026): Ladehinweis der Schüler-Statistik, Münz-Hinweis der Belohnungen */ @layer vorschau { html.design-formell-v2 #progress-tracking-content, html.design-formell-v2 #progress-tracking-content * { color: var(--v2-muted) !important; } html.design-formell-v2 .coins-info { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; } html.design-formell-v2 .coins-info * { color: var(--v2-text) !important; } } /* ---------- Motive auf den übrigen Seiten (4.10.2026, Emanuel: „auch bei den anderen Seiten so Symbole wie bei den Schnellzugriffsbuttons“): (a) Kartenüberschriften mit Liniensymbol tragen rechts das passende Motiv im Überschriftenband (nur direkte h2 einer Karte, nicht in Kopfzeilen mit Knöpfen; nicht am Schnellzugriff selbst); (b) die großen Trainingsknöpfe des Schüler-Dashboards werden Kacheln wie der Schnellzugriff. Quelle: motive2.py (Scratchpad-Muster). */ @layer vorschau { html.design-formell-v2 .card > h2:has(> .fv2-ikon, > span[aria-hidden] > .fv2-ikon) { position: relative; display: flex !important; align-items: center; min-height: 52px; padding-right: 220px !important; margin-top: -6px; } html.design-formell-v2 .card > h2:has(> .fv2-ikon, > span[aria-hidden] > .fv2-ikon)::after { content: ''; position: absolute; top: -10px; right: -6px; height: 66px; width: 230px; pointer-events: none; background: var(--fv2-motiv, none) right center / auto 100% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); } html.design-formell-v2 .card:has(.quick-actions) > h2 { padding-right: 0 !important; min-height: 0; } html.design-formell-v2 .card:has(.quick-actions) > h2::after { display: none; } @media (max-width: 700px) { html.design-formell-v2 .card > h2:has(> .fv2-ikon, > span[aria-hidden] > .fv2-ikon) { padding-right: 0 !important; } html.design-formell-v2 .card > h2:has(> .fv2-ikon, > span[aria-hidden] > .fv2-ikon)::after { display: none; } } html.design-formell-v2 { --fv2-m-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M126 72V52a24 24 0 0 1 48 0v20l8 10H118l8-10z' fill='%23d9a441' fill-opacity='.5' stroke='%23d9a441'/%3E%3Cpath d='M142 84a8 8 0 0 0 16 0' stroke='%23d9a441'/%3E%3Cpath d='M150 28v-6' stroke='%23d9a441'/%3E%3Cpath d='M184 40a30 30 0 0 1 6 16M116 40a30 30 0 0 0-6 16' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 30q24-10 46 0v56q-22-8-46 0z' fill='%235a86b0' fill-opacity='.14'/%3E%3Cpath d='M146 30q24-10 46 0v56q-22-8-46 0z' fill='%235a86b0' fill-opacity='.14'/%3E%3Cpath d='M146 30v56'/%3E%3Cpath d='M110 44h26M110 54h26M110 64h18M156 44h26M156 54h26M156 64h18' stroke='%238fb3d6'/%3E%3Cpath d='M176 26v22l5-4 5 4V26' fill='%23c96a5a' fill-opacity='.8' stroke='%23c96a5a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='116' y='18' width='68' height='70' rx='5' fill='%235a86b0' fill-opacity='.12'/%3E%3Crect x='116' y='18' width='68' height='16' rx='5' fill='%23c96a5a' fill-opacity='.6' stroke='%23c96a5a'/%3E%3Cpath d='M132 12v12M168 12v12' stroke-width='3'/%3E%3Crect x='124' y='42' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='137' y='42' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='150' y='42' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='163' y='42' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='124' y='54' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='137' y='54' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='150' y='54' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='163' y='54' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='124' y='66' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='137' y='66' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='150' y='66' width='8' height='7' rx='1' fill='%238fb3d6' fill-opacity='.6' stroke='none'/%3E%3Crect x='163' y='66' width='8' height='7' rx='1' fill='%234f9c9a' fill-opacity='.9' stroke='none'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 90h90M100 90V20'/%3E%3Crect x='110' y='62' width='14' height='28' fill='%235a86b0' fill-opacity='.45' stroke='%235a86b0'/%3E%3Crect x='132' y='48' width='14' height='42' fill='%234f9c9a' fill-opacity='.5' stroke='%234f9c9a'/%3E%3Crect x='154' y='34' width='14' height='56' fill='%235fa37a' fill-opacity='.5' stroke='%235fa37a'/%3E%3Cpath d='M106 72l24-16 22 6 24-30' stroke='%23e0944a' stroke-width='3'/%3E%3Ccircle cx='130' cy='56' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3Ccircle cx='152' cy='62' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3Ccircle cx='176' cy='32' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='116' y='16' width='62' height='78' rx='5' fill='%235a86b0' fill-opacity='.12'/%3E%3Crect x='136' y='10' width='22' height='12' rx='3' fill='%23c9a06d' fill-opacity='.8' stroke='%23c9a06d'/%3E%3Cpath d='M126 42l5 5 9-9M126 60l5 5 9-9' stroke='%235fa37a' stroke-width='3'/%3E%3Cpath d='M146 44h22M146 62h22M146 80h14' stroke='%238fb3d6'/%3E%3Crect x='126' y='74' width='12' height='12' rx='2'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-filetext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='120' y='12' width='52' height='66' rx='3' fill='%235a86b0' fill-opacity='.12'/%3E%3Crect x='104' y='24' width='52' height='66' rx='3' fill='%23ffffff' fill-opacity='.35'/%3E%3Cpath d='M114 40h32M114 50h32M114 60h22' stroke='%238fb3d6'/%3E%3Cpath d='M158 90l26-26 7 7-26 26h-7z' fill='%23e0944a' fill-opacity='.7' stroke='%23e0944a'/%3E%3Cpath d='M184 64l7 7' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='150' cy='55' r='32' fill='%235a86b0' fill-opacity='.12'/%3E%3Cpath d='M118 55h64M150 23v64'/%3E%3Cellipse cx='150' cy='55' rx='14' ry='32'/%3E%3Cpath d='M124 40q26 8 52 0M124 70q26-8 52 0' stroke='%238fb3d6'/%3E%3Cpath d='M131 44c6-6 14-4 16 2 2 6-4 8-10 10s-10-6-6-12z' fill='%235fa37a' fill-opacity='.55' stroke='none'/%3E%3Cpath d='M160 60c5-3 12 0 12 6s-6 8-10 5-6-8-2-11z' fill='%235fa37a' fill-opacity='.55' stroke='none'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='112' cy='72' r='16' fill='%23d9a441' fill-opacity='.35' stroke='%23d9a441'/%3E%3Ccircle cx='112' cy='72' r='5' fill='%23ffffff' fill-opacity='.6' stroke='%23d9a441'/%3E%3Cpath d='M124 60l46-46' stroke='%23d9a441' stroke-width='6'/%3E%3Cpath d='M158 26l8 8M148 36l8 8' stroke='%23d9a441' stroke-width='5'/%3E%3Crect x='148' y='62' width='40' height='28' rx='4' fill='%235a86b0' fill-opacity='.18'/%3E%3Cpath d='M156 72h22M156 80h12' stroke='%238fb3d6'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-keyboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='104' y='30' width='92' height='48' rx='5' fill='%235a86b0' fill-opacity='.14'/%3E%3Crect x='110' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='121' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='132' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='143' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='154' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='165' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='176' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='187' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='115' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='126' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='137' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='148' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='159' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='170' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='181' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='120' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='131' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='142' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='153' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='164' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='175' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='126' y='71' width='48' height='4' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='137' y='49' width='8' height='7' rx='1.5' fill='%234f9c9a' fill-opacity='.8' stroke='%234f9c9a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-landmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M106 92h88'/%3E%3Cpath d='M112 40l38-20 38 20H112z' fill='%23d9a441' fill-opacity='.35' stroke='%235a86b0'/%3E%3Cpath d='M112 40h76v6h-76z' fill='%235a86b0' fill-opacity='.25'/%3E%3Cpath d='M120 46v40M138 46v40M162 46v40M180 46v40' stroke-width='5' stroke='%235a86b0' stroke-opacity='.6'/%3E%3Cpath d='M112 86h76' stroke-width='4'/%3E%3Ccircle cx='150' cy='32' r='3' fill='%235a86b0'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M130 50V38a20 20 0 0 1 40 0v12' stroke-width='4'/%3E%3Crect x='118' y='48' width='64' height='44' rx='6' fill='%23d9a441' fill-opacity='.55' stroke='%23d9a441'/%3E%3Ccircle cx='150' cy='66' r='6' fill='%235a86b0' fill-opacity='.8' stroke='none'/%3E%3Cpath d='M150 70v12' stroke='%235a86b0' stroke-width='4'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='120' y='16' width='56' height='34' rx='3' fill='%23ffffff' fill-opacity='.55'/%3E%3Cpath d='M130 28h36M130 36h24' stroke='%238fb3d6'/%3E%3Crect x='108' y='40' width='84' height='52' rx='4' fill='%235a86b0' fill-opacity='.18'/%3E%3Cpath d='M108 44l42 28 42-28' stroke-width='2.5'/%3E%3Cpath d='M108 92l34-24M192 92l-34-24'/%3E%3Ccircle cx='150' cy='72' r='5' fill='%23e0944a' fill-opacity='.9' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='104' y='14' width='84' height='50' rx='4' fill='%235a86b0' fill-opacity='.18'/%3E%3Cpath d='M116 28h40M116 38h56M116 48h30' stroke='%238fb3d6'/%3E%3Cpath d='M146 64v10M130 74h32'/%3E%3Crect x='106' y='84' width='22' height='8' rx='2' fill='%23c9a06d' fill-opacity='.7' stroke='%23c9a06d'/%3E%3Crect x='135' y='84' width='22' height='8' rx='2' fill='%23c9a06d' fill-opacity='.7' stroke='%23c9a06d'/%3E%3Crect x='164' y='84' width='22' height='8' rx='2' fill='%23c9a06d' fill-opacity='.7' stroke='%23c9a06d'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M112 86h76' stroke='%238fb3d6'/%3E%3Cpath d='M112 74h40' stroke='%238fb3d6'/%3E%3Cpath d='M186 16l10 10-50 50-14 4 4-14 50-50z' fill='%23e0944a' fill-opacity='.7' stroke='%23e0944a'/%3E%3Cpath d='M180 22l10 10' stroke='%235a86b0'/%3E%3Cpath d='M136 76l-4-4' stroke='%235a86b0' stroke-width='4'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-posture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M104 92h92' stroke='%238fb3d6'/%3E%3Crect x='142' y='58' width='50' height='5' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Cpath d='M148 63v29M186 63v29' stroke='%23c9a06d'/%3E%3Crect x='162' y='36' width='26' height='18' rx='2' fill='%235a86b0' fill-opacity='.3' stroke='%235a86b0'/%3E%3Cpath d='M175 54v4' stroke='%235a86b0'/%3E%3Crect x='146' y='54' width='14' height='4' rx='1' fill='%235a86b0' fill-opacity='.6' stroke='%235a86b0'/%3E%3Crect x='108' y='40' width='5' height='30' rx='1.5' fill='%235a86b0' fill-opacity='.6' stroke='%235a86b0'/%3E%3Crect x='108' y='68' width='28' height='5' rx='1.5' fill='%235a86b0' fill-opacity='.6' stroke='%235a86b0'/%3E%3Cpath d='M114 73v19M130 73v19M110 92h24' stroke='%235a86b0'/%3E%3Ccircle cx='124' cy='34' r='8' fill='%234f9c9a' fill-opacity='.5' stroke='%234f9c9a'/%3E%3Cpath d='M124 42v26' stroke='%234f9c9a' stroke-width='6'/%3E%3Cpath d='M124 68h16v24' stroke='%234f9c9a' stroke-width='5'/%3E%3Cpath d='M124 50l22 6' stroke='%234f9c9a' stroke-width='3'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-school: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='110' y='8' width='80' height='30' rx='2' fill='%234f9c9a' fill-opacity='.4' stroke='%234f9c9a'/%3E%3Cpath d='M120 18h32M120 27h46' stroke='%23ffffff' stroke-opacity='.75'/%3E%3Cpath d='M104 42h96' stroke='%238fb3d6' stroke-opacity='.6'/%3E%3Cpath d='M109 72a10 10 0 0 1 20 0' fill='%235a86b0' fill-opacity='.4' stroke='%235a86b0'/%3E%3Ccircle cx='119' cy='57' r='6.5' fill='%235a86b0' fill-opacity='.55' stroke='%235a86b0'/%3E%3Cpath d='M139 72a10 10 0 0 1 20 0' fill='%234f9c9a' fill-opacity='.4' stroke='%234f9c9a'/%3E%3Ccircle cx='149' cy='57' r='6.5' fill='%234f9c9a' fill-opacity='.55' stroke='%234f9c9a'/%3E%3Cpath d='M169 72a10 10 0 0 1 20 0' fill='%23e0944a' fill-opacity='.4' stroke='%23e0944a'/%3E%3Ccircle cx='179' cy='57' r='6.5' fill='%23e0944a' fill-opacity='.55' stroke='%23e0944a'/%3E%3Crect x='105' y='71' width='28' height='6' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Crect x='135' y='71' width='28' height='6' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Crect x='165' y='71' width='28' height='6' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Cpath d='M124 96a10 10 0 0 1 20 0' fill='%23e0944a' fill-opacity='.4' stroke='%23e0944a'/%3E%3Ccircle cx='134' cy='81' r='6.5' fill='%23e0944a' fill-opacity='.55' stroke='%23e0944a'/%3E%3Cpath d='M154 96a10 10 0 0 1 20 0' fill='%235a86b0' fill-opacity='.4' stroke='%235a86b0'/%3E%3Ccircle cx='164' cy='81' r='6.5' fill='%235a86b0' fill-opacity='.55' stroke='%235a86b0'/%3E%3Crect x='120' y='95' width='28' height='5' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Crect x='150' y='95' width='28' height='5' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M150 18l-34 12v22c0 20 14 34 34 40 20-6 34-20 34-40V30l-34-12z' fill='%234f9c9a' fill-opacity='.35' stroke='%234f9c9a' stroke-width='2.5'/%3E%3Cpath d='M136 56l10 10 20-22' stroke='%235fa37a' stroke-width='5'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M104 36h86M104 58h86M104 80h86' stroke='%238fb3d6' stroke-width='4'/%3E%3Cpath d='M104 36h46' stroke='%235a86b0' stroke-width='4'/%3E%3Cpath d='M104 58h18' stroke='%234f9c9a' stroke-width='4'/%3E%3Cpath d='M104 80h64' stroke='%23e0944a' stroke-width='4'/%3E%3Ccircle cx='150' cy='36' r='8' fill='%23ffffff' fill-opacity='.9' stroke='%235a86b0'/%3E%3Ccircle cx='122' cy='58' r='8' fill='%23ffffff' fill-opacity='.9' stroke='%234f9c9a'/%3E%3Ccircle cx='168' cy='80' r='8' fill='%23ffffff' fill-opacity='.9' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='152' cy='56' r='32' fill='%23c96a5a' fill-opacity='.18' stroke='%23c96a5a'/%3E%3Ccircle cx='152' cy='56' r='21' fill='%23ffffff' fill-opacity='.7' stroke='%23c96a5a'/%3E%3Ccircle cx='152' cy='56' r='10' fill='%23c96a5a' fill-opacity='.6' stroke='%23c96a5a'/%3E%3Ccircle cx='152' cy='56' r='3' fill='%23c96a5a'/%3E%3Cpath d='M110 16l40 38' stroke-width='3'/%3E%3Cpath d='M110 16l14 2M110 16l2 14' stroke='%235a86b0'/%3E%3Cpath d='M104 10l6 6' stroke='%235fa37a' stroke-width='4'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-timer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M58 40h48M58 52h38M58 64h44' stroke='%238fb3d6'/%3E%3Ccircle cx='150' cy='58' r='30' stroke-width='3' fill='%235a86b0' fill-opacity='.1'/%3E%3Cpath d='M150 28v-8M143 20h14M172 37l7-7'/%3E%3Cpath d='M150 34v4M150 78v4M126 58h4M170 58h4' stroke='%238fb3d6'/%3E%3Cpath d='M150 58V40' stroke='%23c96a5a' stroke-width='3'/%3E%3Ccircle cx='150' cy='58' r='3.5' fill='%23c96a5a' stroke='%23c96a5a'/%3E%3Cpath d='M150 58a22 22 0 0 1 11 -19' stroke='%23c96a5a' stroke-opacity='.5' stroke-width='5'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 30h90M100 50h90M100 70h90' stroke='%238fb3d6' stroke-opacity='.5'/%3E%3Cpath d='M100 82l22-14 20 6 22-22 26-10V90H100z' fill='%234f9c9a' fill-opacity='.3' stroke='none'/%3E%3Cpath d='M100 82l22-14 20 6 22-22 26-10' stroke='%234f9c9a' stroke-width='3'/%3E%3Ccircle cx='122' cy='68' r='3.5' fill='%23ffffff' stroke='%234f9c9a'/%3E%3Ccircle cx='142' cy='74' r='3.5' fill='%23ffffff' stroke='%234f9c9a'/%3E%3Ccircle cx='164' cy='52' r='3.5' fill='%23ffffff' stroke='%234f9c9a'/%3E%3Ccircle cx='190' cy='42' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M126 22h48v26a24 24 0 0 1-48 0V22z' fill='%23d9a441' fill-opacity='.6' stroke='%23d9a441'/%3E%3Cpath d='M126 30h-12v10a12 12 0 0 0 12 12M174 30h12v10a12 12 0 0 1-12 12' stroke='%23d9a441'/%3E%3Cpath d='M150 72v12M136 86h28' stroke='%23c9a06d' stroke-width='4'/%3E%3Crect x='132' y='86' width='36' height='6' rx='2' fill='%23c9a06d' fill-opacity='.8' stroke='%23c9a06d'/%3E%3Cpath d='M150 32l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z' fill='%23ffffff' fill-opacity='.85' stroke='none'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='140' cy='40' r='15' fill='%234f9c9a' fill-opacity='.4' stroke='%234f9c9a'/%3E%3Cpath d='M112 92a28 28 0 0 1 56 0' fill='%234f9c9a' fill-opacity='.3' stroke='%234f9c9a'/%3E%3Crect x='158' y='58' width='34' height='24' rx='3' fill='%23ffffff' fill-opacity='.6'/%3E%3Ccircle cx='168' cy='68' r='4' fill='%235a86b0' fill-opacity='.5'/%3E%3Cpath d='M176 66h10M176 73h12' stroke='%238fb3d6'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='124' cy='42' r='10' fill='%234f9c9a' fill-opacity='.35' stroke='%234f9c9a'/%3E%3Cpath d='M106 80a18 18 0 0 1 36 0' fill='%234f9c9a' fill-opacity='.25' stroke='%234f9c9a'/%3E%3Ccircle cx='176' cy='42' r='10' fill='%23e0944a' fill-opacity='.35' stroke='%23e0944a'/%3E%3Cpath d='M158 80a18 18 0 0 1 36 0' fill='%23e0944a' fill-opacity='.25' stroke='%23e0944a'/%3E%3Ccircle cx='150' cy='48' r='12' fill='%235a86b0' fill-opacity='.35'/%3E%3Cpath d='M128 92a22 22 0 0 1 44 0' fill='%235a86b0' fill-opacity='.3'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M150 18l40 68h-80l40-68z' fill='%23e0944a' fill-opacity='.45' stroke='%23e0944a'/%3E%3Cpath d='M150 42v22' stroke='%235a86b0' stroke-width='5'/%3E%3Ccircle cx='150' cy='74' r='3.5' fill='%235a86b0'/%3E%3C/svg%3E"); } html.design-formell-v2 { --fv2-m-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M158 12l-32 48h22l-8 32 34-48h-24l8-32z' fill='%23d9a441' fill-opacity='.65' stroke='%23d9a441'/%3E%3C/svg%3E"); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-award, > span[aria-hidden] > .fv2-ikon-award) { --fv2-motiv: var(--fv2-m-trophy); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-bell, > span[aria-hidden] > .fv2-ikon-bell) { --fv2-motiv: var(--fv2-m-bell); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-book, > span[aria-hidden] > .fv2-ikon-book) { --fv2-motiv: var(--fv2-m-book); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-calendar, > span[aria-hidden] > .fv2-ikon-calendar) { --fv2-motiv: var(--fv2-m-calendar); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-chart, > span[aria-hidden] > .fv2-ikon-chart) { --fv2-motiv: var(--fv2-m-chart); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-checkcircle, > span[aria-hidden] > .fv2-ikon-checkcircle) { --fv2-motiv: var(--fv2-m-clipboard); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-clipboard, > span[aria-hidden] > .fv2-ikon-clipboard) { --fv2-motiv: var(--fv2-m-clipboard); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-download, > span[aria-hidden] > .fv2-ikon-download) { --fv2-motiv: var(--fv2-m-filetext); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-file, > span[aria-hidden] > .fv2-ikon-file) { --fv2-motiv: var(--fv2-m-filetext); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-filetext, > span[aria-hidden] > .fv2-ikon-filetext) { --fv2-motiv: var(--fv2-m-filetext); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-flag, > span[aria-hidden] > .fv2-ikon-flag) { --fv2-motiv: var(--fv2-m-target); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-folder, > span[aria-hidden] > .fv2-ikon-folder) { --fv2-motiv: var(--fv2-m-filetext); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-globe, > span[aria-hidden] > .fv2-ikon-globe) { --fv2-motiv: var(--fv2-m-globe); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-help, > span[aria-hidden] > .fv2-ikon-help) { --fv2-motiv: var(--fv2-m-book); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-home, > span[aria-hidden] > .fv2-ikon-home) { --fv2-motiv: var(--fv2-m-school); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-info, > span[aria-hidden] > .fv2-ikon-info) { --fv2-motiv: var(--fv2-m-book); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-key, > span[aria-hidden] > .fv2-ikon-key) { --fv2-motiv: var(--fv2-m-key); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-keyboard, > span[aria-hidden] > .fv2-ikon-keyboard) { --fv2-motiv: var(--fv2-m-keyboard); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-landmark, > span[aria-hidden] > .fv2-ikon-landmark) { --fv2-motiv: var(--fv2-m-landmark); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-list, > span[aria-hidden] > .fv2-ikon-list) { --fv2-motiv: var(--fv2-m-clipboard); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-lock, > span[aria-hidden] > .fv2-ikon-lock) { --fv2-motiv: var(--fv2-m-lock); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-mail, > span[aria-hidden] > .fv2-ikon-mail) { --fv2-motiv: var(--fv2-m-mail); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-message, > span[aria-hidden] > .fv2-ikon-message) { --fv2-motiv: var(--fv2-m-mail); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-monitor, > span[aria-hidden] > .fv2-ikon-monitor) { --fv2-motiv: var(--fv2-m-monitor); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-pencil, > span[aria-hidden] > .fv2-ikon-pencil) { --fv2-motiv: var(--fv2-m-pencil); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-play, > span[aria-hidden] > .fv2-ikon-play) { --fv2-motiv: var(--fv2-m-keyboard); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-posture, > span[aria-hidden] > .fv2-ikon-posture) { --fv2-motiv: var(--fv2-m-posture); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-printer, > span[aria-hidden] > .fv2-ikon-printer) { --fv2-motiv: var(--fv2-m-filetext); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-school, > span[aria-hidden] > .fv2-ikon-school) { --fv2-motiv: var(--fv2-m-school); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-search, > span[aria-hidden] > .fv2-ikon-search) { --fv2-motiv: var(--fv2-m-chart); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-send, > span[aria-hidden] > .fv2-ikon-send) { --fv2-motiv: var(--fv2-m-mail); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-shield, > span[aria-hidden] > .fv2-ikon-shield) { --fv2-motiv: var(--fv2-m-shield); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-sliders, > span[aria-hidden] > .fv2-ikon-sliders) { --fv2-motiv: var(--fv2-m-sliders); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-star, > span[aria-hidden] > .fv2-ikon-star) { --fv2-motiv: var(--fv2-m-trophy); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-target, > span[aria-hidden] > .fv2-ikon-target) { --fv2-motiv: var(--fv2-m-keyboard); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-timer, > span[aria-hidden] > .fv2-ikon-timer) { --fv2-motiv: var(--fv2-m-timer); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-trend, > span[aria-hidden] > .fv2-ikon-trend) { --fv2-motiv: var(--fv2-m-trend); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-trophy, > span[aria-hidden] > .fv2-ikon-trophy) { --fv2-motiv: var(--fv2-m-trophy); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-upload, > span[aria-hidden] > .fv2-ikon-upload) { --fv2-motiv: var(--fv2-m-filetext); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-user, > span[aria-hidden] > .fv2-ikon-user) { --fv2-motiv: var(--fv2-m-user); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-users, > span[aria-hidden] > .fv2-ikon-users) { --fv2-motiv: var(--fv2-m-users); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-warn, > span[aria-hidden] > .fv2-ikon-warn) { --fv2-motiv: var(--fv2-m-warn); } html.design-formell-v2 .card > h2:has(> .fv2-ikon-zap, > span[aria-hidden] > .fv2-ikon-zap) { --fv2-motiv: var(--fv2-m-zap); } /* große Trainingsknöpfe des Schüler-Dashboards: Kachel mit Symbol links und Motiv rechts */ html.design-formell-v2 .card a[href*="/train/level"][style*="linear-gradient"], html.design-formell-v2 .card a[href$="/train/abschrift"][style*="linear-gradient"], html.design-formell-v2 .card a[href$="/train/custom-text"][style*="linear-gradient"], html.design-formell-v2 .card a[href*="richtig-tippen"][style*="linear-gradient"], html.design-formell-v2 .card a[href$="/statistics"][style*="background"], html.design-formell-v2 .card a.kachel-bestzeit, html.design-formell-v2 .card a.kachel-duell { position: relative !important; overflow: hidden !important; isolation: isolate; min-height: 84px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 14px 16px !important; background: linear-gradient(90deg, var(--v2-surface) 0%, var(--v2-surface) 40%, var(--fv2-kachel-tint) 100%) !important; background-image: linear-gradient(90deg, var(--v2-surface) 0%, var(--v2-surface) 40%, var(--fv2-kachel-tint) 100%) !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; text-align: left !important; font-weight: 600 !important; } html.design-formell-v2 .card a[href*="/train/level"][style*="linear-gradient"] > *, html.design-formell-v2 .card a[href$="/train/abschrift"][style*="linear-gradient"] > *, html.design-formell-v2 .card a[href$="/train/custom-text"][style*="linear-gradient"] > *, html.design-formell-v2 .card a[href*="richtig-tippen"][style*="linear-gradient"] > *, html.design-formell-v2 .card a[href$="/statistics"][style*="background"] > *, html.design-formell-v2 .card a.kachel-bestzeit > *, html.design-formell-v2 .card a.kachel-duell > * { position: relative; z-index: 1; color: inherit !important; } html.design-formell-v2 .card a[href*="/train/level"][style*="linear-gradient"]::after, html.design-formell-v2 .card a[href$="/train/abschrift"][style*="linear-gradient"]::after, html.design-formell-v2 .card a[href$="/train/custom-text"][style*="linear-gradient"]::after, html.design-formell-v2 .card a[href*="richtig-tippen"][style*="linear-gradient"]::after, html.design-formell-v2 .card a[href$="/statistics"][style*="background"]::after, html.design-formell-v2 .card a.kachel-bestzeit::after, html.design-formell-v2 .card a.kachel-duell::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 60%; pointer-events: none; background: var(--fv2-motiv, none) right 12px center / auto 84% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); } html.design-formell-v2 .card a[href*="/train/level"][style*="linear-gradient"] { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='104' y='30' width='92' height='48' rx='5' fill='%235a86b0' fill-opacity='.14'/%3E%3Crect x='110' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='121' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='132' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='143' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='154' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='165' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='176' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='187' y='38' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='115' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='126' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='137' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='148' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='159' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='170' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='181' y='49' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='120' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='131' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='142' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='153' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='164' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='175' y='60' width='8' height='7' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='126' y='71' width='48' height='4' rx='1.5' fill='%23ffffff' fill-opacity='.75' stroke='%235a86b0'/%3E%3Crect x='137' y='49' width='8' height='7' rx='1.5' fill='%234f9c9a' fill-opacity='.8' stroke='%234f9c9a'/%3E%3C/svg%3E"); } html.design-formell-v2 .card a[href$="/train/abschrift"][style*="linear-gradient"] { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M58 40h48M58 52h38M58 64h44' stroke='%238fb3d6'/%3E%3Ccircle cx='150' cy='58' r='30' stroke-width='3' fill='%235a86b0' fill-opacity='.1'/%3E%3Cpath d='M150 28v-8M143 20h14M172 37l7-7'/%3E%3Cpath d='M150 34v4M150 78v4M126 58h4M170 58h4' stroke='%238fb3d6'/%3E%3Cpath d='M150 58V40' stroke='%23c96a5a' stroke-width='3'/%3E%3Ccircle cx='150' cy='58' r='3.5' fill='%23c96a5a' stroke='%23c96a5a'/%3E%3Cpath d='M150 58a22 22 0 0 1 11 -19' stroke='%23c96a5a' stroke-opacity='.5' stroke-width='5'/%3E%3C/svg%3E"); } html.design-formell-v2 .card a[href$="/train/custom-text"][style*="linear-gradient"] { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='120' y='12' width='52' height='66' rx='3' fill='%235a86b0' fill-opacity='.12'/%3E%3Crect x='104' y='24' width='52' height='66' rx='3' fill='%23ffffff' fill-opacity='.35'/%3E%3Cpath d='M114 40h32M114 50h32M114 60h22' stroke='%238fb3d6'/%3E%3Cpath d='M158 90l26-26 7 7-26 26h-7z' fill='%23e0944a' fill-opacity='.7' stroke='%23e0944a'/%3E%3Cpath d='M184 64l7 7' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 .card a[href*="richtig-tippen"][style*="linear-gradient"] { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M104 92h92' stroke='%238fb3d6'/%3E%3Crect x='142' y='58' width='50' height='5' rx='1.5' fill='%23c9a06d' fill-opacity='.85' stroke='%23c9a06d'/%3E%3Cpath d='M148 63v29M186 63v29' stroke='%23c9a06d'/%3E%3Crect x='162' y='36' width='26' height='18' rx='2' fill='%235a86b0' fill-opacity='.3' stroke='%235a86b0'/%3E%3Cpath d='M175 54v4' stroke='%235a86b0'/%3E%3Crect x='146' y='54' width='14' height='4' rx='1' fill='%235a86b0' fill-opacity='.6' stroke='%235a86b0'/%3E%3Crect x='108' y='40' width='5' height='30' rx='1.5' fill='%235a86b0' fill-opacity='.6' stroke='%235a86b0'/%3E%3Crect x='108' y='68' width='28' height='5' rx='1.5' fill='%235a86b0' fill-opacity='.6' stroke='%235a86b0'/%3E%3Cpath d='M114 73v19M130 73v19M110 92h24' stroke='%235a86b0'/%3E%3Ccircle cx='124' cy='34' r='8' fill='%234f9c9a' fill-opacity='.5' stroke='%234f9c9a'/%3E%3Cpath d='M124 42v26' stroke='%234f9c9a' stroke-width='6'/%3E%3Cpath d='M124 68h16v24' stroke='%234f9c9a' stroke-width='5'/%3E%3Cpath d='M124 50l22 6' stroke='%234f9c9a' stroke-width='3'/%3E%3C/svg%3E"); } html.design-formell-v2 .card a[href$="/statistics"][style*="background"] { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 90h90M100 90V20'/%3E%3Crect x='110' y='62' width='14' height='28' fill='%235a86b0' fill-opacity='.45' stroke='%235a86b0'/%3E%3Crect x='132' y='48' width='14' height='42' fill='%234f9c9a' fill-opacity='.5' stroke='%234f9c9a'/%3E%3Crect x='154' y='34' width='14' height='56' fill='%235fa37a' fill-opacity='.5' stroke='%235fa37a'/%3E%3Cpath d='M106 72l24-16 22 6 24-30' stroke='%23e0944a' stroke-width='3'/%3E%3Ccircle cx='130' cy='56' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3Ccircle cx='152' cy='62' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3Ccircle cx='176' cy='32' r='3.5' fill='%23e0944a' stroke='%23e0944a'/%3E%3C/svg%3E"); } html.design-formell-v2 .card a[href*="/train/"][style*="linear-gradient"] > span:first-child, html.design-formell-v2 .card a[href*="richtig-tippen"][style*="linear-gradient"] > span:first-child { font-size: 1.3rem !important; color: var(--v2-accent-soft) !important; display: inline-flex !important; } /* Kacheln „Bestzeit-Rennen“ und „Duelle“ (9.10.2026, Emanuel: „Hier sollte auch Bestzeitrennen zur Verfügung stehen“, „… auch Duelle“): eigene Klassen statt Adresse, das Liniensymbol steht schon im Markup (kein Emoji, nichts zu ersetzen) */ html.design-formell-v2 .card a.kachel-bestzeit > span:first-child, html.design-formell-v2 .card a.kachel-duell > span:first-child { font-size: 1.3rem !important; color: var(--v2-accent-soft) !important; display: inline-flex !important; } html.design-formell-v2 .card a.kachel-bestzeit { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='58' y='34' width='86' height='11' rx='5.5' stroke='%238fb3d6'/%3E%3Crect x='58' y='34' width='52' height='11' rx='5.5' fill='%238fb3d6' fill-opacity='.5' stroke='%238fb3d6'/%3E%3Crect x='58' y='58' width='86' height='11' rx='5.5'/%3E%3Crect x='58' y='58' width='72' height='11' rx='5.5' fill='%235a86b0' fill-opacity='.35'/%3E%3Cpath d='M162 16v72' stroke-width='3'/%3E%3Cpath d='M162 18h32v26h-32z' fill='%23ffffff' fill-opacity='.75'/%3E%3Cpath d='M162 18h10.7v8.7h-10.7zM183.3 18h10.7v8.7h-10.7zM172.7 26.7h10.6v8.6h-10.6zM162 35.3h10.7v8.7h-10.7zM183.3 35.3h10.7v8.7h-10.7z' fill='%23c96a5a' fill-opacity='.75' stroke='none'/%3E%3Cpath d='M152 88h20' stroke='%238fb3d6'/%3E%3C/svg%3E"); } html.design-formell-v2 .card a.kachel-duell { --fv2-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%235a86b0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='62' y='26' width='54' height='32' rx='4' fill='%235a86b0' fill-opacity='.12'/%3E%3Cpath d='M71 35h4M81 35h4M91 35h4M101 35h4M71 43h4M81 43h4M91 43h4M101 43h4M79 51h20' stroke='%238fb3d6'/%3E%3Crect x='140' y='26' width='54' height='32' rx='4' fill='%23c96a5a' fill-opacity='.14' stroke='%23c96a5a'/%3E%3Cpath d='M149 35h4M159 35h4M169 35h4M179 35h4M149 43h4M159 43h4M169 43h4M179 43h4M157 51h20' stroke='%23c96a5a' stroke-opacity='.65'/%3E%3Cpath d='M123 36l5 6-5 6M133 36l-5 6 5 6' stroke='%238fb3d6'/%3E%3Cpath d='M62 74h54' stroke='%238fb3d6' stroke-width='6'/%3E%3Cpath d='M62 74h36' stroke-width='6'/%3E%3Cpath d='M140 74h54' stroke='%238fb3d6' stroke-width='6'/%3E%3Cpath d='M140 74h26' stroke='%23c96a5a' stroke-width='6'/%3E%3C/svg%3E"); } /* Titel gegen Motiv in der Karte „Training“ (9.10.2026, Befund am Bild mit vier Kacheln in einer Reihe: „10-Min-Abschrift“ und „Richtig sitzen und tippen“ liefen in die Zeichnung; knapp war es bei drei Kacheln schon vorher). Das Motiv hat hier feste Größe (140 × 70 px, 12 px vom Rand), die Kachel hält rechts 160 px dafür frei, der Titel bricht davor um. Ist die Kachel schmäler als 340 px, entfällt das Motiv — gesteuert über die Breite der Kachelreihe (Container „trainingskacheln“ aus dashboard.html): drei je Reihe ab 1044 px, zwei je Reihe ab 692 px, untereinander ab 340 px. Ohne Container-Abfragen (ältere Browser) bleiben die Kacheln ohne Motiv. */ html.design-formell-v2 .card .trainingskacheln.trainingskacheln > a[style]::after { display: none; width: 152px; background-size: auto 70px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); } /* Raster aus dashboard.html: unter 620 px untereinander; 620–739 px vier und sechs Kacheln zu zweit, drei und fünf untereinander; ab 740 px drei je Reihe (vier: 2 + 2). Motiv nur, wo die Kachel mindestens 340 px breit ist. */ /* zweizeilige Titel eng gesetzt (die Zeilenhöhe der Karte ließ zwischen den Zeilen fast eine Leerzeile) */ html.design-formell-v2 .card .trainingskacheln.trainingskacheln > a[style] { line-height: 1.3 !important; } @media (min-width: 740px) { @container trainingskacheln (min-width: 1044px) { html.design-formell-v2 .card .trainingskacheln.trainingskacheln > a[style] { padding-right: 160px !important; } html.design-formell-v2 .card .trainingskacheln.trainingskacheln > a[style]::after { display: block; } } } @media (min-width: 620px) { @container trainingskacheln (min-width: 692px) { html.design-formell-v2 .card .trainingskacheln.trainingskacheln.kacheln-4 > a[style] { padding-right: 160px !important; } html.design-formell-v2 .card .trainingskacheln.trainingskacheln.kacheln-4 > a[style]::after { display: block; } } } @media (max-width: 739.98px) { @container trainingskacheln (min-width: 340px) { html.design-formell-v2 .card .trainingskacheln.trainingskacheln:not(.kacheln-4):not(.kacheln-6) > a[style] { padding-right: 160px !important; } html.design-formell-v2 .card .trainingskacheln.trainingskacheln:not(.kacheln-4):not(.kacheln-6) > a[style]::after { display: block; } } } @media (max-width: 619.98px) { @container trainingskacheln (min-width: 340px) { html.design-formell-v2 .card .trainingskacheln.trainingskacheln > a[style] { padding-right: 160px !important; } html.design-formell-v2 .card .trainingskacheln.trainingskacheln > a[style]::after { display: block; } } } @media (max-width: 700px) { html.design-formell-v2 .card a[style*="linear-gradient"]::after { width: 38%; } } } /* ---------- Dialog „Level starten“ (4.10.2026, Emanuel: „noch immer diese verspielte Ansicht“): keine Spielwahl, nur die Modi Normal / Bestzeit / 10 Min (Duell, wenn das Konto Duelle hat) als ruhige Kacheln mit Liniensymbolen; „Klassisch“ bleibt vorgewählt, der Start läuft unverändert über startSelectedLevel(). Die Flächen-Symbole im Markup sind SVG, keine Emojis — formell_v2.js (modusSymbole) setzt Liniensymbole daneben, das Stylesheet blendet die bunten aus. ---------- */ @layer vorschau { html.design-formell-v2 #task-modal .task-grid { display: none !important; } /* main.js setzt design-formell auch am body, und train_styles_modals.html blendet dann den ganzen Modus-Wähler samt Hinweiszeile aus (alter formeller Modus); im v2 bleiben die Modi sichtbar, die Hinweiszeile nur für Bestzeit und Duell (Knopf darin) */ html.design-formell-v2 #task-modal .start-mode-selector { display: flex !important; } html.design-formell-v2 #task-modal #task-modal-subtitle { display: block !important; } html.design-formell-v2 #task-modal #start-mode-selector:has(.start-mode-option.selected[data-mode="normal"]) ~ #task-modal-subtitle, html.design-formell-v2 #task-modal #start-mode-selector:has(.start-mode-option.selected[data-mode="tenminutes"]) ~ #task-modal-subtitle { display: none !important; } html.design-formell-v2 #task-modal #task-modal-subtitle { opacity: 1 !important; color: var(--v2-text) !important; } html.design-formell-v2 #task-modal .start-mode-selector { border-bottom: 1px solid var(--v2-border) !important; gap: 10px !important; flex-wrap: wrap; } html.design-formell-v2 #task-modal .start-mode-option { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important; min-width: 118px; } html.design-formell-v2 #task-modal .start-mode-option:hover { background: var(--v2-surface) !important; border-color: var(--v2-accent-soft) !important; } html.design-formell-v2 #task-modal .start-mode-option.selected { background: var(--v2-surface) !important; border-color: var(--v2-accent) !important; box-shadow: inset 0 0 0 1px var(--v2-accent) !important; } html.design-formell-v2 #task-modal .start-mode-name { color: var(--v2-text) !important; font-family: var(--v2-font) !important; } html.design-formell-v2 #task-modal .start-mode-desc { color: var(--v2-muted) !important; } html.design-formell-v2 #task-modal .start-mode-icon > svg { display: none !important; } html.design-formell-v2 #task-modal .start-mode-icon { line-height: 1; } html.design-formell-v2 #task-modal .start-mode-icon .fv2-ikon { display: block; width: 30px; height: 30px; margin: 2px auto 6px; vertical-align: 0; } html.design-formell-v2 #task-modal .start-mode-icon .fv2-ikon svg { stroke-width: 1.6; } html.design-formell-v2 #task-modal .modal-title .ui-icon { display: none !important; } } /* ---------- Design-Dialog aus main.js (openDesignModeSelector: Menü „Design“, Knopf im Trainingskopf, Dashboard/Belohnungen): der Dialog bringt dunkle Inline-Farben mit (Verlaufskasten, gelbe Titel, helle Beschreibungen) — im formellen Design standen so Titel dunkel auf dunkel und Beschreibungen hell auf weißen Karten (4.10.2026). Hier nüchtern aus den v2-Variablen. ---------- */ @layer vorschau { html.design-formell-v2 .design-mode-overlay { background: rgba(15, 23, 42, 0.55) !important; } html.design-formell-v2 .design-mode-dialog { background: var(--v2-surface) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 8px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important; color: var(--v2-text) !important; font-family: var(--v2-font) !important; } html.design-formell-v2 .design-mode-dialog h2, html.design-formell-v2 .design-mode-dialog h3, html.design-formell-v2 .design-mode-dialog h4 { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; font-family: var(--v2-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; } html.design-formell-v2 .design-mode-dialog p { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; } html.design-formell-v2 .design-mode-dialog .design-option { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important; } html.design-formell-v2 .design-mode-dialog .design-option:hover { border-color: var(--v2-accent-soft) !important; } html.design-formell-v2 .design-mode-dialog .design-option.selected { background: var(--v2-surface) !important; border-color: var(--v2-accent) !important; box-shadow: inset 0 0 0 1px var(--v2-accent) !important; } html.design-formell-v2 .design-mode-dialog .design-option span[style*="font-size:1.5rem"] { color: var(--v2-accent-soft) !important; } html.design-formell-v2 .design-mode-dialog #playful-themes-section, html.design-formell-v2 .design-mode-dialog #formal-themes-section { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; } html.design-formell-v2 .design-mode-dialog .formal-theme-option, html.design-formell-v2 .design-mode-dialog .playful-theme-option { border-radius: 6px !important; box-shadow: none !important; } html.design-formell-v2 .design-mode-dialog .formal-theme-option[style*="solid #FFD93D"], html.design-formell-v2 .design-mode-dialog .playful-theme-option[style*="solid #FFD93D"] { border-color: var(--v2-accent) !important; box-shadow: 0 0 0 2px var(--v2-accent) !important; } html.design-formell-v2 .design-mode-dialog .formal-theme-option > div[style*="background:#FFD93D"], html.design-formell-v2 .design-mode-dialog .playful-theme-option > div[style*="background:#FFD93D"] { background: var(--v2-accent) !important; box-shadow: none !important; } /* Namen der Farbschema-Kacheln als Etikett auf heller Fläche (die Inline-Farben lagen auf den Verläufen bei 1,1–3,8:1), Schmucksymbole ◆ ▣ … und Theme-Emojis entfallen — die Kachel selbst zeigt die Farben */ html.design-formell-v2 .design-mode-dialog .formal-theme-option > span:first-child, html.design-formell-v2 .design-mode-dialog .playful-theme-option > span:first-child { display: none !important; } html.design-formell-v2 .design-mode-dialog .formal-theme-option > span, html.design-formell-v2 .design-mode-dialog .playful-theme-option > span, html.design-formell-v2 .design-mode-dialog .formal-theme-option > div[style*="bottom:3px"], html.design-formell-v2 .design-mode-dialog .playful-theme-option > div[style*="bottom:3px"] { background: #ffffff !important; color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; text-shadow: none !important; padding: 2px 7px !important; border-radius: 4px !important; font-weight: 600 !important; font-family: var(--v2-font) !important; line-height: 1.3 !important; } html.design-formell-v2 .design-mode-dialog .formal-theme-option > span, html.design-formell-v2 .design-mode-dialog .playful-theme-option > span { font-size: 0.78rem !important; margin-top: 0 !important; } html.design-formell-v2 .design-mode-dialog .formal-theme-option > div[style*="bottom:3px"], html.design-formell-v2 .design-mode-dialog .playful-theme-option > div[style*="bottom:3px"] { font-size: 0.62rem !important; } html.design-formell-v2 .design-mode-actions button { border-radius: 6px !important; font-family: var(--v2-font) !important; font-weight: 600 !important; } html.design-formell-v2 .design-mode-actions .dm-save { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; } html.design-formell-v2 .design-mode-actions .dm-save:hover { background: var(--v2-accent-hover) !important; filter: none !important; } html.design-formell-v2 .design-mode-actions .dm-cancel { background: var(--v2-surface) !important; color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; } html.design-formell-v2 .design-mode-actions .dm-cancel:hover { background: var(--v2-surface-2) !important; } } /* ---------- Dialoge und Overlays (4.10.2026 abends, Emanuel: „wenn formell eingestellt ist, sollten keine verspielten dialogfenster angezeigt werden“): alle Fenster, die angemeldete Konten sehen — generische Dialoge aus main.js (Bestätigen, Hinweis, Eingabe, Benachrichtigung), Trainings-Modals (Level geschafft, Vorschau, Tageslimit, eigene Texte, Modus, Bestzeit, Duell, Levelwahl, Theme), Dashboard (Erfolg, Level-Info, Tageslimit, Monatsrückblick, Duell-Lobby), Belohnungen/Einstellungen (Pro, Zurücksetzen, Löschen), Abschrift (Countdown, Ergebnis), Lehrerseiten (Nachricht, Feedback, Zugangsdaten, Zuweisen), Typr-Modalsystem des Menüs. Flache Flächen aus --v2-*, Inter, keine Verläufe, Schatten, Konfetti oder hüpfenden Symbole; Inline-Farben der Vorlagen werden über [style*=…] abgefangen (die Schicht gewinnt gegen inline ohne !important). Der Monatsrückblick bleibt bewusst dunkel (feste .mr-*-Farben), aber flach und in Inter. ---------- */ @layer vorschau { /* Abdunkelung aller Overlays einheitlich, ohne Weichzeichner. 80 % statt 55 % (8.10.2026, Emanuel: A−/A+ unter Dialogen „stärker ausgrauen“): Bei offenem Level-Dialog oder Ergebnisfenster wirkte die Kopfzeile des Trainings (A−/A+, Tastatur, Design) noch bedienbar, Klicks darauf blieben aber ohne Wirkung — 15 von 15 am 5.10. gemessen, Kinder hielten die Knöpfe für kaputt. Gemessen: Beschriftung der Knöpfe unter dem Dialog 3,0:1 (hell) / 2,7:1 (dunkel) → 1,6:1 / 1,5:1. Verspielt dunkelt mit 90 % ab. */ html.design-formell-v2 :is(.modal, .typr-confirm-overlay, .achievement-modal, .level-info-modal, .pro-modal-overlay, .result-overlay, .countdown-overlay, .ts-modal-overlay, .challenge-modal-overlay, .exam-result-overlay, #session-limit-modal, #monthly-review-modal, #reset-modal, #delete-modal, #dashmsg-modal, #dashsent-modal, #feedback-modal, #classmsg-modal, #password-reset-modal, #gc-modal, #sent-modal, #move-modal, #student-modal, #assign-modal, #dash-duel-modal, #dash-create-modal, #dash-waiting-modal) { background: rgba(15, 23, 42, 0.8) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Kästen */ html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; font-family: var(--v2-font) !important; animation: none !important; transform: none !important; text-shadow: none !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) * { text-shadow: none !important; } /* Titel und Überschriften */ html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(h1, h2, h3, h4, .modal-title, .ts-modal-title, .achievement-modal-name, .level-info-title, .level-info-name, .next-level-name, .mode-option-name, .level-option-name, .level-info-locked-text, .theme-option-name, .theme-item-name, .exam-result-title) { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; font-family: var(--v2-font) !important; font-weight: 600 !important; text-shadow: none !important; background: none !important; -webkit-background-clip: initial !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.modal-title, .ts-modal-title, .level-info-title, .achievement-modal-name) { font-size: 1.35rem !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.level-info-name, .mode-option-name, .next-level-name) { font-size: 1.1rem !important; } /* Fließtext: Inline-Farben der Vorlagen und gedämpfte Beschreibungen */ html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(p, div, span, label, li, small, td, th, strong, em, b, h2, h3, h4, a:not([href]), summary):is([style*="rgba(255,255,255"], [style*="rgba(255, 255, 255"], [style*="color:#fff"], [style*="color: #fff"], [style*="color:white"], [style*="color: white"], [style*="#FFD93D"], [style*="#00D9A5"], [style*="#9B59B6"], [style*="#FF6B6B"], [style*="#6C63FF"], [style*="#FF6B9D"], [style*="#1a1a2e"], [style*="color:#333"], [style*="color: #333"], [style*="color:#444"], [style*="color: #444"], [style*="color:#ddd"], [style*="color: #ddd"], [style*="#2ecc71"], [style*="#56ab2f"]) { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.ts-modal-message, .achievement-modal-desc, .level-info-desc, .pro-modal p, .result-grade-text, .mode-selection-subtitle, .mode-option-desc, .level-option-desc, .stat-box-label, .next-level-desc, .result-stat-label, .duel-subtitle, .confirm-modal-box p, .confirm-modal-box li, .dark-dialog p, .mr-text, .modal-content > p), html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(p, div, span, label, li, small, td, th, strong, em, b, h2, h3, h4, a:not([href]), summary):is([style*="color:#555"], [style*="color: #555"], [style*="color:#666"], [style*="color: #666"], [style*="color:#888"], [style*="color: #888"], [style*="color:#aaa"], [style*="color: #aaa"], [style*="rgba(255,255,255,0.5"], [style*="rgba(255,255,255,0.6"], [style*="rgba(255,255,255,0.7"], [style*="rgba(255, 255, 255, 0.5"], [style*="rgba(255, 255, 255, 0.6"], [style*="rgba(255, 255, 255, 0.7"]) { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; opacity: 1 !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(p, div, span, label, li, small, td, th, strong, em, b, h2, h3, h4, a:not([href]), summary)[style*="Fredoka"], html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.result-grade, .countdown-number, .level-category-header, .level-option-number, .stat-box-value, .points-earned, .theme-option.locked) { font-family: var(--v2-font) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) a:not([style*="linear-gradient"]):not(.btn):not(.btn-pro):not(.result-btn):not([class*="btn"]) { color: var(--v2-link) !important; } /* Unterflächen: Kästchen, Hinweise, Belohnungsfelder, Optionen */ html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(div[style*="background:rgba("], div[style*="background: rgba("], div[style*="background:linear-gradient"], div[style*="background: linear-gradient"], .stat-box, .achievement-reward, .result-stat, .result-rewards, .level-info-locked, .level-info-keys, .mode-option, .level-option, .theme-option, .theme-item, .custom-text-tabs, #error-analysis-panel, #error-analysis-tips, #preview-theme-reward, #preview-pro-upsell, #preview-req, #dash-waiting-level, #dash-waiting-players, #review-stats, section[style*="background"]) { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; color: var(--v2-text) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.mode-option, .level-option, .theme-option, .theme-item):hover { border-color: var(--v2-accent-soft) !important; transform: none !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.level-option.current-suggestion, .theme-option.selected, .theme-item.active) { border: 2px solid var(--v2-accent-soft) !important; box-shadow: none !important; background: var(--v2-surface-2) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .level-option.locked { border-style: dashed !important; opacity: 0.75 !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.level-option-number, .level-category-header, .level-info-keys, .result-stat-value, .stat-box-value, .points-earned, .result-bonus, .mr-wert) { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .level-category-header { color: var(--v2-accent-soft) !important; border-bottom: 1px solid var(--v2-border) !important; background: none !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .custom-text-tabs { padding: 4px !important; gap: 4px !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .stat-box-wpm { border: 2px solid var(--v2-accent-soft) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(#level-info-progress-bar, .progress-fill, .duel-progress-fill) { background: var(--v2-accent) !important; background-image: none !important; } /* Schmuck-Symbole: ruhig, klein, ohne Hüpfen; Konfetti weg */ html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.celebration-icon, .achievement-modal-icon, .level-info-icon, .pro-modal-avatar, .ts-modal-icon, #duel-result-icon, #ghost-result-icon, #preview-icon, #preview-theme-emoji, #dash-waiting-icon, .mode-option-emoji, .theme-item-emoji, div[style*="font-size: 3rem"], div[style*="font-size:3rem"], div[style*="font-size:4rem"], div[style*="font-size: 4rem"], div[style*="font-size:5rem"], div[style*="font-size: 5rem"], div[style*="font-size:2rem"], div[style*="font-size: 2rem"]) { font-size: 2.2rem !important; animation: none !important; color: var(--v2-accent-soft) !important; line-height: 1 !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.celebration-icon, .achievement-modal-icon, .level-info-icon, .pro-modal-avatar, .ts-modal-icon, #duel-result-icon, #ghost-result-icon, #preview-icon, #preview-theme-emoji, #dash-waiting-icon, .mode-option-emoji, .theme-item-emoji, div[style*="font-size: 3rem"], div[style*="font-size:3rem"], div[style*="font-size:4rem"], div[style*="font-size: 4rem"], div[style*="font-size:5rem"], div[style*="font-size: 5rem"], div[style*="font-size:2rem"], div[style*="font-size: 2rem"]) .fv2-ikon { color: var(--v2-accent-soft) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .mode-option-emoji > svg { display: none !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .mode-option-emoji .fv2-ikon { width: 34px; height: 34px; display: block; margin: 0 auto; } html.design-formell-v2 .ts-modal-icon { display: none !important; } html.design-formell-v2 :is(.confetti, .victory-celebration, .celebration-icon, .countdown-number, .achievement-modal-icon) { animation: none !important; } html.design-formell-v2 .confetti { display: none !important; } /* Felder */ html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) { background: var(--v2-surface) !important; color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; font-family: var(--v2-font) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(input, textarea)::placeholder { color: var(--v2-muted) !important; opacity: 1 !important; } /* Knöpfe: Erstknopf einfarbig, Zweitknopf umrandet, Gefahr rot */ html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-secondary, .confirm-btn-no, .prompt-cancel, .ts-modal-btn-cancel, .btn-close-modal, .result-btn-secondary, button[style*="background:#f0f0f0"], button[style*="background: #f0f0f0"], button[style*="background:#f3f4f6"], button[style*="rgba(0,0,0,0.06)"], button[style*="background:none"], button[style*="background: none"], button[style*="rgba(255,255,255,0.1)"], button[style*="rgba(255, 255, 255, 0.1)"], .custom-text-tab:not(.active)) { background: var(--v2-surface-2) !important; background-image: none !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 6px !important; box-shadow: none !important; text-shadow: none !important; font-family: var(--v2-font) !important; font-weight: 600 !important; transform: none !important; animation: none !important; opacity: 1 !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-secondary, .confirm-btn-no, .prompt-cancel, .ts-modal-btn-cancel, .btn-close-modal, .result-btn-secondary, button[style*="background:#f0f0f0"], button[style*="background: #f0f0f0"], button[style*="background:#f3f4f6"], button[style*="rgba(0,0,0,0.06)"], button[style*="background:none"], button[style*="background: none"], button[style*="rgba(255,255,255,0.1)"], button[style*="rgba(255, 255, 255, 0.1)"], .custom-text-tab:not(.active)):hover { background: var(--v2-surface) !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-primary, .confirm-btn-yes, .prompt-ok, .ts-modal-btn-confirm, .achievement-modal-close, .btn-pro, .result-btn-primary, button[style*="linear-gradient"], a[style*="linear-gradient"], .typr-confirm-overlay > div > button, button[style*="background:#6C63FF"], button[style*="background: #6C63FF"], label.btn-secondary[for], .custom-text-tab.active) { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; -webkit-text-fill-color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent) !important; border-radius: 6px !important; box-shadow: none !important; text-shadow: none !important; font-family: var(--v2-font) !important; font-weight: 600 !important; transform: none !important; animation: none !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-primary, .confirm-btn-yes, .prompt-ok, .ts-modal-btn-confirm, .achievement-modal-close, .btn-pro, .result-btn-primary, button[style*="linear-gradient"], a[style*="linear-gradient"], .typr-confirm-overlay > div > button, button[style*="background:#6C63FF"], button[style*="background: #6C63FF"], label.btn-secondary[for], .custom-text-tab.active):hover { background: var(--v2-accent-hover) !important; transform: none !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-primary, .confirm-btn-yes, .prompt-ok, .ts-modal-btn-confirm, .achievement-modal-close, .btn-pro, .result-btn-primary, button[style*="linear-gradient"], a[style*="linear-gradient"], .typr-confirm-overlay > div > button, button[style*="background:#6C63FF"], button[style*="background: #6C63FF"], label.btn-secondary[for], .custom-text-tab.active) *, html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-primary, .confirm-btn-yes, .prompt-ok, .ts-modal-btn-confirm, .achievement-modal-close, .btn-pro, .result-btn-primary, button[style*="linear-gradient"], a[style*="linear-gradient"], .typr-confirm-overlay > div > button, button[style*="background:#6C63FF"], button[style*="background: #6C63FF"], label.btn-secondary[for], .custom-text-tab.active) .fv2-ikon { color: inherit !important; -webkit-text-fill-color: inherit !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-secondary, .confirm-btn-no, .prompt-cancel, .ts-modal-btn-cancel, .btn-close-modal, .result-btn-secondary, button[style*="background:#f0f0f0"], button[style*="background: #f0f0f0"], button[style*="background:#f3f4f6"], button[style*="rgba(0,0,0,0.06)"], button[style*="background:none"], button[style*="background: none"], button[style*="rgba(255,255,255,0.1)"], button[style*="rgba(255, 255, 255, 0.1)"], .custom-text-tab:not(.active)) *, html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.btn-secondary, .confirm-btn-no, .prompt-cancel, .ts-modal-btn-cancel, .btn-close-modal, .result-btn-secondary, button[style*="background:#f0f0f0"], button[style*="background: #f0f0f0"], button[style*="background:#f3f4f6"], button[style*="rgba(0,0,0,0.06)"], button[style*="background:none"], button[style*="background: none"], button[style*="rgba(255,255,255,0.1)"], button[style*="rgba(255, 255, 255, 0.1)"], .custom-text-tab:not(.active)) .fv2-ikon { color: inherit !important; -webkit-text-fill-color: inherit !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.ts-modal-btn-danger, button[style*="#FF6B6B"], button[style*="#ff6b6b"], #confirm-action-btn) { background: #b42318 !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #b42318 !important; border-radius: 6px !important; box-shadow: none !important; font-family: var(--v2-font) !important; font-weight: 600 !important; transform: none !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(.ts-modal-btn-danger, button[style*="#FF6B6B"], button[style*="#ff6b6b"], #confirm-action-btn) * { color: inherit !important; -webkit-text-fill-color: inherit !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) :is(#delete-modal h2, #confirm-title) { color: var(--v2-danger) !important; -webkit-text-fill-color: var(--v2-danger) !important; } /* Noten und Countdown der Abschrift: dunkle Noten auf heller, helle auf dunkler Fläche */ html.design-formell-v2 .result-grade { font-weight: 700 !important; } html.design-formell-v2 .result-grade.grade-1 { color: #1b7f3b !important; } html.design-formell-v2 .result-grade.grade-2 { color: #2e7d32 !important; } html.design-formell-v2 .result-grade.grade-3 { color: #9a6700 !important; } html.design-formell-v2 .result-grade.grade-4 { color: #c2410c !important; } html.design-formell-v2 .result-grade.grade-5 { color: #b42318 !important; } html.design-formell-v2:not(.light-mode) .result-grade.grade-1 { color: #4ade80 !important; } html.design-formell-v2:not(.light-mode) .result-grade.grade-2 { color: #86efac !important; } html.design-formell-v2:not(.light-mode) .result-grade.grade-3 { color: #fde047 !important; } html.design-formell-v2:not(.light-mode) .result-grade.grade-4 { color: #fb923c !important; } html.design-formell-v2:not(.light-mode) .result-grade.grade-5 { color: #fca5a5 !important; } html.design-formell-v2 .result-bonus { color: #047857 !important; } html.design-formell-v2:not(.light-mode) .result-bonus { color: #6ee7b7 !important; } html.design-formell-v2 .countdown-number { color: var(--v2-accent-soft) !important; font-family: var(--v2-font) !important; font-weight: 600 !important; animation: none !important; } /* Monatsrückblick: bewusst dunkel, aber flach */ html.design-formell-v2 #monthly-review-modal .dark-dialog { background: #1c222c !important; color: #e5e7eb !important; border-color: #3a4556 !important; } html.design-formell-v2 #monthly-review-modal .dark-dialog :is(h2, h3) { color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; } html.design-formell-v2 #monthly-review-modal #review-stats { background: #242c38 !important; border-color: #3a4556 !important; color: #e5e7eb !important; } html.design-formell-v2 #monthly-review-modal .mr-wert { color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; } html.design-formell-v2 #monthly-review-modal .mr-wert.mr-gruen { color: #6ee7b7 !important; -webkit-text-fill-color: #6ee7b7 !important; } html.design-formell-v2 #monthly-review-modal .mr-wert.mr-lila { color: #c4b5fd !important; -webkit-text-fill-color: #c4b5fd !important; } html.design-formell-v2 #monthly-review-modal .mr-wert.mr-gelb { color: #fde68a !important; -webkit-text-fill-color: #fde68a !important; } html.design-formell-v2 #monthly-review-modal .mr-wert.mr-rot { color: #fca5a5 !important; -webkit-text-fill-color: #fca5a5 !important; } html.design-formell-v2 #monthly-review-modal .mr-text { color: #b6bec9 !important; -webkit-text-fill-color: #b6bec9 !important; } html.design-formell-v2 #monthly-review-modal .dark-dialog > button { background: #2f6fb3 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: #2f6fb3 !important; } /* Benachrichtigungen (Toasts): einfarbig, Inter, ohne Hineingleiten */ html.design-formell-v2 :is(.typr-notification, .custom-notification) { background: var(--v2-accent) !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: var(--v2-font) !important; font-weight: 500 !important; border-radius: 6px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; animation: none !important; } html.design-formell-v2 :is(.typr-notification, .custom-notification):is([style*="#FF6B6B"], [style*="#ff6b6b"]) { background: #b42318 !important; } html.design-formell-v2 :is(.typr-notification, .custom-notification):is([style*="#FFD93D"], [style*="#ffd93d"]) { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; } html.design-formell-v2 :is(.typr-notification, .custom-notification) * { color: inherit !important; -webkit-text-fill-color: inherit !important; } html.design-formell-v2 .typr-notification > span:first-child { font-size: 1.1rem !important; } /* Pro-Fenster, Theme-Raster, Belohnungsfelder */ html.design-formell-v2 .pro-modal .btn-close-modal { margin-top: 12px !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .theme-option.locked { opacity: 0.6 !important; } html.design-formell-v2 :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .achievement-modal-content, .level-info-content, .pro-modal, .result-modal, .confirm-modal-box, .dark-dialog, .dark-modal, .challenge-modal, .assign-box, #dashmsg-modal > div, #dashsent-modal > div, #feedback-modal > div, #classmsg-modal > div, #password-reset-modal > div, #gc-modal > div, #sent-modal > div, #move-modal > div, #student-modal > div, #dash-duel-modal > div, #dash-create-modal > div, #dash-waiting-modal > div) .achievement-modal-rewards { gap: 10px !important; } } /* ---------- Nachtrag Dialoge (4.10.2026 abends): Monatsrückblick bleibt dunkel — aller Fließtext hell ---------- */ @layer vorschau { html.design-formell-v2 #monthly-review-modal .dark-dialog :is(p, div, span, li, small, strong, label):not(.mr-wert):not(.mr-text) { color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; } } /* ---------- Nachtrag Dialoge 2 (4.10.2026 abends): Monatsrückblick — die Kasten-Regeln ([style*=…]-Textfarben, Unterflächen mit ID-Spezifität) schlugen die einfachen #monthly-review-modal-Regeln; deshalb hier mit höherer Spezifität ---------- */ @layer vorschau { html.design-formell-v2 body #monthly-review-modal[id][role="dialog"] .dark-dialog { background: #1c222c !important; color: #e5e7eb !important; border-color: #3a4556 !important; } html.design-formell-v2 body #monthly-review-modal[id][role="dialog"] .dark-dialog :is(h2, h3, p, div, span, li, small, strong, label):not(.mr-wert):not(.mr-text) { color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; } html.design-formell-v2 body #monthly-review-modal[id][role="dialog"] .mr-text { color: #b6bec9 !important; -webkit-text-fill-color: #b6bec9 !important; } html.design-formell-v2 body #monthly-review-modal[id][role="dialog"] #review-stats { background: #242c38 !important; background-image: none !important; border: 1px solid #3a4556 !important; } /* Onboarding (5.10.2026, Emanuel: „das onboarding sollte bei schülern der 3. und 4. klasse standardmäßig auch im Formell-Design gestaltet sein. bei der schüler-vorschau … auch im formell-design“): eigenständige Seite templates/onboarding.html — Verlauf, Hüpfen und Schmuck-Emojis aus, Karten/Knöpfe/Punkte/Kästen aus den Vorschau-Farben; Tipps mit Punktaufzählung statt Emoji */ html.design-formell-v2 .onboarding-container { max-width: 640px !important; } /* .header der Onboarding-Seite ist kein Seitenkopf: Fläche, Rand und Höhe der Kopfzeilen-Regeln zurücknehmen */ html.design-formell-v2 .onboarding-container .header { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; position: static !important; height: auto !important; min-height: 0 !important; backdrop-filter: none !important; text-align: center !important; } html.design-formell-v2 .step { animation: none !important; } html.design-formell-v2 .header-emoji, html.design-formell-v2 .option-emoji, html.design-formell-v2 .tip-emoji { display: none !important; } html.design-formell-v2 .header h1 { background: none !important; -webkit-text-fill-color: var(--v2-text) !important; color: var(--v2-text) !important; font-family: var(--v2-font) !important; font-weight: 600 !important; font-size: 1.6rem !important; letter-spacing: -0.01em; } html.design-formell-v2 .header p { color: var(--v2-muted) !important; font-size: 1rem !important; } html.design-formell-v2 .header-logo { width: 84px !important; height: 84px !important; } html.design-formell-v2 .progress-dots .dot { background: var(--v2-border) !important; box-shadow: none !important; } html.design-formell-v2 .progress-dots .dot.active { background: var(--v2-accent) !important; } html.design-formell-v2 .progress-dots .dot.done { background: var(--v2-accent-soft) !important; } html.design-formell-v2 .option-card { background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important; transition: border-color 0.15s !important; gap: 14px !important; } html.design-formell-v2 .option-card:hover { border-color: var(--v2-accent-soft) !important; background: var(--v2-surface) !important; } html.design-formell-v2 .option-card.selected { border: 2px solid var(--v2-accent) !important; background: var(--v2-surface-2) !important; box-shadow: none !important; padding: 19px 24px !important; } html.design-formell-v2 .option-content h3 { font-family: var(--v2-font) !important; font-weight: 600 !important; color: var(--v2-text) !important; } html.design-formell-v2 .option-content p { color: var(--v2-muted) !important; } html.design-formell-v2 .option-card.selected .option-content h3 { color: var(--v2-text) !important; } html.design-formell-v2 .option-card.selected .option-content p { color: var(--v2-muted) !important; } html.design-formell-v2 .onboarding-container .btn { border-radius: 6px !important; transform: none !important; box-shadow: none !important; font-weight: 600 !important; font-size: 1rem !important; padding: 12px 28px !important; } html.design-formell-v2 .onboarding-container .btn-primary { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent) !important; } html.design-formell-v2 .onboarding-container .btn-primary:hover { background: var(--v2-accent-hover) !important; } html.design-formell-v2 .onboarding-container .btn-secondary { background: var(--v2-surface) !important; color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; } html.design-formell-v2 .onboarding-container .btn:disabled { opacity: 0.5 !important; } html.design-formell-v2 .summary-card, html.design-formell-v2 .gs-visual, html.design-formell-v2 .gs-sitz { background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; } html.design-formell-v2 .summary-level { font-family: var(--v2-font) !important; font-weight: 700 !important; color: var(--v2-accent-soft) !important; } html.design-formell-v2 .summary-label { color: var(--v2-muted) !important; } html.design-formell-v2 .skip-link { color: var(--v2-muted) !important; } html.design-formell-v2 .skip-link:hover { color: var(--v2-text) !important; } html.design-formell-v2 .gs-sitz-bild { color: var(--v2-text) !important; } html.design-formell-v2 .gs-sitz-bild .akzent { color: var(--v2-accent-soft) !important; } html.design-formell-v2 .gs-sitz-text h2 { color: var(--v2-text) !important; font-family: var(--v2-font) !important; font-weight: 600 !important; } html.design-formell-v2 .gs-tips li { color: var(--v2-text) !important; } html.design-formell-v2 .gs-tips li::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-accent-soft); margin-top: 0.55em; } html.design-formell-v2 .gs-tips strong { color: var(--v2-text) !important; } html.design-formell-v2 .gs-key { box-shadow: none !important; } } /* Laufende Zahlen ruckeln nicht (5.10.2026, Emanuel: „wenn ich im training die 10-minuten-abschrift wähle, ruckelt die zeit“). Inter hat Proportionalziffern: jede Sekunde änderte sich die Breite der Zeit und schob die Nachbarn (freie Abschrift 4,3 px, Prüfungsseite 2,7 px je Sekunde; im Trainingskopf kam das Emoji-Zwischenbild dazu, siehe formell_v2.js). Tabellenziffern halten die Breite; die Zeit im Trainingskopf steht zusätzlich in einem Feld fester Breite (.fv2-zeit, von formell_v2.js gesetzt), damit auch der Wechsel 10:00 → 9:59 nichts verschiebt (2.9em = Breite von „10:00“ in Tabellenziffern). */ @layer vorschau { html.design-formell-v2 #level-name, html.design-formell-v2 #level-progress-text, html.design-formell-v2 .progress-percentage, html.design-formell-v2 .formal-stat-value, html.design-formell-v2 .timer-display, html.design-formell-v2 .exam-timer, html.design-formell-v2 .stat-box-value, html.design-formell-v2 .exam-stat-value, html.design-formell-v2 .countdown-number, html.design-formell-v2 .fv2-zeit { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; } /* color: inherit — Regeln aus main.css färben Spans im dunklen Trainingskopf eigens (rgba(255,255,255,.9) statt der Titelfarbe) */ html.design-formell-v2 #level-name .fv2-zeit { display: inline-block !important; min-width: 2.9em !important; text-align: left !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; } } /* ======== Hover-Sprache (5.10.2026, Emanuel: „wenn ich … über einen Button fahre, soll sich dieser merklicher verändern (professionell)“, „auch im lehrer-dashboard … und auf anderen betroffenen seiten“, „noch mehr unterscheiden“) ======== Eine Sprache für alles Anklickbare im formellen Design — der Unterschied ist auf den ersten Blick zu sehen (Farbabstand der Fläche Ruhe ↔ Hover mindestens 40 im RGB-Raum, gemessen): - Knöpfe aller Art (gefüllt, umrandet, Chips, Symbolknöpfe, Knöpfe in Tabellenzeilen): kräftiges Blau mit eigener Schriftfarbe, Schatten, 1 px angehoben. Auch der gerade aktive Chip wechselt auf dieses Blau. - Kacheln, Karten, Auswahlkarten: Akzentrahmen (optisch 2 px, ohne Größensprung), getönte Fläche, Schatten, 1 px angehoben - Navigation, Menüzeilen, Listenzeilen, Aufklapper: getönte Fläche mit Akzentschrift (nicht gefüllt, damit die aktive Seite erkennbar bleibt) - Gefahr: Rot; Knöpfe, die schon in Ruhe rot sind, deutlich dunkleres Rot Knöpfe werden nicht unterstrichen, deaktivierte Knöpfe reagieren nicht. Tastaturfokus (:focus-visible) bekommt dieselbe Hervorhebung plus Fokusring. Übergang 140 ms; bei „weniger Bewegung“ ohne Übergang und ohne Anheben. Nur für Geräte mit Zeiger (@media (hover: hover)) — auf Tablets bliebe der Zustand nach dem Antippen sonst kleben. Technik: Unterebene „hover“ der Ebene „vorschau“ — wichtige Deklarationen einer Unterebene gehen den wichtigen Deklarationen direkt in „vorschau“ vor (so wie „vorschau“ der main.css vorgeht), unabhängig von der Spezifität. Darin vier Stufen; bei !important gewinnt die zuerst genannte: besonders > gefahr > zweit > allgemein. */ @layer vorschau { @layer hover { @layer besonders, gefahr, zweit, allgemein; @layer allgemein { html.design-formell-v2 { --v2-h-fill: #2f6fb3; /* Knopf im Hover: weiß darauf 5,2:1 */ --v2-h-fill-text: #ffffff; --v2-h-tint: #d6e4f3; /* getönte Fläche: Akzentschrift darauf 6,7:1, gedämpfte Schrift 5,9:1 */ --v2-h-tint-2: #bfd3ea; /* Motivseite der Kacheln: gedämpfte Schrift 4,9:1 */ --v2-h-schatten: 0 4px 12px rgba(31, 78, 121, 0.28); --v2-h-gefahr: #b42318; /* weiß darauf 6,6:1 */ --v2-h-gefahr-2: #7a1610; /* für Knöpfe, die schon in Ruhe rot sind */ --v2-h-gefahr-schatten: 0 4px 12px rgba(180, 35, 24, 0.30); --v2-h-hub: -1px; /* Anheben im Hover */ } html.design-formell-v2:not(.light-mode) { --v2-h-fill: #6aa5e6; /* im Dunklen heller, mit dunkler Schrift 6,8:1 (weiß läge unter 4,5:1) */ --v2-h-fill-text: #0b1a2b; --v2-h-tint: #2d4460; /* Akzentschrift darauf 5,5:1, gedämpfte Schrift 5,3:1 */ --v2-h-tint-2: #314a68; --v2-h-schatten: 0 4px 14px rgba(0, 0, 0, 0.55); --v2-h-gefahr-schatten: 0 4px 14px rgba(0, 0, 0, 0.55); } /* Übergang und Fokusring für Verweise und Knöpfe (nicht für Eingabefelder: das verborgene Tippfeld bleibt unberührt) */ html.design-formell-v2 body :is(a, button, summary, select, [role="button"], .classroom-card, .class-card, .design-option, .font-option, .option-card, .start-mode-option, .student-name-link) { transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, opacity 0.14s ease, transform 0.14s ease !important; } html.design-formell-v2 body :is(a, button, summary, select, [role="button"], [role="link"]):focus-visible { outline: 2px solid var(--v2-link) !important; outline-offset: 2px !important; } /* Benutzermenü im dunklen Modus: die Regel der main.css für das frühere helle Menü („.avatar-dropdown-menu * { color: #333 !important }“) ließ Schrift und Symbole dunkel auf der dunklen Fläche (1,26:1). In Ruhe in der Textfarbe; der Pfeil in der Flächenfarbe statt Weiß. */ html.design-formell-v2:not(.light-mode) .avatar-dropdown-menu :is(.dropdown-item, .dropdown-item *, .lang-item, .lang-item *) { color: var(--v2-text) !important; } html.design-formell-v2:not(.light-mode) .avatar-dropdown-menu::before { background: var(--v2-surface) !important; border-color: var(--v2-border) !important; } @media (hover: hover) { /* Knöpfe: gefüllt, umrandet, Chips, Symbolknöpfe. Die Liste steht zweimal — für den Knopf und für alles darin (Text, Symbole) */ html.design-formell-v2 :is( .btn:not(.btn-danger), .btn-primary, .btn-success, .btn-warning, .btn-secondary, .btn-gray, .start-btn, .action-btn, .mode-btn, .task-btn, .create-btn, .btn-create, .csv-import-btn, .aw-knopf, .class-action:not(.class-action-danger), .classroom-action-btn, .tz-knopf, .cc-btn-accept, .dm-save, .dm-cancel, button.level-badge, .back-btn, .restart-btn, .back-link, .nav-pill.active, .stats-filter-btn, .time-filter-btn, .class-tab, .aw-chip, .toggle-btn, .custom-text-tab, .btn-import-file, .btn-new-folder, .btn-print-class, .btn-msg-class, .sound-toggle, .confirm-btn-yes, .confirm-btn-no, .prompt-ok, .prompt-cancel, .ts-modal-btn-confirm, .ts-modal-btn-cancel, .btn-close-modal, .achievement-modal-close, .btn-pro, .result-btn-primary, .result-btn-secondary, .typr-confirm-overlay > div > button, .header-action-btn, .user-avatar, .hamburger-btn, .header .view-toggle, .header .skip-error-toggle, .header .design-mode-toggle, button[onclick*="renameClassroom"], button[onclick*="editClassroomSubtitle"], h2 > button, #sf-sent-toggle, a[style*="linear-gradient"]:not(:has(div)), button[style*="linear-gradient"], button[style*="background:#6C63FF"], button[style*="background: #6C63FF"], .card a[style*="background"]:not([style*="transparent"]):not(:has(div)), :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .dark-dialog, .dark-modal, .assign-box, [id$="-modal"] > div) :is(button[style*="background:#f0f0f0"], button[style*="background: #f0f0f0"], button[style*="background:#f3f4f6"], button[style*="rgba(0,0,0,0.06)"], button[style*="background:none"], button[style*="background: none"], button[style*="rgba(255,255,255,0.1)"], button[style*="rgba(255, 255, 255, 0.1)"], label.btn-secondary[for], button), .quick-reply-btn ):not(:disabled, .disabled, .tz-grau, [aria-disabled="true"], [style*="not-allowed"]):is(:hover, :focus-visible) { background: var(--v2-h-fill) !important; background-image: none !important; border-color: var(--v2-h-fill) !important; color: var(--v2-h-fill-text) !important; -webkit-text-fill-color: var(--v2-h-fill-text) !important; box-shadow: var(--v2-h-schatten) !important; transform: translateY(var(--v2-h-hub)) !important; filter: none !important; text-decoration: none !important; } html.design-formell-v2 :is( .btn:not(.btn-danger), .btn-primary, .btn-success, .btn-warning, .btn-secondary, .btn-gray, .start-btn, .action-btn, .mode-btn, .task-btn, .create-btn, .btn-create, .csv-import-btn, .aw-knopf, .class-action:not(.class-action-danger), .classroom-action-btn, .tz-knopf, .cc-btn-accept, .dm-save, .dm-cancel, button.level-badge, .back-btn, .restart-btn, .back-link, .nav-pill.active, .stats-filter-btn, .time-filter-btn, .class-tab, .aw-chip, .toggle-btn, .custom-text-tab, .btn-import-file, .btn-new-folder, .btn-print-class, .btn-msg-class, .sound-toggle, .confirm-btn-yes, .confirm-btn-no, .prompt-ok, .prompt-cancel, .ts-modal-btn-confirm, .ts-modal-btn-cancel, .btn-close-modal, .achievement-modal-close, .btn-pro, .result-btn-primary, .result-btn-secondary, .typr-confirm-overlay > div > button, .header-action-btn, .user-avatar, .hamburger-btn, .header .view-toggle, .header .skip-error-toggle, .header .design-mode-toggle, button[onclick*="renameClassroom"], button[onclick*="editClassroomSubtitle"], h2 > button, #sf-sent-toggle, a[style*="linear-gradient"]:not(:has(div)), button[style*="linear-gradient"], button[style*="background:#6C63FF"], button[style*="background: #6C63FF"], .card a[style*="background"]:not([style*="transparent"]):not(:has(div)), :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .dark-dialog, .dark-modal, .assign-box, [id$="-modal"] > div) :is(button[style*="background:#f0f0f0"], button[style*="background: #f0f0f0"], button[style*="background:#f3f4f6"], button[style*="rgba(0,0,0,0.06)"], button[style*="background:none"], button[style*="background: none"], button[style*="rgba(255,255,255,0.1)"], button[style*="rgba(255, 255, 255, 0.1)"], label.btn-secondary[for], button), .quick-reply-btn ):not(:disabled, .disabled, .tz-grau, [aria-disabled="true"], [style*="not-allowed"]):is(:hover, :focus-visible) * { color: var(--v2-h-fill-text) !important; /* ausdrücklich statt inherit: manche Verweise tragen inline „color: #fff !important“ */ -webkit-text-fill-color: var(--v2-h-fill-text) !important; } /* Formularfelder: Akzentrahmen, Auswahlfelder zusätzlich getönt; Schalter: Hof */ html.design-formell-v2 body :is(select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"])):not(:disabled):hover { border-color: var(--v2-accent-soft) !important; } html.design-formell-v2 body select:not(:disabled):hover { background-color: var(--v2-h-tint) !important; } html.design-formell-v2 label:is(.toggle-switch, .toggle-switch-cls):hover :is(.toggle-slider, .toggle-slider-cls) { box-shadow: 0 0 0 3px var(--v2-h-tint-2) !important; } /* Textverweise: kräftige Unterstreichung (Knöpfe und Kacheln setzen sie weiter oben bzw. in den höheren Stufen wieder aus) */ html.design-formell-v2 body a:hover { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 2px !important; } html.design-formell-v2 body a.logo:hover { opacity: 0.82 !important; text-decoration: none !important; } } @media (prefers-reduced-motion: reduce) { html.design-formell-v2 { --v2-h-hub: 0px; } html.design-formell-v2 body :is(a, button, summary, select, [role="button"], .classroom-card, .class-card, .design-option, .font-option, .option-card, .start-mode-option, .student-name-link) { transition: none !important; } } } @layer zweit { @media (hover: hover) { /* Navigation, Menüzeilen, Listenzeilen: getönte Fläche mit Akzentschrift (nicht gefüllt — die aktive Seite bleibt erkennbar) */ html.design-formell-v2 :is(.nav-pill:not(.active), .mobile-nav-overlay a, .avatar-dropdown-menu .dropdown-item, .lang-item, a.activity-item, .card a[style*="background"]:has(div), .folder-item):is(:hover, :focus-visible) { background: var(--v2-h-tint) !important; background-image: none !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; box-shadow: none !important; transform: none !important; text-decoration: none !important; } html.design-formell-v2 :is(a.activity-item, .card a[style*="background"]:has(div), .folder-item):is(:hover, :focus-visible) { background: var(--v2-h-tint-2) !important; border-color: var(--v2-accent-soft) !important; } /* im Benutzermenü tragen auch die Symbole die Akzentschrift (die main.css färbt dort jedes Kind einzeln) */ html.design-formell-v2 .avatar-dropdown-menu :is(.dropdown-item, .lang-item):is(:hover, :focus-visible) * { color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; } /* ruhig: ohne Einrückung der Zeile und ohne Vergrößern des Symbols (beides sprang, seit der Übergang nur noch Farben und Schatten führt) */ html.design-formell-v2 .avatar-dropdown-menu .dropdown-item:is(:hover, :focus-visible) { padding-left: 20px !important; } html.design-formell-v2 .avatar-dropdown-menu .dropdown-item:is(:hover, :focus-visible) .dropdown-icon { transform: none !important; } /* die gewählte Sprache ist schon in Ruhe hinterlegt: im Hover die kräftigere Tönung (Abstand 50 statt 20) */ html.design-formell-v2 .avatar-dropdown-menu .lang-item.lang-active:is(:hover, :focus-visible) { background: var(--v2-h-tint-2) !important; } /* Textknöpfe ohne eigene Fläche (Aufklapper, Sortierknöpfe und Namen der Auswertung, Bericht, Zurück): kräftig getönt hinterlegt */ html.design-formell-v2 body :is(summary, th button, .aw-num > button, button.aw-kind, .aw-link-knopf, .aw-zurueck, #auswertung-link):is(:hover, :focus-visible) { background: var(--v2-h-tint-2) !important; box-shadow: 0 0 0 4px var(--v2-h-tint-2) !important; border-radius: 2px !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; text-decoration: none !important; transform: none !important; } /* Symbol des Benutzermenüs liegt als Bild im Knopf: im Hover in der Schriftfarbe des Knopfs */ html.design-formell-v2 .user-avatar:is(:hover, :focus-visible) { background-color: var(--v2-h-fill) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; background-image: url("data:image/svg+xml;utf8,") !important; } html.design-formell-v2:not(.light-mode) .user-avatar:is(:hover, :focus-visible) { background-image: url("data:image/svg+xml;utf8,") !important; } html.design-formell-v2 .student-name-link:hover { color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; border-color: var(--v2-accent-soft) !important; text-decoration-color: var(--v2-accent-soft) !important; background: var(--v2-h-tint-2) !important; box-shadow: 0 0 0 4px var(--v2-h-tint-2) !important; border-radius: 2px !important; } } } @layer gefahr { @media (hover: hover) { html.design-formell-v2 :is(.btn-danger, .class-action-danger, .ts-modal-btn-danger, #confirm-action-btn, :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .dark-dialog, .dark-modal, [id$="-modal"] > div) :is(button[style*="#FF6B6B"], button[style*="#ff6b6b"]) ):not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { background: var(--v2-h-gefahr) !important; background-image: none !important; border-color: var(--v2-h-gefahr) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: var(--v2-h-gefahr-schatten) !important; transform: translateY(var(--v2-h-hub)) !important; filter: none !important; text-decoration: none !important; } html.design-formell-v2 :is(.btn-danger, .class-action-danger, .ts-modal-btn-danger, #confirm-action-btn):not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Dialogknöpfe, die schon in Ruhe rot gefüllt sind: deutlich dunkleres Rot */ html.design-formell-v2 :is(.ts-modal-btn-danger, #confirm-action-btn, :is(.modal-content, .typr-confirm-overlay > div, .ts-modal, .dark-dialog, .dark-modal, [id$="-modal"] > div) :is(button[style*="#FF6B6B"], button[style*="#ff6b6b"]) ):not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { background: var(--v2-h-gefahr-2) !important; border-color: var(--v2-h-gefahr-2) !important; } } } @layer besonders { /* Symbole in den Trainingskacheln des Schüler-Dashboards waren weiß auf Weiß: die Regel „in Linkknöpfen alles Weiß“ traf auch die Linien im Symbol (path, circle), deren Strich currentColor ist */ html.design-formell-v2 .card a:is([href*="/train/level"], [href$="/train/abschrift"], [href$="/train/custom-text"], [href*="richtig-tippen"], .kachel-bestzeit, .kachel-duell)[style*="linear-gradient"] :is(.fv2-ikon, .fv2-ikon *), html.design-formell-v2 .card a[href$="/statistics"][style*="background"] :is(.fv2-ikon, .fv2-ikon *) { color: var(--v2-accent-soft) !important; } @media (hover: hover) { /* Deaktivierte gefüllte Knöpfe reagieren nicht (die ältere Regel .btn:hover färbte sie um) */ html.design-formell-v2 .btn:not(.btn-secondary, .btn-gray):is(:disabled, .disabled, .tz-grau, [aria-disabled="true"]):hover { background: var(--v2-accent) !important; box-shadow: none !important; transform: none !important; cursor: not-allowed !important; } /* Kacheln mit Motiv: Schnellzugriff und Trainingsknöpfe des Schüler-Dashboards */ html.design-formell-v2 :is(.quick-action, .card a:is([href*="/train/level"], [href$="/train/abschrift"], [href$="/train/custom-text"], [href*="richtig-tippen"], .kachel-bestzeit, .kachel-duell)[style*="linear-gradient"], .card a[href$="/statistics"][style*="background"]):is(:hover, :focus-visible) { background: linear-gradient(90deg, var(--v2-h-tint) 0%, var(--v2-h-tint) 40%, var(--v2-h-tint-2) 100%) !important; border-color: var(--v2-accent-soft) !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; box-shadow: 0 0 0 1px var(--v2-accent-soft), var(--v2-h-schatten) !important; transform: translateY(var(--v2-h-hub)) !important; filter: none !important; text-decoration: none !important; } html.design-formell-v2 :is(.card a:is([href*="/train/level"], [href$="/train/abschrift"], [href$="/train/custom-text"], [href*="richtig-tippen"], .kachel-bestzeit, .kachel-duell)[style*="linear-gradient"], .card a[href$="/statistics"][style*="background"]):is(:hover, :focus-visible) * { color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; } /* graue Angaben in Karten: auf der Tönung in der Textfarbe (sonst unter 4,5:1) */ html.design-formell-v2 :is(.classroom-card, .design-option, .font-option, .option-card, .start-mode-option):is(:hover, :focus-visible) :is(.classroom-stats, .classroom-stats span, .classroom-desc, .class-mini-label, .design-desc, .font-name, .option-desc, small) { color: var(--v2-text) !important; } /* Anklickbare Karten und Auswahlkarten: Design, Schrift, Hintergrund, Startmodus, Onboarding */ html.design-formell-v2 :is(:is(.classroom-card, .class-card):is([onclick], a), .design-option, .font-option, .option-card, .start-mode-option, .fv2-hg-wahl):is(:hover, :focus-visible) { background-color: var(--v2-h-tint-2) !important; border-color: var(--v2-accent-soft) !important; box-shadow: 0 0 0 1px var(--v2-accent-soft), var(--v2-h-schatten) !important; transform: translateY(var(--v2-h-hub)) !important; text-decoration: none !important; } /* große Klassenkarten liegen auf Weiß: die leichtere Tönung genügt (Abstand 50) */ html.design-formell-v2 :is(.classroom-card, .class-card):is([onclick], a):is(:hover, :focus-visible) { background-color: var(--v2-h-tint) !important; } } } } } /* ======== Ende Hover-Sprache ======== */ /* ======== Ergebnisfenster ======== (5.10.2026, Emanuel: „Die Infos bei der Fehleranalyse im formellen Layout sind weiß auf weiß“) Das Ergebnisfenster des Trainings (#complete-modal) bekommt seine Schriftfarben im formellen Design nur noch von hier. Ursache des Fehlers: Die Tabelle der Fehleranalyse wird mit Inline-Farbe #000 gebaut; der Kontrastwächter des Trainings (partials/train_kontrast.html) setzt am Fenster data-kontrast="hell|dunkel", und train_styles_kontrast.html färbt die Tabelle bei „dunkel“ mit #f5f5f5 !important. Stuft der Wächter das helle formelle Fenster als dunkel ein (oder das dunkle als hell), stand die Tabelle weiß auf Hell bzw. schwarz auf Dunkel. Wichtige Deklarationen einer Ebene gehen den wichtigen ohne Ebene und den Inline-Farben vor — die Regeln hier gelten deshalb unabhängig vom Wächter und von jedem Skript. */ @layer vorschau { html.design-formell-v2 #complete-modal .error-analysis-title { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; font-family: var(--v2-font) !important; } html.design-formell-v2 #complete-modal #error-analysis-content, html.design-formell-v2 #complete-modal #error-analysis-content :is(table, tbody, tr, td, th, div, span, strong, b) { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; opacity: 1 !important; text-shadow: none !important; } html.design-formell-v2 #complete-modal #error-analysis-content tr:first-child :is(td, th) { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; font-weight: 600 !important; } html.design-formell-v2 #complete-modal #error-analysis-content tr { border-bottom-color: var(--v2-border) !important; } html.design-formell-v2 #complete-modal #error-analysis-content td:last-child { font-size: 0.85rem !important; } html.design-formell-v2 #complete-modal #error-analysis-tips, html.design-formell-v2 #complete-modal #error-analysis-tips :is(strong, b, span) { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; } html.design-formell-v2 #complete-modal #previous-comparison { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; } html.design-formell-v2 #complete-modal #previous-comparison span { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; font-weight: 600 !important; } } /* -- Ergebnisfenster, Teil 2 (5.10.2026): keine Farbschema-Belohnung; kompaktes Fenster mit haftender Knopfzeile -- Belohnung: Nach Level 10, 20 … 100 bot das Fenster „Neues Theme freigeschaltet! …-Farbschema [Jetzt aktivieren!]“ an (train_ui_tasks.html, FORMAL_THEME_UNLOCKS) — im formellen Design gibt es seit 4.10.2026 keine Farbschemata (Vorgabe Emanuel). Themes gehören zum verspielten Design: auch die Vorschau eines gesperrten Levels und die Level-Auswahl nennen hier keine. Das Skript setzt style.display = 'block', deshalb !important. Höhe: Das Fenster war im formellen Design 746–1031 px hoch (0–5 Fehlerzeilen) und schnitt bei 1366 × 768 und 1280 × 720 die Knopfzeile ab. Wertekästen, Fehleranalyse und „Weiter geht's mit“ stehen jetzt enger; die Knopfzeile haftet am unteren Rand des Fensters, falls der Inhalt doch einmal länger ist (Privatkonten: Punkte, Pro-Hinweis). */ @layer vorschau { html.design-formell-v2 #theme-unlock-reward, html.design-formell-v2 #preview-theme-reward, html.design-formell-v2 .level-theme-reward { display: none !important; } html.design-formell-v2 #complete-modal .modal-content { padding: 1.25rem 1.5rem 0 !important; } html.design-formell-v2 #complete-modal .modal-title { margin-bottom: 0.7rem !important; line-height: 1.25 !important; } html.design-formell-v2 #complete-modal .stats-grid { margin: 0 0 0.3rem !important; gap: 0.5rem !important; } html.design-formell-v2 #complete-modal .stat-box { padding: 0.45rem 0.4rem 0.5rem !important; } html.design-formell-v2 #complete-modal .stat-box-value, html.design-formell-v2 #complete-modal .stat-box-wpm .stat-box-value { font-size: 1.45rem !important; line-height: 1.2 !important; } html.design-formell-v2 #complete-modal .stat-box-label, html.design-formell-v2 #complete-modal .stat-box-wpm .stat-box-label { font-size: 0.78rem !important; line-height: 1.25 !important; margin-top: 0.1rem !important; } html.design-formell-v2 #complete-modal .stats-grid + div { margin-top: 0 !important; font-size: 0.78rem !important; line-height: 1.3 !important; } html.design-formell-v2 #complete-modal #error-analysis-panel { margin-top: 0.7rem !important; padding: 0.5rem 0.8rem 0.55rem !important; } html.design-formell-v2 #complete-modal .error-analysis-title { margin-bottom: 0.2rem !important; font-size: 0.95rem !important; line-height: 1.3 !important; } html.design-formell-v2 #complete-modal #error-analysis-content { font-size: 0.9rem !important; line-height: 1.3 !important; } html.design-formell-v2 #complete-modal #error-analysis-content table { font-size: 0.9rem !important; line-height: 1.3 !important; } html.design-formell-v2 #complete-modal #error-analysis-content td { padding: 3px 6px !important; } html.design-formell-v2 #complete-modal #error-analysis-tips { margin-top: 0.4rem !important; padding: 0.35rem 0.7rem !important; font-size: 0.9rem !important; line-height: 1.35 !important; } html.design-formell-v2 #complete-modal #previous-comparison { margin-top: 0.5rem !important; font-size: 0.9rem !important; line-height: 1.3 !important; } html.design-formell-v2 #complete-modal .next-level-preview { margin: 0.7rem 0 0 !important; padding: 0.5rem 1rem 0.55rem !important; } html.design-formell-v2 #complete-modal .next-level-header { margin-bottom: 0.1rem !important; font-size: 0.82rem !important; line-height: 1.3 !important; } html.design-formell-v2 #complete-modal .next-level-info { margin-bottom: 0 !important; } html.design-formell-v2 #complete-modal .next-level-number { font-size: 1.3rem !important; line-height: 1.25 !important; } html.design-formell-v2 #complete-modal .next-level-name { font-size: 1.02rem !important; line-height: 1.3 !important; margin-bottom: 0.05rem !important; } html.design-formell-v2 #complete-modal .next-level-desc { font-size: 0.88rem !important; line-height: 1.3 !important; margin-top: 0 !important; } html.design-formell-v2 #complete-modal .modal-buttons { position: sticky !important; bottom: 0 !important; z-index: 2 !important; margin: 0.8rem -1.5rem 0 !important; padding: 0.65rem 1.5rem 0.9rem !important; gap: 0.6rem !important; background: var(--v2-surface) !important; border-top: 1px solid var(--v2-border) !important; } html.design-formell-v2 #complete-modal .modal-buttons .btn { padding: 0.6rem 1.2rem !important; font-size: 1rem !important; } } /* -- Tastaturfläche des Trainings (5.10.2026, Emanuel: „Mache auch bei hellem Design einen dunklen Hintergrund um die Tastatur.“): im formellen Design liegt die Tastatur in beiden Modi auf einer dunklen Fläche — hell #2c3e50 (so stand sie seit 4.10. live), dunkel die Fläche des Designs. Die Regel gilt unabhängig vom Zustand des body und vom gespeicherten Farbschema; bisher hing die Fläche an alten Regeln (Grundregel #2c3e50, Schema „default“ rgba(255,255,255,0.75), dunkler Modus mit Klassen am body #f5f6f8) und sprang 1–2 s nach dem Laden um, weil train_games.html die Klassen am body löschte. Auf der dunklen Fläche: Die aktuelle Taste (Füllung in der Akzentfarbe, gegen die Fläche nur 1,3–2,7:1) bekommt einen hellen Umriss; Hände und Fingerhinweis sind schon für dunklen Grund gezeichnet (weiße Linien, dunkle Marke). Umschalt-Beschriftungen der Tasten: Deckkraft 0,7 ergab auf den violetten Tasten 4,2:1 — jetzt 0,82. -- */ @layer vorschau { html.design-formell-v2 { --v2-tastaturflaeche: #2c3e50; --v2-tastaturrand: #1a252f; --v2-tastaturumriss: #9cc4ec; } html.design-formell-v2:not(.light-mode) { --v2-tastaturflaeche: var(--v2-surface-2); --v2-tastaturrand: var(--v2-border); } html.design-formell-v2.light-mode .keyboard-container, html.design-formell-v2:not(.light-mode) .keyboard-container { background: var(--v2-tastaturflaeche) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--v2-tastaturrand) !important; } html.design-formell-v2.light-mode #keyboard .key.active, html.design-formell-v2.light-mode #keyboard .key.shift-active, html.design-formell-v2.light-mode #keyboard .key.altgr-active, html.design-formell-v2:not(.light-mode) #keyboard .key.active, html.design-formell-v2:not(.light-mode) #keyboard .key.shift-active, html.design-formell-v2:not(.light-mode) #keyboard .key.altgr-active { outline-color: var(--v2-tastaturumriss) !important; } html.design-formell-v2 #keyboard .key .key-shift { opacity: 0.82 !important; } } /* ======== Ende Ergebnisfenster ======== */ /* ======== Sichtprüfung (5.10.2026, Prüf-Agent Sichtbares, Auftrag Emanuel: „überprüfe alle heute und gestern durchgeführten änderungen und fixe, falls du ein problem findest“) ======== Gesamtmessung des Endstands per Pixelvergleich (jeder Text und jedes Symbol gegen dieselbe Stelle ohne Text bzw. Symbol) auf allen Seiten beider Rollen und des Privatkontos, hell und dunkel, 1366 und 390 px, mit Testdaten (Tests, Abschriften, Abgaben). Jede Gruppe nennt den gemessenen Wert davor. Korrigiert ist der Ruhezustand; der Hover bleibt Sache der Unterebene „hover“ — für hier neu gefasste Knöpfe steht er am Ende dieses Blocks in derselben Sprache (gleiche Variablen). */ @layer vorschau { /* 1 Tests und 10-Minuten-Abschriften der Lehrkraft — die Karten erscheinen erst, wenn es Tests gibt (deshalb bisher ungemessen). Nur innerhalb .exam-card/.dict-card: die Prüfungsseite der Kinder (student_exam.html) benutzt .exam-meta und .exam-stat-label ebenfalls. Titel dunkel auf dunkler Karte 1,1:1 · graue Angaben 2,7–3,4:1 · grüne Zahl 3,8–4,1:1 · Knöpfe 3,2–4,4:1 */ html.design-formell-v2 .exam-card, html.design-formell-v2 .dict-card { background: var(--v2-surface-2) !important; background-image: none !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; } html.design-formell-v2 .exam-card .exam-title, html.design-formell-v2 .dict-title { color: var(--v2-text) !important; font-family: var(--v2-font) !important; font-weight: 600 !important; } html.design-formell-v2 .exam-card .exam-meta, html.design-formell-v2 .exam-card .exam-meta span, html.design-formell-v2 .exam-card .exam-desc, html.design-formell-v2 .exam-card .exam-stat-label, html.design-formell-v2 .dict-meta, html.design-formell-v2 .dict-meta span, html.design-formell-v2 .dict-stat-lbl { color: var(--v2-muted) !important; } html.design-formell-v2 .exam-card .exam-stat-val, html.design-formell-v2 .dict-stat-val { color: var(--v2-text) !important; font-family: var(--v2-font) !important; font-weight: 600 !important; } html.design-formell-v2 .exam-btn, html.design-formell-v2 .dict-btn { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 6px !important; box-shadow: none !important; font-family: var(--v2-font) !important; font-weight: 600 !important; } html.design-formell-v2 .exam-btn-delete, html.design-formell-v2 .dict-btn-delete { color: var(--v2-danger) !important; -webkit-text-fill-color: var(--v2-danger) !important; border-color: var(--v2-danger) !important; } html.design-formell-v2 :is(.exam-btn, .dict-btn) .fv2-ikon { color: inherit !important; } /* 2 Graue Inline-Angaben der Lehrerseiten (#888 auf Weiß 3,5:1, #999 2,8:1, Orange „nicht zugewiesen“ 2,6:1): „1/6 abgegeben“, „Fällig: …“, „Fällig bis (optional)“, „Zugewiesene Abschriften“, Spaltenköpfe des Notenschlüssels */ html.design-formell-v2 :is(.card, .assign-box, [id$="-modal"] > div) :is(span, div, label, p, small)[style*="color:#888"], html.design-formell-v2 :is(.card, .assign-box, [id$="-modal"] > div) :is(span, div, label, p, small)[style*="color: #888"], html.design-formell-v2 :is(.card, .assign-box, [id$="-modal"] > div) :is(span, div, label, p, small)[style*="color:#999"], html.design-formell-v2 :is(.card, .assign-box, [id$="-modal"] > div) :is(span, div, label, p, small)[style*="color: #999"], html.design-formell-v2 :is(.card, .assign-box, [id$="-modal"] > div) div[style*="color:#999"] > span, html.design-formell-v2 :is(.card, .assign-box, [id$="-modal"] > div) :is(span, div)[style*="#e67e22"] { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; } /* 3 Rückmeldungen beim Zuweisen und Speichern (Farbe setzt das Skript inline): Fehlerrot 3,8:1 / 2,8:1, Erfolgsgrün 3,8:1 / 1,9:1 */ html.design-formell-v2 :is([id$="feedback"], [id$="-result"])[style*="231, 76, 60"], html.design-formell-v2 :is([id$="feedback"], [id$="-result"])[style*="255, 107, 107"] { color: var(--v2-danger) !important; -webkit-text-fill-color: var(--v2-danger) !important; font-weight: 600 !important; } html.design-formell-v2 [id$="feedback"][style*="5, 150, 105"], html.design-formell-v2 [id$="feedback"][style*="0, 217, 165"], html.design-formell-v2 [id$="feedback"][style*="78, 205, 196"] { color: #047857 !important; -webkit-text-fill-color: #047857 !important; font-weight: 600 !important; } html.design-formell-v2:not(.light-mode) [id$="feedback"][style*="5, 150, 105"], html.design-formell-v2:not(.light-mode) [id$="feedback"][style*="0, 217, 165"], html.design-formell-v2:not(.light-mode) [id$="feedback"][style*="78, 205, 196"] { color: #6ee7b7 !important; -webkit-text-fill-color: #6ee7b7 !important; } html.design-formell-v2 [id$="feedback"][style*="255, 255, 255"] { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; } /* 4 Symbole in gefüllten Knöpfen trugen die Zweitfarbe statt der Knopfschrift: dunkel 2,8:1 (CSV exportieren, Zuweisen), „Drucken“ im Leistungsbericht 1,7:1 */ html.design-formell-v2 :is(.btn-create, .csv-import-btn, .aw-knopf-haupt, .aw-chip.aktiv, .class-tab.active, .toggle-btn.active, .time-filter-btn.active, .lb-knopf, .btn-start, .buy-btn, .select-btn, .ranking-display, .dm-save, .dm-cancel) .fv2-ikon { color: inherit !important; } /* Design-Dialog „Übernehmen“: Haken hell Akzent auf Akzent (unsichtbar), dunkel 2,8:1 — oben mit aufgenommen. Fenster „Schüler bearbeiten“/„Verschieben“ bleiben weiß: Symbole trugen im dunklen Modus die helle Zweitfarbe (1,7:1 auf Pastell) */ html.design-formell-v2 :is(#student-modal, #move-modal) :is(button, a) .fv2-ikon { color: inherit !important; } /* Fenster „Test zuweisen“: Erstknopf blieb hellblau #3498db mit weißer Schrift 3,1:1 (die Vorlage gibt die Fläche seit 5.10. frei) */ html.design-formell-v2 .assign-box button[onclick^="assignExam"] { background: var(--v2-accent) !important; background-image: none !important; border: 1px solid var(--v2-accent) !important; border-radius: 6px !important; font-family: var(--v2-font) !important; font-weight: 600 !important; box-shadow: none !important; } /* Abzeichen „Beispielklasse“ und Untertitel der Klassenkarten: gedämpfte Schrift mit Deckkraft 0,7 — hell 3,3:1 */ html.design-formell-v2 .classroom-desc { opacity: 1 !important; color: var(--v2-muted) !important; } html.design-formell-v2 .classroom-desc > span[style*="background"] { color: var(--v2-text) !important; } /* Leistungsbericht: „Drucken“ in der Akzentfarbe des formellen Designs statt Hellblau #2563eb (Kontrast war in Ordnung, nur das Symbol nicht) */ html.design-formell-v2 #bericht .lb-knopf.lb-haupt { background: var(--v2-accent) !important; background-image: none !important; border-color: var(--v2-accent) !important; color: var(--v2-accent-text) !important; -webkit-text-fill-color: var(--v2-accent-text) !important; } /* 5 Training: nächste Taste — der Helligkeitsfilter der Trainingsstile (brightness 1.4, saturate 1.5) lag noch auf der Akzentfläche: im dunklen Modus weiße Schrift auf #1ba2ff 2,7:1 statt auf --v2-accent 5,2:1 */ html.design-formell-v2 #keyboard .key.active, html.design-formell-v2 #keyboard .key.shift-active, html.design-formell-v2 #keyboard .key.altgr-active { filter: none !important; } /* Drittbelegung der Tasten (², {, [, €, µ …): dunkle Schrift mit Deckkraft 0,5 auf den Fingerfarben 2,6–2,9:1 */ html.design-formell-v2 .key .key-altgr { opacity: 0.86 !important; } /* Info-Zeichen neben WPM: 10 px mit Deckkraft 0,6 — 2,96:1 */ html.design-formell-v2 .wpm-info-icon { opacity: 1 !important; font-size: 0.72rem !important; color: var(--v2-muted) !important; transform: none !important; } html.design-formell-v2 .wpm-info-icon .fv2-ikon { color: var(--v2-muted) !important; } /* 6 Sprunglink „Zum Hauptinhalt springen“ (base.html): die Onboarding-Regel für den gleichnamigen Verweis färbte ihn gedämpft auf der gelben Fläche — im Fokus dunkel 1,1:1, hell 4,4:1 */ html.design-formell-v2 a.skip-link[href="#main-content"] { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; -webkit-text-fill-color: var(--v2-accent-text) !important; border-radius: 0 0 6px 6px !important; font-family: var(--v2-font) !important; font-weight: 600 !important; box-shadow: none !important; } html.design-formell-v2 a.skip-link[href="#main-content"]:focus { outline: 2px solid var(--v2-link) !important; outline-offset: 2px !important; } /* 7 Platzhalter der Eingabefelder im hellen Modus 2,6:1 (z. B. „z.B. 1. Test“, „Klassenname …“) */ html.design-formell-v2.light-mode :is(input, textarea)::placeholder { color: #5b6472 !important; -webkit-text-fill-color: #5b6472 !important; opacity: 1 !important; } /* 8 Freie 10-Minuten-Abschrift (/train/abschrift), Startseite: grüne Verlaufsknöpfe und grüne Auswahl der verspielten Fassung, Auswahlpunkte hell unsichtbar (weißer Ring auf Weiß), Angabe unter dem Titel 4,25:1, Symbol im Startknopf dunkel 1,2:1. Dazu „Mit Spiel tippen“ samt Erklärung: im formellen Design gibt es keine Spiele (Vorgabe Emanuel 3.10.2026) */ html.design-formell-v2 .btn-start { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; -webkit-text-fill-color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent) !important; border-radius: 6px !important; font-family: var(--v2-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: none !important; } html.design-formell-v2 .btn-random { background: var(--v2-surface) !important; background-image: none !important; color: var(--v2-accent-soft) !important; -webkit-text-fill-color: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-soft) !important; border-radius: 6px !important; font-family: var(--v2-font) !important; font-weight: 600 !important; box-shadow: none !important; } html.design-formell-v2 .text-option { background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; box-shadow: none !important; } html.design-formell-v2 .text-option.selected { background: var(--v2-surface-2) !important; border-color: var(--v2-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--v2-accent-soft) !important; } html.design-formell-v2 .text-option .radio-dot { border-color: var(--v2-muted) !important; background: transparent !important; } html.design-formell-v2 .text-option.selected .radio-dot { border-color: var(--v2-accent) !important; background: var(--v2-accent) !important; } html.design-formell-v2 .text-option-title { color: var(--v2-text) !important; } html.design-formell-v2 .text-option-desc { color: var(--v2-muted) !important; opacity: 1 !important; } html.design-formell-v2 .setup-option input[type="checkbox"] { accent-color: var(--v2-accent) !important; } html.design-formell-v2 .setup-panel a[href*="/train?abschrift"], html.design-formell-v2 .setup-panel > div[style*="font-size:0.95rem"] { display: none !important; } html.design-formell-v2 .setup-panel div:has(> #btn-start) { grid-template-columns: 1fr !important; justify-items: center !important; } html.design-formell-v2 .setup-panel #btn-start { flex-direction: row !important; min-width: 260px !important; justify-content: center !important; gap: 10px !important; padding: 14px 32px !important; } html.design-formell-v2 .setup-panel #btn-start > span:first-child { font-size: 1.2rem !important; display: inline-flex !important; } /* Countdown 3-2-1 der Abschrift im hellen Modus: Akzentfarbe auf der grauen Abdunkelung 2,0:1 */ html.design-formell-v2 .countdown-overlay .countdown-number { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none !important; } html.design-formell-v2 .countdown-overlay { background: rgba(15, 23, 42, 0.82) !important; } /* Belohnungen (im formellen Design nicht verlinkt, aber erreichbar): gesperrte Erfolge mit Deckkraft 0,5 — Titel 2,9:1, Text 2,9:1, Belohnung 2,3:1, Symbol 2,4:1; Haken der freigeschalteten Stücke dunkel 1,65:1 (helle Zweitfarbe auf heller Karte) */ html.design-formell-v2 .achievement-card.locked { opacity: 1 !important; border-style: dashed !important; } html.design-formell-v2 .achievement-card.locked :is(h3, p) { color: var(--v2-muted) !important; } html.design-formell-v2 .achievement-card.locked .achievement-icon .fv2-ikon { color: var(--v2-muted) !important; } html.design-formell-v2 .unlock-badge, html.design-formell-v2 .unlock-badge .fv2-ikon { color: #047857 !important; } /* Schüler-Dashboard, Kachel „Richtig sitzen und tippen“: das Stuhl-Symbol (Inline-SVG in Textfarbe) blieb weiß auf der hellen Kachel — hell unsichtbar (weiß auf Weiß). Wie die übrigen Kachelsymbole in der Farbe der Kachelschrift */ html.design-formell-v2 .card a:is([href*="/train/level"], [href$="/train/abschrift"], [href$="/train/custom-text"], [href*="richtig-tippen"], .kachel-bestzeit, .kachel-duell)[style*="linear-gradient"] :is(svg, svg *) { color: inherit !important; } /* Wochenaufgaben (Privatkonto): Kennzeichen „Pro“ violett auf dunkler Fläche bei halber Deckkraft 2,4:1 */ html.design-formell-v2 .challenge-item span[style*="#4a42c9"] { color: var(--v2-text) !important; font-weight: 600 !important; } /* 9 Lizenzseite: Haken der Leistungslisten hell 1,7:1 (türkis auf Hellgrau) */ html.design-formell-v2 #lizenzseite .plan-features li::before { color: #047857 !important; } html.design-formell-v2:not(.light-mode) #lizenzseite .plan-features li::before { color: #6ee7b7 !important; } /* Statistiken der Lehrkraft: Schülerzahl im Klassen-Reiter hell 4,0:1, im aktiven Reiter dunkel 3,4:1 */ html.design-formell-v2 .class-tab > span { color: inherit !important; opacity: 1 !important; } /* Einstellungen der Lehrkraft, Standard-Notenskala: Notenziffern farbig auf Pastell (3 gelb 1,9:1, 4 orange 2,9:1, 2 grün 3,8:1) — neutral wie die Noten-Abzeichen der Tests */ html.design-formell-v2 .grading-edit-row > span:first-child { background: var(--v2-surface-2) !important; background-image: none !important; color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; border-radius: 6px !important; } /* Einstellungen: Erklärzeilen 4,4:1 */ html.design-formell-v2 .setting-desc { color: var(--v2-muted) !important; opacity: 1 !important; } /* Prüfungsseite der Kinder: Aufzählungszeichen der Hinweise grün auf Hellgrün 2,6:1 */ html.design-formell-v2 .exam-instructions ul li::before { color: var(--v2-accent-soft) !important; } /* Symbole in gefüllten Verweisknöpfen (Inline-Verlauf der Vorlage, im formellen Design einfarbig gefüllt): Knopfschrift statt Zweitfarbe. Die Kacheln des Dashboards behalten ihre Zweitfarbe (Unterebene „hover“, Stufe „besonders“). */ html.design-formell-v2 :is(a, button)[style*="linear-gradient"] :is(.fv2-ikon, .fv2-ikon *) { color: var(--v2-accent-text) !important; } /* Schüler-Statistik: Stern im Verweis „Pro: Volle Historie“ gedämpft auf Akzent — hell 1,1:1, dunkel 2,8:1 */ html.design-formell-v2 #progress-tracking-content a[style*="linear-gradient"], html.design-formell-v2 #progress-tracking-content a[style*="linear-gradient"] * { color: var(--v2-accent-text) !important; } } /* Symbol im Verweis „Detaillierte Statistiken ansehen“ des Schüler-Dashboards: Die Kachelregel der Hover-Sprache (Stufe „besonders“) gab ihm die Zweitfarbe — der Verweis ist in Ruhe aber gefüllt: hell Akzent auf Akzent (unsichtbar), dunkel 2,8:1. In Ruhe die Knopfschrift; der Hover (getönte Fläche, Zweitfarbe) bleibt, wie er ist. Dazu der Hover der in diesem Block neu gefassten Knöpfe. */ @layer vorschau { @layer hover { @layer besonders { html.design-formell-v2 .card a[href$="/statistics"][style*="background"]:not(:hover):not(:focus-visible) :is(.fv2-ikon, .fv2-ikon *) { color: var(--v2-accent-text) !important; } @media (hover: hover) { /* Level-Karten des Schüler-Dashboards (Emanuel: „wenn ich beim dashboard als schüler über einen Button fahre, soll sich dieser merklicher verändern“): bisher nur leicht vergrößert, Fläche und Rand blieben gleich (gemessen: Farbabstand 0, 7–13 % geänderte Pixel). Jetzt wie die übrigen Karten: getönte Fläche, Akzentrahmen, Schatten, 1 px angehoben; gesperrte Level reagieren nicht */ html.design-formell-v2 .level-item:not(.locked):is(:hover, :focus-visible) { background: var(--v2-h-tint-2) !important; background-image: none !important; border-color: var(--v2-accent-soft) !important; box-shadow: 0 0 0 1px var(--v2-accent-soft), var(--v2-h-schatten) !important; transform: translateY(var(--v2-h-hub)) !important; text-decoration: none !important; } html.design-formell-v2 .level-item:not(.locked):is(:hover, :focus-visible) :is(span, div, .level-item-name) { color: var(--v2-text) !important; -webkit-text-fill-color: var(--v2-text) !important; } html.design-formell-v2 .level-item.locked:hover { transform: none !important; } } } @layer gefahr { @media (hover: hover) { html.design-formell-v2 :is(.exam-btn-delete, .dict-btn-delete):not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { background: var(--v2-h-gefahr, #b42318) !important; background-image: none !important; border-color: var(--v2-h-gefahr, #b42318) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: var(--v2-h-gefahr-schatten, none) !important; transform: translateY(var(--v2-h-hub, 0px)) !important; filter: none !important; text-decoration: none !important; } html.design-formell-v2 :is(.exam-btn-delete, .dict-btn-delete):not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } } } @layer allgemein { @media (hover: hover) { html.design-formell-v2 :is(.exam-btn:not(.exam-btn-delete), .dict-btn:not(.dict-btn-delete), .lb-knopf, .btn-start, .btn-random):not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { background: var(--v2-h-fill, #2f6fb3) !important; background-image: none !important; border-color: var(--v2-h-fill, #2f6fb3) !important; color: var(--v2-h-fill-text, #ffffff) !important; -webkit-text-fill-color: var(--v2-h-fill-text, #ffffff) !important; box-shadow: var(--v2-h-schatten, none) !important; transform: translateY(var(--v2-h-hub, 0px)) !important; filter: none !important; text-decoration: none !important; } html.design-formell-v2 :is(.exam-btn:not(.exam-btn-delete), .dict-btn:not(.dict-btn-delete), .lb-knopf, .btn-start, .btn-random):not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible) * { color: var(--v2-h-fill-text, #ffffff) !important; -webkit-text-fill-color: var(--v2-h-fill-text, #ffffff) !important; } html.design-formell-v2 .text-option:is(:hover, :focus-visible) { background: var(--v2-h-tint, #d6e4f3) !important; border-color: var(--v2-accent-soft) !important; } } } } } /* ======== Ende Sichtprüfung ======== */ /* ======== Levelkacheln geschafft (8.10.2026) ======== */ /* Emanuel: „bei den levels wird bei den einzelnen levels nicht angezeigt, wenn ich dieses schon geschafft habe (wenn ich das formell-layout habe)“ und zur Level-Übersicht des Dashboards: „auch in dieser ansicht sollte erkennbar sein, welche levels ich schon zur gänze gemacht habe und welche mit welchem fortschritt“. Ursache: Die Dialogregeln oben („Unterflächen“) treffen jede .level-option mit der Spezifität zweier ID-Selektoren und setzen Rand und Fläche !important auf die Grundfarben — damit verloren geschafft (grün), aktuell (Akzentrand) und gesperrt (gestrichelt) jedes Kennzeichen; die Regeln für .level-item (Dashboard) tun dasselbe mit niedrigerer Spezifität. Die Regeln hier stehen mit #level-modal #level-grid bzw. #level-grid davor. Kennzeichen ohne Emoji: Haken als Liniensymbol über eine Maske, grüner Rand, grüne Zahl, getönte Fläche; aktuell = 2 px Akzentrand; gesperrt = gestrichelt, gedämpfte Schrift, volle Deckkraft (0,75 drückte die Beschriftung unter 4,5:1); angefangen (Dashboard) = Prozentzahl rechts oben und Balken in der Akzentfarbe. Farben gemessen: hell Grün 1b6b45 auf Tönung e3f1ea 5,6:1, dunkel 6ccf98 auf 1f3a2d 6,5:1 (Verlauf oberflaeche-designs.md). */ @layer vorschau { html.design-formell-v2 { --v2-kachel-ok: #1b6b45; --v2-kachel-ok-tint: #e3f1ea; --v2-kachel-aktuell: #1f4e79; } html.design-formell-v2:not(.light-mode) { --v2-kachel-ok: #6ccf98; --v2-kachel-ok-tint: #1f3a2d; --v2-kachel-aktuell: #9cc4ec; } /* --- Levelauswahl der Trainingsseite (#level-modal) --- */ html.design-formell-v2 #level-modal #level-grid .level-option.completed { border: 1px solid var(--v2-kachel-ok) !important; background: var(--v2-kachel-ok-tint) !important; } html.design-formell-v2 #level-modal #level-grid .level-option.completed .level-option-number, html.design-formell-v2 #level-modal #level-grid .level-option.completed .level-option-desc { color: var(--v2-kachel-ok) !important; -webkit-text-fill-color: var(--v2-kachel-ok) !important; } html.design-formell-v2 #level-modal #level-grid .level-option.completed::after, html.design-formell-v2 #level-grid .level-item.completed::after { content: '' !important; display: block !important; /* Lage mit !important (9.10.2026): Kacheln mit Theme-Freischaltung (Level 10, 20, …) setzen im Dashboard außerhalb der Ebene top/right auf -6px — der Haken saß dort in der Ecke außerhalb der Kachel */ position: absolute !important; top: 5px !important; right: 5px !important; width: 16px; height: 16px; background-color: var(--v2-kachel-ok); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat; font-size: 0 !important; opacity: 1 !important; pointer-events: none; } html.design-formell-v2 #level-modal #level-grid .level-option.completed:hover { border-color: var(--v2-accent-soft) !important; } html.design-formell-v2 #level-modal #level-grid .level-option.current-suggestion { border: 2px solid var(--v2-kachel-aktuell) !important; background: var(--v2-surface-2) !important; } html.design-formell-v2 #level-modal #level-grid .level-option.locked { border: 1px dashed var(--v2-border) !important; background: var(--v2-surface-2) !important; opacity: 1 !important; } html.design-formell-v2 #level-modal #level-grid .level-option.locked .level-option-number, html.design-formell-v2 #level-modal #level-grid .level-option.locked .level-option-desc { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; font-weight: 500 !important; } /* --- Level-Übersicht des Dashboards (#level-grid in der Karte) --- */ html.design-formell-v2 #level-grid .level-item.completed { border: 1px solid var(--v2-kachel-ok) !important; background: var(--v2-kachel-ok-tint) !important; color: var(--v2-kachel-ok) !important; } html.design-formell-v2 #level-grid .level-item.completed span { color: var(--v2-kachel-ok) !important; } html.design-formell-v2 #level-grid .level-item.current { border: 2px solid var(--v2-kachel-aktuell) !important; background: var(--v2-surface-2) !important; } html.design-formell-v2 #level-grid .level-item.locked { border: 1px dashed var(--v2-border) !important; background: var(--v2-surface-2) !important; opacity: 1 !important; } html.design-formell-v2 #level-grid .level-item.locked, html.design-formell-v2 #level-grid .level-item.locked span { color: var(--v2-muted) !important; font-weight: 500 !important; } /* angefangen: Prozentzahl (Span aus dashboard.html, im verspielten Design ausgeblendet) und Balken in der Akzentfarbe */ html.design-formell-v2 #level-grid .level-item-prozent { display: block !important; position: absolute; top: 3px; right: 5px; font-size: 0.62rem !important; font-weight: 600 !important; line-height: 1; color: var(--v2-kachel-aktuell) !important; } html.design-formell-v2 #level-grid .level-item > div[style*="height:5px"] { background: var(--v2-border) !important; border-radius: 0 0 5px 5px !important; } html.design-formell-v2 #level-grid .level-item > div[style*="height:5px"] > div { background: var(--v2-kachel-aktuell) !important; background-image: none !important; } /* Legende der Karte: Farbfelder passend zu den Kacheln */ /* nur das Farbfeld der Legende (Verlauf #00D9A5,#00b389): die Regel traf bis 9.10.2026 jede grüne Schrift in einer Karte („✓ Erledigt“, „✓ Erhalten“, die Genauigkeit) und gab ihr Fläche und Rahmen */ html.design-formell-v2 .card span[style*="#00D9A5,#00b389"] { background: var(--v2-kachel-ok-tint) !important; border: 1px solid var(--v2-kachel-ok) !important; } html.design-formell-v2 .card span[style*="#FFD93D,#ff9500"] { background: var(--v2-surface-2) !important; border: 2px solid var(--v2-kachel-aktuell) !important; } html.design-formell-v2 .card span[style*="#FFD93D,#56ab2f"] { background: var(--v2-kachel-aktuell) !important; } } /* ======== Ende Levelkacheln geschafft ======== */ /* ======== Symbolfarbe in Knöpfen (8.10.2026, Emanuel: „hier sehe ich das icon fast nicht“ — Knopf „Üben“ der Empfehlungen auf dem Dashboard) ======== Ursache: Das Liniensymbol trägt außerhalb gefüllter Knöpfe die Akzentfarbe (--v2-accent-soft, Vorgabe „ein klein wenig farbig“); gefüllte Knöpfe stehen in Listen weiter oben und geben dem Symbol die Knopfschrift. Der Übungsknopf .drill-btn (Stil in dashboard.html, violett mit weißer Schrift) stand in keiner Liste: dunkelblaues Symbol auf Violett, gemessen 1,54:1 (hell), im Hover 1,60:1. Geprüft wurden alle Symbole in Knöpfen auf 25 Seiten (auch in verborgenen Dialogen): es war der einzige Knopf unter 3:1. Jetzt: formelle Knopffläche (eine Farbe, flach) statt Violett, Symbol in der Knopfschrift, Hover-Sprache der übrigen Knöpfe (!important, weil der Stil des Knopfs in dashboard.html außerhalb der Ebenen steht). */ @layer vorschau { html.design-formell-v2 .drill-btn { background: var(--v2-accent) !important; background-image: none !important; color: var(--v2-accent-text) !important; -webkit-text-fill-color: var(--v2-accent-text) !important; border: 1px solid transparent !important; border-radius: 4px !important; font-family: var(--v2-font) !important; font-weight: 600 !important; box-shadow: none !important; } html.design-formell-v2 .drill-btn .fv2-ikon { color: inherit !important; } } @layer vorschau { @layer hover { @layer allgemein { @media (hover: hover) { html.design-formell-v2 .drill-btn:is(:hover, :focus-visible) { background: var(--v2-h-fill) !important; border-color: var(--v2-h-fill) !important; color: var(--v2-h-fill-text) !important; -webkit-text-fill-color: var(--v2-h-fill-text) !important; box-shadow: var(--v2-h-schatten) !important; transform: translateY(var(--v2-h-hub)) !important; filter: none !important; } html.design-formell-v2 .drill-btn:is(:hover, :focus-visible) * { color: var(--v2-h-fill-text) !important; -webkit-text-fill-color: var(--v2-h-fill-text) !important; } } } } } /* ======== Ende Symbolfarbe in Knöpfen ======== */