/* Gemeinsames Layout der Lernplattform Physik GF
   Designsystem «Signal Night» (DESIGN.md): ein nächtliches Zeichenbrett, auf dem die Farbe zeigt, welche Art Inhalt man sieht.
   Tiefer Grund mit 32-px-Raster, heller grosser Text, keine Rundungen, keine Schatten.
   Zonen: Blau für Lernaufgaben, Pink für Übungschecks und Fortschritt, Türkis für Grundlagen. Gelb nur für Aktionen.
   Titel immer einfarbig. Richtig/falsch und Warnungen haben keine eigene Farbe: Sie zeigen sich mit Symbol, Linie und Wort.
   Schriften lokal in assets/fonts (SIL Open Font License): Chakra Petch für Titel und Zahlen, Atkinson Hyperlegible für alles Lesen. */

@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra-petch-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben aus DESIGN.md. Dunkel ist der Standard; das helle Thema unten folgt der Einstellung des Geräts. */
  --brett: #15122b;          /* background: das Zeichenbrett */
  --tafel: #1d1838;          /* surface: Flächen, Kopfband, Kacheln */
  --tafel-hoch: #221d45;     /* surface-raised: neutrale Karten, Aufgaben, Rückmeldungen */
  --tinte: #f3efff;          /* on-surface: alle Titel und aller Fliesstext */
  --leise: #b3a9da;          /* muted: Beschriftungen und Metadaten, nie für Sätze */
  --linie: #b3a9da;          /* outline: jede Haarlinie */
  --linie-leise: rgba(179, 169, 218, 0.35);   /* Trennlinien innerhalb einer Fläche */
  --raster-linie: rgba(243, 239, 255, 0.05);  /* Zeichenraster */
  --gelb: #e6c766;           /* primary: einzige Aktionsfarbe (Links, Aufklapper, Fokus), nie in Titeln */
  --gelb-flaeche: #e6c766;   /* Füllung von Knöpfen; im hellen Thema heller als --gelb */
  --auf-gelb: #15122b;
  /* Zonen: Fläche, Rand, Beschriftung, weicher Text; immer als ganzer Satz verwendet */
  --lern-flaeche: #1f2b6b;   /* Lernaufgaben */
  --lern-linie: #6f7dff;
  --lern-label: #aeb6ff;
  --lern-weich: #cfd3ff;
  --check-flaeche: #3a1838;  /* Übungschecks, was fürs Portfolio zählt, gefüllter Fortschritt */
  --check-linie: #ff4fa0;
  --check-label: #ff8cc4;
  --check-weich: #f5c9df;
  --theorie-flaeche: #10363a; /* Grundlagen mit Formeln und Definitionen, Kennung einer Kompetenz */
  --theorie-linie: #3ddbb8;
  --theorie-weich: #bfefe3;
  --stufe-g: #63e6be;        /* Stufenfarben (level-easy, -medium, -hard), nur auf Stufen-Marken und als Linie oben auf Kacheln */
  --stufe-f: #5bc0ff;
  --stufe-e: #ff6b3d;        /* keine Warnfarbe */
  --auf-check: #15122b;      /* Schrift auf gefülltem Pink */
  --theorie-tabellenlinie: rgba(61, 219, 184, 0.45);
  --sim-raster: rgba(179, 169, 218, 0.16);
  --schleier: rgba(21, 18, 43, 0.8);

  --schrift-titel: "Chakra Petch", "Arial Narrow", Arial, system-ui, sans-serif;
  --schrift-text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Abstände (Basis 8 px) und Raster */
  --xs: 0.5rem;
  --s: 1rem;
  --m: 1.5rem;
  --l: 2.75rem;
  --raster: 32px;
  --breite: 72rem;
  --textbreite: 47.5rem;     /* höchstens etwa 72 Zeichen pro Zeile */

  color-scheme: dark;
}

/* Helles Thema «Draft» aus dem Design-System «Lernplattform Physik»: dieselben Zonen auf dem Lila des Zeichenpapiers.
   Es gilt, wenn das Gerät auf hell steht. Gelb bleibt die Füllung der Knöpfe; Links, Aufklapper und Linien
   sind dunkles Messing (action-ink), weil Gelb auf Lila nicht lesbar ist. */
@media (prefers-color-scheme: light) {
  :root {
    --brett: #e4dcf7;
    --tafel: #efeafb;
    --tafel-hoch: #ffffff;
    --tinte: #1b1530;
    --leise: #4a3f6b;
    --linie: #4a3f6b;
    --linie-leise: rgba(74, 63, 107, 0.3);
    --raster-linie: rgba(27, 21, 48, 0.07);
    --gelb: #7a5c00;
    --gelb-flaeche: #e6c766;
    --auf-gelb: #1b1530;
    --lern-flaeche: #dce0ff;
    --lern-linie: #3a4be0;
    --lern-label: #2f3fc8;
    --lern-weich: #3b3f7a;
    --check-flaeche: #fce0ee;
    --check-linie: #c21f6e;
    --check-label: #a3155c;
    --check-weich: #6b2347;
    --theorie-flaeche: #d5f2ea;
    --theorie-linie: #15745f;
    --theorie-weich: #1e5a4c;
    --auf-check: #ffffff;   /* abweichend von on-accent: dunkle Schrift auf #c21f6e erreicht nur 2.9:1 */
    --theorie-tabellenlinie: rgba(21, 116, 95, 0.4);
    --sim-raster: rgba(74, 63, 107, 0.18);
    --schleier: rgba(228, 220, 247, 0.85);
    color-scheme: light;
  }
}

