@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka+One&display=swap');

/* ════════════════════════════════════════════════════════════
   DESIGN SYSTEM — MaLa - Das Mathematik Labor
   Diese Datei ist die gemeinsame Grundlage für alle Seiten.
   Änderungen hier wirken auf Startseite, Jahrgang-/Klassenseiten,
   Module 1–3 und die Spielecke.
   ════════════════════════════════════════════════════════════ */
:root {
  /* ── Flächen / Hintergründe ── */
  --bg:        #1a1f3a;
  --surface:   #252b4a;
  --surface2:  #2e3660;
  --card-bg:   #2a3158;
  --outline:   #1a1f3a;

  /* ── Akzentfarben ──
     Alle Akzente sind so gewählt, dass dunkler Text (#1a1f3a)
     darauf mindestens 4.5:1 Kontrast erreicht (siehe --on-accent). */
  --yellow:    #FFD93D;
  --orange:    #FF7A47;
  --mint:      #4ECDC4;
  --purple:    #C084FC;
  --pink:      #FF6B9D;
  --blue:      #60A5FA;
  --green:     #22C55E;
  --red:       #F87171;

  /* ── Text ──
     --text        = Fließtext / Überschriften auf dunklem Grund (14.3:1)
     --muted       = sekundäre Infos, Begründungen, Fußzeilen — geprüft
                      ≥4.5:1 auf JEDER Flächenfarbe oben (bg/surface/surface2/card-bg)
     --muted-strong = etwas kräftiger, für sekundären Text der trotzdem
                      hervorstechen soll (Labels, Meta-Infos) */
  --text:         #F0F0FF;
  --muted:        #A6AEDB;
  --muted-strong: #C7CDEE;
  --on-accent:    #1a1f3a;   /* Textfarbe AUF Akzentfarben (Buttons/Badges) */
  --on-accent-soft: rgba(26,31,58,0.75);

  /* ── Radien ── */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-pill: 100px;

  /* ── Abstands-Skala (8px-Basis) ──
     Immer diese Werte verwenden statt frei gewählter rem-Zahlen. */
  --sp-1:  .25rem;   /*  4px */
  --sp-2:  .5rem;    /*  8px */
  --sp-3:  .75rem;   /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.5rem;   /* 24px */
  --sp-6:  2rem;     /* 32px */
  --sp-7:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */

  /* ── Typo-Skala ──
     xs/sm  = sekundäre Infos, Meta, Badges
     base   = Standard-Fließtext
     md/lg  = betonter Fließtext, Karten-Titel
     xl–3xl = Überschriften */
  --fs-2xs: .7rem;
  --fs-xs:  .8rem;
  --fs-sm:  .9rem;
  --fs-base: 1rem;
  --fs-md:  1.125rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 1.9rem;
  --fs-3xl: 2.4rem;

  --lh-tight:   1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Fredoka One', cursive; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p  { line-height: var(--lh-relaxed); }

/* ── Hierarchie-Hilfsklassen ──
   Für Kicker/Eyebrow-Labels über Überschriften, Lead-Absätze
   und Meta-Infos — sorgt für konsistente Betonung statt vieler
   Einzel-Schriftgrößen pro Seite. */
.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--orange);
  margin-bottom: var(--sp-2);
}
.lead { font-size: var(--fs-md); color: var(--text); line-height: var(--lh-relaxed); }
.meta { font-size: var(--fs-xs); color: var(--muted); }

