:root {
  --hg: #f7f3ec;
  --flaeche: #ffffff;
  --text: #2a2520;
  --leise: #776d63;
  --linie: #e4dcd0;
  --akzent: #b8322a;
  --akzent-hell: #f6e3df;
  --gut: #2f7d4f;
  --schatten: 0 2px 10px rgba(60, 40, 20, .08);
  /* Tonfarben */
  --t1: #d03b2f;
  --t2: #d98a14;
  --t3: #2f8f4e;
  --t4: #2f63c0;
  --t5: #8a8178;
  --hz-schrift: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hg: #1c1915;
    --flaeche: #27231e;
    --text: #eee7dd;
    --leise: #a89d90;
    --linie: #3a342d;
    --akzent: #e5675c;
    --akzent-hell: #3b2522;
    --gut: #5cbf82;
    --schatten: 0 2px 10px rgba(0, 0, 0, .3);
    --t1: #ff6b5e;
    --t2: #f0a93b;
    --t3: #5cc47e;
    --t4: #6f9cf0;
    --t5: #a89d90;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hz, .marke-hz, .karte-hz, .zeichen-hz, .kachel-hz { font-family: var(--hz-schrift); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 5;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: 12px 16px 0;
}
.marke { font-weight: 600; max-width: 860px; margin: 0 auto; }
.marke-hz { color: var(--akzent); font-size: 1.3em; margin-right: 6px; }
.tabs { display: flex; gap: 4px; max-width: 860px; margin: 8px auto 0; overflow-x: auto; }
.tab {
  border: 0; background: none; color: var(--leise);
  padding: 8px 12px; font: inherit; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }

main { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }

/* ---------- Themenwahl ---------- */
.themen { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.themen-gruppe { width: 100%; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin-top: 6px; }
.chip {
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .92rem; cursor: pointer;
}
.chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.chip small { opacity: .75; margin-left: 4px; }
.themen-info { color: var(--leise); margin: 12px 0 0; font-size: .95rem; }

.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 14px 0 10px; }
.schalter { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: .95rem; }

.fortschritt { height: 6px; background: var(--linie); border-radius: 3px; overflow: hidden; }
#fortschritt-balken { height: 100%; width: 0; background: var(--gut); transition: width .3s; }
.klein { font-size: .85rem; color: var(--leise); margin: 6px 0 12px; }

/* ---------- Karte ---------- */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: var(--schatten); padding: 28px 22px; min-height: 260px;
  outline: none; cursor: pointer;
}
.karte.aufgedeckt { cursor: default; }
.karte-vorne { text-align: center; padding: 24px 0 8px; }
.karte-hz { font-size: clamp(3rem, 14vw, 5.5rem); line-height: 1.2; }
.karte-hz.lang { font-size: clamp(2.2rem, 9vw, 3.8rem); }
.karte-de-vorne { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 600; }
.karte-unter { color: var(--leise); margin-top: 6px; }
.karte-hinweis { color: var(--leise); font-size: .85rem; margin-top: 20px; }

.rueckseite { border-top: 1px dashed var(--linie); margin-top: 18px; padding-top: 18px; animation: einblenden .25s ease; }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.loesung { text-align: center; }
.loesung .pinyin { font-size: 1.5rem; font-weight: 600; }
.loesung .bedeutung { font-size: 1.25rem; margin-top: 4px; }
.aussprache-box {
  display: inline-flex; gap: 10px; align-items: center;
  background: var(--akzent-hell); border-radius: 10px; padding: 8px 14px; margin-top: 12px;
}
.aussprache-box .label { font-size: .8rem; color: var(--leise); }
.aussprache-box .wert { font-weight: 600; font-size: 1.1rem; }

.audio { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }

.info-zeilen { margin: 18px 0 0; display: grid; gap: 8px; }
.info-zeile { background: var(--hg); border-radius: 10px; padding: 10px 14px; font-size: .95rem; }
.info-zeile b { color: var(--leise); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; display: block; }

h4.abschnitt { margin: 22px 0 10px; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }

/* ---------- Zeichen-Erklärung ---------- */
.zeichen-liste { display: grid; gap: 10px; }
.zeichen {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px;
  border: 1px solid var(--linie); border-radius: 12px; padding: 12px;
}
.zeichen-hz {
  font-size: 3rem; line-height: 1; text-align: center; align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0; border: 1px solid transparent; border-radius: 10px;
  background: none; cursor: pointer; font-family: var(--hz-schrift);
}
.zeichen-hz .icon { width: 1rem; height: 1rem; color: var(--leise); }
.zeichen-hz:hover { border-color: var(--linie); background: var(--flaeche); }
.zeichen-hz:hover .icon { color: var(--akzent); }
.zeichen-kopf { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.zeichen-kopf .py { font-weight: 700; font-size: 1.1rem; }
.zeichen-kopf .de { font-weight: 600; }
.zeichen-kopf .laut { color: var(--leise); font-size: .9rem; }
.typ-etikett {
  display: inline-block; font-size: .72rem; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--leise); margin-top: 4px;
}
.zeichen p { margin: 6px 0 0; font-size: .93rem; }
.zeichen .merk { color: var(--akzent); }
.zeichen .hinweis { color: var(--leise); }

/* ---------- Knöpfe ---------- */
.antworten { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.knopf {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  border-radius: 10px; padding: 10px 20px; min-width: 140px;
}
.knopf.leise { min-width: 0; padding: 6px 12px; font-weight: 500; font-size: .9rem; }
.knopf.klein-knopf { min-width: 0; padding: 6px 12px; font-size: .9rem; }
.knopf.nochmal { border-color: var(--t1); color: var(--t1); }
.knopf.gewusst { background: var(--gut); border-color: var(--gut); color: #fff; }
.knopf:hover { filter: brightness(.97); }
kbd { font-size: .7rem; opacity: .6; margin-left: 4px; font-family: inherit; }
@media (max-width: 520px) { kbd { display: none; } .knopf { min-width: 0; flex: 1; } }

/* ---------- Töne ---------- */
.t1 { color: var(--t1); } .t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); } .t5 { color: var(--t5); }