/* ---------- Grundlagen ---------- */

* { box-sizing: border-box; border-radius: 0; }

html { scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--tinte);
  background-color: var(--brett);
  background-image:
    linear-gradient(var(--raster-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-linie) 1px, transparent 1px);
  background-size: var(--raster) var(--raster);
  background-position: -1px -1px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* Links sind gelb wie alles Anklickbare, das keine Karte ist */
a { color: var(--gelb); text-decoration-color: currentColor; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }

/* Titel in Chakra Petch, immer Grossbuchstaben und immer einfarbig */
h1, h2 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--tinte);
}

h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem); line-height: 1.02; margin: 0 0 var(--s); max-width: 24ch; }
h2 { font-size: 1.625rem; line-height: 1.15; margin: var(--l) 0 var(--s); }
h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; margin: 0 0 var(--xs); text-wrap: balance; }
h4 { font-size: 1.125rem; font-weight: 700; margin: var(--m) 0 0.25rem; }

strong, b { font-weight: 700; }

p, ul, ol { max-width: var(--textbreite); }

code { font-family: var(--schrift-mono); font-size: 0.9em; }

/* Gedämpft nur für Beschriftungen und Metadaten; ganze Sätze bleiben hell */
.leise { color: var(--leise); }
p.leise { color: var(--tinte); }

.nur-bildschirmleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.springen {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  background: var(--gelb-flaeche);
  color: var(--auf-gelb);
  font-weight: 700;
  padding: var(--xs) var(--s);
}
.springen:focus { top: var(--xs); }

/* Breite und Seitenränder */
.breite {
  max-width: var(--breite);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.inhalt { padding-block: var(--l) 4rem; }
.inhalt > :first-child { margin-top: 0; }

/* Vorzeile, Beschriftungen und Kennungen: Atkinson Hyperlegible 700, 12 px, Grossbuchstaben, gesperrt (label) */
.vorzeile,
.eckdaten dt,
.chip,
.status,
table.raster thead th,
.termine .wann,
fieldset.frage legend,
.seitenfuss {
  font-family: var(--schrift-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vorzeile { color: var(--leise); margin: 0 0 var(--s); }
.vorzeile a { color: inherit; }
.vorzeile .kennung { font-size: inherit; letter-spacing: inherit; }

.kennung { font-weight: 700; font-size: 0.9em; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Metadaten wie Zeitbedarf oder «geändert am» (meta) */
.meta { font-size: 0.9375rem; line-height: 1.5; color: var(--leise); }

.einleitung { font-size: 1.25rem; line-height: 1.6; color: var(--tinte); max-width: var(--textbreite); margin: 0; }

/* ---------- Seitenkopf und Navigation ---------- */

.seitenkopf {
  background: var(--brett);
  border-bottom: 1px solid var(--linie);
}

.seitenkopf .breite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xs) var(--l);
  min-height: 4rem;
  padding-block: var(--xs);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tinte);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.marke svg { width: 2rem; height: 2rem; flex: none; }
.marke svg .ring { stroke: var(--tinte); }
.marke svg .rad { stroke: var(--lern-linie); }

.hauptnav { display: flex; flex-wrap: wrap; gap: 0.25rem var(--m); }
.hauptnav a {
  color: var(--leise);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.hauptnav a:hover { color: var(--tinte); }
.hauptnav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--tinte); }

.konto { margin-left: auto; display: flex; align-items: center; gap: var(--s); font-size: 0.95rem; }
.konto .wer { color: var(--leise); font-weight: 700; }
.konto a.wer { text-decoration: none; }
.konto a.wer:hover { color: var(--tinte); text-decoration: underline; }
.konto form { margin: 0; display: flex; }
.konto button {
  font: inherit;
  font-weight: 700;
  color: var(--tinte);
  background: transparent;
  border: 1px solid var(--linie);
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.konto button:hover { background: var(--tinte); color: var(--brett); }

/* ---------- Kopfband: Fläche mit Titel links und Zeichnung rechts ---------- */

.kopfband {
  background: var(--tafel);
  border-bottom: 1px solid var(--linie);
}

.kopfband .breite { position: relative; padding-block: 2.25rem; }
.kopfband .breite > * { max-width: var(--textbreite); }
/* Die Vorzeile zeigt, was für eine Seite es ist: Kompetenz türkis, Lernaufgabe blau, Übungscheck pink */
.kopfband.kompetenz .vorzeile { color: var(--theorie-linie); }
.kopfband.lernaufgabe .vorzeile { color: var(--lern-label); }
.kopfband.check .vorzeile { color: var(--check-label); }

/* Zahnradgetriebe als Zeichnung am rechten Rand, nur wo Platz ist */
@media (min-width: 64rem) {
  .kopfband .breite { min-height: 18rem; }
  .kopfband .breite::after {
    content: "";
    position: absolute;
    right: max(16px, env(safe-area-inset-right, 0px));
    top: 50%;
    width: 15rem;
    height: 13.5rem;
    transform: translateY(-50%);
    background: url("../bilder/getriebe.svg") no-repeat center / contain;
    pointer-events: none;
  }
}

/* Kennzahlen im Kopfband einer Lernaufgabe */
.eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--xs);
  margin: var(--m) 0 0;
}
.eckdaten div { border: 1px solid var(--linie); padding: 0.7rem var(--s); min-width: 0; }
.eckdaten dt { color: var(--leise); }
.eckdaten dd { margin: 0.15rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Reiter, z. B. die Lerneinheiten auf der Seite eines Jahres */
.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs);
  border-bottom: 1px solid var(--linie);
  margin: 0 0 var(--l);
}
.reiter a {
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-bottom: 0;
  margin-bottom: -1px;
  color: var(--leise);
  font-weight: 700;
  text-decoration: none;
}
.reiter a:hover { color: var(--tinte); border-color: var(--linie-leise); }
.reiter a[aria-current="page"] {
  color: var(--tinte);
  background: var(--tafel);
  border-color: var(--linie);
  border-bottom: 1px solid var(--tafel);
}

