/* ==========================================================================
   SAB-Lernen Design v2 – Grundlage (ui-base.css)

   Sie setzt:
   - Schriften (lokal, Baloo 2 + Nunito) und schaltet die Seite auf Nunito um
   - globale Design-Tokens (--ui-*)
   - den Grundstil der App-Seiten (html.ui-root, ersetzt seit Phase 6 den Bulma-Reset)
   - iPad-/Touch-Grundregeln
   - die gemeinsame Animations-Bibliothek (ui-*)
   - Ruhigen Modus und reduzierte Bewegung
   Komponenten stehen in ui-components.css.
   ========================================================================== */

/* ---------- Schriften (SIL OFL 1.1, siehe ../fonts/OFL.txt) ---------- */
/* Pro Schnitt eigene Teilmengen; der Browser lädt nur, was die Seite braucht (unicode-range). */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/nunito-latin-500-normal.3a62cb750e4a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/nunito-latin-ext-500-normal.48023fae456a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/nunito-cyrillic-500-normal.7f31163cde0a.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/nunito-latin-700-normal.28a2cf182b19.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/nunito-latin-ext-700-normal.762995b2bad6.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/nunito-cyrillic-700-normal.0a523a3caa05.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/nunito-latin-800-normal.a28521c77f4a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/nunito-latin-ext-800-normal.211c43d44d95.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/nunito-cyrillic-800-normal.43caa1b577f2.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Baloo 2 hat keinen kyrillischen Schnitt; ukrainische Überschriften fallen auf Nunito zurück. */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/baloo-2-latin-600-normal.dfb95fe623b6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-600-normal.83c1989d241f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/baloo-2-latin-700-normal.4d7711a795ae.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-700-normal.4969f5201e28.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/baloo-2-latin-800-normal.ac10b2674176.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-800-normal.f0f557207f36.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Design-Tokens ---------- */
:root {
  /* Flächen & Text */
  --ui-paper: #eef5fc;
  --ui-card: #ffffff;
  --ui-ink: #163a5f;
  --ui-ink-soft: #57718f;
  --ui-line: #d6e4f2;
  --ui-line-deep: #b9cde2;

  /* Marke & Semantik */
  --ui-brand: #1f7fcb;   --ui-brand-deep: #0a5b9c;   --ui-brand-soft: #e5f1fb;
  --ui-sun: #ffc531;     --ui-sun-deep: #d99800;     --ui-sun-soft: #fff6d9;
  --ui-mint: #23b574;    --ui-mint-deep: #158552;    --ui-mint-soft: #e2f8ed;
  --ui-coral: #ff6f61;   --ui-coral-deep: #d4483b;   --ui-coral-soft: #ffebe8;
  --ui-grape: #7c5cff;   --ui-grape-deep: #5636d6;   --ui-grape-soft: #efeaff;
  --ui-orange: #ff8a3d;  --ui-orange-deep: #d9631a;  --ui-orange-soft: #fff0e4;

  /* Akzent (wird von .ui-tone--* überschrieben) */
  --ui-accent: var(--ui-brand);
  --ui-accent-deep: var(--ui-brand-deep);
  --ui-accent-soft: var(--ui-brand-soft);

  /* Schrift */
  --ui-font-display: "Baloo 2", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --ui-font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Form & Abstand */
  --ui-r-card: 24px;
  --ui-r-panel: 18px;
  --ui-r-btn: 16px;
  --ui-r-chip: 14px;
  --ui-r-pill: 999px;
  --ui-edge: 5px;
  --ui-gap: 1rem;
  --ui-gap-lg: 1.4rem;
  --ui-page-max: 1100px;
  --ui-studio-max: 1280px;
  --ui-shadow-card: 0 8px 0 var(--ui-line), 0 24px 40px -30px rgba(10, 60, 110, .45);

  /* Bewegung */
  --ui-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ui-ease-out: cubic-bezier(.22, 1, .36, 1);

}

