/* Ho-Ho! – Gestaltung „Thai-Milchtee“: cremiger Grund, Milchtee-Orange, tiefes Tee-Braun.
   Schriften selbst gehostet (Noto Sans Thai, Kanit 800; SIL OFL, siehe static/fonts/). Keine fremden Ressourcen. */
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-thai-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-thai-latin.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: "Kanit"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/kanit-800-thai.woff") format("woff"); }

:root {
  --grund: #FFF6E9; --karte: #FFFFFF; --tee: #F08A3C; --tee-dunkel: #C96A1E; --tee-hell: #FCE3C8;
  --braun: #4A2C1A; --leise: #7A5A45; --pandan: #3FA66B; --pandan-hell: #DDF2E5;
  --himbeer: #E0457B; --himbeer-hell: #FBDDE8; --himmel: #3C8DDE;
  --schrift: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", "Thonburi", sans-serif;
  --kopf: "Kanit", "Noto Sans Thai", system-ui, sans-serif;
  --griff: 48px; --rund: 18px;
  --schatten: 0 6px 18px rgba(74, 44, 26, .14), 0 1px 3px rgba(74, 44, 26, .12);
}
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--grund); color: var(--braun); font-family: var(--schrift); font-size: 1.0625rem;
  line-height: 1.6; min-height: 100vh; min-height: 100dvh; overflow-wrap: anywhere; }
