/* ==========================================================================
   juscool-system.css — das Designsystem der neuen Oberfläche
   --------------------------------------------------------------------------
   Eine Datei, eine Quelle. Seiten bringen nur ihr Layout mit; Farbe, Schrift,
   Abstand und Bauteile stehen hier. Wer eine Hexzahl in eine Seite schreibt,
   bricht den Dunkelmodus an genau dieser Stelle.

   Schrift und Farbe kommen aus den Entwürfen (Juscool Mobile, Case Lab,
   Claim Blocks): Caprasimo für Überschriften, Figtree für alles andere,
   beide lokal (assets/fonts/fonts.css). Terrakotta auf Sand für „hier geht
   es weiter", Salbei für „richtig", Rot für „falsch", Gelb für einen Tipp.
   Die Terrakotta ist eine Stufe dunkler als im Entwurf: Weiss auf #c67139
   erreicht 3,4:1, verlangt sind 4,5:1.
   ========================================================================== */

:root {
  --grund: #f5ead8;
  --flaeche: #fffaf1;
  --flaeche-2: #efe2cb;
  --tinte: #201e1d;
  --gedaempft: #5f574b;
  --linie: #dccfb8;
  --akzent: #ad5c28;
  --akzent-kante: #7e4119;
  --akzent-tinte: #ffffff;
  --akzent-sanft: #ffe1d0;
  --akzent-text: #8c491a;
  --gut: #56633f;
  --gut-kante: #3d472b;
  --gut-sanft: #e1eecc;
  --falsch: #b3261e;
  --falsch-sanft: #fbe1dd;
  --tipp: #8a6d00;
  --tipp-sanft: #fdf0b8;
  --fokus: #c67139;
  --schatten: 0 1px 2px rgb(46 43 37 / 12%), 0 6px 18px rgb(46 43 37 / 10%);

  --schrift-titel: "Caprasimo", Georgia, serif;
  --schrift: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-1: 4px;  --r-2: 8px;  --r-3: 12px;  --r-4: 16px;
  --r-5: 24px; --r-6: 32px; --r-7: 48px;  --r-8: 64px;

  /* Schriftgrössen: acht Stufen, und jede Grösse im Auftritt ist eine davon.
     Vorher standen über die Seiten verteilt 55 verschiedene Werte, darunter
     .8, .82, .85, .88 und .9rem nebeneinander — Unterschiede, die niemand
     sieht, aber jeder als Unruhe spürt. Die kleinste Stufe ist 13 px, die
     Untergrenze aus STYLEGUIDE.md; 12 und 14 px gibt es deshalb nicht, und
     zwei Stufen im Abstand eines Pixels wären dieselbe Unruhe wie vorher.
     Hierarchie unterhalb von 16 px entsteht über Gewicht und Farbe.
     tests/e2e/oberflaeche.mjs misst nach, dass kein sichtbarer Text
     daneben liegt. */
  --t-1: .8125rem;   /* 13 px  Kicker, Nebentext, Chips, Tabellen */
  --t-2: 1rem;       /* 16 px  Fliesstext, Knöpfe */
  --t-3: 1.125rem;   /* 18 px  Vorspann, betonter Absatz */
  --t-4: 1.25rem;    /* 20 px  h3, Kartentitel */
  --t-5: 1.5rem;     /* 24 px  Marke, grosse Zahl, kleine h2 */
  --t-6: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);      /* h2 */
  --t-7: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);     /* h1 */
  --t-8: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* nur der Einstieg der Startseite */

  --rund-s: 8px;
  --rund: 14px;
  --rund-l: 22px;

  --breite: 1120px;
  --lesebreite: 680px;
  --kopf-hoehe: 60px;
  --dauer: 180ms;
  --kurve: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

/* Dunkel: gesetzt über data-modus, damit die Wahl im Menü gilt, egal was das
   System meldet. „System" heisst: kein Attribut, die Medienabfrage entscheidet. */
