/* Notenverwaltung – eigenes Stylesheet, kein CDN erforderlich. */ :root { color-scheme: light dark; --bg: #f7f7f9; --bg-card: #ffffff; --bg-subtle: #fafafa; --bg-header: #f1f3f5; --bg-input: #ffffff; --bg-tint: #e3f2fd; --bg-tint-2: #f1f8ff; --text: #1a1a1a; --text-muted: #666666; --on-dark: #ffffff; --border: #e0e0e0; --border-strong: #cccccc; --border-subtle: #eeeeee; --link: #0b66c2; --primary: #1d3557; --primary-hover: #15243f; --topbar-link: #d8e3f0; /* Wo --primary NICHT als Füllfarbe (mit hellem --on-dark-Text darauf), sondern selbst als Schriftfarbe auf einer Karte/transparent verwendet wird (z. B. unausgewählte Reiter-Buttons) -- im Hellmodus identisch zu --primary, im Dunkelmodus (siehe unten) heller, weil das dunkle Blau von --primary dort auf dunklem Hintergrund kaum lesbar ist. */ --primary-text: var(--primary); --accent: #0b66c2; --accent-hover: #084e96; --danger: #e63946; --danger-hover: #b32b35; --shadow: rgba(0, 0, 0, 0.05); --shadow-strong: rgba(0, 0, 0, 0.1); --flash-success-bg: #d4edda; --flash-success-text: #155724; --flash-success-border: #c3e6cb; --flash-error-bg: #f8d7da; --flash-error-text: #721c24; --flash-error-border: #f5c6cb; --flash-info-bg: #d1ecf1; --flash-info-text: #0c5460; --flash-info-border: #bee5eb; } /* * Drei Zustände: "System" folgt der Betriebssystem-Einstellung (kein * data-theme-Attribut → die @media-Regel greift), "Hell"/"Dunkel" sind * eine bewusste Wahl über den Umschalter im Kopfbereich (setzt * data-theme="light"/"dark" auf , siehe partials/layout.ejs) und * gewinnt in beide Richtungen — auch wenn das System das Gegenteil sagt. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14181f; --bg-card: #1c222c; --bg-subtle: #20262f; --bg-header: #232a35; --bg-input: #262d38; --bg-tint: #1e3348; --bg-tint-2: #1a2733; --text: #e6e8eb; --text-muted: #9aa4b2; --border: #333a45; --border-strong: #4a5261; --border-subtle: #2b323d; --link: #6cb2f4; --primary: #2c4a73; --primary-hover: #3a5c8c; --topbar-link: #c3d5e8; --primary-text: var(--accent); --accent: #4a9eef; --accent-hover: #6cb2f4; --danger: #e35d68; --danger-hover: #ef7b85; --shadow: rgba(0, 0, 0, 0.35); --shadow-strong: rgba(0, 0, 0, 0.5); --flash-success-bg: #16341f; --flash-success-text: #8fd19e; --flash-success-border: #2f5c3a; --flash-error-bg: #3a1a1e; --flash-error-text: #f5a3ab; --flash-error-border: #5c2932; --flash-info-bg: #16303a; --flash-info-text: #8fd0e0; --flash-info-border: #1f4a58; } } :root[data-theme="dark"] { --bg: #14181f; --bg-card: #1c222c; --bg-subtle: #20262f; --bg-header: #232a35; --bg-input: #262d38; --bg-tint: #1e3348; --bg-tint-2: #1a2733; --text: #e6e8eb; --text-muted: #9aa4b2; --border: #333a45; --border-strong: #4a5261; --border-subtle: #2b323d; --link: #6cb2f4; --primary: #2c4a73; --primary-hover: #3a5c8c; --topbar-link: #c3d5e8; --primary-text: var(--accent); --accent: #4a9eef; --accent-hover: #6cb2f4; --danger: #e35d68; --danger-hover: #ef7b85; --shadow: rgba(0, 0, 0, 0.35); --shadow-strong: rgba(0, 0, 0, 0.5); --flash-success-bg: #16341f; --flash-success-text: #8fd19e; --flash-success-border: #2f5c3a; --flash-error-bg: #3a1a1e; --flash-error-text: #f5a3ab; --flash-error-border: #5c2932; --flash-info-bg: #16303a; --flash-info-text: #8fd0e0; --flash-info-border: #1f4a58; } /* Umschalter im Kopfbereich (System/Hell/Dunkel). */ .theme-switch { display: flex; gap: 0.15rem; background: rgba(255,255,255,0.08); border-radius: 6px; padding: 0.15rem; } .theme-switch button { background: transparent; border: none; border-radius: 4px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--topbar-link); } .theme-switch button.active { background: rgba(255,255,255,0.18); color: var(--on-dark); } .theme-switch button:hover { background: rgba(255,255,255,0.14); } * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { color: var(--text); } h1 { font-size: 1.6rem; margin: 1rem 0; } h1 small { font-weight: 400; color: var(--text-muted); font-size: 0.7em; } h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; border-bottom: 2px solid var(--border); padding-bottom: 0.3rem; } h3 { font-size: 1.1rem; margin: 0.5rem 0; } .container { max-width: 1100px; margin: 1rem auto; padding: 0 1rem; } .topbar { background: var(--primary); color: var(--on-dark); box-shadow: 0 2px 4px var(--shadow-strong); } .topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 1rem; height: 56px; } .topbar .brand { color: var(--on-dark); font-weight: 600; font-size: 1.1rem; } .topbar a { color: var(--topbar-link); } .topbar a:hover { color: var(--on-dark); } .topbar .nav { display: flex; gap: 1rem; flex: 1; } .topbar .userbox { display: flex; align-items: center; gap: 0.5rem; } .topbar .role { background: var(--danger); color: var(--on-dark); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.75rem; } .badge { display: inline-block; color: #fff; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.75rem; } .topbar .logout { font-size: 0.9rem; } /* Menü-Button (☰): nur sichtbar, sobald die Navigation nicht mehr in eine Zeile passt (siehe Media Query unten) -- ohne Nutzerkonto (Login/Setup- Seiten) gibt es weder Nav noch Button. */ .nav-toggle { display: none; background: transparent; border: none; color: var(--on-dark); font-size: 1.3rem; line-height: 1; padding: 0.25rem 0.4rem; cursor: pointer; border-radius: 4px; } .nav-toggle:hover { background: rgba(255,255,255,0.12); } /* Die vollständige Nav (bis zu 10 Links für den Admin) plus Userbox braucht in einer Zeile ca. 1570px -- deutlich mehr als ein Smartphone, aber auch mehr als viele Laptop-Displays. Unterhalb der Grenze klappt ein Menü-Button die Navigation auf, statt sie über den Bildschirmrand hinaus laufen zu lassen (vorher: die ganze Seite bekam dadurch horizontales Scrollen, nicht nur die Kopfzeile). */ @media (max-width: 1600px) { .topbar-inner { flex-wrap: wrap; height: auto; padding: 0.6rem 1rem; row-gap: 0.4rem; } .nav-toggle { display: inline-block; } .topbar .nav, .topbar .userbox { flex-basis: 100%; display: none; } .topbar-inner.nav-open .nav, .topbar-inner.nav-open .userbox { display: flex; } .topbar .nav { flex-direction: column; gap: 0; order: 3; } .topbar .nav a { padding: 0.6rem 0.2rem; border-top: 1px solid rgba(255,255,255,0.15); } .topbar .userbox { order: 4; flex-wrap: wrap; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.15); } } .flash { padding: 0.75rem 1rem; border-radius: 4px; margin: 0.5rem 1rem; } .flash-success { background: var(--flash-success-bg); color: var(--flash-success-text); border: 1px solid var(--flash-success-border); } .flash-error, .err { background: var(--flash-error-bg); color: var(--flash-error-text); border: 1px solid var(--flash-error-border); padding: 0.5rem 0.75rem; border-radius: 4px; } /* Eingabefeld, dessen automatisches Speichern fehlgeschlagen ist (Grund im title). */ input.speicherfehler { background: var(--flash-error-bg); outline: 2px solid var(--flash-error-border); } .flash-info { background: var(--flash-info-bg); color: var(--flash-info-text); border: 1px solid var(--flash-info-border); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 1rem 0; } .kpi { background: var(--bg-card); padding: 1rem; border-radius: 6px; box-shadow: 0 1px 3px var(--shadow); text-align: center; } .kpi-val { font-size: 1.8rem; font-weight: 600; color: var(--primary-text); } .kpi-lbl { font-size: 0.85rem; color: var(--text-muted); } table.data, table.tafel { width: 100%; border-collapse: collapse; background: var(--bg-card); margin: 0.5rem 0 1rem; box-shadow: 0 1px 3px var(--shadow); } table.data th, table.data td, table.tafel th, table.tafel td { padding: 0.5rem 0.75rem; border: 1px solid var(--border); text-align: left; vertical-align: top; } table.data thead th, table.tafel thead th { background: var(--bg-header); font-weight: 600; } /* Breite Tabellen (viele Spalten, z. B. Notentafeln oder Fehlzeiten mit zwei Schulen) laufen auf schmalen Bildschirmen sonst über den Bildschirm- rand hinaus und reißen dabei die ganze Seite in die Breite. Die Tabelle selbst scrollt jetzt seitlich (die Kopfzeile bleibt oben stehen, siehe überall zusammen gehörende thead/tbody -- die bleiben trotz display:block auf dem intakt, weil sie selbst ihre table-*-Anzeige behalten). */ table.data, table.tafel { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data tbody tr:nth-child(even) { background: var(--bg-subtle); } table.data .name, table.tafel .name { white-space: nowrap; } table.tafel input.punkt { width: 50px; padding: 0.2rem; border: 1px solid var(--border-strong); border-radius: 3px; text-align: center; background: var(--bg-input); color: var(--text); } /* Punkteingabe: keine Spinner-Pfeile, Punkte werden direkt getippt. */ table.tafel input.punkt::-webkit-outer-spin-button, table.tafel input.punkt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } table.tafel input.punkt { -moz-appearance: textfield; } table.tafel .note-cell, table.tafel .gesamt-cell { text-align: center; font-weight: 600; background: var(--bg-header); min-width: 40px; } table.tafel .klausur-col, table.tafel .ul-col { background: var(--bg-tint); text-align: center; } table.tafel .aufgabe-head { background: var(--bg-tint-2); font-size: 0.8rem; } table.tafel .gesamt-cell { background: var(--primary); color: var(--on-dark); } table.tafel .gesamt-cell.nb { background: var(--danger); } /* Datumstabelle (Unterrichtsleistung): kann viele Termine/Spalten haben. */ .tabelle-scroll { overflow-x: auto; } table.tafel input.note-datum { width: 50px; padding: 0.2rem; border: 1px solid var(--border-strong); border-radius: 3px; text-align: center; background: var(--bg-input); color: var(--text); } table.tafel input.note-datum::-webkit-outer-spin-button, table.tafel input.note-datum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } table.tafel input.note-datum { -moz-appearance: textfield; } table.tafel .datum-head { white-space: nowrap; font-size: 0.8rem; text-align: center; } table.tafel .datum-head form { display: inline; } table.tafel .datum-head button { padding: 0 0.3rem; font-size: 0.75rem; } table.tafel .datums-durchschnitt { text-align: center; font-weight: 600; background: var(--bg-header); min-width: 40px; } .tag { background: var(--primary); color: var(--on-dark); border: none; border-radius: 50%; padding: 0.2rem 0.4rem; cursor: pointer; font-size: 0.8rem; margin: 0 2px; } .tag:hover { background: var(--danger); } form.card, .card { background: var(--bg-card); padding: 1rem; border-radius: 6px; box-shadow: 0 1px 3px var(--shadow); margin: 0.5rem 0; } form.card label, .card label { display: block; margin: 0.5rem 0; font-weight: 500; } form.card input[type=text], form.card input[type=email], form.card input[type=password], form.card input[type=number], form.card select, form.card textarea, .card input, .card select, .card textarea { display: block; width: 100%; padding: 0.5rem; border: 1px solid var(--border-strong); border-radius: 4px; font: inherit; background: var(--bg-input); color: var(--text); } form.card input[type=checkbox], .card input[type=checkbox] { width: auto; } form.card textarea, .card textarea { min-height: 100px; font-family: monospace; } details.card > summary { cursor: pointer; font-size: 1.1rem; font-weight: 600; margin: -1rem -1rem 0.75rem; padding: 1rem; } details.card[open] > summary { margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-subtle); } button, .btn { display: inline-block; padding: 0.5rem 1rem; background: var(--primary); color: var(--on-dark); border: none; border-radius: 4px; cursor: pointer; font: inherit; text-decoration: none; } button:hover, .btn:hover { background: var(--primary-hover); } button.danger { background: var(--danger); } button.danger:hover { background: var(--danger-hover); } .btn { background: var(--accent); } .btn:hover { background: var(--accent-hover); } form.inline { display: inline-block; margin: 0; } form.inline input, form.inline select { width: auto; display: inline-block; margin-right: 0.5rem; } /* Zeile mit Navigations-/Aktionslinks direkt unter der Überschrift (z. B. "← Zurück", "Sitzplan", "Notenbesprechung starten") -- vorher reiner, leicht zu übersehender Fließtext mit "·" als Trenner, jetzt Buttons (.btn, wie an anderer Stelle in der App bereits für Links verwendet) in einer Reihe mit Abstand statt Trennzeichen. */ .kopf-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.75rem 0; } .kopf-aktionen form.inline { margin: 0; } /* "Neuen Kurs anlegen": Kursname etwas breiter/höher, Ausgangsklasse-Auswahl etwas höher -- ohne das griffen nur die Browser-Standardgrößen, weil dieses (bewusst kompakte, inline aufgebaute) Formular nicht in eine .card steckt. */ #panel-kurs-anlegen input[type=text] { padding: 0.55rem 0.75rem; width: 16rem; max-width: 100%; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg-input); color: var(--text); font: inherit; } #panel-kurs-anlegen select { padding: 0.45rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg-input); color: var(--text); font: inherit; } .right { float: right; } .hint { color: var(--text-muted); font-size: 0.9rem; } .hj-tabs { display: flex; gap: 0.5rem; margin: 0.5rem 0; } .hj-tab { padding: 0.4rem 1rem; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 4px 4px 0 0; color: var(--text); } .hj-tab.active { background: var(--primary); color: var(--on-dark); border-color: var(--primary); } .reiter { display: flex; gap: 0.75rem; margin: 1rem 0 0; flex-wrap: wrap; } .reiter button { background: var(--bg-card); color: var(--primary-text); border: 1px solid var(--primary-text); } .reiter button.active { background: var(--primary); color: var(--on-dark); } .reiter-panel { display: none; } .reiter-panel.active { display: block; } /* Unter-Reiter (je Klausur/Zusatzleistung innerhalb eines Hauptreiters) -- optisch etwas zurückhaltender als die oberste Reiter-Ebene. */ .reiter.unter-reiter { margin-top: 0.75rem; margin-bottom: 0.75rem; } .reiter.unter-reiter button { font-size: 0.85rem; padding: 0.35rem 0.6rem; } .reiter-panel.unter-panel { margin-top: 0; } /* Noteneingabe aufgeräumt: nur "Notenübersicht" bleibt in der obersten Reiter-Reihe immer sichtbar, die übrigen (selten gebrauchten) Reiter stecken in einem Dropdown-Menü hinter "⋮ Mehr". */ .reiter-mehr-wrapper { position: relative; display: inline-block; } .reiter-mehr-toggle { background: transparent; border: 1px dashed var(--primary-text); } .reiter-mehr-menu { display: none; flex-direction: column; gap: 0.15rem; position: absolute; top: 100%; left: 0; margin-top: 0.4rem; z-index: 20; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 4px 16px var(--shadow); padding: 0.4rem; } .reiter-mehr-wrapper.offen .reiter-mehr-menu { display: flex; } .reiter-mehr-menu button { background: transparent; color: var(--text); border: none; text-align: left; padding: 0.5rem 0.6rem; border-radius: 4px; width: 100%; } .reiter-mehr-menu button:hover { background: var(--bg-tint); } .reiter-mehr-menu button.active { background: var(--primary); color: var(--on-dark); } /* Notizen-Dialog (Klassenleitungsseite/Fehlzeiten): natives