/* ============================================================================
   kern.css · Aussehen der Kern-Bausteine (zu kern.js) · Version 1.2 · 08.10.2026
   ============================================================================
   Einbinden: im <head> ein Stylesheet-Link auf kern/kern.css (aus lehrer/: ../kern/kern.css),
   die genauen Zeilen stehen im Kopf von kern.js. (Hier bewusst ohne href-Beispiel,
   weil werkzeuge/pruefen.py Verweise auch in CSS-Kommentaren nachprüft.)
   Regeln: nur .kern-…-Klassen, #kern-…-Ids und --kern-…-Variablen (auf :root).
   Keine Element-Selektoren (body, button, *) außerhalb eigener Bausteine –
   das bloße Einbinden verändert keine App. Keine Webfonts, keine url().
   Die Bausteine übernehmen die Schrift der App (font-family: inherit).

   FARBPALETTE (Kontrast nach WCAG 2.x gemessen; Ziel Text ≥ 4,5 : 1)
     Variable              Farbe     auf Weiß  auf eigener heller Fläche
     --kern-text           #1d2b53   13,79     grau 12,51 · grün 12,22 · rot 12,07
                                               blau 12,03 · gelb 12,44
     --kern-text-2         #4a5570    7,43     grau-hell 6,74
     --kern-gruen          #1b7a3a    5,40     --kern-gruen-hell  #e6f5ea  4,78
     --kern-gruen-dunkel   #11552a             auf gruen-hell 7,90
     --kern-rot            #c0262d    5,90     --kern-rot-hell    #fdeceb  5,17
     --kern-rot-dunkel     #8a1a1f             auf rot-hell 8,17
     --kern-blau           #1f5bc4    6,27     --kern-blau-hell   #e8f0fd  5,46
     --kern-blau-dunkel    #153f8c             auf blau-hell 8,63
     --kern-orange         #a84b00    5,72     --kern-gelb-hell   #fff3cc  5,16
     --kern-orange-dunkel  #733300             auf gelb-hell 8,60
     --kern-gelb           #ffbf00   nur Akzent/Fokus (auf Weiß 1,65 – nie als
                                     Schrift!), --kern-text auf Gelb 8,34
     Weiße Schrift auf grün 5,40 · rot 5,90 · blau 6,27 · orange 5,72 · text 13,79.
     Rahmen der Rückmeldungen (Nicht-Text, Ziel ≥ 3 : 1) = die Grundfarben oben.
     Fokus: Ring --kern-fokus (#1d2b53, 13,79 auf Weiß) mit gelbem Saum
     (#ffbf00, 8,34 gegen den Ring) – sichtbar auf hellem und dunklem Grund.
     Geprüft von werkzeuge/tests/kern.test.js (rechnet die Werte nach).

   BAUSTEINE
     .kern-knopf (+ .kern-knopf-haupt)  Grundknopf, mind. 44 × 44 px
     .kern-vorlesen                     🔊 rund 44 px (.kern-spricht während des Vorlesens)
     .kern-ton / .kern-ton-fix          🔔/🔕 rund 46 px; fix = unten links neben
                                        dem Portal-Knopf (left setzt kern.js)
     .kern-stufenwahl                   Knopfreihe Vorschule … 4. Klasse
     .kern-rueckmeldung(-richtig|-hinweis|-loesung|-info|-leer)
     .kern-ergebnis / .kern-ergebnis-karte  Überlagerung + Karte + Druckstil
     .kern-nur-sr                       nur für Bildschirmleser
     .kern-ziffernfeld                  (neu in 1.1) zwölf große Tasten 1–9, ⌫, 0, ✓; Tastenhöhe
                                        mit --kern-ziffern-hoehe einstellbar (Standard 64 px);
                                        seit 1.2 mit Zusatztaste (.kern-ziffern-extra: Komma bzw.
                                        Wechsel der Eingabe) – dann ✓ breit (.kern-ziffern-breit)
     .kern-runde-fortschritt            (neu in 1.1, zu runde.js) Punkte je Aufgabe: offen, jetzt,
                                        ✓ erster Versuch, ↻ zweiter Versuch, 💡 mit Hilfe;
                                        ab 21 Aufgaben ein Balken
   Abgefangen: einfache App-Regeln wie "button {…}", "button:hover", "h2 {…}".
   ============================================================================ */