/* ---------- Bausteine ---------- */

.karte {
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  color: var(--tinte);
  padding: 1.25rem var(--m);
  margin: var(--s) 0;
}
.karte > :last-child { margin-bottom: 0; }
.karte h2, .karte h3 { color: var(--tinte); }
.karte h3 a { color: inherit; text-decoration: none; }
.karte h3 a:hover { text-decoration: underline; }
.karte .vorzeile { margin-bottom: var(--xs); }
.karte p { margin: 0.35rem 0 0; }

.karte.kommt { background: transparent; border-style: dashed; }
.karte.kommt h3, .karte.kommt p { color: var(--leise); }

/* Karten in Zonen: Lernaufgabe blau, Übungscheck pink. Die ganze Karte ist ein Link (über den Link im Titel);
   weitere Links in der Karte liegen darüber und bleiben einzeln anklickbar. */
.karte.lern { --zone: var(--lern-flaeche); --zone-linie: var(--lern-linie); --zone-label: var(--lern-label); --zone-weich: var(--lern-weich); }
.karte.check { --zone: var(--check-flaeche); --zone-linie: var(--check-linie); --zone-label: var(--check-label); --zone-weich: var(--check-weich); }
.karte.lern, .karte.check { position: relative; background: var(--zone); border-color: var(--zone-linie); padding: 1.125rem 1.25rem; }
.karte.lern .vorzeile, .karte.check .vorzeile { color: var(--zone-label); }
.karte.lern .meta, .karte.check .meta { color: var(--zone-weich); }
.karte .karte-link::after { content: ""; position: absolute; inset: 0; }
.karte.lern:hover, .karte.check:hover { outline: 1px solid var(--zone-linie); outline-offset: -4px; }
.karte .karte-link:hover { text-decoration: none; }
.karte .karte-link:focus-visible { outline: none; }
.karte.lern:has(.karte-link:focus-visible), .karte.check:has(.karte-link:focus-visible) { outline: 2px solid var(--gelb); outline-offset: 2px; }
.karte.lern a:not(.karte-link), .karte.check a:not(.karte-link), .karte .praesenz { position: relative; z-index: 1; }
.karte.lern a:not(.karte-link), .karte.check a:not(.karte-link) { color: var(--tinte); }

/* Kartenlisten: drei gleich breite Spalten, auf dem Smartphone untereinander */
.raster-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s);
}
@media (max-width: 960px) { .raster-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .raster-karten { grid-template-columns: minmax(0, 1fr); } }
.raster-karten > .karte { margin: 0; min-width: 0; }

/* Was ins Portfolio gehört: gelber Rahmen, gelbe Beschriftung, Text hell */
.portfolio-notiz { border: 1px solid var(--gelb); padding: 1.25rem var(--m); margin: var(--l) 0 0; max-width: var(--textbreite); }
.portfolio-notiz .vorzeile { color: var(--gelb); margin-bottom: var(--xs); }
.portfolio-notiz p { margin: 0.5rem 0 0; }
.portfolio-notiz > p:first-of-type { margin-top: 0; }

