Files
lernbar/src/app/globals.css
T
Florian WildeandClaude Opus 5 1af5613e9b Baustein 2: Inhalte einlesen und pruefen, Handouts, Suche, Glossar
Die fachlichen Inhalte liegen als Dateien unter content/ und werden beim
Start eingelesen, geprueft und in den Speicher geladen.

- Inhaltslader mit Zod-Schemata und Querverweispruefung
- Fehlermeldungen nennen Datei und Zeile, gesammelt statt beim ersten
  Fehler geworfen; die Anwendung startet bei Fehlern nicht
- npm run inhalte:pruefen prueft ohne Start
- Handout-Ansicht mit festem Aufbau, Uebersicht nach Themenbloecken
- Volltextsuche mit Gewichtung und Trefferausschnitt
- Gelesen-Markierung je Handout
- Glossar mit Suche und automatischer Verlinkung in den Handouts
- Beispielinhalte: 4 Wochen, 12 Handouts, 24 Merkkarten, 4 Aufgaben,
  4 Checklisten, 2 Lernzielkontrollen, 24 Glossareintraege
- rahmenplan.yaml aus FIAusbV 2020 und KMK-Rahmenlehrplan, mit Fundstellen
- gray-matter entfernt, YAML-Kopf wird selbst herausgeloest
- npm run screenshots nimmt die Bilder fuer die Anleitung auf
- 39 neue Tests, insgesamt 68

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-10 07:56:38 +02:00

