/* =====================================================================
   Türkçe — Stylesheet
   Türkis (die Farbe heißt nach der Türkei) als Akzent, Terrakotta als Wärme,
   Systemschrift mit gerundeten Überschriften. Dunkelmodus, Dynamic Type,
   reduzierte Bewegung und reduzierte Transparenz sind eingebaut.
   ===================================================================== */

:root {
  --grund: #FBF9F6;
  --grund-tief: #F2EEE8;
  --flaeche: #FFFFFF;
  --flaeche-2: #F6F3EF;
  --tinte: #16201E;
  --tinte-2: #5B6765;
  --tinte-3: #8C9694;
  --linie: rgba(22, 32, 30, 0.10);
  --linie-fest: #E6E0D8;

  --akzent: #0F8B8D;
  --akzent-text: #0A7173;
  --akzent-tief: #0A6567;
  --akzent-hell: #E2F1F1;
  --akzent-mittel: #BFE1E0;
  --warm: #C1662F;
  --warm-text: #A3511E;
  --warm-tief: #9A4E21;
  --warm-hell: #FBEDE3;
  --gruen: #2F8F5B;
  --gruen-text: #23744A;
  --gruen-tief: #22704A;
  --gruen-hell: #E5F4EA;
  --rot: #D0493E;
  --rot-text: #B23A30;
  --rot-tief: #A8382F;
  --rot-hell: #FCE9E6;
  --gold: #E0A526;
  --gold-hell: #FFF4D6;
  --knopf-text: #FFFFFF;

  --glas: rgba(251, 249, 246, 0.80);
  --glas-tab: rgba(255, 255, 255, 0.82);
  --scrim: rgba(10, 16, 15, 0.36);
  --schatten-1: 0 1px 2px rgba(22, 32, 30, 0.06), 0 0 0 1px rgba(22, 32, 30, 0.045);
  --schatten-2: 0 12px 32px -14px rgba(22, 32, 30, 0.25), 0 2px 8px rgba(22, 32, 30, 0.06);
  --schatten-3: 0 -10px 40px rgba(22, 32, 30, 0.16);

  --radius-s: 12px;
  --radius: 18px;
  --radius-l: 26px;

  --rund: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;

  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  --links: env(safe-area-inset-left, 0px);
  --rechts: env(safe-area-inset-right, 0px);
  --tabhoehe: 52px;
  --kopfhoehe: 46px;

  --feder: cubic-bezier(0.22, 1, 0.36, 1);
  --feder-weich: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]):not([data-theme="light"]) {
    --grund: #101415;
    --grund-tief: #0B0E0F;
    --flaeche: #1A2022;
    --flaeche-2: #222A2C;
    --tinte: #ECF0EF;
    --tinte-2: #A2ADAB;
    --tinte-3: #6F7B79;
    --linie: rgba(255, 255, 255, 0.09);
    --linie-fest: #2C3537;
    --akzent: #35B5B1;
    --akzent-text: #5CCBC7;
    --akzent-tief: #1E7F7C;
    --akzent-hell: #16302F;
    --akzent-mittel: #1F4644;
    --warm: #E39A62;
    --warm-text: #EBAA78;
    --warm-tief: #A86B3E;
    --warm-hell: #2D231D;
    --gruen: #4DBB7F;
    --gruen-text: #6BCB95;
    --gruen-tief: #2F8457;
    --gruen-hell: #15291F;
    --rot: #F06F63;
    --rot-text: #F38A80;
    --rot-tief: #B44A41;
    --rot-hell: #301B19;
    --gold: #F0B93A;
    --gold-hell: #2E2716;
    --knopf-text: #06201F;
    --glas: rgba(16, 20, 21, 0.80);
    --glas-tab: rgba(26, 32, 34, 0.84);
    --scrim: rgba(0, 0, 0, 0.55);
    --schatten-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --schatten-2: 0 12px 32px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --schatten-3: 0 -10px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* "dunkel" ist die eigene Wahl in den Einstellungen, "dark" setzt claude.ai, wenn die App dort läuft. */
:root[data-theme="dunkel"], :root[data-theme="dark"] {
  --grund: #101415;
  --grund-tief: #0B0E0F;
  --flaeche: #1A2022;
  --flaeche-2: #222A2C;
  --tinte: #ECF0EF;
  --tinte-2: #A2ADAB;
  --tinte-3: #6F7B79;
  --linie: rgba(255, 255, 255, 0.09);
  --linie-fest: #2C3537;
  --akzent: #35B5B1;
  --akzent-text: #5CCBC7;
  --akzent-tief: #1E7F7C;
  --akzent-hell: #16302F;
  --akzent-mittel: #1F4644;
  --warm: #E39A62;
  --warm-text: #EBAA78;
  --warm-tief: #A86B3E;
  --warm-hell: #2D231D;
  --gruen: #4DBB7F;
  --gruen-text: #6BCB95;
  --gruen-tief: #2F8457;
  --gruen-hell: #15291F;
  --rot: #F06F63;
  --rot-text: #F38A80;
  --rot-tief: #B44A41;
  --rot-hell: #301B19;
  --gold: #F0B93A;
  --gold-hell: #2E2716;
  --knopf-text: #06201F;
  --glas: rgba(16, 20, 21, 0.80);
  --glas-tab: rgba(26, 32, 34, 0.84);
  --scrim: rgba(0, 0, 0, 0.55);
  --schatten-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --schatten-2: 0 12px 32px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --schatten-3: 0 -10px 40px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */

html { font-size: 106.25%; }               /* 17px wie iOS-Fließtext */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }       /* Dynamic Type: folgt der iPhone-Textgröße */
}

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--tinte);
}