button,
.knopf {
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: 0.8125rem 1.625rem;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knopf:hover { border-color: var(--tinte); background: var(--linie-leise); }
button.haupt,
.knopf.haupt { background: var(--gelb-flaeche); color: var(--auf-gelb); border-color: var(--gelb); }
button.haupt:hover,
.knopf.haupt:hover { background: var(--tinte); border-color: var(--tinte); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.klein { padding: 0.3rem 0.7rem; font-size: 0.9rem; }
.knopf.gefahr { border-style: dashed; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--xs) var(--s); align-items: center; margin-top: var(--m); }

label { font-weight: 700; display: block; margin: var(--s) 0 0.35rem; }

input[type="text"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="datetime-local"],
select,
textarea {
  font: inherit;
  width: 100%;
  padding: 0.75rem var(--s);
  border: 1px solid var(--linie);
  background: var(--brett);
  color: var(--tinte);
}
input:focus, select:focus, textarea:focus { border-color: var(--gelb); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--gelb); outline-offset: 0; }
textarea { min-height: 9rem; resize: vertical; }
input[readonly] { color: var(--leise); border-style: dashed; }
input[type="file"] { font: inherit; max-width: 100%; color: var(--tinte); }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  margin-right: var(--s);
  padding: 0.5rem 1rem;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gelb); }
::placeholder { color: var(--leise); opacity: 1; }

ul.liste, ol.liste { padding-left: 1.2rem; }
ul.liste li, ol.liste li { margin: 0.35rem 0; }
ul.liste li::marker { color: var(--leise); }

/* Hinweise: Fläche mit Haarlinie und Linien-Symbol; die Art erkennt man am Symbol, nicht an einer Farbe */
.hinweis,
.rueckmeldung {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cpath d='M12 11v6M12 7v.5'/%3E%3C/svg%3E");
  position: relative;
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  color: var(--tinte);
  padding: 1rem 1.25rem 1rem 3.25rem;
  margin: var(--s) 0;
  max-width: var(--textbreite);
}
.hinweis::before,
.rueckmeldung::before {
  content: "";
  position: absolute;
  left: var(--s);
  top: 1.15rem;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--tinte);
  -webkit-mask: var(--symbol) no-repeat center / contain;
  mask: var(--symbol) no-repeat center / contain;
}
.hinweis strong, .rueckmeldung strong { color: var(--tinte); }
.hinweis.warnung, .hinweis.fehler {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 3 22 21H2Z'/%3E%3Cpath d='M12 10v5M12 17.5v.5'/%3E%3C/svg%3E");
  border-color: var(--tinte);
}
.hinweis.ok, .rueckmeldung.richtig {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
}

/* Stufen: Jede Stufe hat eine eigene Farbe (Mint, Himmelblau, Glut), dazu steht ihr Name immer dabei.
   Die Farbe kommt nur auf der Stufen-Marke (Name im Farbfeld) und als Linie oben auf einer Kachel vor, nie als Schriftfarbe. */
.stufe-G { --stufe: var(--stufe-g); }
.stufe-F { --stufe: var(--stufe-f); }
.stufe-E { --stufe: var(--stufe-e); }
.stufen-marke {
  display: inline-block;
  background: var(--stufe);
  color: var(--auf-gelb);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chip {
  display: inline-block;
  color: var(--leise);
  border: 1px solid var(--linie);
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}

/* Ein Kompetenzraster im Portfolio: Fortschritt, Modulkarten, Anmeldung. Ein zweites Raster ist mit Abstand und Linie abgesetzt. */
.raster-gruppe + .raster-gruppe { margin-top: var(--l); padding-top: var(--l); border-top: 1px solid var(--linie-leise); }
form.anmeldung { margin-top: var(--m); }

/* Einträge im Portfolio: eine Zeile pro Kompetenz mit Titel, Stand, Nachweis und neuem Feedback */
.eintraege { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--linie-leise); }
.eintraege li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 14rem) auto;
  align-items: center;
  gap: var(--xs) var(--m);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie-leise);
}
.eintraege .eintrag-titel { font-weight: 700; text-decoration: none; min-width: 0; }
.eintraege .eintrag-titel:hover { text-decoration: underline; text-decoration-color: var(--gelb); }
.eintraege .eintrag-titel .kennung { display: block; color: var(--leise); font-size: 0.8rem; }
.eintraege .status { margin: 0; padding: 0; border: 0; }
.eintraege .eintrag-info { color: var(--leise); font-size: 0.95rem; }
.eintraege .markierung-neu { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .eintraege li { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .eintraege .markierung-neu { justify-self: start; }
}

/* ---------- Fortschritt (bewusst ohne Notenpunkte: Im Zentrum steht das Lernen) ---------- */

.belohnung {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s) var(--m);
  margin: 0 0 var(--l);
  max-width: none;
}
.fortschritt .beschriftung {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}
.fortschritt { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--xs); }
.fortschritt .beschriftung strong { color: var(--tinte); }