/* Farbtöne für Fächer, Reihen, Quiz-Gruppen */
.ui-tone--brand  { --ui-accent: var(--ui-brand);  --ui-accent-deep: var(--ui-brand-deep);  --ui-accent-soft: var(--ui-brand-soft); }
.ui-tone--mint   { --ui-accent: var(--ui-mint);   --ui-accent-deep: var(--ui-mint-deep);   --ui-accent-soft: var(--ui-mint-soft); }
.ui-tone--orange { --ui-accent: var(--ui-orange); --ui-accent-deep: var(--ui-orange-deep); --ui-accent-soft: var(--ui-orange-soft); }
.ui-tone--grape  { --ui-accent: var(--ui-grape);  --ui-accent-deep: var(--ui-grape-deep);  --ui-accent-soft: var(--ui-grape-soft); }
.ui-tone--coral  { --ui-accent: var(--ui-coral);  --ui-accent-deep: var(--ui-coral-deep);  --ui-accent-soft: var(--ui-coral-soft); }
.ui-tone--sun    { --ui-accent: var(--ui-sun);    --ui-accent-deep: var(--ui-sun-deep);    --ui-accent-soft: var(--ui-sun-soft); }

/* ---------- Grundtypografie ---------- */
html { -webkit-text-size-adjust: 100%; }

/* Grundschrift der ganzen Seite */
body {
  font-family: var(--ui-font-body);
  font-weight: 500;
}

/* Überschriften in der Display-Schrift */
h1, h2, h3, h4 {
  font-family: var(--ui-font-display);
}

/* ---------- Grundstil der App-Seiten (ersetzt seit Phase 6 Bulmas Reset) ----------
   Gilt nur unter <html class="ui-root"> (home.html, direct_url_wrapper.html, center_base.html).
   Pausenaufsichten und Druckansicht laden ui-base.css nur für Schriften und Tokens und
   behalten die Browser-Abstände. :where() hält die Spezifität auf Elementniveau, damit
   jede Komponentenklasse gewinnt – wie vorher bei Bulma. */
