/* MINTucation – gemeinsamer Rahmen aller Seiten: Farben, Schriften, Kopf- und Fußzeile.

   Jede Seite unter site/ bindet diese Datei ein; rahmen.py setzt den Verweis und Kopf/Fuß (python sync.py).
   Die Bereiche (Einheiten, Pylino, Lernanimationen …) definieren keine eigenen Grundfarben,
   sondern greifen auf die Variablen hier zu – so bleibt alles einheitlich.
   Klassen tragen das Präfix mt-, damit sie nicht mit den Klassen der Bereiche kollidieren.

   Gestaltung „Labor“: Millimeterpapier, Datenblatt-Linien, Logo aus vier Kacheln.
   Die Kachelfarben sind zugleich die Fächerfarben: M Mathe, I Informatik, N Physik, T Technik. */

:root {
  color-scheme: light dark;
  --bg: #FAFAF6;
  --tint: #EFF1EA;            /* leicht abgesetzte Fläche (Auswahl, Leisten) */
  --ink: #13171F;
  --muted: #5B6270;
  --rule: #13171F;            /* kräftige Linie */
  --hair: #D9DDD6;            /* feine Linie */
  --grid-fine: rgb(19 163 143 / 10%);
  --grid-bold: rgb(19 163 143 / 22%);
  --mint: #0E9F8A;            /* Akzent: Flächen, Pfeile, Linien */
  --mint-ink: #0B7A69;        /* Mint für Text, ausreichend Kontrast */
  --mint-soft: rgb(14 159 138 / 13%);
  --ok: #2B8A3E;
  --err: #D63A2F;
  --warn: #A15C00;
  --focus: #0E9F8A;
  --backdrop: rgb(19 23 31 / 45%);
  --fig: #13171F;
  --led: #FF4B3E;
  --point: #E8542A;
  --tile-ink: #13171F;        /* Schrift auf Kacheln und Mint-Flächen, auch im Dunkelmodus dunkel */
  --tile-line: #13171F;
  /* Fächer */
  --mathe: #C9B8F5;
  --info: #FFB4A6;
  --physik: #A6E6DC;
  --technik: #FFD95A;
  /* Schriften (Dateien in shared/fonts/) */
  --font-text: 'Lexend', system-ui, sans-serif;
  --font-head: 'Bricolage Grotesque', 'Lexend', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C1311;
    --tint: #15201C;
    --ink: #E8F0EC;
    --muted: #94A39C;
    --rule: #E8F0EC;
    --hair: #23302B;
    --grid-fine: rgb(80 230 200 / 7%);
    --grid-bold: rgb(80 230 200 / 15%);
    --mint: #4FE0C4;
    --mint-ink: #4FE0C4;
    --mint-soft: rgb(79 224 196 / 14%);
    --ok: #8FDC97;
    --err: #FF8F87;
    --warn: #F2C14E;
    --focus: #4FE0C4;
    --backdrop: rgb(0 0 0 / 60%);
    --fig: #E8F0EC;
    --tile-line: #E8F0EC;
  }
}

/* Kachel: Grundbaustein für Logo und Bereichsnummern */
.mt-kachel {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--c, var(--tint)); color: var(--tile-ink); border: 2px solid var(--tile-line);
  font: 800 1em/1 var(--font-head);
}
[data-f="mathe"] { --c: var(--mathe); }
[data-f="info"] { --c: var(--info); }
[data-f="physik"] { --c: var(--physik); }
[data-f="technik"] { --c: var(--technik); }

/* Kopf- und Fußzeile. Alle Eigenschaften werden gesetzt, damit Stile der Bereiche
   (z. B. header { … } in einer App) nicht durchschlagen. */
header.mt-kopf, footer.mt-fuss {
  display: block; flex: none; position: static; margin: 0; padding: 0; box-shadow: none; border-radius: 0;
  background: var(--bg); color: var(--ink); font: 350 1rem/1.4 var(--font-text); text-align: left;
}
.mt-kopf *, .mt-fuss * { box-sizing: border-box; }
.mt-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .mt-wrap { padding: 0 2.5rem; } }
.mt-breit .mt-wrap { max-width: none; }
@media (min-width: 48rem) { .mt-breit .mt-wrap { padding: 0 1.5rem; } }

header.mt-kopf { border-bottom: 1px solid var(--rule); }
.mt-kopf .mt-wrap {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 0.4rem 1.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.mt-logo {
  display: inline-flex; align-items: center; gap: 0.18rem; text-decoration: none; color: var(--ink);
  font: 800 1.2rem/1 var(--font-head); letter-spacing: -0.01em;
}
.mt-logo .mt-kachel { width: 1.6rem; height: 1.6rem; font-size: 1rem; border-width: 1.5px; }
.mt-logo-rest { margin-left: 0.2rem; }
.mt-nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin: 0; padding: 0; }
.mt-nav a {
  color: var(--muted); text-decoration: none;
  font: 500 0.75rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
}
.mt-nav a:hover, .mt-nav a[aria-current] { color: var(--ink); }
.mt-nav a[aria-current] { text-decoration: underline 2px var(--mint); text-underline-offset: 5px; }

footer.mt-fuss { border-top: 1px solid var(--rule); }
.mt-fuss .mt-wrap {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem;
  padding-top: 0.7rem; padding-bottom: 0.8rem;
  font: 500 0.72rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.mt-fuss nav { display: flex; gap: 1.25rem; }
.mt-fuss a { color: var(--muted); }
.mt-fuss a:hover, .mt-fuss a[aria-current] { color: var(--ink); }

.mt-kopf a:focus-visible, .mt-fuss a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }