/* Gemeinsames Aussehen aller Übungen: Familie „Grundschule“, Hebel „Wellig“ (Tokens aus familien.yaml). */
@font-face { font-family: "Lexend"; src: url("lexend.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #1F2433; --muted: #4E5566; --line: #E6DFD3; --bg: #FFF8EC; --card: #fff;
  --hue: #975214; --akzent: #E07A1F; --tint: #eee3d9;
  --merke: #faeadb; --merke-t: #975214; --hinweis: #dbfafa; --hinweis-t: #107876;
  --aufgabe: #faf9db; --aufgabe-t: #787510; --beispiel: #dbebfa; --beispiel-t: #145897;
  --ok: #166534; --okbg: #ECFDF3; --bad: #B42318; --badbg: #FEF3F2; --knopf-t: #fff; --feld: #fff;
  --kopf: "Lexend", "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  --grund: "Segoe UI", "Trebuchet MS", Roboto, Arial, sans-serif;
  --welle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M6 6.6C30 4.8 64 7.9 94 5.8C95.5 32 93.3 66 94.3 94.1C66 95.6 32 93.1 5.9 94.3C4.5 66 6.9 34 6 6.6Z%22 fill=%22none%22 stroke=%22%23975214%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --welle-hell: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M6 6.6C30 4.8 64 7.9 94 5.8C95.5 32 93.3 66 94.3 94.1C66 95.6 32 93.1 5.9 94.3C4.5 66 6.9 34 6 6.6Z%22 fill=%22none%22 stroke=%22%23D9C8B4%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.6 var(--grund);
  -webkit-tap-highlight-color: transparent; }
h1, h2, h3, .kopf { font-family: var(--kopf); font-weight: 600; line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.5em; } h2 { font-size: 1.25em; }
.seite { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; }

/* Kopfzeile mit Titel und Fortschritt */
.leiste { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.leiste h1 { font-size: 1.15em; margin: 0; flex: 1; }
.punkte { font-family: var(--kopf); font-weight: 600; color: var(--hue); white-space: nowrap; }
.balken { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 16px; }
.balken > i { display: block; height: 100%; width: 0; background: var(--akzent); border-radius: 99px; transition: width .3s; }

/* Karten und Kästen mit welligem Rand */

.karte { background: var(--card); background-clip: padding-box; padding: 18px 18px; margin: 0 0 14px;
  border: 2px solid var(--hue); border-image: var(--welle) 12 / 10px stretch; border-radius: 6px; }
.karte.leise { border-color: #D9C8B4; border-image: var(--welle-hell) 12 / 10px stretch; }
.kasten { background-clip: padding-box; padding: 14px 16px; margin: 0 0 14px; border-radius: 6px; border: 2px solid transparent;
  border-image: var(--welle) 12 / 10px stretch; }
.kasten.merke { background: var(--merke); } .kasten.hinweis { background: var(--hinweis); }
.kasten.aufgabe { background: var(--aufgabe); } .kasten.beispiel { background: var(--beispiel); }
.kasten .titel { font-family: var(--kopf); font-weight: 600; margin-bottom: 4px; }
.kasten.merke .titel { color: var(--merke-t); } .kasten.hinweis .titel { color: var(--hinweis-t); }
.kasten.aufgabe .titel { color: var(--aufgabe-t); } .kasten.beispiel .titel { color: var(--beispiel-t); }
.frage { font-size: 1.12em; margin: 0 0 12px; }
.nr { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--hue); color: var(--knopf-t); font-family: var(--kopf); font-weight: 600; margin-right: 8px; flex: none; }
.bild { display: block; margin: 6px auto 12px; max-width: 100%; height: auto; }
.bild text { font-family: var(--kopf); font-weight: 600; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 10px 20px; border: 0; border-radius: 14px; background: var(--hue); color: var(--knopf-t);
  font: 600 1em var(--kopf); cursor: pointer; text-decoration: none; touch-action: manipulation; }
.knopf:active { transform: translateY(1px); }
.knopf.zwei { background: var(--card); color: var(--hue); box-shadow: inset 0 0 0 2px var(--hue); }
.knopf[disabled] { opacity: .45; cursor: default; }
.knopf.breit { width: 100%; }
.wahl { display: grid; gap: 10px; margin: 6px 0 4px; }
.wahl.zwei-spalten { grid-template-columns: 1fr 1fr; }
.wahl button { min-height: 52px; padding: 10px 14px; border-radius: 12px; background: var(--card); color: var(--ink);
  border: 2px solid var(--line); font: 600 1em var(--grund); text-align: left; cursor: pointer; touch-action: manipulation; }
.wahl button.ok { background: var(--okbg); border-color: var(--ok); color: var(--ok); }
.wahl button.falsch { background: var(--badbg); border-color: var(--bad); color: var(--bad); }
.wahl button:disabled { cursor: default; }

/* Eingabe */
.eingabe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eingabe input { font: 600 1.2em var(--grund); width: 9em; max-width: 100%; min-height: 52px; padding: 8px 12px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--feld); color: var(--ink); }
.eingabe input:focus { outline: 3px solid var(--akzent); outline-offset: 1px; }
.eingabe .einheit { font-weight: 600; color: var(--muted); }

/* Rückmeldung */
.rueck { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.rueck.ok { background: var(--okbg); color: var(--ok); }
.rueck.falsch { background: var(--badbg); color: var(--bad); }
.rueck .weg { font-weight: 400; color: var(--ink); margin-top: 6px; }
.unten { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Ende */
.ende { text-align: center; }
.ende .gross { font-family: var(--kopf); font-weight: 600; font-size: 2.6em; color: var(--hue); margin: 6px 0; }
.sterne { font-size: 2.2em; letter-spacing: 6px; color: var(--akzent); }
.sterne .aus { color: var(--line); }
.ha-nachweis { display: flex; flex-direction: column; gap: 2px; margin: 12px auto 4px; padding: 10px 14px; max-width: 20rem;
  border: 2px dashed var(--hue); border-radius: 12px; background: var(--bg); }
.ha-nachweis b { font-family: var(--kopf); font-size: 1.6em; color: var(--hue); letter-spacing: 1px; }
.liste { text-align: left; margin: 14px 0; padding: 0; list-style: none; }
.liste li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.klein { font-size: .9em; color: var(--muted); }
.versteckt { display: none !important; }
sup { font-size: .7em; line-height: 0; }
@media (max-width: 380px) { body { font-size: 17px; } .karte { padding: 14px 12px; } }

.knoepfe-mehr { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.knoepfe-mehr a.knopf { text-align: center; text-decoration: none; }
.leiste .klein-knopf { padding: 6px 12px; min-height: 0; font-size: .85em; margin-left: 8px; }
.ende .zeile { margin: 4px 0; }

/* ---------- Designs: ?design=<name> an der Adresse (kern.js setzt data-design); ohne Angabe „wellig“ ---------- */
[data-design] .karte, [data-design] .kasten { border-image: none; }
[data-design="tinte"] { --ink: #1B2433; --muted: #4B566B; --line: #DCE5F0; --bg: #F5F8FC; --card: #fff; --hue: #2B5A8F;
  --akzent: #3E7CC4; --tint: #E3ECF7; }
[data-design="tinte"] .karte { border: 2px solid var(--line); border-radius: 14px; }
[data-design="salbei"] { --ink: #1F2A1A; --muted: #4F5D46; --line: #D9E3CE; --bg: #F4F7F0; --card: #fff; --hue: #4A6B36;
  --akzent: #6E9A4E; --tint: #E6EEDD; }
[data-design="salbei"] .karte { border: 2px solid #CBD9BC; border-radius: 18px; }
[data-design="lagune"] { --ink: #13302C; --muted: #45605B; --line: #D3EAE5; --bg: #FFFFFF; --card: #F2FAF8; --hue: #1D6D63;
  --akzent: #2F9E8F; --tint: #E1F3EF; }
[data-design="lagune"] .karte { border: 0; border-radius: 20px; box-shadow: 0 2px 12px rgba(19, 48, 44, .08); }
[data-design="pflaume"] { --ink: #2A1A28; --muted: #5E4A5B; --line: #EADBE7; --bg: #FBF6FA; --card: #fff; --hue: #7D3F74;
  --akzent: #B35FA6; --tint: #F3E6F0; }
[data-design="pflaume"] .karte { border: 3px dashed #D7B9D1; border-radius: 22px; }
[data-design="nacht"] { --ink: #E8ECF4; --muted: #A9B1C3; --line: #343B4E; --bg: #13161E; --card: #1D2130; --hue: #9DC0EA;
  --akzent: #E8B04F; --tint: #262B3C; --ok: #7EE2A8; --okbg: #153424; --bad: #FFA4A0; --badbg: #3D1A18;
  --knopf-t: #13161E; --feld: #262B3C; --merke: #2E2A22; --hinweis: #1D2E31; --aufgabe: #2D2C1F; --beispiel: #1E2838; }
[data-design="nacht"] .karte { border: 2px solid var(--line); border-radius: 14px; }
[data-design="nacht"] .bild { filter: invert(.88) hue-rotate(180deg); }

/* ---------- Lernkartei (kartei.js) ---------- */
.kk-auswahl, .kk-modus { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.kk-auswahl button, .kk-modus button { min-height: 46px; padding: 8px 14px; border-radius: 12px; background: var(--card); color: var(--ink);
  border: 2px solid var(--line); font: 600 1em var(--grund); cursor: pointer; touch-action: manipulation; }
.kk-auswahl button { min-width: 3.2em; }
.kk-modus button { flex: 1; }
.kk-auswahl button[aria-pressed="true"], .kk-modus button[aria-pressed="true"] { border-color: var(--hue); background: var(--tint); color: var(--hue); }
.kk-faecher { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 16px; }
.kk-f { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 10px; background: var(--tint); }
.kk-f b { font-family: var(--kopf); font-size: 1.2em; color: var(--hue); }
.kk-f span { font-size: .72em; color: var(--muted); white-space: nowrap; }
.kk-f.leer { opacity: .45; }
.kk-f.f5 { background: var(--okbg); } .kk-f.f5 b { color: var(--ok); }
.kk-f.f1 { background: var(--badbg); } .kk-f.f1 b { color: var(--bad); }
.kk-fachzeile { display: flex; align-items: center; gap: 6px; margin: -6px 0 8px; }
.kk-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.kk-punkt.f1 { background: var(--bad); } .kk-punkt.f2, .kk-punkt.f3, .kk-punkt.f4 { background: var(--akzent); } .kk-punkt.f5 { background: var(--ok); }
.kk-karte { display: grid; width: 100%; min-height: 220px; padding: 0; margin: 0 0 14px; border: 0; background: none; cursor: pointer;
  perspective: 1200px; touch-action: manipulation; font: inherit; color: var(--ink); }
.kk-seite { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 18px;
  min-height: 220px; text-align: center; background: var(--card); border: 2px solid var(--hue); border-radius: 18px;
  box-shadow: 0 3px 0 var(--line); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .45s; }
.kk-vorne { font: 600 clamp(26px, 8vw, 40px)/1.25 var(--kopf); color: var(--hue); }
.kk-hinten { transform: rotateY(180deg); font: 600 clamp(22px, 6.5vw, 32px)/1.3 var(--kopf); }
.kk-hinten .klein, .kk-hinten i { font: 400 .55em/1.4 var(--grund); color: var(--muted); }
.kk-karte.um .kk-vorne { transform: rotateY(-180deg); }
.kk-karte.um .kk-hinten { transform: rotateY(0); }
@media (prefers-reduced-motion: reduce) { .kk-seite { transition: none; } }
.kk-knoepfe { display: flex; gap: 10px; }
.kk-knoepfe .knopf { flex: 1; }
.kk-ja { background: var(--ok); }
.kk-nein { background: var(--bad); }
[data-design="nacht"] .kk-ja, [data-design="nacht"] .kk-nein { color: #13161E; }
.kk-eingabe { justify-content: center; }
.kk-eingabe input { flex: 1; min-width: 0; }
.kk-reset { display: block; margin: 18px auto 0; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85em; }

/* ---------- Design „verspielt“ (Kursmühle-Familie Verspielt: Handschrift-Titel, Sticker, gestrichelte Karten) ---------- */
@font-face { font-family: "Kalam"; src: url("kalam.woff2") format("woff2"); font-weight: 700; font-display: swap; }
[data-design="verspielt"] { --ink: #22223B; --muted: #54556B; --line: #D9D6E8; --bg: #FFFBF2; --card: #fff; --hue: #7C3AED;
  --akzent: #7C3AED; --tint: #EEE7FD; --kopf: "Kalam", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive; }
[data-design="verspielt"] h1, [data-design="verspielt"] h2, [data-design="verspielt"] .kopf { font-weight: 700; }
[data-design="verspielt"] .karte { border: 2px dashed var(--ink); border-radius: 14px; }
[data-design="verspielt"] .knopf { box-shadow: 3px 3px 0 var(--ink); border-radius: 12px; font-weight: 700; }
[data-design="verspielt"] .knopf.zwei { box-shadow: inset 0 0 0 2px var(--hue), 3px 3px 0 var(--ink); }
[data-design="verspielt"] .nr { transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--ink); }
[data-design="verspielt"] .kk-seite { border-style: dashed; border-color: var(--ink); box-shadow: 4px 4px 0 var(--tint); }

/* ---------- Design „magazin“ (Kursmühle-Familie Magazin: große Titel, feine Linien, eckig, Schwarz mit Rot) ---------- */
@font-face { font-family: "Bebas Neue"; src: url("bebasneue.woff2") format("woff2"); font-weight: 400; font-display: swap; }
[data-design="magazin"] { --ink: #17171A; --muted: #6A6F7A; --line: #D8DAE0; --bg: #fff; --card: #fff; --hue: #111111;
  --akzent: #C8102E; --tint: #F1F1F3; --kopf: "Bebas Neue", "Arial Narrow", Arial, sans-serif; }
[data-design="magazin"] h1, [data-design="magazin"] h2, [data-design="magazin"] .kopf, [data-design="magazin"] .punkte,
[data-design="magazin"] .knopf, [data-design="magazin"] .nr, [data-design="magazin"] .ende .gross,
[data-design="magazin"] .kk-vorne, [data-design="magazin"] .kk-hinten, [data-design="magazin"] .kk-f b { font-weight: 400; letter-spacing: .04em; }
[data-design="magazin"] .leiste { border-bottom: 3px solid var(--akzent); padding-bottom: 6px; }
[data-design="magazin"] .leiste h1 { font-size: 1.7em; }
[data-design="magazin"] .punkte { font-size: 1.4em; }
[data-design="magazin"] .karte { border: 0; border-top: 3px solid var(--ink); border-radius: 0; padding: 16px 2px; }
[data-design="magazin"] .knopf { border-radius: 0; font-size: 1.25em; }
[data-design="magazin"] .nr, [data-design="magazin"] .balken, [data-design="magazin"] .balken > i { border-radius: 0; }
[data-design="magazin"] .wahl button, [data-design="magazin"] .eingabe input, [data-design="magazin"] .kk-auswahl button,
[data-design="magazin"] .kk-modus button, [data-design="magazin"] .kk-f, [data-design="magazin"] .rueck,
[data-design="magazin"] .ha-nachweis { border-radius: 0; }
[data-design="magazin"] .kk-seite { border: 2px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 var(--akzent); }
[data-design="magazin"] .kk-vorne { font-size: clamp(48px, 15vw, 72px); color: var(--ink); }
[data-design="magazin"] .kk-hinten { font-size: clamp(40px, 12vw, 60px); }
[data-design="magazin"] .kk-auswahl button[aria-pressed="true"], [data-design="magazin"] .kk-modus button[aria-pressed="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Rand ?kasten=wellig|sehr-wellig (kern.js zeichnet --welle in der Akzentfarbe) ---------- */
[data-kasten] .karte, [data-kasten] .kasten, [data-kasten] .kk-seite { border: 2px solid var(--hue);
  border-image: var(--welle) 12 / 10px stretch; border-radius: 6px; box-shadow: none; }
[data-kasten="sehr-wellig"] .karte, [data-kasten="sehr-wellig"] .kasten, [data-kasten="sehr-wellig"] .kk-seite {
  border-image: var(--welle) 18 / 14px round; padding: 24px 24px; }