/* ==========================================================
   Einstufungstest Mathematik - Gestaltung
   Schriftart: dieselbe Systemschrift wie der übrige Auftritt von
   Apps.By.Milan. Es werden bewusst keine Schriften von fremden
   Servern geladen. Zahlen laufen durchgängig mit gleicher Zeichen-
   breite (tabular-nums), damit Ziffern untereinander stehen.
   ========================================================== */

:root{
  --papier:#eef1f0;
  --karte:#ffffff;
  --karte-2:#e5eae9;
  --tinte:#162b2a;
  --tinte-2:#3f5b59;
  --gedaempft:#6d8785;
  --linie:#cdd8d6;
  --linie-stark:#aebcba;
  --akzent:#0f6f68;
  --akzent-hell:#d7ebe8;
  --akzent-tief:#0a534e;
  --auf-akzent:#ffffff;
  --balken-tief:#9aaebe;
  --sand:#9a6a17;
  --sand-hell:#f6ecd7;
  --ruhe:#42586e;
  --ruhe-hell:#e3e9ef;
  --schatten:0 1px 2px rgba(22,43,42,.06), 0 10px 30px -20px rgba(22,43,42,.35);
  --radius:10px;
  --schrift:"Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#0d1616;
    --karte:#152322;
    --karte-2:#1c2c2b;
    --tinte:#e6eeed;
    --tinte-2:#bdcecc;
    --gedaempft:#8ba3a1;
    --linie:#274038;
    --linie-stark:#3a5450;
    --akzent:#5cc0b6;
    --akzent-hell:#12332f;
    --akzent-tief:#8ad6cd;
    --auf-akzent:#0d1616;
    --balken-tief:#6f8ba3;
    --sand:#d9a94f;
    --sand-hell:#2f2717;
    --ruhe:#9db4c9;
    --ruhe-hell:#1d2833;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --papier:#0d1616;
  --karte:#152322;
  --karte-2:#1c2c2b;
  --tinte:#e6eeed;
  --tinte-2:#bdcecc;
  --gedaempft:#8ba3a1;
  --linie:#274038;
  --linie-stark:#3a5450;
  --akzent:#5cc0b6;
  --akzent-hell:#12332f;
  --akzent-tief:#8ad6cd;
  --auf-akzent:#0d1616;
  --balken-tief:#6f8ba3;
  --sand:#d9a94f;
  --sand-hell:#2f2717;
  --ruhe:#9db4c9;
  --ruhe-hell:#1d2833;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift);
  font-size:18px;
  line-height:1.6;
}
h1,h2,h3{font-family:var(--schrift);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.12;margin:0 0 .6rem}
h2{font-size:1.4rem;line-height:1.2;margin:0 0 .7rem}
h3{font-size:1.05rem;margin:1.7rem 0 .5rem}
p{margin:0 0 1rem;max-width:60ch}
a{color:var(--akzent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.huelle{max-width:52rem;margin:0 auto;padding:0 1.25rem 4rem}
.schmal{max-width:40rem}

/* ---------- Kopfleiste ---------- */
.kopf{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0 .9rem;margin-bottom:1.6rem;
  border-bottom:1px solid var(--linie);
}
.marke{display:flex;align-items:center;gap:.6rem;font-family:var(--schrift);font-weight:600;font-size:1rem}
.marke .zeichen{
  width:1.9rem;height:1.9rem;border-radius:7px;background:var(--akzent);
  color:var(--auf-akzent);display:grid;place-items:center;font-size:1rem;flex:none;
}
.kopf-rechts{font-size:.85rem;color:var(--gedaempft)}
.kopf-zurueck{
  font-size:.9rem;font-weight:600;color:var(--gedaempft);text-decoration:none;
  white-space:nowrap;
}
.kopf-zurueck:hover{color:var(--akzent);text-decoration:underline}
.kopf-zurueck .punkt{color:var(--akzent);padding:0 .1em}

/* ---------- Startseite ---------- */
.hero{padding:1rem 0 .5rem}
.hero .vorspann{font-size:1.15rem;color:var(--tinte-2);max-width:34rem}
.checkliste{
  list-style:none;padding:0;margin:1.8rem 0;
  display:grid;gap:.7rem;
}
.checkliste li{
  display:grid;grid-template-columns:1.6rem 1fr;gap:.75rem;align-items:start;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:.85rem 1rem;
}
.checkliste .ikon{
  width:1.6rem;height:1.6rem;border-radius:6px;background:var(--akzent-hell);color:var(--akzent);
  display:grid;place-items:center;font-size:.9rem;font-weight:700;
}
.checkliste b{display:block;font-family:var(--schrift);font-weight:600;font-size:.98rem}
.checkliste span.txt{color:var(--tinte-2);font-size:.92rem}

/* ---------- Schaltflächen ---------- */
.knopf{
  font:inherit;font-family:var(--schrift);font-weight:600;
  background:var(--akzent);color:var(--auf-akzent);border:none;
  padding:.85rem 1.6rem;border-radius:var(--radius);cursor:pointer;
  font-size:1.05rem;line-height:1.3;
  transition:background .15s ease;
}
.knopf:hover{background:var(--akzent-tief)}
.knopf[disabled]{opacity:.45;cursor:not-allowed}
.knopf.leise{
  background:transparent;color:var(--akzent);
  border:1.5px solid var(--linie-stark);
}
.knopf.leise:hover{background:var(--akzent-hell)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.4rem}

/* ---------- Fortschritt ---------- */
.fortschritt{margin-bottom:1.6rem}
.fortschritt-kopf{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.85rem;color:var(--gedaempft);margin-bottom:.45rem;
}
.fortschritt-kopf .bereich{font-family:var(--schrift);font-weight:600;color:var(--tinte-2);font-size:.95rem}
.balken{height:.45rem;background:var(--karte-2);border-radius:3px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--akzent);border-radius:3px;transition:width .35s ease}

/* ---------- Aufgabenkarte ---------- */
.aufgabe{
  background:var(--karte);border:1px solid var(--linie);border-radius:14px;
  padding:1.6rem 1.5rem 1.5rem;box-shadow:var(--schatten);
}
.frage{font-family:var(--schrift);font-weight:500;font-size:1.22rem;line-height:1.75;margin:0 0 1.2rem;max-width:44ch}
.frage .rechnung{font-family:var(--schrift);font-weight:700;white-space:nowrap}
.hinweis{font-size:.9rem;color:var(--gedaempft);margin:-.6rem 0 1.1rem}
.bild{margin:0 0 1.3rem;overflow-x:auto}
.bild svg{max-width:100%;height:auto;display:block}
.bild svg text,.option svg text{font-family:var(--schrift);font-variant-numeric:tabular-nums}

/* Eingaben */
.felder{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin-bottom:.4rem}
.feld{display:flex;flex-direction:column;gap:.3rem}
.feld label{font-size:.85rem;color:var(--gedaempft)}
.feld .zeile{display:flex;align-items:center;gap:.5rem}
input[type="text"]{
  font:inherit;font-family:var(--schrift);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:1.25rem;text-align:center;
  width:7.5rem;padding:.55rem .6rem;
  background:var(--karte);color:var(--tinte);
  border:2px solid var(--linie-stark);border-radius:8px;
}
input[type="text"]:focus{border-color:var(--akzent);outline:none}
input.kurz{width:5rem}
.einheit{color:var(--gedaempft);font-size:1rem}

/* Brucheingabe */
.brucheingabe{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem}
.brucheingabe .strich{width:6.2rem;height:3px;background:var(--tinte);border-radius:2px}
.brucheingabe input{width:5rem}

/* Bruchdarstellung im Text */
.bruch{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .25em;line-height:1.12}
.bruch .z{font-size:.86em;padding:0 .3em}
.bruch .n{font-size:.86em;border-top:2px solid currentColor;padding:2px .3em 0}
.gemischt{display:inline-flex;align-items:center;gap:.1em;vertical-align:middle}

/* Auswahl */
.optionen{display:grid;gap:.6rem;margin-bottom:.4rem}
.optionen.breit{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.optionen.breit .option{grid-template-columns:1.5rem 1fr;justify-items:start}
.optionen.breit .option .inhalt svg{max-width:100%;height:auto}
.option{
  display:grid;grid-template-columns:1.5rem 1fr;gap:.8rem;align-items:center;
  background:var(--karte);border:2px solid var(--linie);border-radius:10px;
  padding:.8rem 1rem;cursor:pointer;text-align:left;font:inherit;color:var(--tinte);
  transition:border-color .12s ease, background .12s ease;
}
.option:hover{border-color:var(--linie-stark)}
.option .kasten{
  width:1.5rem;height:1.5rem;border-radius:6px;border:2px solid var(--linie-stark);
  display:grid;place-items:center;font-size:.85rem;font-weight:700;color:transparent;flex:none;
}
.option.mehrfach .kasten{border-radius:6px}
.option[aria-pressed="true"]{border-color:var(--akzent);background:var(--akzent-hell)}
.option[aria-pressed="true"] .kasten{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.option .inhalt{font-size:1.05rem}

/* Sortieren */
.sortieren{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.6rem}
.karte-zahl{
  position:relative;font:inherit;font-family:var(--schrift);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:1.3rem;min-width:5.5rem;padding:.8rem 1rem;
  background:var(--karte);color:var(--tinte);
  border:2px solid var(--linie-stark);border-radius:10px;cursor:pointer;
}
.karte-zahl:hover{border-color:var(--akzent)}
.karte-zahl[data-platz]{border-color:var(--akzent);background:var(--akzent-hell)}
.karte-zahl .platz{
  position:absolute;top:-.6rem;left:-.6rem;
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--akzent);color:var(--auf-akzent);
  font-size:.8rem;line-height:1.5rem;text-align:center;font-weight:700;
}

/* Zuordnen */
.zuordnen{display:grid;gap:.5rem;margin-bottom:.5rem}
.zuord-zeile{
  display:grid;grid-template-columns:minmax(4rem,7rem) 1fr;gap:.9rem;align-items:center;
  background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:.5rem .8rem;
}
.zuord-zeile .wert{font-family:var(--schrift);font-weight:700;font-size:1.2rem}
.zuord-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap}
.zuord-knoepfe button{
  font:inherit;font-size:.92rem;padding:.4rem .85rem;border-radius:8px;cursor:pointer;
  background:var(--karte);color:var(--tinte-2);border:2px solid var(--linie);
}
.zuord-knoepfe button[aria-pressed="true"]{background:var(--akzent-hell);border-color:var(--akzent);color:var(--akzent)}

/* Gitter */
.gitterbild{cursor:crosshair}
.gitterbild circle.wahl{fill:var(--akzent)}

/* ---------- Ergebnis ---------- */
.ergebnis-kopf{
  background:var(--karte);border:1px solid var(--linie);border-left:5px solid var(--akzent);
  border-radius:14px;padding:1.5rem;box-shadow:var(--schatten);margin-bottom:1.6rem;
}
.ergebnis-kopf.grenz{border-left-color:var(--sand)}
.ergebnis-kopf.grund{border-left-color:var(--ruhe)}
.ergebnis-kopf .marke-zone{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft);
  display:block;margin-bottom:.5rem;
}
.ergebnis-kopf h2{font-size:1.55rem;margin-bottom:.5rem}
.ergebnis-kopf p{color:var(--tinte-2);margin-bottom:0}

