:root {
  --grund: #f6f1e7;
  --karte: #fffdf8;
  --tinte: #1c2a2c;
  --leise: #5a696b;
  --linie: #e2d9c8;
  --akzent: #0f6f68;
  --akzent-tief: #0a524d;
  --auf-akzent: #ffffff;
  --akzent-hauch: #dcefe9;
  --warm: #b9502b;
  --sonne: #f0b23e;
  --rose: #e58a6b;
  --gut: #1c6b45;
  --gut-grund: #dff2e5;
  --falsch: #a8321f;
  --falsch-grund: #fbe5df;
  --schatten: 0 1px 2px rgba(40, 30, 10, .06), 0 6px 18px rgba(40, 30, 10, .06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jetzt-grund: var(--akzent);
  --jetzt-tinte: #ffffff;
  color-scheme: light;
}
:root[data-thema="dunkel"] {
  /* Abend statt Nacht: warmes Dunkel, cremefarbene Schrift, gedämpftes Türkis */
  --grund: #1f2625;
  --karte: #2a3332;
  --tinte: #f4efe4;
  --leise: #b3b9ae;
  --linie: #3d4847;
  --akzent: #5ecdbd;
  --akzent-tief: #93e2d6;
  --auf-akzent: #0b2a26;
  --akzent-hauch: #26423f;
  --warm: #f2a583;
  --sonne: #f5c05a;
  --rose: #ee9d80;
  --gut: #92dfb2;
  --gut-grund: #213f31;
  --falsch: #f6ab9c;
  --falsch-grund: #47261f;
  --jetzt-grund: #1c6a61;
  --jetzt-tinte: #f4efe4;
  --schatten: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 22px rgba(0, 0, 0, .22);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 17px/1.45 var(--sans);
  -webkit-tap-highlight-color: transparent;
}
#app {
  max-width: 540px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Knöpfe */
.knopf {
  display: block; width: 100%;
  min-height: 54px; padding: 14px 20px;
  border: 0; border-radius: 16px;
  background: var(--akzent); color: var(--auf-akzent);
  font-weight: 650; font-size: 1.05rem;
  box-shadow: 0 3px 0 var(--akzent-tief);
  transition: transform .06s, box-shadow .06s;
}
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--akzent-tief); }
.knopf[disabled] { opacity: .45; cursor: default; }
.knopf.still {
  background: var(--karte); color: var(--tinte);
  border: 1.5px solid var(--linie); box-shadow: none; font-weight: 600;
}
[data-thema="dunkel"] .knopf { box-shadow: 0 3px 0 #2f8f83; } [data-thema="dunkel"] .knopf:active { box-shadow: 0 1px 0 #2f8f83; }

.ton {
  display: inline-flex;
  flex: none; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--linie); border-radius: 50%;
  background: var(--karte); color: var(--akzent);
  align-items: center; justify-content: center;
}
.ton svg { width: 22px; height: 22px; }
.ton.gross { width: 96px; height: 96px; border: 0; background: var(--akzent); color: var(--auf-akzent); box-shadow: 0 4px 0 var(--akzent-tief); }
.ton.gross svg { width: 44px; height: 44px; }

/* Start */
.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.kopf h1 { font: 600 2.1rem/1.1 var(--serif); letter-spacing: -.01em; }
.kopf h1 small { display: block; font: 500 .95rem/1.4 var(--sans); color: var(--leise); letter-spacing: 0; margin-top: 4px; }
.serie { flex: none; font-size: .9rem; font-weight: 600; color: var(--warm); white-space: nowrap; }