/* Segmentierter Fortschritt: ein Segment pro Kompetenz, nie ein durchgehender Balken */
.segmente { display: flex; flex-wrap: wrap; gap: var(--xs); margin: 0; padding: 0; list-style: none; max-width: none; }
.segmente li { flex: 1 0 1.25rem; max-width: 4rem; height: 12px; border: 1px solid var(--linie); }
.segmente li.voll { background: var(--check-linie); border-color: var(--check-linie); }
.karte .segmente { margin: var(--s) 0 var(--xs); }

/* ---------- Kompetenzraster ---------- */


/* Die Hülle ragt um den Zellabstand nach aussen, damit die Kacheln bündig mit dem Text stehen.
   Die Tabelle ist genau so breit wie die Hülle: Ein Scrollbalken erscheint nur, wenn das Raster wirklich nicht Platz hat. */
.raster-huelle { overflow-x: auto; overflow-y: hidden; margin-inline: calc(-1 * var(--xs)); }

table.raster {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--xs);
  table-layout: fixed;
}
table.raster caption { text-align: left; padding: 0 var(--xs); }
table.raster th { text-align: left; vertical-align: top; padding: 0.25rem var(--xs); }
table.raster thead th { color: var(--tinte); border-bottom: 1px solid var(--linie); padding-bottom: var(--xs); }
table.raster thead th .bis { display: block; margin-top: var(--xs); color: var(--leise); letter-spacing: 0.08em; }
table.raster tbody th { width: 11rem; font-weight: 700; font-size: 1.125rem; line-height: 1.3; padding-top: var(--s); }
table.raster tbody th .modul-name { display: block; margin-top: 0.25rem; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--leise); }
/* Gleich hohe Kacheln: Die Zelle bekommt eine Mindesthöhe, die Tabelle streckt sie auf die Höhe der Zeile,
   und .zellen füllt sie aus. Mehrere Kacheln in einer Zelle teilen sich die Höhe. */
table.raster td { vertical-align: top; padding: 0; height: 1px; }
.zellen { display: flex; flex-direction: column; gap: var(--xs); height: 100%; }
/* Auf schmalen Bildschirmen fehlt der Tabellenkopf; dann steht die Stufen-Marke über den Kacheln. */
.stufe-schmal { display: none; }

.kompetenz-zelle {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: var(--tafel);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--stufe, var(--linie));
  padding: 0.85rem var(--s);
  color: var(--tinte);
  text-decoration: none;
}
a.kompetenz-zelle:hover { outline: 1px solid var(--tinte); outline-offset: -4px; }
.kompetenz-zelle .kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--xs);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
}
.kompetenz-zelle .titel { display: block; font-weight: 700; margin: 0.3rem 0; line-height: 1.3; }
.kompetenz-zelle .ichkann { display: block; font-size: 1rem; color: var(--tinte); line-height: 1.5; margin-bottom: 0.6rem; }
.kompetenz-zelle.gesperrt { background: transparent; border-style: dashed; border-color: var(--linie); border-top-color: var(--stufe, var(--linie)); }
.kompetenz-zelle.gesperrt .kopf { color: var(--leise); }
.kompetenz-zelle.gesperrt .titel, .kompetenz-zelle.gesperrt .ichkann { color: var(--leise); }

/* Stand einer Kompetenz: Segment davor, gefüllt (pink) heisst gezeigt */
.status {
  display: flex;
  align-items: center;
  gap: var(--xs);
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie-leise);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--leise);
}
.status::before { content: ""; flex: none; width: 1.5rem; height: 12px; border: 1px solid var(--linie); }
.status.arbeit { color: var(--tinte); }
.status.arbeit::before { border-color: var(--check-linie); }
.status.gezeigt { color: var(--tinte); }
.status.gezeigt::before { background: var(--check-linie); border-color: var(--check-linie); }

@media (max-width: 760px) {
  table.raster, table.raster tbody, table.raster tr, table.raster th, table.raster td { display: block; width: auto; }
  .raster-huelle { margin-inline: 0; }
  table.raster td { height: auto; }
  table.raster thead { display: none; }
  table.raster tbody th { width: auto; padding: var(--m) 0 0.25rem; }
  table.raster td:empty { display: none; }
  .stufe-schmal { display: block; margin-top: var(--xs); }
}

/* ---------- Termine ---------- */

.termine { list-style: none; padding: 0; margin: 0; max-width: var(--textbreite); border-top: 1px solid var(--linie); }
.termine li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linie-leise);
}
.termine .wann { color: var(--leise); padding-top: 0.15rem; overflow-wrap: anywhere; hyphens: manual; }
@media (max-width: 520px) { .termine li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }

/* ---------- Grundlagen einer Lernaufgabe (statt Skript) ---------- */

