; zwischen Nummer und Inhalt liegt eine deutliche visuelle Lücke. */
.aufg-liste {
list-style: none;
counter-reset: aufgliste;
margin: 10px 0 0;
padding: 0;
}
.aufg-liste > li {
counter-increment: aufgliste;
position: relative;
padding-left: 48px;
margin-bottom: 8px;
min-height: 24px;
}
.aufg-liste > li::before {
content: counter(aufgliste) ".";
position: absolute;
left: 0; top: 0;
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; padding: 1px 6px;
font-family: var(--mono); font-weight: 700; font-size: 0.82rem;
color: var(--orange);
background: var(--orange-hell);
border: 1px solid var(--orange-rand);
border-radius: 5px;
}
/* ── Klassifizier-Term-Nummern (kl-spiel-Widgets) ───────────────────────────
Form: (1)5+2·x
Ersetzt frühere Inline-Form „(1) 5+2·x" mit Browser-Default-Lücke. */
.kl-nr {
display: inline-block;
font-family: var(--mono); font-weight: 700;
color: var(--tinte-2); background: var(--papier-2);
padding: 2px 8px; border-radius: 5px;
font-size: 0.78rem;
margin-right: 18px;
vertical-align: 0.12em;
}
/* Lösung toggle */
.loesung-toggle {
background: var(--papier-2); border: 1px solid var(--linie);
border-radius: 7px; padding: 8px 14px; cursor: pointer;
font-size: 0.82rem; font-weight: 600; color: var(--tinte-2);
display: inline-flex; align-items: center; gap: 8px;
margin-top: 10px; user-select: none;
transition: background 0.15s, color 0.15s;
}
.loesung-toggle:hover { background: var(--gruen-hell); color: var(--gruen); }
.loesung-body { display: none; margin-top: 10px; }
.loesung-body.sichtbar { display: block; }
/* ── STICKY TOC ─────────────────────────────────────────────── */
.toc-wrap {
grid-area: toc;
position: sticky; top: 70px;
}
#toc {
background: var(--weiss); border: 1px solid var(--linie);
border-radius: 10px; padding: 14px 16px; box-shadow: var(--s);
font-size: 0.8rem;
}
.toc-title {
display: flex; align-items: baseline; gap: 6px;
width: 100%; text-align: left;
font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: var(--tinte-2); margin-bottom: 10px;
padding: 2px 6px 8px; border: none; border-bottom: 1px solid var(--linie);
background: none; cursor: pointer; border-radius: 5px 5px 0 0;
transition: color 0.12s, background 0.12s;
}
.toc-title:hover, .toc-title:focus-visible {
color: var(--blau); background: var(--blau-hell); outline: none;
}
.toc-title .toc-title-pfeil {
margin-left: auto; font-weight: 700;
opacity: 0; transition: opacity 0.12s;
}
.toc-title:hover .toc-title-pfeil,
.toc-title:focus-visible .toc-title-pfeil { opacity: 1; }
.toc-kapnr { text-transform: none; }
.toc-link {
display: block; padding: 4px 8px; border-radius: 5px;
color: var(--tinte-2); text-decoration: none;
transition: background 0.12s, color 0.12s; line-height: 1.4;
border-left: 2px solid transparent;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toc-link:hover { background: var(--papier); color: var(--tinte); }
.toc-link.toc-aktiv {
background: var(--blau-hell); color: var(--blau);
border-left-color: var(--blau); font-weight: 600;
}
.toc-nav {
display: flex; justify-content: center;
margin: 0 -4px;
}
.toc-nav-oben { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.toc-nav-unten { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.toc-prev, .toc-next {
display: inline-block;
font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
letter-spacing: 1px;
color: var(--tinte-2); text-decoration: none;
padding: 4px 10px; border-radius: 5px;
transition: background 0.12s, color 0.12s;
}
.toc-prev:hover, .toc-next:hover {
background: var(--blau-hell); color: var(--blau);
}
/* ── CANVAS WRAPPER ─────────────────────────────────────────── */
.canvas-wrap {
background: var(--weiss); border: 1px solid var(--linie);
border-radius: 10px; overflow: hidden; box-shadow: var(--s); margin: 16px 0;
}
canvas { display: block; width: 100%; }
.canvas-ctrl {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; border-top: 1px solid var(--linie);
background: var(--papier-2); flex-wrap: wrap;
}
.canvas-ctrl label { font-size: 0.82rem; color: var(--tinte-2); white-space: nowrap; }
.canvas-ctrl input[type=range] {
flex: 1; min-width: 100px; accent-color: var(--blau);
height: 4px; -webkit-appearance: none; background: var(--linie);
border-radius: 2px; outline: none;
}
.canvas-ctrl input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; width: 17px; height: 17px;
background: var(--tinte); border-radius: 50%; cursor: pointer;
border: 3px solid var(--blau-hell);
}
.canvas-ctrl .val {
font-family: var(--mono); font-weight: 700; font-size: 0.95rem;
color: var(--blau); min-width: 24px; text-align: right;
}
.canvas-legend {
display: flex; gap: 16px; padding: 10px 16px;
border-top: 1px solid var(--linie); flex-wrap: wrap;
}
.cl-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--tinte-2); font-family: var(--mono); }
.cl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cl-line { width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; }
/* ── KOMPETENZ-LISTE (RLP) ───────────────────────────────────── */
.rlp-kompetenzen {
background: var(--papier-2); border: 1px solid var(--linie);
border-radius: 10px; padding: 16px 20px; margin: 0 0 28px; font-size: 0.85rem;
}
.rlp-kompetenzen .rlp-titel {
font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; color: var(--tinte-2);
margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.rlp-kompetenzen ul { margin-left: 1.2em; }
.rlp-kompetenzen li { margin-bottom: 5px; line-height: 1.5; }
.rlp-kompetenzen .ohm {
font-family: var(--mono); font-size: 0.65rem;
background: var(--blau-hell); color: var(--blau);
border: 1px solid var(--blau-rand); border-radius: 10px;
padding: 1px 7px; margin-left: 5px; white-space: nowrap;
}
/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
background: var(--tinte); color: rgba(255,255,255,0.45);
padding: 24px 40px; text-align: center;
font-size: 0.74rem; line-height: 1.8;
}
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer strong { color: rgba(255,255,255,0.82); }
/* ── RESPONSIVE ─────────────────────────────────────────────── */
/* Header-Nav: bei < 1024px → Burger-Menü (mit 9 Items zu eng für eine Zeile) */
@media (max-width: 1024px) {
.site-nav { display: none; }
.burger { display: block; }
}
@media (max-width: 640px) {
.site-hdr { padding: 0 14px; }
.page-wrap { padding: 20px 14px 60px; }
}
/* ── ZUSATZMATERIAL & EXTERNE RESSOURCEN ──────────────────────
Gilt für alle Themenseiten. Die zwei Sektionen am Seitenende
("Zusatzmaterial" + "Externe Videos & Aufgabensammlungen")
nutzen diese Klassen. Themenseiten dürfen sie NICHT neu
definieren — Konsistenz ist Pflicht.
───────────────────────────────────────────────────────────── */
/* Download-Kacheln (Druckseiten, Anki-Deck) */
.dl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin-top: 12px;
}
.dl {
display: flex;
align-items: center;
gap: 11px;
background: var(--weiss);
border: 1px solid var(--linie);
border-left: 4px solid var(--blau);
border-radius: 9px;
padding: 11px 13px;
text-decoration: none;
color: inherit;
box-shadow: var(--s);
transition: border-color 0.15s, transform 0.15s;
}
.dl:hover {
border-color: var(--blau-rand);
border-left-color: var(--blau);
transform: translateY(-1px);
text-decoration: none;
}
.dl .dl-ic { font-size: 1.5rem; flex-shrink: 0; }
.dl .dl-t { font-weight: 700; font-size: 0.83rem; color: var(--tinte); }
.dl .dl-s { font-size: 0.7rem; color: var(--tinte-2); margin-top: 1px; }
.dl .dl-fmt {
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
color: var(--blau);
margin-top: 2px;
}
/* Externe Links (Erklärvideos, Aufgabensammlungen) */
.links-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
@media (max-width: 520px) {
.links-grid { grid-template-columns: 1fr; }
}
.lk {
display: flex;
align-items: center;
gap: 11px;
background: var(--weiss);
border: 1px solid var(--linie);
border-radius: 9px;
padding: 11px 13px;
text-decoration: none;
color: inherit;
box-shadow: var(--s);
transition: border-color 0.15s;
}
.lk:hover { border-color: var(--rot-rand); text-decoration: none; }
.lk.aufg:hover { border-color: var(--orange-rand); }
.lk .lk-ic { font-size: 1.4rem; flex-shrink: 0; }
.lk .lk-t { font-weight: 700; font-size: 0.83rem; color: var(--tinte); }
.lk .lk-s { font-size: 0.7rem; color: var(--tinte-2); margin-top: 1px; }
/* Subtitel innerhalb der Ressourcen-Sektion (z.B. "🎬 ERKLÄRVIDEOS") */
.ressourcen-subtitel {
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--tinte-2);
margin-bottom: 8px;
}
.ressourcen-subtitel + .links-grid { margin-top: 8px; }
.links-grid + .ressourcen-subtitel { margin-top: 14px; }
/* ════════════════════════════════════════════════════════════════
* Animations-Karte (.anim)
* Wird seitenübergreifend für interaktive Canvas-Animationen
* verwendet. Layout: Canvas links, Bedienelemente rechts.
* Auf schmalen Bildschirmen einspaltig.
* ════════════════════════════════════════════════════════════════ */
.anim {
background: var(--papier);
border: 1px solid var(--linie);
border-radius: 8px;
padding: 18px;
margin: 14px 0 22px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
/* Steht eine .anim-Karte im Körper eines .widget, macht .widget den Rahmen.
.anim bleibt dann nur noch Namensraum für seine 22 Nachfahren-Regeln
(.bedien, .regler, .chips, .legende, .formel …) und gibt die Karten-Optik
ab — sonst entstünde Rahmen im Rahmen. Verbindlich seit STYLEGUIDE §2.10. */
.widget-body > .anim {
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
}
.anim-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 20px;
align-items: start;
}
@media (max-width: 820px) {
.anim-layout { grid-template-columns: minmax(0, 1fr); }
}
.anim canvas {
width: 100%;
height: auto;
background: var(--papier-2);
border: 1px solid var(--linie);
border-radius: 6px;
display: block;
touch-action: none;
}
.anim .bedien { display: flex; flex-direction: column; gap: 12px; }
.anim .regler { display: flex; flex-direction: column; gap: 3px; }
.anim .regler-label {
display: flex; justify-content: space-between;
font-size: 0.88rem; color: var(--tinte-2);
}
.anim .regler-label .wert {
font-family: var(--mono); color: var(--blau); font-weight: 500;
}
.anim input[type="range"] { width: 100%; accent-color: var(--blau); }
.anim .feld-titel {
font-size: 0.74rem; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--tinte-2);
font-weight: 600; margin-bottom: 2px;
}
.anim .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.anim .chip {
background: var(--papier-2);
border: 1px solid var(--linie);
color: var(--tinte-2);
padding: 5px 9px; border-radius: 14px;
font-size: 0.82rem; cursor: pointer;
font-family: var(--mono); transition: all 0.12s;
}
.anim .chip:hover { border-color: var(--blau-rand); color: var(--blau); }
.anim .chip.aktiv {
background: var(--blau); border-color: var(--blau); color: white;
}
.anim .legende {
background: var(--papier-2);
border: 1px solid var(--linie);
border-radius: 6px;
padding: 8px 11px;
font-size: 0.86rem;
}
.anim .legende-titel {
font-size: 0.72rem; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--tinte-2);
font-weight: 600; margin-bottom: 5px;
}
.anim .legende-zeile {
display: flex; justify-content: space-between;
font-family: var(--mono); font-size: 0.85rem;
padding: 1px 0;
}
.anim .legende-zeile .lab { color: var(--tinte); }
.anim .legende-zeile .val { color: var(--blau); font-weight: 500; }
.anim .formel {
background: var(--blau-hell);
border: 1px solid var(--blau-rand);
border-radius: 6px;
padding: 8px 12px;
font-size: 0.93rem;
transition: background 0.3s, border-color 0.3s;
}
.anim .erklaerung {
background: var(--papier-2);
border-left: 3px solid var(--blau);
padding: 7px 11px;
font-size: 0.84rem;
color: var(--tinte-2);
border-radius: 0 4px 4px 0;
min-height: 36px;
}
.anim .anim-titel {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--blau);
font-weight: 700;
margin-bottom: 8px;
}
.anim .kn-quad {
background: var(--papier-2);
border: 1px solid var(--linie);
color: var(--tinte);
padding: 4px 9px;
border-radius: 12px;
font-size: 0.78rem;
cursor: pointer;
font-family: var(--mono);
transition: all 0.12s;
}
.anim .kn-quad:hover { border-color: var(--blau-rand); color: var(--blau); }
/* ── MINI-CHECKS (Pilot g3-2; Muster aus TALS-Physik, Farben: Orange = Aufgabe/Übung) ──
Einklappbare Verständnisfragen je Abschnitt; Akkordeon-Logik in minicheck.js. */
.minicheck { background: var(--weiss); border: 1px solid var(--orange-rand); border-radius: 12px; margin: 18px 0; overflow: hidden; }
.minicheck > summary.mc-kopf {
cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
font-family: var(--serif); font-weight: 700; font-size: 0.9rem; color: var(--orange);
background: var(--orange-hell); padding: 9px 16px;
}
.minicheck > summary.mc-kopf::-webkit-details-marker { display: none; }
.minicheck > summary.mc-kopf::after { content: '▸'; margin-left: auto; color: var(--orange-rand); transition: transform 0.15s ease; }
.minicheck[open] > summary.mc-kopf::after { transform: rotate(90deg); }
.minicheck[open] > summary.mc-kopf { border-bottom: 1px solid var(--orange-rand); }
.minicheck > summary.mc-kopf:hover { filter: brightness(0.97); }
.mc-item { padding: 12px 16px; }
.mc-item + .mc-item { border-top: 1px solid var(--linie); }
.mc-typ { display: inline-block; font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.03em; text-transform: uppercase; color: var(--orange); background: var(--orange-hell);
border: 1px solid var(--orange-rand); border-radius: 5px; padding: 1px 7px; margin-bottom: 7px; }
.mc-frage { font-size: 0.92rem; line-height: 1.55; margin: 0 0 8px; }
.mc-optionen { list-style: none; margin: 0 0 8px; padding: 0; }
.mc-optionen li { position: relative; padding: 3px 0 3px 1.8em; font-size: 0.9rem; line-height: 1.45; }
.mc-optionen li::before { content: attr(data-opt) ')'; position: absolute; left: 0; font-weight: 700; color: var(--orange); }
.mc-luecke { display: inline-block; min-width: 3.4em; border-bottom: 1.5px solid var(--orange); margin: 0 2px; }
.mc-loesung { margin-top: 4px; }
.mc-loesung > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--orange); }
.mc-loesung > summary::-webkit-details-marker { display: none; }
.mc-loesung > summary::before { content: '▸'; transition: transform 0.15s ease; }
.mc-loesung[open] > summary::before { transform: rotate(90deg); }
.mc-loesung > summary:hover { filter: brightness(0.97); }
.mc-antwort { margin-top: 8px; padding: 9px 12px; font-size: 0.88rem; line-height: 1.55; background: var(--orange-hell); border-radius: 7px; }
/* ════════════════════════════════════════════════════════════════
* Animations-Karte (.widget)
* Rahmen für interaktive Canvas-Animationen: Kopfzeile mit Titel,
* Untertitel und Hinweispaar, darunter der Körper mit Reglern,
* Live-Formel und Canvas. Bis 03.08.2026 lag dieser Block als
* wortgleiche Kopie in 35 Themenseiten — neue Seiten aus
* TEMPLATE.html benutzten die Klassen, ohne sie zu definieren, und
* blieben deshalb ungerahmt. Seither steht er nur noch hier.
* Seiten-eigene Abwandlungen als Modifier daneben (z.B. g3-3
* .widget-kompakt), nie als erneute Definition von .widget.
* ════════════════════════════════════════════════════════════════ */
.widget { background:var(--weiss); border:1px solid var(--linie); border-radius:14px; overflow:hidden; box-shadow:var(--s); margin:16px 0; }
.widget-header { padding:16px 22px 14px; border-bottom:1px solid var(--linie); background:var(--papier); }
.widget-header h3 { font-family:var(--serif); font-size:1rem; font-weight:700; color:var(--tinte); margin-bottom:3px; }
.widget-header p { font-size:0.8rem; color:var(--tinte-2); }
.widget-body { padding:20px 22px; }
/* ── ANIMATIONS-HINWEISE (Pilot g3-2; Muster aus TALS-Physik, Farben: Blau = Animation) ──
Rollover «Worauf achten?» / «Erkenntnis» mit Vorlese-Option; Logik in anim-hinweise.js. */
.widget-titelzeile { position:relative; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0; }
.widget-titelzeile h3 { margin:0; }
.anim-hinweis { position:relative; display:inline-block; }
/* Die erste Hinweis-Pille schiebt sich (und damit die zweite) ans rechte Titelende —
unabhängig davon, ob der Titel ein , .anim-titel oder
ist. position:static
verankert ihr .ah-pop an der (position:relative-)Titelzeile, sodass es nach links öffnet. */
.widget-titelzeile .anim-hinweis.links { position:static; margin-left:auto; }
.ah-trigger { font-size:0.8rem; color:var(--tinte-2); border-bottom:1px dotted var(--blau-rand);
cursor:help; user-select:none; padding:1px 0; display:inline-block; white-space:nowrap; }
.ah-trigger:focus-visible { outline:2px solid var(--blau-rand); outline-offset:2px; border-radius:2px; }
.ah-pop { position:absolute; left:0; top:calc(100% + 8px); z-index:50; width:min(440px,86vw);
background:var(--blau-hell); border:1px solid var(--blau-rand); border-radius:8px;
padding:11px 13px; box-shadow:0 6px 18px rgba(28,26,23,0.18);
opacity:0; visibility:hidden; transform:translateY(-3px);
transition:opacity .15s ease, transform .15s ease; pointer-events:none; }
.anim-hinweis.rechts .ah-pop,
.anim-hinweis.links .ah-pop { left:auto; right:0; }
.ah-pop::before { content:""; position:absolute; left:0; right:0; top:-8px; height:8px; }
.anim-hinweis:hover .ah-pop,
.anim-hinweis:focus-within .ah-pop,
.anim-hinweis.fixiert .ah-pop { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.ah-titel { display:block; font-weight:600; font-size:0.8rem; color:var(--blau); margin-bottom:5px; }
.ah-text { font-size:0.8rem; line-height:1.5; color:var(--tinte); }
.ah-text ul { margin:0; padding-left:1.15em; }
.ah-text li { margin:3px 0; }
/* ── SLIDER-GRUPPIERUNG (Muster aus TALS-Physik Phase 5.34) ──
Mehrere Regler einer Animation in EINER .sl-row: jede .sl-grp ist eine
unzertrennliche Einheit Label+Slider+Wert; auf schmalen Screens brechen
ganze Gruppen um (kein Overflow, Label bleibt beim Regler).
Die .sl-row-Basisstile liegen seitenlokal (Widget-Pattern-Seiten). */
.sl-row { flex-wrap: wrap; }
.sl-row .sl-grp { display: flex; align-items: center; gap: 10px; flex: 1 1 210px; min-width: 0; }
.sl-row .sl-grp label { min-width: 0; }
.sl-row .sl-grp input[type=range] { min-width: 60px; }
/* ── LERNZIELE (Pilot g3-2; Muster aus TALS-Physik, Blau = Orientierung/Begriff) ──
Aufklappbare Ich-kann-Liste direkt nach der RLP-Kompetenzen-Box. */
.lernziele { border-radius: 8px; margin: 14px 0 28px; border: 1.5px solid var(--blau-rand);
background: var(--blau-hell); overflow: hidden; }
.lernziele > summary { list-style: none; cursor: pointer; padding: 11px 16px;
font-family: var(--sans); font-weight: 700; font-size: 0.9rem; color: var(--blau);
display: flex; align-items: center; gap: 9px; user-select: none; }
.lernziele > summary::-webkit-details-marker { display: none; }
.lernziele > summary::after { content: '▸'; margin-left: auto; font-size: 0.85rem; transition: transform 0.18s; }
.lernziele[open] > summary::after { transform: rotate(90deg); }
.lernziele > summary:hover { filter: brightness(0.97); }
.lernziele .lz-body { padding: 4px 18px 14px; }
.lernziele ul { margin: 0; padding-left: 1.25em; }
.lernziele li { margin: 5px 0; font-size: 0.92rem; }
.lernziele li::marker { color: var(--blau-rand); }
/* ── WERTEZUGEHÖRIGKEIT in zusammengelegten Slider-Zeilen ──
Wert direkt neben dem eigenen Slider (Nähe), deutlicher Abstand zwischen
den Gruppen (Distanz). Übersteuert per Spezifität die seitenlokalen
.sl-val-Regeln (min-width:64px / text-align:right). */
.sl-row:has(.sl-grp) { gap: 30px; row-gap: 10px; }
.sl-row .sl-grp { gap: 8px; }
.sl-row .sl-grp .sl-val { min-width: 0; text-align: left; }
/* Akzentfarbe pro Regler-Gruppe — koppelt Slider, Wert und Label-Variable.
Dieselben Farben stehen als .tx-*-Textakzente für Formelbestandteile bereit. */
.sl-grp.akz-blau, .sl-row.akz-blau { --akz: var(--blau); }
.sl-grp.akz-orange, .sl-row.akz-orange { --akz: var(--orange); }
.sl-grp.akz-gruen, .sl-row.akz-gruen { --akz: var(--gruen); }
.sl-grp[class*="akz-"] input[type=range],
.sl-row[class*="akz-"] input[type=range] { accent-color: var(--akz); }
.sl-grp[class*="akz-"] input[type=range]::-webkit-slider-thumb,
.sl-row[class*="akz-"] input[type=range]::-webkit-slider-thumb { background: var(--akz); }
.sl-grp[class*="akz-"] .sl-val,
.sl-row[class*="akz-"] .sl-val { color: var(--akz); }
.sl-grp[class*="akz-"] label .var,
.sl-row[class*="akz-"] label .var { color: var(--akz); font-weight: 600; }
.tx-blau { color: var(--blau); }
.tx-orange { color: var(--orange); }
.tx-gruen { color: var(--gruen); }
/* ── Nachschlagen: Glossar & Formelsammlung (ab ZIP 59) ───────── */
/* Glossar-Sprungleiste (A B C …) */
.glossar-az {
display: flex; flex-wrap: wrap; gap: 5px;
margin: 6px 0 22px;
}
.glossar-az a {
font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px; text-decoration: none;
background: var(--blau-hell); color: var(--blau);
border: 1px solid var(--blau-rand);
}
.glossar-az a:hover { background: var(--blau); color: #fff; }
/* Glossar-Eintrag: Begriff + Definition */
.glossar-eintrag {
border-left: 3px solid var(--blau-rand);
padding: 4px 0 4px 14px;
margin: 14px 0;
}
.glossar-eintrag .ge-begriff {
font-family: var(--serif); font-weight: 700; font-size: 1.02rem;
color: var(--tinte);
}
.glossar-eintrag .ge-formel {
font-family: var(--mono); font-size: 0.82rem; color: var(--blau);
margin-left: 8px;
}
.glossar-eintrag p { margin: 4px 0 0; font-size: 0.93rem; }
.glossar-eintrag .ge-quer { font-size: 0.82rem; color: var(--tinte-2, var(--tinte)); font-style: italic; }
.glossar-eintrag .ge-quer a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--blau-rand); }
.glossar-eintrag .ge-quer a:hover { color: var(--blau); border-bottom-color: var(--blau); }
/* Glossar: Umschalter A–Z / Themengebiet */
.gl-modus {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin: 10px 0 14px; padding: 10px 14px;
background: var(--papier-2); border: 1px solid var(--linie); border-radius: 8px;
}
.gl-modus .gm-label { font-family: var(--mono); font-size: 0.82rem; color: var(--tinte-2); margin-right: 4px; }
.gm-btn {
padding: 6px 14px; border: 1px solid var(--linie); background: var(--weiss);
border-radius: 6px; cursor: pointer; font-family: var(--mono); font-size: 0.82rem; transition: 0.12s;
}
.gm-btn:hover { border-color: var(--blau); }
.gm-btn.aktiv { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.gl-lg-nav a { width: auto; height: auto; padding: 5px 11px; }
.gl-anzahl {
font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--tinte-2);
letter-spacing: 0; text-transform: none; margin-left: 8px;
}
/* Formelsammlung: Lerngebiet-Block mit Formelzeilen */
.fs-block {
border: 1px solid var(--linie); border-radius: 10px;
padding: 16px 18px; margin: 16px 0; box-shadow: var(--s);
background: var(--weiss);
}
.fs-block > h3 {
font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
margin: 0 0 4px; color: var(--tinte);
}
.fs-thema {
margin: 12px 0 4px; font-family: var(--mono); font-size: 0.68rem;
font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--orange);
}
.fs-zeile {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
padding: 5px 0; border-bottom: 1px solid var(--linie);
}
.fs-zeile:last-child { border-bottom: none; }
.fs-name { flex: 0 0 200px; font-size: 0.9rem; color: var(--tinte); }
.fs-formel { flex: 1 1 200px; font-size: 0.96rem; }
.fs-quer {
font-family: var(--mono); font-size: 0.74rem; color: var(--blau);
text-decoration: none; white-space: nowrap;
}
.fs-quer:hover { text-decoration: underline; }
@media (max-width: 640px) { .fs-name { flex-basis: 100%; } }
/* ══════════════════════════════════════════════════════════════════════
Kein horizontaler Overflow auf schmalen Viewports
──────────────────────────────────────────────────────────────────────
Ursache war nicht ein einzelnes Element, sondern die min-content-Breite
nicht umbrechbarer Inhalte (MathJax-Formeln, Canvas mit width-Attribut,
breite Tabellen). Ein Grid-Track «1fr» = minmax(auto, 1fr) übernimmt diese
min-content-Breite als Minimum und zieht die ganze Seite auf — deshalb
oben minmax(0, 1fr) und hier die Begrenzung der Inhalte selbst.
Breite Formeln und Tabellen scrollen ab jetzt in sich selbst, statt die
Seite zu sprengen.
══════════════════════════════════════════════════════════════════════ */
mjx-container { max-width: 100%; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; }
/* Lange Inline-Formeln (z.B. Mengenschreibweisen) dürfen ebenfalls scrollen. */
mjx-container:not([display="true"]) { overflow-x: auto; overflow-y: hidden; vertical-align: middle; }
canvas, svg, img { max-width: 100%; }
table { max-width: 100%; }
/* MathJax legt für Screenreader eine unsichtbare MathML-Kopie ab (position:absolute).
Sie ist visuell geclippt, zählt aber zur Scrollbreite und schob die Seite auf.
Sie bleibt im DOM (und damit für Screenreader lesbar), nimmt aber keinen Platz mehr.
MathJax setzt selbst «width: 100% !important» und injiziert sein Stylesheet nach
diesem — deshalb braucht es hier die höhere Spezifität über «body». */
body mjx-assistive-mml,
body mjx-assistive-mml[display="block"] {
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Auf schmalen Viewports scrollen breite Tabellen und mehrspaltige Info-Raster
in sich selbst. overflow-x != visible setzt ihre min-content-Breite auf 0 und
nimmt damit den Zug von der Seite. Auf dem Desktop bleibt alles unverändert. */
@media (max-width: 900px) {
/* Viele Seiten geben ihren Tabellen eigene Klassen mit «overflow: hidden»
(für den Radius); die stünden sonst über dieser Regel und würden den Inhalt
abschneiden statt ihn scrollen zu lassen. Deshalb hier !important. */
table {
display: block !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
.anw-tabelle-wrap, .daten-wrap, .dia-wrap, .iv-tabelle,
.pot-vis, .sb-eigen, .fak-uebung, .entscheid, .workflow-grid,
.qual-grid, .formen-grid, .diag-grid, .urliste-demo, .tk-demo {
overflow-x: auto;
}
}
/* ── SUCHE (Header rechts) ───────────────────────────────────
Markup baut nav.js: .suche > .such-lupe + .such-feld + .such-panel
Logik in suche.js, Index in suchindex.js (generiert).
Farben: Site-Chrome — also Blau (Mathe-Leitfarbe), nicht Bernstein.
───────────────────────────────────────────────────────────── */
.suche { position: relative; flex-shrink: 0; }
.such-lupe { display: none; background: none; border: none; cursor: pointer; font-size: 1rem; padding: 4px 6px; line-height: 1; }
.such-feld {
font-family: var(--sans); font-size: 0.8rem; color: var(--tinte);
width: 190px; padding: 5px 11px; border-radius: 20px;
border: 1.5px solid var(--linie); background: var(--papier);
transition: width 0.18s, border-color 0.15s, background 0.15s;
}
.such-feld::placeholder { color: var(--tinte-2); opacity: 0.75; }
.such-feld:focus {
outline: none; width: 260px;
border-color: var(--blau-rand); background: var(--weiss);
box-shadow: 0 0 0 3px var(--blau-hell);
}
.such-feld::-webkit-search-cancel-button { cursor: pointer; }
.such-panel {
display: none; position: absolute; top: calc(100% + 8px); right: 0;
width: 460px; max-width: calc(100vw - 28px);
max-height: 70vh; overflow-y: auto;
background: var(--weiss); border: 1px solid var(--linie);
border-radius: 10px; box-shadow: var(--sl); padding: 6px; z-index: 300;
}
.such-panel.offen { display: block; }
.sr {
display: flex; gap: 10px; align-items: baseline;
padding: 8px 11px; border-radius: 7px; text-decoration: none; color: inherit;
}
.sr:hover, .sr.sr-aktiv { background: var(--blau-hell); text-decoration: none; }
.sr-nr { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; color: var(--blau); min-width: 30px; flex-shrink: 0; }
.sr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-t { font-size: 0.83rem; font-weight: 700; color: var(--tinte); line-height: 1.35; }
.sr-q { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--tinte-2); }
.sr-x { font-size: 0.75rem; color: var(--tinte-2); line-height: 1.5; }
.sr-x mark, .sr-t mark { background: var(--blau-hell); color: var(--blau); font-weight: 700; padding: 0 1px; border-radius: 2px; }
.sr-leer { padding: 14px 12px; font-size: 0.8rem; color: var(--tinte-2); }
.sr-fuss {
border-top: 1px solid var(--linie); margin-top: 4px; padding: 7px 11px 3px;
font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.5px; color: var(--tinte-2);
}
/* Sprungziele nicht unter den klebenden Header rutschen lassen
(gilt für die Sprünge aus dem Inhaltsverzeichnis und aus der Suche) */
.content h2[id], .content h3[id] { scroll-margin-top: 66px; }
@media (max-width: 1024px) {
.suche { margin-left: auto; }
.burger { margin-left: 4px; }
}
@media (max-width: 640px) {
/* Platz ist knapp: nur die Lupe zeigen, Feld klappt darunter auf */
.such-lupe { display: block; }
.such-feld { display: none; }
.suche.offen .such-feld {
display: block; position: fixed; left: 10px; right: 10px; top: 62px;
width: auto; z-index: 320;
}
.such-panel { position: fixed; top: 104px; left: 10px; right: 10px; width: auto; max-width: none; }
}
/* §10: Links im Über-Panel bleiben inline — .dd-menu a { display:flex } macht
sonst jeden Link im Panel zu einer eigenen Zeile und reisst Links mitten
im Satz aus dem Fliesstext. */
.ueber-panel .meta-link { display: inline; padding: 0; }