.jetzt {
  background: var(--jetzt-grund); color: var(--jetzt-tinte);
  border-radius: 22px; padding: 20px; margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.jetzt::after {
  content: ""; position: absolute; right: -34px; top: -34px; width: 150px; height: 150px;
  background: currentColor; opacity: .09;
  clip-path: polygon(50% 0, 65% 15%, 85% 15%, 85% 35%, 100% 50%, 85% 65%, 85% 85%, 65% 85%, 50% 100%, 35% 85%, 15% 85%, 15% 65%, 0 50%, 15% 35%, 15% 15%, 35% 15%);
}
.jetzt .klein { font-size: .85rem; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.jetzt h2 { font: 600 1.6rem/1.2 var(--serif); margin: 4px 0 2px; }
.jetzt p { opacity: .9; margin-bottom: 16px; }
.jetzt .knopf { background: var(--karte); color: var(--akzent-tief); box-shadow: 0 3px 0 rgba(0, 0, 0, .22); position: relative; z-index: 1; }
[data-thema="dunkel"] .jetzt .knopf { background: #f4efe4; color: #12423c; }

.wdh {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; padding: 16px 18px; margin-bottom: 12px;
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: 18px;
}
.wdh b { display: block; }
.wdh span { color: var(--leise); font-size: .93rem; }
.wdh .pfeil { color: var(--akzent); font-size: 1.3rem; font-weight: 700; }
.wdh.faellig { border-color: var(--warm); }
.wdh.faellig .pfeil { color: var(--warm); }

.abschnitt { font-size: .85rem; font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .07em; margin: 26px 4px 10px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lektion {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px; background: var(--karte);
  border: 1.5px solid var(--linie); border-radius: 18px;
}
.stern {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--akzent-hauch); color: var(--akzent-tief);
  font: 700 1.05rem var(--serif);
  clip-path: polygon(50% 0, 65% 15%, 85% 15%, 85% 35%, 100% 50%, 85% 65%, 85% 85%, 65% 85%, 50% 100%, 35% 85%, 15% 85%, 15% 65%, 0 50%, 15% 35%, 15% 15%, 35% 15%);
}
.lektion.fertig .stern { background: var(--akzent); color: var(--auf-akzent); }
.lektion .text { flex: 1; min-width: 0; }
.lektion b { display: block; font-size: 1.05rem; }
.lektion .text span { color: var(--leise); font-size: .93rem; }
.punkte { flex: none; display: flex; gap: 5px; }
.punkte i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--akzent); }
.punkte i.voll { background: var(--akzent); }
.fuss { margin-top: 28px; text-align: center; color: var(--leise); font-size: .88rem; }

/* Lektionsseite */
.zurueck { border: 0; background: none; padding: 10px 4px; margin: -10px 0 6px -4px; color: var(--akzent-tief); font-weight: 600; }
.titel { font: 600 1.9rem/1.15 var(--serif); }
.unter { color: var(--leise); margin-top: 2px; }
.merke {
  margin: 18px 0; padding: 14px 16px; border-radius: 16px;
  background: var(--akzent-hauch); border-left: 4px solid var(--akzent);
}
.merke b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--akzent-tief); margin-bottom: 2px; }
.runden { display: grid; gap: 10px; }
.wort {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: 16px;
}
.wort .text { flex: 1; min-width: 0; }
.wort b { display: block; font: 600 1.15rem/1.3 var(--serif); }
.wort span { color: var(--leise); font-size: .95rem; }