:root[data-modus="dunkel"] {
  --grund: #1e1b17;
  --flaeche: #2b2721;
  --flaeche-2: #36312a;
  --tinte: #f5ead8;
  --gedaempft: #bcb09b;
  --linie: #463f35;
  --akzent: #e08a52;
  --akzent-kante: #9a5220;
  --akzent-tinte: #1e1208;
  --akzent-sanft: #4a2f1d;
  --akzent-text: #f0a370;
  --gut: #aebf92;
  --gut-kante: #56633f;
  --gut-sanft: #2f3a24;
  --falsch: #ff8a7d;
  --falsch-sanft: #4a221d;
  --tipp: #f2d36b;
  --tipp-sanft: #463a12;
  --fokus: #e08a52;
  --schatten: 0 1px 2px rgb(0 0 0 / 35%), 0 6px 18px rgb(0 0 0 / 30%);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus]) {
    --grund: #1e1b17;
    --flaeche: #2b2721;
    --flaeche-2: #36312a;
    --tinte: #f5ead8;
    --gedaempft: #bcb09b;
    --linie: #463f35;
    --akzent: #e08a52;
    --akzent-kante: #9a5220;
    --akzent-tinte: #1e1208;
    --akzent-sanft: #4a2f1d;
    --akzent-text: #f0a370;
    --gut: #aebf92;
    --gut-kante: #56633f;
    --gut-sanft: #2f3a24;
    --falsch: #ff8a7d;
    --falsch-sanft: #4a221d;
    --tipp: #f2d36b;
    --tipp-sanft: #463a12;
    --fokus: #e08a52;
    --schatten: 0 1px 2px rgb(0 0 0 / 35%), 0 6px 18px rgb(0 0 0 / 30%);
    color-scheme: dark;
  }
}

/* -- Grundlage ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: var(--t-2)/1.6 var(--schrift);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; min-width: 0; width: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--rund-s); }
/* Überschriften bekommen den Fokus nur, damit ein Screenreader nach einem
   Schrittwechsel dort weiterliest (lernpfad.js, zeige). Beim ersten Laden
   zeigte Chrome deshalb einen Rahmen um „Auf welcher Stufe bist du?". */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.nur-lesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.12;
  /* „Geschäftsbedingungen“ in Caprasimo ist am Handy breiter als die Spalte.
     Getrennt wird nach lang="de-AT"; overflow-wrap fängt, was die Trennung
     nicht kennt, statt den Rest vom Rand abschneiden zu lassen. */
  hyphens: auto; overflow-wrap: break-word;
  margin: 0 0 var(--r-3);
}
h1 { font-size: var(--t-7); }
h2 { font-size: var(--t-6); }
h3 { font-size: var(--t-4); }
p { margin: 0 0 var(--r-4); }
.lead { font-size: var(--t-3); color: var(--gedaempft); max-width: 58ch; }
.klein { font-size: var(--t-1); color: var(--gedaempft); }
.kicker {
  display: inline-block;
  font-size: var(--t-1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: var(--r-2);
}
.zahl { font-variant-numeric: tabular-nums; }

/* -- Raster --------------------------------------------------------------- */
.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--r-4); }
.lesen { max-width: var(--lesebreite); }
.abschnitt { padding: var(--r-7) 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.raster { display: grid; gap: var(--r-4); }
@media (min-width: 720px) {
  .huelle { padding: 0 var(--r-5); }
  .raster-2 { grid-template-columns: repeat(2, 1fr); }
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
  .abschnitt { padding: var(--r-8) 0; }
}

/* -- Symbole -------------------------------------------------------------- */
.sym { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
       stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sym-gross { width: 28px; height: 28px; }
.sym.sym-stufe { stroke: none; }

/* -- Knöpfe --------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2);
  min-height: 46px; padding: 0 var(--r-5);
  border: 1.5px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--tinte);
  font-weight: 600; font-size: var(--t-2); text-decoration: none; cursor: pointer;
  transition: background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.knopf:hover { border-color: var(--gedaempft); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.knopf-primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); box-shadow: 0 4px 0 var(--akzent-kante); }
.knopf-primaer:hover { border-color: var(--akzent); filter: brightness(1.06); }
.knopf-primaer:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--akzent-kante); }
.knopf-still { background: transparent; border-color: transparent; }
.knopf-still:hover { background: var(--flaeche-2); border-color: transparent; }
.knopf-breit { width: 100%; }
.knopf-symbol { width: 44px; padding: 0; }

/* -- Karten --------------------------------------------------------------- */
.karte {
  background: var(--flaeche);
  border: 1.5px solid var(--linie);
  border-radius: var(--rund-l);
  padding: var(--r-5);
}
a.karte, button.karte { display: block; width: 100%; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
a.karte:hover, button.karte:hover { border-color: var(--gedaempft); box-shadow: var(--schatten); }
.karte-ruhig { background: var(--flaeche-2); border-color: transparent; }
.karte h3 { margin-bottom: var(--r-2); }
.karte p:last-child { margin-bottom: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--flaeche-2); color: var(--gedaempft);
  font-size: var(--t-1); font-weight: 500; white-space: nowrap;
}
.chip-akzent { background: var(--akzent-sanft); color: var(--akzent-text); }
.chip-gut { background: var(--gut-sanft); color: var(--gut); }
.chip-bloecke { background: var(--gut-sanft); color: var(--gut); }
.chip-fall { background: var(--flaeche-2); color: var(--akzent-text); }
.chip-mc { background: var(--akzent-sanft); color: var(--akzent-text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.hinweis {
  border-left: 3px solid var(--akzent);
  background: var(--flaeche-2);
  padding: var(--r-3) var(--r-4);
  border-radius: 0 var(--rund) var(--rund) 0;
  font-size: var(--t-2);
}

/* -- Segmentschalter (eine Wahl aus wenigen) ------------------------------ */
.schalter {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--flaeche-2); border-radius: var(--rund);
}
.schalter button {
  min-height: 36px; padding: 0 var(--r-4);
  border: 0; border-radius: var(--rund-s); background: transparent;
  color: var(--gedaempft); font-weight: 600; font-size: var(--t-1); cursor: pointer;
}
.schalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }

/* -- Umschalter (an/aus) -------------------------------------------------- */
.umschalter {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-4);
  width: 100%; min-height: 56px; padding: var(--r-3) var(--r-4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  cursor: pointer; text-align: left;
}
.umschalter .spur {
  position: relative; width: 40px; height: 24px; flex: none;
  border-radius: 999px; background: var(--linie); transition: background var(--dauer) var(--kurve);
}
.umschalter .spur::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--flaeche); transition: transform var(--dauer) var(--kurve);
}
.umschalter[aria-checked="true"] .spur { background: var(--akzent); }
.umschalter[aria-checked="true"] .spur::after { transform: translateX(16px); }