:root {
  --kern-text: #1d2b53;
  --kern-text-2: #4a5570;
  --kern-flaeche: #ffffff;
  --kern-flaeche-2: #f1f4f9;
  --kern-gruen: #1b7a3a;
  --kern-gruen-dunkel: #11552a;
  --kern-gruen-hell: #e6f5ea;
  --kern-rot: #c0262d;
  --kern-rot-dunkel: #8a1a1f;
  --kern-rot-hell: #fdeceb;
  --kern-blau: #1f5bc4;
  --kern-blau-dunkel: #153f8c;
  --kern-blau-hell: #e8f0fd;
  --kern-orange: #a84b00;
  --kern-orange-dunkel: #733300;
  --kern-gelb-hell: #fff3cc;
  --kern-gelb: #ffbf00;
  --kern-fokus: #1d2b53;
  --kern-fokus-saum: #ffbf00;
}

/* ------------------------------------------------------------ Grundknopf */
.kern-knopf {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 6px 16px;
  border: 3px solid var(--kern-text);
  border-radius: 999px;
  background: var(--kern-flaeche);
  color: var(--kern-text);
  font-family: inherit;
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  filter: none;
  transform: none;
  box-shadow: 0 3px 0 var(--kern-text);
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.kern-knopf:hover {
  background: var(--kern-flaeche-2);
  color: var(--kern-text);
  transform: none;
  box-shadow: 0 3px 0 var(--kern-text);
}
.kern-knopf:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--kern-text);
}
.kern-knopf[aria-pressed="true"],
.kern-knopf[aria-pressed="true"]:hover {
  background: var(--kern-text);
  color: #fff;
}
.kern-knopf-haupt,
.kern-knopf-haupt:hover {
  background: var(--kern-blau);
  border-color: var(--kern-blau-dunkel);
  color: #fff;
  box-shadow: 0 3px 0 var(--kern-blau-dunkel);
}
.kern-knopf-haupt:hover { background: var(--kern-blau-dunkel); }
.kern-knopf[hidden] { display: none !important; }
.kern-knopf:disabled { cursor: default; opacity: .6; }