/* ---------- Lexikon ---------- */
.suche {
  width: 100%; font: inherit; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); margin-bottom: 16px;
}
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.kachel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  padding: 10px 6px; text-align: center; cursor: pointer; font: inherit; color: var(--text);
}
.kachel.aktiv { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.kachel-hz { font-size: 2.2rem; line-height: 1.2; display: block; }
.kachel small { display: block; font-size: .78rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lexikon-detail .zeichen { background: var(--flaeche); margin-bottom: 16px; box-shadow: var(--schatten); }
.vorkommen { font-size: .88rem; color: var(--leise); }

/* ---------- Textseite ---------- */
.text h2 { margin-top: 32px; }
.text h2:first-child { margin-top: 0; }
.toene { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ton { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px; }
.ton b { display: block; font-size: 1.1rem; }
.ton span { display: block; color: var(--text); font-size: .92rem; }
.ton em { display: block; color: var(--leise); font-size: .85rem; margin-top: 4px; }
.typen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.typ { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px; }
.typ p { margin: 4px 0 0; font-size: .92rem; }
.typ .bsp { font-family: var(--hz-schrift); color: var(--akzent); }
.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border-radius: 12px; overflow: hidden; font-size: .93rem; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
.tabelle td:first-child { font-weight: 700; white-space: nowrap; }
.leer { text-align: center; color: var(--leise); padding: 40px 0; }

/* ---------- Mobile ---------- */
button, .chip, .kachel, .karte { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nur-klein { display: none; }
.themen-reihe { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.tabelle-rahmen { overflow-x: auto; border-radius: 12px; }
.wisch-hinweis { display: none; }
.karte { scroll-margin-top: 110px; }

@media (max-width: 600px) {
  .nur-gross { display: none; }
  .nur-klein { display: inline; }

  .kopf { padding: calc(8px + env(safe-area-inset-top)) 12px 0; }
  .tabs { margin-top: 4px; gap: 0; }
  .tab { flex: 1; padding: 10px 4px; font-size: .95rem; }

  main { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); }

  /* Themen als waagrecht wischbare Leiste */
  .themen-reihe {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -12px; padding: 2px 12px 4px; scroll-padding: 0 12px;
  }
  .themen-reihe::-webkit-scrollbar { display: none; }
  .themen-gruppe { width: auto; margin: 0 2px 0 4px; flex: none; font-size: .7rem; }
  .themen-gruppe:first-child { margin-left: 0; }
  .chip { flex: none; padding: 7px 12px; }
  .themen-info { margin-top: 8px; font-size: .88rem; }

  .werkzeuge { gap: 6px 12px; margin: 10px 0 8px; }
  .schalter { font-size: .88rem; }
  #mischen { margin-left: auto; }

  /* Karte füllt den Bildschirm */
  .karte { padding: 18px 14px; border-radius: 14px; min-height: 52vh; }
  .karte-vorne { padding: 14vh 0 4px; }
  .karte.aufgedeckt .karte-vorne { padding-top: 8px; }
  .loesung .pinyin { font-size: 1.3rem; }
  .loesung .bedeutung { font-size: 1.15rem; }
  .aussprache-box { flex-direction: column; gap: 0; }
  .audio .knopf { flex: 1; }

  .zeichen { grid-template-columns: 52px 1fr; gap: 10px; padding: 10px; }
  .zeichen-hz { font-size: 2.4rem; }

  /* Antwort-Knöpfe fest am unteren Rand, gut mit dem Daumen erreichbar */
  .antworten {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; margin: 0;
    background: var(--flaeche); border-top: 1px solid var(--linie);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    flex-wrap: nowrap;
  }
  .antworten .knopf { padding: 14px 10px; font-size: 1.05rem; }
  .wisch-hinweis { display: block; text-align: center; font-size: .8rem; color: var(--leise); margin: 0 0 8px; min-height: 1em; }

  .raster { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .kachel-hz { font-size: 1.9rem; }

  .tabelle { font-size: .86rem; }
  .tabelle th, .tabelle td { padding: 7px 8px; }
  .tabelle td:first-child { white-space: normal; }
  .toene, .typen { grid-template-columns: 1fr 1fr; }
  .text h2 { font-size: 1.3rem; }
}

@media (max-width: 360px) {
  .toene, .typen { grid-template-columns: 1fr; }
}

.karte.wisch-rechts { animation: wischR .2s ease; }
.karte.wisch-links { animation: wischL .2s ease; }
@keyframes wischR { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes wischL { from { transform: translateX(-40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- Sprechen üben ---------- */
.sprechen { margin-top: 14px; text-align: center; }
.karte-vorne .sprechen { margin-top: 22px; }
.sprech-knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.knopf.mikro { border-color: var(--akzent); color: var(--akzent); }
.knopf.mikro.aktiv { background: var(--akzent); color: #fff; animation: pulsieren 1.2s ease-in-out infinite; }
@keyframes pulsieren { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 50, 42, .45); } 50% { box-shadow: 0 0 0 8px rgba(184, 50, 42, 0); } }
.sprech-ergebnis:not(:empty) { margin-top: 10px; }
.sprech-status, .sprech-notiz { font-size: .88rem; color: var(--leise); margin: 6px 0 0; }
.sprech-titel { font-weight: 700; }
.sprech-titel.perfekt, .sprech-titel.gut { color: var(--gut); }
.sprech-titel.fast { color: var(--t2); }
.sprech-titel.nochmal { color: var(--t1); }
.silben-check { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.silbe {
  display: flex; flex-direction: column; align-items: center; min-width: 52px;
  border: 1px solid var(--linie); border-radius: 10px; padding: 4px 8px;
}
.silbe b { font-size: 1.05rem; }
.silbe small { font-size: .72rem; color: var(--leise); white-space: nowrap; }
.silbe.ok { border-color: var(--gut); }
.silbe.ok small { color: var(--gut); }
.silbe.ton { border-color: var(--t2); background: color-mix(in srgb, var(--t2) 10%, transparent); }
.silbe.falsch, .silbe.fehlt { border-color: var(--t1); background: color-mix(in srgb, var(--t1) 10%, transparent); }
.sprech-verstanden { font-size: .9rem; margin: 8px 0 0; }
@media (max-width: 600px) { .sprech-knoepfe .knopf { flex: 1; } .sprech-knoepfe .mikro { flex-basis: 100%; } }

/* ---------- Icons (Lucide, SVG) ---------- */
.icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.icon-platz { display: inline-flex; }
.knopf .icon { margin-right: 2px; }
.feier .icon { width: 64px; height: 64px; color: var(--akzent); }
.sprech-titel .icon { width: 1.2em; height: 1.2em; }
.silbe small .icon { width: .95em; height: .95em; vertical-align: -0.15em; }
.zeichen .merk .icon, .zeichen .hinweis .icon, .zeichen-kopf .laut .icon { width: 1em; height: 1em; }
.wisch-hinweis .icon { width: 1em; height: 1em; }

/* ---------- Stimmenwahl ---------- */
.stimme-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.auswahl {
  flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
}
.stimme-tipp ul { margin: 6px 0; padding-left: 20px; }
.stimme-tipp li { margin: 4px 0; }
.pfad .icon { width: .9em; height: .9em; color: var(--leise); }
@media (max-width: 600px) { .stimme-zeile .auswahl { flex-basis: 100%; } .stimme-zeile .knopf { flex: 1; } }

/* ---------- Kartensets: Startseite, Übersicht, Lernstand ---------- */
:root {
  --s-sicher: #2f7d4f; --s-gut: #7cb342; --s-fast: #e0b020;
  --s-lernen: #e8862a; --s-schwer: #c8382c; --s-neu: #d6cdbf;
}
@media (prefers-color-scheme: dark) {
  :root { --s-sicher: #4fb578; --s-gut: #93c95a; --s-fast: #e6c14a; --s-lernen: #f09a48; --s-schwer: #ea6a5e; --s-neu: #4a433b; }
}
.s-sicher { background: var(--s-sicher); } .s-gut { background: var(--s-gut); }
.s-fast { background: var(--s-fast); } .s-lernen { background: var(--s-lernen); }
.s-schwer { background: var(--s-schwer); } .s-neu { background: var(--s-neu); }
.s-text-sicher { color: var(--s-sicher); } .s-text-gut { color: var(--s-gut); }
.s-text-fast { color: var(--s-fast); } .s-text-lernen { color: var(--s-lernen); }
.s-text-schwer { color: var(--s-schwer); } .s-text-neu { color: var(--leise); }

.set-einleitung { color: var(--leise); margin: 0 0 8px; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--leise); margin: 6px 0 4px; }
.legende span { display: inline-flex; align-items: center; gap: 5px; }
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

.set-gruppe { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 22px 0 8px; }
.set-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.set-kachel {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; min-width: 0;
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 14px; padding: 14px; box-shadow: var(--schatten);
  transition: transform .12s, border-color .12s;
}
.set-kachel:hover { border-color: var(--akzent); transform: translateY(-1px); }
.set-name { font-weight: 700; }
.set-bsp { font-size: 1.15rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-zahl { font-size: .82rem; color: var(--leise); }
.stufen-balken { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--s-neu); gap: 1px; }
.stufen-balken span { display: block; min-width: 4px; }

.set-titel { margin: 14px 0 0; }
.set-uebersicht-balken, #set-uebersicht > .stufen-balken { margin: 12px 0; }
.set-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; justify-content: inherit; }
.set-aktionen .knopf:disabled { opacity: .45; cursor: default; }
.eintraege { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.eintrag {
  display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 12px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 8px 10px 8px 12px;
}
.eintrag-hz { font-size: 1.5rem; white-space: nowrap; }
.eintrag-text { display: flex; flex-direction: column; min-width: 0; }
.eintrag-py { font-size: .9rem; }
.eintrag-de { font-size: .92rem; color: var(--leise); }
.eintrag-stand { font-size: .8rem; font-weight: 600; text-align: right; }
.knopf-rund {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--linie); background: none; color: var(--text); cursor: pointer;
}
.knopf-rund:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf-rund .icon { width: 18px; height: 18px; }
.training-kopf { margin-bottom: 4px; }
.leer .set-aktionen { justify-content: center; }

@media (max-width: 600px) {
  .set-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .set-kachel { padding: 11px; gap: 6px; }
  .set-bsp { font-size: 1rem; }
  .eintrag { grid-template-columns: auto auto 1fr auto; gap: 8px; }
  .eintrag-hz { font-size: 1.25rem; }
  .eintrag-stand { grid-column: 3; grid-row: 2; text-align: left; margin-top: -4px; }
  .eintrag .knopf-rund { grid-column: 4; grid-row: 1 / span 2; }
}

/* ---------- Konto ---------- */
.konto-knopf {
  position: absolute; top: 8px; right: max(16px, calc((100% - 860px) / 2));
  display: inline-flex; align-items: center; gap: 6px; max-width: 45%;
}
.konto-knopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-knopf .icon { width: 18px; height: 18px; flex: none; }
.konto-dialog {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  border: 1px solid var(--linie); border-radius: 16px; padding: 18px;
  background: var(--flaeche); color: var(--text); box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.konto-dialog::backdrop { background: rgba(20, 15, 10, .45); }
.konto-dialog h2 { margin: 0; font-size: 1.2rem; }
.konto-dialog h3 { margin: 18px 0 4px; font-size: 1rem; }
.konto-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.konto-form { display: grid; gap: 10px; margin-top: 8px; }
.konto-form label { display: grid; gap: 4px; font-size: .9rem; color: var(--leise); }
.konto-form input {
  font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--hg); color: var(--text);
}
#konto-code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.knopf.breit { width: 100%; justify-content: center; }
.oder { display: flex; align-items: center; gap: 10px; color: var(--leise); font-size: .85rem; margin: 14px 0 4px; }
.oder::before, .oder::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.konto-fehler { color: var(--s-schwer); min-height: 1.2em; margin: 8px 0 0; font-size: .9rem; }
.konto-dialog .icon { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.passkey-liste { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; }
.passkey-liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.passkey-liste small { color: var(--leise); }
.konto-unten { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 14px; }
@media (max-width: 600px) {
  .konto-knopf { top: calc(4px + env(safe-area-inset-top)); right: 8px; padding: 6px 8px; }
}

/* hidden gilt immer, auch wenn eine Klasse display setzt */
[hidden] { display: none !important; }

/* ---------- Training: Kopfzeile, Fortschritt, kompakte Karte ---------- */
.tab-icon { display: none; }
.training-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.training-kopf .werkzeuge { margin: 0; }
.zurueck-knopf { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.zurueck-knopf #training-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fortschritt-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fortschritt-zeile .fortschritt { flex: 1; }
#fortschritt-text { font-size: .85rem; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aussprache-box { gap: 8px; }
.aussprache-box .icon { width: 1.1em; height: 1.1em; color: var(--leise); }
.aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.aktionen .sprechen, .aktionen .sprech-knoepfe { display: contents; }
.aktionen .sprech-ergebnis { flex-basis: 100%; }
.aktionen .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

@media (max-width: 600px) {
  /* Kopf: eine Zeile mit Marke und Konto; die Tabs werden zur Leiste am unteren Rand */
  .kopf { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
  .konto-knopf { top: calc(5px + env(safe-area-inset-top)); }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; margin: 0; gap: 0;
    background: var(--flaeche); border-top: 1px solid var(--linie);
    padding: 4px 6px env(safe-area-inset-bottom); overflow: visible;
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px 7px; font-size: .74rem; border-bottom: 0; border-radius: 10px;
  }
  .tab .tab-icon { display: block; line-height: 0; }
  .tab .tab-icon .icon { width: 22px; height: 22px; }
  .tab.aktiv { color: var(--akzent); font-weight: 600; }
  main { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }

  /* Training: Fokus auf die Karte – ohne Tab-Leiste, Antworten am unteren Rand */
  body.im-training .tabs { display: none; }
  body.im-training main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .training-kopf { flex-wrap: nowrap; margin-bottom: 8px; }
  .zurueck-knopf { flex: 1 1 auto; padding: 6px 10px; }
  .training-kopf .werkzeuge { flex: none; gap: 6px; flex-wrap: nowrap; }
  .schalter {
    border: 1px solid var(--linie); border-radius: 999px; padding: 5px 10px; font-size: .82rem;
    background: var(--flaeche); color: var(--leise); gap: 4px;
  }
  .schalter input { position: absolute; opacity: 0; pointer-events: none; }
  .schalter:has(input:checked) { background: var(--akzent); border-color: var(--akzent); color: #fff; }
  .schalter:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
  .schalter .icon { width: .95em; height: .95em; }
  #mischen { margin-left: 0; padding: 6px 9px; }
  .fortschritt-zeile { margin-bottom: 6px; }
  .wisch-hinweis { margin: 0 0 6px; }
  .wisch-hinweis:empty { display: none; }
  kbd { display: none; }

  /* Vorderseite füllt den Platz bis zu den Antwort-Knöpfen, Inhalt mittig */
  .karte {
    min-height: calc(100dvh - 215px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display: flex; flex-direction: column; justify-content: center; padding: 16px 14px;
  }
  .karte-vorne { padding: 0; }
  .karte.aufgedeckt { justify-content: flex-start; min-height: 0; }
  .karte.aufgedeckt .karte-vorne { padding: 0; }
  .karte.aufgedeckt .karte-hz { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .karte.aufgedeckt .karte-hz.lang { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .karte.aufgedeckt .karte-de-vorne { font-size: 1.35rem; }
  .rueckseite { margin-top: 10px; padding-top: 12px; }
  .loesung .bedeutung { margin-top: 0; }
  .aussprache-box { flex-direction: row; gap: 6px; padding: 5px 12px; margin-top: 8px; }
  .aussprache-box .wert { font-size: 1rem; }
  .aktionen { gap: 6px; margin-top: 10px; }
  .aktionen .knopf { flex: 1 1 28%; padding: 10px 6px; font-size: .88rem; }
  .aktionen .sprech-knoepfe .mikro { flex-basis: 28%; }
  .info-zeilen { margin-top: 12px; gap: 6px; }
  .info-zeile { padding: 8px 12px; font-size: .9rem; }
  h4.abschnitt { margin: 16px 0 8px; }
  .karte-vorne .sprechen { margin-top: 18px; }
}

/* ---------- 5 Lösungsvorschläge ---------- */
.vorschlaege { display: grid; gap: 8px; margin: 18px auto 0; max-width: 460px; text-align: left; }
.vorschlag {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 1rem; color: var(--text); cursor: pointer;
  background: var(--hg); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px;
  transition: border-color .12s, background .12s;
}
.vorschlag:hover:not(:disabled) { border-color: var(--akzent); }
.vorschlag:disabled { cursor: default; opacity: .55; }
.vorschlag kbd { flex: none; }
.vorschlag .icon { flex: none; width: 20px; height: 20px; }
.vorschlag small { color: var(--leise); margin-left: auto; font-size: .85rem; }
.vorschlag-hz { font-size: 1.35rem; }
.vorschlag.richtig { opacity: 1; border-color: var(--s-sicher); background: color-mix(in srgb, var(--s-sicher) 14%, transparent); }
.vorschlag.richtig .icon { color: var(--s-sicher); }
.vorschlag.falsch { opacity: 1; border-color: var(--s-schwer); background: color-mix(in srgb, var(--s-schwer) 12%, transparent); }
.vorschlag.falsch .icon { color: var(--s-schwer); }
#weiter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#weiter .icon { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .vorschlaege { gap: 6px; margin-top: 14px; }
  .vorschlag { padding: 11px 12px; font-size: .95rem; }
  .karte.aufgedeckt .vorschlaege { margin-top: 10px; }
  #weiter { flex: 1; }
}

/* ---------- Übungsart ---------- */
.set-unterkopf { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 18px 0 8px; }
.modi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.modus-kachel {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px;
}
.modus-kachel .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--leise); }
.modus-kachel b { display: block; font-size: .95rem; }
.modus-kachel small { display: block; color: var(--leise); font-size: .82rem; line-height: 1.35; margin-top: 2px; }
.modus-kachel:hover { border-color: var(--akzent); }
.modus-kachel.aktiv { border-color: var(--akzent); background: var(--akzent-hell); }
.modus-kachel.aktiv .icon { color: var(--akzent); }
.modus-wahl { flex: none; width: auto; max-width: 240px; padding: 6px 10px; font-size: .9rem; }
.vorschlag-py { font-size: 1.15rem; letter-spacing: .02em; }
@media (max-width: 600px) {
  .modi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .modus-kachel { padding: 8px 10px; gap: 8px; }
  .modus-kachel small { display: none; }
  .modus-kachel b { font-size: .86rem; line-height: 1.3; }
  .modus-kachel .icon { width: 18px; height: 18px; margin-top: 1px; }
  .modus-wahl { max-width: 46vw; font-size: .82rem; padding: 6px 8px; }
}