/* -- Auswahlkacheln (Antworten, Bausteine) -------------------------------- */
.wahl {
  display: flex; align-items: flex-start; gap: var(--r-3);
  width: 100%; min-height: 48px; padding: var(--r-3) var(--r-4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  text-align: left; cursor: pointer; line-height: 1.45;
  transition: border-color var(--dauer) var(--kurve), background var(--dauer) var(--kurve);
}
.wahl:hover { border-color: var(--gedaempft); }
.wahl .marke {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--rund-s);
  border: 1px solid var(--linie); font-size: var(--t-1); font-weight: 700; color: var(--gedaempft);
}
.wahl[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-sanft); }
.wahl[aria-pressed="true"] .marke { border-color: var(--akzent); background: var(--akzent); color: var(--akzent-tinte); }
.wahl { border-width: 1.5px; }
.wahl.ist-richtig { border-color: var(--gut); background: var(--gut-sanft); }
.wahl.ist-falsch { border-color: var(--falsch); background: var(--falsch-sanft); color: var(--tinte); }
.wahl.ist-falsch .urteil { color: var(--falsch); }
.ist-tipp { border-color: var(--tipp) !important; background: var(--tipp-sanft) !important; }
/* Das Urteil steht unter der Aussage, nicht daneben: Am Handy bliebe der
   Aussage sonst eine Spalte von drei Wörtern Breite. */
.wahl { flex-wrap: wrap; }
.wahl > span:not(.marke):not(.urteil) { flex: 1; min-width: 0; }
.wahl .urteil { flex-basis: 100%; padding-left: calc(24px + var(--r-3)); font-size: var(--t-1); font-weight: 600; }
.wahlen { display: grid; gap: var(--r-2); }

/* -- Leiste (Zeit, Fortschritt) ------------------------------------------- */
.leiste { height: 8px; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.leiste > i { display: block; height: 100%; width: 0; background: var(--akzent); border-radius: inherit;
              transition: width 1s linear; }
.leiste.ist-voll > i { background: var(--tinte); }

/* -- Ring (Beherrschung) -------------------------------------------------- */
.ring { position: relative; width: 56px; height: 56px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .bahn { stroke: var(--flaeche-2); }
.ring .wert { stroke: var(--gut); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--kurve); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-1); font-weight: 700; }
.ring-gross { width: 120px; height: 120px; }
.ring-gross b { font-size: var(--t-5); font-family: var(--schrift-titel); font-weight: 400; }