699 lines
14 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ---------------------------------------------------------------------------
Lern-Bar – Gestaltung
Leitfarbe dunkles Petrol, Akzent warmes Bernstein, Karten sehr helles
Blaugrau. Nur Systemschriften, keine Zeichensätze von außen.
--------------------------------------------------------------------------- */
:root {
color-scheme: light;
--petrol: #1f4e5f;
--petrol-hell: #2c6b81;
--petrol-dunkel: #163a47;
--bernstein: #d98a2b;
--bernstein-dunkel: #a9660f;
--grund: #ffffff;
--flaeche: #edf3f5;
--flaeche-kraeftig: #dde8ec;
--rand: #c8d8de;
--rand-zart: #dde8ec;
--text: #16242a;
--text-leise: #4d646d;
--text-auf-petrol: #f2f8fa;
--gut: #1d6f4a;
--gut-flaeche: #e2f2ea;
--warnung: #8a5a00;
--warnung-flaeche: #fbf0dc;
--fehler: #9b2226;
--fehler-flaeche: #fbe9e9;
--radius: 10px;
--radius-klein: 6px;
--schatten: 0 1px 2px rgb(22 36 42 / 8%), 0 2px 8px rgb(22 36 42 / 5%);
--schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--schrift-fest: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
--breite: 1120px;
}
:root[data-thema="dunkel"] {
color-scheme: dark;
--petrol: #7fc0d4;
--petrol-hell: #a3d4e3;
--petrol-dunkel: #0f2a34;
--bernstein: #e5a552;
--bernstein-dunkel: #f0bd7c;
--grund: #0e1b21;
--flaeche: #16272f;
--flaeche-kraeftig: #1e343e;
--rand: #2c4652;
--rand-zart: #233b45;
--text: #e6eef1;
--text-leise: #a3b8c0;
--text-auf-petrol: #0e1b21;
--gut: #6cc79a;
--gut-flaeche: #14332a;
--warnung: #e3b264;
--warnung-flaeche: #33290f;
--fehler: #f08a8d;
--fehler-flaeche: #35191b;
--schatten: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) {
color-scheme: dark;
--petrol: #7fc0d4;
--petrol-hell: #a3d4e3;
--petrol-dunkel: #0f2a34;
--bernstein: #e5a552;
--bernstein-dunkel: #f0bd7c;
--grund: #0e1b21;
--flaeche: #16272f;
--flaeche-kraeftig: #1e343e;
--rand: #2c4652;
--rand-zart: #233b45;
--text: #e6eef1;
--text-leise: #a3b8c0;
--text-auf-petrol: #0e1b21;
--gut: #6cc79a;
--gut-flaeche: #14332a;
--warnung: #e3b264;
--warnung-flaeche: #33290f;
--fehler: #f08a8d;
--fehler-flaeche: #35191b;
--schatten: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--grund);
color: var(--text);
font-family: var(--schrift);
font-size: 16px;
line-height: 1.6;
min-height: 100dvh;
}
h1,
h2,
h3,
h4 {
line-height: 1.25;
margin: 0 0 0.5em;
font-weight: 650;
letter-spacing: -0.01em;
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
a {
color: var(--petrol);
text-underline-offset: 2px;
}
a:hover { color: var(--petrol-hell); }
:focus-visible {
outline: 3px solid var(--bernstein);
outline-offset: 2px;
border-radius: 3px;
}
hr {
border: 0;
border-top: 1px solid var(--rand-zart);
margin: 1.5rem 0;
}
code, kbd, samp, pre {
font-family: var(--schrift-fest);
font-size: 0.92em;
}
code {
background: var(--flaeche);
padding: 0.1em 0.35em;
border-radius: var(--radius-klein);
}
/* --- Grundbausteine --- */
.huelle {
max-width: var(--breite);
margin: 0 auto;
padding: 1.25rem 1rem 4rem;
}
.karte {
background: var(--flaeche);
border: 1px solid var(--rand-zart);
border-radius: var(--radius);
padding: 1rem 1.15rem;
}
.karte-grund {
background: var(--grund);
border: 1px solid var(--rand);
border-radius: var(--radius);
padding: 1rem 1.15rem;
box-shadow: var(--schatten);
}
.leise {
color: var(--text-leise);
font-size: 0.9rem;
}
.stapel > * + * { margin-top: 1rem; }
.stapel-eng > * + * { margin-top: 0.5rem; }
.reihe {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
.raster {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* --- Bedienelemente --- */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 44px;
padding: 0.55rem 1.1rem;
border-radius: var(--radius-klein);
border: 1px solid transparent;
background: var(--petrol);
color: var(--text-auf-petrol);
font: inherit;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background-color 0.12s ease;
}
.knopf:hover { background: var(--petrol-hell); color: var(--text-auf-petrol); }
.knopf:disabled { opacity: 0.55; cursor: not-allowed; }
.knopf-zweit {
background: transparent;
color: var(--petrol);
border-color: var(--rand);
}
.knopf-zweit:hover { background: var(--flaeche-kraeftig); color: var(--petrol); }
.knopf-akzent { background: var(--bernstein); color: #26170a; }
.knopf-akzent:hover { background: var(--bernstein-dunkel); color: #26170a; }
.knopf-still {
background: transparent;
color: var(--text-leise);
border-color: transparent;
padding: 0.4rem 0.6rem;
min-height: 38px;
font-weight: 500;
}
.knopf-still:hover { background: var(--flaeche); color: var(--text); }
label {
display: block;
font-weight: 600;
font-size: 0.92rem;
margin-bottom: 0.3rem;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
width: 100%;
min-height: 44px;
padding: 0.5rem 0.7rem;
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
background: var(--grund);
color: var(--text);
font: inherit;
}
textarea {
min-height: 6rem;
resize: vertical;
line-height: 1.5;
}
input:disabled,
textarea:disabled,
select:disabled {
background: var(--flaeche);
color: var(--text-leise);
}
.feld + .feld { margin-top: 0.9rem; }
.hinweis {
border-radius: var(--radius-klein);
padding: 0.7rem 0.9rem;
border: 1px solid;
font-size: 0.95rem;
}
.hinweis-fehler { background: var(--fehler-flaeche); border-color: var(--fehler); color: var(--fehler); }
.hinweis-warnung { background: var(--warnung-flaeche); border-color: var(--warnung); color: var(--warnung); }
.hinweis-gut { background: var(--gut-flaeche); border-color: var(--gut); color: var(--gut); }
/* --- Kopfzeile --- */
.kopf {
background: var(--petrol-dunkel);
color: #f2f8fa;
border-bottom: 3px solid var(--bernstein);
}
:root[data-thema="dunkel"] .kopf { background: #0b2029; }
.kopf-innen {
max-width: var(--breite);
margin: 0 auto;
padding: 0.6rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.marke {
font-weight: 700;
font-size: 1.1rem;
color: #f2f8fa;
text-decoration: none;
letter-spacing: -0.01em;
white-space: nowrap;
}
.marke:hover { color: #fff; }
.marke .marke-akzent { color: #e5a552; }
.hauptnavigation {
display: flex;
gap: 0.15rem;
flex-wrap: wrap;
flex: 1;
}
.hauptnavigation a {
color: #cfe2e9;
text-decoration: none;
padding: 0.45rem 0.7rem;
border-radius: var(--radius-klein);
font-size: 0.95rem;
font-weight: 500;
white-space: nowrap;
}
.hauptnavigation a:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.hauptnavigation a[aria-current="page"] {
background: rgb(255 255 255 / 16%);
color: #fff;
box-shadow: inset 0 -2px 0 #d98a2b;
}
.kopf-rechts {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.kopf-knopf {
background: transparent;
border: 1px solid rgb(255 255 255 / 25%);
color: #e3eef2;
border-radius: var(--radius-klein);
min-height: 38px;
padding: 0.3rem 0.65rem;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.kopf-knopf:hover { background: rgb(255 255 255 / 12%); }
/* --- Fortschritt --- */
.balken {
height: 10px;
background: var(--flaeche-kraeftig);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--rand-zart);
}
.balken > span {
display: block;
height: 100%;
background: var(--petrol);
border-radius: 999px;
}
/* --- Status-Marken: nie nur Farbe, immer auch ein Zeichen --- */
.marke-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 650;
padding: 0.15rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--rand);
background: var(--grund);
color: var(--text-leise);
white-space: nowrap;
}
.marke-status[data-ton="gut"] { color: var(--gut); border-color: var(--gut); background: var(--gut-flaeche); }
.marke-status[data-ton="warnung"] { color: var(--warnung); border-color: var(--warnung); background: var(--warnung-flaeche); }
.marke-status[data-ton="fehler"] { color: var(--fehler); border-color: var(--fehler); background: var(--fehler-flaeche); }
/* --- Tabellen --- */
.tabelle-huelle { overflow-x: auto; }
table.tabelle {
border-collapse: collapse;
width: 100%;
font-size: 0.95rem;
}
table.tabelle th,
table.tabelle td {
text-align: left;
padding: 0.5rem 0.7rem;
border-bottom: 1px solid var(--rand-zart);
vertical-align: top;
}
table.tabelle th {
font-weight: 650;
background: var(--flaeche);
white-space: nowrap;
}
/* --- Anmeldung --- */
.anmeldung {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 1.5rem 1rem;
background: linear-gradient(160deg, var(--flaeche) 0%, var(--grund) 60%);
}
.anmeldung-karte {
width: min(420px, 100%);
background: var(--grund);
border: 1px solid var(--rand);
border-radius: var(--radius);
padding: 1.75rem;
box-shadow: var(--schatten);
}
/* --- Sprungmarke --- */
.sprung {
position: absolute;
left: -9999px;
top: 0;
background: #d98a2b;
color: #26170a;
padding: 0.6rem 1rem;
z-index: 100;
border-radius: 0 0 var(--radius-klein) 0;
font-weight: 650;
}
.sprung:focus { left: 0; }
/* --- Druck --- */
@media print {
.kopf,
.nicht-drucken {
display: none !important;
}
body { background: #fff; color: #000; font-size: 11pt; }
.huelle { max-width: none; padding: 0; }
.karte, .karte-grund { border: 1px solid #999; box-shadow: none; background: #fff; }
a { color: #000; text-decoration: none; }
}
/* Nur für Bildschirmleser sichtbar */
.nur-lesehilfe {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Handouts --- */
.handout-kuerzel {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.6rem;
padding: 0.1rem 0.5rem;
border-radius: var(--radius-klein);
background: var(--petrol);
color: var(--text-auf-petrol);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.handout-kuerzel-gross {
font-size: 1rem;
padding: 0.25rem 0.7rem;
}
.handout-kachel {
display: block;
height: 100%;
background: var(--flaeche);
border: 1px solid var(--rand-zart);
border-radius: var(--radius);
padding: 0.9rem 1rem;
text-decoration: none;
color: var(--text);
}
.handout-kachel:hover {
background: var(--flaeche-kraeftig);
border-color: var(--rand);
color: var(--text);
}
.handout-treffer {
display: flex;
gap: 0.75rem;
align-items: flex-start;
background: var(--flaeche);
border: 1px solid var(--rand-zart);
border-radius: var(--radius);
padding: 0.8rem 1rem;
text-decoration: none;
color: var(--text);
}
.handout-treffer:hover {
background: var(--flaeche-kraeftig);
color: var(--text);
}
.handout-worum {
font-size: 1.05rem;
color: var(--text-leise);
margin: 0;
}
.handout-zuordnung dl {
margin: 0;
display: grid;
gap: 0.6rem;
}
.handout-zuordnung dt {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-leise);
font-weight: 650;
margin-bottom: 0.2rem;
}
.handout-zuordnung dd {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.zuordnung-marke {
display: inline-flex;
gap: 0.35rem;
align-items: baseline;
background: var(--grund);
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
padding: 0.15rem 0.5rem;
font-size: 0.87rem;
}
.zuordnung-marke strong {
color: var(--petrol);
}
.fliesstext > *:first-child { margin-top: 0; }
.fliesstext > *:last-child { margin-bottom: 0; }
.fliesstext ul,
.fliesstext ol {
padding-left: 1.3rem;
margin: 0 0 1em;
}
.fliesstext li + li { margin-top: 0.4rem; }
.fliesstext table {
border-collapse: collapse;
width: 100%;
font-size: 0.94rem;
}
.fliesstext th,
.fliesstext td {
border: 1px solid var(--rand-zart);
padding: 0.45rem 0.65rem;
text-align: left;
vertical-align: top;
}
.fliesstext th {
background: var(--flaeche);
font-weight: 650;
}
.merksatz {
border-left: 5px solid var(--bernstein);
background: var(--warnung-flaeche);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 0.9rem 1.1rem;
}
.merksatz-kennzeichnung {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--warnung);
margin-bottom: 0.2rem;
}
.merksatz p {
margin: 0;
font-size: 1.08rem;
font-weight: 600;
}
.pruefungsfrage {
border: 1px solid var(--rand);
border-radius: var(--radius);
background: var(--grund);
}
.pruefungsfrage > summary {
cursor: pointer;
padding: 0.7rem 1rem;
font-weight: 650;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
}
.pruefungsfrage > summary::-webkit-details-marker { display: none; }
.pruefungsfrage > summary::before {
content: "▸";
color: var(--petrol);
font-size: 0.9rem;
}
.pruefungsfrage[open] > summary::before { content: "▾"; }
.pruefungsfrage[open] > summary { border-bottom: 1px solid var(--rand-zart); }
.pruefungsfrage > div { padding: 0.9rem 1rem; }
a.glossarbegriff {
color: inherit;
text-decoration: underline dotted var(--petrol);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
cursor: help;
}
a.glossarbegriff:hover {
color: var(--petrol);
text-decoration-style: solid;
}
/* --- Glossar --- */
.glossar {
display: grid;
gap: 0.75rem;
margin: 0;
}
.glossar-eintrag {
scroll-margin-top: 1rem;
}
.glossar-eintrag dt {
font-weight: 700;
font-size: 1.05rem;
margin-bottom: 0.3rem;
}
.glossar-langform {
display: block;
font-weight: 400;
font-size: 0.85rem;
color: var(--text-leise);
}
.glossar-eintrag dd { margin: 0; }
.glossar-eintrag:target {
outline: 3px solid var(--bernstein);
outline-offset: 2px;
}
@media print {
.pruefungsfrage > div { display: block !important; }
.handout-zuordnung { border: 1px solid #999; }
a.glossarbegriff { text-decoration: none; }
}