[lang="th"], .th { line-height: 1.75; }   /* Thai braucht Luft: keine abgeschnittenen Tonzeichen */
h1, h2, h3 { font-family: var(--kopf); font-weight: 800; line-height: 1.5; margin: .4em 0 .3em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
p { margin: .4em 0; }
.leise { color: var(--leise); font-size: .95rem; }
.gut { color: var(--pandan); font-weight: 600; }
.fehlertext { color: #B0213F; font-weight: 600; }
:focus-visible { outline: 3px solid var(--himmel); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }

/* ---------- Rahmen ---------- */
.app { max-width: 980px; margin: 0 auto; min-height: 100dvh;
  padding: 0 max(1rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.laden { text-align: center; padding: 3rem 1rem; font-family: var(--kopf); font-size: 1.4rem; }
.kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  padding: calc(.6rem + env(safe-area-inset-top)) 0 .6rem; position: sticky; top: 0; z-index: 20;
  background: linear-gradient(var(--grund) 85%, transparent); }
.kopf-logo { font-family: var(--kopf); font-weight: 800; font-size: 1.35rem; color: var(--tee-dunkel); }
.kopf-platz { flex: 1 1 0; }
.status { flex: 0 1 auto; min-height: 44px; padding: .1rem .8rem; border-radius: 999px; border: 2px solid var(--pandan); background: var(--pandan-hell);
  font-size: .85rem; cursor: pointer; max-width: 100%; }
.status.offline { border-color: var(--himbeer); background: var(--himbeer-hell); }
.zahnrad { min-width: var(--griff); flex: 0 0 auto; }
.kopf-zurueck { flex: 0 0 auto; white-space: nowrap; }
.knopf, .chip, .bewertung, .kachel, .marke, .status { overflow-wrap: normal; word-break: normal; }
.inhalt { outline: none; padding-top: .5rem; }
.meldungen { position: fixed; left: 0; right: 0; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; gap: .4rem; padding: 0 max(.8rem, env(safe-area-inset-left)); pointer-events: none; }
.meldung { pointer-events: auto; display: flex; align-items: center; gap: .6rem; justify-content: space-between;
  background: var(--braun); color: #fff; border-radius: 16px; padding: .6rem .9rem; box-shadow: var(--schatten); }
.meldung.fehler { background: #8E1B38; }
.meldung-zu { background: transparent; border: 0; color: inherit; min-width: 40px; min-height: 40px; font-size: 1.1rem; cursor: pointer; }

/* ---------- zwei Sprachen ---------- */
.zwei { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .45em; text-align: center; }
.zwei .trenner { opacity: .45; }
.knopf .zwei, .kachel .zwei, .chip .zwei, .bewertung .zwei { justify-content: center; }
@media (max-width: 479px) {
  /* enge Bildschirme: Deutsch über Thai, kein hängender Trennpunkt */
  .zwei { flex-direction: column; align-items: flex-start; row-gap: 0; }
  .zwei .trenner { display: none; }
  .knopf .zwei, .kachel .zwei, .chip .zwei, .bewertung .zwei, .zahl-text .zwei, .abschluss .zwei, .anmeldung .zwei,
  .status .zwei, .karte .zwei, .marke .zwei { align-items: center; }
  .kopf-logo { font-size: 1.1rem; } .status { font-size: .75rem; padding: 0 .6rem; }
  .ring-box { width: 132px; height: 132px; } .ring-mitte strong { font-size: 1.3rem; }
}
h1 .zwei, h2 .zwei, .frage .zwei { justify-content: flex-start; text-align: left; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--griff); padding: .4rem 1rem;
  border: 2px solid var(--tee); border-radius: var(--rund); background: #fff; color: var(--braun); cursor: pointer;
  font-weight: 600; box-shadow: 0 3px 0 var(--tee-hell); transition: transform .12s, opacity .12s; touch-action: manipulation; }
.knopf:active { transform: translateY(2px) scale(.98); box-shadow: none; }
.knopf:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.knopf.haupt { background: var(--tee); border-color: var(--tee-dunkel); color: #fff; box-shadow: 0 4px 0 var(--tee-dunkel); }
.knopf.zweit { border-color: #D8BFA7; }
.knopf.klein { min-height: 44px; padding: .2rem .8rem; font-size: .95rem; }
.knopf.gross { min-height: 56px; font-size: 1.15rem; }
.knopf.riesig { width: 100%; min-height: 76px; font-family: var(--kopf); font-size: clamp(1.25rem, 6vw, 1.6rem); border-radius: 26px; margin: .8rem 0; }
.knopf.riesig .th { line-height: 1.5; }
.knopf.aktiv { background: var(--himbeer); border-color: var(--himbeer); color: #fff; animation: puls 1s ease-in-out infinite; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .6rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .3rem 0 .6rem; }
.chip { flex: 0 1 auto; min-height: 44px; padding: .2rem .8rem; border-radius: 999px; border: 2px solid #D8BFA7; background: #fff; cursor: pointer; }
.chip.aktiv { background: var(--tee); border-color: var(--tee-dunkel); color: #fff; }

/* ---------- Kacheln, Zahlen, Ring ---------- */
.kachelraster, .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .8rem; margin: 1rem 0; }
.kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 112px; padding: .8rem;
  background: var(--karte); border: 0; border-radius: 26px 20px 28px 18px; box-shadow: var(--schatten); cursor: pointer; text-align: center; }
.kachel:nth-child(even) { border-radius: 20px 28px 18px 26px; }
.kachel:active { transform: scale(.97); }
.kachel:disabled { opacity: .5; }
.kachel-emoji { font-size: 2.4rem; line-height: 1.3; }
.kachel-hinweis { font-size: .85rem; }
.arten { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.marke { display: inline-block; padding: 0 .6rem; border-radius: 999px; background: var(--tee-hell); font-size: .8rem; }
.marke.neu { background: var(--pandan-hell); } .marke.warn { background: var(--himbeer-hell); }
.start-oben { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.ring-box { position: relative; width: 168px; height: 168px; flex: 0 0 auto; }
.ring { width: 100%; height: 100%; }
.ring-grund { stroke: var(--tee-hell); } .ring-wert { stroke: var(--tee); }
.ring-mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-mitte strong { font-family: var(--kopf); font-size: 1.6rem; line-height: 1.4; }
.ring-mitte small { font-size: .7rem; max-width: 110px; color: var(--leise); }
.zahlen, .zusammen-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; flex: 1 1 240px; }
.zahl { background: var(--karte); border-radius: 18px; padding: .5rem .7rem; box-shadow: var(--schatten); text-align: center; }
.zahl-wert { font-family: var(--kopf); font-size: 1.5rem; line-height: 1.5; } .zahl-text { font-size: .8rem; color: var(--leise); }
.partnerkarte, .block, .messspalte { background: var(--karte); border-radius: 22px 18px 24px 16px; box-shadow: var(--schatten); padding: .8rem 1rem; margin: .8rem 0; }

/* ---------- Karten und Lernen ---------- */
.fortschritt { height: 12px; border-radius: 999px; background: var(--tee-hell); overflow: hidden; margin: .4rem 0 1rem; }
.fortschritt-balken { height: 100%; background: var(--pandan); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.karte { background: var(--karte); border-radius: 30px 22px 32px 20px; box-shadow: var(--schatten); padding: 1.1rem 1rem 1rem;
  margin: .5rem auto; max-width: 620px; text-align: center; transform: rotate(-.4deg); }
.karte-emoji { font-size: clamp(3.2rem, 18vw, 5.5rem); line-height: 1.3; }
.karte-text { font-family: var(--kopf); font-size: clamp(1.5rem, 6.5vw, 2.2rem); line-height: 1.6; margin: .2rem 0; }
.karte-mutter { font-size: 1.25rem; margin: .2rem 0; }
.karte-hilfe { font-size: 1.15rem; color: var(--tee-dunkel); font-weight: 600; margin: .3rem 0; }
.karte-toene { font-size: 1.6rem; letter-spacing: .25em; color: var(--himmel); }
.kartenfuss { margin-top: .6rem; display: flex; justify-content: center; }
.karten-hinten { border-top: 2px dashed var(--tee-hell); margin-top: .8rem; padding-top: .6rem; }
.kartenblock { max-width: 620px; margin: 0 auto; }
.frage { font-weight: 700; margin-top: .8rem; }
.loesung { font-family: var(--kopf); font-size: 1.4rem; line-height: 1.6; color: var(--pandan); }
.antworten { display: grid; gap: .6rem; margin: .6rem 0; }
.antwort { width: 100%; justify-content: center; }
.antwort.richtig { background: var(--pandan-hell); border-color: var(--pandan); }
.antwort.falsch { background: var(--himbeer-hell); border-color: var(--himbeer); }
.bewertungsleiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .6rem 0; }
.bewertung { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 84px; padding: .4rem .2rem; border-radius: 20px;
  border: 3px solid; background: #fff; cursor: pointer; font-weight: 700; touch-action: manipulation; }
.bewertung .emoji { font-size: 1.6rem; }
.bewertung:active { transform: scale(.96); }
.bewertung.nochmal { border-color: var(--himbeer); } .bewertung.fast { border-color: var(--tee); } .bewertung.richtig { border-color: var(--pandan); background: var(--pandan-hell); }
.geaendert-hinweis { background: var(--tee-hell); border-radius: 12px; padding: .2rem .6rem; font-size: .9rem; display: inline-block; }
.aufnahmebox { background: var(--grund); border-radius: 18px; padding: .4rem .6rem; margin: .6rem 0; }
.kurvenplatz canvas { width: 100%; max-width: 320px; height: auto; background: #fff; border-radius: 12px; }
.abschluss { text-align: center; padding: 1.5rem 0; }
.abschluss-emoji { font-size: 5rem; line-height: 1.3; }
.abschluss-zahlen { list-style: none; padding: 0; font-size: 1.3rem; }

/* ---------- Anmeldung ---------- */
.anmeldung { max-width: 460px; margin: 1.5rem auto; text-align: center; }
.logo-gross { font-size: 5rem; line-height: 1.3; }
.untertitel { font-size: 1.2rem; display: flex; justify-content: center; }
.anmeldeform { display: grid; gap: .8rem; text-align: left; }
.kachelreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1rem; }
.kachel.benutzer { min-height: 150px; }
.kachel-name { font-family: var(--kopf); font-size: 2rem; line-height: 1.5; }
.kachel.mick { border-bottom: 6px solid var(--himmel); } .kachel.film { border-bottom: 6px solid var(--himbeer); }
.kachel-flagge { font-size: 1.6rem; }

/* ---------- Formulare, Dialog ---------- */
.feldzeile { display: grid; gap: .2rem; margin: .5rem 0; }
.feldname { font-size: .9rem; color: var(--leise); font-weight: 600; }
.feld { width: 100%; min-height: var(--griff); padding: .3rem .8rem; border: 2px solid #D8BFA7; border-radius: 14px; background: #fff; }
.feld.gross { min-height: 56px; font-size: 1.2rem; }
.dialog { width: min(94vw, 540px); max-height: 90vh; max-height: 90dvh; overflow: auto; border: 0; border-radius: 26px; padding: 1rem;
  background: var(--karte); color: var(--braun); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dialog::backdrop { background: rgba(74, 44, 26, .55); }
.verlaufliste { padding-left: 1.1rem; font-size: .9rem; }
.vorschau { font-size: 1.1rem; }
.hinweis { background: var(--tee-hell); border-radius: 18px; padding: .6rem .9rem; margin: .8rem 0; }
.hinweis.warnung { background: var(--himbeer-hell); }
.hinweis-zeile p { margin: .2rem 0; }
.hinweis .zwei, .partnerkarte .zwei, .block .zwei { justify-content: flex-start; text-align: left; }
.knopf .zwei { justify-content: center; text-align: center; }
.schalter { display: flex; align-items: center; gap: .6rem; min-height: var(--griff); }
.schalter input { width: 26px; height: 26px; accent-color: var(--tee); }
.postliste { padding-left: 1.1rem; font-size: .9rem; }

/* ---------- Wortschatz, Messung, Spiele ---------- */
.wort-kopf { display: flex; flex-wrap: wrap; gap: .5rem; } .wort-kopf .feld { flex: 1 1 200px; }
.wortzeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; background: var(--karte); border-radius: 20px;
  padding: .7rem .9rem; margin: .6rem 0; box-shadow: var(--schatten); }
.wort-emoji { font-size: 2.2rem; line-height: 1.4; }
.wort-lern { font-family: var(--kopf); font-size: 1.35rem; line-height: 1.6; }
.wort-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.vorsprech-platz { grid-column: 1 / -1; }
.messraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.messzeile { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--tee-hell); flex-wrap: wrap; }
.messwert { font-family: var(--kopf); font-size: 1.15rem; display: flex; flex-direction: column; text-align: right; }
.spiel-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.spiel-titel { flex: 1 1 auto; margin: 0; }
.punkte-anzeige { font-family: var(--kopf); font-size: 1.2rem; background: var(--tee-hell); border-radius: 999px; padding: 0 .8rem; }
.leer { text-align: center; padding: 2rem 0; font-size: 1.2rem; }

/* ---------- Effekte (nur transform/opacity) ---------- */
.effekt { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.konfetti { position: absolute; top: -8%; left: var(--x); font-size: 2rem; animation: fallen 1.5s ease-in var(--v) forwards; }
.effekt .gross { position: absolute; top: 40%; left: 50%; font-size: 5rem; transform: translate(-50%, -50%); }
.effekt.hoho { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.affe { font-size: 6rem; line-height: 1.3; animation: wackeln .5s ease-in-out 2; }
.hoho-text { font-family: var(--kopf); font-size: 1.8rem; color: var(--himbeer); background: #fff; border-radius: 999px; padding: .1rem 1rem; box-shadow: var(--schatten); }
@keyframes fallen { to { transform: translate(var(--dx), 110vh) rotate(420deg); opacity: .2; } }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes puls { 50% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .karte { transform: none; }
}
@media (min-width: 820px) {
  .app { padding-bottom: 3rem; } .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wortzeile { grid-template-columns: auto minmax(0, 1fr) auto; } .wort-knoepfe { grid-column: auto; flex-direction: column; }
  .vorsprech-platz { grid-column: 1 / -1; }
}

/* ---------- Kein stiller Datenverlust: Postausgang, Abgelehntes, neue Version ---------- */
.meldung.dauerhaft { flex-wrap: wrap; border: 2px solid #fff; }
.meldung.dauerhaft .knopf { flex: 0 0 auto; }
.abgelehnt ul { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .6rem; }
.abgelehnt-zeile { background: rgba(142, 27, 56, .08); border-left: 4px solid #8E1B38; border-radius: 10px; padding: .5rem .7rem; display: grid; gap: .25rem; }
.abgelehnt-zeile .klein { font-size: .85em; overflow-wrap: anywhere; }
.einstellungen .hinweis.warnung { margin: .5rem 0; }

/* Zweite Korrekturrunde: Lesehilfe, Statuswarnung */
.lesehilfe-knopf { min-width: 2rem; min-height: 2rem; padding: 0 .5rem; border-radius: 999px; font-weight: 700; vertical-align: middle; }
.lesehilfe-liste { padding-left: 1.2rem; margin: .5rem 0 1rem; line-height: 1.6; }
.lesehilfe-liste li { margin-bottom: .35rem; }
.status.warnung { border-color: var(--himbeer); }
.status-warnung { font-weight: 700; }