body {
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.47;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  min-height: 100vh;
  min-height: 100dvh;
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button, [role="button"] { cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
[role="button"] { -webkit-touch-callout: none; }
a { color: var(--akzent-text); touch-action: manipulation; }
:focus { outline: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--akzent-mittel); }

h1, h2, h3, h4 { font-family: var(--rund); margin: 0; }
p { margin: 0 0 0.8em; }
svg { flex-shrink: 0; width: 1.25em; height: 1.25em; }
svg.chevron { width: 14px; height: 14px; color: var(--tinte-3); }
[hidden] { display: none !important; }

.tr { font-family: var(--rund); font-weight: 650; letter-spacing: -0.01em; }
.leise { color: var(--tinte-2); }
.klein { font-size: 0.88rem; }
.mini { font-size: 0.76rem; }
.vorformatiert { white-space: pre-wrap; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopfleiste (kleiner Titel erscheint beim Scrollen) ---------- */

.leiste-oben {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: calc(var(--kopfhoehe) + var(--oben));
  padding: var(--oben) calc(8px + var(--rechts)) 0 calc(8px + var(--links));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  background: transparent;
  transition: background-color 0.25s, box-shadow 0.25s;
  pointer-events: none;
}
.leiste-oben > * { pointer-events: auto; }
.leiste-oben.sichtbar {
  background: var(--glas);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 var(--linie);
}
.kopf-titel {
  grid-column: 2;
  font-family: var(--rund);
  font-weight: 700;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.25s var(--feder);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56vw;
}
.leiste-oben.sichtbar .kopf-titel { opacity: 1; transform: none; }
.kopf-knopf .beschriftung { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: opacity 0.2s; }
/* Wie bei iOS: wird es eng, bleibt vom Zurück-Knopf nur der Pfeil. */
@media (max-width: 480px) {
  .leiste-oben.sichtbar.mit-titel .kopf-knopf .beschriftung { opacity: 0; width: 0; }
}
.kopf-rechts { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
.kopf-knopf {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px 0 4px;
  border: 0;
  background: none;
  color: var(--akzent-text);
  font-size: 1rem;
  font-weight: 500;
  border-radius: 22px;
  max-width: 100%;
  overflow: hidden;
}
.kopf-knopf:active { opacity: 0.55; }
.kopf-rund {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  color: var(--tinte);
}

/* ---------- Hauptbereich ---------- */

.ansicht {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--kopfhoehe) + var(--oben) + 6px) calc(18px + var(--rechts)) calc(var(--tabhoehe) + var(--unten) + 36px) calc(18px + var(--links));
  min-height: 100vh;
  overflow-x: clip;
}
.ansicht.mit-aktion { padding-bottom: calc(var(--tabhoehe) + var(--unten) + 110px); }
/* Nur Bewegung, keine Deckkraft: Läuft die Animation einmal nicht (verdecktes
   Fenster, Stromsparen), bleibt der Inhalt trotzdem sichtbar. */
.ansicht.betritt { animation: betreten 0.38s var(--feder); }
@keyframes betreten {
  from { transform: translateY(12px); }
  to { transform: none; }
}

.grosser-titel {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 2px 0 4px;
}
.untertitel { color: var(--tinte-2); margin: 0 0 18px; }

.gruppentitel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--rund);
  font-size: 1.24rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  margin: 30px 0 12px;
}
.gruppentitel .rechts { font-family: var(--text); font-size: 0.88rem; font-weight: 500; color: var(--akzent-text); text-decoration: none; }

/* ---------- Tableiste ---------- */

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--rechts) var(--unten) var(--links);
  background: var(--glas-tab);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 -0.5px 0 var(--linie);
}
.tabs a {
  flex: 1;
  max-width: 120px;
  height: var(--tabhoehe);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--tinte-3);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
}
.tabs a svg { width: 26px; height: 26px; transition: transform 0.2s var(--feder); }
.tabs a:active svg { transform: scale(0.88); }
.tabs a.aktiv { color: var(--akzent); }
.tabs .punkt {
  position: absolute;
  top: 6px;
  left: calc(50% + 9px);
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--warm);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ---------- Flächen, Listen ---------- */

.tafel {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
  padding: 18px;
  margin-bottom: 12px;
}
.tafel.eng { padding: 6px 0; }
.tafel h3 { font-size: 1.06rem; font-weight: 700; margin-bottom: 6px; }
.tafel p:last-child { margin-bottom: 0; }

.liste {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
  overflow: hidden;
  margin-bottom: 12px;
}
.reihe {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 11px 16px;
  border: 0;
  background: none;
  text-align: left;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.reihe + .reihe::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  left: 16px;
  height: 0.5px;
  background: var(--linie);
}
.reihe.mit-symbol + .reihe.mit-symbol::before { left: 62px; }
button.reihe:active, a.reihe:active { background: var(--flaeche-2); }
.reihe .haupt { flex: 1; min-width: 0; }
.reihe .titel { font-weight: 600; line-height: 1.3; }
.reihe .unter { font-size: 0.88rem; color: var(--tinte-2); margin-top: 1px; line-height: 1.35; }
.reihe .wert { color: var(--tinte-2); font-size: 0.94rem; }
.reihe .chevron { color: var(--tinte-3); width: 14px; height: 14px; }

.symbol-kachel {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.symbol-kachel svg { width: 20px; height: 20px; }
.symbol-kachel.tuerkis { background: var(--akzent); }
.symbol-kachel.warm { background: var(--warm); }
.symbol-kachel.gruen { background: var(--gruen); }
.symbol-kachel.rot { background: var(--rot); }
.symbol-kachel.gold { background: var(--gold); }
.symbol-kachel.grau { background: var(--tinte-3); }
.symbol-kachel.lila { background: #7B61C9; }
.symbol-kachel.blau { background: #3B7DD8; }
:root[data-theme="dunkel"] .symbol-kachel, :root[data-theme="dark"] .symbol-kachel { color: #fff; }

/* ---------- Knöpfe (taktil, mit Kante unten) ---------- */

.knopf {
  --k-grund: var(--akzent);
  --k-kante: var(--akzent-tief);
  --k-text: var(--knopf-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--k-grund);
  color: var(--k-text);
  font-family: var(--rund);
  font-size: 1.06rem;
  font-weight: 750;
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--k-kante);
  transform: translateY(0);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, opacity 0.2s;
  margin-bottom: 14px;
}
.knopf:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--k-kante); }
.knopf:disabled, .knopf[aria-disabled="true"] { --k-grund: var(--flaeche-2); --k-kante: var(--linie-fest); --k-text: var(--tinte-3); pointer-events: none; }
.knopf svg { width: 20px; height: 20px; }
.knopf.zweit { --k-grund: var(--flaeche); --k-kante: var(--linie-fest); --k-text: var(--akzent-text); box-shadow: 0 4px 0 var(--k-kante), inset 0 0 0 2px var(--linie-fest); }
.knopf.zweit:active { box-shadow: 0 1px 0 var(--k-kante), inset 0 0 0 2px var(--linie-fest); }
.knopf.warm { --k-grund: var(--warm); --k-kante: var(--warm-tief); --k-text: #fff; }
.knopf.gruen { --k-grund: var(--gruen); --k-kante: var(--gruen-tief); --k-text: #fff; }
.knopf.rot { --k-grund: var(--rot); --k-kante: var(--rot-tief); --k-text: #fff; }
.knopf.still {
  --k-grund: transparent; --k-kante: transparent; --k-text: var(--akzent-text);
  box-shadow: none; min-height: 44px; font-family: var(--text); font-weight: 600; font-size: 1rem;
}
.knopf.still:active { transform: none; box-shadow: none; opacity: 0.55; }
.knopf.klein { min-height: 40px; padding: 8px 14px; font-size: 0.94rem; border-radius: 13px; width: auto; display: inline-flex; margin: 0; }
.knopfreihe { display: flex; gap: 10px; }
.knopfreihe .knopf { margin-bottom: 0; }

.rundknopf {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--akzent-hell);
  color: var(--akzent-text);
  flex-shrink: 0;
  transition: transform 0.12s var(--feder), background-color 0.15s;
  position: relative;
}
.rundknopf svg { width: 20px; height: 20px; }
.rundknopf:active { transform: scale(0.92); }
.rundknopf.klein { width: 36px; height: 36px; }
.rundknopf.klein svg { width: 17px; height: 17px; }
.rundknopf.gross { width: 72px; height: 72px; }
.rundknopf.gross svg { width: 32px; height: 32px; }
.rundknopf.riesig { width: 112px; height: 112px; }
.rundknopf.riesig svg { width: 46px; height: 46px; }
.rundknopf.voll { background: var(--akzent); color: var(--knopf-text); box-shadow: 0 4px 0 var(--akzent-tief); }
.rundknopf.voll:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--akzent-tief); }
.rundknopf.laeuft { background: var(--akzent); color: var(--knopf-text); }
.rundknopf.laeuft::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  animation: pulsieren 1.2s ease-out infinite;
}
.rundknopf.computer { background: var(--flaeche-2); color: var(--tinte-2); }
.rundknopf.langsam { background: var(--warm-hell); color: var(--warm-text); font-size: 1.15rem; }
.rundknopf.gross.langsam { font-size: 1.9rem; }
.rundknopf.riesig.langsam { font-size: 2.8rem; }
.rundknopf.stern { background: transparent; color: var(--tinte-3); }
.rundknopf.stern.an { color: var(--gold); }
@keyframes pulsieren {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(1.35); }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--flaeche-2);
  color: var(--tinte-2);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip.tuerkis { background: var(--akzent-hell); color: var(--akzent-text); }