/* Übung */
.lauf { display: flex; flex-direction: column; min-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.lauf-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.schliessen { flex: none; width: 44px; height: 44px; margin-left: -10px; border: 0; background: none; color: var(--leise); font-size: 1.3rem; border-radius: 50%; }
.balken { flex: 1; height: 12px; background: var(--linie); border-radius: 99px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--akzent); border-radius: 99px; transition: width .3s ease; }
.aufgabe { font-size: .85rem; font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.frage { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.frage h2 { flex: 1; font: 600 1.75rem/1.2 var(--serif); overflow-wrap: anywhere; }
.frage.hoeren { justify-content: center; padding: 18px 0 8px; }
.inhalt { flex: 1; }

.neu {
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: 22px;
  padding: 28px 20px; text-align: center; box-shadow: var(--schatten);
}
.neu h2 { font: 600 2.2rem/1.15 var(--serif); overflow-wrap: anywhere; }
.neu .de { font-size: 1.15rem; margin-top: 8px; }
.neu .hinweis { color: var(--leise); font-size: .95rem; margin-top: 12px; }
.neu .ton { margin: 18px auto 0; width: 56px; height: 56px; }
.neu .ton svg { width: 26px; height: 26px; }

.wahl { display: grid; gap: 10px; }
.wahl button {
  min-height: 56px; padding: 12px 16px; text-align: left;
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: 16px;
  box-shadow: 0 2px 0 var(--linie); font-size: 1.05rem;
}
.wahl button.richtig { border-color: var(--gut); background: var(--gut-grund); color: var(--gut); box-shadow: none; font-weight: 600; }
.wahl button.daneben { border-color: var(--falsch); background: var(--falsch-grund); color: var(--falsch); box-shadow: none; }
.wahl button[disabled] { cursor: default; }
.wahl.tr button { font-family: var(--serif); font-size: 1.15rem; }

.eingabe {
  width: 100%; min-height: 58px; padding: 12px 16px;
  font: 600 1.3rem var(--serif); color: var(--tinte);
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: 16px;
}
.zeichen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.zeichen button {
  min-width: 0; height: 46px; padding: 0;
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: 12px;
  font: 600 1.15rem var(--serif);
}

.satz {
  min-height: 62px; padding: 8px 0 10px; margin-bottom: 20px;
  border-bottom: 2px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.vorrat { display: flex; flex-wrap: wrap; gap: 8px; }
.stein {
  min-height: 44px; padding: 8px 14px;
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: 12px;
  box-shadow: 0 2px 0 var(--linie); font: 600 1.1rem var(--serif);
}
.stein.weg { visibility: hidden; }

.unten { position: sticky; bottom: 0; padding: 16px 0 calc(4px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--grund) 16px); }
.meldung { border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; }
.meldung.gut { background: var(--gut-grund); color: var(--gut); }
.meldung.falsch { background: var(--falsch-grund); color: var(--falsch); }
.meldung b { display: block; font-size: 1.1rem; }
.meldung .loesung { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--tinte); }
.meldung .loesung span { flex: 1; }
.meldung .loesung em { font: 600 1.15rem var(--serif); font-style: normal; display: block; }

.ende { text-align: center; padding-top: 12vh; }
.ende .stern { width: 96px; height: 96px; margin: 0 auto 20px; background: var(--akzent); color: var(--auf-akzent); font-size: 2.2rem; }
.ende h2 { font: 600 2.3rem/1.1 var(--serif); }
.ende p { color: var(--leise); margin: 8px 0 0; }
.ende .zahlen { display: flex; justify-content: center; gap: 28px; margin: 28px 0 32px; }
.ende .zahlen b { display: block; font: 600 1.9rem var(--serif); color: var(--tinte); }
.ende .zahlen span { color: var(--leise); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Freundlicher: Begrüßung, Woche, Rückmeldung als Blatt, Konfetti ---------- */
.kopf { margin-bottom: 14px; }
.kopf h1 small { font-size: 1rem; }
.woche { display: flex; align-items: flex-end; gap: 6px; margin: 0 2px 20px; font-size: .78rem; font-weight: 600; color: var(--leise); }
.woche span { display: grid; justify-items: center; gap: 5px; width: 34px; }
.woche i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie); background: var(--karte); }
.woche .da i { background: var(--sonne); border-color: var(--sonne); box-shadow: inset 0 0 0 4px var(--karte); }
.woche .heute { color: var(--tinte); }
.woche .heute i { border-color: var(--sonne); }
.woche b { margin-left: auto; align-self: center; color: var(--warm); font-size: .9rem; white-space: nowrap; }

.jetzt { border-radius: 26px; }
.jetzt::after { background: var(--sonne); opacity: .9; right: -40px; top: -40px; width: 130px; height: 130px; }
.lektion, .wdh, .wort { border-radius: 20px; }
.knopf { border-radius: 18px; }
.balken i { background: linear-gradient(90deg, var(--akzent), var(--sonne)); min-width: 12px; }
.neu { border-radius: 26px; }
.aufgabe { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; }

