mit white-space: pre-wrap in der Standardschrift (Segoe UI). Daraus folgen zwei Probleme: 1. Proportionalschrift -> Kästen und Linien verrutschen spaltenweise. 2. pre-wrap bricht um -> auf schmalen Fenstern zerfällt jedes Diagramm. Die Regel unten trifft gezielt den Prüfungs-Kopftext (hinweise) und die Aufgaben-Einleitungen (einleitung) – beide sind direkte Kinder von .panel. Der eigentliche Fragetext (.question) liegt in .task und bleibt unberührt, also weiterhin in der gut lesbaren Fließtextschrift. Keine Template-Änderung erforderlich. ───────────────────────────────────────────────────────────────────────── */ .panel > .prewrap { font-family: "SF Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; font-size: 13px; line-height: 1.45; white-space: pre; /* kein Umbruch: Spalten bleiben ausgerichtet */ overflow-x: auto; /* zu breite Diagramme werden horizontal scrollbar */ } /* Optional: auch die Musterlösungen auf der Ergebnisseite zeichengenau darstellen. Betrifft z. B. das ER-Diagramm in 3e und die Subnetz-/ Netzplan-Tabellen in 1c und 4a. Weglassen, wenn die Musterlösungen lieber als Fließtext erscheinen sollen. */ .answer.solution { font-family: "SF Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; font-size: 13px; line-height: 1.45; white-space: pre; overflow-x: auto; } /* ─── Typ "diagramm": ASCII-Grafik mit Eingabefeldern an Ort und Stelle ─────── Die Felder sind exakt FIELD_WIDTH (3) Zeichen breit, damit die Kaesten der Grafik in der Monospace-Darstellung buendig bleiben. Deshalb: box-sizing auf border-box, kein Padding, feste Hoehe in em (= line-height des
). */
.diagram-wrap { overflow-x: auto; margin: 10px 0 14px; }
.diagram {
font-family: "SF Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
/* 11px: bei dieser Groesse ist die Zeichenbreite von Consolas mit 6,05 px fast genau
ganzzahlig. Dadurch stossen die Linienzeichen (─ │ ┼) nahtlos aneinander und die
Kaesten wirken geschlossen. Bei 13px entstehen sichtbare Luecken in den Linien. */
font-size: 11px;
line-height: 1.6;
white-space: pre;
margin: 0;
color: var(--text);
}
.diagram input.dfield,
.diagram span.dfield {
display: inline-block;
width: 3ch;
height: 1.6em;
box-sizing: border-box;
padding: 0;
margin: 0;
border: 1px solid var(--accent);
border-radius: 2px;
background: var(--accent-soft);
color: var(--text);
font: inherit;
line-height: 1.5;
text-align: center;
vertical-align: top;
}
.diagram input.dfield:focus {
outline: none;
border-color: var(--ok);
background: rgba(47, 179, 68, 0.16);
}
.diagram span.dfield {
border-style: dashed;
background: none;
text-align: left;
width: auto;
min-width: 3ch;
}
/* ═══════════════════════════════════════════════════════════════════════════
Papier-Theme für das Schüler-Portal.
Der Hintergrund der Seite bleibt dunkel wie bisher. Nur die Prüfungsblätter
selbst (.panel) werden weiß mit schwarzer Schrift - wie ein Blatt Papier,
das auf einem dunklen Tisch liegt.
Anhängen an: /home/comcave_login/admin_panel/portal_static/portal.css
Danach: sudo systemctl restart portal
Technik: Die Farbvariablen werden nicht global, sondern NUR auf .panel neu
gesetzt. Da CSS-Variablen sich nach unten vererben, übernehmen alle Elemente
innerhalb eines Blattes automatisch die hellen Werte. Zusätzlich werden die
wenigen Stellen überschrieben, an denen Farben fest im Stylesheet stehen
(Eingabefelder, Tabellenkopf, Antwortkästen).
═══════════════════════════════════════════════════════════════════════════ */
/* ── Das Blatt ────────────────────────────────────────────────────────────── */
.panel {
/* Variablen nur für den Inhalt dieses Blattes umdefinieren */
--text: #000000;
--muted: #4a4a4a;
--border: #b0b0b0;
--panel: #ffffff;
--panel-hover: #f2f2f2;
--accent: #000000;
--accent-soft: #eeeeee;
--danger: #000000;
--warn: #000000;
--ok: #000000;
background: #ffffff;
color: #000000;
border: 1px solid #c8c8c8;
border-radius: 3px;
/* Etwas Tiefe, damit das Blatt auf dem dunklen Grund aufliegt */
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
padding: 30px 34px;
font-family: "Times New Roman", Georgia, serif;
line-height: 1.55;
}
/* ── Texte im Blatt ───────────────────────────────────────────────────────── */
.panel h2 {
color: #000000;
border-bottom: 1px solid #000000;
padding-bottom: 8px;
margin-bottom: 16px;
}
.panel .hint { color: #4a4a4a; }
.panel .task { border-top: 1px solid #d8d8d8; padding-top: 14px; margin-top: 18px; }
.panel .task:first-of-type { border-top: none; }
.panel .task-id { color: #000000; font-weight: 700; }
.panel .points { color: #000000; }
.panel .label { color: #4a4a4a; }
/* ── Eingabefelder (im Original dunkel hinterlegt) ────────────────────────── */
.panel input[type="text"],
.panel input[type="password"],
.panel textarea {
background: #ffffff;
color: #000000;
border: 1px solid #000000;
border-radius: 2px;
font-family: "Times New Roman", Georgia, serif;
}
.panel textarea.code {
font-family: "SF Mono", Consolas, "DejaVu Sans Mono", monospace;
}
.panel input:focus,
.panel textarea:focus {
outline: 2px solid #000000;
outline-offset: -2px;
border-color: #000000;
}
/* ── Tabellen ─────────────────────────────────────────────────────────────── */
.panel .answer-table,
.panel .answer-table th,
.panel .answer-table td { border-color: #000000; }
.panel .answer-table th { background: #ededed; color: #000000; }
/* ── Antwort- und Lösungskästen auf der Ergebnisseite ─────────────────────── */
.panel .answer {
background: #ffffff;
border: 1px solid #000000;
border-radius: 2px;
color: #000000;
}
.panel .answer.solution { border-color: #000000; border-left: 4px solid #000000; }
.panel .feedback { color: #000000; }
/* ── Diagrammfelder (Netzplan, ER-Modell) ─────────────────────────────────── */
.panel .diagram { color: #000000; }
.panel .diagram input.dfield,
.panel .diagram span.dfield {
background: #ffffff;
border: 1px solid #000000;
border-radius: 0;
color: #000000;
}
.panel .diagram input.dfield:focus {
background: #ffffff;
border: 2px solid #000000;
outline: none;
}
/* ── Schaltflächen im Blatt (z. B. Bild-Upload) ───────────────────────────── */
.panel .btn-primary { background: #000000; color: #ffffff; border-radius: 2px; }
.panel .btn-ghost { background: #ffffff; color: #000000; border: 1px solid #000000; }
.panel input[type="file"] { color: #000000; }
/* ── Meldungen ohne Farbcodierung: Unterscheidung über den Schriftschnitt ─── */
.panel .error { color: #000000; font-weight: 700; text-decoration: underline; }
.panel .ok { color: #000000; font-weight: 700; }
.panel .warn { color: #000000; font-style: italic; }
/* ── Ausdruck: nur die Blätter, ohne Bedienelemente ───────────────────────── */
@media print {
body { background: #ffffff; }
.topbar, .submit-row, button, .btn { display: none !important; }
.panel { box-shadow: none; border: 1px solid #000; page-break-inside: avoid; }
}