.chip.warm { background: var(--warm-hell); color: var(--warm-text); }
.chip.gruen { background: var(--gruen-hell); color: var(--gruen-text); }
.chip.gold { background: var(--gold-hell); color: color-mix(in srgb, var(--gold) 70%, var(--tinte)); }
.chipreihe { display: flex; flex-wrap: wrap; gap: 6px; }

.segmente {
  display: flex;
  background: var(--grund-tief);
  border-radius: 11px;
  padding: 2px;
  margin-bottom: 14px;
}
.segmente button {
  flex: 1;
  border: 0;
  background: none;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tinte-2);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.segmente button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 12px; padding: 2px 18px; }
.filter::-webkit-scrollbar { display: none; }
.filter button {
  border: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tinte-2);
}
.filter button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); box-shadow: none; }

.schalter {
  appearance: none;
  -webkit-appearance: none;
  width: 51px; height: 31px;
  border-radius: 16px;
  background: var(--linie-fest);
  position: relative;
  flex-shrink: 0;
  margin: 0;
  transition: background-color 0.2s;
}
.schalter::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s var(--feder);
}
.schalter:checked { background: var(--gruen); }
.schalter:checked::after { transform: translateX(20px); }

.balken { height: 8px; border-radius: 4px; background: var(--grund-tief); overflow: hidden; }
.balken > i { display: block; height: 100%; border-radius: 4px; background: var(--akzent); transition: width 0.5s var(--feder); }
.balken.warm > i { background: var(--warm); }
.balken.gruen > i { background: var(--gruen); }

.ring { width: 56px; height: 56px; flex-shrink: 0; }
.ring circle { fill: none; stroke-width: 6; }
.ring .spur { stroke: var(--grund-tief); }
.ring .wert { stroke: var(--akzent); stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--feder); }

/* ---------- Heute ---------- */

.gruss { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
.gruss .grosser-titel { margin: 0; }
.gruss-de { color: var(--tinte-2); margin: 0 0 20px; }

.runde-karte {
  position: relative;
  border-radius: var(--radius-l);
  padding: 22px 20px 20px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(160deg, #13A0A2 0%, #0F8B8D 45%, #0B6E70 100%);
  box-shadow: 0 18px 40px -18px rgba(11, 110, 112, 0.65);
  overflow: hidden;
  margin-bottom: 14px;
}
.runde-karte::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.runde-karte .marke { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.runde-karte h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 6px 0 4px; }
.runde-karte p { opacity: 0.9; margin-bottom: 16px; position: relative; z-index: 1; }
.runde-karte .knopf { --k-grund: #fff; --k-kante: rgba(0, 0, 0, 0.18); --k-text: #0A6567; margin: 0; position: relative; z-index: 1; }
.runde-karte.ruhig { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-1); }
.runde-karte.ruhig::after { background: var(--akzent-hell); }
.runde-karte.ruhig p { color: var(--tinte-2); opacity: 1; }
.runde-karte.ruhig .knopf { --k-grund: var(--akzent); --k-kante: var(--akzent-tief); --k-text: var(--knopf-text); }
.runde-karte .zahlen { display: flex; gap: 18px; margin: 4px 0 18px; position: relative; z-index: 1; }
.runde-karte .zahlen b { display: block; font-family: var(--rund); font-size: 1.6rem; line-height: 1.1; }
.runde-karte .zahlen span { font-size: 0.8rem; opacity: 0.85; }

.schnellwahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.schnell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-align: left;
  color: inherit;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  min-width: 0;
  transition: transform 0.12s var(--feder);
}
.schnell > span:last-child { min-width: 0; max-width: 100%; }
.schnell:active { transform: scale(0.97); }
.schnell small { display: block; font-weight: 500; color: var(--tinte-2); font-size: 0.76rem; margin-top: 2px; }

.einheit-kachel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-decoration: none;
  color: inherit;
  margin-bottom: 12px;
  transition: transform 0.12s var(--feder);
}
.einheit-kachel:active { transform: scale(0.98); }
.einheit-kachel .emblem {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: var(--akzent-hell);
  flex-shrink: 0;
}
.einheit-kachel .haupt { flex: 1; min-width: 0; }
.einheit-kachel .vor { font-size: 0.76rem; font-weight: 700; color: var(--akzent-text); text-transform: uppercase; letter-spacing: 0.05em; }
.einheit-kachel .titel { font-family: var(--rund); font-weight: 750; font-size: 1.06rem; line-height: 1.25; }
.einheit-kachel .unter { font-size: 0.88rem; color: var(--tinte-2); }

.satz-des-tages { display: flex; gap: 14px; align-items: center; }
.satz-des-tages .tr { font-size: 1.24rem; }

/* ---------- Lernpfad ---------- */

.pfad-kopf { display: flex; align-items: center; gap: 16px; margin: 4px 0 8px; }
.pfad-kopf .ring { width: 64px; height: 64px; }
.pfad-kopf .zahl { font-family: var(--rund); font-size: 1.24rem; font-weight: 800; }

.kapitel { margin-top: 28px; }
.kapitel-kopf { margin-bottom: 14px; }
.kapitel-kopf .nr { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-3); }
.kapitel-kopf h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; }
.kapitel-kopf p { color: var(--tinte-2); font-size: 0.94rem; margin: 2px 0 0; }