/* ── Buttons ──
   Textfarbe auf Akzentfarben ist grundsätzlich dunkel (--on-accent),
   da das auf allen Akzenttönen den besten Kontrast liefert. */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .85rem 1.6rem; border-radius: var(--radius-pill);
  min-height: 48px;
  font-family: 'Nunito', sans-serif; font-size: var(--fs-sm); font-weight: 800;
  cursor: pointer; border: 3px solid var(--outline);
  transition: all .15s ease; letter-spacing: .02em;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35);
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.btn-yellow  { background: var(--yellow); color: var(--on-accent); }
.btn-yellow:hover  { background: #ffe566; }
.btn-orange  { background: var(--orange); color: var(--on-accent); }
.btn-orange:hover  { background: #ff9166; }
.btn-mint    { background: var(--mint);   color: var(--on-accent); }
.btn-mint:hover    { background: #6eddd6; }
.btn-purple  { background: var(--purple); color: var(--on-accent); }
.btn-purple:hover  { background: #d4a5fd; }
.btn-ghost   { background: transparent; color: var(--muted-strong); border-color: var(--muted); box-shadow: none; }
.btn-ghost:hover   { color: var(--text); border-color: var(--text); }

/* ── Cards ── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 3px solid rgba(255,255,255,0.08);
  padding: var(--sp-5);
}

/* ── Badge ──
   Auch hier: dunkler Text auf Akzentfarben für verlässlichen Kontrast. */
.badge {
  display: inline-block; padding: .25rem .75rem; border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.badge-yellow { background: var(--yellow); color: var(--on-accent); }
.badge-mint   { background: var(--mint);   color: var(--on-accent); }
.badge-purple { background: var(--purple); color: var(--on-accent); }
.badge-orange { background: var(--orange); color: var(--on-accent); }

/* ── Callout-Box ──
   Wiederverwendbare Hervorhebungs-Box für Merksätze, Formeln,
   Tipps etc. — ersetzt die bisherigen Einzellösungen pro Modul.
   Varianten über Modifier-Klassen: .callout (Standard/Gelb),
   .callout-info (Mint), .callout-warn (Rot), .callout-highlight (Orange). */
.callout {
  background: rgba(255,211,61,0.08); border: 2px solid rgba(255,211,61,0.3);
  border-radius: var(--radius); padding: var(--sp-5); text-align: left;
}
.callout-label {
  font-size: var(--fs-2xs); color: var(--yellow); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-2);
}
.callout p { font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--sp-3); }
.callout p:last-child { margin-bottom: 0; }
.callout-info      { background: rgba(78,205,196,0.08);  border-color: rgba(78,205,196,0.3); }
.callout-info .callout-label      { color: var(--mint); }
.callout-warn       { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); }
.callout-warn .callout-label       { color: var(--red); }
.callout-highlight  { background: rgba(255,122,71,0.08);  border-color: rgba(255,122,71,0.3); }
.callout-highlight .callout-label  { color: var(--orange); }

/* ── Utility ── */
.hidden { display: none !important; }
.text-muted  { color: var(--muted); }
.text-yellow { color: var(--yellow); }
.text-mint   { color: var(--mint); }

/* ── Modal overlay ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn .2s ease;
}
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 3px solid rgba(255,255,255,0.12);
  max-width: 680px; width: 100%;
  max-height: 85vh;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: popIn .25s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 5;
  background: rgba(255,255,255,0.1); border: none; color: var(--muted);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  font-size: var(--fs-base); display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.modal-close:hover { background: rgba(255,255,255,0.2); color: var(--text); }
/* Dieser innere Bereich scrollt, wenn der Inhalt (z.B. bei langen Texten)
   höher als das Fenster ist — die Box selbst und damit der ✕-Button
   bleiben dadurch immer an Ort und Stelle erreichbar.
   WICHTIG: min-height:0 ist hier nötig, sonst verhindert der Flexbox-
   Standardwert (min-height:auto), dass dieser Bereich unter seine
   Inhaltshöhe schrumpft — overflow-y:auto würde sonst nie greifen und
   die Box würde über max-height hinauswachsen bzw. unten abgeschnitten. */
.modal-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2.6rem var(--sp-6) var(--sp-6); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── Footer-Navigation (auf allen Seiten) ── */
.footer-nav {
  margin-top: var(--sp-7); padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.footer-nav .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5);
}
.footer-nav .nav-link {
  color: var(--muted-strong); font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none; transition: color .2s;
}
.footer-nav .nav-link:hover { color: var(--text); text-decoration: underline; }
.footer-nav footer {
  color: var(--muted); font-size: var(--fs-xs);
}

/* ── Smartboard / große Bildschirme ──
   Ab einer großen Viewport-Breite (typisch für Smartboards/Beamer
   im Klassenzimmer) wird die rem-Basis angehoben. Da alle Abstände,
   Schriftgrößen und die meisten Komponentenmaße in rem definiert
   sind, skaliert das automatisch mit — ohne jede Seite einzeln
   anzupassen. Zusätzlich werden Touch-/Klickziele großzügiger. */
@media (min-width: 1440px) {
  html { font-size: 18px; }
  .btn { min-height: 52px; padding: 1rem 1.9rem; }
}
@media (min-width: 1920px) {
  html { font-size: 20px; }
  .btn { min-height: 56px; padding: 1.1rem 2.1rem; }
}