/* Neutraler Kasten (z. B. «Das brauchst du schon», «Kurz gefragt») und Aufgabe: erhöhte Fläche mit Haarlinie */
.kasten {
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  padding: 1.25rem var(--m);
  margin: var(--s) 0;
  max-width: var(--textbreite);
}
.kasten > :last-child { margin-bottom: 0; }
.kasten p { margin: 0.35rem 0 0; }
.kasten .kasten-titel {
  margin: 0;
  color: var(--leise);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Aufklapper «Resultat zeigen», «Musterlösung zeigen»: gelb wie alle Aktionen */
.kasten summary {
  cursor: pointer;
  margin-top: var(--s);
  color: var(--gelb);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
}
.kasten details[open] summary { margin-bottom: 0.35rem; }
/* Aufgabe: oben eine 4-px-Linie in der Farbe der Stufe ihrer Kompetenz */
.kasten.aufgabe { border-top: 4px solid var(--stufe, var(--linie)); }

/* Grundlagen: türkise Zone mit Formeln, Definitionen, Beispielen und Merksätzen */
.theorie {
  background: var(--theorie-flaeche);
  border: 1px solid var(--theorie-linie);
  padding: 1.125rem var(--m);
  margin: var(--s) 0;
  max-width: var(--textbreite);
}
.theorie > :first-child { margin-top: 0; }
.theorie > :last-child { margin-bottom: 0; }
.theorie > .vorzeile { color: var(--theorie-linie); margin-bottom: var(--xs); }
.theorie > .vorzeile + * { margin-top: 0; }
.theorie.merke { border-width: 2px; }
.theorie h3 { margin-top: var(--m); }
.theorie .kasten { background: transparent; border-color: var(--theorie-linie); max-width: none; }
.theorie .kasten .kasten-titel { color: var(--theorie-weich); }
.theorie .kasten.merke { border-width: 2px; }
.theorie figcaption, .theorie table.tabelle caption { color: var(--theorie-weich); }
.theorie table.tabelle th, .theorie table.tabelle td { border-color: var(--theorie-tabellenlinie); }
.kasten .loesung-zeile { margin: 0.2rem 0 0; }
/* Teilaufgaben untereinander mit a), b), c) */
ol.teile { list-style: none; counter-reset: teil; margin: var(--xs) 0 0; padding: 0; }
ol.teile > li { counter-increment: teil; position: relative; padding-left: 1.8em; margin: 0.25rem 0 0; }
ol.teile > li::before { content: counter(teil, lower-alpha) ")"; position: absolute; left: 0; font-weight: 700; color: var(--tinte); }
.loesung-zeile .teil-buchstabe { font-weight: 700; color: var(--tinte); }

/* Tabellen in den Grundlagen: Haarlinien, erste Spalte als Zeilenkopf */
.tabelle-huelle { max-width: 100%; overflow-x: auto; margin: var(--s) 0; }
table.tabelle { border-collapse: collapse; min-width: 20rem; }
table.tabelle caption { text-align: left; color: var(--leise); font-weight: 700; padding-bottom: var(--xs); }
table.tabelle th, table.tabelle td { border: 1px solid var(--linie-leise); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
table.tabelle thead th { color: var(--tinte); border-bottom: 1px solid var(--linie); }
table.tabelle tbody th { color: var(--tinte); font-weight: 700; }

/* Simulationen (assets/js/sim/): Leinwand, Regler, Messwerte */
.interaktiv {
  border: 1px solid var(--linie);
  background: var(--tafel-hoch);
  padding: var(--s);
  margin: var(--m) 0;
}
.interaktiv > .kasten-titel { margin: 0; color: var(--leise); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.interaktiv > p { max-width: var(--textbreite); }
.sim-buehne canvas { display: block; width: 100%; height: auto; background: var(--brett); border: 1px solid var(--linie-leise); }
.sim-regler { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--xs) var(--m); margin: var(--s) 0 0; }
.sim-regler label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--xs); font-weight: 700; margin: 0; }
.sim-regler input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--gelb); }
.sim-regler output { color: var(--gelb); font-variant-numeric: tabular-nums; }
.sim-knoepfe { display: flex; flex-wrap: wrap; gap: var(--xs); margin: var(--s) 0 0; }
.sim-anzeige { font-variant-numeric: tabular-nums; color: var(--tinte); margin: var(--xs) 0 0; }
.sim-buehne .tabelle-huelle { margin-bottom: 0; }
.sim-auswahl { display: flex; flex-wrap: wrap; gap: var(--xs) var(--m); margin: var(--s) 0 0; border: 0; padding: 0; }
.sim-auswahl legend { font-weight: 700; padding: 0; margin-bottom: 0.25rem; }
.sim-auswahl label { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; font-weight: 400; }

.formel-block {
  font-size: 1.3rem;
  color: var(--tinte);
  text-align: center;
  margin: var(--s) 0;
}
.bruch {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.15em;
  line-height: 1.2;
}
.bruch .zaehler { border-bottom: 1px solid currentColor; padding: 0 0.2em; }
.bruch .nenner { padding: 0 0.2em; }

.grundlagen-bild { margin: var(--m) 0; max-width: 30rem; }
.grundlagen-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--linie-leise); }
.grundlagen-bild figcaption { color: var(--leise); font-size: 0.9375rem; margin-top: var(--xs); }