.pfad { position: relative; padding-left: 0; }
.pfad-schritt {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  padding-bottom: 12px;
}
.pfad-schritt .spur {
  position: relative;
  width: 56px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.pfad-schritt .spur::before {
  content: "";
  position: absolute;
  top: 0; bottom: -12px;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--linie-fest);
}
.pfad-schritt:first-child .spur::before { top: 28px; }
.pfad-schritt:last-child .spur::before { bottom: auto; height: 28px; }
.pfad-schritt:only-child .spur::before { display: none; }
.pfad-schritt.fertig .spur::before { background: var(--akzent-mittel); }
.knoten {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: var(--flaeche);
  box-shadow: 0 0 0 3px var(--linie-fest) inset, 0 4px 0 var(--linie-fest);
  transition: transform 0.12s var(--feder);
}
.pfad-schritt:active .knoten { transform: scale(0.94); }
.pfad-schritt.fertig .knoten { background: var(--akzent); box-shadow: 0 4px 0 var(--akzent-tief); }
.pfad-schritt.fertig .knoten .haken {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px var(--grund);
}
.pfad-schritt.fertig .knoten .haken svg { width: 13px; height: 13px; }
.pfad-schritt.aktuell .knoten { background: var(--warm); box-shadow: 0 4px 0 var(--warm-tief), 0 0 0 6px var(--warm-hell); }
.pfad-schritt .karte-rechts {
  flex: 1;
  min-width: 0;
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
  padding: 12px 14px;
  align-self: flex-start;
}
.pfad-schritt.aktuell .karte-rechts { box-shadow: 0 0 0 2px var(--warm), var(--schatten-2); }
.pfad-schritt .karte-rechts .nr { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinte-3); }
.pfad-schritt.aktuell .karte-rechts .nr { color: var(--warm-text); }
.pfad-schritt .karte-rechts .titel { font-family: var(--rund); font-weight: 750; line-height: 1.25; }
.pfad-schritt .karte-rechts .unter { font-size: 0.85rem; color: var(--tinte-2); margin-top: 2px; }
.pfad-schritt .karte-rechts .knopf { margin: 12px 0 0; min-height: 44px; font-size: 0.97rem; }

/* ---------- Einheit ---------- */

.einheit-held { text-align: center; padding: 8px 6px 4px; }
.einheit-held .emblem {
  width: 84px; height: 84px;
  margin: 0 auto 12px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  background: var(--akzent-hell);
}
.einheit-held .vor { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent-text); }
.einheit-held h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 6px; }
.einheit-held .chipreihe { justify-content: center; margin-top: 10px; }

.vorspann {
  font-size: 1.04rem;
  line-height: 1.6;
  margin: 22px 0 8px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  white-space: pre-wrap;
}

.abschnitt { margin-top: 30px; }
.abschnitt > h2 { font-size: 1.24rem; font-weight: 750; letter-spacing: -0.015em; margin-bottom: 4px; }
.abschnitt > .leise { margin-bottom: 12px; font-size: 0.94rem; }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.abschnitt-kopf h2 { white-space: nowrap; }
.abschnitt-kopf h2 { font-size: 1.24rem; font-weight: 750; letter-spacing: -0.015em; }

.baustein {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px 13px 16px;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  position: relative;
}
.baustein + .baustein::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--linie); }
.baustein:active { background: var(--flaeche-2); }
.baustein .bild { width: 36px; font-size: 1.6rem; text-align: center; flex-shrink: 0; line-height: 1; }
.baustein .bild.zahl { font-family: var(--rund); font-size: 1.15rem; font-weight: 800; color: var(--akzent-text); }
.baustein .inhalt { flex: 1; min-width: 0; }
.baustein .tr { font-size: 1.12rem; line-height: 1.3; }
.baustein .de { color: var(--tinte-2); font-size: 0.94rem; margin-top: 1px; }
.baustein .wo { font-size: 0.82rem; color: var(--tinte-3); font-style: italic; margin-top: 2px; }
.baustein .tipp { font-size: 0.82rem; color: var(--warm-text); margin-top: 4px; }
.baustein .stern-mini { color: var(--gold); width: 14px; height: 14px; vertical-align: -1px; margin-left: 4px; }

.laut-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.laut-kachel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-align: left;
  color: inherit;
  transition: transform 0.12s var(--feder);
}
.laut-kachel:active { transform: scale(0.97); }
.laut-kachel .zeichen { font-family: var(--rund); font-size: 2.2rem; font-weight: 800; color: var(--akzent-text); line-height: 1; }
.laut-kachel .klang { font-weight: 650; }
.laut-kachel .info { font-size: 0.8rem; color: var(--tinte-2); line-height: 1.35; }
.laut-kachel .bsp { margin-top: 6px; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.laut-kachel .bsp b { font-family: var(--rund); }
.laut-kachel .bsp svg { width: 14px; height: 14px; color: var(--akzent-text); }

.paar-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.paar-seite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-align: left;
  color: inherit;
}
.paar-seite:active { background: var(--flaeche-2); }
.paar-seite .w { font-family: var(--rund); font-size: 1.3rem; font-weight: 750; }
.paar-seite .b { font-size: 0.82rem; color: var(--tinte-2); }

.hinweis-karte {
  margin-top: 26px;
  padding: 16px 18px 16px 18px;
  border-radius: var(--radius);
  background: var(--warm-hell);
  position: relative;
}
.hinweis-karte .kopf { display: flex; align-items: center; gap: 8px; color: var(--warm-text); margin-bottom: 8px; }
.hinweis-karte .kopf svg { width: 20px; height: 20px; }
.hinweis-karte h3 { font-size: 1.04rem; font-weight: 750; color: var(--warm-text); }
.hinweis-karte p { white-space: pre-wrap; margin: 0; line-height: 1.55; }

