/* English Coach – Design System (Apple-inspired) */
:root {
  /* ---------- Marke ---------- */
  --red:        #D6231F;   /* Füllungen, Flächen, Gradienten */
  --red-2:      #B0140F;
  --red-ink:    #C41C18;   /* NEU: Rot für Text/Icons auf hellen Flächen – 5,9:1 auf #FFF */
  --red-soft:   rgba(214, 35, 31, .10);
  --navy:       #0B1F3A;
  --navy-2:     #17345E;   /* NEU: war 6× hart codiert in Gradienten */

  /* ---------- Semantik (getrennt von der Marke!) ---------- */
  --danger:     #C8322B;   /* NEU: Fehlerzustand – bewusst dunkler/matter als --red */
  --danger-ink: #A31C17;   /* NEU: 6,4:1 auf #FFF */
  --danger-soft:rgba(200, 50, 43, .12);
  --green:      #34C759;
  --green-ink:  #167C36;   /* NEU: war #1F8F3D (3,4:1 im Chip) → jetzt 4,9:1 */
  --green-soft: rgba(52, 199, 89, .14);
  --amber:      #FF9F0A;
  --amber-ink:  #8A5200;   /* NEU: war #B36A00 (3,5:1 im Chip) → jetzt 5,4:1 */
  --amber-soft: rgba(255, 159, 10, .16);
  --blue:       #0A84FF;
  --blue-ink:   #0060DF;   /* NEU: 5,1:1 auf #FFF */
  --blue-soft:  rgba(10, 132, 255, .12);

  /* ---------- Tinte & Flächen ---------- */
  --ink:        #111114;
  --ink-2:      #3A3A40;
  --muted:      #5F5F68;   /* war #6E6E76 – 4,54:1 reicht bei 10–13 px nicht; jetzt 5,67:1 */
  --muted-2:    #86868E;   /* war #A1A1AA – 2,30:1, verfehlte 3:1 für Chevrons; jetzt 3,24:1 */
  --bg:         #F5F5F7;
  --bg-2:       #ECECF1;
  --card:       rgba(255, 255, 255, .82);
  --card-solid: #FFFFFF;
  --line:       rgba(11, 31, 58, .08);   /* Navy statt Schwarz – wärmer, gleiche Helligkeit */
  --line-2:     rgba(11, 31, 58, .16);   /* war .12 – Steuerelement-Kanten waren 1,19:1 */
  --line-3:     rgba(11, 31, 58, .28);   /* NEU: Kante für antippbare Flächen (.opt, .wchip) */
  --hairline:   inset 0 1px 0 rgba(255, 255, 255, .55);  /* NEU: oberer Lichtsaum */

  /* ---------- Typo-Skala (11 Stufen, Basis 17, Verhältnis 1.09→1.36) ---------- */
  --fs-11: clamp(9.73px, 2.821vw, 11.82px);  --fs-12: clamp(10.62px, 3.077vw, 12.9px);  --fs-13: clamp(11.51px, 3.333vw, 13.97px);  --fs-15: clamp(13.28px, 3.846vw, 16.12px);
  --fs-17: clamp(15.04px, 4.359vw, 18.27px);  --fs-20: clamp(17.7px, 5.128vw, 21.5px);  --fs-24: clamp(21.24px, 6.154vw, 25.8px);  --fs-28: clamp(24.78px, 7.179vw, 30.1px);
  --fs-34: clamp(30.09px, 8.718vw, 36.55px);  --fs-44: clamp(38.94px, 11.282vw, 47.3px);  --fs-60: clamp(53.1px, 15.385vw, 64.5px);

  /* Gewichte: nur 4. 650/750 runden in SF Pro & Roboto ohnehin auf 700. */
  --fw-body: 400;  --fw-med: 600;  --fw-bold: 700;  --fw-heavy: 800;

  /* Zeilenhöhen: kleiner Text braucht MEHR Durchschuss, Display weniger. */
  --lh-tight:   1.08;  /* ≥34 px */
  --lh-snug:    1.22;  /* 20–28 px */
  --lh-normal:  1.45;  /* 17 px Fließtext */
  --lh-relaxed: 1.52;  /* 12–15 px, wichtig bei deutschen Komposita */

  /* Optische Laufweiten-Kurve, monoton fallend mit der Größe */
  --tr-60: -.035em; --tr-44: -.030em; --tr-34: -.026em; --tr-28: -.022em;
  --tr-24: -.019em; --tr-20: -.015em; --tr-17: -.011em; --tr-15: -.006em;
  --tr-13:  0em;    --tr-12: .004em;
  --tr-caps-13: .055em;  --tr-caps-11: .075em;  /* Versalien: Tracking steigt bei kleiner Größe */

  --num: tabular-nums;   /* NEU: für font-variant-numeric */

  /* ---------- Spacing: striktes 4er-Raster ---------- */
  --s-0:  0px;   --s-05: 2px;  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;
  --s-4: 16px;   --s-5: 20px;  --s-6: 24px;   --s-7: 32px;   --s-8: 40px;  --s-9: 56px;
  --gutter:   var(--s-4);   /* App-Seitenrand: 18 → 16 */
  --pad-card: var(--s-5);   /* 20 – einheitlich für .card, .learn, .sheet, .hero, .result */
  --gap-card: var(--s-3);   /* 12 – zwischen gestapelten Karten (war 14) */
  --gap-list: var(--s-2);   /* 8  – zwischen Optionen/Chips (war 6/10/12 gemischt) */
  --gap-sect: var(--s-7);   /* 32 – zwischen Abschnitten (war .mt-lg = 28) */

  /* ---------- Elevation: eine Lichtquelle oben, Versatz ≈ Blur/3 ---------- */
  --e0: none;
  --e1: 0 1px 1px rgba(11,31,58,.05), 0 1px 3px rgba(11,31,58,.05);    /* Chips, Stat-Kacheln */
  --e2: 0 1px 2px rgba(11,31,58,.05), 0 4px 10px rgba(11,31,58,.06);   /* .opt, .wchip, .input */
  --e3: 0 2px 5px rgba(11,31,58,.05), 0 12px 24px rgba(11,31,58,.09);  /* .card */
  --e4: 0 4px 10px rgba(11,31,58,.06), 0 20px 40px rgba(11,31,58,.13); /* .learn, .hero, .feedback */
  --e5: 0 8px 16px rgba(11,31,58,.08), 0 32px 64px rgba(11,31,58,.20); /* .sheet, .toast, .badge-pop */
  --shadow:    var(--e3);   /* Alias – alte Regeln laufen unverändert weiter */
  --shadow-lg: var(--e4);

  /* Farbige Schatten für farbige Flächen – gleiche Geometrie wie --e3 */
  --e3-red:   0 2px 5px rgba(176,20,15,.18),  0 12px 24px rgba(176,20,15,.28);
  --e3-green: 0 2px 5px rgba(34,168,74,.18),  0 12px 24px rgba(34,168,74,.28);
  --e3-blue:  0 2px 5px rgba(10,107,224,.18), 0 12px 24px rgba(10,107,224,.30);

  /* ---------- Radien ---------- */
  --r-1:  6px;    /* .opt .k, .level-head .badge */
  --r-2: 10px;    /* INNEN: alles, was direkt in Karte/Sheet sitzt (= außen − padding) */
  --r-3: 14px;    /* kleine Buttons, .seg, .emo-opt */
  --r-4: 18px;    /* .btn, .opt, .input, .stat */
  --r-5: 22px;    /* .card */
  --r-6: 28px;    /* .learn, .hero, .sheet, .feedback */
  --r-full: 999px;
  --radius:    var(--r-5);   /* Alias, war 22px */
  --radius-sm: var(--r-3);   /* Alias, war 14px */
  /* Regel: innerer Radius = äußerer − Padding, Untergrenze 10 px.
     sheet 28−20=8→10 · learn 28−20=8→10 · card 22−20=2→10 · level 22−12=10 · seg 14−4=10 */

  /* ---------- Rahmen ---------- */
  --bw-1: 1px;    /* Container */
  --bw-2: 2px;    /* antippbare Flächen – ersetzt 1.5px (rendert auf 3× als 4,5 phys. px) */
  --bw-3: 3px;    /* .q .blank, .stop .dot */

  /* ---------- Zustände ---------- */
  --op-disabled: .40;   /* .btn[disabled], .ch.locked, .stop.locked  (war .45/.5) */
  --op-consumed: .28;   /* .wchip.used, .match .opt.gone, .opt.dim   (war .25/.3/.45) */
  --press:    .97;      /* Flächen ab ~120 px Breite */
  --press-sm: .93;      /* runde/kleine Ziele  (war .985/.98/.97/.95/.94/.92/.9) */

  /* ---------- Bewegung ---------- */
  --dur-1: 120ms;  /* Tap-Feedback */
  --dur-2: 180ms;  /* Zustandswechsel: Farbe, Rand, Hintergrund */
  --dur-3: 240ms;  /* kleines Ein-/Ausklappen */
  --dur-4: 320ms;  /* Sheet, Screenwechsel */
  --dur-5: 520ms;  /* Fortschritt, Ring, Bus */
  --ease:       cubic-bezier(.2, .8, .2, 1);     /* Ausklang – unverändert */
  --ease-inout: cubic-bezier(.45, 0, .2, 1);     /* NEU: für umkehrbare Zustände */
  --spring:     cubic-bezier(.34, 1.32, .64, 1); /* war 1.4 – 7 % Überschwingen auf 54 px wackelt */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: clamp(15.04px, 4.359vw, 18.27px); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100dvh; overflow-x: hidden; overscroll-behavior-y: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, p { margin: 0; }
.hidden { display: none !important; }

/* Background */
#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, var(--bg) 60%); }

/* Drei weiche Farbfelder in den Toenen des Logos. Sie liegen hinter allem,
   bewegen sich nicht und sind so blass, dass Text darauf ruhig bleibt. */
.bg-schein { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.bg-schein.a { width: 62vw; height: 62vw; max-width: 520px; max-height: 520px;
  left: -14vw; top: -12vw; background: #2E8BE0; opacity: .13; }
.bg-schein.b { width: 54vw; height: 54vw; max-width: 460px; max-height: 460px;
  right: -12vw; top: 6vh; background: #7A3DD6; opacity: .11; }
.bg-schein.c { width: 70vw; height: 46vw; max-width: 560px; max-height: 360px;
  left: 10vw; bottom: -14vh; background: var(--red); opacity: .07; }

/* Angedeutete Umlaufbahn, wie sie im Logo um Rivo liegt. */
.bg-ring { position: absolute; left: 50%; top: 46%; width: 128vw; height: 128vw;
  max-width: 980px; max-height: 980px; transform: translate(-50%, -50%) rotate(-16deg);
  border: 1.5px solid var(--navy); border-radius: 50%; opacity: .07; }

/* App frame */
.app { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: calc(16px + var(--sat)) 18px calc(28px + var(--sab)); min-height: 100dvh; display: flex; flex-direction: column; }
.screen { animation: rise .42s var(--ease) both; flex: 1; display: flex; flex-direction: column; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.screen.out { animation: sink .2s ease both; pointer-events: none; }
@keyframes sink { to { opacity: 0; transform: translateY(-8px); } }

/* Typography */
.eyebrow { font-size: clamp(11.51px, 3.333vw, 13.97px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.title { font-size: clamp(30.09px, 8.718vw, 36.55px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.title-md { font-size: clamp(21.24px, 6.154vw, 25.8px); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.lead { font-size: clamp(15.04px, 4.359vw, 18.27px); color: var(--muted); }
.small { font-size: clamp(11.51px, 3.333vw, 13.97px); color: var(--muted); }
.b { font-weight: 700; }

/* Cards */
.card { background: var(--card); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.card + .card { margin-top: 14px; }
.card.tap { transition: transform .18s var(--spring), box-shadow .2s; cursor: pointer; }
.card.tap:active { transform: scale(.985); }

/* Buttons */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 22px; border-radius: 18px; font-weight: 700; font-size: clamp(15.04px, 4.359vw, 18.27px); letter-spacing: -.01em; transition: transform .16s var(--spring), box-shadow .2s, opacity .2s, background .2s; user-select: none; }
.btn:active { transform: scale(.97); }
.btn.primary { color: #fff; background: linear-gradient(180deg, #E8322D, var(--red-2)); box-shadow: 0 8px 22px rgba(214, 35, 31, .35), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.green { color: #fff; background: linear-gradient(180deg, #3CD36A, #22A84A); box-shadow: 0 8px 22px rgba(52,199,89,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.navy { color: #fff; background: linear-gradient(180deg, #17345E, var(--navy)); box-shadow: 0 8px 22px rgba(11,31,58,.3); }
.btn.ghost { background: var(--card-solid); border: 1px solid var(--line-2); color: var(--ink); box-shadow: var(--shadow); }
.btn.soft { background: var(--red-soft); color: var(--red); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.sm { height: 42px; padding: 0 16px; font-size: clamp(13.28px, 3.846vw, 16.12px); border-radius: 14px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card-solid); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: clamp(17.7px, 5.128vw, 21.5px); transition: transform .15s var(--spring); }
.icon-btn:active { transform: scale(.92); }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.center { text-align: center; }
.mt { margin-top: 16px; } .mt-lg { margin-top: 28px; } .mb { margin-bottom: 16px; }

/* Top bar (in lessons) */
.topbar { display: flex; align-items: center; gap: 8px; padding: 4px 0 16px; }
.topbar .bar { flex: 1; min-width: 40px; }
/* Die Uhr laeuft neben den Punkten mit. Auf schmalen Geraeten wird es eng,
   deshalb duerfen beide Plaketten schrumpfen statt umzubrechen. */
.zeit-pill { font-size: clamp(11.51px, 3.333vw, 13.97px); font-weight: 700; color: var(--ink-2);
  background: var(--bg-2); padding: 6px 9px; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.zeit-pill.ueber { color: var(--amber-ink, var(--amber)); background: var(--amber-soft); }
@media (max-width: 380px) {
  .topbar .xp-pill, .topbar .zeit-pill { padding: 5px 7px; font-size: 11px; }
}
.bar { height: 12px; border-radius: 999px; background: var(--line-2); overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FF5F57, var(--red)); transition: width .6s var(--ease); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35); }
.bar.green > i { background: linear-gradient(90deg, #5BE07E, var(--green)); }
.bar.lg { height: 16px; }
.bar .bus { position: absolute; top: 50%; transform: translate(-50%, -52%); z-index: 1; width: 34px; height: 24px; transition: left .6s var(--ease); filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); pointer-events: none; }
.bar .bus svg { width: 100%; height: 100%; display: block; }
.xp-pill { font-size: clamp(11.51px, 3.333vw, 13.97px); font-weight: 700; color: var(--amber); background: var(--amber-soft); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }

/* Profile screen */
.hero { position: relative; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, #0F2A52 0%, #0B1F3A 100%); color: #fff; padding: 26px 24px 0; min-height: 260px; box-shadow: var(--shadow-lg); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background:
  linear-gradient(#fff, #fff) center / 100% 16% no-repeat,
  linear-gradient(#fff, #fff) center / 16% 100% no-repeat; }
.hero .hero-text { position: relative; z-index: 2; }
.hero .title { color: #fff; }
.hero .lead { color: rgba(255,255,255,.75); }
.hero-bus { position: relative; z-index: 1; margin: 8px -10px -6px; }
.hero-bus svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); animation: busIn 1s var(--spring) both; }
@keyframes busIn { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.hero.photo { padding: 0; min-height: 0; }
.hero.photo img { width: 100%; height: 240px; object-fit: cover; display: block; }
.hero.photo .hero-text { position: absolute; left: 22px; bottom: 18px; right: 22px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero.photo::before { content: none; }
/* Der gezeichnete Bus liegt in der Foto-Fassung mit im Markup, damit er
   sofort da ist, wenn das Foto nicht laedt. Solange das Foto steht,
   bleibt er verborgen. */
.hero.photo .hero-bus { display: none; }
.hero.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6)); }

.profile { display: flex; align-items: center; gap: 16px; padding: 18px; }
.profile .avatar { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: clamp(26.55px, 7.692vw, 32.25px); flex: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(0,0,0,.15); }
.profile .avatar.darius { background: linear-gradient(160deg, #17345E, var(--navy)); }
.profile .avatar.liam { background: linear-gradient(160deg, #FF6A5E, var(--red-2)); }
.profile .meta { flex: 1; min-width: 0; }
.profile .name { font-size: clamp(17.7px, 5.128vw, 21.5px); font-weight: 800; letter-spacing: -.02em; }
.profile .sub { color: var(--muted); font-size: clamp(12.39px, 3.59vw, 15.05px); margin-top: 2px; }
.profile .chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: clamp(11.06px, 3.205vw, 13.44px); font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.chip.red { background: var(--red-soft); color: var(--red); }
.chip.amber { background: var(--amber-soft); color: #B36A00; }
.chip.green { background: var(--green-soft); color: #1F8F3D; }
.chip.blue { background: var(--blue-soft); color: var(--blue); }
.profile .go { font-size: clamp(19.47px, 5.641vw, 23.65px); color: var(--muted-2); }

/* Time picker */
.time-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.time-opt { background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 18px 16px; text-align: left; box-shadow: var(--shadow); transition: transform .16s var(--spring), border-color .2s, background .2s; position: relative; }
.time-opt:active { transform: scale(.97); }
.time-opt .n { font-size: clamp(26.55px, 7.692vw, 32.25px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.time-opt .n small { font-size: clamp(13.28px, 3.846vw, 16.12px); font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.time-opt .d { color: var(--muted); font-size: clamp(11.95px, 3.462vw, 14.51px); margin-top: 8px; }
.time-opt .tag { display: block; height: 20px; font-size: clamp(9.73px, 2.821vw, 11.82px); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.time-opt .tag:empty::after { content: "\00a0"; }
.time-opt.hot { border-color: rgba(214,35,31,.45); }

/* Route (today's plan) */
.route { position: relative; padding-left: 8px; }
.stop { display: flex; align-items: center; gap: 14px; padding: 12px 10px 12px 4px; position: relative; border-radius: 16px; transition: background .2s; }
.stop.tap { cursor: pointer; }
.stop.tap:active { background: var(--bg-2); }
.stop::before { content: ""; position: absolute; left: 21px; top: -12px; bottom: -12px; width: 3px; background: var(--line-2); border-radius: 2px; z-index: 0; }
.stop:first-child::before { top: 50%; } .stop:last-child::before { bottom: 50%; }
.stop.done::before, .stop.done + .stop::before { background: var(--green); }
.stop .dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card-solid); border: 3px solid var(--line-2); font-size: clamp(15.93px, 4.615vw, 19.35px); position: relative; z-index: 1; flex: none; box-shadow: var(--shadow); }
.stop.done .dot { border-color: var(--green); background: var(--green); color: #fff; font-size: clamp(14.16px, 4.103vw, 17.2px); }
.stop.current .dot { border-color: var(--red); box-shadow: 0 0 0 6px var(--red-soft); }
.stop.current .dot svg { width: 28px; height: 20px; }
.stop.locked { opacity: .5; }
.stop .t { font-weight: 700; letter-spacing: -.01em; }
.stop .s { color: var(--muted); font-size: clamp(11.95px, 3.462vw, 14.51px); }
.stop .m { margin-left: auto; font-size: clamp(11.51px, 3.333vw, 13.97px); color: var(--muted); font-weight: 600; white-space: nowrap; }

/* Level map */
.level { padding: 0; overflow: hidden; }
.level-head { display: block; padding: 0; cursor: pointer; width: 100%; text-align: left; background: none; border: 0; }
.lv-zeile { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }

/* Fotoband je Level. Das Bild sitzt hinter einem Verlauf, damit die
   Zeile darunter immer lesbar bleibt. */
.lv-foto { position: relative; height: 104px; overflow: hidden; background: var(--bg-2); }
.lv-foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04); transition: transform .6s var(--ease), filter .4s var(--ease); }
.lv-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,0) 45%, rgba(11,31,58,.22)); }
.level.open .lv-foto { height: 132px; }
.level.open .lv-foto img { transform: scale(1.09); }
.level-head:active .lv-foto img { transform: scale(1.12); }
/* Noch nicht begonnene Level treten zurueck, das zeigt den Weg nach vorn. */
.level.fern .lv-foto img { filter: grayscale(.62) brightness(.86); }
@media (prefers-reduced-motion: reduce) { .lv-foto img { transition: none; } }
.lv-zeile .badge { font-size: clamp(10.62px, 3.077vw, 12.9px); font-weight: 800; color: #fff; background: var(--navy); padding: 4px 8px; border-radius: 8px; letter-spacing: .02em; }
.lv-zeile .badge.done { background: var(--green); }
.lv-zeile .chev { margin-left: auto; color: var(--muted-2); transition: transform .3s var(--ease); }
.level.open .chev { transform: rotate(90deg); }
.level-body { display: none; padding: 0 12px 12px; }
.level.open .level-body { display: block; }
.ch { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; cursor: pointer; transition: background .2s; }
.ch:active { background: var(--bg-2); }
.ch .em { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-2); font-size: clamp(17.7px, 5.128vw, 21.5px); flex: none; }
.ch.done .em { background: var(--green-soft); }
.ch.locked { opacity: .45; cursor: default; }
.ch .ct { font-weight: 650; font-size: clamp(13.72px, 3.974vw, 16.66px); letter-spacing: -.01em; }
.ch .cs { font-size: clamp(11.06px, 3.205vw, 13.44px); color: var(--muted); }
.ch .st { margin-left: auto; font-size: clamp(15.93px, 4.615vw, 19.35px); }
.level-bar { height: 6px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 12px; text-align: center; box-shadow: var(--shadow); }
.stat .v { font-size: clamp(19.47px, 5.641vw, 23.65px); font-weight: 800; letter-spacing: -.02em; }
.stat .l { font-size: clamp(10.62px, 3.077vw, 12.9px); color: var(--muted); font-weight: 600; margin-top: 2px; }

/* Learning cards */
.learn { position: relative; background: var(--card-solid); border-radius: 28px; padding: 30px 26px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); min-height: 320px; display: flex; flex-direction: column; justify-content: center; animation: flip .45s var(--spring) both; }
@keyframes flip { from { transform: perspective(900px) rotateY(-14deg) translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.learn .em { font-size: clamp(35.4px, 10.256vw, 43px); line-height: 1; margin-bottom: 16px; }
.learn .say-row { display: flex; align-items: flex-start; gap: 14px; }
.learn .en { flex: 1; min-width: 0; font-size: clamp(23.89px, 6.923vw, 29.02px); font-weight: 800; letter-spacing: -.025em; line-height: 1.22; color: var(--ink); }
.kid .learn .en { font-size: clamp(29.21px, 8.462vw, 35.48px); }
.learn .de { font-size: clamp(15.04px, 4.359vw, 18.27px); color: var(--muted); margin-top: 10px; line-height: 1.4; }
/* Zweite Ebene: ein gemeinsamer ruhiger Block statt zwei konkurrierender Farbflaechen */
.learn .more { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.learn .ex { font-size: clamp(13.28px, 3.846vw, 16.12px); color: var(--ink-2); line-height: 1.45; }
.learn .ex b { color: var(--muted); font-size: clamp(9.73px, 2.821vw, 11.82px); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; display: block; margin-bottom: 3px; }
.learn .ex span { font-style: italic; }
.learn .tip { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(12.83px, 3.718vw, 15.59px); line-height: 1.45; color: var(--ink-2); }
.learn .tip > span:first-child { flex: none; }
.learn .speak { flex: none; width: 48px; height: 48px; font-size: clamp(18.59px, 5.385vw, 22.57px); background: var(--red); color: #fff; border: 0;
  box-shadow: 0 6px 16px rgba(214,35,31,.32); }
.learn .speak:active { transform: scale(.92); }
.learn .speak.playing { animation: speakPulse 1s ease-in-out infinite; }
@keyframes speakPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,35,31,.45); } 50% { box-shadow: 0 0 0 14px rgba(214,35,31,0); } }
.dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: all .3s; }
.dots i.on { width: 20px; background: var(--red); }

/* Exercises */
.q { font-size: clamp(18.59px, 5.385vw, 22.57px); font-weight: 750; letter-spacing: -.02em; line-height: 1.3; margin: 6px 0 18px; }
.kid .q { font-size: clamp(21.24px, 6.154vw, 25.8px); }
.q .blank { display: inline-block; min-width: 90px; border-bottom: 3px solid var(--red); text-align: center; color: var(--red); padding: 0 6px; transition: all .2s; }
.q .blank.filled { color: var(--ink); border-color: var(--green); }
.opts { display: grid; gap: 10px; }
.opt { background: var(--card-solid); border: 1.5px solid var(--line-2); border-radius: 16px; padding: 15px 16px; font-size: clamp(15.04px, 4.359vw, 18.27px); font-weight: 600; text-align: left; box-shadow: var(--shadow); transition: transform .14s var(--spring), border-color .2s, background .2s; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.kid .opt { font-size: clamp(16.82px, 4.872vw, 20.43px); padding: 17px 18px; }
.opt .k { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-2); color: var(--muted); font-size: clamp(11.51px, 3.333vw, 13.97px); font-weight: 800; display: grid; place-items: center; flex: none; }
.opt:active { transform: scale(.98); }
.opt.sel { border-color: var(--blue); background: var(--blue-soft); }
.opt.ok { border-color: var(--green); background: var(--green-soft); }
.opt.ok .k { background: var(--green); color: #fff; }
.opt.bad { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }
.opt.bad .k { background: var(--red); color: #fff; }
.opt.dim { opacity: .45; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.chips-line { display: flex; flex-wrap: wrap; gap: 10px; }
.wchip { background: var(--card-solid); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 12px 16px; font-size: clamp(15.04px, 4.359vw, 18.27px); font-weight: 650; box-shadow: var(--shadow); transition: transform .14s var(--spring), opacity .2s; }
.wchip:active { transform: scale(.95); }
.wchip.used { opacity: .25; pointer-events: none; }
.wchip.ok { border-color: var(--green); background: var(--green-soft); }
.wchip.bad { border-color: var(--red); background: var(--red-soft); }
.answer-row { min-height: 66px; border-bottom: 2px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 6px 0 12px; margin-bottom: 18px; }
.answer-row .wchip { background: var(--red-soft); border-color: transparent; color: var(--red); }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match .opt { min-height: 60px; justify-content: center; text-align: center; font-size: clamp(14.16px, 4.103vw, 17.2px); }
.match .opt.gone { opacity: .3; pointer-events: none; border-style: dashed; }
.input { width: 100%; height: 58px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--card-solid); padding: 0 18px; font-size: clamp(15.93px, 4.615vw, 19.35px); outline: none; box-shadow: var(--shadow); transition: border-color .2s; }
.input:focus { border-color: var(--blue); }
.input.ok { border-color: var(--green); background: var(--green-soft); }
.input.bad { border-color: var(--red); background: var(--red-soft); }
.listen-btn { width: 120px; height: 120px; border-radius: 50%; margin: 6px auto 22px; display: grid; place-items: center; background: linear-gradient(180deg, #2E8CFF, #0A6BE0); color: #fff; font-size: clamp(40.71px, 11.795vw, 49.45px); box-shadow: 0 14px 34px rgba(10,132,255,.4), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .16s var(--spring); position: relative; }
.listen-btn:active { transform: scale(.94); }
.listen-btn.playing::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(10,132,255,.4); animation: pulse 1s ease-out infinite; }
@keyframes pulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.mic-btn { background: linear-gradient(180deg, #FF5F57, var(--red-2)); box-shadow: 0 14px 34px rgba(214,35,31,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.mic-btn.rec { animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { transform: scale(1.06); } }
.speak-text { font-size: clamp(23.01px, 6.667vw, 27.95px); font-weight: 800; letter-spacing: -.02em; text-align: center; margin: 8px 0 6px; }
.heard { text-align: center; color: var(--muted); min-height: 24px; font-size: clamp(13.28px, 3.846vw, 16.12px); margin-top: 6px; }

/* Bottom action bar */
.actions { position: sticky; bottom: calc(10px + var(--sab)); margin-top: auto; padding-top: 22px; }
.feedback { border-radius: 22px; padding: 18px 18px 16px; box-shadow: var(--shadow-lg); animation: rise .3s var(--ease) both; }
.feedback.ok { background: linear-gradient(180deg, #E8FBEC, #DDF7E3); color: #146B2C; border: 1px solid rgba(52,199,89,.3); }
.feedback.bad { background: linear-gradient(180deg, #FFECEB, #FFE1DF); color: #8F1511; border: 1px solid rgba(214,35,31,.25); }

.feedback .fh { font-size: clamp(17.7px, 5.128vw, 21.5px); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.feedback .fc { margin-top: 6px; font-size: clamp(13.72px, 3.974vw, 16.66px); }
.feedback .fc b { display: block; font-size: clamp(15.04px, 4.359vw, 18.27px); margin-bottom: 4px; }
.feedback .btn { margin-top: 14px; }
.feedback.ok .btn { background: linear-gradient(180deg, #3CD36A, #22A84A); box-shadow: 0 8px 22px rgba(52,199,89,.35); color: #fff; }

/* Sheet (popup) */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 40; animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 600px; z-index: 50; background: var(--card-solid); border-radius: 28px 28px 0 0; padding: 14px 22px calc(24px + var(--sab)); box-shadow: 0 -10px 50px rgba(0,0,0,.25); animation: up .38s var(--spring) both; max-height: 86dvh; overflow: auto; }
@keyframes up { from { transform: translate(-50%, 40%); opacity: 0; } }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 16px; }
.sheet.bad { border-top: 6px solid var(--red); }
.sheet.good { border-top: 6px solid var(--green); }
.sheet .sh { font-size: clamp(21.24px, 6.154vw, 25.8px); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.sheet .correct { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--green-soft); border: 1px solid rgba(52,199,89,.3); }
.sheet .correct small { display: block; font-size: clamp(10.62px, 3.077vw, 12.9px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1F8F3D; margin-bottom: 4px; }
.sheet .correct .c { font-size: clamp(16.82px, 4.872vw, 20.43px); font-weight: 750; }
.sheet .yours { margin-top: 10px; padding: 12px 16px; border-radius: 16px; background: var(--red-soft); color: var(--red); font-size: clamp(13.28px, 3.846vw, 16.12px); }
.sheet .yours s { opacity: .8; }
.sheet .explain { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--amber-soft); font-size: clamp(13.72px, 3.974vw, 16.66px); line-height: 1.5; display: flex; gap: 10px; }
.sheet .explain .i { font-size: clamp(17.7px, 5.128vw, 21.5px); flex: none; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(22px + var(--sab)); transform: translateX(-50%); z-index: 60; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: clamp(13.28px, 3.846vw, 16.12px); box-shadow: var(--shadow-lg); animation: rise-toast .4s var(--spring) both; white-space: nowrap; max-width: calc(100vw - 32px); }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }

/* Result screens */
.result { text-align: center; padding: 30px 22px; }
.result .big { font-size: clamp(56.64px, 16.41vw, 68.8px); line-height: 1; margin-bottom: 12px; }
.result .art { width: 150px; margin: 0 auto 10px; }
.result .art svg { width: 100%; height: auto; }
.score { font-size: clamp(49.56px, 14.359vw, 60.2px); font-weight: 900; letter-spacing: -.04em; line-height: 1; background: linear-gradient(90deg, var(--red), #FF7A45); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gain { display: inline-flex; gap: 10px; margin-top: 14px; }
.ring { width: 150px; height: 150px; margin: 0 auto 8px; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ring .track { stroke: var(--line-2); }
.ring .val { stroke: var(--green); stroke-dasharray: 402; stroke-dashoffset: 402; transition: stroke-dashoffset 1.2s var(--ease); }
.ring .val.warn { stroke: var(--amber); }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(26.55px, 7.692vw, 32.25px); font-weight: 900; letter-spacing: -.03em; }
.mascot { width: 130px; margin: 0 auto; animation: bob 2.2s ease-in-out infinite; }
.mascot svg { width: 100%; height: auto; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* Confetti canvas */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

/* Kid mode */
.kid { --red: #E3342F; }
.kid .btn.primary { font-size: clamp(16.82px, 4.872vw, 20.43px); height: 58px; }
.kid .title { font-size: clamp(28.32px, 8.205vw, 34.4px); }

/* Utilities */
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.spacer { flex: 1; }
.avatar-mini { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: clamp(15.04px, 4.359vw, 18.27px); color: #fff; flex: none; }
.avatar-mini.darius { background: linear-gradient(160deg, #17345E, var(--navy)); }
.avatar-mini.liam { background: linear-gradient(160deg, #FF6A5E, var(--red-2)); }
.fade-in { animation: fade .5s both; }
@media (max-width: 380px) { .title { font-size: clamp(25.66px, 7.436vw, 31.17px); } .time-opt .n { font-size: clamp(23.01px, 6.667vw, 27.95px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Einstellungen */
.sheet.prefs { border-top: 6px solid var(--navy); }
.pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0 10px; }
.pref .b { font-size: clamp(15.04px, 4.359vw, 18.27px); font-weight: 700; letter-spacing: -.01em; }
.pref .small { margin-top: 2px; }
.seg { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.seg button { flex: 1; height: 42px; border-radius: 11px; font-size: clamp(13.28px, 3.846vw, 16.12px); font-weight: 650; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.seg button.on { background: var(--card-solid); color: var(--ink); box-shadow: var(--shadow); }
.sheet.prefs .btn.ghost { text-decoration: none; }

/* Fehler melden: der Knopf in der Lektionsleiste und das Fenster dazu.
   Der Knopf ist kleiner als das Kreuz - er soll erreichbar sein, aber dem
   Fortschrittsbalken auf schmalen Geraeten nicht den Platz nehmen. */
.topbar .melden { width: 36px; height: 36px; font-size: clamp(14px, 4vw, 17px); }
@media (max-width: 380px) { .topbar .melden { width: 32px; height: 32px; } }
.melde-stelle { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-2);
  background: var(--bg-2); border: 1px solid var(--line); }
.melde-stelle .ms-satz { font-size: clamp(16.82px, 4.872vw, 20.43px); font-weight: 700;
  letter-spacing: -.01em; margin: 4px 0 2px; }
textarea.input.feld { height: auto; min-height: 104px; padding: 12px var(--s-4);
  line-height: 1.45; resize: vertical; font-family: inherit; margin-top: 12px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

/* Belohnungen: Punkte-Animation, Serie, Abzeichen */
.xp-pop { position: fixed; top: calc(58px + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 60; pointer-events: none;
  background: var(--green); color: #fff; font-weight: 800; font-size: clamp(13.28px, 3.846vw, 16.12px); letter-spacing: -.01em;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(52,199,89,.45);
  animation: xpUp 1.5s var(--ease) both; white-space: nowrap; }
.xp-pop.combo { top: calc(102px + var(--sat)); background: linear-gradient(135deg, #FF9F0A, var(--red)); box-shadow: 0 8px 24px rgba(214,35,31,.45); font-size: clamp(14.16px, 4.103vw, 17.2px); }
@keyframes xpUp {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.8); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  30% { transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(.95); }
}
.combo-chip { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; font-size: clamp(11.51px, 3.333vw, 13.97px); font-weight: 800;
  background: linear-gradient(135deg, #FF9F0A, var(--red)); color: #fff; vertical-align: middle;
  animation: comboIn .4s var(--spring) both; }
@keyframes comboIn { from { transform: scale(.5) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

.badge-pop { position: fixed; left: 50%; top: calc(16px + var(--sat)); transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 14px; width: min(420px, calc(100vw - 32px));
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 22px; padding: 14px 18px;
  box-shadow: var(--shadow-lg); animation: badgeIn .5s var(--spring) both; }
.badge-pop.out { animation: badgeOut .4s var(--ease) both; }
.badge-pop .bi { width: 54px; height: 54px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: clamp(26.55px, 7.692vw, 32.25px);
  background: linear-gradient(150deg, #FFD86B, #F5A623); box-shadow: 0 6px 18px rgba(245,166,35,.45); animation: badgeSpin .7s var(--spring) both; }
.badge-pop .bl { font-size: clamp(9.73px, 2.821vw, 11.82px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.badge-pop .bn { font-size: clamp(15.93px, 4.615vw, 19.35px); font-weight: 800; letter-spacing: -.02em; margin-top: 1px; }
.badge-pop .bd { font-size: clamp(11.51px, 3.333vw, 13.97px); color: var(--muted); margin-top: 2px; line-height: 1.3; }
@keyframes badgeIn { from { opacity: 0; transform: translate(-50%, -28px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes badgeOut { to { opacity: 0; transform: translate(-50%, -20px) scale(.96); } }
@keyframes badgeSpin { from { transform: rotate(-25deg) scale(.4); } to { transform: none; } }

.badge-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; margin-top: 4px; }
.bg-item { text-align: center; padding: 10px 4px 8px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); opacity: .45; filter: grayscale(1); }
.bg-item.got { opacity: 1; filter: none; background: var(--card-solid); box-shadow: var(--shadow); border-color: var(--line-2); }
.bg-item span { display: block; font-size: clamp(21.24px, 6.154vw, 25.8px); line-height: 1.1; }
.bg-item small { display: block; font-size: clamp(8.85px, 2.564vw, 10.75px); font-weight: 650; color: var(--muted); margin-top: 4px; line-height: 1.2; }
.bg-item.got small { color: var(--ink-2); }

.toggle { width: 52px; height: 32px; flex: none; border-radius: 999px; background: var(--line-2); position: relative; transition: background .25s var(--ease); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .25s var(--spring); }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(20px); }

/* Profil-Farben (frei vergebbar fuer neue Familienmitglieder) */
.avatar.acc-navy,   .avatar-mini.acc-navy   { background: linear-gradient(160deg, #17345E, #0B1F3A); }
.avatar.acc-red,    .avatar-mini.acc-red    { background: linear-gradient(160deg, #FF6A5E, #B0140F); }
.avatar.acc-violet, .avatar-mini.acc-violet { background: linear-gradient(160deg, #A06BFF, #5B2BB5); }
.avatar.acc-teal,   .avatar-mini.acc-teal   { background: linear-gradient(160deg, #3ECFCF, #0E7C80); }
.avatar.acc-orange, .avatar-mini.acc-orange { background: linear-gradient(160deg, #FFB347, #D2691E); }
.avatar.acc-green,  .avatar-mini.acc-green  { background: linear-gradient(160deg, #5BE07E, #1E7A38); }
.avatar.acc-pink,   .avatar-mini.acc-pink   { background: linear-gradient(160deg, #FF87C3, #C2185B); }
.avatar.acc-slate,  .avatar-mini.acc-slate  { background: linear-gradient(160deg, #8E98A8, #47505E); }

/* Karte zum Hinzufuegen eines Familienmitglieds */
.profile.add { border-style: dashed; border-width: 1.5px; border-color: var(--line-2); background: transparent; box-shadow: none; }
.profile.add .name { font-size: clamp(15.04px, 4.359vw, 18.27px); }
/* Ein Kapitel kann aus zwei Gruenden zu sein. „Noch nicht dran" bleibt
   grau und zurueckhaltend; „im Kauf enthalten" ist keine Strafe, sondern
   ein Angebot und darf deshalb sichtbar sein, ohne zu schreien. */
.ch.locked.kauf { opacity: .82; }
.ch.locked.kauf .st { opacity: 1; }
.ch.locked.kauf .cs { color: var(--red); font-weight: 600; }

/* Die Kennzeichen der Lernziele sind seit dem 18.09.2026 eigene
   Strichzeichnungen statt System-Emoji (art-zeichen.js). Sie erben die
   Farbe der Kachel und richten sich nach deren Groesse. */
.avatar svg, .avatar-mini svg, .emo-opt svg { display: block; width: 56%; height: 56%; margin: 0 auto; }
.emo-opt svg { width: 26px; height: 26px; }
/* Die Auswahl zeigt der Rahmen an, nicht die Strichfarbe - sonst
   muesste sie in jedem Farbschema noch einmal gesetzt werden. */
.emo-opt { display: grid; place-items: center; color: var(--ink); }

.profile .avatar.plus { background: var(--bg-2); color: var(--muted); font-size: clamp(24.78px, 7.179vw, 30.1px); font-weight: 300; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.profile.add:active { background: var(--card); }

/* Emoji-Auswahl beim Anlegen */
.emo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; }
.emo-opt { height: 48px; border-radius: 14px; font-size: clamp(21.24px, 6.154vw, 25.8px); background: var(--bg-2); border: 1.5px solid transparent; transition: transform .15s var(--spring), border-color .2s, background .2s; }
.emo-opt:active { transform: scale(.9); }
.emo-opt.on { border-color: var(--red); background: var(--red-soft); }
.input { width: 100%; height: 52px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--card-solid); padding: 0 16px; font-size: clamp(15.04px, 4.359vw, 18.27px); color: var(--ink); outline: none; margin-top: 2px; }
.input:focus { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }

/* Fortsetzen-Karte */
.resume { display: flex; align-items: center; gap: 14px; margin-top: 16px; border-left: 4px solid var(--green); }
.resume .rem { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: clamp(21.24px, 6.154vw, 25.8px); background: var(--green-soft); }
.resume .eyebrow { color: var(--green); }
.resume .go { font-size: clamp(17.7px, 5.128vw, 21.5px); color: var(--green); }

/* Sync-Punkt: zeigt, ob der Stand beim PC angekommen ist */
.sync { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: 6px; vertical-align: middle; opacity: .5; }
.sync.off { background: var(--amber); opacity: 1; animation: syncPulse 1.6s ease-in-out infinite; }
@keyframes syncPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Uebungen fuellen die Hoehe, statt oben zu kleben */
.ex-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 0 4px; }
.ex-body > .q { margin-bottom: 4px; }
.ex-body .opts { margin-top: 8px; }

/* Textlink-Optik fuer den Zeitwechsel in der Tagesziel-Karte */
.linkish { font: inherit; color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--line-2);
  padding: 2px 0; background: none; }
.linkish:active { color: var(--ink); }

@keyframes rise-toast { from { opacity: 0; transform: translate(-50%, 16px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* =====================================================================
   Überarbeitung nach Design-Review
   Rot bleibt der Marke vorbehalten. Fortschritt wird Navy, Auswahl Blau,
   Fehler bekommen ein eigenes, dunkleres Rot.
   ===================================================================== */

/* --- Patch 1: Rot entlasten, Fehlerfarbe abtrennen --- */
.eyebrow { color: var(--navy); opacity: .75; }
.resume .eyebrow { color: var(--green-ink); opacity: 1; }
.bar > i { background: linear-gradient(90deg, var(--navy-2), var(--navy)); }
.bar.green > i { background: linear-gradient(90deg, #5BE07E, var(--green)); }
.dots i.on { background: var(--navy); }
.q .blank { border-bottom-color: var(--navy-2); color: var(--navy-2); }
.q .blank.filled { color: var(--ink); border-color: var(--green); }
.emo-opt.on { border-color: var(--blue); background: var(--blue-soft); }
.answer-row .wchip { background: var(--bg-2); color: var(--ink); border-color: transparent; }
.opt.bad { border-color: var(--danger); background: var(--danger-soft); }
.opt.bad .k { background: var(--danger); color: #fff; }
.wchip.bad { border-color: var(--danger); background: var(--danger-soft); }
.sheet.bad { border-top-color: var(--danger); }
.sheet .yours { background: var(--danger-soft); color: var(--danger-ink); }
.feedback.bad { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--danger); }
.time-opt .tag { color: var(--red-ink); }
.time-opt.hot { border-color: var(--red-ink); }

/* --- Patch 5: Fokus sichtbar machen, Hover nur mit echtem Zeiger --- */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: inherit;
}
.icon-btn:focus-visible, .listen-btn:focus-visible, .toggle:focus-visible { outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.06); }
  .btn.ghost:hover { filter: none; background: var(--bg-2); border-color: var(--line-3); }
  .card.tap:hover, .time-opt:hover { box-shadow: var(--e4); transform: translateY(-1px); }
  .opt:hover { border-color: var(--line-3); background: var(--bg-2); }
  .wchip:hover { border-color: var(--line-3); }
  .icon-btn:hover { background: var(--bg-2); }
  .stop.tap:hover, .ch:not(.locked):hover { background: var(--bg-2); }
  .seg button:not(.on):hover { color: var(--ink); }
  .bg-item.got:hover { transform: scale(1.04); }
  .emo-opt:hover { border-color: var(--line-3); }
  .btn[disabled]:hover, .ch.locked:hover, .stop.locked:hover { filter: none; background: none; }
}

/* --- Patch 6: Scrim unter der Aktionsleiste, damit Text nicht durchscrollt --- */
.actions { position: sticky; bottom: calc(var(--s-2) + var(--sab)); margin-top: auto; padding: var(--s-6) 0 var(--s-2); z-index: 5; }
.actions::before {
  content: ""; position: absolute; z-index: -1;
  left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
  top: 0; bottom: calc((var(--s-2) + var(--sab)) * -1);
  background: linear-gradient(180deg, rgba(245,245,247,0) 0%, var(--bg) 42%, var(--bg) 100%);
  pointer-events: none;
}

.actions:has(.feedback)::before { background: none; }

/* --- Patch 7: Eingabefeld nur noch einmal definiert --- */
.input {
  width: 100%; height: 52px;
  border-radius: var(--r-4);
  border: var(--bw-2) solid var(--line-2);
  background: var(--card-solid);
  padding: 0 var(--s-4);
  font-size: var(--fs-17); color: var(--ink);
  outline: none;
  box-shadow: var(--e2);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.input:focus { border-color: var(--blue); box-shadow: var(--e2), 0 0 0 4px var(--blue-soft); }
.input.ok { border-color: var(--green); background: var(--green-soft); }
.input.bad { border-color: var(--danger); background: var(--danger-soft); }
.input::placeholder { color: var(--muted-2); }

/* --- Patch 9: verschachtelte Radien einheitlich auf 10 px --- */
.card .bar, .learn .more, .sheet .correct, .sheet .yours, .sheet .explain,
.level-body .ch, .seg button, .route .stop { border-radius: var(--r-2); }

/* --- Gewichte: 650/750 existieren in keiner Systemschrift --- */
.ch .ct, .stop .t, .b, .seg button { font-weight: var(--fw-med); }

/* --- Zahlen laufen nicht mehr, wenn sie sich ändern --- */
.xp-pill, .stat .v, .time-opt .n, .ring .num, .chip, .stop .m, .progress-label { font-variant-numeric: tabular-nums; }

/* --- Barrierefreiheit --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kapitel und Level sind jetzt echte Buttons und brauchen Button-Resets */
.ch, .level-head { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; }
.ch { display: flex; align-items: center; gap: 12px; }
.ch[aria-disabled="true"] { cursor: default; }
.lv-zeile { display: flex; align-items: center; gap: 12px; }

/* Kontrast: farbige Flächen mit weißem Text werden dunkler,
   farbiger Text auf getönter Fläche nutzt die Ink-Variante */
.xp-pill { color: var(--amber-ink); background: var(--amber-soft); }
.chip.red { background: var(--red-soft); color: var(--red-ink); }
.chip.amber { background: var(--amber-soft); color: var(--amber-ink); }
.chip.green { background: var(--green-soft); color: var(--green-ink); }
.chip.blue { background: var(--blue-soft); color: var(--blue-ink); }
.btn.green { background: linear-gradient(180deg, #1E9C4A, #14803A); box-shadow: var(--e3-green); }
.feedback.ok .btn { background: linear-gradient(180deg, #1E9C4A, #14803A); }
.xp-pop { background: #14803A; box-shadow: 0 8px 24px rgba(20,128,58,.4); }
.xp-pop.combo { background: linear-gradient(135deg, #C96A00, #B0140F); }
.stop.done .dot { background: #14803A; border-color: #14803A; }
.lv-zeile .badge.done { background: #14803A; }
.toggle.on { background: #14803A; }
.badge-pop .bi { background: linear-gradient(150deg, #E8A33C, #C97A12); }
.badge-pop .bl { color: var(--amber-ink); }

/* Touch-Ziele auf 48 px */
.toggle { width: 60px; height: 34px; }
.toggle::after { width: 28px; height: 28px; }
.toggle.on::after { transform: translateX(26px); }
.seg button { height: 48px; }
.btn.sm { height: 44px; }
.emo-opt { height: 52px; }
.wchip { min-width: 48px; min-height: 44px; }

/* Konfetti-Fläche nie interaktiv */
#confetti { pointer-events: none; }

/* Profilkarte: eine ruhige Metazeile statt umbrechender Chips */
.pmeta { margin-top: 6px; font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; line-height: var(--lh-relaxed); }

/* =====================================================================
   Dunkelmodus – umschaltbar
   Ohne eigene Wahl gilt die Systemvorgabe, mit Wahl gilt die Wahl.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { /* Tinte */
    --ink: #F2F2F5; --ink-2: #C9C9D1; --muted: #9B9BA6; --muted-2: #6F6F7A;

    /* Flächen: gestufte Helligkeit ersetzt die in Dark wirkungslosen Schatten.
       card-solid #23232B auf bg #0B0B0E = 1,64:1 (vorher 1,13:1) */
    --bg: #0B0B0E; --bg-2: #17171D;
    --card: rgba(32, 32, 40, .80); --card-solid: #23232B;
    --card-hi: #2C2C36;            /* NEU: Ebene über der Karte (Sheet, Popover) */

    --line:   rgba(255,255,255, .09);
    --line-2: rgba(255,255,255, .16);
    --line-3: rgba(255,255,255, .26);
    --hairline: inset 0 1px 0 rgba(255,255,255, .07);

    /* Akzente aufhellen – das ist der eigentliche Dark-Mode-Fehler im Ist-Zustand */
    --red-ink:    #FF5A52;   /* war #D6231F → 3,79:1;  jetzt 6,3:1 auf --bg */
    --danger-ink: #FF6B63;
    --green-ink:  #4FD97A;   /* war #1F8F3D → 2,94:1;  jetzt 8,1:1 */
    --amber-ink:  #FFB340;   /* war #B36A00 → 2,92:1;  jetzt 9,4:1 */
    --blue-ink:   #4DA6FF;
    --red-soft:    rgba(255, 90, 82, .16);
    --danger-soft: rgba(255,107, 99, .16);
    --green-soft:  rgba(79, 217, 122, .15);
    --amber-soft:  rgba(255, 179, 64, .15);
    --blue-soft:   rgba(77, 166, 255, .15);

    /* Schatten: flacher und härter, plus Lichtsaum als eigentliche Abgrenzung */
    --e1: 0 1px 2px rgba(0,0,0,.5);
    --e2: 0 1px 3px rgba(0,0,0,.5),  0 3px 8px rgba(0,0,0,.35);
    --e3: 0 2px 4px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.40);
    --e4: 0 3px 8px rgba(0,0,0,.6),  0 16px 34px rgba(0,0,0,.50);
    --e5: 0 6px 14px rgba(0,0,0,.65),0 28px 56px rgba(0,0,0,.60);

    color-scheme: dark; }
  :root:not([data-theme="light"]) #bg { background: radial-gradient(120% 80% at 50% -10%, #1B1B22 0%, var(--bg) 60%); }
  :root:not([data-theme="light"]) .bg-schein.a { opacity: .26; }
  :root:not([data-theme="light"]) .bg-schein.b { opacity: .22; }
  :root:not([data-theme="light"]) .bg-schein.c { opacity: .12; }
  :root:not([data-theme="light"]) .bg-ring { border-color: #8FCDEC; opacity: .10; }
  :root:not([data-theme="light"]) .feedback.ok { background: #12301B; color: #9BE8B0; }
  :root:not([data-theme="light"]) .feedback.bad { background: #3A1512; color: #FFB4AE; }
  :root:not([data-theme="light"]) .actions::before { background: linear-gradient(180deg, rgba(11,11,14,0) 0%, var(--bg) 42%, var(--bg) 100%); }
}
:root[data-theme="dark"] { /* Tinte */
    --ink: #F2F2F5; --ink-2: #C9C9D1; --muted: #9B9BA6; --muted-2: #6F6F7A;

    /* Flächen: gestufte Helligkeit ersetzt die in Dark wirkungslosen Schatten.
       card-solid #23232B auf bg #0B0B0E = 1,64:1 (vorher 1,13:1) */
    --bg: #0B0B0E; --bg-2: #17171D;
    --card: rgba(32, 32, 40, .80); --card-solid: #23232B;
    --card-hi: #2C2C36;            /* NEU: Ebene über der Karte (Sheet, Popover) */

    --line:   rgba(255,255,255, .09);
    --line-2: rgba(255,255,255, .16);
    --line-3: rgba(255,255,255, .26);
    --hairline: inset 0 1px 0 rgba(255,255,255, .07);

    /* Akzente aufhellen – das ist der eigentliche Dark-Mode-Fehler im Ist-Zustand */
    --red-ink:    #FF5A52;   /* war #D6231F → 3,79:1;  jetzt 6,3:1 auf --bg */
    --danger-ink: #FF6B63;
    --green-ink:  #4FD97A;   /* war #1F8F3D → 2,94:1;  jetzt 8,1:1 */
    --amber-ink:  #FFB340;   /* war #B36A00 → 2,92:1;  jetzt 9,4:1 */
    --blue-ink:   #4DA6FF;
    --red-soft:    rgba(255, 90, 82, .16);
    --danger-soft: rgba(255,107, 99, .16);
    --green-soft:  rgba(79, 217, 122, .15);
    --amber-soft:  rgba(255, 179, 64, .15);
    --blue-soft:   rgba(77, 166, 255, .15);

    /* Schatten: flacher und härter, plus Lichtsaum als eigentliche Abgrenzung */
    --e1: 0 1px 2px rgba(0,0,0,.5);
    --e2: 0 1px 3px rgba(0,0,0,.5),  0 3px 8px rgba(0,0,0,.35);
    --e3: 0 2px 4px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.40);
    --e4: 0 3px 8px rgba(0,0,0,.6),  0 16px 34px rgba(0,0,0,.50);
    --e5: 0 6px 14px rgba(0,0,0,.65),0 28px 56px rgba(0,0,0,.60);

    color-scheme: dark; }
:root[data-theme="dark"] #bg { background: radial-gradient(120% 80% at 50% -10%, #1B1B22 0%, var(--bg) 60%); }
:root[data-theme="dark"] .bg-schein.a { opacity: .26; }
:root[data-theme="dark"] .bg-schein.b { opacity: .22; }
:root[data-theme="dark"] .bg-schein.c { opacity: .12; }
:root[data-theme="dark"] .bg-ring { border-color: #8FCDEC; opacity: .10; }
:root[data-theme="dark"] .feedback.ok { background: #12301B; color: #9BE8B0; }
:root[data-theme="dark"] .feedback.bad { background: #3A1512; color: #FFB4AE; }
:root[data-theme="dark"] .actions::before { background: linear-gradient(180deg, rgba(11,11,14,0) 0%, var(--bg) 42%, var(--bg) 100%); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* =====================================================================
   Handy zuerst: Die App skaliert mit der Displaybreite
   ===================================================================== */
.app {
  /* Seitenrand waechst leicht mit, Spalte bleibt handybreit */
  padding-left: clamp(14px, 4.3vw, 22px);
  padding-right: clamp(14px, 4.3vw, 22px);
  max-width: 460px;
}
/* Auf dem Desktop bleibt es bewusst eine Handy-Spalte, mittig gestellt */
@media (min-width: 700px) {
  .app { max-width: 440px; }
}
/* Sehr schmale Geraete: Raster und Kacheln zusammenruecken */
@media (max-width: 340px) {
  .time-grid { gap: 8px; }
  .time-opt { padding: 14px 12px; }
  .stats { gap: 8px; }
  .emo-row { grid-template-columns: repeat(5, 1fr); }
}
/* Grosse Handys im Querformat oder kleine Tablets: nicht breiter werden,
   sondern den Inhalt vertikal atmen lassen */
@media (min-height: 900px) {
  .learn { min-height: 380px; }
}

/* Familienansicht */
.fam { margin-top: 14px; }
.fam .live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-11); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green-ink); }
.fam .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.fam-list { display: flex; flex-direction: column; gap: 2px; }
.fam-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.fam-row:first-child { border-top: 0; }
.fam-row.me { }
.fam-row .fn { font-size: var(--fs-15); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.fam-row .fn .you { font-size: var(--fs-11); font-weight: 700; color: var(--muted); background: var(--bg-2);
  padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: .05em; }
.fam-row .fs { font-size: var(--fs-13); color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.fam-row .fstat { font-size: var(--fs-12); font-weight: 700; color: var(--muted-2); white-space: nowrap; text-align: right; }
.fam-row .fstat.run { color: var(--amber-ink); }
.fam-row .fstat.done { color: var(--green-ink); }

/* Auswahl mit drei Möglichkeiten untereinander */
.seg.col { flex-direction: column; gap: 4px; }
.seg.col button { width: 100%; }

/* Segment-Auswahl: der aktive Knopf muss sich auch im Dunkeln klar abheben */
.seg { background: var(--bg-2); }
.seg button.on { background: var(--card-solid); color: var(--ink); box-shadow: var(--e2); }
:root[data-theme="dark"] .seg button.on,
:root:not([data-theme="light"]) .seg button.on {
  background: #34343F; color: #fff; box-shadow: none; outline: 1px solid rgba(255,255,255,.14);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="light"] .seg button.on { background: var(--card-solid); color: var(--ink); outline: 0; box-shadow: var(--e2); }
}
:root[data-theme="light"] .seg button.on { background: #fff; color: var(--ink); outline: 0; box-shadow: var(--e2); }

/* Meldung im PIN-Dialog */
.msg-line { min-height: 20px; margin-top: 10px; font-size: var(--fs-13); font-weight: 700; color: var(--danger-ink); text-align: center; }

/* Nachsprechen: Schritt fuer Schritt statt zwei unbeschrifteter Knoepfe */
.ex-hint { text-align: center; font-size: var(--fs-15); font-weight: var(--fw-med); color: var(--navy);
  background: var(--blue-soft); border-radius: var(--r-3); padding: 10px 14px; margin-bottom: 14px; line-height: 1.4; }
:root[data-theme="dark"] .ex-hint, :root:not([data-theme="light"]) .ex-hint { color: var(--blue-ink); }
.speak-card { min-height: 0; padding: 22px; text-align: center; }
.speak-steps { display: flex; justify-content: center; gap: 34px; margin-top: 22px; }
.sstep { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sstep span { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--muted); }
.sstep .listen-btn { margin: 0; width: 88px; height: 88px; font-size: 34px; }
.say-count { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.say-count i { width: 13px; height: 13px; border-radius: 50%; background: var(--line-2);
  transition: background .25s var(--ease), transform .25s var(--spring); }
.say-count i.on { background: var(--green); transform: scale(1.15); }
.say-count.voll i { background: #14803A; }
.heard { text-align: center; font-size: var(--fs-13); color: var(--muted); margin-top: 12px; min-height: 20px; line-height: 1.45; }

/* Grosse Kinder-Belohnung */
.reward { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: rgba(7, 14, 30, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: rewardIn .45s var(--spring) both; }
@keyframes rewardIn { from { opacity: 0; } to { opacity: 1; } }
.reward-box { width: 100%; max-width: 360px; text-align: center; background: var(--card-solid);
  border-radius: 30px; padding: 28px 24px 24px; box-shadow: var(--e5);
  animation: rewardPop .55s var(--spring) both; }
@keyframes rewardPop { from { transform: scale(.82) translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.rw-emoji { font-size: 54px; line-height: 1; }
.rw-sub { margin-top: 10px; font-size: var(--fs-12); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-ink); }
.rw-title { font-size: var(--fs-24); font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.rw-note { font-size: var(--fs-15); color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* ---------- Spiele ---------- */

/* Einsortieren */
.buckets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 16px; }
.buckets:has(.bucket:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.bucket { background: var(--bg-2); border: var(--bw-2) dashed var(--line-2); border-radius: var(--r-4);
  padding: 10px; min-height: 108px; transition: border-color .2s, background .2s; }
.bucket:active { border-color: var(--blue); background: var(--blue-soft); }
.bk-title { font-size: var(--fs-12); font-weight: 800; letter-spacing: .03em; color: var(--muted);
  text-align: center; margin-bottom: 8px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.buckets:has(.bucket:nth-child(3)) .bk-title { font-size: var(--fs-11, 11px); letter-spacing: 0; }
.buckets:has(.bucket:nth-child(3)) .bucket { padding: 8px 6px; }
.buckets:has(.bucket:nth-child(3)) .bk-body .wchip { font-size: var(--fs-12); padding: 7px 4px; }
.bk-body { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bk-body .wchip { width: 100%; font-size: var(--fs-13); padding: 8px 8px; }
.sort-chip.sel { background: var(--blue); color: #fff; border-color: transparent; }
#sortbank { justify-content: center; }

/* Memory */
.memo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.memo-card { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-3); border: var(--bw-2) solid var(--line);
  background: var(--card-solid); box-shadow: var(--e2); overflow: hidden; padding: 4px;
  transition: transform .18s var(--spring), border-color .2s, opacity .3s; }
.memo-card:active { transform: scale(.94); }
.memo-card .mc-back { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-24);
  font-weight: 800; color: #fff; background: linear-gradient(160deg, #17345E, var(--navy)); transition: opacity .2s; }
.memo-card .mc-face { display: grid; place-items: center; width: 100%; height: 100%; font-size: var(--fs-13);
  font-weight: var(--fw-med); line-height: 1.2; text-align: center; word-break: break-word; hyphens: auto; }
.memo-card.auf .mc-back { opacity: 0; }
.memo-card.auf { border-color: var(--blue); }
/* Gefundene Paare bleiben gut lesbar stehen, das ist der Lernwert */
.memo-card.weg { border-color: var(--green); background: var(--green-soft); pointer-events: none; }
.memo-card.weg .mc-back { opacity: 0; }
.memo-card.weg .mc-face { color: var(--green-ink); font-weight: var(--fw-bold); }
@media (max-width: 360px) { .memo-card .mc-face { font-size: var(--fs-12); } }

/* Buchstabensalat */
.scramble-hint { text-align: center; color: var(--muted); font-size: var(--fs-15); margin-bottom: 10px; }
.wchip.letter { min-width: 46px; text-transform: none; font-weight: 800; font-size: var(--fs-20); padding: 10px 12px; }
#ans .wchip.letter { background: var(--navy); color: #fff; }

/* ---------- Tiefe und Fotos ----------
   Bewusst ruhig gehalten: Tiefe im Stillstand, keine Bewegung beim Scrollen.
   Alles hier respektiert die Systemeinstellung fuer reduzierte Bewegung. */

/* Level-Karten bekommen mehr Volumen, die offene Karte hebt sich ab. */
.card.level { box-shadow: var(--e2); transition: box-shadow .3s var(--ease), transform .3s var(--spring); }
.card.level.open { box-shadow: var(--e4); transform: translateY(-2px); }

/* Ein feiner Lichtverlauf ueber Kaertchen und Antwortknoepfen. Der Schein
   sitzt oben und laesst die Flaeche leicht gewoelbt wirken. */
.wchip, .opt, .memo-card, .stat, .bucket { position: relative; }
.wchip::before, .opt::before, .memo-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 58%); opacity: .5; }
.memo-card .mc-back, .memo-card .mc-face { position: relative; z-index: 1; }

/* Die Karte kippt unter dem Finger leicht weg, statt nur zu schrumpfen. */
.wchip:active { transform: scale(.95) perspective(420px) rotateX(7deg); }
.opt:active { transform: scale(.985) perspective(600px) rotateX(3deg); }
.memo-card:active { transform: scale(.94) perspective(500px) rotateX(6deg); }
@media (prefers-reduced-motion: reduce) {
  .wchip:active, .opt:active, .memo-card:active { transform: none; }
  .card.level.open { transform: none; }
}

/* Foto im Dunkelmodus: Verlauf auf den dunklen Kartengrund ziehen und die
   Bilder leicht zuruecknehmen, sonst leuchten sie den Bildschirm aus. */
:root:not([data-theme="light"]) .lv-foto::after,
:root[data-theme="dark"] .lv-foto::after {
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 35%, rgba(10,16,26,.55)); }
:root:not([data-theme="light"]) .lv-foto img,
:root[data-theme="dark"] .lv-foto img { filter: brightness(.82) saturate(.94); }
:root:not([data-theme="light"]) .level.fern .lv-foto img,
:root[data-theme="dark"] .level.fern .lv-foto img { filter: grayscale(.62) brightness(.62); }
:root:not([data-theme="light"]) .wchip::before,
:root:not([data-theme="light"]) .opt::before,
:root:not([data-theme="light"]) .memo-card::before,
:root[data-theme="dark"] .wchip::before,
:root[data-theme="dark"] .opt::before,
:root[data-theme="dark"] .memo-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 58%); opacity: 1; }

/* Bildnachweis im Zahnrad-Menue */
.nachweis { display: grid; gap: 10px; margin-top: 4px; }
.nachweis-zeile { display: flex; gap: 10px; align-items: center; }
.nachweis-zeile img { width: 62px; height: 35px; object-fit: cover; border-radius: 8px; flex: none; }
.nachweis-zeile .nt { font-size: var(--fs-13); line-height: 1.3; }
.nachweis-zeile .nq { font-size: var(--fs-11); color: var(--muted); }
.nachweis-zeile a { color: var(--blue); }

/* ---------- Gestufte Hinweise ----------
   Der Knopf deckt nacheinander auf: erst der inhaltliche Wink, dann der
   Satzanfang, zuletzt die halbe Loesung. Niemand bleibt haengen. */
.tippzeile { display: grid; gap: 6px; margin: 4px 0 10px; }
.tippzeile .tz { background: var(--amber-soft); color: var(--amber-ink); border-radius: var(--r-3);
  padding: 9px 12px; font-size: var(--fs-13); line-height: 1.35; animation: rise .25s var(--ease) both; }
.tippbtn { flex: none; width: auto; padding: 0 14px; white-space: nowrap; }
.tippbtn[disabled] { opacity: .45; }
.actions .row { display: flex; gap: 10px; align-items: stretch; }

/* Persoenliche Gratulation auf dem Ergebnisbildschirm. Steht ueber der
   Prozentzahl, damit der Name das Erste ist, was man liest. */
.gratulation { margin: 10px 0 0; text-align: center; font-size: var(--fs-20, 20px);
  font-weight: var(--fw-bold, 800); line-height: 1.25; color: var(--green-ink);
  animation: rise .35s var(--ease) both; animation-delay: .15s; }
.result .gratulation + .ring { margin-top: 14px; }
:root:not([data-theme="light"]) .gratulation,
:root[data-theme="dark"] .gratulation { color: var(--green); }

/* Offline-Hinweis. Sitzt unten, damit er die Aufgabe nicht verdeckt, und
   verschwindet von selbst, sobald der PC wieder antwortet. */
.offbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--sab));
  z-index: 60; background: var(--amber-soft); color: var(--amber-ink);
  border: 1px solid rgba(255,159,10,.35); border-radius: var(--r-3);
  padding: 10px 14px; font-size: var(--fs-13); font-weight: var(--fw-med);
  text-align: center; line-height: 1.35; box-shadow: var(--e2);
  animation: rise .3s var(--ease) both; }
@media (min-width: 560px) { .offbar { left: 50%; right: auto; transform: translateX(-50%); max-width: 460px; } }

/* ---------- Auswertung ----------
   Ein Balken je Tag der letzten zwei Wochen. Die Hoehe ist die Zahl der
   Aufgaben, der gruene Anteil davon sind die richtigen. Kein Diagramm mit
   Achsen: auf dem Handy zaehlt der Verlauf, nicht die genaue Zahl. */
.kurve { width: 100%; height: 90px; display: block; margin: 14px 0 6px; overflow: visible; }
.kurve .bal-f { fill: var(--red); opacity: .45; }
.kurve .bal-r { fill: var(--green); }
.kurve-legende { display: flex; gap: 16px; justify-content: center; font-size: var(--fs-12); color: var(--muted); }
.kurve-legende .pkt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.kurve-legende .pkt.r { background: var(--green); }
.kurve-legende .pkt.f { background: var(--red); opacity: .45; }

.stat.tap { border: 1px solid var(--line); cursor: pointer; }
.stat.tap:active { transform: scale(.97); }

.sw-liste { display: grid; gap: 8px; margin-top: 12px; }
.sw-zeile { display: flex; align-items: center; gap: 10px; background: var(--bg-2);
  border-radius: var(--r-3); padding: 9px 12px; }
.sw-zeile .sw-em { font-size: var(--fs-17); flex: none; }
.sw-zeile .sw-t { flex: 1; font-size: var(--fs-13); font-weight: var(--fw-med); line-height: 1.25; }
.sw-zeile .sw-n { flex: none; font-size: var(--fs-12); font-weight: var(--fw-bold);
  color: var(--red); background: var(--red-soft); border-radius: 999px; padding: 2px 9px; }

.tb-titel { flex: 1; text-align: center; font-size: var(--fs-15); font-weight: var(--fw-bold); }

/* ---------- Kachelauswahl ----------
   Zwei Spalten, grosses Symbol links, Name und kurze Erklaerung rechts.
   Die gewaehlte Kachel bekommt Rahmen und Flaeche in Blau, damit die
   Auswahl auch ohne Haken sofort erkennbar ist. */
.kachelraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 6px 0 4px; }
.kachelraster .kachel:nth-child(odd):last-child { grid-column: 1 / -1; }

.kachel { display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--card-solid); border: var(--bw-2) solid var(--line);
  border-radius: var(--r-4); padding: 12px 12px; cursor: pointer;
  box-shadow: var(--e1, none);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .16s var(--spring); }
.kachel:active { transform: scale(.97); }
.kachel .ka-em { font-size: var(--fs-24); line-height: 1; flex: none; }
.kachel .ka-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kachel .ka-n { font-size: var(--fs-15); font-weight: var(--fw-bold); line-height: 1.2; }
.kachel .ka-s { font-size: var(--fs-11); color: var(--muted); line-height: 1.25; }

.kachel.on { border-color: var(--blue); background: var(--blue-soft); }
.kachel.on .ka-n { color: var(--blue); }
.kachel.on .ka-s { color: var(--blue); opacity: .75; }

@media (max-width: 340px) { .kachelraster { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kachel { transition: none; } .kachel:active { transform: none; } }

/* ---------- Vokabelheft ---------- */
.vk { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 12px; box-shadow: var(--shadow); }
.vk-em { font-size: var(--fs-20); flex: none; }
.vk-t { flex: 1; min-width: 0; }
.vk-en { font-size: var(--fs-15); font-weight: var(--fw-bold); line-height: 1.25; }
.vk-de { font-size: var(--fs-13); color: var(--ink); opacity: .8; line-height: 1.25; }
.vk-ch { font-size: var(--fs-11); color: var(--muted); margin-top: 2px; }
.vk-say { flex: none; }

/* ---------- Hoer-Modus ---------- */
.hoer { padding: 30px 22px; }
.hoer-em { font-size: 54px; line-height: 1; margin: 6px 0 10px; }

/* Werkzeugleiste auf der Startseite: Auswertung, Vokabelheft, Hoer-Modus */
.werkzeuge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wz { display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 12px 6px; cursor: pointer; box-shadow: var(--e1);
  font-size: var(--fs-12); font-weight: var(--fw-med); color: var(--ink);
  transition: transform .16s var(--spring), border-color .18s var(--ease); }
.wz:active { transform: scale(.96); border-color: var(--blue); }
.wz .wz-em { font-size: var(--fs-20); line-height: 1; }
@media (prefers-reduced-motion: reduce) { .wz { transition: none; } .wz:active { transform: none; } }

/* Duell-Rangliste: die eigene Zeile hervorheben */
.sw-zeile.ich { background: var(--blue-soft); }
.sw-zeile .sw-n.gruen { color: var(--green-ink); background: var(--green-soft); }
:root:not([data-theme="light"]) .sw-zeile .sw-n.gruen,
:root[data-theme="dark"] .sw-zeile .sw-n.gruen { color: var(--green); }
.werkzeuge { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gratulation.matt { color: var(--muted); }

/* Sprachwahl: zwei grosse Kacheln ganz oben, damit klar ist, dass hier
   zuerst entschieden wird. Danach erst die Unterkategorien. */
.sprachraster .kachel.gross { padding: 16px 14px; }
.sprachraster .kachel .ka-em { font-size: 30px; }
.sprachraster .kachel .ka-n { font-size: var(--fs-17); }
.hinweis-leer { grid-column: 1 / -1; background: var(--bg-2); border: 1px dashed var(--line-2);
  border-radius: var(--r-4); padding: 16px 14px; font-size: var(--fs-13); color: var(--muted);
  line-height: 1.4; text-align: center; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Sprachkuerzel als Plakette. Rendert auf jedem Geraet gleich, anders als
   Flaggen-Emoji, die Windows nur als zwei Buchstaben in einem Kasten zeigt. */
.sprachraster .kachel .ka-em { font-size: var(--fs-15); font-weight: var(--fw-heavy);
  letter-spacing: .04em; background: var(--bg-2); color: var(--muted);
  border-radius: 10px; padding: 7px 9px; min-width: 42px; text-align: center; }
.sprachraster .kachel.on .ka-em { background: var(--blue); color: #fff; }


/* ---------- Rivo ----------
   Das Maskottchen steht ueber der Karte und darf mitatmen. Beim
   Begruessungsschritt gross, bei den Fragen klein, damit die Kacheln
   den Platz bekommen. */
.rivo { width: min(52vw, 210px); margin: 8px auto 0; display: block; }
.rivo.klein { width: min(30vw, 116px); margin-top: 0; }
.rivo svg { width: 100%; height: auto; display: block; }
.willkommen .rivo { animation: rivo-schwebt 4.5s ease-in-out infinite; }
@keyframes rivo-schwebt {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .willkommen .rivo { animation: none; }
}
.willkommen .card { padding-top: 18px; }
.willkommen .kachelraster { margin-top: 12px; }


/* Schwaechere Geraete tun sich mit grossflaechiger Unschaerfe schwer.
   Dort lieber weniger Radius als ein Ruckeln beim Blaettern. */
@media (max-width: 380px) {
  .bg-schein { filter: blur(48px); }
}


/* ---------- Belohnung ----------
   Frueher drehte sich hier eine Muenze. Jetzt jubelt Rivo, und der Text
   nennt die Leistung statt den Betrag. Die Muenzen-Regeln bleiben
   vorerst stehen, falls das Geld irgendwo wieder auftauchen soll. */
.rw-rivo { width: min(58vw, 240px); margin: 6px auto 2px; }
.rw-rivo svg { width: 100%; height: auto; display: block;
  animation: rw-huepft .9s var(--spring) both; }
@keyframes rw-huepft {
  0%   { transform: scale(.55) translateY(22px); opacity: 0; }
  60%  { transform: scale(1.06) translateY(-6px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
.rw-gross { margin-top: 6px; font-size: clamp(22px, 7vw, 30px); font-weight: 800;
  letter-spacing: -.02em; color: var(--red); }
.rw-note { margin-top: 8px; font-size: var(--fs-15); color: var(--muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .rw-rivo svg { animation: none; }
}

/* =====================================================================
   Eine Bildsprache fuer Anmeldung und App
   Die Anmeldemaske gibt den Ton vor: Blau nach Violett fuer den
   Fortschritt, Rot fuer die Haupthandlung. Dieser Block zieht die App
   nach; er steht bewusst am Ende, damit er die aelteren Regeln
   ueberschreibt und man auf einen Blick sieht, was dazugehoert.
   ===================================================================== */
:root {
  --verlauf:      linear-gradient(135deg, #5B8CFF 0%, #9B6CF0 100%);
  --verlauf-quer: linear-gradient(90deg, #5B8CFF 0%, #9B6CF0 100%);
  --navy-ink:     #17345E;   /* Augenmarken, Kleinschrift auf hell */
  --violett:      #7A3DD6;
  --violett-ink:  #6B2FC4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --navy-ink: #9FC2F0; --violett-ink: #B99BFF; }
}
:root[data-theme="dark"] { --navy-ink: #9FC2F0; --violett-ink: #B99BFF; }

/* --- 1) Die Augenmarke war im dunklen Bild unsichtbar --- */
.eyebrow { color: var(--navy-ink); opacity: .9; }
.resume .eyebrow { color: var(--green-ink); opacity: 1; }

/* --- 2) Fortschritt traegt den Verlauf der Anmeldemaske --- */
.bar > i { background: var(--verlauf-quer); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.bar.green > i { background: linear-gradient(90deg, #5BE07E, var(--green)); }
.dots i.on { background: #7A6BEA; }

/* --- 3) Kursfarben: der Zweck traegt die Farbe, nicht die Sprache --- */
.kachel .ka-em[data-farbe] {
  width: 40px; height: 40px; flex: none; border-radius: 13px;
  display: grid; place-items: center; font-size: var(--fs-20);
  background: var(--kf-flaeche); box-shadow: inset 0 0 0 1px var(--kf-kante);
}
.ka-em[data-farbe="schule"]    { --kf-flaeche: rgba(245,166, 35,.18); --kf-kante: rgba(245,166, 35,.34); }
.ka-em[data-farbe="anfang"]    { --kf-flaeche: rgba( 52,199, 89,.16); --kf-kante: rgba( 52,199, 89,.32); }
.ka-em[data-farbe="arbeit"]    { --kf-flaeche: rgba( 46,139,224,.18); --kf-kante: rgba( 46,139,224,.34); }
.ka-em[data-farbe="reise"]     { --kf-flaeche: rgba(  0,179,164,.18); --kf-kante: rgba(  0,179,164,.34); }
.ka-em[data-farbe="bewerbung"] { --kf-flaeche: rgba(122, 61,214,.18); --kf-kante: rgba(122, 61,214,.34); }
.ka-em[data-farbe="pruefung"]  { --kf-flaeche: rgba(229, 48, 43,.16); --kf-kante: rgba(229, 48, 43,.32); }
.ka-em[data-farbe="technik"]   { --kf-flaeche: rgba( 91,108,255,.18); --kf-kante: rgba( 91,108,255,.34); }
.ka-em[data-farbe="welt"]      { --kf-flaeche: rgba(  0,168,132,.18); --kf-kante: rgba(  0,168,132,.34); }
.ka-em[data-farbe="fest"]      { --kf-flaeche: rgba(224, 85,155,.18); --kf-kante: rgba(224, 85,155,.34); }

/* Die Auswahl bleibt blau - ein Zeichen fuer "gewaehlt", nicht sieben.
   Nur der Kontrast stimmte im dunklen Bild nicht. */
.kachel.on .ka-n { color: var(--blue-ink); }
.kachel.on .ka-s { color: var(--blue-ink); opacity: .8; }
.kachel.on .ka-em[data-farbe] { box-shadow: inset 0 0 0 1px var(--kf-kante), 0 0 0 2px rgba(255,255,255,.35); }

/* --- 4) Kindermodus: waermer und runder, nicht nur groesser --- */
.kid .card, .kid .stat, .kid .kachel { border-radius: 24px; }
.kid .ka-em[data-farbe] { width: 46px; height: 46px; border-radius: 16px; }
.kid .bg-schein.c { opacity: .14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kid .bg-schein.c { opacity: .20; }
}
:root[data-theme="dark"] .kid .bg-schein.c { opacity: .20; }

/* ---------- Freies Schreiben und Nachsprechen ----------
   Zwei Aufgabentypen, in denen der Lernende selbst produziert. Beide
   bewerten sich auf dem Geraet; nichts davon verlaesst das Handy.
   Siehe AUFTRAG-MARKT.md, Phase 2.                                     */
.schreib-hinweise { margin: 10px auto 4px; padding-left: 22px; max-width: 34ch;
  color: var(--muted); font-size: var(--fs-15); line-height: 1.7; }
.schreib-hinweise li { margin: 2px 0; }
.schreibfeld { min-height: 120px; resize: vertical; line-height: 1.6;
  font-family: inherit; text-align: left; }
.schreib-zaehler { text-align: right; color: var(--muted); margin-top: 6px; }

.pruef-liste { list-style: none; margin: 10px 0 4px; padding: 0;
  font-size: var(--fs-15); line-height: 1.7; text-align: left; }
.pruef-liste li { display: flex; gap: 8px; align-items: baseline; }
.pruef-liste li.ok { color: var(--green-ink); }
.pruef-liste li.fehlt { color: var(--danger-ink); }

.muster { margin-top: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--card-solid); border: 1px solid var(--line); text-align: left; }
.muster small { display: block; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.muster .c { font-weight: var(--fw-med); line-height: 1.6; }

/* Laeuft eine Aufnahme, muss man das sehen - ohne Blinken, das stoert
   beim Sprechen. */
.btn.rec-an { background: var(--danger-soft); color: var(--danger-ink);
  border-color: var(--danger); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .muster { background: rgba(255,255,255,.06); }
}
:root[data-theme="dark"] .muster { background: rgba(255,255,255,.06); }


/* =====================================================================
   Ansicht: Handy-Spalte oder vergroessert fuer den Bildschirm
   =====================================================================

   Die App ist als Handy-Spalte gebaut, und das bleibt sie. Auf einem
   grossen Bildschirm wirkt sie dadurch klein: alle 101 Schriftgroessen
   sind clamp(min, ..vw, max) und stehen dort laengst auf ihrem
   Hoechstwert - sie wachsen also nicht weiter mit.

   Die Spalte nur zu verbreitern macht es schlechter: der Text bliebe
   gleich gross und stuende verloren in der Flaeche. Richtig ist, die
   ganze Ansicht zu vergroessern - gleiches Layout, groesserer Massstab.
   Genau das leistet zoom am Wurzelelement, und zwar mit EINEM Wert
   statt 101 Aenderungen.

   Drei Stellen muessen gegengerechnet werden, weil Ansichtseinheiten
   (dvh, vw) sich auf das echte Fenster beziehen und vom Massstab
   anschliessend noch einmal multipliziert wuerden. Ohne die Korrektur
   entstuende auf jeder Seite ein Scrollbalken. */

:root { --ansicht: 1; zoom: var(--ansicht); }

/* "desktop": auch auf schmalen Fenstern vergroessern, weil der Nutzer
   es ausdruecklich so gewaehlt hat. */
:root[data-ansicht="desktop"] { --ansicht: 1.25; }

/* "auto" und "desktop" wachsen mit der Fensterbreite. Diese Regeln
   stehen NACH der Zeile darueber, damit sie bei breiten Fenstern
   gewinnen. */
@media (min-width: 900px) {
  :root[data-ansicht="auto"], :root[data-ansicht="desktop"] { --ansicht: 1.25; }
}
@media (min-width: 1300px) {
  :root[data-ansicht="auto"], :root[data-ansicht="desktop"] { --ansicht: 1.5; }
}
@media (min-width: 1700px) {
  :root[data-ansicht="auto"], :root[data-ansicht="desktop"] { --ansicht: 1.75; }
}
/* "handy" bleibt ausdruecklich bei 1 - auch am grossen Bildschirm. */
:root[data-ansicht="handy"] { --ansicht: 1; }

/* Die drei Gegenrechnungen. */
.app   { min-height: calc(100dvh / var(--ansicht)); }
.sheet { max-height: calc(86dvh / var(--ansicht)); }
.toast { max-width: calc((100vw / var(--ansicht)) - 32px); }