.unten:has(.meldung) { padding-top: 0; background: none; }
.meldung {
  margin: 0 -16px calc(-28px - env(safe-area-inset-bottom));
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  animation: hoch .22s ease-out;
}
.meldung.gut { --blatt: var(--gut-grund); }
.meldung.falsch { --blatt: var(--falsch-grund); }
.meldung > b { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.meldung > b svg { width: 28px; height: 28px; flex: none; }
.meldung > b small { font-size: .95rem; font-weight: 500; opacity: .85; margin-left: 2px; }
.meldung .dazu { margin-top: 4px; }
.meldung .loesung { margin: 10px 0 14px; }
.meldung .deins { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; color: var(--tinte); }
.meldung .deins em { font: 600 1.15rem var(--serif); font-style: normal; }
.meldung .deins span, .meldung .marke { font: 600 .78rem var(--sans); color: var(--leise); min-width: 46px; }
.meldung .marke { display: block; }
.meldung .deins + .loesung { margin-top: 6px; }
.meldung mark { background: none; color: var(--falsch); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
.meldung .loesung mark { color: var(--gut); }
.meldung.falsch .knopf { background: var(--falsch); color: var(--blatt); box-shadow: none; }
.meldung.gut .knopf { background: var(--gut); color: var(--blatt); box-shadow: none; }
.stein.daneben { border-color: var(--falsch); background: var(--falsch-grund); color: var(--falsch); box-shadow: none; }
@keyframes hoch { from { transform: translateY(24px); opacity: 0; } }

.ende { position: relative; padding-top: 9vh; }
.ende .stern { background: var(--sonne); color: #3a2a05; animation: plopp .45s cubic-bezier(.3, 1.6, .5, 1); }
.ende .zahlen { gap: 12px; }
.ende .zahlen > div { flex: 1; max-width: 170px; padding: 16px 10px; background: var(--karte); border: 1.5px solid var(--linie); border-radius: 20px; }
.nochmal { text-align: left; display: grid; gap: 8px; margin-bottom: 24px; }
.nochmal .abschnitt { margin-top: 0; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.konfetti { position: absolute; inset: 0 0 auto; height: 70vh; overflow: hidden; pointer-events: none; }
.konfetti i { position: absolute; top: -16px; left: var(--x); width: 10px; height: 10px; border-radius: 3px; opacity: 0; animation: fall var(--d) var(--t) ease-in forwards; background: var(--sonne); }
.konfetti i[style*="--f:1"] { background: var(--akzent); border-radius: 50%; }
.konfetti i[style*="--f:2"] { background: var(--rose); }
.konfetti i[style*="--f:3"] { background: var(--akzent-hauch); border-radius: 50%; border: 2px solid var(--akzent); }
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(62vh) rotate(420deg); } }
@keyframes plopp { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .konfetti { display: none; } .meldung, .ende .stern { animation: none; } }
.meldung .deins { display: block; }
.meldung .deins span { display: block; }
.meldung .knopf:focus-visible { outline-color: currentColor; outline-offset: -5px; }

/* ---------- Warum so? und fester Weg ---------- */
.warum { margin-top: 12px; text-align: left; font-size: .97rem; }
.warum summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--linie); background: var(--karte); color: var(--akzent-tief); font-weight: 600; cursor: pointer; list-style: none; }
.warum summary::-webkit-details-marker { display: none; }
.warum summary::before { content: "?"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sonne); color: #3a2a05; font-size: .8rem; font-weight: 800; }
.warum[open] summary { margin-bottom: 8px; }
.warum p { margin: 0 2px 6px; color: var(--tinte); }
.inhalt > .warum { margin-top: 16px; }
.inhalt > .warum[open] { padding: 14px 16px; border-radius: 20px; background: var(--akzent-hauch); }
.inhalt > .warum[open] summary { border: 0; background: none; padding: 0; min-height: 0; }
.meldung .warum { margin: -4px 0 14px; }
.meldung .warum summary { background: none; border-color: currentColor; color: inherit; }
.wort.mit-warum { flex-wrap: wrap; }
.wort.mit-warum .warum { flex-basis: 100%; margin-top: 2px; }
.wort.mit-warum .warum summary { min-height: 34px; font-size: .88rem; padding: 0 12px; }
.sperre { color: var(--leise); font-size: .93rem; margin-top: 10px; }
.lektion.zu { opacity: .55; }
.lektion.zu .stern { background: var(--linie); color: var(--leise); }
.wdh[disabled] { opacity: .5; cursor: default; }
.lektion.zu { cursor: default; }
.schloss { flex: none; width: 20px; height: 20px; color: var(--leise); }
.sperre.mitte { text-align: center; margin-top: 16px; }