html.ui-root {
  min-width: 300px;
  background: var(--ui-card);
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* border-box direkt statt inherit: <details> reicht seinen Inhalt über einen Shadow-Slot weiter, der sonst content-box vererbt. */
:where(.ui-root), :where(.ui-root) *, :where(.ui-root) *::before, :where(.ui-root) *::after { box-sizing: border-box; }

/* Komponenten setzen ihre Abstände selbst; Fließtext aus dem Editor bekommt sie über .ui-prose. */
:where(.ui-root) :is(body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend,
  textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6) { margin: 0; padding: 0; }
:where(.ui-root) :is(h1, h2, h3, h4, h5, h6) { font-size: 100%; font-weight: inherit; }
:where(.ui-root) ul { list-style: none; }
:where(.ui-root) fieldset { border: 0; }

:where(.ui-root) body {
  min-height: 100vh;
  color: var(--ui-ink);
  font-size: 1em;
  line-height: 1.5;
  background: var(--ui-card);
}

:where(.ui-root) :is(button, input, optgroup, select, textarea) { margin: 0; font-family: inherit; }
/* Knöpfe ohne Browser-Rahmen: jede Komponente (ui-btn, qz-option …) gestaltet sie selbst. */
:where(.ui-root) button {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1em;
  cursor: pointer;
}
:where(.ui-root) :is(input[type="checkbox"], input[type="radio"]) { vertical-align: baseline; }

:where(.ui-root) a { color: var(--ui-brand-deep); text-decoration: none; cursor: pointer; }
:where(.ui-root) :is(strong, b) { font-weight: 700; }
:where(.ui-root) small { font-size: .875em; }

:where(.ui-root) :is(img, video) { max-width: 100%; height: auto; }
:where(.ui-root) iframe { border: 0; }

:where(.ui-root) table { border-collapse: collapse; border-spacing: 0; }
:where(.ui-root) :is(td, th) { padding: 0; vertical-align: top; }
:where(.ui-root) :is(td, th):not([align]) { text-align: inherit; }

:where(.ui-root) hr { height: 2px; margin: 1.5rem 0; border: 0; background: var(--ui-line); }

:where(.ui-root) :is(code, kbd, pre) { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
:where(.ui-root) code {
  padding: .15em .4em;
  border-radius: 6px;
  background: var(--ui-paper);
  color: var(--ui-brand-deep);
  font-size: .875em;
}
:where(.ui-root) pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--ui-r-chip);
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: .875em;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
:where(.ui-root) pre code { padding: 0; background: none; color: inherit; font-size: 1em; }

/* Nur für neue Komponenten: Bestandsseiten blenden teils per style.display ein, obwohl hidden gesetzt ist. */
[class*="ui-"][hidden], [class*="qz-"][hidden], [class*="kp-"][hidden],
.ui-page [hidden], .qz [hidden] { display: none !important; }

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

/* ---------- Touch / iPad (webseite-design-system.md, Abschnitt 4) ---------- */
button, a, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (min-width: 744px) {
  :root { --ui-gap-lg: 1.6rem; }
}

/* ---------- Animations-Bibliothek ---------- */
@keyframes ui-pop-in { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ui-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ui-drop-in { from { opacity: 0; transform: translateY(-20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ui-slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes ui-slide-out { to { opacity: 0; transform: translateX(-40px); } }
@keyframes ui-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.07) translateY(-4px); } 65% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes ui-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-1deg); } 40% { transform: translateX(7px) rotate(1deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes ui-glow { 0%, 100% { box-shadow: 0 5px 0 var(--ui-mint-deep), 0 0 0 0 transparent; } 50% { box-shadow: 0 5px 0 var(--ui-mint-deep), 0 0 0 7px color-mix(in srgb, var(--ui-mint) 30%, transparent); } }
@keyframes ui-glow-sun { 0%, 100% { box-shadow: 0 4px 0 var(--ui-sun-deep), 0 0 0 0 transparent; } 50% { box-shadow: 0 4px 0 var(--ui-sun-deep), 0 0 0 8px color-mix(in srgb, var(--ui-sun) 35%, transparent); } }
@keyframes ui-draw { to { stroke-dashoffset: 0; } }
@keyframes ui-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes ui-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
@keyframes ui-tada { 0% { transform: scale(.8); } 30% { transform: scale(1.12) rotate(-3deg); } 50% { transform: scale(1.12) rotate(3deg); } 70% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes ui-star-pop { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 70% { opacity: 1; transform: scale(1.25) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ui-star-ghost { to { opacity: .28; transform: scale(.85); } }
@keyframes ui-toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ui-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes ui-halo { 0% { box-shadow: 0 5px 0 var(--ui-accent-deep), 0 0 0 0 color-mix(in srgb, var(--ui-accent) 45%, transparent); } 70%, 100% { box-shadow: 0 5px 0 var(--ui-accent-deep), 0 0 0 12px transparent; } }
@keyframes ui-unlock { 0% { transform: scale(1); } 25% { transform: scale(.85) rotate(-10deg); } 55% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ui-fill-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ui-ping { 0% { box-shadow: 0 0 0 2px #2d8ed9, 0 0 0 2px color-mix(in srgb, var(--ui-coral) 60%, transparent); } 100% { box-shadow: 0 0 0 2px #2d8ed9, 0 0 0 9px transparent; } }
@keyframes ui-spin-pop { 0% { transform: scale(0) rotate(-180deg); } 70% { transform: scale(1.2) rotate(15deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ui-breathe { 0%, 100% { background: var(--ui-card); } 50% { background: var(--ui-accent-soft); } }
@keyframes ui-land { 0% { transform: scale(1.12); } 60% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes ui-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-10deg); } 45% { transform: rotate(16deg); } 60% { transform: rotate(-6deg); } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Gestaffeltes Erscheinen von Listen: <div class="ui-stagger"> … </div> */
.ui-stagger > :nth-child(2) { animation-delay: .05s; }
.ui-stagger > :nth-child(3) { animation-delay: .10s; }
.ui-stagger > :nth-child(4) { animation-delay: .15s; }
.ui-stagger > :nth-child(5) { animation-delay: .20s; }
.ui-stagger > :nth-child(6) { animation-delay: .25s; }
.ui-stagger > :nth-child(7) { animation-delay: .30s; }
.ui-stagger > :nth-child(8) { animation-delay: .35s; }
.ui-stagger > :nth-child(9) { animation-delay: .40s; }
.ui-stagger > :nth-child(10) { animation-delay: .45s; }
.ui-stagger > :nth-child(11) { animation-delay: .50s; }
.ui-stagger > :nth-child(12) { animation-delay: .55s; }

/* ---------- Ruhiger Modus & reduzierte Bewegung (Pflicht) ----------
   [data-ui-pruefung]: Prüfungsseiten (Englischtest) laufen immer ruhig. */
.ui-calm *, .ui-calm *::before, .ui-calm *::after,
[data-ui-pruefung], [data-ui-pruefung] *, [data-ui-pruefung] *::before, [data-ui-pruefung] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}