/* ------------------------------------------------------- Vorlesen und Ton */
.kern-vorlesen,
.kern-ton {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-width: 2px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 2px 0 var(--kern-text);
}
.kern-vorlesen:hover,
.kern-ton:hover { box-shadow: 0 2px 0 var(--kern-text); }
.kern-vorlesen.kern-spricht,
.kern-vorlesen.kern-spricht:hover { background: var(--kern-gelb-hell); }
.kern-ton { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
/* Der Ton-Knopf bleibt in beiden Zuständen hell; das Symbol 🔔/🔕 zeigt den Zustand */
.kern-ton[aria-pressed="true"],
.kern-ton[aria-pressed="true"]:hover { background: var(--kern-flaeche); color: var(--kern-text); }
.kern-ton[aria-pressed="false"],
.kern-ton[aria-pressed="false"]:hover { background: var(--kern-flaeche-2); color: var(--kern-text); }
.kern-ton-fix {
  position: fixed;
  top: auto;
  right: auto;
  left: 10px; /* kern.js rückt ihn neben den Portal-Knopf (#lernportal-zurueck) */
  bottom: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.kern-ton-fix:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.kern-ton-fix:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.kern-ton-fix[aria-pressed="true"],
.kern-ton-fix[aria-pressed="true"]:hover { background: rgba(255, 255, 255, .94); }

/* ----------------------------------------------------------- Stufenwahl */
.kern-stufenwahl {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 -4px;
  padding: 0;
}
.kern-stufenwahl > .kern-knopf {
  margin: 4px; /* margin statt gap: gap in Flexbox erst ab Safari 14.1 */
  padding: 6px 14px;
  border-width: 2px;
  font-size: .95rem;
  box-shadow: 0 2px 0 var(--kern-text);
}

/* ----------------------------------------------------------- Rückmeldung */
.kern-rueckmeldung {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px 14px;
  border: 3px solid var(--kern-text-2);
  border-radius: 16px;
  background: var(--kern-flaeche-2);
  color: var(--kern-text);
  font-family: inherit;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  text-shadow: none;
  text-transform: none;
}
.kern-rueckmeldung-symbol {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  margin-right: 10px;
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1;
}
.kern-rueckmeldung-text {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.kern-rueckmeldung > .kern-vorlesen { margin-left: 10px; align-self: center; }
.kern-rueckmeldung-richtig { border-color: var(--kern-gruen); background: var(--kern-gruen-hell); }
.kern-rueckmeldung-richtig .kern-rueckmeldung-symbol { color: var(--kern-gruen); }
.kern-rueckmeldung-hinweis { border-color: var(--kern-orange); background: var(--kern-gelb-hell); }
.kern-rueckmeldung-loesung { border-color: var(--kern-blau); background: var(--kern-blau-hell); }
.kern-rueckmeldung-info { border-color: var(--kern-text-2); background: var(--kern-flaeche-2); }
/* Leer = unsichtbar, bleibt aber als Live-Bereich im Dokument (für Bildschirmleser) */
.kern-rueckmeldung.kern-rueckmeldung-leer {
  display: block;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* leeres Feld wirklich 0 px hoch (sonst erzeugt das leere Symbol eine Textzeile) */
.kern-rueckmeldung.kern-rueckmeldung-leer > * { display: none !important; }
.kern-rueckmeldung-neu { animation: kern-auftauchen .25s ease-out; }
@keyframes kern-auftauchen {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.kern-nur-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ------------------------------------------------------------- Ergebnis */
.kern-ergebnis {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483100;
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 16px;
  background: rgba(29, 43, 83, .6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Die Karte hängt direkt an <body>: eigene Schrift, damit sie nicht in Times erscheint,
     wenn eine App ihre Schrift nur auf einem inneren Element setzt. Apps können --kern-schrift setzen. */
  font-family: var(--kern-schrift, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  text-align: center;
}
.kern-ergebnis-karte {
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  margin: auto; /* mittig, aber bei zu wenig Höhe oben beginnend und scrollbar */
  padding: 20px 20px 18px;
  border: 4px solid var(--kern-text);
  border-radius: 24px;
  background: #fff;
  color: var(--kern-text);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  text-shadow: none;
  text-transform: none;
  animation: kern-karte-auf .3s ease-out;
}
.kern-ergebnis-karte:focus { outline: none; }
.kern-ergebnis-karte .kern-ergebnis-app,
.kern-ergebnis-karte .kern-ergebnis-titel,
.kern-ergebnis-karte .kern-ergebnis-liste,
.kern-ergebnis-karte .kern-ergebnis-liste li,
.kern-ergebnis-karte .kern-ergebnis-zusatz p,
.kern-ergebnis-karte .kern-ergebnis-fuss,
.kern-ergebnis-karte .kern-ergebnis-namenslinie {
  font-family: inherit;
  letter-spacing: normal;
  text-shadow: none;
  text-transform: none;
  transform: none;
  background: none;
  border: 0;
  padding: 0;
  float: none;
  width: auto;
}
.kern-ergebnis-karte .kern-ergebnis-app { margin: 0 0 4px; color: var(--kern-text-2); font-size: .95rem; font-weight: 700; }
.kern-ergebnis-kopf {
  display: -webkit-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 6px;
}
.kern-ergebnis-karte .kern-ergebnis-titel {
  margin: 0 8px 0 0;
  color: var(--kern-text);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.15;
}
.kern-ergebnis-kopf > .kern-vorlesen { flex: 0 0 auto; }
.kern-ergebnis-karte .kern-ergebnis-liste {
  display: inline-block;
  margin: 8px 0;
  list-style: none;
  text-align: left;
}
.kern-ergebnis-karte .kern-ergebnis-liste li { margin: 6px 0; color: var(--kern-text); }
.kern-ergebnis-symbol { display: inline-block; width: 1.8em; text-align: center; font-weight: 900; }
.kern-ergebnis-ueben {
  margin: 10px 0;
  padding: 10px 12px;
  border: 2px solid var(--kern-orange);
  border-radius: 14px;
  background: var(--kern-gelb-hell);
  color: var(--kern-text);
  text-align: left;
}
.kern-ergebnis-wort {
  display: inline-block;
  margin: 3px 2px;
  padding: 2px 10px;
  border: 2px solid var(--kern-orange);
  border-radius: 999px;
  background: #fff;
  color: var(--kern-text);
  font-weight: 800;
}
.kern-ergebnis-zusatz { margin: 8px 0; color: var(--kern-text); }
.kern-ergebnis-karte .kern-ergebnis-zusatz p { margin: 4px 0; }
.kern-ergebnis-karte .kern-ergebnis-fuss { margin: 10px 0 0; color: var(--kern-text-2); font-size: .9rem; }
.kern-ergebnis-karte .kern-ergebnis-namenslinie { display: none; margin: 12px 0 0; text-align: left; }
.kern-ergebnis-knoepfe {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px -5px 0;
}
.kern-ergebnis-knoepfe > .kern-knopf { margin: 5px; }
@keyframes kern-karte-auf {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- Ziffernfeld */
.kern-ziffernfeld {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 0;
}
.kern-ziffernfeld > .kern-knopf {
  width: auto;
  min-width: 0;
  min-height: 64px;
  min-height: var(--kern-ziffern-hoehe, 64px);
  padding: 0;
  border-radius: 18px;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}
.kern-ziffernfeld > .kern-ziffern-weg { background: var(--kern-flaeche-2); }
.kern-ziffernfeld > .kern-ziffern-ok { font-size: 2rem; }
.kern-ziffernfeld > .kern-ziffern-extra { font-size: 2rem; }
.kern-ziffernfeld > .kern-ziffern-breit { grid-column: 1 / -1; }
.kern-ziffernfeld > .kern-knopf:disabled { opacity: .45; box-shadow: none; }

/* ------------------------------------------ Fortschritt einer Runde (runde.js) */
.kern-runde-fortschritt {
  box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--kern-text);
  font-family: inherit;
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-shadow: none;
  text-transform: none;
}
.kern-runde-text { margin: 2px 10px 2px 0; white-space: nowrap; }
.kern-runde-punkte {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -2px;
}
.kern-runde-punkt {
  box-sizing: border-box;
  display: block;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 2px;
  border: 2px solid var(--kern-text-2);
  border-radius: 50%;
  background: var(--kern-flaeche);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  overflow: hidden;
}
.kern-runde-punkt[data-stand="jetzt"] { border: 3px solid var(--kern-text); background: var(--kern-gelb); }
.kern-runde-punkt[data-stand="erster"] { border-color: var(--kern-gruen-dunkel); background: var(--kern-gruen); }
.kern-runde-punkt[data-stand="zweiter"] { border-color: var(--kern-orange-dunkel); background: var(--kern-orange); }
.kern-runde-punkt[data-stand="hilfe"] { border-color: var(--kern-blau); background: var(--kern-blau-hell); color: var(--kern-blau-dunkel); }
.kern-runde-punkt.kern-runde-nochmal { border-style: dashed; }
.kern-runde-balken {
  box-sizing: border-box;
  -webkit-box-flex: 1;
  flex: 1 1 120px;
  min-width: 120px;
  max-width: 420px;
  height: 18px;
  border: 2px solid var(--kern-text);
  border-radius: 999px;
  background: var(--kern-flaeche);
  overflow: hidden;
}
.kern-runde-balken-voll { display: block; width: 0; height: 100%; background: var(--kern-gruen); }
@media print {
  .kern-ziffernfeld,
  .kern-runde-fortschritt { display: none !important; }
}

/* ---------------------------------------------------------------- Fokus */
/* Steht am Ende, damit spätere Baustein-Regeln den Fokusring nicht überdecken.
   Ältere Browser zeigen den Ring bei :focus, neuere nur bei Tastatur (:focus-visible).
   Die Regeln stehen bewusst einzeln (eine unbekannte Pseudoklasse macht sonst die ganze Regel ungültig). */
.kern-knopf:focus { outline: 3px solid var(--kern-fokus); outline-offset: 2px; }
.kern-knopf:focus:not(:focus-visible) { outline: none; }
.kern-knopf:focus-visible {
  outline: 3px solid var(--kern-fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--kern-fokus-saum);
}

/* ---------------------------------------------------------------- Druck */
@media print {
  .kern-ton,
  .kern-ton-fix,
  .kern-vorlesen { display: none !important; }
  /* Solange die Ergebniskarte offen ist, druckt der Browser nur die Karte (auf weißem Grund) */
  body.kern-ergebnis-offen > *:not(.kern-ergebnis) { display: none !important; }
  body.kern-ergebnis-offen { background: #fff !important; }
  .kern-ergebnis {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    background: none !important;
    overflow: visible !important;
  }
  .kern-ergebnis-karte {
    margin: 0 auto !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
    animation: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .kern-ergebnis-karte,
  .kern-ergebnis-karte * { color: #000 !important; }
  .kern-ergebnis-ueben,
  .kern-ergebnis-wort { background: none !important; border-color: #000 !important; }
  .kern-ergebnis-knoepfe { display: none !important; }
  .kern-ergebnis-karte .kern-ergebnis-namenslinie { display: block !important; }
}

/* ------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .kern-knopf,
  .kern-rueckmeldung,
  .kern-rueckmeldung-neu,
  .kern-ergebnis,
  .kern-ergebnis-karte { transition: none !important; animation: none !important; }
  .kern-knopf:active,
  .kern-ton-fix:active { transform: none !important; }
}