/* ---------- Übungscheck ---------- */

fieldset.frage { margin: var(--s) 0; max-width: 48rem; min-width: 0; }
fieldset.frage legend { color: var(--leise); padding: 0 var(--xs); }
.fragetext { font-weight: 700; color: var(--tinte); margin-top: 0; }
.frage-bild { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 0 var(--s); border: 1px solid var(--linie-leise); }

.optionen { display: grid; gap: var(--xs); }
.option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-weight: 400;
  margin: 0;
  padding: 0.75rem var(--s);
  border: 1px solid var(--linie-leise);
  background: var(--brett);
  color: var(--tinte);
  cursor: pointer;
}
.option:hover { border-color: var(--linie); }
.option:has(input:checked) { border-color: var(--tinte); outline: 1px solid var(--tinte); outline-offset: -2px; }
.option input { margin-top: 0.4rem; flex: none; }

.zahleingabe { display: flex; gap: var(--xs); align-items: center; }
.zahleingabe .zahlfeld { width: 10rem; font-variant-numeric: tabular-nums; }

/* Rückmeldung: richtig mit Haken, «noch nicht» mit gestrichelter Linie und Messpunkt-Symbol */
.rueckmeldung:empty { display: none; }
.rueckmeldung { margin: var(--s) 0 0; }
.rueckmeldung.falsch {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E");
  border-style: dashed;
}
.rueckmeldung .erklaerung { display: block; margin-top: 0.35rem; }

.bestanden { border-color: var(--gelb); max-width: 48rem; }
.note-gross { font-family: var(--schrift-titel); font-size: 2.25rem; line-height: 1.1; margin: 0 0 var(--xs); color: var(--tinte); }
.note-gross { font-weight: 700; text-transform: uppercase; }

/* ---------- Portfolio-Plattform ---------- */

.formular { max-width: 32rem; }
.formular + .formular { margin-top: var(--m); }
.feldhilfe { font-size: 0.95rem; color: var(--leise); margin: 0.35rem 0 0; max-width: var(--textbreite); }
.feldhilfe + h3 { margin-top: var(--m); }
.kennung.gross { font-size: 1.125rem; padding: 0.15rem 0.5rem; border: 1px solid var(--linie); background: var(--brett); }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 var(--s); }

.eintrag { scroll-margin-top: var(--s); }
.eintrag .meta { font-size: 0.95rem; color: var(--leise); margin-bottom: var(--xs); }

fieldset.kriterien { border: 1px solid var(--linie); padding: var(--xs) var(--s) var(--s); margin: var(--s) 0; min-width: 0; }
fieldset.kriterien legend { font-weight: 700; padding: 0 var(--xs); }
.kriterium { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 400; margin: var(--xs) 0; }
.kriterium input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; flex: none; }
/* Kriterium, das die Plattform über einen bestandenen Übungscheck selbst anhakt */
.kriterium.automatisch .feldhilfe { display: block; }

/* Selbsteinschätzung: pro Kriterium Haken und daneben, wo man es sieht; auf dem Smartphone untereinander */
.kriterium-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: var(--xs) var(--m);
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--linie-leise);
}
.kriterium-zeile:first-of-type { border-top: 0; }
.kriterium-zeile .kriterium { margin: 0; }
.kriterium-zeile .kriterium.automatisch { grid-column: 1 / -1; }
.verweis { margin: 0; font-weight: 400; }
.verweis .verweis-titel { display: block; font-size: 0.9375rem; color: var(--leise); margin-bottom: 0.2rem; }
.verweis input { padding: 0.5rem 0.75rem; }
@media (max-width: 640px) {
  .kriterium-zeile { grid-template-columns: minmax(0, 1fr); }
  .verweis { padding-left: 1.9rem; }
}
.verweis-angabe { display: block; color: var(--tinte); font-weight: 700; margin-top: 0.15rem; }
.eintrag-formular h3 { margin-top: var(--l); }
.eintrag-formular h3:first-of-type { margin-top: var(--m); }
textarea.kurz { min-height: 4.5rem; }
.feedback.wunsch { border-style: dashed; }

.journal-eintrag { border-top: 1px solid var(--linie-leise); padding: var(--s) 0; }
.journal-eintrag:first-child { border-top: none; }
.journal-eintrag p { margin: 0.25rem 0; white-space: pre-wrap; }

.feedback {
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  color: var(--tinte);
  padding: 0.75rem var(--s);
  margin: var(--s) 0;
  max-width: var(--textbreite);
}
.feedback p { margin: 0.25rem 0; }
.feedback .meta, .journal-eintrag .meta { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--leise); }

ul.dateien { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s); margin: var(--s) 0; max-width: none; }
ul.dateien li { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
ul.dateien img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--linie); display: block; }
ul.dateien .pdf {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--linie);
  background: var(--tafel); font-weight: 700; letter-spacing: 0.16em; text-decoration: none;
}
ul.dateien .dateiname { font-size: 0.85rem; color: var(--leise); overflow-wrap: anywhere; }
ul.dateien .entfernen { font-weight: 400; font-size: 0.9rem; margin: 0; display: flex; gap: var(--xs); align-items: center; }

.nachweis { white-space: normal; background: var(--tafel-hoch); border: 1px solid var(--linie); color: var(--tinte); padding: 0.75rem var(--s); max-width: var(--textbreite); }
ul.ankreuzliste { list-style: none; padding: 0; }
ul.ankreuzliste li { display: flex; gap: var(--xs); margin: 0.35rem 0; }
ul.ankreuzliste li.ja { color: var(--tinte); }
ul.ankreuzliste li.nein { color: var(--leise); }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--l); }
@media (max-width: 860px) { .zweispaltig { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Übersicht der Klasse für die Lehrperson */
table.uebersicht { border-collapse: collapse; font-size: 0.95rem; min-width: 100%; background: var(--brett); }
table.uebersicht th, table.uebersicht td { border: 1px solid var(--linie-leise); padding: 0; text-align: center; white-space: nowrap; }
table.uebersicht thead th { padding: 0.45rem 0.55rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--leise); }
table.uebersicht thead th abbr { text-decoration: none; }
table.uebersicht tbody th { text-align: left; padding: 0.45rem 0.65rem; position: sticky; left: 0; background: var(--tafel); font-weight: 700; }
table.uebersicht td:last-child { padding: 0.45rem 0.65rem; color: var(--leise); }
table.uebersicht td a { display: block; padding: 0.45rem 0.55rem; text-decoration: none; color: inherit; }
table.uebersicht td a:hover { background: var(--linie-leise); }
table.uebersicht td.gezeigt { background: var(--check-linie); color: var(--auf-check); font-weight: 700; }
table.uebersicht td.arbeit { color: var(--tinte); font-weight: 700; }
table.uebersicht td.leer { color: var(--leise); }
table.uebersicht td.neu, .markierung-neu { outline: 2px solid var(--gelb); outline-offset: -2px; }
.markierung-neu { padding: 0 0.3rem; }

/* ---------- Seitenfuss ---------- */

.seitenfuss {
  border-top: 1px solid var(--linie);
  color: var(--leise);
  background: var(--brett);
  font-size: 0.8rem;
}
.seitenfuss .breite { padding-block: var(--m); display: flex; flex-wrap: wrap; gap: var(--xs) var(--m); justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .seitenkopf, .seitenfuss, .knopfreihe, button, input[type="file"] { display: none !important; }
  :root { --brett: #fff; --tafel: #fff; --tafel-hoch: #fff; --tinte: #000; --leise: #444; --linie: #888; --gelb: #000;
    --lern-flaeche: #fff; --check-flaeche: #fff; --theorie-flaeche: #fff; --lern-label: #000; --check-label: #000; --theorie-linie: #444; color-scheme: light; }
  body { background: #fff; }
  .kopfband .breite::after { display: none; }
  .karte, .kompetenz-zelle { break-inside: avoid; }
}

/* Markierung «Nur im Präsenzunterricht»: Haarlinie und Symbol (Personen im Schulzimmer), keine eigene Farbe */
.praesenz {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-1a6 6 0 0 1 12 0v1'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14a5 5 0 0 1 5 5v1'/%3E%3C/svg%3E");
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--linie);
  color: var(--tinte);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  vertical-align: middle;
  max-width: 100%;
}
.praesenz::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--symbol) no-repeat center / contain;
  mask: var(--symbol) no-repeat center / contain;
}

/* Termine im Präsenzunterricht: «Bearbeite vorher …» auf eigener Zeile */
.termine .was .leise { display: block; margin-top: 0.15rem; }
.sim-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--xs); margin-top: var(--xs); }

/* Formeln mit KaTeX: im Fliesstext etwa so gross wie der Text, abgesetzt etwas grösser; zu breite Formeln scrollen */
.tex .katex { font-size: 1.08em; }
.formel-block { overflow-x: auto; overflow-y: hidden; }
.formel-block .katex-display { margin: 0; }
.formel-block .tex .katex { font-size: 1em; }

/* Werkzeuge mit JSXGraph: Zeichenfläche ohne Rahmen von JSXGraph, Schrift der Plattform */
.jsx-brett { width: 100%; max-width: 46rem; border: 1px solid var(--linie-leise); border-radius: 0; background: var(--brett); touch-action: none; }
.jsx-brett text { font-family: var(--schrift-text); }
.jsx-brett text.jsx-achse { font-weight: 700; }
.jsx-brett div.jsx-achse { font-family: var(--schrift-text) !important; font-weight: 700;  /* JSXGraph setzt Arial direkt am Element */ line-height: 1; white-space: nowrap; }
.jsx-brett div.jsx-achse sub { font-size: 0.72em; }