/* ---------- Serie: Zahl, Woche, Ziel, Joker ---------- */
.serie { background: var(--karte); border: 1.5px solid var(--linie); border-radius: 22px; padding: 14px 16px; margin-bottom: 12px; }
.serie .oben { display: flex; align-items: center; gap: 14px; }
.serie .zahl, .serie-fest .gross { position: relative; flex: none; width: 58px; height: 58px; color: var(--linie); display: grid; place-items: center; }
.serie.an .zahl, .serie-fest .gross { color: var(--sonne); }
.serie .zahl svg, .serie-fest .gross svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.serie .zahl b, .serie-fest .gross b { position: relative; font: 700 1.05rem var(--sans); color: #3a2a05; }
.serie:not(.an) .zahl b { color: var(--leise); }
.serie .text strong { display: block; font-size: 1.08rem; }
.serie .text span { color: var(--leise); font-size: .93rem; }
.serie .woche { margin: 14px 0 12px; justify-content: space-between; }
.woche .joker i { border-style: dashed; border-color: var(--rose); background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--rose) 35%, transparent) 4px 7px); }
.ziel { display: flex; align-items: center; gap: 12px; font-size: .85rem; font-weight: 600; color: var(--leise); }
.ziel .balken { height: 8px; }
.ziel .balken i { background: var(--sonne); min-width: 0; }
.ziel span { flex: none; }
.lektion.dran { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hauch); }
.serie-fest { margin: 22px 0 4px; padding: 18px 16px; border-radius: 24px; background: var(--karte); border: 1.5px solid var(--linie); }
.serie-fest .gross { width: 92px; height: 92px; margin: 0 auto 6px; animation: plopp .5s .15s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.serie-fest .gross b { font-size: 1.7rem; }
.serie-fest strong { display: block; font: 600 1.35rem var(--serif); color: var(--tinte); }
.serie-fest .woche { justify-content: center; gap: 8px; margin: 14px 0 10px; }
.serie-fest p { margin: 0; font-size: .95rem; }
.ende:has(.serie-fest) { padding-top: 5vh; }
.ende:has(.serie-fest) > .stern { width: 64px; height: 64px; font-size: 1.5rem; margin-bottom: 12px; }
.ende .zahlen { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .serie-fest .gross { animation: none; } }
.serie { color: var(--tinte); white-space: normal; font-size: 1rem; font-weight: 400; }
.serie .text { min-width: 0; }

/* ---------- Warum so? mit Abschnitten ---------- */
.warum dl { margin: 0; display: grid; gap: 12px; }
.warum dl > div { padding-left: 12px; border-left: 3px solid var(--linie); }
.warum dl > .woertlich { border-color: var(--sonne); }
.warum dl > .aufbau { border-color: var(--akzent); }
.warum dl > .aussprache { border-color: var(--rose); }
.warum dl > .gebrauch { border-color: var(--leise); }
.warum dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-bottom: 2px; }
.warum dd { margin: 0 0 4px; line-height: 1.5; color: var(--tinte); }
.warum dd:last-child { margin-bottom: 0; }
.warum .woertlich dd { font: 500 1.08rem/1.35 var(--serif); }
.warum q { quotes: "„" "“"; font-style: italic; }
.warum .endung { font: 600 .98em var(--serif); padding: 1px 6px; border-radius: 7px; background: color-mix(in srgb, var(--akzent) 16%, transparent); white-space: nowrap; }
.warum[open] summary { margin-bottom: 12px; }
.inhalt > .warum[open] { background: var(--karte); border: 1.5px solid var(--linie); }
.inhalt > .warum[open] summary { font-size: 1.02rem; }
.meldung .warum dl > div { border-color: color-mix(in srgb, currentColor 35%, transparent); }
.meldung .warum dt { color: inherit; opacity: .8; }