.aufgabe-karte {
  margin-top: 26px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 2px var(--akzent-mittel);
}
.aufgabe-karte .kopf { display: flex; align-items: center; gap: 8px; color: var(--akzent-text); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.aufgabe-karte .kopf svg { width: 18px; height: 18px; }
.aufgabe-karte h3 { font-size: 1.12rem; font-weight: 750; margin-bottom: 6px; }
.aufgabe-karte p { white-space: pre-wrap; margin: 0; line-height: 1.55; }

/* Dialog als Chat */
.chat { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; }
.blase-zeile { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; }
.blase-zeile.du { align-self: flex-end; align-items: flex-end; }
.blase-zeile .wer { font-size: 0.72rem; font-weight: 700; color: var(--tinte-3); letter-spacing: 0.04em; text-transform: uppercase; margin: 6px 12px 2px; }
.blase {
  border: 0;
  text-align: left;
  padding: 9px 14px 10px;
  border-radius: 20px 20px 20px 6px;
  background: var(--flaeche-2);
  color: var(--tinte);
  line-height: 1.35;
  transition: transform 0.12s var(--feder), background-color 0.2s;
}
.blase:active { transform: scale(0.97); }
.blase .tr { display: block; font-size: 1.04rem; }
.blase .de { display: block; font-size: 0.82rem; color: var(--tinte-2); margin-top: 2px; }
.blase-zeile.du .blase { background: var(--akzent); color: var(--knopf-text); border-radius: 20px 20px 6px 20px; }
.blase-zeile.du .blase .de { color: inherit; opacity: 0.8; }
.blase.spielt { box-shadow: 0 0 0 3px var(--akzent-mittel); }
.blase.verdeckt { background: var(--grund-tief); color: transparent; min-width: 160px; }
.blase.verdeckt .tr, .blase.verdeckt .de { visibility: hidden; }
.blase-zeile.erscheint { animation: erscheinen 0.42s var(--feder); }
@keyframes erscheinen {
  from { transform: translateY(12px) scale(0.94); }
  to { transform: none; }
}

.abschluss {
  margin-top: 34px;
  padding: 22px 20px;
  border-radius: var(--radius-l);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-align: center;
}
.abschluss .gross-symbol { font-size: 2.4rem; margin-bottom: 6px; }
.abschluss h3 { font-size: 1.24rem; font-weight: 800; margin-bottom: 6px; }
.abschluss p { color: var(--tinte-2); }
.abschluss .knopf { margin-top: 6px; }

/* Schwebende Aktionsleiste über der Tableiste */
.aktionsleiste {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tabhoehe) + var(--unten));
  z-index: 45;
  padding: 12px calc(18px + var(--rechts)) 14px calc(18px + var(--links));
  background: var(--glas);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -0.5px 0 var(--linie);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.aktionsleiste > div { width: 100%; max-width: 604px; display: flex; gap: 10px; pointer-events: auto; }
.aktionsleiste .knopf { margin: 0; }
.aktionsleiste .knopf.zweit { flex: 0 0 auto; width: auto; padding: 12px 16px; }

/* ---------- Üben-Hub ---------- */

.gedaechtnis { display: flex; align-items: center; gap: 16px; }
.gedaechtnis .ring { width: 76px; height: 76px; }
.gedaechtnis .zahlen { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gedaechtnis .zahlen b { display: block; font-family: var(--rund); font-size: 1.3rem; line-height: 1.1; }
.gedaechtnis .zahlen span { font-size: 0.74rem; color: var(--tinte-2); line-height: 1.2; display: block; }

.modus-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modus {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-align: left;
  color: inherit;
  transition: transform 0.12s var(--feder);
  min-height: 132px;
}
.modus:active { transform: scale(0.97); }
.modus .titel { font-family: var(--rund); font-weight: 750; line-height: 1.2; }
.modus .unter { font-size: 0.8rem; color: var(--tinte-2); line-height: 1.3; }
.modus .vorbild { font-size: 0.68rem; font-weight: 700; color: var(--tinte-3); letter-spacing: 0.04em; text-transform: uppercase; margin-top: auto; }

/* ---------- Wörter ---------- */

.suchfeld {
  position: sticky;
  top: calc(var(--kopfhoehe) + var(--oben));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin: 0 0 12px;
  border-radius: 12px;
  background: var(--grund-tief);
  color: var(--tinte-2);
}
.suchfeld svg { width: 18px; height: 18px; }
.suchfeld input {
  flex: 1;
  border: 0;
  background: none;
  font-size: 1rem;
  min-width: 0;
  padding: 2px 0;
  color: var(--tinte);
}
.suchfeld input::placeholder { color: var(--tinte-3); }
.suchfeld button { border: 0; background: none; color: var(--tinte-3); padding: 0; display: grid; }

.wort-reihe { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px 11px 16px; border: 0; background: none; text-align: left; color: inherit; position: relative; }
.wort-reihe + .wort-reihe::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--linie); }
.wort-reihe:active { background: var(--flaeche-2); }
.wort-reihe .bild { width: 30px; text-align: center; font-size: 1.35rem; flex-shrink: 0; }
.wort-reihe .bild.zahl { font-family: var(--rund); font-size: 1rem; font-weight: 800; color: var(--akzent-text); }
.wort-reihe .haupt { flex: 1; min-width: 0; }
.wort-reihe .tr { font-size: 1.04rem; }
.wort-reihe .de { font-size: 0.88rem; color: var(--tinte-2); }
.wort-reihe .zustand { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.zustand.sicher { background: var(--gruen); }
.zustand.lernend { background: var(--gold); }
.zustand.neu { background: var(--linie-fest); }
mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.leer {
  text-align: center;
  padding: 48px 20px;
  color: var(--tinte-2);
}
.leer .gross-symbol { font-size: 2.6rem; margin-bottom: 10px; }
.leer h3 { color: var(--tinte); font-size: 1.12rem; font-weight: 750; margin-bottom: 6px; }

/* Wort für Wort */
.interlinear { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 6px 0 2px; }
.interlinear .wort {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--flaeche-2);
}
.interlinear .wort b { font-family: var(--rund); font-size: 1.06rem; font-weight: 700; }
.interlinear .wort span { font-size: 0.76rem; color: var(--tinte-2); }

/* ---------- Mehr ---------- */

.erfolg-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.erfolg {
  padding: 16px 12px 14px;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
  text-align: center;
}
.erfolg .medaille {
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  background: var(--gold-hell);
  box-shadow: inset 0 0 0 3px var(--gold);
}
.erfolg .titel { font-family: var(--rund); font-weight: 750; font-size: 0.97rem; line-height: 1.2; }
.erfolg .unter { font-size: 0.76rem; color: var(--tinte-2); margin-top: 4px; line-height: 1.3; }
.erfolg.gesperrt .medaille { background: var(--grund-tief); box-shadow: inset 0 0 0 3px var(--linie-fest); filter: grayscale(1); opacity: 0.55; }
.erfolg.gesperrt .titel { color: var(--tinte-2); }
.erfolg .balken { height: 5px; margin-top: 10px; }

.regel { display: flex; gap: 14px; padding: 16px 0; }
.regel + .regel { border-top: 0.5px solid var(--linie); }
.regel .nr {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--akzent);
  color: var(--knopf-text);
  font-family: var(--rund);
  font-weight: 800;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.regel h3 { font-size: 1.04rem; font-weight: 750; margin-bottom: 4px; }
.regel p { white-space: pre-wrap; color: var(--tinte-2); font-size: 0.94rem; margin: 0; }

.einstellung { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; position: relative; }
.einstellung + .einstellung::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--linie); }
.einstellung .haupt { flex: 1; min-width: 0; }
.einstellung .titel { font-weight: 500; }
.einstellung .unter { font-size: 0.8rem; color: var(--tinte-2); }
.einstellung select {
  border: 0;
  background: var(--flaeche-2);
  border-radius: 9px;
  padding: 7px 28px 7px 10px;
  font-size: 0.94rem;
  color: var(--akzent-text);
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.fussnote { font-size: 0.8rem; color: var(--tinte-2); padding: 0 16px; margin: -4px 0 18px; line-height: 1.4; }

/* ---------- Ebenen: Sheets und Toast ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.3s;
}
.scrim.an { opacity: 1; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 81;
  max-height: calc(100vh - var(--oben) - 24px);
  max-height: calc(100dvh - var(--oben) - 24px);
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--schatten-3);
  transform: translateY(100%);
  transition: transform 0.42s var(--feder-weich);
  will-change: transform;
}
.sheet.an { transform: translateY(0); }
.sheet .griff { width: 38px; height: 5px; border-radius: 3px; background: var(--linie-fest); margin: 8px auto 0; flex-shrink: 0; }
.sheet-kopf { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px 20px; flex-shrink: 0; }
.sheet-kopf h2 { font-size: 1.12rem; font-weight: 800; }
.sheet-inhalt {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 20px calc(24px + var(--unten));
}
.schliessen-knopf {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--grund-tief);
  color: var(--tinte-2);
  display: grid;
  place-items: center;
}
.schliessen-knopf svg { width: 14px; height: 14px; }

.detail-held { text-align: center; padding: 6px 0 14px; }
.detail-held .bild { font-size: 3.4rem; line-height: 1.1; margin-bottom: 6px; }
.detail-held .bild.zahl { font-family: var(--rund); font-weight: 800; color: var(--akzent-text); font-size: 3rem; }
.detail-held .tr { font-size: 2rem; line-height: 1.15; }
.detail-held .de { font-size: 1.12rem; color: var(--tinte-2); margin-top: 4px; }
.detail-held .knopfreihe { justify-content: center; margin-top: 16px; }
.stimme { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--tinte-2); margin-top: 10px; }
.stimme i { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); display: inline-block; }
.stimme.computer i { background: var(--tinte-3); }

.toast {
  position: fixed;
  left: 50%;
  top: calc(var(--oben) + 10px);
  z-index: 120;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--tinte);
  color: var(--grund);
  font-weight: 600;
  font-size: 0.94rem;
  box-shadow: var(--schatten-2);
  transform: translate(-50%, -140%);
  transition: transform 0.45s var(--feder);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.an { transform: translate(-50%, 0); }
.toast button { border: 0; background: var(--akzent); color: var(--knopf-text); border-radius: 10px; padding: 6px 10px; font-weight: 700; }

.haptik { position: fixed; left: -100px; top: -100px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* =====================================================================
   Übungssitzung (Vollbild)
   ===================================================================== */

.vollbild {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--grund);
  display: flex;
  flex-direction: column;
  padding: var(--oben) var(--rechts) 0 var(--links);
  animation: hochfahren 0.42s var(--feder-weich);
}
.vollbild.raus { animation: runterfahren 0.3s var(--feder-weich) both; }
@keyframes hochfahren { from { transform: translateY(40px); } to { transform: none; } }
@keyframes runterfahren { from { transform: none; opacity: 1; } to { transform: translateY(40px); opacity: 0; } }

.sitzung-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 6px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
.sitzung-kopf .knopf-ikon {
  width: 40px; height: 40px;
  border: 0;
  background: none;
  color: var(--tinte-3);
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.sitzung-kopf .knopf-ikon svg { width: 22px; height: 22px; }
.sitzung-kopf .knopf-ikon:active { background: var(--grund-tief); }
.sitzung-kopf .knopf-ikon.aus { color: var(--rot); }
.fortschritt {
  flex: 1;
  height: 16px;
  border-radius: 8px;
  background: var(--grund-tief);
  overflow: hidden;
}
.fortschritt i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: var(--akzent);
  position: relative;
  transition: width 0.55s var(--feder);
  min-width: 16px;
}
.fortschritt i::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.sitzung-buehne {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 20px 20px;
  display: flex;
  flex-direction: column;
}
/* Ohne Leiste darunter: Abstand zum Home-Balken des iPhones. */
.vollbild:has(> div:last-child:empty) .sitzung-buehne { padding-bottom: calc(20px + var(--unten)); }
.aufgabe { display: flex; flex-direction: column; flex: 1; animation: aufgabe-rein 0.38s var(--feder); }
@keyframes aufgabe-rein { from { transform: translateX(28px); } to { transform: none; } }

.anweisung { font-family: var(--rund); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; margin: 6px 0 18px; }
.anweisung .neu-marke { display: inline-block; vertical-align: 3px; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: var(--warm); color: #fff; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }

.frage-block { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.frage-block .bild { font-size: 3rem; line-height: 1; }
.frage-block .bild.zahl { font-family: var(--rund); font-weight: 800; color: var(--akzent-text); font-size: 2.4rem; }
.frage-block .text { flex: 1; min-width: 0; }
.frage-block .tr { font-size: 1.6rem; line-height: 1.2; }
.frage-block .de-gross { font-family: var(--rund); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.frage-block .klein { color: var(--tinte-2); margin-top: 4px; }
.sprechblase {
  position: relative;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 2px var(--linie-fest);
}

.hoer-buehne { display: flex; justify-content: center; gap: 16px; align-items: center; margin: 8px 0 28px; }

.optionen { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-bottom: 6px; }
.optionen.gitter { display: grid; grid-template-columns: 1fr 1fr; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 2px var(--linie-fest), 0 4px 0 var(--linie-fest);
  text-align: left;
  color: inherit;
  font-size: 1.04rem;
  line-height: 1.3;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background-color 0.2s;
}
.option:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--linie-fest), 0 1px 0 var(--linie-fest); }
.option .tr { font-size: 1.12rem; }
.option .nr {
  width: 26px; height: 26px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--linie-fest);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tinte-3);
  flex-shrink: 0;
}
.option.gewaehlt { background: var(--akzent-hell); box-shadow: inset 0 0 0 2px var(--akzent), 0 4px 0 var(--akzent); }
.option.richtig { background: var(--gruen-hell); box-shadow: inset 0 0 0 2px var(--gruen), 0 4px 0 var(--gruen); color: var(--gruen-text); }
.option.falsch { background: var(--rot-hell); box-shadow: inset 0 0 0 2px var(--rot), 0 4px 0 var(--rot); color: var(--rot-text); animation: schuetteln 0.4s; }
.option.weg { opacity: 0.35; pointer-events: none; }
.option.zentriert { justify-content: center; text-align: center; }
.optionen.gesperrt .option { pointer-events: none; }

@keyframes schuetteln {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.schuettelt { animation: schuetteln 0.4s; }

/* Paare */
.paare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.paare .spalte { display: flex; flex-direction: column; gap: 10px; }
.paare .option { min-height: 60px; justify-content: center; text-align: center; padding: 10px; font-size: 0.97rem; }
.paare .option.tr { font-family: var(--rund); font-weight: 700; font-size: 1.04rem; }
.paare .option.erledigt { opacity: 0; transform: scale(0.9); pointer-events: none; transition: opacity 0.35s 0.25s, transform 0.35s 0.25s; }

/* Satzbau mit Kacheln */
.satzbau-antwort {
  min-height: 116px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 10px 0 14px;
  margin-bottom: 18px;
  background-image: linear-gradient(var(--linie-fest), var(--linie-fest)), linear-gradient(var(--linie-fest), var(--linie-fest));
  background-size: 100% 2px, 100% 2px;
  background-position: 0 56px, 0 112px;
  background-repeat: no-repeat;
}
.wortbank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: auto; padding-bottom: 6px; }
.kachel {
  position: relative;
  padding: 9px 14px;
  border: 0;
  border-radius: 13px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 2px var(--linie-fest), 0 3px 0 var(--linie-fest);
  font-family: var(--rund);
  font-size: 1.06rem;
  font-weight: 650;
  color: inherit;
  transition: transform 0.08s ease-out, box-shadow 0.08s;
  min-height: 46px;
}
.kachel:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--linie-fest), 0 1px 0 var(--linie-fest); }
.kachel.leer-platz { background: var(--grund-tief); box-shadow: none; color: transparent; pointer-events: none; }

/* Tippen */
.eingabe {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 2px var(--linie-fest);
  font-family: var(--rund);
  font-size: 1.24rem;
  font-weight: 600;
  resize: none;
  color: var(--tinte);
}
.eingabe:focus { box-shadow: inset 0 0 0 2px var(--akzent); }
.buchstaben { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.buchstaben button {
  min-width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 2px var(--linie-fest), 0 3px 0 var(--linie-fest);
  font-family: var(--rund);
  font-weight: 700;
  font-size: 1.12rem;
}
.buchstaben button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--linie-fest), 0 1px 0 var(--linie-fest); }

/* Einführung neuer Sätze */
.einfuehrung { text-align: center; margin: auto 0; padding: 10px 0 20px; }
.einfuehrung .bild { font-size: 4.2rem; line-height: 1.05; margin-bottom: 10px; }
.einfuehrung .bild.zahl { font-family: var(--rund); font-weight: 800; color: var(--akzent-text); font-size: 3.6rem; }
.einfuehrung .tr { font-size: 2.1rem; line-height: 1.15; }
.einfuehrung .de { font-size: 1.15rem; color: var(--tinte-2); margin-top: 6px; }
.einfuehrung .interlinear { justify-content: center; margin-top: 18px; }
.einfuehrung .tipp { margin-top: 14px; font-size: 0.94rem; color: var(--warm-text); }
.einfuehrung .knopfreihe { justify-content: center; margin-top: 22px; }

/* Karteikarte mit Wischen */
.karten-buehne { position: relative; flex: 1; min-height: 340px; margin: 4px 0 16px; perspective: 1200px; }
.wischkarte {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}
.wischkarte .dreh {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--feder);
}
.wischkarte.umgedreht .dreh { transform: rotateY(180deg); }
.wischkarte .seite {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-l);
  background: var(--flaeche);
  box-shadow: var(--schatten-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 22px;
  text-align: center;
}
.wischkarte .rueck { transform: rotateY(180deg); }
.wischkarte .seite .art { position: absolute; top: 18px; left: 0; right: 0; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-3); }
.wischkarte .seite .bild { font-size: 3.2rem; margin-bottom: 10px; }
.wischkarte .seite .bild.zahl { font-family: var(--rund); font-weight: 800; color: var(--akzent-text); font-size: 2.8rem; }
.wischkarte .seite .gross { font-family: var(--rund); font-size: 1.8rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.015em; }
.wischkarte .seite .klein { color: var(--tinte-2); margin-top: 10px; }
.wischkarte .seite .hinweis-tippen { position: absolute; bottom: 18px; font-size: 0.8rem; color: var(--tinte-3); }
.wischkarte .stempel {
  position: absolute;
  top: 58px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 3px solid currentColor;
  font-family: var(--rund);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.wischkarte .stempel.ja { left: 22px; color: var(--gruen); transform: rotate(-12deg); }
.wischkarte .stempel.nein { right: 22px; color: var(--rot); transform: rotate(12deg); }
.karten-hinweis { text-align: center; font-size: 0.8rem; color: var(--tinte-3); margin-bottom: 10px; }

/* Feedback-Leiste unten */
.pruefleiste {
  width: 100%;
  padding: 14px 20px calc(14px + var(--unten));
  border-top: 0.5px solid var(--linie);
  background: var(--grund);
  flex-shrink: 0;
}
.pruefleiste > div { max-width: 600px; margin: 0 auto; }
.pruefleiste .knopf { margin: 0; }
.pruefleiste .zeile-oben { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }

.urteil {
  width: 100%;
  padding: 18px 20px calc(16px + var(--unten));
  flex-shrink: 0;
  animation: urteil-rein 0.38s var(--feder);
}
.urteil > div { max-width: 600px; margin: 0 auto; }
@keyframes urteil-rein { from { transform: translateY(40%); } to { transform: none; } }
.urteil.gut { background: var(--gruen-hell); color: var(--gruen-text); }
.urteil.schlecht { background: var(--rot-hell); color: var(--rot-text); }
.urteil.mittel { background: var(--gold-hell); color: color-mix(in srgb, var(--gold) 55%, var(--tinte)); }
.urteil .kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.urteil .kopf .symbol { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: currentColor; flex-shrink: 0; }
.urteil .kopf .symbol svg { width: 20px; height: 20px; color: var(--grund); }
.urteil h3 { font-size: 1.3rem; font-weight: 850; }
.urteil .loesung { color: var(--tinte); margin: 0 0 4px; }
.urteil .loesung .tr { font-size: 1.12rem; }
.urteil .zusatz { color: var(--tinte-2); font-size: 0.88rem; margin-bottom: 12px; }
.urteil .loesung-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.urteil .loesung-zeile .haupt { flex: 1; }
.urteil .knopf { margin: 0; }
.urteil.gut .knopf { --k-grund: var(--gruen); --k-kante: var(--gruen-tief); --k-text: #fff; }
.urteil.schlecht .knopf { --k-grund: var(--rot); --k-kante: var(--rot-tief); --k-text: #fff; }
.urteil.mittel .knopf { --k-grund: var(--gold); --k-kante: color-mix(in srgb, var(--gold) 70%, #000); --k-text: #fff; }

/* Ende der Sitzung */
.sitzung-ende { text-align: center; margin: auto 0; padding: 20px 0; }
.sitzung-ende .pokal { width: 132px; height: 132px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 4.2rem; border-radius: 50%; background: var(--gold-hell); animation: pokal 0.8s var(--feder) both; }
@keyframes pokal { from { transform: scale(0.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.08) rotate(3deg); opacity: 1; } to { transform: none; } }
.sitzung-ende h2 { font-size: 1.75rem; font-weight: 850; letter-spacing: -0.02em; margin-bottom: 6px; }
.sitzung-ende .leise { margin-bottom: 20px; }
.statistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.statistik > div { padding: 12px 6px; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--linie-fest); }
.statistik b { display: block; font-family: var(--rund); font-size: 1.4rem; line-height: 1.15; }
.statistik span { font-size: 0.74rem; color: var(--tinte-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.statistik .gold { box-shadow: inset 0 0 0 2px var(--gold); }
.statistik .gold b { color: color-mix(in srgb, var(--gold) 70%, var(--tinte)); }
.statistik .gruen { box-shadow: inset 0 0 0 2px var(--gruen); }
.statistik .gruen b { color: var(--gruen-text); }
.statistik .tuerkis { box-shadow: inset 0 0 0 2px var(--akzent); }
.statistik .tuerkis b { color: var(--akzent-text); }
.schwierige { text-align: left; margin-bottom: 20px; }
.schwierige h3 { font-size: 0.94rem; font-weight: 750; margin: 0 0 8px; color: var(--tinte-2); }
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.konfetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fallen linear forwards; }
@keyframes fallen { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--dreh)); } }

/* =====================================================================
   Modi: Hörtraining, Nachsprechen, Zu zweit
   ===================================================================== */

.hoer-zentrum { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 10px 0; }
.hoer-kreis { position: relative; width: 210px; height: 210px; display: grid; place-items: center; }
.hoer-kreis svg.ring-gross { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hoer-kreis .ring-gross circle { fill: none; stroke-width: 8; }
.hoer-kreis .ring-gross .spur { stroke: var(--grund-tief); }
.hoer-kreis .ring-gross .wert { stroke: var(--warm); stroke-linecap: round; }
.hoer-kreis .kern {
  width: 160px; height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--flaeche);
  box-shadow: var(--schatten-2);
  font-size: 3.4rem;
  transition: transform 0.4s var(--feder), background-color 0.3s;
}
.hoer-kreis.sait .kern { background: var(--akzent); color: var(--knopf-text); transform: scale(1.04); }
.hoer-kreis.du .kern { background: var(--warm); color: #fff; }
.hoer-kreis .kern svg { width: 64px; height: 64px; }
.hoer-phase { font-family: var(--rund); font-size: 1.24rem; font-weight: 800; min-height: 1.6em; }
.hoer-text { min-height: 5.2em; }
.hoer-text .de { font-size: 1.24rem; font-weight: 600; }
.hoer-text .tr { font-size: 1.6rem; color: var(--akzent-text); margin-top: 6px; }
.hoer-text .ausgeblendet { opacity: 0; }
.steuerung { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 6px 0 calc(16px + var(--unten)); }

.nachsprech-karte { text-align: center; padding: 22px 18px; border-radius: var(--radius-l); background: var(--flaeche); box-shadow: var(--schatten-2); margin: 6px 0 18px; }
.nachsprech-karte .bild { font-size: 2.6rem; }
.nachsprech-karte .tr { font-size: 1.75rem; line-height: 1.2; margin-top: 4px; }
.nachsprech-karte .de { color: var(--tinte-2); margin-top: 6px; }
.nachsprech-karte .knopfreihe { justify-content: center; margin-top: 16px; }
.aufnahme-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 6px 0 18px; }
.aufnahme-knopf {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 0;
  background: var(--rot);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 0 var(--rot-tief), 0 0 0 6px var(--rot-hell);
  transition: transform 0.1s, box-shadow 0.1s, border-radius 0.25s var(--feder);
}
.aufnahme-knopf svg { width: 36px; height: 36px; }
.aufnahme-knopf:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--rot-tief), 0 0 0 6px var(--rot-hell); }
.aufnahme-knopf.nimmt { animation: atmen 1.4s ease-in-out infinite; }
@keyframes atmen { 50% { box-shadow: 0 5px 0 var(--rot-tief), 0 0 0 14px var(--rot-hell); } }
.klangbild { width: 100%; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten-1); padding: 12px 14px; }
.klangbild .spur-zeile { display: flex; align-items: center; gap: 10px; }
.klangbild .spur-zeile + .spur-zeile { margin-top: 8px; }
.klangbild canvas { flex: 1; height: 44px; width: 100%; min-width: 0; }
.klangbild .name { width: 42px; font-size: 0.76rem; font-weight: 700; color: var(--tinte-2); text-transform: uppercase; letter-spacing: 0.04em; }
.blaettern { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 calc(14px + var(--unten)); }
.blaettern .zaehler { font-weight: 700; color: var(--tinte-2); font-variant-numeric: tabular-nums; }

.partner-karte { text-align: center; padding: 26px 20px; border-radius: var(--radius-l); background: var(--flaeche); box-shadow: var(--schatten-2); margin: 6px 0 16px; }
.partner-karte .vor { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-3); }
.partner-karte .de { font-family: var(--rund); font-size: 1.75rem; font-weight: 750; line-height: 1.2; margin: 10px 0 4px; }
.partner-karte .bild { font-size: 2.6rem; line-height: 1.1; margin-top: 10px; }
.partner-karte .bild.zahl { font-family: var(--rund); font-weight: 800; color: var(--akzent-text); }
.partner-karte .interlinear { justify-content: center; margin-top: 12px; }
.nachsprech-karte .interlinear { justify-content: center; margin-top: 12px; }
.partner-karte .loesung { margin-top: 18px; padding-top: 18px; border-top: 0.5px solid var(--linie); }
.partner-karte .loesung .tr { font-size: 1.5rem; color: var(--akzent-text); }
.partner-tipp { font-size: 0.88rem; color: var(--tinte-2); background: var(--warm-hell); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.partner-tipp b { color: var(--warm-text); }

/* ---------- Bewegung, Transparenz, Kontrast ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }
  .wischkarte .dreh { transition: opacity 0.15s !important; }
  .konfetti { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tabs, .leiste-oben.sichtbar { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --linie: rgba(0, 0, 0, 0.3); --tinte-2: #3E4846; --tinte-3: #5B6765; }
  .tafel, .liste, .option, .kachel { box-shadow: inset 0 0 0 2px var(--tinte-3); }
}

@media (min-width: 700px) {
  .schnellwahl { grid-template-columns: repeat(3, 1fr); }
  .modus-gitter { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 350px) {
  .schnellwahl { grid-template-columns: 1fr 1fr; }
  .grosser-titel { font-size: 1.75rem; }
}