/* Zentrale Farbschemata Umschaltung per JavaScript: */ :root, html[data-theme="light"] { color-scheme: light; --bg: #f6f7fb; --panel: #ffffff; --panel-soft: #f9fafb; --panel-muted: #f3f4f6; --text: #1f2937; --muted: #6b7280; --line: #e5e7eb; --line-strong: #d0d7e2; --accent: #1f6feb; --accent-text: #ffffff; --link: #1f6feb; --input-bg: #ffffff; --shadow: 0 10px 24px rgba(15, 23, 42, 0.06); --danger-bg: #fff1f2; --danger-line: #fecaca; --badge-bg: #f6f8fb; --badge-text: #344054; --ok-bg: #ecfdf3; --ok-text: #067647; --focus: rgba(31, 111, 235, 0.28); --filter-bg: #eef4ff; --filter-text: #0f3d7a; } html[data-theme="dark"] { color-scheme: dark; --bg: #1e1f22; --panel: #2b2d30; --panel-soft: #313338; --panel-muted: #3a3d42; --text: #d7dae0; --muted: #9aa0aa; --line: #44484f; --line-strong: #5b616b; --accent: #4c8dff; --accent-text: #ffffff; --link: #7ab2ff; --input-bg: #24262a; --shadow: 0 10px 24px rgba(0, 0, 0, 0.25); --danger-bg: #3a2226; --danger-line: #7f1d1d; --badge-bg: #34373c; --badge-text: #d7dae0; --ok-bg: #173829; --ok-text: #7ee2a8; --focus: rgba(76, 141, 255, 0.35); --filter-bg: #1f365c; --filter-text: #d7e6ff; } html[data-theme="darcula"] { color-scheme: dark; --bg: #2b2b2b; --panel: #3c3f41; --panel-soft: #313335; --panel-muted: #4e5254; --text: #a9b7c6; --muted: #87939f; --line: #55595c; --line-strong: #6b7074; --accent: #ffc66d; --accent-text: #2b2b2b; --link: #6897bb; --input-bg: #2b2b2b; --shadow: 0 10px 24px rgba(0, 0, 0, 0.28); --danger-bg: #4b2f2f; --danger-line: #a14f4f; --badge-bg: #4e5254; --badge-text: #d6dbe0; --ok-bg: #294436; --ok-text: #a5c261; --focus: rgba(255, 198, 109, 0.36); --filter-bg: #5a4528; --filter-text: #ffe0a3; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); } a { color: inherit; text-decoration: none; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 28px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; } .brand { font-weight: 700; } nav { display: flex; gap: 10px; flex-wrap: wrap; } nav a, .button, button { border: 1px solid var(--line); background: var(--accent); color: var(--accent-text); padding: 8px 12px; border-radius: 8px; cursor: pointer; font: inherit; } nav a { background: var(--panel-soft); color: var(--text); } .button.secondary { background: var(--panel-soft); color: var(--text); } .container { max-width: 1180px; margin: 0 auto; padding: 28px; } .hero, .note, .card, table, .search { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; } .hero, .note { padding: 24px; margin-bottom: 20px; } h1 { margin: 0 0 18px; } h2 { margin-top: 0; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .card { padding: 20px; display: flex; flex-direction: column; gap: 8px; } .card span { color: var(--muted); } .search { display: flex; gap: 10px; padding: 14px; margin-bottom: 16px; } .search input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; } table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } th { background: var(--panel-soft); font-weight: 650; } tr:last-child td { border-bottom: 0; } .num { text-align: right; font-variant-numeric: tabular-nums; } .empty { text-align: center; color: var(--muted); padding: 28px; } @media (max-width: 720px) { .topbar { align-items: flex-start; flex-direction: column; } .container { padding: 16px; } .search { flex-direction: column; } table { display: block; overflow-x: auto; } } .search-form { display: flex; gap: 10px; padding: 14px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; } .search-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; } .button-secondary { border: 1px solid var(--line); background: var(--panel-soft); color: var(--text); padding: 8px 12px; border-radius: 8px; display: inline-flex; align-items: center; } .table-wrap { width: 100%; overflow-x: auto; } .grid { display: grid; gap: 16px; margin-bottom: 16px; } .grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; } dl.wide { grid-template-columns: 190px 1fr; } dt { color: var(--muted); } dd { margin: 0; } .hint { color: var(--muted); font-size: 0.95rem; } .preline { white-space: pre-line; } .card + .card, section.card { margin-bottom: 16px; } td a, p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 720px) { .search-form { flex-direction: column; } dl, dl.wide { grid-template-columns: 1fr; } dt { font-weight: 650; } } .title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .title-row h1 { margin: 0; } .edit-form { display: flex; flex-direction: column; gap: 16px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .form-grid label, .edit-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 650; } .form-grid label.wide { grid-column: 1 / -1; } .form-grid input, .form-grid select, .edit-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 400; background: var(--input-bg); color: var(--text); } .form-grid input:disabled { background: var(--panel-muted); color: var(--muted); } .checkline { flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px !important; padding-top: 26px; } .checkline input { width: auto !important; } .form-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; } .alert { border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; border: 1px solid var(--line); background: var(--panel); } .alert.error { border-color: var(--danger-line); background: var(--danger-bg); } .alert ul { margin: 8px 0 0 20px; } @media (max-width: 720px) { .title-row { align-items: flex-start; flex-direction: column; } .form-actions { flex-direction: column; align-items: stretch; } .form-actions button, .form-actions a { justify-content: center; text-align: center; } } .search-hint { color: var(--muted); font-size: 0.92rem; align-self: center; white-space: nowrap; } /* Buchungsblatt Elternkonto */ .title-row.compact { align-items: center; gap: 1rem; } .badge { display: inline-block; border: 1px solid var(--line-strong); background: var(--badge-bg); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.9rem; color: var(--badge-text); } .konto-card { overflow-x: auto; } .konto-table { min-width: 820px; } .konto-table th, .konto-table td { white-space: nowrap; } .konto-table tbody td:nth-child(2) { white-space: normal; min-width: 170px; } .konto-table tfoot td { border-top: 2px solid var(--line-strong); background: var(--panel-soft); } .muted-num { color: var(--muted); } .saldo { font-size: 1.08rem; } .action-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; } .button.secondary:disabled, button.button.secondary:disabled { opacity: 0.65; cursor: not-allowed; } /* Kleine Fachhilfen / Tooltips */ .code-pill { display: inline-block; border: 1px solid var(--line-strong); background: var(--panel-soft); border-radius: 6px; padding: 0.1rem 0.4rem; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 0.92rem; line-height: 1.4; } .small-muted { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; } /* Eltern-Detail: zugeordnete Schüler */ .muted { color: var(--muted); } .small { font-size: 0.86rem; } .ok-badge { background: var(--ok-bg); color: var(--ok-text); } .muted-badge { background: var(--panel-muted); color: var(--muted); } .inactive-row { opacity: 0.72; } .sub-row td { border-top: 0; padding-top: 0.25rem; background: var(--panel-soft); } .pill { display: inline-block; margin: 0.1rem 0.25rem 0.1rem 0; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel-soft); color: var(--badge-text); font-size: 0.86rem; } /* Robuste Such- und Filterleisten */ .search-form { align-items: center; flex-wrap: wrap; } .search-form input { min-width: min(100%, 320px); } .search-form select { padding: 10px 38px 10px 12px; border: 2px solid var(--line-strong); border-radius: 8px; font: inherit; font-weight: 650; background: var(--filter-bg); color: var(--filter-text); min-width: 170px; } .search-form input:focus, .search-form select:focus { outline: 3px solid var(--focus); border-color: var(--accent); } .search-form .search-hint { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.7rem; } .search-form button, .search-form .button-secondary { min-height: 42px; } .filter-label { color: var(--muted); font-size: 0.9rem; font-weight: 650; margin-left: 0.25rem; } @media (max-width: 720px) { .search-form input, .search-form select, .search-form button, .search-form .button-secondary { width: 100%; } .filter-label { width: 100%; margin-left: 0; } } /* Theme-Umschalter */ .theme-switcher { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; } .theme-switcher select { border: 1px solid var(--line); background: var(--input-bg); color: var(--text); border-radius: 8px; padding: 7px 10px; font: inherit; } .card, .hero, .note, .search, .search-form, table { box-shadow: var(--shadow); } .form-grid input, .form-grid select, .edit-form textarea, .search input, .search-form input { background: var(--input-bg); color: var(--text); } .form-grid input:disabled { background: var(--panel-muted); color: var(--muted); } td a, p a { color: var(--link); } @media (max-width: 720px) { .theme-switcher { width: 100%; justify-content: space-between; } .theme-switcher select { min-width: 140px; } } /* Lehrer-Detail: Unterrichtszuordnungen */ .compact-card h2 { margin-bottom: 0.5rem; } .stat-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.75rem; } .stat-pill { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--line-strong); background: var(--panel-soft); color: var(--text); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.9rem; } /* Druckansichten Grundregel für alle Verwaltungslisten: - A4 Hochformat - einseitig gedacht - breiter linker Lochrand - zarte Lochermitte-Markierung - gleicher Weg für Papierdruck und Browser-PDF */ .action-row { display: flex; gap: 0.6rem; flex-wrap: wrap; } .print-page { background: #ffffff; color: #111827; } .print-sheet { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 10mm 14mm 24mm; background: #ffffff; position: relative; } .print-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-bottom: 1rem; } .print-hint { color: #4b5563; font-size: 0.9rem; align-self: center; } .print-hole-mark { position: fixed; left: 8mm; top: 148.5mm; width: 10mm; border-top: 0.25mm solid #c7cbd1; } .print-header { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid #111827; margin-bottom: 0.75rem; padding-bottom: 0.75rem; } .print-header h1 { margin: 0; font-size: 20pt; } .print-meta { text-align: right; line-height: 1.35; font-size: 10.5pt; } .print-summary { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin: 0.65rem 0 0.85rem; font-size: 9.5pt; } .print-table { width: 100%; border-collapse: collapse; box-shadow: none; table-layout: fixed; } .print-table th, .print-table td { border: 1px solid #d1d5db; padding: 4px 5px; vertical-align: top; font-size: 8.6pt; line-height: 1.18; overflow-wrap: anywhere; } .print-table th { background: #f3f4f6; color: #111827; text-align: left; } .print-table .small-muted { color: #4b5563; font-size: 7.6pt; } .print-table .num { text-align: right; white-space: nowrap; } .print-table th:nth-child(1), .print-table td:nth-child(1) { width: 24%; } .print-table th:nth-child(2), .print-table td:nth-child(2) { width: 11%; } .print-table th:nth-child(3), .print-table td:nth-child(3) { width: 6%; } .print-table th:nth-child(4), .print-table td:nth-child(4) { width: 17%; } .print-table th:nth-child(5), .print-table td:nth-child(5) { width: 8%; } .print-table th:nth-child(6), .print-table td:nth-child(6) { width: 7%; } .print-table th:nth-child(7), .print-table td:nth-child(7) { width: 7%; } .print-table th:nth-child(8), .print-table td:nth-child(8) { width: 7%; } .print-table th:nth-child(9), .print-table td:nth-child(9) { width: 9%; } .print-table th:nth-child(10), .print-table td:nth-child(10) { width: 8%; } @media print { @page { size: A4 portrait; margin: 0; } .no-print { display: none !important; } html, body { width: 210mm; min-height: 297mm; } body.print-page { background: #ffffff !important; color: #000000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .print-sheet { width: auto; min-height: 297mm; margin: 0; padding: 14mm 10mm 14mm 24mm; box-shadow: none; } .print-table th, .print-table td { font-size: 8.4pt; padding: 3.5px 4.5px; } .inactive-row { opacity: 0.75; } }