:root { /* Grundpalette */ --bg: #f4f6fb; --surface: #ffffff; --text: #1f2933; --text-muted: #6b7280; --border: #e2e8f0; --primary: #3b6bd6; --primary-dark: #2c53ad; --danger: #e05353; --success: #2fa36b; --warning: #e0912f; --radius: 14px; --shadow: 0 2px 8px rgba(31, 41, 51, 0.08); --shadow-hover: 0 6px 18px rgba(31, 41, 51, 0.14); /* Fach-/Klassen-Farbakzente (per data-Attribut oder inline überschreibbar) */ --accent: #3b6bd6; /* Eingabefelder: eigene Variablen, damit fuer beide Farbschemata dieselbe Regel gilt. Zuvor gab es je eine Regel pro Schema, die sich bei gleicher Spezifitaet gegenseitig ausgehebelt haben — Ergebnis war weisser Hintergrund mit hellem Text. */ --field-bg: #ffffff; --field-text: #1f2933; --field-placeholder: #767f8d; /* Hervorhebung beim Ziehen auf eine Ablageflaeche */ --drop-highlight: #eaf0fc; } /* --- Dunkles Farbschema --------------------------------------------- Wird ueber data-theme="dark" am -Element aktiviert. Da alle Farben ueber Variablen laufen, genuegt das Ueberschreiben hier — die uebrigen Regeln bleiben unveraendert. Die Fach- und Klassenfarben (--accent) kommen weiterhin aus den Daten und werden bewusst nicht angetastet, damit die Farbcodierung erhalten bleibt. ------------------------------------------------------------------ */ [data-theme="dark"] { --bg: #161a21; --surface: #1f242d; --text: #e6e9ef; --text-muted: #9aa4b5; --border: #2f3642; --primary: #6d9bf0; --primary-dark: #5b86d6; --danger: #ef6d6d; --success: #46b981; --warning: #edaa50; --shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.55); --field-bg: #131720; --field-text: #f2f5fa; --field-placeholder: #7c8798; --drop-highlight: #23304a; /* Sorgt dafuer, dass auch die vom Browser gezeichneten Teile — Kalender- und Uhrzeit-Auswahl, Dateiauswahl, Bildlaufleisten — im dunklen Schema erscheinen. */ color-scheme: dark; } [data-theme="dark"] th { background: #262c36; color: var(--text-muted); } [data-theme="dark"] tr:hover td { background: #232935; } [data-theme="dark"] .btn-secondary { background: #2f3642; color: var(--text); } [data-theme="dark"] .btn-secondary:hover { background: #3a4250; } [data-theme="dark"] .flash-success { background: #163a2a; color: #7fd7ab; border-color: #235c42; } [data-theme="dark"] .flash-error { background: #3d1f1f; color: #f0a0a0; border-color: #6b3434; } [data-theme="dark"] .flash-info { background: #1e2c46; color: #9dbcf2; border-color: #2f4670; } [data-theme="dark"] .login-wrap { background: linear-gradient(135deg, #1f2b45 0%, #2c3d63 100%); } [data-theme="dark"] .seat-student { background: #2a313c; border-color: #3a4250; } [data-theme="dark"] .student-pool { background: #1b2029; } [data-theme="dark"] .seat-popover button { background: #262c36; color: var(--text); border-color: var(--border); } [data-theme="dark"] .seat-popover button:hover { background: #313846; } [data-theme="dark"] .seat-inactive { border-color: #333b47; } [data-theme="dark"] code { background: #262c36; padding: 0.1rem 0.3rem; border-radius: 4px; } /* Umschalter im Kopfbereich */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.6rem; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--text-muted); margin-left: 1rem; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Layout --- */ .app-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow); } .app-header .brand { font-weight: 700; font-size: 1.2rem; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; } .app-header nav a { margin-left: 1rem; color: var(--text-muted); font-weight: 500; } .app-header nav a:hover { color: var(--primary); text-decoration: none; } .app-header nav { margin-left: auto; } .container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } h1 { font-size: 1.6rem; margin: 0 0 1rem; } h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; } /* --- Kachel-Grid (Dashboard) --- */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; } .tile { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); border-left: 5px solid var(--accent); transition: transform 0.12s ease, box-shadow 0.12s ease; display: block; color: var(--text); } .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; } .tile .tile-icon { font-size: 1.8rem; margin-bottom: 0.5rem; } .tile .tile-title { font-weight: 600; font-size: 1.05rem; } .tile .tile-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem; } /* --- Cards --- */ .card { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; } /* --- Tabellen --- */ table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); } th { background: #eef2fa; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } tr:last-child td { border-bottom: none; } tr:hover td { background: #f9fbfe; } /* --- Buttons --- */ .btn, button[type="submit"] { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--primary); color: #fff; border: none; border-radius: 10px; padding: 0.6rem 1.1rem; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background 0.12s ease; text-decoration: none; } .btn:hover, button[type="submit"]:hover { background: var(--primary-dark); text-decoration: none; } .btn-secondary { background: #e6ebf5; color: var(--text); } .btn-secondary:hover { background: #d5deef; } .btn-danger { background: var(--danger); } .btn-danger:hover { background: #c33f3f; } .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; border-radius: 8px; } /* --- Farbige Badges (Fächer/Klassen) --- */ .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--accent); } /* --- Formulare --- */ form label { display: block; font-weight: 500; margin: 0.75rem 0 0.25rem; } /* Bewusst nicht auf
beschraenkt: Felder in Tabellen gehoeren ueber das form-Attribut zu einem Formular ausserhalb und waeren sonst ungestylt geblieben. */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"], input[type="file"], select, textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; background: var(--field-bg); color: var(--field-text); font-family: inherit; } input::placeholder, textarea::placeholder { color: var(--field-placeholder); } /* Dateiauswahl: der Knopf wird vom Browser gezeichnet und braucht eigene Farben, sonst bleibt er im dunklen Schema hell. */ input[type="file"]::file-selector-button { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 0.35rem 0.7rem; margin-right: 0.6rem; cursor: pointer; font-family: inherit; } input[type="color"] { width: 60px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--field-bg); cursor: pointer; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 107, 214, 0.15); } form textarea { min-height: 90px; resize: vertical; } /* --- Flash-Meldungen --- */ .flash-success, .flash-error, .flash-info { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 500; } .flash-success { background: #e3f5ec; color: #1c7048; border: 1px solid #b6e2cd; } .flash-error { background: #fbe6e6; color: #a83232; border: 1px solid #f2c2c2; } .flash-info { background: #e6eefb; color: #2c53ad; border: 1px solid #c2d4f2; } /* --- Login --- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b6bd6 0%, #5b8def 100%); padding: 1rem; } .login-card { background: var(--surface); border-radius: 18px; padding: 2.5rem 2rem; box-shadow: 0 12px 40px rgba(0,0,0,0.2); width: 100%; max-width: 380px; } .login-card h1 { text-align: center; color: var(--primary); margin-bottom: 1.5rem; } .login-card button { width: 100%; justify-content: center; margin-top: 1rem; } /* --- Sitzplan --- */ .seating-grid { display: grid; gap: 10px; margin-top: 1rem; } .seat { background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 0.9rem 0.5rem; text-align: center; cursor: pointer; position: relative; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 500; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .seat:hover { border-color: var(--primary); box-shadow: var(--shadow); } .seat-inactive { background: transparent; border: 2px dashed #d2d9e6; cursor: default; color: var(--text-muted); } .seat-empty { color: var(--text-muted); font-style: italic; font-weight: 400; } .seat-badge { position: absolute; top: 4px; right: 6px; font-size: 1rem; } .seat-absence { position: absolute; top: 4px; left: 6px; font-size: 1rem; } .seat-popover { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-hover); padding: 0.5rem; z-index: 30; min-width: 180px; } .seat-popover button { display: block; width: 100%; margin: 3px 0; text-align: left; background: #f4f6fb; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.9rem; } .seat-popover button:hover { background: #e6ebf5; } /* --- Utility --- */ .toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .toolbar .spacer { flex: 1; } .text-muted { color: var(--text-muted); } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .inline-form { display: inline; } /* --- Tablet-Optimierung --- */ @media (max-width: 900px) { .container { padding: 1rem; } .app-header { padding: 0.6rem 1rem; } .app-header nav a { margin-left: 0.6rem; font-size: 0.9rem; } th, td { padding: 0.55rem 0.6rem; font-size: 0.9rem; } .btn, button[type="submit"] { padding: 0.7rem 1.2rem; } .seat { min-height: 60px; padding: 0.6rem 0.3rem; } } @media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr 1fr; } .app-header nav { display: none; } /* Einfache Auflistungstabellen (eine Zeile = ein Datensatz, z. B. Schülerliste) als Karten stapeln — funktioniert gut, weil jede Karte für sich verständlich bleibt. */ table:not(.no-stack) { display: block; } table:not(.no-stack) thead { display: none; } table:not(.no-stack) tbody, table:not(.no-stack) th, table:not(.no-stack) td, table:not(.no-stack) tr { display: block; } table:not(.no-stack) tr { margin-bottom: 0.75rem; border-radius: var(--radius); overflow: hidden; } table:not(.no-stack) td { border: none; border-bottom: 1px solid var(--border); } /* Echte Matrix-Tabellen (Wochenplan, Notentabellen, Klassenarbeits- Ergebnisse, …) NICHT stapeln: dabei würde die Kopfzeile verschwinden und mit ihr die Zuordnung, welche Zahl zu welchem Tag/welcher Kategorie gehört. Stattdessen horizontal scrollen, mit fixierter erster Spalte als Orientierung (siehe unten). */ table.no-stack { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.no-stack thead, table.no-stack tbody, table.no-stack tr, table.no-stack th, table.no-stack td { display: revert; } table.no-stack th:first-child, table.no-stack td:first-child { position: sticky; left: 0; background: var(--surface); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06); } table.no-stack .break-row td:first-child { background: #f2f4f8; } [data-theme="dark"] table.no-stack .break-row td:first-child { background: #1b2029; } } /* --- Sitzplan: Drag & Drop --- */ .seat-student { display: inline-block; background: #eef2fa; border: 1px solid #c9d6ee; border-radius: 8px; padding: 0.3rem 0.5rem; cursor: grab; font-size: 0.85rem; font-weight: 500; user-select: none; line-height: 1.2; } .seat-student:active { cursor: grabbing; } .seat-student.dragging { opacity: 0.4; } .seat-dragover { border-color: var(--primary); background: var(--drop-highlight); box-shadow: 0 0 0 3px rgba(59, 107, 214, 0.18); } .student-pool { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 60px; padding: 0.75rem; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg); } .student-pool.pool-dragover { border-color: var(--primary); background: var(--drop-highlight); } .pool-item { background: var(--surface); } /* --- Checkboxen in Listen etwas groesser (Tablet-Bedienung) --- */ input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; } /* Auf Tablets grosszuegigere Ziehflaechen */ @media (max-width: 900px) { .seat-student { padding: 0.4rem 0.6rem; font-size: 0.9rem; } .student-pool { gap: 0.6rem; } input[type="checkbox"] { width: 24px; height: 24px; } } /* --- Popover: Noteneingabe --- */ .popover-separator { margin: 0.5rem 0 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .grade-row { margin-bottom: 0.4rem; } .grade-row-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.15rem; } .grade-buttons { display: flex; gap: 3px; } .grade-button { flex: 1; padding: 0.4rem 0 !important; text-align: center !important; font-weight: 600; margin: 0 !important; } .seat-grade { position: absolute; bottom: 3px; right: 5px; font-size: 0.75rem; font-weight: 700; background: var(--primary); color: #fff; border-radius: 6px; padding: 0 4px; } /* --- Wochenplan --- */ .timetable-wrap { overflow-x: auto; } .timetable { min-width: 760px; } .timetable td { vertical-align: top; padding: 0.4rem; } .timetable .break-row td { background: #f2f4f8; padding: 0.25rem 0.4rem; } [data-theme="dark"] .timetable .break-row td { background: #1b2029; } .timetable .today-column { background: #eaf0fc; } [data-theme="dark"] .timetable .today-column { background: #23304a; } .lesson { border-left: 4px solid var(--accent, #3b6bd6); background: var(--bg); border-radius: 8px; padding: 0.4rem 0.5rem; } [data-theme="dark"] .lesson { background: #232935; } .lesson-title { font-weight: 600; font-size: 0.9rem; } /* Entfall: ausgegraut und durchgestrichen statt der normalen Fachfarbe, damit auf einen Blick klar ist, dass die Stunde nicht stattfindet. */ .lesson-cancelled { opacity: 0.55; } .lesson-cancelled .lesson-title { text-decoration: line-through; } .lesson-stats { display: flex; gap: 4px; margin-top: 0.3rem; } .lesson-stats .dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0 4px; } .lesson-links { margin-top: 0.3rem; display: flex; gap: 0.5rem; } .lesson-links a { font-size: 0.75rem; } @media (max-width: 900px) { .timetable .lesson-links { display: none; } } /* --- Direkt bearbeitbare Tabellen (Stundenraster) --- */ table input[type="text"], table input[type="time"], table input[type="number"] { padding: 0.35rem 0.5rem; font-size: 0.9rem; margin: 0; } table td > form.inline-form { margin: 0; } /* --- Wochenplan: Aktionen an der Stunde --- */ .lesson-actions { display: flex; gap: 3px; margin-top: 0.35rem; } .lesson-actions .btn { padding: 0.15rem 0.4rem; font-size: 0.75rem; } .lesson-actions form { margin: 0; } /* --- Wochenplan: Bearbeitungsmodus --------------------------------- Die Bedienelemente an den Stunden und das Eingabeformular sind standardmaessig ausgeblendet. Bei elf Stunden mal fuenf Tagen stuenden sonst in bis zu 55 Zellen Knoepfe, obwohl der Plan im Alltag gelesen und nur selten geaendert wird. ------------------------------------------------------------------ */ .lesson-actions, .edit-only { display: none; } .timetable-editing .lesson-actions { display: flex; } .timetable-editing .edit-only { display: block; } /* Im Bearbeitungsmodus sichtbar machen, dass die Ansicht anders ist */ .timetable-editing .timetable td { outline: 1px dashed transparent; } .timetable-editing .lesson { box-shadow: var(--shadow); } #edit-toggle:not(.btn-secondary) { background: var(--success); color: #fff; } /* Leere Stunden: im Leseblick nur ein Strich, im Bearbeitungsmodus ein Knopf, der das Formular fuer genau diese Stunde vorfuellt. */ .lesson-placeholder { display: none; } .timetable-editing .lesson-placeholder { display: inline-block; width: 100%; padding: 0.3rem; font-size: 0.75rem; opacity: 0.65; } .timetable-editing .lesson-placeholder:hover { opacity: 1; } .timetable-editing .lesson-empty { display: none; } /* --- Wochenplan: Doppelstunden ------------------------------------ Damit sich der Block ueber die volle Hoehe beider Zeilen zieht, braucht die Zelle eine Hoehenangabe — height: 1px genuegt, der Tabelleninhalt streckt die Zelle ohnehin auf. Ohne diese Angabe bezieht sich das height: 100% im Inneren auf nichts und der Block sitzt klein in der Mitte. ------------------------------------------------------------------ */ .timetable td { height: 1px; } .timetable td.double-lesson { vertical-align: top; } .timetable td.double-lesson .lesson { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; border-left-width: 6px; } .timetable td.double-lesson .lesson-links, .timetable td.double-lesson .lesson-actions { margin-top: auto; } .lesson-plans { display: inline-flex; gap: 3px; flex-wrap: wrap; } /* --- Wochenplan: Zeitleiste --------------------------------------- */ .now-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; margin-top: 0.75rem; border-radius: 10px; background: var(--bg); border-left: 4px solid var(--success); } [data-theme="dark"] .now-bar { background: #232935; } /* Waagerechte Linie an der aktuellen Uhrzeit. Position wird per JavaScript aus der laufenden Stunde und der vergangenen Zeit berechnet — im Stylesheet ist nur das Aussehen festgelegt. */ .timetable-wrap { position: relative; } .now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); pointer-events: none; z-index: 5; } .now-line::before { content: attr(data-time); position: absolute; left: 0; top: -9px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 6px; } .now-dot, .now-marker { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(47, 163, 107, 0.6); animation: now-pulse 2.2s infinite; } .now-marker { position: absolute; left: 6px; top: 50%; margin-top: -5px; } .slot-label { position: relative; } /* Zeigt ohne Farbe allein, welche Zeile laeuft */ tr[data-current-slot] td { background: rgba(47, 163, 107, 0.10); } tr[data-current-slot] .slot-label { font-weight: 700; } @keyframes now-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(47, 163, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0); } } /* Bewegung abschalten, wenn das System es wuenscht */ @media (prefers-reduced-motion: reduce) { /* Waagerechte Linie an der aktuellen Uhrzeit. Position wird per JavaScript aus der laufenden Stunde und der vergangenen Zeit berechnet — im Stylesheet ist nur das Aussehen festgelegt. */ .timetable-wrap { position: relative; } .now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); pointer-events: none; z-index: 5; } .now-line::before { content: attr(data-time); position: absolute; left: 0; top: -9px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 6px; } .now-dot, .now-marker { animation: none; } } .is-break td { opacity: 0.75; } /* --- Sitzplan: Bearbeitungsmodus --- */ .seating-edit-only { display: none; } .seating-editing .seating-edit-only { display: block; } #seating-edit-toggle:not(.btn-secondary) { background: var(--success); color: #fff; } .seating-toolbar { position: sticky; top: 60px; z-index: 10; background: var(--bg); padding: 0.5rem 0; margin-bottom: 0.5rem; } .assignment-select { width: auto; min-width: 200px; max-width: 320px; } /* Ohne Bearbeitungsmodus mehr Platz fuer die Plaetze */ .seating-grid { gap: 10px; } body:not(.seating-editing) .seat { min-height: 86px; } body:not(.seating-editing) .seat-student { cursor: pointer; font-size: 0.9rem; } /* --- Schulleitung: Notenverteilung --- */ .distribution { display: flex; align-items: flex-end; gap: 4px; height: 46px; } .distribution-step { flex: 1; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .distribution-bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; } .distribution-label { font-size: 0.7rem; color: var(--text-muted); } /* --- Abhaklisten: Erledigte absetzen ------------------------------ Durchgestrichen und blasser, aber weiterhin voll bedienbar — ein versehentliches Haekchen muss sich zuruecknehmen lassen. ------------------------------------------------------------------ */ tr.is-done td { opacity: 0.55; } tr.is-done td:nth-child(2) { text-decoration: line-through; } tr.is-done .check-done { opacity: 1; } tr.is-done td input { opacity: 1; } tr[data-student-id] { transition: opacity 0.15s ease; } /* --- Sitzplan: mehrere Vermerke nebeneinander --------------------- Vorher lagen alle Markierungen an derselben Stelle uebereinander. Sobald zwei Vermerke zusammenkommen, sah man nur noch den letzten. ------------------------------------------------------------------ */ .seat { padding-top: 1.4rem; } .seat-badge { position: static; font-size: 0.95rem; line-height: 1; } .seat-marks { position: absolute; top: 3px; left: 4px; right: 4px; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; pointer-events: none; } .seat-grade { position: static; font-size: 0.7rem; padding: 0 4px; } /* --- Wochenplan: Ferien --- */ .timetable th.holiday-column { background: #e8f4f4; } [data-theme="dark"] .timetable th.holiday-column { background: #1e3435; } .timetable td.holiday-cell { background: repeating-linear-gradient( 45deg, transparent, transparent 6px, rgba(59, 163, 163, 0.10) 6px, rgba(59, 163, 163, 0.10) 12px ); text-align: center; vertical-align: middle; } /* --- Schriftliche Arbeiten --- */ .exam-edit-only { display: none; } .exam-editing .exam-edit-only { display: block; } #exam-edit-toggle:not(.btn-secondary) { background: var(--success); color: #fff; } .field-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(224, 83, 83, 0.18) !important; } /* --- Eigene Eintragsarten: Symbol-Auswahl --- */ .icon-picker { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.5rem; } .icon-picker-btn { font-size: 1.2rem; line-height: 1; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; } .icon-picker-btn:hover { background: var(--drop-highlight); border-color: var(--primary); } /* --- Wochenplan: Schnelleintrag-Modal (ohne Sitzplan) --- */ .quick-entry-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* "display: flex" oben gewinnt sonst gegen die Browser-Standardregel fuer [hidden] (gleiche Spezifitaet, meine Regel kommt spaeter) — das Modal war dadurch nie wirklich versteckt, auch Schliessen (setzt nur das hidden-Attribut) hatte keine Wirkung. Explizit erzwungen. */ .quick-entry-backdrop[hidden] { display: none; } .quick-entry-modal { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-hover); padding: 1.25rem; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; } .quick-entry-modal #qe-entry-types button, .quick-entry-modal #qe-grade-categories button { background: #f4f6fb; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.9rem; margin: 3px 3px 3px 0; } .quick-entry-modal #qe-entry-types button:hover, .quick-entry-modal #qe-grade-categories button:hover { background: #e6ebf5; } [data-theme="dark"] .quick-entry-modal #qe-entry-types button, [data-theme="dark"] .quick-entry-modal #qe-grade-categories button { background: #262c36; color: var(--text); border-color: var(--border); } [data-theme="dark"] .quick-entry-modal #qe-entry-types button:hover, [data-theme="dark"] .quick-entry-modal #qe-grade-categories button:hover { background: #313846; }