.profil{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:1.3rem 1.5rem;margin-bottom:1.6rem}
.profil h3{margin-top:0}
.zeile-balken{display:grid;grid-template-columns:minmax(8rem,11rem) 1fr 2.4rem;gap:.8rem;align-items:center;padding:.28rem 0}
.zeile-balken .name{font-size:.95rem;color:var(--tinte-2)}
.zeile-balken .spur{height:.55rem;background:var(--karte-2);border-radius:3px;overflow:hidden}
.zeile-balken .spur i{display:block;height:100%;background:var(--akzent);border-radius:3px}
.zeile-balken .spur i.mittel{background:var(--sand)}
.zeile-balken .spur i.tief{background:var(--balken-tief)}
.zeile-balken .wert{font-weight:700;font-size:.9rem;text-align:right;color:var(--gedaempft);font-variant-numeric:tabular-nums}
.geschlossen{font-size:.8rem;color:var(--gedaempft)}

.uebung{background:var(--akzent-hell);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.6rem}
.uebung h3{margin-top:0}
.uebung ul{margin:0;padding-left:1.2rem}
.uebung li{margin-bottom:.35rem}

.kennzahlen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:12px;overflow:hidden;margin-bottom:1.6rem;
}
.kennzahl{background:var(--karte);padding:.9rem 1rem}
.kennzahl dt{font-size:.78rem;color:var(--gedaempft);margin-bottom:.2rem}
.kennzahl dd{margin:0;font-family:var(--schrift);font-weight:600;font-size:1.15rem;font-variant-numeric:tabular-nums}

.fussnote{font-size:.85rem;color:var(--gedaempft);border-top:1px solid var(--linie);padding-top:1rem;margin-top:2rem}
.fussnote p{max-width:none}

footer.seitenfuss{
  border-top:1px solid var(--linie);margin-top:3rem;padding-top:1.1rem;
  font-size:.85rem;color:var(--gedaempft);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
}
footer.seitenfuss a{color:var(--gedaempft)}

.verstecken{display:none!important}

@media print{
  .kopf,.knopfzeile,footer.seitenfuss,.nicht-drucken{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .ergebnis-kopf,.profil,.uebung,.kennzahlen{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .uebung{background:#f4f4f4}
}
@media (max-width:520px){
  body{font-size:17px}
  .aufgabe{padding:1.2rem 1.1rem}
  .zeile-balken{grid-template-columns:1fr;gap:.2rem}
  .zeile-balken .wert{text-align:left}
}