/* -- Dialog --------------------------------------------------------------- */
dialog.dialog {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--linie); border-radius: var(--rund-l);
  background: var(--flaeche); color: var(--tinte);
  padding: var(--r-6); box-shadow: var(--schatten);
}
dialog.dialog::backdrop { background: rgb(20 20 18 / 45%); }
.dialog-knoepfe { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-top: var(--r-5); }

/* -- Kopf und Menü -------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle { display: flex; align-items: center; gap: var(--r-3); height: var(--kopf-hoehe); }
.kopf-menue { display: inline-flex; align-items: center; gap: var(--r-2); min-height: 44px; padding: 0 var(--r-3) 0 var(--r-2);
  border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); cursor: pointer; font-weight: 600; font-size: var(--t-1); }
.kopf-marke { display: inline-flex; align-items: center; gap: var(--r-2); text-decoration: none;
  font-family: var(--schrift-titel); font-size: var(--t-5); font-weight: 400; }
.kopf-marke svg { width: 26px; height: 26px; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r-2); }
.kopf-stufe { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--r-3);
  border-radius: 999px; background: var(--flaeche-2); font-size: var(--t-1); font-weight: 600; text-decoration: none; }
@media (max-width: 520px) { .kopf-menue span { display: none; } .kopf-menue { padding: 0 10px; } }

.menue { position: fixed; inset: 0; z-index: 40; visibility: hidden; }
.menue.ist-offen { visibility: visible; }
.menue-grund { position: absolute; inset: 0; background: rgb(20 20 18 / 40%); opacity: 0; transition: opacity var(--dauer) var(--kurve); }
.menue-tafel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(340px, 88vw);
  display: flex; flex-direction: column; gap: var(--r-4);
  padding: var(--r-4); overflow-y: auto;
  background: var(--flaeche); border-right: 1px solid var(--linie);
  transform: translateX(-100%); transition: transform 240ms var(--kurve);
}
.menue.ist-offen .menue-grund { opacity: 1; }
.menue.ist-offen .menue-tafel { transform: none; }
.menue-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.menue nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menue nav a {
  display: flex; align-items: center; gap: var(--r-3); min-height: 48px; padding: 0 var(--r-3);
  border-radius: var(--rund); text-decoration: none; font-weight: 500;
}
.menue nav a:hover { background: var(--flaeche-2); }
.menue nav a[aria-current="page"] { background: var(--akzent-sanft); color: var(--akzent); font-weight: 600; }
.menue nav .klein { margin-left: auto; }
.menue-gruppe { border-top: 1px solid var(--linie); padding-top: var(--r-4); }
.menue-gruppe .kicker { margin-bottom: var(--r-3); }
.menue-fuss a { text-decoration: none; }
.menue-fuss { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px var(--r-3); font-size: var(--t-1); color: var(--gedaempft); }

/* -- Fuss ----------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); padding: var(--r-6) 0; font-size: var(--t-1); color: var(--gedaempft); margin-top: var(--r-7); }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-5); align-items: center; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 var(--r-4); }
.fuss a { text-decoration: none; }
/* 44 px Tippfläche wie jeder andere Verweis im Haus; am Handy waren die
   Rechtstexte 22 px hohe Ziele, eng untereinander. */
.fuss nav a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss a:hover { text-decoration: underline; }

/* -- Bewegung ------------------------------------------------------------- */
@keyframes jc-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes jc-stempel { 0% { opacity: 0; transform: scale(1.35); } 60% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes jc-nope { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.schuettelt { animation: jc-nope 320ms var(--kurve); }
@keyframes jc-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.erscheint { animation: jc-auf 280ms var(--kurve) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Darstellung im Menü: drei Muster statt drei Wörter. */
[data-modus-wahl] { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.schalter .modus-muster { display: grid; justify-items: center; gap: 6px; min-height: 0; padding: var(--r-2); }
.modus-bild { position: relative; display: block; width: 100%; height: 40px; border-radius: var(--rund-s); border: 1.5px solid var(--linie); }
.modus-bild i { position: absolute; right: 6px; bottom: 6px; width: 14px; height: 14px; border-radius: 50%; }
.schalter .modus-muster[aria-pressed="true"] .modus-bild { border-color: var(--akzent); }