/* ---------- Aussehen wählen ---------- */
.aussehen { display: flex; justify-content: center; gap: 4px; margin: 28px auto 0; padding: 4px; width: max-content; max-width: 100%; border-radius: 99px; background: var(--karte); border: 1.5px solid var(--linie); }
.aussehen button { border: 0; background: none; padding: 8px 14px; border-radius: 99px; font-size: .88rem; font-weight: 600; color: var(--leise); }
.aussehen button[aria-pressed="true"] { background: var(--akzent-hauch); color: var(--akzent-tief); }
.fuss { margin-top: 14px; }

/* ---------- Aussehen: Knopf oben rechts ---------- */
.kopf { align-items: flex-start; }
.thema { flex: none; width: 44px; height: 44px; padding: 0; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--linie); background: var(--karte); color: var(--akzent-tief); }
.thema svg { width: 22px; height: 22px; }
[data-thema="dunkel"] .thema { color: var(--sonne); }
.abschnitt.mit-zahl { display: flex; justify-content: space-between; gap: 12px; }
.abschnitt.mit-zahl span + span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--akzent-tief); }

/* ---------- Größere Flächen für den Daumen ---------- */
.knopf { min-height: 60px; font-size: 1.1rem; }
.wahl { gap: 12px; }
.wahl button { min-height: 66px; padding: 14px 18px; font-size: 1.12rem; border-radius: 18px; }
.wahl.tr button { font-size: 1.25rem; }
.stein { min-height: 54px; padding: 10px 18px; font-size: 1.22rem; border-radius: 14px; }
.satz, .vorrat { gap: 10px; }
.satz { min-height: 76px; }
.eingabe { min-height: 64px; font-size: 1.4rem; }
.zeichen { gap: 8px; margin-top: 14px; }
.zeichen button { height: 54px; font-size: 1.3rem; border-radius: 14px; }
.ton { width: 52px; height: 52px; }
.ton svg { width: 24px; height: 24px; }
.neu .ton { width: 64px; height: 64px; }
.ton.gross { width: 112px; height: 112px; }
.schliessen { width: 48px; height: 48px; font-size: 1.45rem; }
.balken { height: 14px; }
.thema { width: 48px; height: 48px; }
.lektion { padding: 16px; min-height: 76px; }
.wdh { padding: 18px; min-height: 72px; }
.zurueck { min-height: 48px; font-size: 1.05rem; }
.warum summary { min-height: 48px; padding: 0 18px; font-size: 1rem; }
.wort.mit-warum .warum summary { min-height: 44px; font-size: .95rem; padding: 0 16px; }
.wort { padding: 14px 16px; }
.meldung .knopf { min-height: 60px; }

/* ---------- Tipp: Home-Bildschirm ---------- */
.tipp { background: var(--karte); border: 1.5px dashed var(--akzent); border-radius: 22px; padding: 16px; margin-bottom: 12px; }
.tipp b { display: block; margin-bottom: 4px; }
.tipp p { color: var(--leise); font-size: .95rem; margin-bottom: 12px; }
.tipp .knopf { min-height: 48px; font-size: 1rem; }

/* ---------- Sichern und Erinnern ---------- */
.kopf h1 { flex: 1; min-width: 0; }
.thema { position: relative; }
.thema + .thema { margin-left: -4px; }
.thema .punkt { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--gut); border: 2px solid var(--karte); }
.block { background: var(--karte); border: 1.5px solid var(--linie); border-radius: 22px; padding: 18px 16px; margin-top: 16px; display: grid; gap: 12px; }
.block h2 { font: 600 1.3rem var(--serif); }
.block p { color: var(--leise); }
.block form { display: grid; gap: 12px; }
.eingabe.klein { min-height: 56px; font: 600 1.15rem var(--sans); }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; }
.zeile .eingabe { width: auto; min-width: 130px; }
.gut-zeile { display: flex; gap: 10px; align-items: flex-start; color: var(--tinte) !important; --blatt: var(--karte); }
.gut-zeile svg { flex: none; width: 24px; height: 24px; color: var(--gut); margin-top: 1px; }
.hinweis-zeile { color: var(--warm) !important; font-weight: 600; }